/* ═══════════════════════════════════════════════════════════════════
   gallery.css — filter bar, masonry grid, lightbox
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ FILTER BAR ════════════════════════════════════════════════════ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.filter-btn {
  padding: 9px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--divider);
  background: var(--card);
  color: var(--text-soft);
  font-size: .89rem;
  font-weight: 700;
  letter-spacing: .03em;
  transition: all var(--t);
}
.filter-btn:hover { border-color: var(--gold); color: var(--brown); transform: translateY(-2px); }
.filter-btn.is-active {
  background: var(--grad-gold);
  border-color: transparent;
  color: #2A1400;
  box-shadow: 0 6px 18px rgba(201, 146, 42, .3);
}
.filter-btn__count {
  display: inline-block;
  margin-left: 7px;
  opacity: .62;
  font-weight: 400;
  font-size: .8rem;
}

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.result-count { color: var(--warm-gray); font-size: .9rem; }

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 300px;
  justify-content: flex-end;
}
@media (max-width: 620px) {
  .gallery-toolbar { justify-content: center; }
  .toolbar-right { flex-wrap: wrap; justify-content: center; }
  .result-count { width: 100%; text-align: center; }
}

/* ═══ PHOTOS PER ROW ════════════════════════════════════════════════ */
.grid-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: var(--card);
  border: 1.5px solid var(--divider);
  border-radius: var(--r-pill);
  flex: none;
}
.grid-toggle__btn {
  width: 40px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--warm-gray);
  transition: background var(--t), color var(--t), transform var(--t);
}
.grid-toggle__btn:hover { background: #F6E7CE; color: var(--brown); }
.grid-toggle__btn.is-active {
  background: var(--grad-gold);
  color: #2A1400;
  box-shadow: 0 3px 10px rgba(201, 146, 42, .3);
}
.grid-toggle__btn:active { transform: scale(.94); }

.search-box { position: relative; flex: 1 1 220px; max-width: 340px; }
.search-box i {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  color: var(--warm-gray);
  font-size: .9rem;
  pointer-events: none;
}
.search-box .input { padding-left: 42px; border-radius: var(--r-pill); }

/* ═══ PHOTO GRID ════════════════════════════════════════════════════
   CSS Grid, deliberately, not CSS multi-column.

   Multi-column masonry looks lovely but iOS Safari mishandles it badly
   with break-inside: avoid — cards land in the wrong column, phantom
   gaps open up, and the whole thing reshuffles as images finish
   loading. A grid of fixed-ratio tiles cannot do any of that: every
   slot has its size before a single photo arrives, so nothing moves.

   The full uncropped photo is always one tap away in the viewer.      */
.gallery-grid {
  --gap: 18px;
  --cols: 3;
  --row: 6px;                 /* the fine ruler masonry heights snap to */
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: var(--row);
  column-gap: var(--gap);
  row-gap: 0;                 /* spacing comes from each card's margin */
  align-items: start;
}
@media (max-width: 1000px) { .gallery-grid { --cols: 2; } }
@media (max-width: 700px)  { .gallery-grid { --cols: 2; --gap: 12px; } }

.gallery-grid[data-cols="1"] { --gap: 16px; }
.gallery-grid[data-cols="3"] { --gap: 12px; }
.gallery-grid[data-cols="4"] { --gap: 10px; }

/* On a phone, small tiles should be pure photo — captions become
   unreadable slivers long before the images do.                       */
@media (max-width: 700px) {
  .gallery-grid[data-cols="2"] .photo-card__date { display: none; }
  .gallery-grid[data-cols="2"] .photo-card__meta { padding: 9px 12px; font-size: .8rem; }

  .gallery-grid[data-cols="3"] .photo-card__meta,
  .gallery-grid[data-cols="3"] .photo-card__badge { display: none; }
  .gallery-grid[data-cols="3"] .photo-card { border-radius: 10px; }
}

/* Empty and loading blocks take the whole width */
.gallery-grid.is-state { display: block; }

.photo-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  opacity: 0;
  animation: cardIn .5s var(--ease) forwards;
  -webkit-tap-highlight-color: transparent;

  align-self: start;
  margin-bottom: var(--gap);
  /* A sane height for the single frame before the spans are measured,
     and for the rare case where JavaScript never runs at all. */
  grid-row-end: span 34;
}
@keyframes cardIn { to { opacity: 1; } }

/* Each photo keeps its own shape. The ratio comes from the width and
   height recorded at upload time, so the space is reserved before the
   image arrives — which is what stops the grid reshuffling as photos
   load in. */
.photo-card__media {
  position: relative;
  overflow: hidden;
  background: #F1E2CC;
  aspect-ratio: var(--ratio, 3 / 4);
}
.photo-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

/* Hover effects only where a real pointer exists. On a touchscreen a
   tap leaves :hover stuck on, which is why a delete button was sitting
   on top of a photo after tapping it. */
@media (hover: hover) and (pointer: fine) {
  .photo-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: var(--gold);
  }
  .photo-card:hover .photo-card__media img { transform: scale(1.06); }
}
/* Touch devices get a quick press-in instead */
@media (hover: none) {
  .photo-card:active { transform: scale(.975); }
}

.photo-card__badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: rgba(21, 10, 2, .74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gold-bright);
  border: 1px solid rgba(232, 190, 106, .34);
}

.photo-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 18px 16px;
  background: linear-gradient(180deg, transparent 40%, rgba(21, 10, 2, .9));
  color: #fff;
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .photo-card:hover .photo-card__overlay { opacity: 1; }
}
/* No hover on a phone, so the caption would never be reachable.
   Show it softly and permanently instead. */
@media (hover: none) {
  .photo-card__overlay {
    opacity: 1;
    background: linear-gradient(180deg, transparent 55%, rgba(21, 10, 2, .82));
    padding: 18px 12px 10px;
  }
  .photo-card__overlay strong { font-size: .88rem; }
  .photo-card__overlay span { font-size: .74rem; }
  .gallery-grid[data-cols="3"] .photo-card__overlay,
  .gallery-grid[data-cols="4"] .photo-card__overlay { display: none; }
}
.photo-card__overlay strong { font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.35; }
.photo-card__overlay span { font-size: .82rem; color: rgba(245, 222, 179, .84); margin-top: 4px; }

.photo-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  font-size: .86rem;
}
.photo-card__caption {
  font-weight: 700;
  color: var(--brown);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-card__date { color: var(--warm-gray); white-space: nowrap; font-size: .8rem; }

.photo-card__delete {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(21, 10, 2, .74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #F2A29A;
  font-size: .85rem;
  transition: opacity var(--t), background var(--t);
}
@media (hover: hover) and (pointer: fine) {
  .photo-card__delete { opacity: 0; }
  .photo-card:hover .photo-card__delete { opacity: 1; }
  .photo-card__delete:hover { background: #9A2B22; color: #fff; }
}
/* On touch it must be permanently visible — but small and quiet, so it
   is never mistaken for part of the photo. */
@media (hover: none) {
  .photo-card__delete {
    opacity: .82;
    width: 30px; height: 30px;
    font-size: .72rem;
  }
  .photo-card__delete:active { background: #9A2B22; color: #fff; }
}

/* Load more */
.load-more-wrap { text-align: center; margin-top: 40px; }

/* ═══ LIGHTBOX ══════════════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  /* minmax(0, 1fr), not 1fr: a plain 1fr track refuses to shrink below
     the natural size of the photo inside it, which is what let tall
     images run off the bottom of the screen. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(10, 5, 1, .96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease), visibility .32s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(16px, 3vw, 30px);
  color: rgba(253, 246, 238, .8);
  font-size: .88rem;
}
.lightbox__counter { letter-spacing: .16em; font-size: .8rem; }

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 clamp(12px, 6vw, 80px);
  min-height: 0;
  overflow: hidden;
}
/* Filling the box and letting object-fit do the scaling is the one
   approach that cannot overflow, whatever the shape of the photo.
   No box-shadow here on purpose — it would draw a rectangle around the
   whole box rather than around the visible picture. */
.lightbox__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  animation: lbIn .4s var(--ease);
}
@keyframes lbIn { from { opacity: 0; transform: scale(.965); } }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(232, 190, 106, .28);
  color: var(--light-gold);
  font-size: 1.3rem;
  transition: background var(--t), transform var(--t), border-color var(--t);
}
.lightbox__nav:hover { background: var(--gold); color: #2A1400; border-color: var(--gold); }
.lightbox__nav--prev { left: clamp(8px, 2vw, 26px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 26px); }
.lightbox__nav:hover.lightbox__nav--prev { transform: translateY(-50%) translateX(-3px); }
.lightbox__nav:hover.lightbox__nav--next { transform: translateY(-50%) translateX(3px); }
@media (max-width: 620px) {
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.1rem; }
}

.lightbox__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--light-gold);
  font-size: 1.1rem;
  transition: background var(--t), transform var(--t);
}
.lightbox__close:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }

.lightbox__caption {
  padding: 18px clamp(16px, 3vw, 30px) 28px;
  text-align: center;
  color: rgba(253, 246, 238, .9);
}
.lightbox__caption h3 { color: #fff; font-size: 1.24rem; margin-bottom: 6px; }
.lightbox__caption .gu { color: var(--gold-bright); font-size: 1rem; margin-bottom: 6px; }
.lightbox__caption .lb-meta {
  font-size: .84rem;
  color: rgba(245, 222, 179, .66);
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.lb-download {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(232, 190, 106, .34);
  color: var(--light-gold);
  font-size: .84rem;
  font-weight: 700;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.lb-download:hover {
  background: var(--gold);
  color: #2A1400;
  border-color: var(--gold);
}

/* ═══ ALBUM CHIPS (home page strip) ═════════════════════════════════ */
.album-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}
.album-chip {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  border: 1px solid var(--divider);
  transition: transform var(--t), box-shadow var(--t);
}
.album-chip:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.album-chip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.album-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,10,2,.2), rgba(21,10,2,.78));
}
.album-chip__label { position: relative; z-index: 1; }
.album-chip__label strong { font-family: var(--font-heading); font-size: 1.16rem; display: block; }
.album-chip__label span { font-size: .8rem; color: var(--light-gold); }