/* ==========================================================================
   Gallery page (gallery.html)
   Loaded after v2.css; reuses its tokens, page-hero, page-section, vcard
   and cta-band. Only gallery-specific layout lives here.
   ========================================================================== */

/* ---------- Section: page-hero ---------- */
.gallery-hero .page-hero__bg img { object-position: 40% 50%; }

/* ---------- Section: gallery-people (four photos, slanted mosaic) ---------- */
.people {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.people__figure { position: relative; }
.people__link {
  display: block;
  color: var(--white);
}
.people__link:focus-visible { outline-offset: 4px; }
.people__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ice);
}
.people__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-glide);
}
/* functional scrim so the caption stays legible */
.people__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 7, 23, 0.75) 0%, rgba(16, 7, 23, 0.3) 30%, rgba(16, 7, 23, 0) 55%);
  pointer-events: none;
}
.people__link:hover img { transform: scale(1.04) translateX(-1%); }
.people__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1rem, 0.75rem + 1.25vw, 2rem);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-stretch: var(--stretch);
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.75rem);
  line-height: 1;
  color: var(--white);
  pointer-events: none;
}

@media (min-width: 48em) {
  .people {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .people__item:nth-child(1) { grid-column: 1 / 8; }
  .people__item:nth-child(2) { grid-column: 8 / 13; }
  .people__item:nth-child(3) { grid-column: 1 / 6; }
  .people__item:nth-child(4) { grid-column: 6 / 13; }
  .people__frame { aspect-ratio: auto; height: clamp(17rem, 30vw, 34rem); }
  /* parallel slanted edges, like the italic wordmark and the homepage photos */
  .people__item:nth-child(odd) .people__frame {
    clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%);
  }
  .people__item:nth-child(even) .people__frame {
    clip-path: polygon(3rem 0, 100% 0, 100% 100%, 0 100%);
  }
  .people__item:nth-child(even) .people__caption { padding-left: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
}

/* ---------- Sections: gallery-ice / gallery-inline (product teaser + photo grid) ---------- */
.gallery-head {
  display: grid;
  gap: 1.25rem 4rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.gallery-head .section-title { max-width: 18ch; }
.gallery-head__aside .pull { margin-bottom: 1rem; }
.gallery-head__aside .btn { margin-top: 0.25rem; }
@media (min-width: 64em) {
  .gallery-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

/* masonry-like grid: explicit spans, placed in source order (no dense
   packing, so the visual order matches the keyboard order) */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 31vw;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shot--wide { grid-column: span 2; }
.shot--tall { grid-row: span 2; }
.shot--big { grid-column: span 2; grid-row: span 2; }

.shot__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--ice);
}
.shot__link:focus-visible { outline-offset: 3px; }
.shot__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-glide);
}
.shot__link:hover img { transform: scale(1.05); }
/* keep the skater in frame when a landscape photo gets a tall crop */
.shot--focus-right img { object-position: 64% 50%; }

/* in-page link targets (hero buttons) get focus but no outline */
[data-section][tabindex="-1"]:focus { outline: none; }

@media (min-width: 64em) {
  .shots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: min(16vw, 17rem);
    gap: 1rem;
  }
}

/* ---------- Section: videos (poster cards linking to YouTube) ---------- */
.videos__note { margin: 1rem 0 0; color: var(--ink-soft); }
.videos__note a { font-weight: 700; }

.videos__grid {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.videos__grid .vcard { height: 100%; }
.videos__grid .vcard__title { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }
.videos__grid li:first-child .vcard__title { font-size: var(--fs-h3); }

@media (min-width: 48em) {
  .videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .videos__grid li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .videos__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .videos__grid li:nth-child(1) { grid-column: 1 / 9; grid-row: 1 / 3; }
  .videos__grid li:nth-child(2) { grid-column: 9 / 13; grid-row: 1; }
  .videos__grid li:nth-child(3) { grid-column: 9 / 13; grid-row: 2; }
  .videos__grid li:nth-child(n + 4) { grid-column: span 3; }
  /* the big card takes its height from the two cards beside it */
  .videos__grid li:first-child .vcard img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .videos__grid li:nth-child(n + 2) .vcard__label { padding: 1rem 1.1rem; }
  .videos__grid li:nth-child(n + 2) .vcard__play { width: 3.5rem; height: 3.5rem; }
}

/* ---------- Lightbox (built by page-gallery.js; native <dialog>) ---------- */
html.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(4.5rem, 3.5rem + 3vw, 6rem) clamp(1rem, 4vw, 5rem) clamp(1rem, 0.5rem + 2vw, 2rem);
  border: 0;
  background: rgba(6, 18, 32, 0.95);
  color: var(--white);
  overscroll-behavior: contain;
}
.lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
  animation: lightbox-in 0.35s var(--ease-glide);
}
.lightbox::backdrop { background: rgba(6, 18, 32, 0.6); }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
}
.lightbox__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.6);
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.lightbox__meta {
  min-width: 9rem;
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lightbox__btn {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.lightbox__btn:hover { border-color: var(--white); background: var(--white); color: var(--blue); }
.lightbox__btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.lightbox__btn svg { width: 1.25rem; height: 1.25rem; }
.lightbox__prev svg { transform: rotate(180deg); }
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}