/* ==========================================================================
   EventGo Australia — Homepage · 2 · Discover events
   --------------------------------------------------------------------------
   The search bar, the kinds of event, and the Event Card.

   THE LISTINGS ARE REAL. Three published events from eventgoaustralia.com.au,
   checked on 23 September 2026, each linking to the live page where it is
   actually sold. Nothing on a card is invented: where a venue is not yet
   announced the card says so, and a price appears only where the listing
   states one ("Price TBA" otherwise). eg-home-events.js retires a card once
   its event has ended.

   THE ARTWORK IS THE ORGANISER'S OWN, and it carries its own lettering, so it
   is shown WHOLE — contained, never cropped. What used to be flat bars
   around it is now the artwork's own colour: a second, decorative copy of
   the same file (same URL, so no second download), blurred and dimmed
   behind it. Every poster brings its own light into the grid.

   The cards carry REAL inventory, which is not the same thing as the
   platform's scope: the search and the kinds of event are deliberately
   genre-neutral, and so is this grid.

   Event Card anatomy (Figma 03 · Event Cards → "as built"), in the order a
   buyer decides:
     DATE (the stub) · NAME (the one link) · time · VENUE · organiser ·
     [tiers] · — perforation — · PRICE · STATUS · action
   One <article>, one stretched link on the title — the whole card is a
   single tab stop and a single screen-reader link, named by the event.
   ========================================================================== */

.eg-c-he { position: relative; z-index: 1; padding: 0 var(--c-gut) var(--c-sec); }
.eg-c-he__in { width: 100%; max-width: 1320px; margin-inline: auto; }

/* ---- Search ----------------------------------------------------------------
   A plain GET form to /events/, which already reads ?q= and ?date=. It
   rises over the hero's lower edge so discovery starts in the first view. */
.eg-c-he__search {
  position: relative; margin: -3.5rem 0 1rem;
  display: grid; grid-template-columns: 1fr; gap: .5rem;
  padding: .5rem; border-radius: var(--radius-xl);
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  box-shadow: 0 28px 56px -18px rgb(0 0 0 / .6);
}
.eg-c-he__search:focus-within { border-color: var(--c-accent); }
@media (min-width: 760px) {
  .eg-c-he__search {
    grid-template-columns: 1fr auto auto; align-items: center;
    border-radius: var(--radius-full); padding: .5rem .5rem .5rem 1.5rem;
  }
}
.eg-c-he__q { position: relative; display: flex; align-items: center; gap: .75rem; min-width: 0; }
.eg-c-he__q svg { flex: none; width: 1.375rem; height: 1.375rem; color: var(--c-accent); }
.eg-c-he__search :is(input, select) {
  width: 100%; min-height: 56px; font: inherit; font-size: 1.0625rem; color: var(--c-text);
  background: transparent; border: 0; border-radius: var(--radius-lg);
}
.eg-c-he__search input::placeholder { color: var(--c-text-3); }
.eg-c-he__search input:focus-visible,
.eg-c-he__search select:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.eg-c-he__cat { position: relative; }
.eg-c-he__cat select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 0 2.5rem 0 1rem; font-weight: 600;
  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: .35rem .35rem; background-repeat: no-repeat;
}
.eg-c-he__cat select option { color: initial; }
.eg-c-he__search .eg-c-btn { min-height: 56px; }
@media (min-width: 760px) {
  .eg-c-he__cat { border-left: 1px solid var(--c-line-strong); }
  .eg-c-he__cat select { min-width: 12rem; }
  .eg-c-he__search .eg-c-btn { padding-inline: 2.25rem; }
}
@media (max-width: 759.98px) {
  .eg-c-he__q { padding-inline: .75rem; border-bottom: 1px solid var(--c-line); }
  .eg-c-he__search .eg-c-btn { width: 100%; }
}

/* ---- Kinds of event --------------------------------------------------------
   Straight under the search, because they ARE search: each is a keyword
   (?q=) that works whatever /events/'s category list becomes once it is
   wired to Eventin. Wrapped, never a sideways-scrolling rail, so nothing
   is hidden past the edge of a phone. */
.eg-c-he__cats { margin-bottom: clamp(3.5rem, 9vh, 6rem); }
.eg-c-he__cats ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.eg-c-he__cat-link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.125rem;
  border-radius: var(--radius-full); border: 1.5px solid var(--c-line-strong);
  font-size: .9375rem; font-weight: 600; color: var(--c-text-2);
  transition: background-color .2s var(--c-ease), border-color .2s var(--c-ease), color .2s var(--c-ease);
}
.eg-c-he__cat-link:hover { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .34); color: var(--c-text); }
@media (prefers-reduced-motion: no-preference) {
  .eg-c-he__cat-link { transition: background-color .2s var(--c-ease), border-color .2s var(--c-ease), color .2s var(--c-ease), transform .15s var(--c-ease); }
  .eg-c-he__cat-link:active { transform: scale(.96); }
}

/* ---- Grid: equal cards ------------------------------------------------------
   Three equal columns, NOT one wide featured poster. The live inventory
   today happens to be one season's celebrations; a single wide card made
   that one genre define the section, and EventGo Australia is an all-event
   platform. "Featured" is a label, not a layout. */
.eg-c-he__grid { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 900px) { .eg-c-he__grid { grid-template-columns: repeat(3, 1fr); } }
.eg-c-he__empty { grid-column: 1 / -1; }

.eg-c-he__note { margin-top: 1.5rem; font-size: var(--t-meta); color: var(--c-text-3); max-inline-size: 70ch; }
.eg-c-he__empty { padding: 2rem; border-radius: var(--radius-xl); border: 1px dashed var(--c-line-strong); color: var(--c-text-2); }
.eg-c-he__empty[hidden] { display: none; }

/* ==========================================================================
   EVENT CARD
   ========================================================================== */
.eg-c-ecard {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--c-surface); border: 1px solid var(--c-line);
  transition: border-color .25s var(--c-ease);
}
.eg-c-ecard[hidden] { display: none; }
.eg-c-ecard:focus-within { border-color: var(--c-accent); }

/* ---- Media: the artwork whole, on its own light -------------------------- */
.eg-c-ecard__media { position: relative; overflow: hidden; background: var(--c-ink-soft); isolation: isolate; }
.eg-c-ecard__media img { display: block; width: 100%; height: auto; }
.eg-c-ecard__media .eg-c-ecard__amb {
  position: absolute; inset: 0; z-index: -1; height: 100%;
  object-fit: cover; opacity: .55; filter: blur(22px) saturate(1.25);
  transform: scale(1.25);
}
/* Three across, every artwork box is the same 3:2 so the titles line up;
   the artwork is CONTAINED, never cropped. */
@media (min-width: 900px) {
  .eg-c-ecard__media { aspect-ratio: 3 / 2; }
  .eg-c-ecard__media .eg-c-ecard__art { height: 100%; object-fit: contain; }
}

/* ---- Body ----------------------------------------------------------------- */
/* The date is the first thing a buyer checks, so it opens the card as a
   STUB beside the name: day in the display face, tabular. It is not laid
   over the artwork — the organiser's poster carries its own lettering and
   is shown whole, so nothing may cover a corner of it. */
.eg-c-ecard__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: .25rem; }
.eg-c-ecard__date {
  display: grid; justify-items: center; min-width: 3.5rem; padding: .5rem .5rem .5625rem;
  border-radius: var(--radius-lg); background: var(--c-ink); border: 1px solid var(--c-line-strong);
  line-height: 1;
}
.eg-c-ecard__date time { display: grid; justify-items: center; gap: .3rem; }
.eg-c-ecard__dow, .eg-c-ecard__mon {
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.eg-c-ecard__dow { color: var(--c-text-2); }
.eg-c-ecard__mon { color: var(--c-accent); }
.eg-c-ecard__day {
  font-family: var(--font-headline); font-weight: 800; font-size: 1.75rem; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.eg-c-ecard__name { display: grid; gap: .375rem; padding-top: .125rem; }
.eg-c-ecard__flag {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent);
}
.eg-c-ecard__body {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.25rem 1.375rem 1.25rem;
}
.eg-c-ecard__t { font-size: var(--t-card); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
.eg-c-ecard__link { color: inherit; }
/* The stretched link: the title's link covers the whole card. */
.eg-c-ecard__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.eg-c-ecard__link:focus-visible { outline: none; }
.eg-c-ecard:has(.eg-c-ecard__link:focus-visible) { outline: 3px solid var(--c-accent); outline-offset: 4px; }

.eg-c-ecard__meta { display: grid; gap: .25rem; padding: 0; margin: 0; list-style: none; font-size: var(--t-meta); color: var(--c-text-2); }
.eg-c-ecard__meta li { display: flex; gap: .5rem; align-items: baseline; }
.eg-c-ecard__meta svg { flex: none; width: .9375rem; height: .9375rem; color: var(--c-text-3); transform: translateY(.125em); }
.eg-c-ecard__meta time { font-variant-numeric: tabular-nums; }
.eg-c-ecard__org { font-size: .875rem; color: var(--c-text-3); }

.eg-c-ecard__tiers-h {
  margin-top: .25rem; padding-top: .75rem; border-top: 1px solid var(--c-line);
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-3);
}
.eg-c-ecard__tiers { display: grid; gap: .125rem; padding: 0; margin: 0; list-style: none; font-size: .875rem; color: var(--c-text-2); }
.eg-c-ecard__tiers li { display: flex; justify-content: space-between; gap: 1rem; }
.eg-c-ecard__tiers b { font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }

/* ---- The stub: price, availability, action --------------------------------
   Torn off along a perforation, with a notch punched each side — the ticket
   device from the logo. The notches are the page's own ink, so they read as
   holes through the card. Not drawn beside the artwork (560-899), where the
   card's left edge is the picture, not the ticket. */
.eg-c-ecard__body > :has(+ .eg-c-ecard__foot) { margin-bottom: .75rem; }
.eg-c-ecard__foot {
  position: relative; margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  padding-top: 1.125rem;
  background: linear-gradient(90deg, var(--c-line-strong) 50%, transparent 50%) top left / 10px 1.5px repeat-x;
}
.eg-c-ecard__foot::before, .eg-c-ecard__foot::after {
  content: ""; position: absolute; top: -.6875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line);
}
.eg-c-ecard__foot::before { left: calc(-1.375rem - .6875rem); }
.eg-c-ecard__foot::after { right: calc(-1.375rem - .6875rem); }

.eg-c-ecard__buy { display: grid; gap: .25rem; }
.eg-c-ecard__price { display: flex; align-items: baseline; gap: .5rem; }
.eg-c-ecard__price b {
  font-family: var(--font-headline); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.eg-c-ecard__price span { font-size: .8125rem; color: var(--c-text-3); }
.eg-c-ecard__state { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; }
.eg-c-ecard__state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.eg-c-ecard__state[data-state="limited"] { color: var(--status-warning); }
.eg-c-ecard__state[data-state="free"]    { color: var(--status-good); }
.eg-c-ecard__state[data-state="soon"]    { color: var(--c-text-2); }
.eg-c-ecard__cta { pointer-events: none; }
.eg-c-ecard__cta i { font-style: normal; display: inline-block; }

/* Between 560 and 900 the cards stack one per row and lay the artwork
   beside the words instead. */
@media (min-width: 560px) and (max-width: 899.98px) {
  .eg-c-ecard { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: none; align-items: stretch; }
  .eg-c-ecard__media { display: grid; align-items: center; }
  .eg-c-ecard__foot::before, .eg-c-ecard__foot::after { content: none; }
}

/* ---- The card answers ------------------------------------------------------
   Lift, the artwork leans in, the action's arrow nudges. Hover only where
   hover exists (a tapped phone would otherwise keep the card lifted), the
   SAME state for keyboard focus, and a press for touch. Transform only;
   nothing at all under reduced motion — the focus outline still shows. */
@media (prefers-reduced-motion: no-preference) {
  .eg-c-ecard { transition: border-color .25s var(--c-ease), transform .35s var(--c-ease); }
  .eg-c-ecard__art { transition: transform .6s var(--c-ease); }
  .eg-c-ecard__cta i { transition: transform .3s var(--c-ease); }
  .eg-c-ecard:has(.eg-c-ecard__link:focus-visible) { transform: translateY(-4px); }
  .eg-c-ecard:has(.eg-c-ecard__link:focus-visible) .eg-c-ecard__art { transform: scale(1.035); }
  .eg-c-ecard:has(.eg-c-ecard__link:focus-visible) .eg-c-ecard__cta i { transform: translateX(4px); }
  .eg-c-ecard:active { transform: translateY(-1px) scale(.992); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .eg-c-ecard:hover { transform: translateY(-4px); border-color: var(--c-line-strong); }
  .eg-c-ecard:hover .eg-c-ecard__art { transform: scale(1.035); }
  .eg-c-ecard:hover .eg-c-ecard__cta i { transform: translateX(4px); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .eg-c-ecard:hover { border-color: var(--c-line-strong); }
}