/* ============================================================
   WILDSTREAM — Landing blocks
   Block-level compositions for standalone promo pages (events, campaigns).
   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 { display: flex; color: var(--fg); }
/* the logo keeps its colour on hover (the site-wide a:hover turns links red) */
.ws-lp-header__logo:hover { color: var(--fg); }
.ws-lp-header__logo svg { height: 40px; width: auto; display: block; }

/* Signal dot — a solid red point with a soft halo. */
.ws-node { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--ws-red); box-shadow: 0 0 0 6px color-mix(in oklab, var(--ws-red) 25%, transparent); }

/* Outlined status pill led by the signal dot; type comes from the preset on the element. */
.ws-live-pill { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--border-strong); white-space: nowrap; color: var(--fg); }

/* Fact row — equal cells between hairlines (same rule as .ws-card-list / .ws-section-close): label · value · note. Value type
   comes from the preset on the <dd>; --1 stacks the cells. Stacks on phones. */
.ws-event-facts { display: grid; grid-template-columns: repeat(var(--facts, 3), minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ws-event-facts--1 { --facts: 1; }
/* flow spacing after preceding content; flex/grid hosts space their children with gap instead */
* + .ws-event-facts { margin-top: var(--space-8); }
.ws-event-hero__copy > .ws-event-facts { margin-top: 0; }
.ws-event-facts__item { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-5) var(--space-5) var(--space-5) 0; }
.ws-event-facts__item + .ws-event-facts__item { border-left: 1px solid var(--border); padding-left: var(--space-5); }
.ws-event-facts dt, .ws-event-facts dd { margin: 0; }
.ws-event-facts__note { color: var(--fg-muted); white-space: nowrap; }
/* accent: labels in light purple (dark surfaces) */
.ws-event-facts--accent dt { color: var(--ws-purple-200); }
.ws-event-facts__note + .ws-event-facts__note { margin-top: calc(-1 * var(--space-2)); }
@media (max-width: 640px) {
  .ws-event-facts { --facts: 1; }
  .ws-event-hero__art { margin-right: calc(-1 * (var(--section-px) + var(--space-4))); }
  .ws-event-facts__item + .ws-event-facts__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); }
  /* the hero's date · time · where stay one row on phones: tighter cells, a value
     size that scales with the screen; each column at least as wide as its text */
  .ws-event-facts--accent { grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
  .ws-event-facts--accent .ws-event-facts__item { gap: var(--space-1); padding: var(--space-4) var(--space-3) var(--space-4) 0; }
  .ws-event-facts--accent .ws-event-facts__item + .ws-event-facts__item { border-top: 0; border-left: 1px solid var(--border); padding-left: var(--space-3); }
  .ws-event-facts--accent .ws-h2 { font-size: clamp(22px, 6.6vw, 32px); }
  .ws-event-facts--accent .ws-event-facts__note + .ws-event-facts__note { margin-top: 0; }
}
/* very narrow phones: date and time side by side, where on the line below */
@media (max-width: 359px) {
  .ws-event-facts--accent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-event-facts--accent .ws-event-facts__item:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--border); }
}

/* 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; }
.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; }
@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; }
}

/* 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: var(--space-4); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-md); }
  .ws-event-story__facts { display: none; }
  .ws-event-story__mini { display: block; }
}
/* single-column fact list: cells stack, divided by hairlines */
.ws-event-facts--1 .ws-event-facts__item + .ws-event-facts__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); }

/* 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; }

/* Speaker — one or two hosts: a square photo beside name, role and a short bio.
   Two hosts stack as two rows; on phones the photo sits above the text. */
.ws-speaker-grid { display: flex; flex-direction: column; gap: var(--space-10); }
.ws-speaker { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-6); align-items: start; margin: 0; }
.ws-speaker__photo { aspect-ratio: 1; border-radius: var(--radius-md); background: var(--bg-sunken); border: 1px solid var(--border-faint); overflow: hidden; }
.ws-speaker__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-speaker__text { display: flex; flex-direction: column; gap: var(--space-2); }
.ws-speaker__name, .ws-speaker__role, .ws-speaker__bio { margin: 0; }
.ws-speaker__role { color: var(--fg-muted); }
.ws-speaker__bio { margin-top: var(--space-2); }
@media (max-width: 640px) {
  .ws-speaker { grid-template-columns: minmax(0, 1fr); }
  .ws-speaker__photo { width: 120px; }
}

/* Registration form on narrow screens: the long submit label ("Register for the webinar")
   could not wrap, so it widened the form's column and pushed every field past the panel.
   The column now always fits the panel, and on phones the button fills it. */
@media (max-width: 980px) {
  [data-ws-event-form] .form-inline__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  [data-ws-event-form] .form-inline__submit { width: 100%; justify-content: center; padding-left: var(--space-5); padding-right: var(--space-5); font-size: clamp(16px, 4.8vw, 20px); white-space: normal; text-align: center; }
}