/* ==========================================================================
   webinars.css — page-specific CSS for webinars.html
   --------------------------------------------------------------------------
   Extracted from an inline <style> block on 2026-07-28. These rules style
   layout that exists only on this page, so they do not belong in the shared
   sheets — but they do not belong in the HTML either: as a file they are
   cacheable, diffable, and reviewable.

   Load order on this page:
       tokens.css -> licorp.css -> lic-system.css -> webinars.css
   Last, so page-specific layout can adjust a shared component.
   ========================================================================== */

/* Upcoming webinars — event list (2026-07-20) */
  .section.ind-hero,.section.wb-sec{max-width:968px}
  .wb-sec{padding-top:0;padding-bottom:clamp(64px,9vw,120px)}
  .wb-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
  .wb-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;color:var(--navy)}
  .wb-eyebrow::before{content:"";width:26px;height:2px;background:var(--a-teal)}
  .webinar-list{display:flex;flex-direction:column;gap:18px;max-width:920px}
  .webinar-card{display:flex;gap:30px;align-items:flex-start;background:#fff;box-shadow:0 2px 6px rgba(19,28,36,.06);padding:26px 30px;transition:transform .25s}
  .webinar-card:hover{box-shadow:0 16px 34px rgba(19,28,36,.10);transform:translateY(-3px)}
  .wb-date{flex:0 0 auto;min-width:104px;text-align:center;border-right:1px solid var(--line);padding-right:26px}
  .wb-day{display:block;font-size:32px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em}
  .wb-mon{display:block;margin-top:7px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .wb-body{flex:1 1 auto;min-width:0}
  .wb-body h3{font-size:clamp(22px,1.6vw,26px);margin:0 0 8px;color:var(--ink);line-height:1.2}
  .wb-host{margin:0 0 12px;font-size:14px;color:var(--muted)}
  .wb-host strong{color:var(--ink);font-weight:700}
  .wb-desc{margin:0 0 20px;color:var(--muted);line-height:1.6;font-size:15px;max-width:60ch}
  .wb-cta{display:inline-block}
  @media(max-width:640px){
    .webinar-card{flex-direction:column;gap:14px;padding:22px}
    .wb-date{border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px;min-width:0;text-align:left;display:flex;align-items:baseline;gap:12px}
    .wb-mon{margin-top:0}
  }
  /* A/B preview: A = has events (default), B = empty state */
  .wb-empty-state{display:none}
  /* Empty state: add class="wb-showempty" to <html> when there are no upcoming
     events. The CMS should apply it when the events collection is empty. */
  html.wb-showempty .webinar-list,html.wb-showempty .wb-head{display:none}
  html.wb-showempty .wb-empty-state{display:block}
  .wb-empty-state{text-align:left;margin:0;max-width:560px}
  .wb-empty-state .empty-orca{margin-left:0}
  .wb-empty-state p{margin-left:0}
  .wb-empty-state h3{margin-bottom:18px}
  /* Recorded / on-demand webinars (2026-07-22) */
  .wb-sec:not(.rec-sec){padding-bottom:clamp(28px,4vw,48px)}
  .rec-sec{padding-top:0}
  .rec-title{font-size:clamp(30px,3.6vw,46px);line-height:1.06;margin:0 0 14px;color:var(--ink)}
  .rec-intro{color:var(--muted);font-size:15px;line-height:1.6;max-width:60ch;margin:0 0 20px}
  .rec-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;max-width:920px}
  .rec-chip{font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);padding:9px 15px;cursor:pointer;transition:color .18s,background .18s,border-color .18s}
  .rec-chip:hover{color:var(--navy);border-color:var(--navy)}
  .rec-chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
  .rec-chip:focus-visible{outline:2px solid var(--a-blue);outline-offset:2px}
  .rec-list{display:flex;flex-direction:column;gap:14px;max-width:920px}
  .rec-card{display:flex;align-items:stretch;background:#fff;box-shadow:0 2px 6px rgba(19,28,36,.06);overflow:hidden;text-decoration:none;transition:transform .25s}
  .rec-card:hover{box-shadow:0 16px 34px rgba(19,28,36,.10);transform:translateY(-3px)}
  .rec-card.is-hidden{display:none}
  .rec-thumb{flex:0 0 auto;width:212px;position:relative;background:var(--navy);overflow:hidden}
  .rec-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .rec-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:46px;height:46px;border-radius:100px !important;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
  .rec-play::before{content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--navy);margin-left:3px}
  .rec-body{flex:1 1 auto;min-width:0;padding:36px 48px;display:flex;flex-direction:column;justify-content:center}
  .rec-meta{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
  .rec-cat{font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600;color:var(--navy);background:var(--bg-soft);padding:3px 8px}
  .rec-date{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .rec-card h3{font-size:clamp(22px,1.6vw,26px);line-height:1.25;margin:0 0 12px;color:var(--ink)}
  .rec-card p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.55;max-width:none}
  .rec-watch{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--navy)}
  .rec-card:hover .rec-watch{text-decoration:underline;text-underline-offset:3px}
  .rec-empty{color:var(--muted);font-size:15px;display:none;max-width:920px}
  @media(max-width:640px){
    .rec-card{flex-direction:column}
    .rec-thumb{width:100%;height:150px}
    .rec-body{padding:26px 22px}
  }
