/* ============================================================================
   Quote / video-quote cards (.qslide) for the policy reader.

   These cards are emitted into reader content — e.g. the GEF "Watch at HH:MM"
   video quotes. The component originated in the GEF microsite (gef2025-poc),
   whose styles live in an inline <style>; the reader never carried them, so the
   cards rendered unstyled and the quote text collapsed on top of the thumbnail.

   This is the ported + FIXED version: the thumbnail is an absolutely-positioned
   cover image inside a fixed-width grid cell, so it can never overflow under or
   over the quote text. Self-contained (no external custom properties) and
   Atlantic Council branded.

   Loaded via layouts/policy_reader.html, so these (component-unique) selectors
   only apply on reader pages. No `.carousel` rules here — the reader renders
   these cards standalone, and `.carousel` is too generic to define globally.
   ============================================================================ */

:root {
  --qc-ink:    #16223a;
  --qc-muted:  #5a6b7a;
  --qc-faint:  #8a98a6;
  --qc-line:   #e2e6ea;
  --qc-paper:  #ffffff;
  --qc-accent: #f2783e; /* Atlantic Council orange */
  --qc-navy:   #005596; /* Atlantic Council blue   */
  --qc-serif:  Georgia, "Crimson Pro", "Times New Roman", serif;
}

/* The card: two columns (thumbnail | body). Self-contained so a standalone
   <article class="qslide"> looks finished without a carousel wrapper. */
.qslide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(210px, 32%, 320px) 1fr;
  align-items: stretch;
  background: var(--qc-paper);
  border: 1px solid var(--qc-line);
  border-radius: 14px;
  overflow: hidden;
}
.qslide.no-thumb { grid-template-columns: 1fr; }
.qslide.is-video { cursor: pointer; }

/* Thumbnail cell: fixed-width 16:9 box. The cover image is absolutely
   positioned (inset:0) inside this position:relative cell, so the cell width is
   fixed by the grid column and the image crops cleanly — it can never be the
   thing that stretches the row and bleeds onto the text. This is the fix. */
.qthumb { position: relative; background: #0a1622; overflow: hidden; aspect-ratio: 16 / 9; min-height: 0; }
.qthumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; opacity: .9;
  transition: opacity .15s, transform .35s;
}
.qslide.is-video:hover .qthumb img { opacity: 1; transform: scale(1.035); }
.qthumb-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.qthumb-play svg { width: 56px; height: 56px; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .45)); }
.qthumb-play circle { transition: fill .15s; }
.qslide.is-video:hover .qthumb-play circle { fill: rgba(242, 120, 62, .95); }
.qthumb-time {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(6, 16, 26, .82); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 6px;
}

/* Body */
.qbody { padding: 24px 28px 22px; display: flex; flex-direction: column; position: relative; min-width: 0; }
.qmark { font-family: var(--qc-serif); font-size: 40px; line-height: .4; color: var(--qc-accent); height: 18px; opacity: .85; }
.qtext { font-family: var(--qc-serif); font-size: 18.5px; line-height: 1.45; color: var(--qc-ink); margin: 6px 0 16px; flex: 1; }
.qmeta { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
.qspeaker { font-weight: 700; font-size: 15px; color: var(--qc-ink); }
.qrole { font-size: 13px; color: var(--qc-muted); line-height: 1.35; }
.qsession { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--qc-faint); font-weight: 700; margin-top: 6px; }
.qaction {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; text-decoration: none;
  padding: 9px 15px; border-radius: 999px;
  border: 1.5px solid var(--qc-accent); color: var(--qc-accent); background: #fff;
  transition: all .14s;
}
.qslide.is-video:hover .qaction { background: var(--qc-accent); color: #fff; }
.qaction.read { border-color: var(--qc-navy); color: var(--qc-navy); }
.qaction.read:hover { background: var(--qc-navy); color: #fff; }
.qaction .play { display: inline-grid; place-items: center; width: 18px; height: 18px; }

/* Narrow viewports: stack to a single column (thumbnail on top, body below). */
@media (max-width: 720px) {
  .qslide { grid-template-columns: 1fr; }
  .qthumb { min-height: 0; aspect-ratio: 16 / 9; }
  .qbody  { padding: 22px 20px 20px; }
  .qtext  { font-size: 18px; }
}