/* =========================
   Global variables
   ========================= */
:root {
  /* Album color filter for all modes */
  --image-filter: grayscale(100%) sepia(50%) hue-rotate(180deg) saturate(180%);
}

/* =========================
   Light mode variables
   ========================= */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    /* Base colors */
    --background: #f6f5f3;
    --text: #2d2f33;
    --link: #1d7bb8;
    --link-hover: #145a86;
    --accent-1: #ebe9e6;
    --accent-2: #d0cdca;
    --accent-3: #7a7c80;
    --highlight: #e4e1de;

    /* Album gradients */
    --album-gradient: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.4) 40%,
      rgba(0, 0, 0, 0) 100%
    );

    --album-gradient-hover: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.1) 100%
    );

    /* Blue overlay color */
    --blue-overlay: rgba(29, 123, 184, 0.5);
  }
}

/* =========================
   Dark mode variables
   ========================= */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Base colors */
    --background: #1e242b;
    --text: #e4e4e4;
    --link: #66c2ff;
    --link-hover: #81d4fa;
    --accent-1: #2c3239;
    --accent-2: #454b52;
    --accent-3: #b2b3b5;
    --highlight: #3a4148;

    /* Album gradients */
    --album-gradient: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.5) 40%,
      rgba(0, 0, 0, 0) 100%
    );

    --album-gradient-hover: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.55) 50%,
      rgba(0, 0, 0, 0.1) 100%
    );

    /* Blue overlay color */
    --blue-overlay: rgba(102, 194, 255, 0.45);
  }
}

/* =========================
   Albums layout
   ========================= */
.albums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* =========================
   Album cards as links
   ========================= */
.album-bg {
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 2rem;
  border-radius: .6rem;
  color: #fff;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border: 1px solid var(--accent-2);
  filter: none;

  /* Smooth timing variables */
  --zoom-target: 108%;
  --zoom-in: 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  --zoom-out: .5s ease;

  transition:
    box-shadow .3s ease,
    background-size var(--zoom-out),
    border-color .3s ease,
    filter .5s ease;
  will-change: background-size, filter;
}

/* =========================
   Kill default link underlines
   ========================= */
.album-bg,
.album-bg *,
.album-bg:link,
.album-bg:visited {
  text-decoration: none !important;
}

/* =========================
   Gradient overlay
   ========================= */
.album-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--album-gradient-hover);
  z-index: 1;
  transition: background .4s ease, opacity .4s ease;
}

/* =========================
   Blue overlay
   ========================= */
.album-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--blue-overlay);
  z-index: 1;
  pointer-events: none;
  transition: background-color .4s ease;
}

/* =========================
   Text above the gradient
   ========================= */
.album-bg h3,
.album-bg p {
  position: relative;
  display: inline-block;
  z-index: 2;
  margin: .4em 0 0;
  color: #fff;
  mix-blend-mode: screen;
  transition: filter 0.3s ease;
}

.album-bg h3::after,
.album-bg p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

/* =========================
   Hover + keyboard focus
   ========================= */
.album-bg:hover,
.album-bg:focus {
  background-size: 112%;
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
  border-color: var(--accent-3);
  filter: brightness(1.25) saturate(1.25);

  transition:
    box-shadow .35s ease,
    background-size var(--zoom-in),
    border-color .3s ease,
    filter .5s ease;
}

/* Lighter gradient overlay on hover */
.album-bg:hover::before,
.album-bg:focus::before {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

/* Lighter blue overlay on hover */
.album-bg:hover::after,
.album-bg:focus::after {
  background-color: rgba(29, 123, 184, 0.2);
}

.album-bg:hover h3,
.album-bg:hover p,
.album-bg:focus h3,
.album-bg:focus p {
  filter: brightness(1.2);
}

.album-bg:hover h3::after,
.album-bg:hover p::after,
.album-bg:focus h3::after,
.album-bg:focus p::after {
  transform: scaleX(1);
}

/* =========================
   Click/press down
   ========================= */
.album-bg:active {
  background-size: calc(112% - 3%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition-duration: .18s;
}

/* =========================
   Small screens tweak
   ========================= */
@media (max-width: 600px) {
  .album-bg {
    min-height: 180px;
    padding: 1.2rem 1.8rem;
  }
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .album-bg,
  .album-bg::before,
  .album-bg::after {
    transition: none;
  }
}

/* =========================
   Number of photos
   ========================= */
.album-count {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  font-family: var(--mono-space-font);
  font-size: .9rem;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 0.3rem;
  backdrop-filter: blur(4px);
  line-height: 1;
  filter: none;
  opacity: 0.85;
  transition: background 0.3s ease, opacity 0.3s ease, filter 0.5s ease;
}

.album-bg:hover .album-count,
.album-bg:focus .album-count {
  background: rgba(0, 0, 0, 0.65);
  opacity: 1;
  filter: none;
}

/* =========================
   Album images
   ========================= */
.people {background-image: url("/uploads/2025/8b2471e44a.jpg")}
.animals {background-image: url("/uploads/2025/db35c89abb.jpg")}
.nature {background-image: url("/uploads/2025/img-5551.jpg")}
.urban {background-image: url("/uploads/2025/1ad40f3c58.jpg")}
.black-white {background-image: url("/uploads/2025/28e5a98280.jpg")}
.pride-2024 {background-image: url("/uploads/2025/pxl-20240803-1311252912-original.jpg")}
.pride-2025 {background-image: url("/uploads/2025/img-2095.jpg")}
.blaugust-2025 {background-image: url("/uploads/2025/img-4263.jpg")}
.mb-june-2025 {background-image: url("/uploads/2025/8bcd8820-0c5f-44e3-a80e-a5128eff9e97-original.jpg")}

/* =========================
   Search
   ========================= */
.nav-item:last-of-type {
  margin-left: 1rem;
}
.nav-item a[href$="/search/"] {
  text-indent: -9999px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1;
  border-radius: 50%;
  padding: 3px;
}
.nav-item a[href$="/search/"]:after {
  color: var(--accent-3);
  font-family: "Phosphor";
  font-display: swap;
  text-indent: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-left: auto;
  line-height: 0;
  font-size: 1.6rem;
}
.nav-item > a[href$="/search/"]:hover {
  text-decoration: none;
}
.nav-item a:after {
  transition: all 0.2s ease-in-out;
}
.nav-item a[href$="/search/"]:after {
  content: "\e30c" / "Search";
}
.nav-item a[href$="/search/"]:hover:after {
  color: var(--link-hover);
}

@media only screen and (max-width: 768px) {
  .nav-item {margin-left: 0}
  .nav-item a[href$="/search/"] {
    text-indent: 0;
    display: block;
    margin: 0;
  }
  .nav-item a[href$="/search/"]:after {
    content: "";
  }
  .nav-item > a[href$="/search/"]:hover {
    text-decoration: underline;
    background: var(--background);
  }
}

/* =========================
   Misc
   ========================= */
img {
  width: 100%;
}
article {
  margin-bottom: 4rem;
}
article p:first-of-type + p {
  display: none;
}
.e-content img {
  margin: 1rem 0 0;
}