/* ============================================================
   Webinar cards. Thinking page, above the field notes. LIVE.

   Not a temporary promo like webinar-recording-popup.css/.js.
   This is meant to be a durable section that grows over time as
   more sessions run.

   Moved above the field-note grid (2026-08-20, David: "People
   might be more inclined to view the video than read"), and
   reshaped to match it exactly: same .grid3, same .card note-card
   box (padding, kicker, h4, p), same 3-up desktop / 2-up tablet /
   1-up phone collapse, for free, since it's the same grid and the
   same card class. A .wa-card is a .note-card with the record
   surface's colors on it and a watch link and a Recorded pill
   added at the bottom, nothing else changed structurally.

   Why dark at all: "we use the color black to represent the
   committed shared record" (David, 2026-08-19). Field notes are
   written and can be revised; a webinar is recorded once and kept
   exactly as delivered, so it wears the record's own surface
   (--dcard/--dborder/--dink, the same tokens .artifact and
   .astream use) to read as a different kind of content even
   though it now sits in the same grid.

   No hover motion. The one hover motion the Brand Guide sanctions
   (section 7) is the portrait settling to scale(1.035); there's no
   portrait here, so nothing animates. The whole card is one link,
   same interaction model as .note-card: an instant, non-transitioned
   border and underline on hover, not motion.

   Only one card exists for now (the Aug 19, 2026 "What is
   PacSpace?" webinar). Add the next one as another .wa-card block
   inside the same .grid3, newest first.

   The card's href still points at the real Google Drive file (so
   it degrades to a normal external link without JS, and a
   ctrl/cmd/middle click still opens Drive in a new tab, same as
   any other external link on the site). webinar-lightbox.js
   intercepts a plain click and opens the .wlb panel below instead,
   playing CFG's data-embed URL in place, so watching never leaves
   pacspace.io. Closing the lightbox clears the iframe src, so the
   video stops rather than playing on in the background.

   The recording popup on index.html (webinar-recording-popup.js)
   links here by id (#webinar-what-is-pacspace) instead of straight
   to Drive, as of 2026-08-20, for the same reason: keep the viewer
   on the site. The lone :target rule below is the only visual sign
   that a visitor arrived from that link.

   scroll-margin-top on the card (below) accounts for the sticky nav
   (64px, styles.css) so the browser's own anchor-jump leaves the
   card clear of the bar instead of tucking its top edge underneath
   it. Fixed 2026-08-20, David: the deep link was landing "scrolled
   a little too far."
   ============================================================ */

a.wa-card {
  background: var(--dcard, #141413);
  border-color: var(--dborder, rgba(243, 241, 235, 0.12));
  color: var(--dink, #F3F1EB);
  /* Clears the sticky nav (64px) plus a comfortable gap when a
     fragment link (like the recording popup's) jumps straight to
     this card. Applies to any future wa-card that gains its own id
     too, not just this one. */
  scroll-margin-top: 88px;
}

/* Same specificity as a.note-card:hover, later in the cascade, wins. */
a.wa-card:hover {
  border-color: rgba(243, 241, 235, 0.24);
}

.wa-card .k { color: var(--dfaint, #8A877F); }
.wa-card p { color: var(--dmuted, #A5A29A); }

.wa-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--dborder, rgba(243, 241, 235, 0.12));
}

/* The one on-dark accent the Brand Guide sanctions: Display blue,
   reserved for "checkpoint badges." Nothing else here is blue. */
.wa-pill {
  display: inline-block;
  border: 1px solid var(--dborder, rgba(243, 241, 235, 0.12));
  color: var(--recdisp, #96BCEA);
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
}

.wa-date {
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--dfaint, #8A877F);
  font-variant-numeric: tabular-nums;
}

.wa-watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dink, #F3F1EB);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

/* Instant, not animated: no transition property, same pattern as
   .seeall:hover / a.note-card:hover elsewhere in styles.css. */
a.wa-card:hover .wa-watch {
  border-bottom-color: var(--dink, #F3F1EB);
}

.wa-arrow {
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11.5px;
}

/* Arriving via the recording popup's deep link lands here. A static
   outline in the same checkpoint blue, not motion, matching the
   section's "nothing here animates" rule. */
a.wa-card:target {
  outline: 1.5px solid var(--recdisp, #96BCEA);
  outline-offset: 4px;
}

/* ============================================================
   In-page lightbox. Plays the recording without leaving the site.
   Same mechanics as the contact modal in site.js/styles.css (.cm):
   fixed overlay, backdrop + panel, body.locked, focus trap, Escape
   to close. Skinned dark to match the recording it plays, wider to
   fit a 16:9 frame instead of a form. Markup is injected by
   webinar-lightbox.js, not present in the page source.
   ============================================================ */

.wlb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms linear, visibility 120ms linear;
}

.wlb.open { opacity: 1; visibility: visible; }

.wlb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, 0.72);
}

.wlb-panel {
  position: relative;
  width: min(100%, 900px);
  background: var(--dcard, #141413);
  border: 1px solid var(--dborder, rgba(243, 241, 235, 0.12));
  padding: 14px;
}

.wlb-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 4px 12px;
}

.wlb-rail {
  flex: 1;
  min-width: 0;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfaint, #8A877F);
}

/* The escape hatch: same rail styling as .wlb-close, so the two
   read as a pair of equally-weighted text actions, not a button
   and a stray link. */
.wlb-open {
  flex: none;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfaint, #8A877F);
  text-decoration: none;
  padding: 12px;
  margin: -12px;
}

.wlb-open:hover { color: var(--dink, #F3F1EB); }
.wlb-open:focus-visible {
  outline: 1.5px solid var(--dink, #F3F1EB);
  outline-offset: -1.5px;
}

.wlb-close {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfaint, #8A877F);
  padding: 12px;
  margin: -12px;
}

.wlb-close:hover { color: var(--dink, #F3F1EB); }
.wlb-close:focus-visible {
  outline: 1.5px solid var(--dink, #F3F1EB);
  outline-offset: -1.5px;
}

/* 16:9 box via the padding-top aspect ratio trick, so the frame
   never depends on the iframe's own intrinsic size. */
.wlb-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}

.wlb-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .wlb { padding: 10px; }
  .wlb-panel { padding: 10px; }
}