/* ============================================================
   MIG Gallery — Direction D "Immersive wall" (Phase 7)
   Builds on tokens.css + theme.css + mig-watermark.css.
   Cinematic crossfading hero + gapless justified mosaic. Tiles are
   .mig-photo so the watermark (mig-watermark.css) + deterrents
   (mig-watermark.js) apply for free.
   ============================================================ */

body.mig-gallery-page { background: var(--mh-navy); }

/* ---- transparent header over the hero, solidifies on scroll (scoped) ---- */
body.mig-gallery-page .mig-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .3s var(--ease-out-expo), border-color .3s;
}
body.mig-gallery-page .mig-header.is-stuck {
  background: rgba(14, 27, 50, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: rgba(253, 251, 247, 0.12);
}
body.mig-gallery-page .mig-nav__brand-name,
body.mig-gallery-page .mig-nav__link,
body.mig-gallery-page .mig-nav__search-toggle,
body.mig-gallery-page .mig-nav__search-label,
body.mig-gallery-page .mig-nav__toggle { color: var(--mh-cream); }
body.mig-gallery-page .mig-header .btn--outline {
  color: var(--mh-cream); border-color: rgba(253, 251, 247, 0.5);
}
body.mig-gallery-page .mig-header .btn--outline:hover {
  color: var(--mh-navy); background: var(--mh-cream); border-color: var(--mh-cream);
}
/* OI-01 2026-06-09: the gallery header is dark in BOTH states (transparent over the
   navy hero + .is-stuck dark navy), so the deep terracotta active/hover link failed
   AA on navy (#984C34 = 2.29:1). Use the light terracotta accent (the same #e08b6f
   used site-wide for terracotta-on-navy) = 5.41:1, still clearly the active accent.
   NOTE: the mobile OPEN hamburger panel below is a LIGHT sand surface, so its active
   link stays deep terracotta (#984C34, AA-clean on sand) — unchanged. */
body.mig-gallery-page .mig-nav__link:hover,
body.mig-gallery-page .mig-nav__link--active { color: #e08b6f; border-bottom-color: #e08b6f; } /* OI-01b: also light the active underline (was #984C34 = 2.29:1, fails 1.4.11 non-text 3:1) to match the text */

/* FINISH-PLAN 2.5 / punch #10 — on mobile the open hamburger panel has a light
   (sand) background, so the cream nav colours the dark hero needs render
   white-on-white. Restore ink colour for everything inside the OPEN panel.
   (The header bar above the panel stays transparent over the navy hero, so its
   brand mark + toggle keep the cream treatment.) */
@media (max-width: 900px) {
  body.mig-gallery-page .mig-nav__links.is-open .mig-nav__link,
  body.mig-gallery-page .mig-nav__links.is-open .mig-nav__search-toggle,
  body.mig-gallery-page .mig-nav__links.is-open .mig-nav__search-label,
  body.mig-gallery-page .mig-nav__links.is-open .mig-nav__search-input {
    color: var(--mh-navy);
  }
  /* keep the active page + hover highlighted in terracotta inside the panel */
  body.mig-gallery-page .mig-nav__links.is-open .mig-nav__link--active,
  body.mig-gallery-page .mig-nav__links.is-open .mig-nav__link:hover {
    color: var(--mh-terracotta);
  }
}

.mig-gallery { margin: 0; background: var(--mh-navy); color: var(--mh-cream); }
.mig-gallery img { display: block; max-width: 100%; }

/* ============================================================
   CINEMATIC HERO
   ============================================================ */
.ghero {
  position: relative; height: 92vh; min-height: 540px; overflow: hidden;
  background: var(--mh-navy); container-type: inline-size;
}
.ghero__slides { position: absolute; inset: 0; }
.ghero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; }
.ghero__slide.is-on { opacity: 1; }
.ghero__slide img { width: 100%; height: 100%; object-fit: cover; animation: ghero-kb 18s ease-out infinite alternate; }
@keyframes ghero-kb { from { transform: scale(1.03); } to { transform: scale(1.13); } }
.ghero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,27,50,0.45) 0%, rgba(14,27,50,0.05) 30%, rgba(14,27,50,0.10) 55%, rgba(14,27,50,0.85) 100%);
}
.ghero__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) 9vh; }
.ghero__in { max-width: 1400px; margin: 0 auto; }
.ghero__eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--mh-terracotta);
}
.ghero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 6.5vw, 92px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--mh-cream); margin: 14px 0 18px; max-width: 18ch;
  text-shadow: 0 2px 30px rgba(14,27,50,0.4);
}
.ghero__dek, .ghero__dek p {
  font-family: var(--font-body); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6;
  color: rgba(253,251,247,0.92); max-width: 56ch; margin: 0;
}
/* dek link (e.g. Instagram) — terracotta + underline so it reads on the dark hero */
.ghero__dek a {
  color: var(--mh-terracotta); text-decoration: underline; text-underline-offset: 3px;
  font-weight: 500;
}
.ghero__dek a:hover { color: var(--mh-cream); }
.ghero__cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: rgba(253,251,247,0.7); font-size: 26px; animation: ghero-bob 2s ease-in-out infinite;
}
@keyframes ghero-bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }
.ghero__dots { position: absolute; right: var(--gutter); bottom: 9vh; display: flex; gap: 16px; }
/* QA9 A3 (2026-06-11, Samuel fix-now): WCAG 2.5.8 — visible dot stays 8px; the TAP TARGET
   becomes 24×24 via padding. CAUTION: background-clip MUST come AFTER any background
   shorthand (the shorthand resets clip to border-box — v1 of this fix painted the full
   24px boxes as huge blobs on mobile, caught by Samuel's iPhone pass). */
.ghero__dot { width: 8px; height: 8px; box-sizing: content-box; padding: 8px; border-radius: 50%; background: rgba(253,251,247,0.4); background-clip: content-box; border: 0; cursor: pointer; transition: all .3s; }
.ghero__dot.is-on { background: var(--mh-terracotta); background-clip: content-box; transform: scale(1.3); }
/* Mobile (QA9 B7 v2 — Samuel's iPhone shot showed the row still sitting ON the intro
   text's last line): tighten the row AND drop it into the free band BELOW the text
   (the text block ends ~76px above the hero bottom at 390). */
@media (max-width: 600px) {
  .ghero__dots { gap: 0; bottom: 18px; }
}
/* hero watermark — REMOVED at Samuel's instruction (QA9, 2026-06-11: "we don't need a
   watermark on the hero images"). The tile/lightbox watermark (mig-watermark.css,
   his locked Option B image protection) is untouched. */

/* ============================================================
   FILTER BAR — frosted, sticky under the fixed header
   ============================================================ */
.gfilters {
  position: sticky; top: var(--nav-height, 64px); z-index: 40;
  background: rgba(14,27,50,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(253,251,247,0.10);
}
.gfilters__in {
  max-width: 1400px; margin: 0 auto; padding: 14px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.flabel { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(253,251,247,0.5); }
.fgroup { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--mh-cream);
  background: transparent; border: 1px solid rgba(253,251,247,0.25); border-radius: 999px;
  padding: 6px 15px; cursor: pointer; transition: all .18s var(--ease-out-expo); line-height: 1;
  text-decoration: none; display: inline-block;
}
.chip:hover { border-color: var(--mh-cream); text-decoration: none; color: var(--mh-cream); }
.chip.is-on { background: var(--mh-cream); color: var(--mh-navy); border-color: var(--mh-cream); }
.chip--theme.is-on { background: var(--mh-terracotta); color: var(--mh-cream); border-color: var(--mh-terracotta); }
.chip--theme.is-on::before { content: "✓ "; }
.fcount { margin-left: auto; font-family: var(--font-body); font-size: 12px; color: rgba(253,251,247,0.6); }
.fclear { font-family: var(--font-body); font-size: 12px; color: var(--mh-terracotta); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fbtn { display: none; }

/* ============================================================
   THE WALL — gapless justified mosaic (sizes set in JS)
   ============================================================ */
.wall { display: flex; flex-wrap: wrap; gap: 0; background: var(--mh-navy); align-content: flex-start; }
.wtile {
  margin: 0; flex: none; position: relative; overflow: hidden; cursor: pointer;
  background: var(--mh-navy-2); container-type: inline-size;
  opacity: 0; transform: translateY(14px); display: block;
}
.wtile.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); }
/* tile content is a real <a> to the source post (8.7); fills the tile */
.wtile__a { display: block; width: 100%; height: 100%; line-height: 0; text-decoration: none; color: inherit; }
.wtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out-expo); }
.wtile:hover { z-index: 2; }
.wtile:hover img { transform: scale(1.06); }
.wtile__a:focus-visible { outline: 3px solid var(--mh-terracotta); outline-offset: -3px; z-index: 2; }
/* caption: hover-only on desktop; always-on for touch; always in the DOM (SEO) */
.wtile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(14,27,50,0.86)); pointer-events: none;
  opacity: 0; transition: opacity .35s var(--ease-out-expo);
}
.wtile:hover .wtile__cap, .wtile__a:focus-visible .wtile__cap { opacity: 1; }
.wtile__loc { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mh-terracotta); }
.wtile__txt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--mh-cream);
  line-height: 1.3; margin-top: 4px; text-shadow: 0 1px 12px rgba(14,27,50,0.5);
}
@media (hover: none) { .wtile__cap { opacity: 1; } }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.gempty { text-align: center; padding: 80px var(--gutter); }
.gempty__msg { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--mh-cream); margin: 0 0 20px; }
.gempty__btn, .gdrawer__apply {
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 13px; color: var(--mh-cream); background: var(--mh-terracotta); border: 0;
  border-radius: 999px; padding: 12px 24px; cursor: pointer;
}

/* ============================================================
   PAGINATION (becomes scroll-load when JS is on)
   ============================================================ */
.gpaging { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; padding: 40px var(--gutter); }
.gpaging__link {
  font-family: var(--font-body); font-size: 14px; color: var(--mh-cream); text-decoration: none;
  border: 1px solid rgba(253,251,247,0.25); border-radius: 8px; padding: 8px 13px; min-width: 40px; text-align: center;
  transition: all .18s var(--ease-out-expo);
}
.gpaging__link:hover { border-color: var(--mh-cream); }
.gpaging__link.is-current { background: var(--mh-cream); color: var(--mh-navy); border-color: var(--mh-cream); }
.gpaging__gap { color: rgba(253,251,247,0.5); padding: 0 4px; }
.js-on .gpaging { display: none; }            /* hidden once scroll-load is active */
.gload { text-align: center; padding: 30px; color: rgba(253,251,247,0.6); font-family: var(--font-body); font-size: 13px; }

/* ============================================================
   GALLERY FOOTER LINE (© + terms)
   ============================================================ */
.gfoot { background: var(--mh-navy-2); padding: 36px var(--gutter); }
.gfoot p { margin: 0 auto; max-width: 1400px; font-family: var(--font-body); font-size: 12.5px; color: rgba(253,251,247,0.7); }
.gfoot__copy a { color: var(--mh-cream); text-decoration: underline; text-underline-offset: 3px; }
.gfoot__count { margin-top: 6px; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
dialog.glb { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; background: rgba(14,27,50,0.96); color: var(--mh-cream); }
dialog.glb::backdrop { background: rgba(14,27,50,0.7); }
.glb__stage { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto auto; }
.glb__imgwrap { position: relative; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 6vh 6vw 0; }
.glb__fig { position: relative; display: inline-block; margin: 0; line-height: 0; container-type: normal; }
.glb__fig img { display: block; max-width: 88vw; max-height: 76vh; width: auto; height: auto; border-radius: 2px; }
.glb__imgwrap.is-pano { overflow-x: auto; justify-content: flex-start; align-items: flex-end; }
.glb__imgwrap.is-pano .glb__fig img { max-height: 70vh; max-width: none; height: 70vh; width: auto; }
/* lightbox watermark — shrink-wrap figure, size in vw (no container units) */
.glb__fig.mig-photo::after { right: 14px; bottom: 11px; font-size: clamp(11px, 1.3vw, 17px); }
.glb__meta { padding: 14px 6vw 30px; text-align: center; }
.glb__loc { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mh-terracotta); }
.glb__cap { font-family: var(--font-display); font-style: italic; font-size: 19px; margin: 7px 0 10px; color: var(--mh-cream); }
.glb__link { font-family: var(--font-body); font-size: 12.5px; color: var(--mh-cream); border-bottom: 1px solid var(--mh-terracotta); padding-bottom: 2px; text-decoration: none; }
.glb__link:hover { color: var(--mh-terracotta); }
.glb__pan { display: none; text-align: center; font-family: var(--font-body); font-size: 12px; font-style: italic; color: rgba(253,251,247,0.66); padding: 10px 6vw 0; }
.glb__imgwrap.is-pano ~ .glb__pan { display: block; }
.glb__btn { position: absolute; background: transparent; border: 1px solid rgba(253,251,247,0.3); color: var(--mh-cream); width: 52px; height: 52px; border-radius: 50%; font-size: 22px; cursor: pointer; top: 50%; transform: translateY(-50%); z-index: 5; transition: background .18s; }
.glb__btn:hover { background: rgba(253,251,247,0.12); }
/* Arrows pinned to the screen edges (the full-screen-lightbox standard: large
   predictable targets that never cover the photo, consistent across aspect
   ratios incl. panoramas). Samuel's call 2026-06-01. */
.glb__prev { left: 18px; } .glb__next { right: 18px; }
.glb__close { position: absolute; top: 18px; right: 20px; background: none; border: 0; color: var(--mh-cream); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; z-index: 5; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 760px) {
  .ghero { height: 82vh; min-height: 460px; }
  .gfilters .fgroup, .gfilters .fcount, .gfilters .fclear { display: none; }
  .fbtn {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body);
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--mh-navy); background: var(--mh-cream); border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  }
  .fbtn .n { background: var(--mh-terracotta); color: var(--mh-cream); border-radius: 999px; padding: 1px 7px; font-size: 11px; }
  .glb__btn { width: 44px; height: 44px; } .glb__fig img { max-height: 64vh; }
}

.gdrawer { position: fixed; inset: 0; z-index: 60; display: none; }
.gdrawer.is-open { display: block; }
.gdrawer__scrim { position: absolute; inset: 0; background: rgba(14,27,50,0.6); }
.gdrawer__sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--mh-cream); border-radius: 16px 16px 0 0; padding: 20px var(--gutter) 28px; max-height: 80vh; overflow: auto; }
.gdrawer__sheet .gdrawer__title { font-family: var(--font-display); font-size: 20px; margin: 0 0 16px; color: var(--mh-navy); }
.gdrawer .flabel { color: var(--mh-ink-2); }
.gdrawer .chip { color: var(--mh-navy); border-color: var(--mh-rule-strong); }
.gdrawer .chip.is-on { background: var(--mh-navy); color: var(--mh-cream); }
.gdrawer .chip--theme.is-on { background: var(--mh-terracotta); border-color: var(--mh-terracotta); color: var(--mh-cream); }
.gdrawer .fgroup { display: flex !important; margin-bottom: 18px; }
.gdrawer__apply { width: 100%; margin-top: 8px; border-radius: 999px; padding: 14px; }

@media (prefers-reduced-motion: reduce) {
  .ghero__slide img { animation: none; }
  .ghero__cue { animation: none; }
  .wtile { opacity: 1; transform: none; }
}