/* ── cinematic_winner_gallery ───────────────────────────────────────
   12-column grid where each figure can span 4/6/8/12. Auto-flow so a
   half + third + third row fills nicely. Captions Futura caps under
   each image. Tokens only. */

.block-cinematic_winner_gallery {
  background: var(--color-bg);
  padding: clamp(64px, 10vh, 120px) var(--space-section-x);
}

.block-cinematic_winner_gallery .cwg-grid {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

.block-cinematic_winner_gallery .cwg-item {
  margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.block-cinematic_winner_gallery .cwg-item--span-4  { grid-column: span 12; }
.block-cinematic_winner_gallery .cwg-item--span-6  { grid-column: span 12; }
.block-cinematic_winner_gallery .cwg-item--span-8  { grid-column: span 12; }
.block-cinematic_winner_gallery .cwg-item--span-12 { grid-column: span 12; }
@media (min-width: 720px) {
  .block-cinematic_winner_gallery .cwg-item--span-4  { grid-column: span 6; }
  .block-cinematic_winner_gallery .cwg-item--span-6  { grid-column: span 6; }
  .block-cinematic_winner_gallery .cwg-item--span-8  { grid-column: span 12; }
  .block-cinematic_winner_gallery .cwg-item--span-12 { grid-column: span 12; }
}
@media (min-width: 1024px) {
  .block-cinematic_winner_gallery .cwg-item--span-4  { grid-column: span 4; }
  .block-cinematic_winner_gallery .cwg-item--span-6  { grid-column: span 6; }
  .block-cinematic_winner_gallery .cwg-item--span-8  { grid-column: span 8; }
  .block-cinematic_winner_gallery .cwg-item--span-12 { grid-column: span 12; }
}

.block-cinematic_winner_gallery .cwg-figure {
  position: relative;
  overflow: hidden;
  background: var(--color-accent-6);
  aspect-ratio: 4/3;
}
.block-cinematic_winner_gallery .cwg-item--span-12 .cwg-figure { aspect-ratio: 21/9; }
.block-cinematic_winner_gallery .cwg-item--span-8  .cwg-figure { aspect-ratio: 16/9; }

.block-cinematic_winner_gallery .cwg-figure img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.block-cinematic_winner_gallery .cwg-item:hover .cwg-figure img { transform: scale(1.02); }

.block-cinematic_winner_gallery .cwg-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-eyebrow); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-dark-bg) 40%, transparent); cursor: pointer;
}

.block-cinematic_winner_gallery .cwg-caption {
  font-family: var(--font-eyebrow); font-weight: 500;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
  padding: 0 2px;
  line-height: 1.4;
  min-height: 1em;
}
.block-cinematic_winner_gallery .cwg-caption--empty {
  min-height: 0;
}
.block-cinematic_winner_gallery .cwg-caption em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--color-fg-muted);
}

/* ── Lightbox (public-site image viewer) ──────────────────────────────
   Opens any [data-cinematic-lightbox] image at its NATIVE aspect ratio.
   Full-viewport, dark backdrop, image object-fit: contain so the
   author's composition is preserved. Nav arrows cycle through all
   lightbox triggers on the page. See script.js for behavior. */

.cinematic-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-dark-bg) 95%, transparent);
}
.cinematic-lightbox[hidden] { display: none; }
body.cinematic-lightbox-open { overflow: hidden; }

.cinematic-lightbox__backdrop {
  position: absolute; inset: 0;
  cursor: zoom-out;
}
.cinematic-lightbox__image {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--color-dark-bg) 62%, transparent);
}
.cinematic-lightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent; color: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-on-dark) 44%, transparent);
  border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.cinematic-lightbox__close:hover {
  background: color-mix(in srgb, var(--color-on-dark) 14%, transparent);
  border-color: var(--color-bg);
}
.cinematic-lightbox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  padding: 0;
  background: transparent; color: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-on-dark) 44%, transparent);
  border-radius: 50%;
  font-family: var(--font-display, Georgia, serif);
  font-size: 28px; line-height: 1; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.cinematic-lightbox__nav:hover {
  background: color-mix(in srgb, var(--color-on-dark) 14%, transparent);
  border-color: var(--color-bg);
}
.cinematic-lightbox__nav--prev { left: 24px; }
.cinematic-lightbox__nav--next { right: 24px; }

.cinematic-lightbox__counter {
  position: absolute;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  padding: 6px 14px;
  color: color-mix(in srgb, var(--color-on-dark) 72%, transparent);
  font-family: var(--font-eyebrow, sans-serif);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Focus visibility for keyboard nav */
.cinematic-lightbox__close:focus-visible,
.cinematic-lightbox__nav:focus-visible {
  outline: 2px solid var(--color-accent, var(--color-accent));
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .cinematic-lightbox__nav { width: 42px; height: 42px; font-size: 22px; }
  .cinematic-lightbox__nav--prev { left: 8px; }
  .cinematic-lightbox__nav--next { right: 8px; }
  .cinematic-lightbox__close { top: 12px; right: 12px; }
}

/* ── Adaptation for Via Crispi ───────────────────────────────────────
   --color-accent-6 is IDA's ground *behind* each figure, not an accent.
   Mapped to the surface token; left as an accent it rendered every
   empty slot as a solid colour block. */
.block-cinematic_winner_gallery { --color-accent-6: var(--color-surface); }

@media (max-width: 700px) {
  .block-cinematic_winner_gallery .cwg-grid { grid-template-columns: 1fr; }
}

/* Editor affordance, not visitor copy: the "click to add" prompt stays
   clickable in edit.php but is never shown on the public site. */
.block-cinematic_winner_gallery .cwg-empty { display: none; }
body.cms-edit .block-cinematic_winner_gallery .cwg-empty { display: grid; place-items: center; }


/* ── Via Crispi adaptation — flush mosaic ────────────────────────────
   IDA's version gives each span its own aspect ratio (4/3, 16/9, 21/9)
   and a 16–32px gutter, so tiles in the same row end at different
   heights and the grid reads as loose cards.

   The reference this site is matching is a tightly packed mosaic with
   flush rows. Fixing the FIGURE height (rather than the grid row) makes
   every tile in a row the same height whatever its span, while leaving
   any caption free to flow underneath instead of being squeezed — so
   this stays safe to use with captions later. */
.block-cinematic_winner_gallery .cwg-grid { gap: 10px; }
.block-cinematic_winner_gallery .cwg-item { gap: 8px; }
.block-cinematic_winner_gallery .cwg-figure,
.block-cinematic_winner_gallery .cwg-item--span-8 .cwg-figure,
.block-cinematic_winner_gallery .cwg-item--span-12 .cwg-figure {
  aspect-ratio: auto;
  height: clamp(180px, 19vw, 300px);
}
/* An empty caption must not reserve space in a flush grid. */
.block-cinematic_winner_gallery .cwg-caption--empty { display: none; }
body.cms-edit .block-cinematic_winner_gallery .cwg-caption--empty {
  display: block; min-height: 18px; outline: 1px dashed var(--color-border);
}
@media (max-width: 719px) {
  .block-cinematic_winner_gallery .cwg-figure,
  .block-cinematic_winner_gallery .cwg-item--span-8 .cwg-figure,
  .block-cinematic_winner_gallery .cwg-item--span-12 .cwg-figure {
    height: clamp(200px, 46vw, 280px);
  }
}