/* ==========================================================================
   EventGo Australia — THE DELIVERY MOMENT (homepage, V4.4)
   --------------------------------------------------------------------------
   "Email. And WhatsApp. Included." One ticket goes down two routes at once
   (the channels are PARALLEL, never a fallback chain), each arrives as the
   same ticket with a text "Sent", and the recovery story follows in four
   plain steps. Markup: v4.home_delivery(); motion: eg-home-delivery.js.

   The picture is decorative (aria-hidden) and drawn in the ticket's own
   materials: a ticket with a QR SLOT (never a drawn QR), two channel cards,
   no imitation of Meta's or a mail app's interface. Everything it says is in
   the words beside it.

   Mobile first: text, then the picture (ticket above, two cards side by
   side under one fork), then the steps. From 960px the text and the picture
   sit side by side and the steps run in a row beneath. Only transform and
   opacity move, and only when eg-home-delivery.js arms the stage.
   ========================================================================== */
.eg-c-hdl { padding: clamp(4rem, 10vh, 7rem) var(--c-gut); }
.eg-c-hdl__in {
  max-width: 1240px; margin-inline: auto; display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr); align-items: center;
}
@media (min-width: 960px) {
  .eg-c-hdl__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .eg-c-hdl__rec { grid-column: 1 / -1; }
}
.eg-c-hdl__h { font-size: var(--t-section); line-height: 1.02; letter-spacing: -.03em; margin: .5rem 0 1rem; }
.eg-c-hdl__tx .eg-c-lead { max-width: 44ch; color: var(--c-text-2); }
.eg-c-hdl__tx .eg-c-lead em { font-style: normal; color: var(--c-text); font-weight: 700; }
.eg-c-hdl__dp { margin-top: 1.5rem; }

/* ---- the picture ------------------------------------------------------- */
.eg-c-hdl__stage {
  display: grid; grid-template-columns: minmax(0, 30rem); justify-content: center; justify-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--c-line); border-radius: 24px; background: var(--c-ink-soft);
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--c-violet) 24%, transparent), transparent 72%), var(--c-ink-soft);
}
.eg-c-hdl__tk, .eg-c-hdl__mini {
  display: grid; grid-template-columns: minmax(0, 1fr) 27.4%; aspect-ratio: 2000 / 880;
  background: linear-gradient(135deg, var(--c-violet), var(--c-blue));
}
.eg-c-hdl__tk { width: min(16rem, 80%); border-radius: 14px; }
.eg-c-hdl__tb, .eg-c-hdl__mb { display: grid; align-content: center; gap: 9%; padding: 0 11%; }
.eg-c-hdl__tb i, .eg-c-hdl__mb i { display: block; height: .5rem; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 62%, transparent); }
.eg-c-hdl__tb i:nth-child(1) { width: 78%; }
.eg-c-hdl__tb i:nth-child(2) { width: 52%; opacity: .7; }
.eg-c-hdl__tb i:nth-child(3) { width: 36%; opacity: .5; }
.eg-c-hdl__ts, .eg-c-hdl__ms { display: grid; place-items: center; border-left: 2px dashed color-mix(in srgb, var(--c-text) 45%, transparent); }
.eg-c-hdl__slot { width: 56%; aspect-ratio: 1; border: 2px dashed color-mix(in srgb, var(--c-text) 75%, transparent); border-radius: 4px; }

.eg-c-hdl__stem { display: block; width: 2px; height: 1.75rem; background: var(--c-teal); transform-origin: 50% 0; }
.eg-c-hdl__bar { display: block; width: calc(50% + .375rem); height: 2px; background: var(--c-teal); }
.eg-c-hdl__chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: 100%; }
.eg-c-hdl__ch {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .75rem; margin-top: 1.5rem;
  padding: 1.125rem .625rem 1rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-lg); background: var(--c-ink);
}
.eg-c-hdl__leg { position: absolute; top: calc(-1.5rem - 1px); left: 50%; width: 2px; height: 1.5rem; margin-left: -1px; background: var(--c-teal); transform-origin: 50% 0; }
.eg-c-hdl__cn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9375rem; }
.eg-c-hdl__ico {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  border-radius: 999px; border: 1px solid var(--c-line-strong); color: var(--c-teal);
}
.eg-c-hdl__ico svg, .eg-c-hdl__ico img[data-wa-mark] { width: 1.0625rem; height: 1.0625rem; vertical-align: 0; }
.eg-c-hdl__mini { width: min(8.5rem, 88%); border-radius: 8px; transform-origin: 50% 50%; }
.eg-c-hdl__mb { gap: 14%; padding: 0 10%; }
.eg-c-hdl__mb i { height: .3125rem; }
.eg-c-hdl__mb i:nth-child(2) { width: 60%; opacity: .7; }
.eg-c-hdl__ms { border-left-width: 1.5px; }
.eg-c-hdl__ms .eg-c-hdl__slot { border-width: 1.5px; border-radius: 2px; }
.eg-c-hdl__st {
  display: inline-flex; align-items: center; gap: .3125rem; padding: .25rem .625rem .25rem .5rem;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-teal) 55%, transparent);
  font-size: .8125rem; font-weight: 700; color: var(--c-teal);
}
.eg-c-hdl__st svg { width: .9375rem; height: .9375rem; }

/* The narrowest phones: the channel name and its ring shrink so "WhatsApp"
   stays inside its card (the track is minmax(0, 1fr), never its content). */
@media (max-width: 379.98px) {
  .eg-c-hdl__stage { padding-inline: .75rem; }
  .eg-c-hdl__chs { gap: .5rem; }
  .eg-c-hdl__bar { width: calc(50% + .25rem); }
  .eg-c-hdl__ch { padding-inline: .375rem; }
  .eg-c-hdl__cn { gap: .375rem; font-size: .8125rem; }
  .eg-c-hdl__ico { width: 1.625rem; height: 1.625rem; }
  .eg-c-hdl__ico svg, .eg-c-hdl__ico img[data-wa-mark] { width: .9375rem; height: .9375rem; }
}

/* ---- where's my ticket? ------------------------------------------------ */
.eg-c-hdl__rh { margin: 0 0 1rem; font-size: var(--t-title); letter-spacing: -.02em; }
.eg-c-hdl__lost { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .eg-c-hdl__lost { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .eg-c-hdl__lost { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eg-c-hdl__s {
  display: grid; gap: .25rem; align-content: start; padding: 1rem 1.125rem 1.125rem;
  border-top: 2px solid var(--c-line-strong); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--c-ink-soft);
}
.eg-c-hdl__s:first-child { border-top-color: var(--c-teal); }
.eg-c-hdl__n { font-size: var(--t-label, .75rem); font-weight: 800; letter-spacing: .14em; color: var(--c-teal); }
.eg-c-hdl__s b { font-size: 1.0625rem; }
.eg-c-hdl__s span:not(.eg-c-hdl__n) { color: var(--c-text-2); }

/* ---- motion: eg-home-delivery.js arms the stage, then plays it once ---- */
[data-hdl-armed] [data-hdl-tk], [data-hdl-armed] [data-hdl-line], [data-hdl-armed] [data-hdl-bar],
[data-hdl-armed] [data-hdl-ch], [data-hdl-armed] [data-hdl-mini], [data-hdl-armed] [data-hdl-st] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  [data-hdl-armed] [data-hdl-tk], [data-hdl-armed] [data-hdl-line], [data-hdl-armed] [data-hdl-bar],
  [data-hdl-armed] [data-hdl-ch], [data-hdl-armed] [data-hdl-mini], [data-hdl-armed] [data-hdl-st] { opacity: 1; }
}