/* JOE'S / Chef Joe at Roadhouse - GALLERY page (revamp pass 2, 8 Oct 2026).
   Linked after /assets/css/joes.css by the shell (_build-shell.py), on /gallery and
   /es/gallery only. Ported from the Gallery rules in the retired site.css.
   joes.css shapes .gallery-grid for the HOME page (a swipe strip on phones, captions laid
   over the photos); this page undoes both: a 2-up grid with every caption below its photo.
   Everything sits in @layer pages, so it outranks joes.css without !important. Tokens only.
   The image sizes="" in gallery.html are measured from these columns - change them together:
     phones 2-up  calc(50vw - 1.7rem)      (gutters 2 x 1.25rem, gap .9rem)
     40rem 3-up   calc(33.3vw - 1.45rem)
     64rem board  calc(25vw - 1.3rem), 270px from 72.5rem (the wrap caps at 1120px)
     the food board's 2 x 2 lead photo: calc(50vw - 1.7rem), 553px from 72.5rem */
@layer pages {
  .sub-gallery .page-head-copy > .sec-sub { margin-bottom: 0; }
  .sub-gallery .gal-h { margin: var(--sp-lg) 0 var(--sp-md); font-size: var(--step-2); color: var(--ink); }

  /* ── Photos: a 2-up grid on phones, captions below ── */
  .sub-gallery .gallery-grid {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-md) var(--sp-sm); overflow: visible; overscroll-behavior-x: auto;
    scroll-snap-type: none; scroll-padding-inline: 0; margin-inline: 0; padding: 0;
  }
  .sub-gallery .gallery-item { scroll-snap-align: none; }
  .sub-gallery .gallery-item .shot-cap {
    position: static; margin: .5rem 0 0; padding: 0; border-radius: 0; background: none;
    pointer-events: auto; color: var(--muted); font-size: var(--step--1); font-weight: 400; line-height: 1.35;
  }
  /* A 3-photo group closes on its caption beside the photo - no empty half row. */
  .sub-gallery .gallery-grid > .gallery-item:nth-child(3):last-child {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-sm); align-items: end;
  }
  .sub-gallery .gallery-grid > .gallery-item:nth-child(3):last-child > .shot-cap { margin: 0; }

  /* ── The close: Instagram line, the two buttons, the Clover note ── */
  .sub-gallery .page-end { margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--line); }
  .sub-gallery .page-end > .gallery-follow { margin-top: 0; }
  .sub-gallery .page-end > .clover-note { margin-inline: auto; text-align: center; }

  @media (min-width: 40rem) {
    .sub-gallery .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sub-gallery .gallery-grid > .gallery-item:nth-child(3):last-child { grid-column: auto; display: block; }
    .sub-gallery .gallery-grid > .gallery-item:nth-child(3):last-child > .shot-cap { margin-top: .5rem; }
  }

  @media (min-width: 64rem) {
    /* The head: the title beside its lede, not a lonely row. */
    .sub-gallery .page-head-copy {
      display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      column-gap: var(--sp-xl); align-items: end;
    }
    .sub-gallery .page-head-copy > .eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
    .sub-gallery .page-head-copy > h1 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
    .sub-gallery .page-head-copy > .sec-sub { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
    /* Each group is one 4-column board: its title is the first tile (the printed menu's
       section label) and the photos fill the rest, so the five groups read as one mosaic:
       food 4 rows (a 2 x 2 lead photo + 11), bar / flat-top / trailer 1 row each, the Tavern
       2 rows (the title tile over its note). */
    .sub-gallery .gal-group {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--sp-md) var(--sp-sm); margin-top: var(--sp-md);
    }
    .sub-gallery .page-head-copy + .gal-group { margin-top: var(--sp-lg); }
    .sub-gallery .gal-group > .gallery-grid { display: contents; }
    /* Tiles take the photo frame (4:3, top-aligned) so they line up with the pictures and the
       captions run on beneath; a long title may grow its tile rather than overflow. */
    .sub-gallery .gal-group > .gal-h {
      grid-column: 1; grid-row: 1; display: grid; align-content: end; align-self: start;
      width: auto; aspect-ratio: 4 / 3; margin: 0; padding: var(--sp-md);
      border-top: 3px solid var(--ember); border-radius: var(--r); background: var(--tint);
    }
    .sub-gallery .gal-group > .sec-sub {
      grid-column: 1; grid-row: 2; display: grid; align-content: center; align-self: start;
      max-width: none; aspect-ratio: 4 / 3; margin: 0; padding: var(--sp-sm) var(--sp-md);
      border-radius: var(--r); background: var(--tint); font-size: var(--step--1); line-height: 1.5;
    }
    /* The 12-photo group leads with its first photo at 2 x 2, filling both rows' height. */
    .sub-gallery .gallery-grid:has(> .gallery-item:nth-child(12)) > .gallery-item:first-child {
      grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column;
    }
    .sub-gallery .gallery-grid:has(> .gallery-item:nth-child(12)) > .gallery-item:first-child > .gallery-link { flex: 1 1 auto; min-height: 0; }
    .sub-gallery .gallery-grid:has(> .gallery-item:nth-child(12)) > .gallery-item:first-child img { height: 100%; aspect-ratio: auto; }
    /* The close as one strip: Instagram line | the buttons | the Clover note. */
    .sub-gallery .page-end {
      display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1fr);
      column-gap: var(--sp-lg); align-items: center;
    }
    .sub-gallery .page-end > .gallery-follow { margin: 0; text-align: left; }
    .sub-gallery .page-end > .page-cta { margin: 0; flex-wrap: nowrap; }
    .sub-gallery .page-end > .clover-note { margin: 0; text-align: left; }
  }
}