/* ==========================================================================
   EventGo Australia — Moments (/moments/ and /moments/preview/)
   --------------------------------------------------------------------------
   Discovery surface: cinematic, image-led. Every image is labelled
   ILLUSTRATIVE on the image itself until real Moments exist. The rail is
   native scroll-snap (swipe on touch, Tab and scroll on desktop); the viewer
   is a native <dialog>. Opacity is the only thing that animates.
   ========================================================================== */
.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.is-soon { color: var(--c-text-3); border-style: dashed; }
.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); }

/* ---- the viewer -------------------------------------------------------------------- */
.eg-c-lbx {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: rgb(0 0 0 / .94); color: var(--text-on-dark);
}
.eg-c-lbx[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.eg-c-lbx::backdrop { background: rgb(0 0 0 / .7); }
.eg-c-lbx__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem max(1rem, env(safe-area-inset-left)); }
.eg-c-lbx__n { font: 700 .875rem var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-text-2); }
.eg-c-lbx__acts { display: flex; gap: .5rem; }
.eg-c-lbx__btn { min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--border-inverse); font: 700 .9375rem var(--font-ui); color: var(--text-on-dark); }
.eg-c-lbx__btn:hover { background: var(--border-inverse); }
.eg-c-lbx__fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: .75rem; margin: 0; padding: 0 1rem 1.25rem; min-height: 0; }
.eg-c-lbx__fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; transition: opacity .16s linear; }
.eg-c-lbx__fig figcaption { font-size: .9375rem; text-align: center; }
.eg-c-lbx__nav {
  position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px;
  background: rgb(0 0 0 / .55); border: 1px solid var(--border-inverse); color: var(--text-on-dark); font-size: 1.25rem;
}
.eg-c-lbx__nav--prev { left: max(.75rem, env(safe-area-inset-left)); }
.eg-c-lbx__nav--next { right: max(.75rem, env(safe-area-inset-right)); }
@media (prefers-reduced-motion: reduce) {
  .eg-c-mo__img img, .eg-c-gal__a img, .eg-c-lbx__fig img { transition: none; }
  .eg-c-mo__card:hover .eg-c-mo__img img, .eg-c-gal__a:hover img { transform: none; }
}