/* Image Gallery and Promotion Video.
 *
 * Two sections the mirror never had, built from Figma — file GAIALPデザイン, page "LP phase_2",
 * node 633:692 (named `sec- Special` there, like most of that file's frames). They sit
 * between Specifications and the event section, which is where the design puts them.
 *
 * **They are one frame in Figma and one section here.** The design draws them inside a single
 * block with 120px of padding and a 160px gap between the two titles. Two `.l-section`s would
 * have made that gap 240px, so this is one `.l-section` with two blocks inside it.
 *
 * The frame carries a starfield of its own in Figma. It does not get one here: the page's
 * dark tone is one scrim over `.bg-galaxy` and no dark section paints its own background —
 * see README.md, "The ground layer".
 *
 * The design is drawn at 1512px wide. Every measure below is that drawing's value at the top
 * of a clamp, shrinking with the viewport — the same rule true-colour-photo.css follows.
 */

.gallery-video {
  --gv-title-gap: clamp(28px, 4.5vw, 68px);
  --gv-radius: clamp(6px, 0.53vw, 8px);
}

/* The 160px between the two blocks, from the Figma frame's own gap. The floor is a phone
   measure rather than a scaled one — 10.6vw would be 41px at 390, which reads as one section
   with two headings rather than two. */
.gallery-video .l-inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: clamp(56px, 10.6vw, 160px);
}

/* Size and weight come from css/page/section-titles.css, which every section title on the
   page shares. The 68px under each of them is this section's own measure. */
.gallery-video .gallery-title,
.gallery-video .promo-title {
  margin-bottom: var(--gv-title-gap);
  text-align: center;
}

/* ---- Image Gallery ------------------------------------------------------------------- */

/* Four 302x320 tiles on a 24px gap, which is exactly the 1280 content column. Grid rather
   than flex so the tiles stay equal when one image is slower to decode than the others. */
.gallery-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 24px);
}

.gallery-item {
  display: block;
  overflow: hidden;
  border-radius: var(--gv-radius);
  /* The tile is portrait and the photographs are landscape, so `cover` crops about 8% off
     each side — including the ends of the courtesy line burned into the image. That is what
     the design draws, and the uncropped frame is one click away in the lightbox. */
  aspect-ratio: 302 / 320;
}

/* Both max-* overrides are load-bearing against style.css's global
   `img { max-width: 100%; max-height: 100% }` — see README.md, "Ground rules". */
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .gallery-item:hover img,
  .gallery-item:focus-visible img {
    transform: scale(1.04);
  }
}

/* style.css sets a global `a:hover { opacity: .8 }` from 768px up. The tile answers a hover
   with the scale above instead — dimming a photograph is not the same invitation. */
.gallery-item:hover {
  opacity: 1;
}

/* ---- Promotion Video ----------------------------------------------------------------- */

/* 1280x661 in the design, held as a ratio so the YouTube embed keeps the same box at every
   width. */
.promo-player {
  position: relative;
  overflow: hidden;
  border-radius: clamp(12px, 1.32vw, 20px);
  aspect-ratio: 1280 / 661;
  background: #000;
}

.promo-player > a,
.promo-player video,
.promo-player iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.promo-player iframe {
  border: 0;
}

.promo-player > a {
  position: relative;
}

.promo-player > a:hover {
  opacity: 1;
}

.promo-poster {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  -o-object-fit: cover;
  object-fit: cover;
}

/* 114px square in the design. The glyph inside the file is 256x256 with 30px of transparent
   padding top and bottom, so it lands where the drawing puts it without any nudging. */
.promo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(56px, 7.54vw, 114px);
  height: auto;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .promo-player > a:hover .promo-play,
  .promo-player > a:focus-visible .promo-play {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* ---- The lightbox -------------------------------------------------------------------- */

/* A <dialog> opened with showModal(), which is what makes this safe on this page: the top
   layer sits above everything, so the lightbox never has to out-rank the fixed header or the
   pinned CONTACT panel with a z-index. `js/gallery-lightbox.js` only takes over the tiles if
   showModal exists; without it — or without JavaScript at all — each tile is still a plain
   link to the full-size image, which is a working "enlarge" of its own. */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

.lightbox-figure {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(48px, 6vw, 80px) clamp(12px, 6vw, 88px);
}

.lightbox-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--gv-radius, 8px);
  -o-object-fit: contain;
  object-fit: contain;
}

/* One button style for all three controls; only the position differs. */
.lightbox button {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox button:hover,
.lightbox button:focus-visible {
  background: rgba(255, 255, 255, 0.26);
}

.lightbox-close {
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: clamp(8px, 2vw, 24px);
}

.lightbox-next {
  right: clamp(8px, 2vw, 24px);
}

.lightbox button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The counter, so four images do not feel like an endless carousel. */
.lightbox-count {
  position: absolute;
  right: 0;
  bottom: clamp(14px, 2.4vw, 28px);
  left: 0;
  font-size: 1.4rem;
  color: #d7d7d7;
  text-align: center;
}

/* ---- Phone ---------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  /* Four tiles across a phone would be 70px wide. Two rows of two keeps them tappable. */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lightbox button {
    width: 40px;
    height: 40px;
  }

  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: clamp(14px, 2.4vw, 28px);
    transform: none;
  }

  .lightbox-count {
    bottom: 24px;
  }
}