/* ==========================================================================
   PMG Webinars (/webinars/) — hub, detail, card, registration.

   Built on the NG token set (`tokens.css`). Every colour is a --pmg-* token;
   there are no literals in this file. NG is a FLAT system (`--shadow: none`)
   so hierarchy comes from hairlines, accent rules and ink fills — a card never
   lifts off the page.

   Loaded only on /webinars/ pages via {% block ng_head %}; it is not part of
   the ng.css bundle every marketing page pays for.

   RTL: state artifacts are positioned with logical properties
   (inset-inline-*, border-inline-*) so Arabic mirrors without a second block.
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* `.ng-hero` is the HOMEPAGE hero — a two-column grid whose h1 is nowrap at up
   to 92px. Reusing it single-column runs the headline off screen. Every
   single-column NG page resets it the same way; doubling the class wins on
   specificity rather than load order. (Same fix as .ng-hero.pp-hero.) */
.ng-hero.wb-hero .ng-wrap { display: block; padding: 52px 32px 48px; }
.ng-hero.wb-hero h1 { white-space: normal; }

.wb-hero__h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: var(--text-hero-page);
  line-height: var(--leading-display);
  margin-top: var(--space-3);
}
.wb-hero__sub {
  margin-top: var(--space-5);
  max-width: 66ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--pmg-text-on-dark-body);
}

.wb-main { padding-block: var(--space-9) var(--space-12); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
/* SECOND level. The shared Insights format bar (.ins-nav) sits above this one,
   so these read quieter — no uppercase mono, a lighter rule — or the page
   presents two competing tab bars of equal weight. */
.wb-tabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: var(--border-hairline);
  margin-bottom: var(--space-8);
}
.wb-tab {
  padding: var(--space-3) 0;
  margin-bottom: -1px;
  font-family: var(--font-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--pmg-text-muted);
  border-bottom: var(--border-accent) solid transparent;
}
.wb-tab:hover { color: var(--pmg-text); }
.wb-tab.is-active { color: var(--pmg-text); border-bottom-color: var(--pmg-red); }
.wb-tab__n {
  margin-inline-start: var(--space-2);
  padding: 1px var(--space-2);
  background: var(--pmg-chip-bg);
  color: var(--pmg-text-muted);
}

/* ── Grid ──────────────────────────────────────────────────────────────── */
.wb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--feed-gap);
}
.wb-feature { margin-block: var(--space-9); }
.wb-feature__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-badge);
  letter-spacing: var(--mono-tracking-kicker);
  color: var(--pmg-red);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
/* The feature card goes HORIZONTAL, not full-bleed. A single card stretched to
   the 1360px container keeps its 16:9 media ratio, which produces a ~540px tall
   empty box above three lines of text. Splitting it media-left / body-right
   keeps the poster a sane size and gives the copy somewhere to go. */
.wb-feature .webinar-card {
  border-inline-start: var(--border-accent) solid var(--pmg-red);
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
}
.wb-feature .webinar-card__media { aspect-ratio: var(--ratio-card); }
.wb-feature .webinar-card__body { padding: var(--space-7) var(--space-8); justify-content: center; }
.wb-feature .webinar-card__title { font-size: var(--text-h2-section); }
.wb-feature .webinar-card__actions { margin-block-start: var(--space-4); }
.wb-feature .webinar-card__cta { display: inline-block; }
.wb-empty { color: var(--pmg-text-muted); padding: var(--space-10) 0; }

/* ── Card ──────────────────────────────────────────────────────────────── */
.webinar-card {
  display: flex;
  flex-direction: column;
  background: var(--pmg-card);
  border: var(--border-hairline);
}
.webinar-card__media {
  position: relative;
  aspect-ratio: var(--ratio-media);
  overflow: hidden;
  background: var(--pmg-card-alt);
}
.webinar-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.webinar-card__media-fallback { width: 100%; height: 100%; background: var(--pmg-chip-bg); }

/* Date tile — the UPCOMING artifact. */
.webinar-card__date {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  background: var(--pmg-ink);
  color: var(--pmg-text-on-dark);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  line-height: 1.05;
}
.webinar-card__date b { display: block; font-family: var(--font-display); font-size: 21px; }
.webinar-card__date i {
  display: block; font-family: var(--font-mono); font-style: normal;
  font-size: var(--text-mono-micro); letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
}
.webinar-card__date--struck b { text-decoration: line-through; }

/* LIVE — a badge with a pulse. Flat system: no shadow, so the state is carried
   by a 3px top rule plus a stronger border on the card itself. */
.webinar-card__badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-mono-badge);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
}
.webinar-card__badge--live { background: var(--pmg-live); color: var(--pmg-text-on-dark); }
.webinar-card__dot {
  width: 7px; height: 7px; border-radius: var(--radius-round);
  background: var(--pmg-text-on-dark);
  animation: wb-pulse 1.8s ease-in-out infinite;
}
@keyframes wb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .webinar-card__dot { animation: none; }
}
.webinar-card--live { border-color: var(--pmg-ink-3); border-block-start: var(--border-accent) solid var(--pmg-live); }

/* PAST — play glyph + runtime. */
.webinar-card__play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: var(--radius-round);
  background: var(--pmg-card);
  border: 1px solid var(--pmg-hairline-1);
}
.webinar-card__play::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 54%;
  transform: translate(-50%, -50%);
  border-inline-start: 13px solid var(--pmg-ink);
  border-block-start: 8px solid transparent;
  border-block-end: 8px solid transparent;
}
.webinar-card__runtime {
  position: absolute; inset-block-end: var(--space-2); inset-inline-end: var(--space-2);
  background: var(--pmg-ink); color: var(--pmg-text-on-dark);
  padding: 2px var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--mono-tracking-tight);
}

/* CLOSED / FULL — desaturate. On warm paper a flat greyscale goes lifeless, so
   pair it with a slight contrast lift to keep the poster legible. */
.webinar-card--closed .webinar-card__media img { filter: grayscale(1) contrast(1.05); opacity: .85; }

/* PRIVATE — a session held but not published. Dashed border says "deliberately
   incomplete" where a solid one would just look broken. */
.webinar-card--private { border-style: dashed; background: var(--pmg-card-alt); }
.webinar-card--private .webinar-card__media img { filter: grayscale(1); opacity: .5; }
.webinar-card__scrim { position: absolute; inset: 0; background: var(--pmg-card-alt); opacity: .45; }

/* Body */
.webinar-card__body {
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: var(--space-2);
  flex: 1;
}
.webinar-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--mono-tracking-tight);
  color: var(--pmg-text-faint);
  text-transform: uppercase;
}
.webinar-card__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-h2-card);
  line-height: var(--leading-card);
}
.webinar-card__title a { color: var(--pmg-text); }
.webinar-card__title a:hover { color: var(--pmg-red); }
.webinar-card__presenters { font-size: var(--text-body-sm); color: var(--pmg-text-muted); }
.webinar-card__seats {
  align-self: flex-start;
  background: var(--pmg-amber-surface);
  color: var(--pmg-amber-text);
  border-inline-start: var(--border-accent) solid var(--pmg-amber);
  padding: 3px var(--space-2);
  font-size: var(--text-body-sm); font-weight: 600;
}
.webinar-card__actions { margin-block-start: auto; padding-block-start: var(--space-3); }
.webinar-card__cta { display: block; text-align: center; }
.webinar-card__cta--disabled {
  display: block; width: 100%;
  background: var(--pmg-disabled-bg);
  color: var(--pmg-disabled-text);
  cursor: not-allowed;
}
.webinar-card__alt {
  display: block; margin-block-start: var(--space-2);
  font-size: var(--text-body-sm); color: var(--pmg-blue);
}
.webinar-card__note {
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--mono-tracking-tight);
  color: var(--pmg-text-faint); text-transform: uppercase;
}
.webinar-card--compact .webinar-card__body { padding: var(--space-3) var(--space-4); }
.webinar-card--compact .webinar-card__title { font-size: var(--text-card-title); }

/* ── Detail ────────────────────────────────────────────────────────────── */
.wb-detail { padding-block: var(--space-6) var(--space-12); }
.wb-detail__crumb { margin-bottom: var(--space-6); }
.wb-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: var(--space-10);
  align-items: start;
}
.wb-detail__meta {
  margin-block-start: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--mono-tracking);
  color: var(--pmg-text-faint);
  text-transform: uppercase;
}
.wb-detail__h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-size: var(--text-h1-detail);
  line-height: var(--leading-heading);
  margin-block-start: var(--space-2);
}

/* Media frame — identical geometry either side of the swap, which is what
   makes the page feel like the same page before and after the event. */
.wb-media { position: relative; aspect-ratio: var(--ratio-media); background: var(--pmg-ink); overflow: hidden; }
.wb-media img, .wb-media iframe, .wb-media__video { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.wb-media__poster { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.wb-media__play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: var(--radius-round);
  background: var(--pmg-red);
}
.wb-media__play::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 56%;
  transform: translate(-50%, -50%);
  border-inline-start: 20px solid var(--pmg-text-on-dark);
  border-block-start: 13px solid transparent;
  border-block-end: 13px solid transparent;
}
.wb-media__poster:hover .wb-media__play { background: var(--pmg-text-on-dark); }
.wb-media__poster:hover .wb-media__play::after { border-inline-start-color: var(--pmg-red); }
.wb-media__still { position: relative; width: 100%; height: 100%; }
.wb-media__datetile {
  position: absolute; inset-block-start: var(--space-4); inset-inline-start: var(--space-4);
  background: var(--pmg-ink); color: var(--pmg-text-on-dark);
  padding: var(--space-3) var(--space-4); text-align: center; line-height: 1.05;
}
.wb-media__datetile b { display: block; font-family: var(--font-display); font-size: 30px; }
.wb-media__datetile i {
  display: block; font-family: var(--font-mono); font-style: normal;
  font-size: var(--text-mono-badge); letter-spacing: var(--mono-tracking); text-transform: uppercase;
}
.wb-media__livetag {
  position: absolute; inset-block-start: var(--space-4); inset-inline-start: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--pmg-live); color: var(--pmg-text-on-dark);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-mono-badge);
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
}

/* Presenters */
.wb-presenters { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-block-start: var(--space-6); }
.wb-presenter { display: flex; align-items: center; gap: var(--space-3); }
.wb-presenter__img { width: 48px; height: 48px; object-fit: cover; }
.wb-presenter__initials {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--pmg-ink); color: var(--pmg-text-on-dark);
  font-family: var(--font-display); font-size: 20px;
}
.wb-presenter__text b { display: block; font-size: var(--text-body); }
.wb-presenter__text i { display: block; font-style: normal; font-size: var(--text-body-sm); color: var(--pmg-text-muted); }

.wb-prose { margin-block-start: var(--space-7); font-size: var(--text-body-lg); line-height: var(--leading-body); color: var(--pmg-text-body); }
.wb-prose p + p { margin-block-start: var(--space-4); }

.wb-h2 {
  font-family: var(--font-display); font-weight: var(--display-weight);
  text-transform: var(--display-case); font-size: var(--text-h2-section);
  line-height: var(--leading-heading);
}
.wb-takeaways { margin-block-start: var(--space-9); }
.wb-takeaways ul { margin-block-start: var(--space-4); padding-inline-start: var(--space-5); }
.wb-takeaways li { margin-block-end: var(--space-2); line-height: var(--leading-body); color: var(--pmg-text-body); }

.wb-related { margin-block-start: var(--space-12); border-block-start: var(--border-hairline); padding-block-start: var(--space-8); }
.wb-related .wb-grid { margin-block-start: var(--space-5); }

/* ── Rail / registration ───────────────────────────────────────────────── */
.wb-rail { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.wb-register, .wb-facts { border: var(--border-hairline); background: var(--pmg-card); padding: var(--panel-pad); }
.wb-register__h {
  font-family: var(--font-display); font-weight: var(--display-weight);
  text-transform: var(--display-case); font-size: var(--text-h2-card);
}
.wb-register__h:focus { outline: none; }
.wb-register__lead { margin-block-start: var(--space-2); font-size: var(--text-body-sm); color: var(--pmg-text-muted); line-height: var(--leading-body); }
.wb-register__seats { display: block; margin-block-start: var(--space-1); color: var(--pmg-amber-text); font-weight: 600; }
.wb-register__form { margin-block-start: var(--space-5); }
.wb-register__submit { width: 100%; margin-block-start: var(--space-4); }
.wb-register__fine { margin-block-start: var(--space-3); font-size: var(--text-mono-micro); color: var(--pmg-text-faint); line-height: 1.5; }
.wb-register__cal { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); }
.wb-register__while { margin-block-start: var(--space-6); border-block-start: var(--border-inner); padding-block-start: var(--space-4); display: grid; gap: var(--space-2); }
.wb-register__while-h {
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--mono-tracking-wide); color: var(--pmg-text-faint);
}

/* Submitting state — .is-busy is toggled by webinars.js. Cosmetic only: the
   form posts normally with JS off. */
.wb-register__submit-busy { display: none; }
.wb-register.is-busy .wb-register__submit-idle { display: none; }
.wb-register.is-busy .wb-register__submit-busy { display: inline; }
.wb-register.is-busy .wb-register__submit { opacity: .7; pointer-events: none; }

/* Fields */
.wb-field { display: block; margin-block-end: var(--space-4); }
.wb-field__label {
  display: block; margin-block-end: var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--mono-tracking-wide); text-transform: uppercase;
  color: var(--pmg-text-muted);
}
.wb-field__label i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--pmg-text-faint); }
.wb-field__input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--pmg-hairline-1);
  background: var(--pmg-card-input);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--pmg-text);
}
.wb-field__input:focus { outline: 2px solid var(--pmg-ink); outline-offset: -1px; }
.wb-field--invalid .wb-field__input { border-color: var(--pmg-error); background: var(--pmg-error-surface); }
.wb-field__err { display: block; margin-block-start: var(--space-1); font-size: var(--text-body-sm); color: var(--pmg-error-text); }

.wb-consent { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-body-sm); color: var(--pmg-text-body); line-height: 1.5; }
.wb-consent input { margin-block-start: 3px; accent-color: var(--pmg-red); }
.wb-consent--invalid { color: var(--pmg-error-text); }

.wb-note { padding: var(--space-3) var(--space-4); font-size: var(--text-body-sm); line-height: 1.5; }
.wb-note--error { background: var(--pmg-error-surface); border-inline-start: var(--border-accent) solid var(--pmg-error); color: var(--pmg-error-text); }
.wb-note--muted { background: var(--pmg-card-alt); border-inline-start: var(--border-accent) solid var(--pmg-hairline-1); color: var(--pmg-text-muted); margin-block-start: var(--space-6); }

.wb-facts__h { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); font-size: var(--text-h2-card); }
.wb-facts dl { margin-block-start: var(--space-4); }
.wb-facts dt {
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--mono-tracking-wide); text-transform: uppercase; color: var(--pmg-text-faint);
  margin-block-start: var(--space-3);
}
/* Browsers give <dd> a 40px inline start margin by default, which reads as an
   accidental indent against the label above it. */
.wb-facts dd { font-size: var(--text-body); color: var(--pmg-text-body); margin-inline-start: 0; }
.wb-facts .ng-arrow-link { display: inline-block; margin-block-start: var(--space-5); color: var(--pmg-blue); }

/* ── Thin state ────────────────────────────────────────────────────────── */
.wb-notify {
  border: var(--border-hairline);
  background: var(--pmg-card);
  padding: var(--space-10);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-10);
  align-items: start;
}
.wb-notify__h { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); font-size: var(--text-h2-section); }
.wb-notify__copy p { margin-block-start: var(--space-4); font-size: var(--text-body-lg); line-height: var(--leading-body); color: var(--pmg-text-body); max-width: 54ch; }
.wb-notify__submit { width: 100%; margin-block-start: var(--space-2); }
.wb-notify__alt { grid-column: 1 / -1; border-block-start: var(--border-inner); padding-block-start: var(--space-4); display: flex; gap: var(--space-7); }
.wb-notify__alt a { color: var(--pmg-blue); }
.wb-notify__done { grid-column: 1 / -1; }
.wb-notify__done p { margin-block-start: var(--space-3); color: var(--pmg-text-body); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .wb-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 980px) {
  /* The form must not need a scroll. The rail moves ABOVE the body copy and
     drops sticky, so on a 390x844 viewport the Register button sits inside the
     first screen-and-a-bit; what-you'll-learn and presenters fall below it. */
  .wb-detail__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .wb-rail { position: static; order: -1; }
  .wb-detail__h1 { font-size: var(--text-h1-compact); }
  .wb-notify { grid-template-columns: minmax(0, 1fr); padding: var(--space-7); gap: var(--space-6); }
}

@media (max-width: 860px) {
  /* Feature card returns to the normal stacked card shape. */
  .wb-feature .webinar-card { grid-template-columns: minmax(0, 1fr); }
  .wb-feature .webinar-card__media { aspect-ratio: var(--ratio-media); }
  .wb-feature .webinar-card__body { padding: var(--card-pad); }
  .wb-feature .webinar-card__title { font-size: var(--text-h2-card); }
}

@media (max-width: 750px) {
  .ng-hero.wb-hero .ng-wrap { padding: 36px 20px 32px; }
  .wb-hero__h1 { font-size: var(--text-h2-section); }
  .wb-main { padding-block: var(--space-7) var(--space-10); }
  .wb-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-register, .wb-facts { padding: var(--space-6); }
  .wb-tabs { gap: var(--space-5); }
  .wb-presenters { gap: var(--space-4); }
  .wb-notify__alt { flex-direction: column; gap: var(--space-3); }
}