/* ==========================================================================
   EventGo Australia — shared inner-page furniture
   --------------------------------------------------------------------------
   Everything every route below the homepage needs: the page hero, prose,
   feature rows, steps, accordions, forms, notices and the trust strip.
   The homepage does not load this file — it has its own sections.

   Each page then adds its own accent, rhythm and imagery on top. The rule is
   one system, not one template: Events reads editorial, Organisers reads
   capable, Help reads utilitarian, and they still share this spine.
   ========================================================================== */

/* ---- Page hero ---------------------------------------------------------- */

.eg-c-ph {
  position: relative; overflow: hidden; isolation: isolate;
  /* Clears the fixed header rather than sliding under it. */
  padding: calc(var(--hdr-h) + clamp(3.5rem, 9vh, 7rem)) var(--c-gut) clamp(3rem, 8vh, 5.5rem);
}
.eg-c-ph__bg {
  position: absolute; inset: -10% 0; z-index: -1; pointer-events: none;
  will-change: transform;
  /* The section clips overflow, so without this the glow ends in a hard
     horizontal line across the page where the hero stops. Fade it out instead
     of cutting it off. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  background:
    radial-gradient(52% 48% at 12% 18%,
      color-mix(in srgb, var(--c-violet) 34%, transparent), transparent 72%),
    radial-gradient(44% 42% at 88% 84%,
      color-mix(in srgb, var(--c-teal) 24%, transparent), transparent 70%);
}
/* Per-page accent shift, so pages feel related but not identical. */
.eg-c-ph--teal .eg-c-ph__bg {
  background:
    radial-gradient(52% 48% at 16% 22%,
      color-mix(in srgb, var(--c-teal) 32%, transparent), transparent 72%),
    radial-gradient(44% 42% at 84% 80%,
      color-mix(in srgb, var(--c-blue) 22%, transparent), transparent 70%);
}
.eg-c-ph--quiet .eg-c-ph__bg { opacity: .45; }

.eg-c-ph__inner { max-width: 1320px; margin-inline: auto; }
.eg-c-ph__k { margin-bottom: 1.25rem; }
.eg-c-ph__h { font-size: clamp(2.25rem, 6.5vw, 5.25rem); max-width: 18ch; }
.eg-c-ph__p { margin-top: 1.5rem; }
.eg-c-ph__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }

/* ---- Generic section ---------------------------------------------------- */

.eg-c-sec { padding: clamp(3.5rem, 9vh, 6.5rem) var(--c-gut); }
.eg-c-sec--alt { background: var(--c-ink-soft); }
.eg-c-sec__in { max-width: 1320px; margin-inline: auto; }
.eg-c-sec__h { font-size: clamp(1.875rem, 4.5vw, 3.5rem); max-width: 20ch; }
.eg-c-sec__lede { margin-top: 1.25rem; }
.eg-c-sec__head { margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }

/* ---- Prose (About, Terms, Privacy) -------------------------------------- */

.eg-c-prose { max-width: 68ch; display: grid; gap: 1.25rem; }
.eg-c-prose h2 {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  margin-top: 2.25rem; letter-spacing: -.02em;
}
.eg-c-prose h3 {
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700;
  text-transform: none; letter-spacing: 0; line-height: 1.4; margin-top: 1rem;
}
.eg-c-prose p, .eg-c-prose li { color: var(--c-text-2); }
.eg-c-prose ul { display: grid; gap: .5rem; padding-left: 1.1rem; list-style: disc; }
.eg-c-prose a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Feature rows / cards ----------------------------------------------- */

.eg-c-grid { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .eg-c-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .eg-c-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .eg-c-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .eg-c-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.eg-c-tile {
  display: grid; gap: .75rem; align-content: start;
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-surface);
}
.eg-c-tile__n {
  font-family: var(--font-display); font-weight: 900;
  font-size: .75rem; letter-spacing: .2em; color: var(--c-accent);
}
.eg-c-tile__h { font-size: 1.1875rem; line-height: 1.15; letter-spacing: -.01em; }
.eg-c-tile p { color: var(--c-text-2); font-size: .9375rem; }

/* ---- Steps -------------------------------------------------------------- */

.eg-c-steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 900px) { .eg-c-steps--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px) and (max-width: 899px) { .eg-c-steps--4 { grid-template-columns: repeat(2, 1fr); } }
.eg-c-step { display: grid; gap: .75rem; align-content: start; counter-increment: step; }
.eg-c-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 900; font-size: 2.25rem;
  line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(96deg, var(--eg-violet) 0%, var(--eg-blue) 45%, var(--eg-teal) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .eg-c-step::before { color: var(--c-accent); }
}
.eg-c-step h3 { font-size: 1.125rem; line-height: 1.2; }
.eg-c-step p { color: var(--c-text-2); font-size: .9375rem; }

/* ---- Trust strip -------------------------------------------------------- */

/* Real, verifiable reassurance only. No counts, no ratings, no "trusted by". */
.eg-c-trust {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  padding: 1.25rem 0; border-block: 1px solid var(--c-line);
}
.eg-c-trust li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .8125rem; color: var(--c-text-2);
}
.eg-c-trust li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--c-teal);
}

/* ---- Accordion ---------------------------------------------------------- */

/* Native <details>. A hand-rolled ARIA disclosure buys nothing here and is
   one more thing to get wrong; <details> is keyboard-operable, announced
   correctly, and works with JavaScript switched off. */
.eg-c-acc { display: grid; max-width: 78ch; }
.eg-c-acc details { border-bottom: 1px solid var(--c-line); }
.eg-c-acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.0625rem;
}
.eg-c-acc summary::-webkit-details-marker { display: none; }
.eg-c-acc summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--c-text-3); border-bottom: 2px solid var(--c-text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--c-ease);
}
.eg-c-acc details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.eg-c-acc summary:hover { color: var(--c-text); }
.eg-c-acc__body { padding: 0 0 1.35rem; color: var(--c-text-2); max-inline-size: 68ch; }
.eg-c-acc__body p + p { margin-top: .75rem; }

/* ---- Notice ------------------------------------------------------------- */

.eg-c-notice {
  border-left: 2px solid var(--c-line-strong);
  padding: .35rem 0 .35rem .9rem;
  font-size: .8125rem; color: var(--c-text-3); max-inline-size: 64ch;
}
/* Underlined, not just tinted. A link inside a paragraph distinguished by
   colour alone fails WCAG 1.4.1 — axe caught this on the attendees page. */
.eg-c-notice a {
  color: var(--c-accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.eg-c-notice--pending {
  border-left-color: var(--eg-blue);
  color: var(--c-text-2); font-size: .9375rem;
}

/* ---- Forms -------------------------------------------------------------- */

/* Every control has a real <label for>. UI Pro Max marks placeholder-only
   inputs as a HIGH severity failure: the placeholder disappears the moment
   someone types, so the field loses its name exactly when it is being filled. */
.eg-c-form { display: grid; gap: 1.25rem; max-width: 42rem; }
.eg-c-field { display: grid; gap: .45rem; }
.eg-c-field label { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.eg-c-field__hint { font-size: .75rem; color: var(--c-text-3); }
.eg-c-field :is(input, select, textarea) {
  width: 100%; min-height: 48px; padding: .8rem 1rem;
  font: inherit; font-size: 1rem;   /* 16px floor stops iOS zooming on focus */
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong); border-radius: 8px;
  transition: border-color .2s var(--c-ease);
}
.eg-c-field textarea { min-height: 9rem; resize: vertical; }
.eg-c-field :is(input, select, textarea):focus-visible { border-color: var(--c-accent); }
.eg-c-field :is(input, textarea)::placeholder { color: var(--c-text-3); }
.eg-c-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.eg-c-field__err { font-size: .8125rem; color: var(--status-critical, #F87171); }
.eg-c-field[data-invalid] :is(input, select, textarea) { border-color: var(--status-critical, #F87171); }
.eg-c-form__note { font-size: .8125rem; color: var(--c-text-3); max-inline-size: 56ch; }

/* ---- Split ------------------------------------------------------------- */

.eg-c-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .eg-c-split { grid-template-columns: 1fr 1fr; } }
.eg-c-split--top { align-items: start; }
.eg-c-split--flip > :first-child { order: 2; }
@media (max-width: 899px) { .eg-c-split--flip > :first-child { order: 0; } }
.eg-c-split__media {
  position: relative; overflow: hidden; border-radius: 10px;
  aspect-ratio: 4 / 3; background: var(--c-surface);
}
.eg-c-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Closing CTA band --------------------------------------------------- */

.eg-c-band {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(4rem, 12vh, 8rem) var(--c-gut);
  text-align: center;
}
.eg-c-band__bg {
  position: absolute; inset: -12% 0; z-index: -1; pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(54% 50% at 50% 44%,
      color-mix(in srgb, var(--c-violet) 38%, transparent), transparent 72%),
    radial-gradient(38% 36% at 84% 86%,
      color-mix(in srgb, var(--c-teal) 24%, transparent), transparent 70%);
}
.eg-c-band__in { max-width: 54rem; margin-inline: auto; display: grid; gap: 1.5rem; justify-items: center; }
.eg-c-band__h { font-size: clamp(2rem, 6vw, 4.5rem); }
.eg-c-band__actions { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; }

/* ---- Footer address ----------------------------------------------------- */

/* Footer address styles moved to 03-footer.css with the rest of the footer. */