/* ==========================================================================
   EventGo Australia — Homepage · 5 · Event Moments (the signature section)
   --------------------------------------------------------------------------
   The BREADTH of going out, as a contact sheet: six very different nights
   (music, comedy, a workshop, a cultural celebration, a business evening, a
   night market) in one art direction, printed at the format each picture
   wants — 4:3, 3:4, 1:1, 4:5 — and laid in three stepped columns on a strip
   of film. Figma 10 · Event Moments — SIGNATURE.

   NOT A GRID OF THUMBNAILS. The mixed formats, the stepped columns (the same
   staircase as the hero's headline, so the page has one gesture) and the
   heading set BESIDE the sheet on wide screens are what make it editorial
   rather than a gallery. Each crop was chosen against its master in
   tools/make-home-media.mjs so the subject survives it.

   Columns are CSS multi-column with forced breaks, not a masonry library:
   the order is fixed (01-02 | 03-04 | 05-06 wide, 01-03 | 04-06 on phones),
   the reading order is the list order, and nothing is measured in script.

   IT MUST NOT IMPLY PHOTO DELIVERY. That capability is FindMe's, and FindMe
   is out of scope (CLAUDE.md). No "your photos", no album, no link to a
   gallery. These are illustrative and the section says so in words.

   Captions are ALWAYS visible — nothing is hover-only, because a finger and
   a keyboard cannot hover. The frames are not links, so they are not in the
   tab order and there is nothing for focus to reveal.
   ========================================================================== */

.eg-c-hm { position: relative; padding: var(--c-sec) var(--c-gut); background: var(--c-ink-soft); }
/* minmax(0, 1fr), not the implicit auto track: an auto track grows to its
   content's minimum width, and at 320px the sheet's captions pushed the
   whole page 21px wider than the screen. */
.eg-c-hm__in { width: 100%; max-width: 1320px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); }

/* Wide: heading column beside the sheet, the note anchored to its foot so
   both lower corners of the section are held. */
@media (min-width: 1040px) {
  .eg-c-hm__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 4vw, 4rem); align-items: stretch; }
  .eg-c-hm__head { display: flex; flex-direction: column; }
  .eg-c-hm__head .eg-c-sh { margin-bottom: 0; }
  .eg-c-hm__note { margin-top: auto; }
}
.eg-c-hm__note { font-size: var(--t-meta); color: var(--c-text-3); max-inline-size: 34ch; }

/* ---- The sheet ------------------------------------------------------------ */
.eg-c-hm__film {
  position: relative; padding: 2.25rem 1rem; border-radius: var(--radius-lg);
  background: var(--c-ink);
  border: 1px solid var(--c-line);
}
/* Sprocket holes, top and bottom. Pure decoration. */
.eg-c-hm__film::before, .eg-c-hm__film::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; height: .5rem; pointer-events: none;
  background-image: linear-gradient(90deg, rgb(255 255 255 / .16) 0 .75rem, transparent .75rem);
  background-size: 1.75rem 100%; border-radius: 2px;
}
.eg-c-hm__film::before { top: .75rem; }
.eg-c-hm__film::after { bottom: .75rem; }

.eg-c-hm__strip {
  --gap: .875rem; --step: 2rem;
  columns: 2; column-gap: var(--gap);
  padding: 0 0 var(--step); margin: 0; list-style: none;
}
.eg-c-hm__strip > li { break-inside: avoid; margin-bottom: 1.25rem; }
/* Phones: 01-03 | 04-06, the second column one step down. */
.eg-c-hm__strip > li:nth-child(4) { break-before: column; -webkit-column-break-before: always; }
.eg-c-hm__strip > li:nth-child(n+4) { translate: 0 var(--step); }

@media (min-width: 640px) {
  .eg-c-hm__strip { --gap: 1.25rem; --step: 3rem; columns: 3; }
  .eg-c-hm__film { padding: 2.5rem 1.25rem; }
  .eg-c-hm__strip > li:nth-child(4) { break-before: auto; -webkit-column-break-before: auto; }
  .eg-c-hm__strip > li:nth-child(3),
  .eg-c-hm__strip > li:nth-child(5) { break-before: column; -webkit-column-break-before: always; }
  /* The staircase: middle column two half-steps down, the last one half. */
  .eg-c-hm__strip > li:nth-child(n+4) { translate: none; }
  .eg-c-hm__strip > li:nth-child(3), .eg-c-hm__strip > li:nth-child(4) { translate: 0 var(--step); }
  .eg-c-hm__strip > li:nth-child(5), .eg-c-hm__strip > li:nth-child(6) { translate: 0 calc(var(--step) / 2); }
}

/* ---- A frame --------------------------------------------------------------- */
.eg-c-hm__f { margin: 0; display: grid; gap: .625rem; }
.eg-c-hm__img { position: relative; overflow: hidden; border-radius: 6px; background: var(--c-surface); }
.eg-c-hm__img img { display: block; width: 100%; height: auto; }
.eg-c-hm__f figcaption {
  display: flex; gap: .625rem; align-items: baseline;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-text-2); line-height: 1.35;
}
/* Phones: the frame number sits above its label, like the edge number on
   a strip of film, so a long word ("NETWORKING") has the column to itself. */
@media (max-width: 639.98px) {
  .eg-c-hm__film { padding-inline: .75rem; }
  .eg-c-hm__f figcaption { flex-direction: column; gap: .125rem; }
}
.eg-c-hm__f figcaption b {
  flex: none; font-family: var(--font-headline); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(96deg, var(--eg-violet) 0%, var(--eg-blue) 45%, var(--eg-teal) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .eg-c-hm__f figcaption b { color: var(--c-teal); }
}
@media (forced-colors: active) {
  .eg-c-hm__f figcaption b { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* A pointer resting on the sheet brings one print forward: it leans in and
   the others step back. Only the PICTURES quiet — a caption at half opacity
   would fail contrast for as long as the pointer rests on the strip. */
@media (hover: hover) and (min-width: 1040px) and (prefers-reduced-motion: no-preference) {
  .eg-c-hm__img img { transition: opacity .3s var(--c-ease), transform .6s var(--c-ease); }
  .eg-c-hm__strip:hover .eg-c-hm__img img { opacity: .55; }
  .eg-c-hm__strip .eg-c-hm__f:hover .eg-c-hm__img img { opacity: 1; transform: scale(1.04); }
}

/* ==========================================================================
   CINEMATIC POLISH (branch eventgo-v3-homepage-cinematic-build)
   --------------------------------------------------------------------------
   Three things only, as briefed: edge printing on the film, ONE frame that
   drifts with the scroll, and captions set as captions.
   ========================================================================== */

/* Edge printing sits between the sprocket rows and the prints. */
.eg-c-hm__film { padding-top: 3.75rem; padding-bottom: 3.5rem; }
.eg-c-hm__edge {
  position: absolute; left: 1rem; right: 1rem; display: flex; justify-content: space-between;
  gap: 1.5rem; overflow: hidden; white-space: nowrap; pointer-events: none;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-text-3);
}
.eg-c-hm__edge i { font-style: normal; font-variant-numeric: tabular-nums; }
.eg-c-hm__edge--top { top: 1.625rem; }
.eg-c-hm__edge--foot { bottom: 1.625rem; }
/* On a phone the strip is narrow: print only the first mark of each row. */
@media (max-width: 639.98px) {
  .eg-c-hm__edge i:nth-child(n+3) { display: none; }
}

/* ONE drifting frame (01). Scroll-linked, not autoplaying, so it needs no
   pause control: it moves only while the reader scrolls. The image is
   oversized by 8% so the drift never shows the frame's edge. */
.eg-c-hm__img[data-hm-drift] img { transform: scale(1.08); }

/* Captions read as captions: the number keeps the brand gradient, the words
   are sentence case in the UI face — the edge print owns the capitals. */
.eg-c-hm__f figcaption {
  font-size: var(--t-meta); font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--c-text);
}
.eg-c-hm__f figcaption b { font-size: 1.125rem; }
@media (prefers-reduced-motion: reduce) {
  .eg-c-hm__img[data-hm-drift] img { transform: none; }
}