/* ==========================================================================
   EventGo Australia — Moments (/moments/ and /moments/{event}/), WordPress-owned
   --------------------------------------------------------------------------
   SOURCE (V4 mirror 8bb8b23). Sections 1-3 are a copy of V4 files; the V4 sync has since put 59-v4-page.css and
   61-moments.css into assets/eg/v3/css (identical to the mirror), so sections 1-3 can be dropped once the route
   no longer needs the fallback shell (see CASCADE ORDER):
     1. assets/v3/css/59-v4-page.css   the V4 inner-page furniture (.eg-c-v4__*, .eg-c-crumb) — every rule, unchanged
     2. assets/v3/css/61-moments.css   Moments (.eg-c-illus, .eg-c-mo__*, .eg-c-gal*) — unchanged, less the omissions below
     3. assets/v3/css/06-v4.css :208   .eg-c-bcase (the brand name keeps its casing in a label) — unchanged
   Sections 1-3 are V4's rules as V4 writes them. Nothing in them is adapted.

   OMISSIONS from 61-moments.css (rules this page has no markup for):
     - .eg-c-mo__cat.is-soon            "soon" chips — a kind of event without events is not shown
     - .eg-c-lbx*  (the viewer)         the gallery opens each photo as a plain link; no script, no <dialog>
     - .eg-c-lbx__fig img               the viewer's selector in the reduced-motion rule

   OVERRIDES and additions live ONLY in the last section, marked "WP". They must be kept when
   sections 1-3 are replaced by the synced files:
     - div.eg-c-mo__card:hover               no hover zoom on illustrative cards (they are not links here)
     - .eg-c-mo__rail.eg-c-mo__rail--gal     the galleries rail (1 to 12 real galleries) is a wrapping grid on a desktop
     - .eg-c-mo__links                       the organiser links wrap together
     - .eg-c-mo .eg-c-mo__evimg img          a real event's artwork covers its frame
     - .eg-c-type .eg-c-v4__h / __h2         V4's heading rhythm, re-asserted over 00-base.css (the cascade order below)

   CASCADE ORDER: this file is printed at the shell's <!--EG:HEAD--> marker, which is BEFORE every stylesheet of the
   shell. Two consequences, both handled in the "WP" section by SPECIFICITY, never by order:
     - 00-base.css comes later: a base rule of the same specificity wins over sections 1-3 (the heading rhythm).
     - since the V4 sync (templates/v3/pages/moments-shell.html, 2026-09-29) the shell loads 59-v4-page.css and
       61-moments.css ITSELF, after this file: a "WP" rule written with V4's own selector would lose to V4's rule.
       Every "WP" rule that changes what a V4 rule sets therefore carries one class (or element) more than V4's.
   With that shell sections 1-3 repeat what the shell loads (harmless); they are what styles the page when the
   route falls back to the neutral pages shell, which loads neither file.
   ========================================================================== */

/* ---- 1. 59-v4-page.css ---------------------------------------------------- */
.eg-c-v4__h { font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em; margin: .75rem 0 1.25rem; }
.eg-c-v4__h2 { font-size: var(--t-section); line-height: 1.02; letter-spacing: -.03em; margin: .5rem 0 1rem; }
.eg-c-v4__lead { font-size: var(--t-lead); color: var(--c-text-2); max-width: 44ch; }
.eg-c-v4__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (max-width: 479.98px) { .eg-c-v4__acts .eg-c-btn { width: 100%; } }
.eg-c-v4__head {
  display: grid; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 900px) { .eg-c-v4__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.eg-c-v4__note { font-size: .9375rem; color: var(--c-text-2); max-width: 46ch; }
.eg-c-v4__note b { color: var(--c-text); }
.eg-c-v4__split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .eg-c-v4__split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; } }
.eg-c-v4__split .eg-c-btn { margin-top: 1.5rem; }
.eg-c-crumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; font-size: .875rem; color: var(--c-text-3); }
.eg-c-crumb a { color: var(--c-text-2); text-decoration: underline; text-underline-offset: .25em; }
.eg-c-crumb a:hover { color: var(--c-text); }

/* ---- 3. 06-v4.css: the brand name is written the one way ------------------- */
.eg-c-bcase { text-transform: none !important; letter-spacing: .02em !important; }

/* ---- 2. 61-moments.css ----------------------------------------------------- */
.eg-c-illus {
  position: absolute; left: .625rem; bottom: .625rem; z-index: 1;
  padding: .25rem .5rem; border-radius: 6px;
  background: rgb(0 0 0 / .62); color: var(--text-on-dark);
  font: 800 .6875rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.eg-c-illus--inline { position: static; display: inline-block; margin-left: .5rem; vertical-align: .1em; }

/* ---- hero ---------------------------------------------------------------- */
.eg-c-mo__hero {
  display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center;
  padding: calc(var(--hdr-h) + clamp(2rem, 6vh, 4.5rem)) max(var(--c-gut), calc((100% - 1320px) / 2)) clamp(3rem, 7vh, 5rem);
}
@media (min-width: 1000px) { .eg-c-mo__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.eg-c-mo__feat { margin: 0; }
.eg-c-mo__featimg { position: relative; display: block; overflow: hidden; border-radius: 24px; box-shadow: var(--shadow-xl); }
.eg-c-mo__featimg img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.eg-c-mo__feat figcaption { margin-top: .75rem; font-size: .875rem; color: var(--c-text-2); }
.eg-c-mo__feat figcaption b { color: var(--c-text); margin-right: .25rem; }

/* ---- the rail --------------------------------------------------------------- */
.eg-c-mo__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 70vw); gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--c-gut);
  padding-bottom: 1rem; margin-inline: calc(var(--c-gut) * -1); padding-inline: var(--c-gut);
  scrollbar-width: thin;
}
/* On a desktop the six fit side by side, evenly; on a phone they are a
   swipeable rail. */
@media (min-width: 900px) { .eg-c-mo__rail { grid-auto-columns: minmax(0, 1fr); margin-inline: 0; padding-inline: 0; overflow: visible; } }
.eg-c-mo__slide { scroll-snap-align: start; }
.eg-c-mo__card { display: grid; gap: .75rem; color: inherit; }
.eg-c-mo__img { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--c-surface); }
.eg-c-mo__img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--c-ease); }
.eg-c-mo__card:hover .eg-c-mo__img img { transform: scale(1.03); }
.eg-c-mo__cap { display: grid; gap: .125rem; }
.eg-c-mo__cap b { font-size: 1.0625rem; }
.eg-c-mo__cap span { font-size: .875rem; color: var(--c-text-2); }

/* ---- by event ------------------------------------------------------------------ */
.eg-c-mo__evs { display: grid; gap: 1rem; }
@media (min-width: 820px) { .eg-c-mo__evs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eg-c-mo__ev a { display: grid; gap: .875rem; height: 100%; padding: .75rem; border-radius: 20px; border: 1px solid var(--c-line-strong); background: var(--c-ink-soft); color: inherit; }
.eg-c-mo__ev a:hover { border-color: var(--c-text-2); }
.eg-c-mo__evimg { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; background: var(--c-surface); }
.eg-c-mo__evimg img { width: 100%; height: 100%; object-fit: contain; }
.eg-c-mo__evtx { display: grid; gap: .25rem; padding: 0 .25rem .25rem; }
.eg-c-mo__evtx b { font-size: 1.0625rem; line-height: 1.25; }
.eg-c-mo__evtx > span { font-size: .875rem; color: var(--c-text-2); }
.eg-c-mo__evst { margin-top: .375rem; font-weight: 700; color: var(--c-teal) !important; }

/* ---- by category ----------------------------------------------------------------- */
.eg-c-mo__cats { display: flex; flex-wrap: wrap; gap: .625rem; }
.eg-c-mo__cat {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.25rem; border-radius: 999px;
  border: 1.5px solid var(--c-line-strong); font-weight: 700; color: var(--c-text);
}
a.eg-c-mo__cat:hover { border-color: var(--c-accent); }
.eg-c-mo__cat i { font-style: normal; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }

.eg-c-mo__org { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 20px; border: 1px solid var(--c-line-strong); background: var(--c-ink-soft); }
.eg-c-mo__org h3 { font-size: 1.375rem; margin-bottom: .75rem; }
.eg-c-mo__org p { color: var(--c-text-2); }
.eg-c-mo__link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: 1rem; font-weight: 700; color: var(--c-accent); }
.eg-c-mo__link svg { width: 1.125rem; height: 1.125rem; }

/* ---- the gallery ------------------------------------------------------------------- */
.eg-c-gal { padding: calc(var(--hdr-h) + clamp(1.5rem, 5vh, 3.5rem)) 0 var(--c-sec); }
.eg-c-gal__grid { columns: 1; column-gap: 1rem; }
@media (min-width: 640px) { .eg-c-gal__grid { columns: 2; } }
@media (min-width: 1100px) { .eg-c-gal__grid { columns: 3; } }
.eg-c-gal__i { break-inside: avoid; margin-bottom: 1.25rem; }
.eg-c-gal__a { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--c-surface); }
.eg-c-gal__a img { width: 100%; height: auto; transition: transform .6s var(--c-ease); }
.eg-c-gal__a:hover img { transform: scale(1.02); }
.eg-c-gal__cap { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .625rem; font-size: .9375rem; }
.eg-c-gal__cap span { color: var(--c-text-2); }

@media (prefers-reduced-motion: reduce) {
  .eg-c-mo__img img, .eg-c-gal__a img { transition: none; }
  .eg-c-mo__card:hover .eg-c-mo__img img, .eg-c-gal__a:hover img { transform: none; }
}

/* ---- WP: overrides and additions for the WordPress page --------------------- */
/* V4's heading rhythm. 00-base.css `.eg-c-type :where(h1, h2, h3)` (line-height .96, letter-spacing -.03em) has the
   specificity of `.eg-c-v4__h` and is loaded AFTER this file, so it would win. One class more puts V4's values back.
   A no-op with the V4 moments shell (it loads 59-v4-page.css after 00-base.css); needed with the fallback shell. */
.eg-c-type .eg-c-v4__h { line-height: .98; letter-spacing: -.035em; }
.eg-c-type .eg-c-v4__h2 { line-height: 1.02; letter-spacing: -.03em; }
/* The illustrative rail takes the keyboard (tabindex="0" on the list) because it scrolls on a small screen. */
.eg-c-mo__rail:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 18px; }
@media (prefers-reduced-motion: reduce) { ol.eg-c-mo__rail { scroll-behavior: auto; } }
/* Illustrative cards are not links (there is no gallery behind them): no pointer, no hover zoom. */
div.eg-c-mo__card { cursor: default; }
div.eg-c-mo__card:hover .eg-c-mo__img img { transform: none; }
span.eg-c-mo__featimg { cursor: default; }
/* The galleries rail holds 1 to 12 real galleries, not V4's fixed six: on a desktop it is a wrapping grid of
   even cards (one gallery is one card, never a full-width image; twelve are rows, never slivers). On a phone it
   stays V4's scroll-snap rail. The six-card illustrative rail is left as V4 has it. Two classes: V4's
   `.eg-c-mo__rail` rules (one class) are loaded after this file by the V4 shell and must not win. */
@media (min-width: 900px) {
  .eg-c-mo__rail.eg-c-mo__rail--gal { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.5rem 1rem; overflow: visible; }
}
/* A real event's own artwork fills its frame like the events listing does (V4: contain, one class less). */
.eg-c-mo .eg-c-mo__evimg img { object-fit: cover; }
.eg-c-mo__evimg.eg-c-mo__evimg--none { display: grid; place-items: center; color: var(--c-text-3); font-size: .875rem; }
/* An honest empty state (no events listed right now). */
.eg-c-mo__empty { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 20px; border: 1px dashed var(--c-line-strong); color: var(--c-text-2); }
.eg-c-mo__empty a { color: var(--c-accent); font-weight: 700; }
/* The organiser links sit side by side and wrap together (no indent on the wrapped one). */
.eg-c-mo__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
/* A kind of event that is a label, not a link (the events listing has no category filter to link to). */
span.eg-c-mo__cat { cursor: default; }
.eg-c-gal__in { padding-inline: max(var(--c-gut), calc((100% - 1320px) / 2)); }
.eg-c-gal__head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.eg-c-gal__meta { color: var(--c-text-2); }
.eg-c-gal__meta a { color: var(--c-accent); font-weight: 700; }
.eg-c-gal__back { margin-top: clamp(2rem, 5vw, 3.5rem); }