/* ==========================================================================
   EventGo Australia — Homepage · 6 · Backstage with EventGo Australia
   (branch eventgo-v3-homepage-cinematic-build)
   --------------------------------------------------------------------------
   The organiser story in six chapters and a close:
     List & ticket · Delivery · Check-in · Promotion · Get found · Support
     → "From first listing to doors open."

   Default (no JS, < 900px): a stack of chapters, each with its picture.
   .eg-c-bs--stage (set by eg-home-backstage.js on >= 900px): two columns —
   the chapters scroll normally on the left, ONE sticky visual column on the
   right shows the active chapter's picture. The picture changes by STATE
   (an opacity crossfade of 300ms), never by scrub. Under reduced motion the
   change is instant. This is the homepage's second and last sticky section.

   Mock-ups are HTML, not images: they stay sharp, they are editable in
   Elementor, and they say "sample" / "Your event" rather than inventing a
   real one. The photographs are Higgsfield plates (design/higgsfield/home/
   cinematic), with no logo on any equipment (CLAUDE.md selective branding).
   ========================================================================== */

.eg-c-bs { position: relative; padding: var(--c-sec) var(--c-gut) 0; background: var(--c-ink); }
.eg-c-bs__in { width: 100%; max-width: 1320px; margin-inline: auto; }

/* ---- stacked chapters (default) ---- */
.eg-c-bs__stage { display: none; }
.eg-c-bs__chapters {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 8vh, 5rem);
  padding: 0; margin: 0; list-style: none;
}
.eg-c-bs__ch { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 720px) {
  .eg-c-bs__ch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .eg-c-bs__ch:nth-child(even) .eg-c-bs__fig { order: 2; }
}
.eg-c-bs__fig { margin: 0; min-width: 0; }
.eg-c-bs__copy { display: grid; gap: .875rem; align-content: center; }
.eg-c-bs__k {
  display: flex; align-items: baseline; gap: .75rem; margin: 0;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-accent);
}
.eg-c-bs__k .eg-c-num { color: var(--c-text-3); letter-spacing: .08em; }
.eg-c-bs__h { margin: 0; font-size: var(--t-title); line-height: 1; letter-spacing: -.03em; max-inline-size: 18ch; }
.eg-c-bs__p { margin: 0; color: var(--c-text-2); max-inline-size: 44ch; }
.eg-c-bs__p b { color: var(--c-text); font-weight: 700; }
.eg-c-bs__pts { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .25rem 0 0; list-style: none; }
.eg-c-bs__pts li {
  font-size: var(--t-meta); padding: .4rem .85rem; color: var(--c-text-2);
  border: 1px solid var(--c-line); border-radius: var(--radius-full);
}

/* ---- the visuals: photographs with chips, and HTML mock-ups ---- */
.eg-c-bs__photo { position: relative; max-width: 30rem; margin-inline: auto; }
.eg-c-bs__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); }
.eg-c-bs__chip {
  position: absolute; display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; border-radius: var(--radius-full);
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  font-size: var(--t-meta); color: var(--c-text-2); white-space: nowrap;
  box-shadow: 0 16px 36px -18px rgb(0 0 0 / .8);
}
.eg-c-bs__chip b { color: var(--c-text); font-weight: 700; }
.eg-c-bs__chip--a { left: -.75rem; top: 14%; }
.eg-c-bs__chip--b { right: -.75rem; bottom: 12%; }
@media (max-width: 479.98px) {
  .eg-c-bs__chip--a { left: .75rem; }
  .eg-c-bs__chip--b { right: .75rem; }
}
.eg-c-bs__ico {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: var(--radius-full); color: var(--c-teal); border: 1px solid var(--c-line-strong);
}
.eg-c-bs__ico svg { width: .85rem; height: .85rem; }

.eg-c-bs__mock {
  display: grid; overflow: hidden; border-radius: var(--radius-xl);
  border: 1px solid var(--c-line-strong); background: var(--c-ink-soft);
}
/* 1 · an event page, with its ticket types */
.eg-c-bs__art { aspect-ratio: 16 / 7; overflow: hidden; }
.eg-c-bs__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eg-c-bs__mbody { display: grid; gap: .5rem; padding: 1.25rem 1.5rem 1.5rem; }
.eg-c-bs__mk { font-size: var(--t-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-3); }
.eg-c-bs__mt { font-family: var(--font-headline); font-weight: 800; font-size: var(--t-card); color: var(--c-text); }
.eg-c-bs__mm { font-size: var(--t-meta); color: var(--c-text-2); margin-bottom: .25rem; }
.eg-c-bs__row {
  display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-md); font-size: var(--t-meta);
}
.eg-c-bs__row b { font-weight: 600; color: var(--c-text); }
.eg-c-bs__row i { font-style: normal; color: var(--c-teal); font-weight: 700; }
.eg-c-bs__pay { font-size: var(--t-meta); color: var(--c-text-3); margin-top: .25rem; }

/* 4 · ONE creative, three surfaces: the same picture and the same words
   cropped for a feed, a story and a search/display placement. */
.eg-c-bs__mock--promo {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .875rem; padding: .875rem;
  align-items: end;
}
.eg-c-bs__surf {
  position: relative; display: grid; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--c-line); background: var(--c-ink);
}
.eg-c-bs__surf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eg-c-bs__surf--feed { aspect-ratio: 1; }
.eg-c-bs__surf--story { aspect-ratio: 9 / 16; }
.eg-c-bs__surf--display { grid-column: 1 / -1; aspect-ratio: 3.2 / 1; }
.eg-c-bs__surf--display img { object-position: 50% 30%; }
.eg-c-bs__sl, .eg-c-bs__cap { position: absolute; left: .625rem; z-index: 1; }
.eg-c-bs__sl {
  top: .625rem; padding: .2rem .55rem; border-radius: var(--radius-full);
  background: var(--c-ink); color: var(--c-text-2);
  font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.eg-c-bs__cap {
  right: .625rem; bottom: .625rem; padding: .45rem .65rem; border-radius: var(--radius-md);
  background: var(--c-ink); color: var(--c-text); font-size: var(--t-label); font-weight: 700;
  line-height: 1.3;
}

/* 5 · a results page: one real-looking result — yours — and skeletons. */
.eg-c-bs__mock--found { gap: .75rem; padding: 1.25rem; }
.eg-c-bs__search {
  display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: 0 1rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-full);
  font-size: var(--t-meta); color: var(--c-text-2);
}
.eg-c-bs__search svg { width: 1.1rem; height: 1.1rem; color: var(--c-accent); flex: none; }
.eg-c-bs__res { display: grid; gap: .4rem; padding: 1rem 1.125rem; border-radius: var(--radius-md); border: 1px solid var(--c-line); }
.eg-c-bs__res--you { border-color: var(--c-teal); background: var(--c-surface); }
.eg-c-bs__res--you b { font-family: var(--font-headline); font-size: var(--t-card); color: var(--c-text); }
.eg-c-bs__res--you i { font-style: normal; font-size: var(--t-meta); color: var(--c-teal); }
.eg-c-bs__res--you span { font-size: var(--t-meta); color: var(--c-text-2); }
.eg-c-bs__res:not(.eg-c-bs__res--you) i { display: block; height: .55rem; border-radius: 99px; background: var(--c-line); }
.eg-c-bs__res:not(.eg-c-bs__res--you) i:nth-child(1) { width: 46%; height: .8rem; }
.eg-c-bs__res:not(.eg-c-bs__res--you) i:nth-child(2) { width: 28%; }
.eg-c-bs__res:not(.eg-c-bs__res--you) i:nth-child(3) { width: 82%; }

/* ---- the close ---- */
.eg-c-bs__close {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(4rem, 12vh, 8rem); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  min-height: clamp(26rem, 70vh, 40rem); display: grid; align-items: end;
}
.eg-c-bs__closebg { position: absolute; inset: 0; z-index: -1; }
.eg-c-bs__closebg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.eg-c-bs__closebg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .15) 0%, rgb(0 0 0 / .62) 40%, var(--c-ink) 100%);
}
.eg-c-bs__closein { display: grid; gap: 1.5rem; justify-items: start; padding: clamp(1.5rem, 5vw, 4rem); }
.eg-c-bs__line {
  margin: 0; font-family: var(--font-headline); font-weight: 800;
  font-size: var(--t-section); line-height: .96; letter-spacing: -.035em; max-inline-size: 14ch;
  text-wrap: balance;
}
.eg-c-bs__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.eg-c-bs__contact { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; font-style: normal; font-size: var(--t-meta); color: var(--c-text-2); }
.eg-c-bs__contact a { color: var(--c-text); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 559.98px) {
  .eg-c-bs__actions .eg-c-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   THE STAGE — >= 900px, JavaScript present.
   ========================================================================== */
.eg-c-bs--stage .eg-c-bs__body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 5vw, 5rem);
}
.eg-c-bs--stage .eg-c-bs__stage {
  display: block; position: sticky; order: 2;
  top: calc(var(--hdr-h) + 2rem); height: calc(100vh - var(--hdr-h) - 4rem); height: calc(100svh - var(--hdr-h) - 4rem);
}
.eg-c-bs--stage .eg-c-bs__fig { display: none; }
.eg-c-bs--stage .eg-c-bs__chapters { gap: 0; }
.eg-c-bs--stage .eg-c-bs__ch {
  grid-template-columns: minmax(0, 1fr); min-height: 72vh; min-height: 72svh;
  padding-left: 1.5rem; border-left: 2px solid var(--c-line);
}
.eg-c-bs--stage .eg-c-bs__ch[data-active] { border-left-color: var(--c-teal); }
.eg-c-bs__vis {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--c-ease), visibility 0s linear .3s;
}
.eg-c-bs__vis[data-active] { opacity: 1; visibility: visible; transition: opacity .3s var(--c-ease), visibility 0s; }
.eg-c-bs__vis > * { width: 100%; max-height: 100%; }
.eg-c-bs--stage .eg-c-bs__photo { max-width: min(100%, 27rem); }
.eg-c-bs--stage .eg-c-bs__photo img { max-height: calc(100svh - var(--hdr-h) - 6rem); width: auto; margin-inline: auto; }
.eg-c-bs--stage .eg-c-bs__mock { max-width: 36rem; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .eg-c-bs__vis, .eg-c-bs__vis[data-active] { transition: none; }
}