/* =================================================================
   Willow — webinars page

   Shared by webinars.html and nl/webinars.html, so the two twins cannot
   drift. Everything the page needs that isn't already in
   styles.css lives here; the hero, wrap, buttons and closing CTA card
   are all shared components.

   The video wells deliberately run two-up rather than three-up. The
   click-to-load placeholder from embed-consent.js carries a provider
   label, a sentence, a button, a courtesy link and a note — roughly
   250px of content. At three columns a 16:9 well is ~214px tall and
   that content overflows it. Two columns gives ~326px and it fits with
   room to spare, which is also the better size for watching a video.
   ================================================================= */

/* ---- Section ----
   The recordings section owns its spacing. An earlier draft borrowed the
   Academy page's .courses class, whose rules live in page-resources.css —
   a stylesheet this page doesn't load — so the section rendered with no
   padding at all and the closing CTA card butted straight against it. */
.wb-sec { padding: 96px 0 120px; }

/* ---- Grid ---- */
.wb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}

/* ---- Card ---- */
.wb-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The video well. Holds the deferred iframe and, until someone clicks,
   the placeholder embed-consent.js puts in front of it. */
.wb-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.wb-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Fill the well exactly. The shared .is-video rule sets its own 16:9 box
   with a 220px floor, which would push past the well on a narrow column. */
.wb-frame .embed-consent.is-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 20px;
}

.wb-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.wb-body h3 {
  font-size: 18px;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.wb-body .wb-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  flex: 1;
}

/* ---- Topic tag, mirroring the Academy course cards ---- */
.wb-topic {
  font-family: var(--mono);
  font-size: var(--t-micro);
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--blue-soft);
  color: var(--blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: fit-content;
}
.wb-topic.trends { background: rgba(123,224,164,0.18); color: #1b6b3b; }
.wb-topic.ai { background: rgba(184,104,70,0.12); color: var(--clay); }

/* ---- Meta row: runtime · year · language ---- */
.wb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.wb-meta b { color: var(--ink); font-weight: 500; }
.wb-lang {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--ink-3);
}

/* ---- Featured: the newest recording, full width, video beside the copy ---- */
.wb-card.is-featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}
/* The well is a flex item stretched to the row height, so aspect-ratio alone
   is ignored and the row collapses to whatever the (short) copy needs —
   leaving the newest recording as the smallest video on the page. The floor
   sets the row height instead, and the copy column stretches to match. */
.wb-card.is-featured .wb-frame {
  flex: 1 1 58%;
  border-bottom: 0;
  border-right: 1px solid var(--rule);
  aspect-ratio: auto;
  min-height: 380px;
}
.wb-card.is-featured .wb-body {
  flex: 1 1 42%;
  justify-content: center;
  padding: 36px 36px 36px 32px;
}
.wb-card.is-featured .wb-body h3 { font-size: 26px; letter-spacing: -0.016em; line-height: 1.15; }
.wb-card.is-featured .wb-body .wb-desc { font-size: 14px; flex: 0; }
.wb-card.is-featured .wb-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}

/* ---- Footnote under the grid ---- */
.wb-note {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 72ch;
}
.wb-note a { color: var(--blue); }

@media (max-width: 1100px) {
  .wb-card.is-featured { flex-direction: column; }
  .wb-card.is-featured .wb-frame {
    flex: none;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .wb-card.is-featured .wb-body { padding: 22px 24px 24px; }
  .wb-card.is-featured .wb-body h3 { font-size: 20px; }
}
@media (max-width: 720px) {
  .wb-grid { grid-template-columns: 1fr; gap: 20px; }
}