/* ============================================================
   HOME ED COLLECTIVE — 03 / components.css
   Page-level components for the Home Ed Collective page on
   annakemp.co.uk. Requires tokens.css and thumbnails.css.
   ------------------------------------------------------------
   The site persuades slowly; a thumbnail has about a second.
   These components let the page carry real Collective packaging
   without the page shouting like a feed.
   ============================================================ */

/* ---------- Page shell ---------- */
.hec-page { background: var(--hec-page); color: var(--hec-text-primary); font-family: var(--hec-font-ui); }
.hec-wrap { max-width: var(--hec-content-max); margin: 0 auto; padding-inline: var(--hec-gutter); }
.hec-section { padding-block: var(--hec-section-y); }

.hec-section-head {
  display: flex; align-items: baseline; gap: 14px;
  border-top: 1.5px solid var(--hec-rule);
  padding-top: 18px;
  margin-bottom: 28px;
}
.hec-section-head__n { font-family: var(--hec-font-display); font-weight: 300; font-size: 26px; color: var(--hec-teal); }
.hec-section-head__t { font-family: var(--hec-font-display); font-weight: 300; font-size: var(--hec-type-h2); letter-spacing: -.02em; margin: 0; }

.hec-eyebrow {
  font-size: var(--hec-type-label);
  letter-spacing: var(--hec-tracking-label);
  text-transform: uppercase;
  color: var(--hec-text-quiet);
  margin: 0 0 14px;
}
.hec-lead { font-size: var(--hec-type-lead); line-height: var(--hec-leading-body); color: #4A5B62; max-width: 62ch; }

/* ---------- Hero ----------
   Dark field so the Collective reads as its own property while
   staying inside Anna's palette. */
.hec-hero { background: var(--hec-ink); color: var(--hec-paper); position: relative; overflow: hidden; }
.hec-hero__inner { position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 104px); }
.hec-hero h1 {
  font-family: var(--hec-font-display); font-weight: 300;
  font-size: var(--hec-type-h1); line-height: 1.04; letter-spacing: -.024em;
  margin: 0 0 20px; max-width: 20ch;
}
.hec-hero p { font-size: var(--hec-type-lead); line-height: var(--hec-leading-body); color: var(--hec-text-on-dark); max-width: 58ch; margin: 0; }
.hec-hero__decor {
  position: absolute; right: -90px; top: -110px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(159, 192, 186, .14);
  pointer-events: none; z-index: 0;
}

/* ---------- Episode grid ---------- */
.hec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.hec-grid-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (max-width: 599px) { .hec-grid, .hec-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Episode card ----------
   The thumbnail is the card. No shadow, no lift, no rounded
   corners — only the border warms on hover. */
.hec-card { display: block; text-decoration: none; color: inherit; }
.hec-card__frame { position: relative; border: 1px solid var(--hec-border); transition: border-color var(--hec-hover-duration) var(--hec-hover-ease); }
.hec-card:hover .hec-card__frame,
.hec-card:focus-visible .hec-card__frame { border-color: var(--hec-teal); }
.hec-card__title {
  font-family: var(--hec-font-display); font-weight: 400;
  font-size: var(--hec-type-h3); line-height: 1.25;
  margin: 14px 0 6px;
}
.hec-card:hover .hec-card__title { color: var(--hec-teal); }
.hec-card__desc { font-size: var(--hec-type-sm); line-height: 1.62; color: var(--hec-text-muted); margin: 0; }
.hec-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.hec-card__meta span {
  font-size: var(--hec-type-label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hec-text-quiet);
}

/* ---------- Series label ---------- */
.hec-series {
  display: inline-block;
  font-size: var(--hec-type-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px;
  background: var(--hec-sand); color: var(--hec-text-on-sand);
}

/* ---------- Embed facade ----------
   Never ship a live YouTube iframe per card. Render the
   Collective thumbnail, and swap in the iframe only on click:
   the page keeps its own packaging, loads in a fraction of the
   weight, and sets no third-party cookie before consent. */
.hec-embed { position: relative; aspect-ratio: 16/9; background: var(--hec-ink); }
.hec-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hec-embed__btn {
  position: absolute; inset: 0;
  display: grid; place-items: end end;
  padding: 4%;
  border: 0; margin: 0;
  background: transparent; cursor: pointer;
  z-index: 4;
}
.hec-embed__btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(22, 35, 42, .18);
  opacity: 0;
  transition: opacity var(--hec-hover-duration) var(--hec-hover-ease);
}
.hec-embed__btn:hover::after, .hec-embed__btn:focus-visible::after { opacity: 1; }

/* The play affordance is the brand diamond, not a red rectangle.
   It sits bottom-right, inside the safe margin and clear of the
   hook: the hook occupies the left two-thirds of every family, and
   it is the whole reason the thumbnail exists. */
.hec-play {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: clamp(44px, 11%, 62px); aspect-ratio: 1;
  border-radius: var(--hec-radius-diamond);
  transform: rotate(45deg);
  background: rgba(247, 244, 239, .92);
  transition: transform var(--hec-hover-duration) var(--hec-hover-ease);
}
.hec-embed__btn:hover .hec-play { transform: rotate(45deg) scale(1.06); }
.hec-play::before {
  content: '';
  transform: rotate(-45deg);
  border-style: solid;
  border-width: .5em 0 .5em .86em;
  border-color: transparent transparent transparent var(--hec-ink);
  font-size: 14px;
  margin-left: .1em;
}
@media (prefers-reduced-motion: reduce) {
  .hec-embed__btn:hover .hec-play { transform: rotate(45deg); }
}

/* ---------- Playlist rail ---------- */
.hec-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.hec-rail > * { flex: 0 0 clamp(260px, 32vw, 340px); scroll-snap-align: start; }

/* ---------- Note panel ---------- */
.hec-note { background: var(--hec-surface); border: 1px solid var(--hec-border); padding: 24px; }
.hec-note h3 { font-family: var(--hec-font-display); font-weight: 400; font-size: var(--hec-type-h3); margin: 0 0 12px; }
.hec-note p { font-size: var(--hec-type-body); line-height: 1.68; color: var(--hec-text-muted); margin: 0; }

/* ADDED 2026-08-25 — three note grounds, because the system itself
   distinguishes the three content types by colour and the note had only one
   appearance. Three identical white panels read as a form, not as a channel.
   These use the SHARED palette (--hec-ink / --hec-teal / --hec-sand), never
   the export-strength --hec-field-* set, which rules.md reserves for
   thumbnails. One field per note, and no accent. */
.hec-note-ink  { background: var(--hec-ink);  border-color: var(--hec-ink); }
.hec-note-teal { background: var(--hec-teal); border-color: var(--hec-teal); }
.hec-note-sand { background: var(--hec-sand); border-color: var(--hec-sand); }
.hec-note-ink  h3, .hec-note-teal h3 { color: var(--hec-paper); }
.hec-note-ink  p,  .hec-note-teal p  { color: var(--hec-paper); }
.hec-note-sand h3, .hec-note-sand p  { color: var(--hec-text-on-sand); }
.hec-note-sand h3 { color: var(--hec-ink); }
.hec-note .hec-series { margin-bottom: 16px; }
/* On the sand note the pill and the ground are the same colour, so the
   pill stops reading as a shape. Paper separates it. */
.hec-note-sand .hec-series { background: var(--hec-paper); }

/* ---------- Rail head and controls ----------
   ADDED 2026-08-25. A scroll-snap rail with no visible controls is invisible
   to anyone using a mouse without a horizontal wheel, and unreachable by
   keyboard unless the region itself is focusable. These are scroll controls,
   NOT a carousel: nothing auto-advances, nothing is hidden behind a slide,
   and the rail remains a plain scrollable region if the script never runs.
   Hidden entirely when the rail has nothing to scroll — no false affordance. */
.hec-rail-head { display: flex; align-items: flex-end; gap: var(--hec-space-5); margin-bottom: var(--hec-space-5); }
.hec-rail-head > div { min-width: 0; }
.hec-rail-nav { display: flex; gap: var(--hec-space-2); margin-inline-start: auto; flex: 0 0 auto; }
.hec-rail-nav[hidden] { display: none; }
.hec-rail-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--hec-ink); cursor: pointer;
  border: 1px solid var(--hec-border-strong);
  border-radius: var(--hec-radius-pill);
  transition: border-color var(--hec-hover-duration) var(--hec-hover-ease),
              color var(--hec-hover-duration) var(--hec-hover-ease);
}
.hec-rail-btn:hover { border-color: var(--hec-teal); color: var(--hec-teal); }
.hec-rail-btn[disabled] { color: var(--hec-text-quiet); border-color: var(--hec-border); cursor: default; }
/* Chevron drawn from two borders, the same technique .hec-play uses for its
   triangle. Sized in em so no raw px enters the system. */
.hec-rail-btn::before {
  content: ''; font-size: 15px;
  width: .5em; height: .5em;
  border-top: .11em solid currentColor;
  border-right: .11em solid currentColor;
  transform: rotate(45deg); margin-inline-start: .1em;
}
.hec-rail-btn[data-dir='prev']::before { transform: rotate(-135deg); margin-inline: .1em 0; }
.hec-rail:focus-visible { outline: 2px solid var(--hec-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hec-rail-btn { transition: none; } }

/* ---------- Subscribe / CTA band ---------- */
.hec-cta { background: var(--hec-teal); color: var(--hec-paper); }
.hec-cta h2 { font-family: var(--hec-font-display); font-weight: 300; font-size: var(--hec-type-h2); letter-spacing: -.02em; margin: 0 0 12px; }
/* DEFECT FIXED 2026-08-25 — .78 alpha measured 3.99:1 on teal, under AA for
   15.5px body text. .87 measures 4.53:1. */
.hec-cta p { font-size: var(--hec-type-body); line-height: 1.68; color: rgba(247,244,239,.87); max-width: 52ch; margin: 0 0 24px; }
.hec-page .hec-btn,
.hec-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 12px 26px;
  border-radius: var(--hec-radius-pill);
  font-size: var(--hec-type-sm); font-weight: 600;
  text-decoration: none;
  background: var(--hec-paper); color: var(--hec-ink);
  transition: transform var(--hec-hover-duration) var(--hec-hover-ease);
}
.hec-page .hec-btn:hover { color: var(--hec-ink); transform: translateY(-2px); }
.hec-page .hec-btn-ghost,
/* DEFECT FIXED 2026-08-25 — the border was .5 alpha, 2.57:1 on teal. The
   border is how you know a ghost button is a button, so WCAG 1.4.11's 3:1
   applies. .60 measures 3.02:1. */
.hec-btn-ghost { background: transparent; color: var(--hec-paper); border: 1px solid rgba(247,244,239,.6); }
.hec-page .hec-btn-ghost:hover { color: var(--hec-paper); border-color: var(--hec-paper); }
@media (prefers-reduced-motion: reduce) { .hec-page .hec-btn:hover { transform: none; } }

/* ---------- Links and focus ---------- */
.hec-page a:not(.hec-btn):not(.hec-card) { color: var(--hec-teal); text-underline-offset: 3px; }
.hec-page a:not(.hec-btn):not(.hec-card):hover { color: var(--hec-ink); }
.hec-page :focus-visible { outline: 2px solid var(--hec-focus); outline-offset: 3px; }