/* ============================================================
   HOME ED COLLECTIVE — 02 / thumbnails.css
   Six thumbnail families as real, composable classes.
   ------------------------------------------------------------
   Every thumbnail is a container-query context sized 16:9. All
   internal type and geometry is in cqw, so the same markup is
   correct as a 3840x2160 export master and as a 320px card on a
   web page. Judge every design at 160x90 — if the hook cannot
   be read there, the hook is too long.

   Anatomy
     .hec-thumb                 the 16:9 frame + container
       .hec-thumb__photo        a photographic panel (left/right/full)
       .hec-thumb__plate        a gradient or flat panel over the photo
       .hec-thumb__body         the type column
         .hec-thumb__kicker     small struck-through or serif lead-in
         .hec-thumb__hook       Karla 800, the hook
         .hec-thumb__qualifier  Newsreader italic sub-line
         .hec-thumb__label      uppercase series / guest label
       .hec-mark                the HEC diamond, top-left, always
       .hec-thumb__decor        one motif shape, optional

   Fields (pick exactly one): .hec-field-{ink|teal|sand|mint|
   mustard|coral|paper}
   Families (pick exactly one): .hec-fam-{a..f}
   ============================================================ */

/* ---------- Frame ---------- */
.hec-thumb {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hec-field-ink);
  color: var(--hec-on-ink);
  font-family: var(--hec-font-ui);
  isolation: isolate;
}

/* ---------- Fields ---------- */
.hec-field-ink     { background: var(--hec-field-ink);     color: var(--hec-on-ink); }
.hec-field-teal    { background: var(--hec-field-teal);    color: var(--hec-on-teal); }
.hec-field-sand    { background: var(--hec-field-sand);    color: var(--hec-on-sand); }
.hec-field-mint    { background: var(--hec-field-mint);    color: var(--hec-on-mint); }
.hec-field-mustard { background: var(--hec-field-mustard); color: var(--hec-on-mustard); }
.hec-field-coral   { background: var(--hec-field-coral);   color: var(--hec-on-coral); }
.hec-field-paper   { background: var(--hec-field-paper);   color: var(--hec-on-paper); }

/* ---------- Photography ----------
   The portrait is a panel, not a background image. It enters
   from one side or fills the frame under a plate. */
.hec-thumb__photo {
  position: absolute;
  top: 0; bottom: 0;
  overflow: hidden;
}
.hec-thumb__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  transform: scale(1.15);
  transform-origin: 50% 40%;
}
.hec-photo-right { right: 0; width: 40%; }
.hec-photo-left  { left: 0;  width: 48%; }
.hec-photo-slim  { right: 0; width: 31%; }
.hec-photo-full  { left: 0; right: 0; width: 100%; }

/* A plate lets type sit on a photograph without ever crossing a face. */
.hec-thumb__plate { position: absolute; inset: 0; pointer-events: none; }
.hec-plate-bottom { background: linear-gradient(to top, rgba(22,35,42,.94) 42%, rgba(22,35,42,0)); }
.hec-plate-left   { background: linear-gradient(103deg, rgba(237,230,219,.97) 33%, rgba(237,230,219,.5) 53%, rgba(237,230,219,0) 69%); }

/* ---------- Type ---------- */
.hec-thumb__body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 2cqw;
  padding: 8% 42% 8% 6%;
}
.hec-thumb__hook {
  font-family: var(--hec-font-ui);
  font-weight: var(--hec-hook-weight);
  font-size: var(--hec-hook-lg);
  line-height: var(--hec-hook-leading);
  letter-spacing: var(--hec-hook-tracking);
  /* DEFECT FIXED 2026-08-25 — `text-wrap: balance` was declared here after
     `white-space: nowrap`. `text-wrap` is a shorthand that sets
     text-wrap-mode, and `white-space` is a shorthand that also sets it, so
     the later declaration reset the mode back to `wrap` and cancelled the
     nowrap entirely. Hooks then broke wherever they liked — the "What is
     school actually for?" hook ran to four lines against collective.md's
     two-or-three-line maximum. Line breaks in a hook are a decision, taken
     with <br>, not an outcome of the container width.
     One-line diff for the master file: delete `text-wrap: balance;`. */
  white-space: nowrap;
}
.hec-hook-xl { font-size: var(--hec-hook-xl); }
.hec-hook-md { font-size: var(--hec-hook-md); }
.hec-hook-sm { font-size: var(--hec-hook-sm); }

/* One italic serif word inside a Karla hook. One word, at most. */
.hec-thumb__hook em,
.hec-em {
  font-family: var(--hec-font-display);
  font-style: italic;
  font-weight: 300;
}

.hec-thumb__qualifier {
  font-family: var(--hec-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--hec-qualifier);
  line-height: 1.1;
  color: var(--hec-mint-soft);
}
.hec-thumb__kicker {
  font-size: 3.2cqw;
  font-weight: 600;
  /* DEFECT FIXED 2026-08-25 — .5 alpha measured 2.86:1 on the mustard
     field. The kicker is 3.2cqw, not display size, so it needs 4.5:1;
     .68 measures 4.59:1 and still reads as the quieter line. */
  color: rgba(22, 35, 42, .68);
  text-decoration: line-through;
}
.hec-thumb__label {
  font-size: var(--hec-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hec-mint-soft);
}
.hec-thumb__rule {
  display: block;
  width: 76%; height: 1px;
  background: rgba(247, 244, 239, .32);
}

/* The struck highlight — a torn plate behind one word. */
.hec-strike { position: relative; white-space: nowrap; }
.hec-strike::before {
  content: '';
  position: absolute; left: -2.5cqw; right: -2.5cqw; top: 9%; bottom: 11%;
  background: var(--hec-accent-mint);
  clip-path: var(--hec-cut);
}
.hec-strike > * { position: relative; color: var(--hec-ink); }

/* ---------- The mark ----------
   A rounded diamond carrying HEC, top-left, on every thumbnail.
   Recognition comes from typography, crop and palette; the mark
   confirms rather than announces. */
.hec-mark {
  position: absolute;
  top: var(--hec-mark-inset); left: var(--hec-safe);
  z-index: 3;
  display: grid; place-items: center;
  width: var(--hec-mark-size); height: var(--hec-mark-size);
  border-radius: var(--hec-radius-diamond);
  transform: rotate(45deg);
  background: rgba(255, 255, 255, .28);
}
.hec-mark > span {
  display: grid; place-items: center;
  transform: rotate(-45deg);
  font-family: var(--hec-font-ui);
  font-weight: 800;
  font-size: var(--hec-mark-type);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--hec-on-ink);
}
/* On a light field the mark inverts. */
.hec-mark-dark { background: rgba(22, 35, 42, .24); }
.hec-mark-dark > span { color: var(--hec-ink); }

/* ---------- Decor motifs — one per thumbnail ---------- */
.hec-thumb__decor { position: absolute; pointer-events: none; z-index: 0; }
.hec-decor-diamond {
  aspect-ratio: 1;
  border-radius: var(--hec-radius-diamond);
  transform: rotate(45deg);
}
.hec-decor-ring { aspect-ratio: 1; border-radius: 50%; }

.hec-thumb__pill {
  position: absolute; bottom: 5%; left: 6%; z-index: 3;
  display: inline-block;
  font-size: var(--hec-label-sm);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(22, 35, 42, .12);
  color: var(--hec-ink);
  padding: .9cqw 1.8cqw;
  border-radius: var(--hec-radius-pill);
}

/* ============================================================
   THE SIX FAMILIES
   Related enough to read as one channel, different enough that
   three consecutive uploads never look like one template with
   new words. A family fixes composition and hook length;
   portrait, colour and words change per episode.
   ============================================================ */

/* A — Anna reflects. Portrait left, hook right, struck highlight,
   rule and series line beneath. Colour: teal / mint. Hook: max 6 words. */
.hec-fam-a .hec-thumb__body {
  inset: 0 0 0 auto; width: 54%;
  padding: 8% 5% 8% 9%;
  align-items: flex-start;
  justify-content: center;
}
.hec-fam-a .hec-thumb__hook { font-size: var(--hec-hook-md); line-height: 1.17; letter-spacing: -.028em; }
.hec-fam-a .hec-thumb__label { color: rgba(247, 244, 239, .74); letter-spacing: .17em; font-size: 2.2cqw; font-weight: 700; }

/* B — Expert conversation. Portrait left, guest plate right,
   hook over a bottom gradient. Colour: ink + mint. Hook: max 5 words. */
.hec-fam-b .hec-thumb__body {
  inset: auto 0 0 0;
  padding: 6% 5% 2%;
  justify-content: flex-end;
  gap: 1.6cqw;
}
.hec-fam-b .hec-thumb__hook { font-size: var(--hec-hook-sm); }
.hec-fam-b .hec-thumb__label { max-width: 70%; margin-bottom: 4.5%; }
.hec-guest {
  position: absolute; top: 0; bottom: 0; right: 0; width: 50%;
  background: var(--hec-field-mint);
  display: grid; place-items: center; align-content: start;
  padding-top: 9%;
  text-align: center;
}

/* C — Big question. Type-led. The question fills the frame, the
   portrait shrinks to a supporting column, one italic serif word
   carries the emphasis. Colour: ink / deep teal. Hook: max 5 words. */
.hec-fam-c .hec-thumb__body { padding: 8% 33% 8% 6%; }
.hec-fam-c .hec-thumb__hook { font-size: var(--hec-hook-lg); }

/* D — Myth / objection. The assumption struck through in small
   type, the reframed question below. Tension without red crosses
   or MYTH BUSTED graphics. Colour: mustard. Hook: max 5 words. */
.hec-fam-d .hec-thumb__body { padding: 7% 40% 7% 6%; gap: 2.2cqw; }
.hec-fam-d .hec-thumb__hook { font-size: var(--hec-hook-md); }

/* E — Story / journey. Documentary photograph with a sand plate
   over the left, editorial serif label, quieter hook. The calmest
   family. Colour: sand / off-white. Hook: max 4 words. */
.hec-fam-e .hec-thumb__body {
  inset: 0 auto 0 0; width: 57%;
  padding: 8% 4% 9% 6%;
  justify-content: flex-end;
}
.hec-fam-e .hec-thumb__hook { font-size: 6.6cqw; color: var(--hec-ink); }
.hec-fam-e .hec-thumb__qualifier { color: var(--hec-teal); font-size: 4.4cqw; line-height: 1; }

/* F — Future of education. Dark field, thin geometric linework
   from the brand motifs, three-line hook. Forward-looking without
   becoming SaaS. Colour: ink + teal. Hook: max 5 words. */
.hec-fam-f .hec-thumb__body { padding: 8% 34% 8% 6%; gap: 2.4cqw; }
.hec-fam-f .hec-thumb__hook { font-size: var(--hec-hook-md); }
.hec-fam-f::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 88% 18%, rgba(46,110,106,.55), rgba(22,35,42,0) 62%);
}

/* ---------- Safe zones ----------
   Nothing essential within 4% of any edge, and nothing essential
   in the lower-right corner — YouTube prints the duration badge
   there. Add .hec-debug-safe while designing to see both. */
.hec-debug-safe::after {
  content: '';
  position: absolute; inset: var(--hec-safe);
  border: .3cqw dashed rgba(255, 255, 255, .45);
  z-index: 9;
  pointer-events: none;
}