/* ============================================================
   WILDSTREAM — Event page layout (event.css)
   Loaded only by event pages (webinars, round tables). Focused layout: slim
   header (logo links home, no navigation), event hero, story + sticky aside,
   registration form; shared footer. Building blocks (.ws-node, .ws-live-pill,
   .ws-event-facts, .ws-speaker) live in components.css.
   Per-event artwork = a variant of .ws-event-hero__art; the layout stays identical
   across events. The art area is always the anchor; the variant picks its reach:
   contained (default — drawn inside the area, e.g. --code) or --bleed (its
   .ws-event-hero__layer fills the hero behind the copy, centred on the area,
   soft-faded edges, e.g. --radar).
   Built only from DS tokens, type presets and existing atoms — no
   redefinition of type, colour or radius values the DS owns.
   ============================================================ */

/* Slim header row: a label on the left, the brand mark on the right as the only
   link home. No navigation. Sits inside the host panel, so it shares its inset. */
.ws-lp-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.ws-lp-header__label { margin: 0; white-space: nowrap; color: var(--fg); }
.ws-lp-header__logo, .ws-lp-header__logo:hover { display: flex; color: var(--fg); }
.ws-lp-header__logo svg { height: 40px; width: auto; display: block; }

.ws-event-hero__copy > .ws-event-facts { margin-top: 0; }

/* Event hero — full-bleed dark atmosphere (pair with .ws-dark + .bg-atmos-dark),
   deepened by a dim layer, a red glow on the right; copy left, an animated
   code-into-waves field right. */
.ws-event-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; min-height: min(90svh, 840px); }
.ws-event-hero__dim { position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--ws-purple-800) 55%, transparent); }
.ws-event-hero__glow { position: absolute; z-index: -1; width: 70vw; aspect-ratio: 1; right: -25vw; top: -5%; border-radius: var(--radius-pill); background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--ws-red) 30%, transparent), transparent 70%); }
.ws-event-hero__frame { flex: 1; display: flex; }
.ws-event-hero__panel { flex: 1; display: flex; flex-direction: column; gap: var(--space-10); padding-top: var(--space-8); }
.ws-event-hero__inner { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gutter); align-items: end; }
.ws-event-hero__copy { grid-column: 1 / span 5; }
.ws-event-hero__art { grid-column: 7 / -1; }
/* artwork variants — one per event visual (shared/landing.js): --code = scrolling code into waves (contained), --radar = radar scope (bleed) */
.ws-event-hero__copy { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; align-self: stretch; justify-content: flex-end; }
/* rhythm: pill sits tight on the title; facts follow; the action stands apart */
.ws-event-hero__copy > .ws-event-hero__title { margin-top: calc(-1 * var(--space-2)); }
.ws-event-hero__copy > .ws-event-facts { margin-top: var(--space-4); }
.ws-event-hero__copy > .ws-actions { margin-top: var(--space-10); }
.ws-event-hero__title { margin: 0; }
/* the art bleeds past the panel + container inset to the viewport edge (values mirror .mk-panel padding + --section-px) */
.ws-event-hero__art { position: relative; align-self: stretch; min-height: 520px; margin-right: calc(-1 * (var(--section-px) + clamp(var(--space-10), 4vw, var(--space-20)))); }
.ws-event-hero__code { position: absolute; left: 0; top: 0; bottom: 0; width: 44%; overflow: hidden; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-relaxed); white-space: nowrap; color: var(--ws-purple-200); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.ws-event-hero__scroll { display: flex; flex-direction: column; animation: ws-code-scroll 18s linear infinite; }
.ws-event-hero__ln { color: var(--ws-purple-400); margin-right: var(--space-4); }
.ws-event-hero__waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* bleed reach: the art area stays the anchor (position, size, phone order), but the
   variant's drawing layer fills the whole hero behind the copy and fades out — no hard edges.
   The hero (not the panel) becomes the layer's frame. */
.ws-event-hero__panel:has(.ws-event-hero__art--bleed), .ws-event-hero__art--bleed { position: static; }
.ws-event-hero__layer { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
@keyframes ws-code-scroll { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .ws-event-hero__scroll { animation: none; } }
@media (max-width: 980px) {
  .ws-event-hero { min-height: 0; }
  .ws-event-hero__panel { gap: var(--space-8); }
  .ws-event-hero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ws-event-hero__copy, .ws-event-hero__art { grid-column: 1 / -1; }
  .ws-event-hero__art { min-height: 400px; }
}
/* phones — after the base hero rules so these margins win (same specificity) */
@media (max-width: 640px) {
  .ws-event-hero__art { margin-right: calc(-1 * (var(--section-px) + var(--space-4))); }
  /* bleed art spans the full screen width both sides, so its visual centres on the screen */
  .ws-event-hero__art--bleed { margin-left: calc(-1 * (var(--section-px) + var(--space-4))); }
  /* hero actions: one under the other on every phone width, same on every event page */
  .ws-event-hero__copy > .ws-actions { flex-direction: column; align-items: flex-start; }
}

/* Story with a sticky aside — one reading column (7 of 12) beside a sunken card
   that stays in view. On narrow screens the card follows the story and floats
   at the bottom of the viewport as a compact bar while the story is on screen. */
.ws-event-story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gutter); align-items: start; }
.ws-event-story__body { grid-column: 1 / span 7; grid-row: 1; display: flex; flex-direction: column; gap: var(--space-6); }
.ws-event-story__body > * { margin: 0; }
.ws-event-story__body > h2:not(:first-child) { margin-top: var(--space-12); }
.ws-event-story__aside { grid-column: 9 / span 4; grid-row: 1; position: sticky; top: var(--space-10); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding: var(--space-8); border-radius: var(--radius-md); background: var(--bg-sunken); border: 1px solid var(--border-faint); }
.ws-event-story__facts { align-self: stretch; border-top: 0; }
.ws-event-story__facts .ws-event-facts__item:first-child { padding-top: 0; }
.ws-event-story__mini { display: none; margin: 0; color: var(--fg); }
@media (max-width: 980px) {
  .ws-event-story__body { grid-column: 1 / -1; grid-row: 1; }
  .ws-event-story__aside { grid-column: 1 / -1; grid-row: 2; top: auto; bottom: calc(var(--space-4) + var(--ws-toast-space, 0px)); transition: bottom var(--dur-base) var(--ease-out-soft); flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); box-shadow: var(--shadow-md); }
  .ws-event-story__facts { display: none; }
  .ws-event-story__mini { display: block; }
}
/* phones: the bar is a structured two-row block — the event line centred on top,
   the action full width below it */
@media (max-width: 640px) {
  .ws-event-story__aside { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); }
  .ws-event-story__mini { text-align: center; }
  .ws-event-story__aside > .mk-btn { width: 100%; justify-content: center; }
}

/* composition: two stacked sections on bare, background-free panels — the two
   section paddings where they meet collapse to one (same logic as the plain hero
   + section rule in components.css). The panels' own padding keeps the rhythm. */
.mk-section:has(> .mk-container > .mk-panel:not([class*="mk-panel--"])) + .mk-section:has(> .mk-container > .mk-panel:not([class*="mk-panel--"])) { padding-top: 0; }