/* =========================================================================
   pages.css — styling for the DEMO/DOC pages themselves (not shipped tokens):
   swatch grids, scale rows, hero, kitchen-sink section chrome.
   Uses only semantic tokens + logical properties, same rules as components.
   ========================================================================= */

/* ---- Hero — EqualWeb signature dark panel (uses theme-independent primitives
   so it stays dark in both light & dark themes; HC reverts it below). ---- */
.ewa-hero {
  position: relative;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(46, 230, 194, 0.16), transparent 60%),
    radial-gradient(70% 110% at 92% 110%, rgba(0, 192, 168, 0.12), transparent 60%),
    var(--gray-950);
  color: var(--gray-50);
  border-block-end: var(--border-1) solid rgba(46, 230, 194, 0.18);
  overflow: hidden;
}
.ewa-hero__inner { position: relative; padding-block: var(--space-10); }
.ewa-hero h1 {
  font-size: clamp(var(--text-3xl), 6vw, 4.5rem);
  line-height: 1.04;
  color: var(--gray-0);
}
.ewa-hero h1 .ewa-hero__accent { color: var(--teal-accent); }
.ewa-hero p { font-size: var(--text-md); color: var(--gray-300); max-width: var(--measure); }
.ewa-hero a:not(.ewa-btn) { color: var(--teal-accent); }
.ewa-hero .ewa-breadcrumb [aria-current="page"] { color: var(--gray-300); }
/* Ghost buttons on the dark hero need a visible affordance (light outline). */
.ewa-hero .ewa-btn--ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--gray-0);
  background: transparent;
}
.ewa-hero .ewa-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

/* Eyebrow label — leading dash + uppercase mint (EqualWeb pattern) */
.ewa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-accent);
}
.ewa-eyebrow::before {
  content: "";
  inline-size: 2.25rem;
  block-size: 2px;
  background: var(--teal-accent);
}

/* High-contrast: the hero must follow the HC palette (white bg / black text),
   not force a dark panel — otherwise mint-on-near-black bends the HC contract. */
[data-theme="hc"] .ewa-hero {
  background: var(--bg);
  color: var(--text);
  border-block-end: var(--border-2) solid var(--border);
}
[data-theme="hc"] .ewa-hero h1,
[data-theme="hc"] .ewa-hero h1 .ewa-hero__accent,
[data-theme="hc"] .ewa-hero p,
[data-theme="hc"] .ewa-hero a:not(.ewa-btn),
[data-theme="hc"] .ewa-hero .ewa-breadcrumb [aria-current="page"],
[data-theme="hc"] .ewa-eyebrow { color: var(--text); }
[data-theme="hc"] .ewa-eyebrow::before { background: var(--text); }

@media (forced-colors: active) {
  .ewa-eyebrow::before { background: CanvasText; }
}

/* ---- Home hero: split layout with a decorative "audit" panel on the right.
   The panel is aria-hidden (illustrative only); hidden below lg and in HC. ---- */
.ewa-hero__inner--split { display: grid; gap: var(--space-8); }
@media (min-width: 64rem) {
  .ewa-hero__inner--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
  }
}
.ewa-hero__visual { display: none; }
@media (min-width: 64rem) { .ewa-hero__visual { display: block; } }
[data-theme="hc"] .ewa-hero__visual { display: none; }

.ewa-hero__panel {
  inline-size: 100%;
  max-inline-size: 25rem;
  margin-inline: auto;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.ewa-hero__panel-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding-block-end: var(--space-4); margin-block-end: var(--space-4);
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gray-300); font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.ewa-hero__dots { display: inline-flex; gap: 5px; }
.ewa-hero__dots span { inline-size: 8px; block-size: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.ewa-hero__score { display: flex; align-items: baseline; gap: var(--space-3); margin-block-end: var(--space-5); }
.ewa-hero__score b { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; line-height: 1; color: var(--gray-0); }
.ewa-hero__score span { color: var(--teal-accent); font-weight: var(--weight-semibold); }
.ewa-hero__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ewa-hero__rows li { display: flex; align-items: center; gap: var(--space-2); color: var(--gray-50); font-size: var(--text-sm); }
.ewa-hero__check {
  inline-size: 1.25rem; block-size: 1.25rem; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: rgba(46, 230, 194, 0.16); color: var(--teal-accent);
  font-size: 0.8rem; font-weight: var(--weight-bold);
}
.ewa-hero__pass { margin-inline-start: auto; color: var(--teal-accent); font-weight: var(--weight-semibold); font-size: var(--text-xs); }

/* ---- Doc section headers w/ anchor rhythm ---- */
.doc-section { padding-block: var(--space-6); border-block-start: var(--border-1) solid var(--border); }
.doc-section:first-of-type { border-block-start: 0; }

/* ---- Swatch grid (tokens.html) ---- */
.swatch-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  padding: 0; margin: 0; list-style: none;
}
.swatch {
  display: flex;
  flex-direction: column;
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}
/* The chip is a <span>; make it a block so block-size (the colour band) renders.
   The inset ring gives every chip a visible edge — even a near-white or a
   near-black colour against the card. */
.swatch__chip {
  display: block;
  block-size: 5rem;
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.22);
  border-block-end: var(--border-1) solid var(--border);
}
.swatch__meta {
  display: block;
  padding: var(--space-3);
  line-height: var(--leading-snug);
}
.swatch__name { display: inline-block; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.swatch__hex { display: inline-block; margin-block-start: 2px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.swatch__readout {
  display: inline-block;
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 0.15em 0.55em;
  border-radius: var(--radius-pill);
  border: var(--border-1) solid var(--border);
}
@media (forced-colors: active) {
  .swatch__chip { forced-color-adjust: none; }
}
.swatch__readout[data-grade="pass"] { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-border); }
.swatch__readout[data-grade="warn"] { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); }
.swatch__readout[data-grade="fail"] { color: var(--danger-fg);  background: var(--danger-bg);  border-color: var(--danger-border); }

/* ---- Generic scale table (type / spacing / radius) ---- */
.scale-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline;
  padding-block: var(--space-3); border-block-end: var(--border-1) solid var(--border); }
.scale-row__token { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); min-inline-size: 9rem; }
.scale-bar { block-size: 0.75rem; background: var(--color-brand); border-radius: var(--radius-pill); }

/* ---- Kitchen-sink demo block (components.html) ---- */
.demo {
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-lg);
  margin-block: var(--space-5);
  overflow: hidden;
  background: var(--bg-elevated);
}
.demo__title { margin: 0; padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle); border-block-end: var(--border-1) solid var(--border);
  font-size: var(--text-md); }
.demo__stage { padding: var(--space-5); }
.demo__stage > * + * { margin-block-start: var(--space-4); }

/* ---- Section intro (sub-hero for Learn/Patterns/Standards/About) ---- */
.section-intro { max-width: 48rem; }
.section-intro h1 { font-size: clamp(var(--text-3xl), 5vw, 3.25rem); margin-block-end: var(--space-4); }
.section-intro p { font-size: var(--text-lg); color: var(--text-muted); line-height: var(--leading-base); }

/* Lead paragraph: the first paragraph after a docs <h1> reads larger + darker,
   an editorial cue that sets up the page. */
.docs__content > h1 + p,
.prose > h1 + p { font-size: var(--text-lg); color: var(--text); line-height: var(--leading-base); }

/* ---- Catalog filters (the lessons catalog) ---- */
.ewa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-4);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  margin-block: var(--space-5);
}
.ewa-filters .ewa-field { margin: 0; min-inline-size: 12rem; flex: 1 1 12rem; }
.ewa-filters__search { flex: 2 1 16rem; }
.ewa-filters__reset { flex: 0 0 auto; }
.ewa-catalog__count {
  margin-block: var(--space-2) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ---- Catalog grid of lesson cards ---- */
.ewa-catalog {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.ewa-catalog > li { margin: 0; max-width: none; }
.ewa-catalog__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-block-start: var(--space-3);
}

/* ---- Card (landing) ---- */
.ewa-card {
  position: relative;
  display: block;
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--easing-standard),
              box-shadow var(--duration-base) var(--easing-standard),
              transform var(--duration-base) var(--easing-standard);
}
a.ewa-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.ewa-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-end: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--teal-100);
  color: var(--teal-800);
  transition: transform var(--duration-base) var(--easing-standard);
}
.ewa-card__icon svg {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
a.ewa-card:hover .ewa-card__icon { transform: scale(1.06); }
[data-theme="dark"] .ewa-card__icon { background: rgba(46, 230, 194, 0.14); color: var(--teal-accent); }
@media (prefers-reduced-motion: reduce) { a.ewa-card:hover .ewa-card__icon { transform: none; } }
@media (forced-colors: active) {
  .ewa-card__icon { border: 1px solid CanvasText; }
  .ewa-card__icon svg { stroke: CanvasText; }
}
.ewa-card__cta {
  display: inline-block;
  margin-block-start: var(--space-3);
  color: var(--color-brand-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
a.ewa-card:hover .ewa-card__cta { text-decoration: underline; }
.section-lead {
  max-width: 58ch;
  margin-block: calc(-1 * var(--space-3)) var(--space-5);
  font-size: var(--text-md);
}
.ewa-card h3 {
  margin-block: 0 var(--space-2);
  transition: color var(--duration-base) var(--easing-standard);
}
a.ewa-card:hover h3,
a.ewa-card:focus-within h3 { color: var(--color-brand-text); }
.ewa-card p { margin: 0; color: var(--text-muted); }
.ewa-card p:not(:last-child) { margin-block-end: var(--space-3); }
@media (prefers-reduced-motion: reduce) {
  .ewa-card, .ewa-card h3 { transition: none; }
  a.ewa-card:hover { transform: none; }
}
@media (forced-colors: active) {
  a.ewa-card:hover { border-color: Highlight; }
  a.ewa-card:hover h3 { color: Highlight; }
}