/* ScrollTiltedGrid — Bizverse build.
   Pairs with scripts/scroll-tilted-grid.js. Palette, radii and type come from
   the same tailwind config the rest of the Organisers page uses
   (#0F1115 background · #1C1F26 surface · #DAA06D primary · #FDDAB8 on-surface),
   so the gallery reads as a continuation of the split card rather than a
   separate widget dropped underneath it. */

.stg {
  position: relative;
  width: 100%;
  padding: var(--stg-pad, 18vh) 24px;
  /* perspective is set inline from the `perspective` prop */
}

.stg__grid {
  display: grid;
  /* The column gap is a custom property because the lead tile's width is
     derived from it — see .stg__tile:first-child. */
  --stg-col-gap: 2vw;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5vh var(--stg-col-gap);
  /* Widen to fit 4 columns without shrinking the cards too much */
  max-width: 1200px;
  margin: 0 auto;
  transform-style: preserve-3d;
}

.stg__tile {
  margin: 0;
  min-width: 0;
}

/* --- lead tile: alone and centred on the first row -------------------------
   It spans all columns and is then narrowed back to exactly one column's
   width, which centres it without a magic number. */
.stg__grid--lead .stg__tile:first-child {
  grid-column: 1 / -1;
  width: calc((100% - 3 * var(--stg-col-gap)) / 4);
  justify-self: center;
}

/* --- stagger: the grid below, by column -------------------------------------- */
.stg__grid--lead .stg__tile:nth-of-type(4n + 3) { margin-top: 6vh; }
.stg__grid--lead .stg__tile:nth-of-type(4n + 4) { margin-top: 12vh; }
.stg__grid--lead .stg__tile:nth-of-type(4n + 5) { margin-top: 4vh; }

/* Grid after a break: force 3 columns so the 3 Event Heads sit nicely. */
.stg__grid--rest {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 960px;
  margin: 0 auto;
}
.stg__grid--rest .stg__tile:nth-of-type(3n + 2) { margin-top: 8vh; }
.stg__grid--rest .stg__tile:nth-of-type(3n + 3) { margin-top: 4vh; }

/* --- section heading between two grids -------------------------------------
   Subordinate to the "Cores" h2 above it: same family, smaller, with a hairline
   either side so it reads as a divider rather than a second page title. */
.stg__section {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1040px;
  margin: 12vh auto 2vh;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(19px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #315D72;
  white-space: nowrap;
}

.stg__section::before,
.stg__section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(49, 93, 114, 0.32), transparent);
}

.stg__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--stg-aspect, 4 / 5);
  overflow: hidden;
  border-radius: var(--stg-radius, 0.25rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #14171d;
  transform-origin: 50% 50%;
  will-change: transform, filter;
  /* Keeps the rounded corners from shimmering while the tile is rotated. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.stg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Posters are 1054x1492 and the aspect ratio is set to match, so `cover`
     never actually crops — it only guards against a future asset of another
     shape being dropped into the dataset. */
  user-select: none;
  -webkit-user-drag: none;
}

/* --- awaiting-photo slot ----------------------------------------------------
   Same frame, aspect ratio and motion as a filled tile, so the gallery lays out
   at its true final size while the photographs are still being gathered.
   Deliberately quiet: it should read as a reserved space, not as a failure. */
.stg__frame--empty {
  background:
    linear-gradient(150deg, rgba(218, 160, 109, 0.05), rgba(255, 255, 255, 0.015) 55%, transparent),
    #14171d;
  border-style: dashed;
  border-color: rgba(218, 160, 109, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stg__slot {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(49, 93, 114, 0.13);
  user-select: none;
}

/* --- caption ---------------------------------------------------------------
   The organiser's name is real text under the image, never baked into motion:
   it stays legible at every scroll position and in reduced motion. */
.stg__cap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 2px 0;
}

.stg__cap-name {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #315D72;
}

.stg__cap-person {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  /* Cream, not amber. At 11px this line needs 4.5:1, and amber at 75% was the
     single value capping how light the page background could go — it was the
     binding constraint on the whole ramp (and was itself sitting at 4.12:1
     against the old background). Moving it to cream lets the background run
     ~3x lighter while this line gets *more* contrast, not less. */
  /* 0.85, not 0.8: at 0.8 the worst ramp stop lands on 4.48 against a 4.5
     requirement — under by hex rounding alone. 0.85 gives 4.82 and keeps the
     line visibly quieter than the name above it. */
  color: rgba(49, 93, 114, 0.85);
}

/* --- section intro ---------------------------------------------------------
   Restrained on purpose: it introduces the gallery, it does not compete. */
.stg-intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.stg-intro__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #315D72;
  margin-bottom: 14px;
}

.stg-intro__title {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #315D72;
}

.stg-intro__title em {
  font-style: italic;
  color: #DAA06D;
}

.stg-intro__sub {
  margin: 16px auto 0;
  max-width: 46ch;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(49, 93, 114, 0.85);
}

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .stg__grid {
    --stg-col-gap: 2.5vw;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4vh var(--stg-col-gap);
    max-width: 700px;
  }

  /* Lead tile stays centred; one column of two now. */
  .stg__grid--lead .stg__tile:first-child { width: calc((100% - var(--stg-col-gap)) / 2); }

  /* Same specificity as the three-column rules above (0,3,0) and later in the
     source, so this genuinely clears them before the two-column ones apply. */
  .stg__grid .stg__tile:nth-of-type(n) { margin-top: 0; }
  .stg__grid--lead .stg__tile:nth-of-type(2n + 3) { margin-top: 6vh; }

  /* The row under a section heading is meant to READ as one row, so it holds
     three columns here even though the main grid above drops to two. Tiles come
     out smaller than the ones above, which is the trade for not stranding a
     third card on a line of its own. */
  .stg__grid--rest {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 700px;
  }
  .stg__grid--rest .stg__tile:nth-of-type(3n + 2) { margin-top: 6vh; }
  .stg__grid--rest .stg__tile:nth-of-type(3n + 3) { margin-top: 3vh; }

  .stg__section { max-width: 700px; margin-top: 9vh; }
}

/* ---------- mobile ----------
   One column: two columns of a 0.71-aspect poster leaves each image barely
   140px wide, which is not a readable gallery. The stagger is dropped with the
   second column, and the JS flattens tilt/skew to match. */
@media (max-width: 767px) {
  .stg {
    padding-left: 20px;
    padding-right: 20px;
    /* A tall tile rotated in 3D can otherwise poke past the viewport edge. */
    overflow-x: hidden;
  }

  .stg__grid {
    --stg-col-gap: 0px;
    grid-template-columns: minmax(0, 1fr);
    gap: 4vh 0;
    max-width: 380px;
  }

  .stg__grid--lead .stg__tile:first-child { width: 100%; }
  .stg__grid .stg__tile:nth-of-type(n) { margin-top: 0; }
  .stg__section { margin: 8vh auto 2vh; gap: 14px; }

  .stg__cap { padding-top: 12px; }
  .stg__cap-name { font-size: 14px; }
  .stg__cap-person { font-size: 10px; }
}

/* ---------- reduced motion ----------
   No transform, no blur, no stagger — a plain, fully readable gallery. */
.stg.is-static .stg__frame {
  transform: none !important;
  filter: none !important;
  will-change: auto;
}

.stg.is-static .stg__tile:nth-of-type(n) { margin-top: 0; }

.stg.is-static .stg__grid { gap: 4vh 3vw; }

/* Reduced motion keeps the slots, just without the tilt they would have had. */
.stg.is-static .stg__frame--empty { border-style: dashed; }