/* ==========================================================================
   Gallery — responsive grid on the site's navy theme. Not a fixed Figma frame,
   so it uses fluid units rather than the --px scale.
   ========================================================================== */
.gal { color: var(--white); }

.gal-hero {
  text-align: center;
  /* Reduced top padding: the tagline now sits just above the title, so the
     gap between them is ~half what it was (rest of the gap is the tagline's
     own bottom padding in nav.css). */
  padding: clamp(14px, 2vw, 26px) 24px clamp(28px, 4vw, 48px);
}
.gal-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 74px);
  line-height: 1.05;
}
.gal-hero__lead {
  margin: clamp(10px, 1.5vw, 16px) auto 0;
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.6vw, 19px);
  opacity: 0.85;
}

.gal-grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px clamp(60px, 8vw, 120px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
/* .gal-item is a <button> (so tiles are keyboard-focusable for the lightbox);
   the reset below makes it render exactly like the old <figure>. */
.gal-item {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  background: #1a2740;
}
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.gal-item:hover img { transform: scale(1.06); }

/* Venue caption — a "<venue>_…" filename prefix (page.php) tags the photo; this
   bar names it. Shown on the mobile deck cards and in the desktop expanded view;
   hidden on the desktop wall tiles (see the two media queries below). */
.gal-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  pointer-events: none; /* never intercept a tap/click on the photo */
}

/* Swipe affordance — a persistent "❮ Swipe ❯" pill on the mobile deck. Hidden
   by default (display:block only inside the mobile query below), so it never
   appears on the desktop wall or in the expanded view. */
.gal-swipe-hint { display: none; }

/* Pan arrows exist only on the desktop wall. */
.gal-wall { position: relative; }
.gal-wall__arrow { display: none; }

.gal-empty {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 120px;
  text-align: center;
  opacity: 0.8;
}

/* ==========================================================================
   Mobile (≤640px): Tinder-style card deck — one big photo with the next two
   peeking behind; swipe either way for the next card, loops forever
   (gallery.js drives the stacking/drag; card transforms are set inline).
   ========================================================================== */
@media (max-width: 600px) { /* matches the nav's mobile breakpoint */
  .gal-grid {
    display: block;
    position: relative;
    height: min(64vh, 520px);
    max-width: none;
    padding: 0;
    /* clearance must be MARGIN, not padding: the abs-positioned cards anchor
       to the padding box, so padding wouldn't push the tilted peeks clear.
       The deck peeks UPWARD now, so the larger clearance sits on top (keeps
       the peeks off the hero lead); a smaller bottom margin holds the deck
       off the footer. */
    margin: clamp(52px, 13vw, 88px) 0 clamp(44px, 9vw, 72px);
    overflow: visible;
  }
  .gal-item {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 86%;
    height: 100%;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    touch-action: pan-y; /* horizontal drags are ours; the page still scrolls */
    opacity: 0;          /* gallery.js reveals the top three */
    cursor: default;
    transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.3s ease;
  }
  .gal-item.is-dragging { transition: none; }
  .gal-item:first-child { opacity: 1; } /* no-JS fallback: show the first photo */
  .gal-item img {
    -webkit-user-drag: none;
    user-select: none;
    transform: none; /* no desktop hover zoom on the deck */
  }

  /* Persistent swipe hint, centred over the deck and above the top card
     (z-index 11 > the card's 10). pointer-events:none so it never blocks a
     swipe; sits clear of the bottom-left caption. */
  .gal-swipe-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 50%;
    top: 16px; /* near the top of the top card, below the peeks that stick out above */
    transform: translateX(-50%);
    z-index: 11;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(8, 14, 28, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }
  .gal-swipe-hint__chev {
    font-size: 15px;
    line-height: 1;
    /* gentle OUTWARD drift so the pair reads as "swipe either way" */
    animation: gal-swipe-chev-r 1.6s ease-in-out infinite;
  }
  .gal-swipe-hint__chev:first-child { animation-name: gal-swipe-chev-l; }
  @keyframes gal-swipe-chev-r {
    0%, 100% { transform: translateX(0);   opacity: 0.55; }
    50%      { transform: translateX(3px); opacity: 1; }
  }
  @keyframes gal-swipe-chev-l {
    0%, 100% { transform: translateX(0);    opacity: 0.55; }
    50%      { transform: translateX(-3px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gal-swipe-hint__chev { animation: none; opacity: 0.85; }
  }
}

/* ==========================================================================
   Desktop-only (≥641px): Apple TV wall — exactly 3 rows, edge to edge
   (--gal-cols is set inline by page.php as ceil(count/3)). Entrance slides
   tiles out left/right from the centre (gallery.js); hover pops the tile;
   click expands the photo to a 3×3 tile block (2×3 if portrait) that stays
   inside the gallery section. Mobile (≤640px) keeps the plain grid above.
   ========================================================================== */
@media (min-width: 601px) { /* matches the nav's desktop breakpoint */
  /* Tile height lives on the wrapper so the arrows can centre on the rows. */
  .gal-wall { --gal-th: clamp(176px, 24vh, 304px); } /* 30vh wall minus 20% */
  .gal-wall__arrow {
    display: grid;
    place-items: center;
    position: absolute;
    top: calc((3 * var(--gal-th) + 20px) / 2); /* centre of the 3 rows */
    transform: translateY(-50%);
    z-index: 4;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: rgba(8, 14, 28, 0.6);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.15s ease;
  }
  .gal-wall__arrow:hover { opacity: 1; background: rgba(8, 14, 28, 0.8); }
  .gal-wall__arrow--prev { left: 14px; }
  .gal-wall__arrow--next { right: 14px; }
  .gal-wall__arrow img { width: 26px; height: 24px; }
  .gal-wall__arrow--prev img { transform: rotate(-90deg); }
  .gal-wall__arrow--next img { transform: rotate(90deg); }
  /* Arrows get out of the way while a photo is expanded. */
  .gal-wall:has(.gal-grid.is-expanded) .gal-wall__arrow { display: none; }

  .gal-grid {
    position: relative; /* anchors the in-section expand overlay */
    max-width: none;
    /* 3 big rows; the wall is wider than the screen and pans sideways.
       Tile height scales with the viewport; width follows at 4:3. */
    padding: 0 10px clamp(40px, 5vw, 80px);
    display: grid;
    grid-template-columns: none; /* cancel the base auto-fill template */
    grid-template-rows: repeat(3, var(--gal-th));
    grid-auto-flow: column;
    grid-auto-columns: calc(var(--gal-th) * 4 / 3);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    cursor: grab;
  }
  .gal-grid.is-dragging { cursor: grabbing; scroll-behavior: auto; }

  /* Wall narrower than the window: 15 photos make exactly 5 columns, and the
     tile size follows the window's HEIGHT (--gal-th), so a wide-and-short
     window leaves the wall short of the right edge. A scroll container packs
     its tracks from the left, which piles all that slack on one side. When the
     wall fits, centre it and drop the pan affordances - there is nothing left
     to pan to. gallery.js sets .is-static from the tiles' own layout width. */
  .gal-wall.is-static .gal-grid { justify-content: center; cursor: default; }
  .gal-wall.is-static .gal-wall__arrow { display: none; }
  .gal-item {
    aspect-ratio: auto; /* the grid cell defines the shape here */
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  /* Hover pop: lift the whole tile above its neighbours. */
  .gal-item:hover,
  .gal-item:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    z-index: 2;
  }
  .gal-item:hover img { transform: none; } /* whole tile pops; no inner zoom */
  /* The wall stays clean — the venue caption only shows once a photo is
     expanded (gallery.js injects a .gal-cap into the .gal-expand box). */
  .gal-item .gal-cap { display: none; }

  /* In-section expand: dim the wall, grow the photo over it. */
  .gal-expand-backdrop {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(8, 14, 28, 0.72);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .gal-expand {
    position: absolute;
    z-index: 6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    background: #1a2740;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.2s ease;
  }
  .gal-grid.is-expanded .gal-expand-backdrop { opacity: 1; }
  .gal-grid.is-expanded .gal-expand { transform: scale(1); opacity: 1; }
  .gal-expand img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Venue caption inside the expanded photo — slightly larger than the mobile
     card version to suit the big view. */
  .gal-expand .gal-cap { display: block; padding: 40px 20px 16px; font-size: 17px; }
  .gal-expand__close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    background: rgba(8, 14, 28, 0.55);
    border-radius: 50%;
    color: var(--white);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.9;
  }
  .gal-expand__close:hover { opacity: 1; }
}