/* examples-hub.css — `/examples/` hub page (W6.F.A.4).
 *
 * Three component layers:
 *   1. .demo-hub-page — page-level layout container + max-width.
 *   2. .demo-hub-hero — eyebrow + title + lede + filter strip + search.
 *   3. .demo-hub-tier — per-tier heading + card grid (or empty sentinel).
 *
 * All values resolve through --demo-* tokens. The single allowed
 * literal here is the responsive `auto-fill, minmax(min(280px, 100%), 1fr)`
 * grid track — the 280 px is the smallest card width below which titles
 * start to wrap mid-word; tokens have no card-width concept.
 *
 * State table per interactive primitive:
 *   .demo-hub-filter__pill   rest · hover · focus · active · disabled (=pending)
 *   .demo-hub-search__input  rest · hover · focus · disabled
 *   .demo-hub-card           rest · hover · focus · active · is-hidden (filter miss)
 *
 * Mobile breakpoint (< 768 px): pills wrap, search becomes full-width
 * below pills, tier grid collapses to 1 column. No horizontal scroll
 * at any viewport ≥ 320 px (tested in spec).
 */

/* ─────────────────────────────────────────────────────
 * Visually-hidden — labelling helper for screen readers
 * (Used by hub search + a few demo home partials.)
 * ───────────────────────────────────────────────────── */
.demo-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────
 * Page shell
 * ───────────────────────────────────────────────────── */

.demo-hub-page {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-9);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: var(--demo-space-8) var(--demo-space-5) var(--demo-space-10);
}

/* ─────────────────────────────────────────────────────
 * Hero (eyebrow + title + lede)
 * ───────────────────────────────────────────────────── */

.demo-hub-hero {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-4);
}

.demo-hub-hero__eyebrow {
  margin: 0;
  color: var(--demo-accent);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
}

.demo-hub-hero__title {
  margin: 0;
  color: var(--demo-text-strong);
  font-size: var(--demo-fs-3xl);
  font-weight: var(--demo-fw-display);
  letter-spacing: var(--demo-ls-display);
  line-height: 1.05;
}

.demo-hub-hero__lede {
  margin: 0;
  max-width: 56ch;
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-lg);
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────
 * Filter strip + search controls
 * ───────────────────────────────────────────────────── */

.demo-hub-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--demo-space-4);
  margin-top: var(--demo-space-4);
}

.demo-hub-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--demo-space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.demo-hub-filter__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--demo-space-2);
  height: 36px;
  padding: 0 var(--demo-space-4);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-pill);
  color: var(--demo-text);
  font-family: var(--demo-font-sans);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-medium);
  letter-spacing: var(--demo-ls-body);
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease,
              color 120ms ease, transform 80ms ease;
}

.demo-hub-filter__pill:hover {
  background: var(--demo-bg);
  border-color: var(--demo-text-muted);
  color: var(--demo-text-strong);
}

.demo-hub-filter__pill:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

.demo-hub-filter__pill:active {
  transform: translateY(1px);
}

.demo-hub-filter__pill.is-active {
  background: var(--demo-accent-soft);
  border-color: transparent;
  color: var(--demo-accent);
}

.demo-hub-filter__pill.is-pending {
  opacity: 0.6;
  cursor: not-allowed;
}

.demo-hub-filter__pill.is-pending:hover {
  background: var(--demo-bg-elevated);
  border-color: var(--demo-border);
  color: var(--demo-text);
}

.demo-hub-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--demo-space-2);
  background: var(--demo-bg);
  border-radius: var(--demo-radius-pill);
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
}

.demo-hub-filter__pill.is-active .demo-hub-filter__count {
  background: var(--demo-accent);
  color: var(--demo-primary-fg);
}

.demo-hub-filter__pending {
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-medium);
  color: var(--demo-text-muted);
  letter-spacing: var(--demo-ls-body);
}

/* Search */

.demo-hub-search {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  max-width: 100%;
}

.demo-hub-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.demo-hub-search__icon {
  position: absolute;
  left: var(--demo-space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--demo-text-muted);
  pointer-events: none;
}

.demo-hub-search__input {
  padding-left: var(--demo-space-8);
  width: 100%;
}

/* Status / live region */

.demo-hub-status {
  margin: 0;
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-sm);
}

/* ─────────────────────────────────────────────────────
 * Per-tier sections + card grid
 * ───────────────────────────────────────────────────── */

.demo-hub-tier {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-5);
  scroll-margin-top: var(--demo-space-9);
}

.demo-hub-tier__header {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-2);
  border-bottom: 1px solid var(--demo-border);
  padding-bottom: var(--demo-space-4);
}

.demo-hub-tier__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--demo-space-3);
  margin: 0;
  color: var(--demo-text-strong);
  font-size: var(--demo-fs-2xl);
  font-weight: var(--demo-fw-bold);
  letter-spacing: var(--demo-ls-heading);
  line-height: 1.15;
}

/* Hide the redundant pill in the heading — pill duplicates the
   title-text for screen-readers, but visually we want the text alone
   in the heading and the pill on each card. The h2 carries the pill
   for SR context only. */
.demo-hub-tier__title > .demo-pill {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.demo-hub-tier__count,
.demo-hub-tier__pending {
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-medium);
  letter-spacing: var(--demo-ls-body);
  color: var(--demo-text-muted);
}

.demo-hub-tier__pending {
  color: var(--demo-warn);
}

.demo-hub-tier__lede {
  margin: 0;
  max-width: 64ch;
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-base);
  line-height: 1.55;
}

.demo-hub-tier__empty {
  padding: var(--demo-space-6);
  background: var(--demo-bg-elevated);
  border: 1px dashed var(--demo-border);
  border-radius: var(--demo-radius-lg);
  color: var(--demo-text-muted);
  font-size: var(--demo-fs-sm);
}
.demo-hub-tier__empty p { margin: 0; }

/* Card grid */

.demo-hub-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--demo-space-5);
}

.demo-hub-grid__item {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Card surface */

.demo-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-3);
  padding: var(--demo-space-5);
  height: 100%;
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-lg);
  color: var(--demo-text);
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.demo-hub-card:hover {
  box-shadow: var(--demo-shadow-md);
  border-color: var(--demo-text-muted);
  transform: translateY(-2px);
  color: var(--demo-text);
}
.demo-hub-card:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

.demo-hub-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--demo-space-3);
}

.demo-hub-card__title {
  margin: 0;
  color: var(--demo-text-strong);
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-bold);
  letter-spacing: var(--demo-ls-body);
  line-height: 1.3;
}

.demo-hub-card__lede {
  margin: 0;
  flex-grow: 1;
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-sm);
  line-height: 1.55;
  /* Clamp lede to 4 lines so cards stay equal-height across rows. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.demo-hub-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--demo-space-1);
  margin-top: var(--demo-space-2);
  color: var(--demo-accent);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-body);
  transition: gap 120ms ease;
}
.demo-hub-card__cta .material-symbols-outlined { font-size: 16px; }
.demo-hub-card:hover .demo-hub-card__cta { gap: var(--demo-space-2); }

/* Difficulty meter dots */

.demo-hub-card__difficulty {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.demo-hub-card__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--demo-radius-pill);
  background: var(--demo-border);
}
.demo-hub-card__dot.is-on { background: var(--demo-text-muted); }

/* Inline <code> chips inside lede strings (rare). */
.demo-hub-card__lede code {
  padding: 0 var(--demo-space-1);
  background: var(--demo-bg);
  border-radius: var(--demo-radius-sm);
  font-family: var(--demo-font-mono);
  font-size: 0.92em;
  color: var(--demo-accent);
}

/* ─────────────────────────────────────────────────────
 * Empty state — search + filter combined returns nothing
 * ───────────────────────────────────────────────────── */

.demo-hub-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--demo-space-4);
  padding: var(--demo-space-9) var(--demo-space-5);
  background: var(--demo-bg-elevated);
  border: 1px dashed var(--demo-border);
  border-radius: var(--demo-radius-lg);
  text-align: center;
}
.demo-hub-empty.is-visible { display: flex; }

.demo-hub-empty__title {
  margin: 0;
  color: var(--demo-text-strong);
  font-size: var(--demo-fs-lg);
  font-weight: var(--demo-fw-bold);
}
.demo-hub-empty__lede {
  margin: 0;
  max-width: 48ch;
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-sm);
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────
 * Per-card filter visibility — driven by examples-hub.js
 * ───────────────────────────────────────────────────── */

.demo-hub-grid__item[hidden] { display: none; }

.demo-hub-tier[hidden] { display: none; }

/* ─────────────────────────────────────────────────────
 * Mobile (< 768 px)
 * ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .demo-hub-page {
    gap: var(--demo-space-7);
    padding: var(--demo-space-6) var(--demo-space-4) var(--demo-space-9);
  }
  .demo-hub-hero__title {
    font-size: var(--demo-fs-2xl);
  }
  .demo-hub-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .demo-hub-search {
    width: 100%;
  }
  .demo-hub-tier__title {
    font-size: var(--demo-fs-xl);
  }
}

/* ─────────────────────────────────────────────────────
 * W6.F.B.3 — Per-tier rich-treatment hero strip
 *
 * Lands between the tier <header> (title + count + lede) and the
 * .demo-hub-grid. Carries:
 *   - .demo-hub-tier-hero__subtitle  — 1-line "what this tier
 *     teaches", richer than the lede
 *   - .demo-hub-tier-hero__spotlight — full-bleed featured-card,
 *     bigger than grid cards (the "start here" pick for the tier)
 *   - .demo-hub-tier-hero__path-cta  — "Walk this with the X path"
 *     callout, only present when the tier maps to a path
 * ───────────────────────────────────────────────────── */

.demo-hub-tier-hero {
  display: grid;
  gap: var(--demo-space-4);
  margin-top: var(--demo-space-3);
  margin-bottom: var(--demo-space-5);
}

.demo-hub-tier-hero__subtitle {
  margin: 0;
  font-size: var(--demo-fs-md);
  line-height: var(--demo-lh-body);
  color: var(--demo-text-secondary);
  max-width: 64ch;
}
.demo-hub-tier-hero__subtitle code {
  font-family: var(--demo-font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: var(--demo-radius-sm);
  background: var(--demo-accent-soft);
  color: var(--demo-accent);
  white-space: nowrap;
}

.demo-hub-tier-hero__spotlight {
  display: grid;
  grid-template-areas:
    "pills"
    "title"
    "lede"
    "cta";
  gap: var(--demo-space-3);
  padding: var(--demo-space-6);
  text-decoration: none;
  color: inherit;
  position: relative;
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.demo-hub-tier-hero__spotlight::before {
  /* Subtle accent stripe down the left edge so spotlight reads as a
   * tier "feature" rather than just a bigger card. */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--demo-accent);
  border-top-left-radius: var(--demo-radius-md);
  border-bottom-left-radius: var(--demo-radius-md);
}
.demo-hub-tier-hero__spotlight:hover {
  border-color: var(--demo-accent);
  transform: translateY(-2px);
  box-shadow: var(--demo-shadow-md);
}
.demo-hub-tier-hero__spotlight:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

.demo-hub-tier-hero__spotlight-pills {
  grid-area: pills;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--demo-space-3);
}
.demo-hub-tier-hero__featured-eyebrow {
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  color: var(--demo-accent);
}
.demo-hub-tier-hero__spotlight-title {
  grid-area: title;
  margin: 0;
  font-size: var(--demo-fs-lg);
  font-weight: var(--demo-fw-bold);
  color: var(--demo-text);
  line-height: var(--demo-lh-tight);
}
.demo-hub-tier-hero__spotlight-lede {
  grid-area: lede;
  margin: 0;
  font-size: var(--demo-fs-md);
  line-height: var(--demo-lh-body);
  color: var(--demo-text-secondary);
  max-width: 70ch;
}
.demo-hub-tier-hero__spotlight-cta {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  gap: var(--demo-space-1);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-text);
  margin-top: var(--demo-space-2);
  transition: gap 160ms ease, color 160ms ease;
}
.demo-hub-tier-hero__spotlight-cta .material-symbols-outlined {
  font-size: 18px;
  transition: transform 160ms ease;
}
.demo-hub-tier-hero__spotlight:hover .demo-hub-tier-hero__spotlight-cta {
  color: var(--demo-accent);
  gap: var(--demo-space-2);
}
.demo-hub-tier-hero__spotlight:hover .demo-hub-tier-hero__spotlight-cta .material-symbols-outlined {
  transform: translateX(4px);
}

/* Path cross-link callout */

.demo-hub-tier-hero__path-cta {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--demo-space-3);
  padding: var(--demo-space-3) var(--demo-space-4);
  background: color-mix(in srgb, var(--demo-accent) 6%, transparent);
  border: 1px dashed var(--demo-accent);
  border-radius: var(--demo-radius-md);
  text-decoration: none;
  color: var(--demo-text);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.demo-hub-tier-hero__path-cta:hover {
  background: color-mix(in srgb, var(--demo-accent) 14%, transparent);
  border-style: solid;
  transform: translateY(-1px);
}
.demo-hub-tier-hero__path-cta:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}
.demo-hub-tier-hero__path-icon {
  font-size: 22px;
  color: var(--demo-accent);
}
.demo-hub-tier-hero__path-eyebrow {
  display: block;
  font-size: var(--demo-fs-xs);
  letter-spacing: var(--demo-ls-caps);
  color: var(--demo-text-muted);
  text-transform: uppercase;
}
.demo-hub-tier-hero__path-label {
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-tight);
  color: var(--demo-text-secondary);
}
.demo-hub-tier-hero__path-label strong {
  color: var(--demo-text);
}
.demo-hub-tier-hero__path-arrow {
  font-size: 18px;
  color: var(--demo-text-muted);
  transition: transform 160ms ease, color 160ms ease;
}
.demo-hub-tier-hero__path-cta:hover .demo-hub-tier-hero__path-arrow {
  transform: translateX(4px);
  color: var(--demo-accent);
}

/* "Most popular" / "Recently shipped" badge overlays on grid cards */

.demo-hub-card__badges {
  position: absolute;
  top: var(--demo-space-3);
  right: var(--demo-space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--demo-space-1);
  pointer-events: none;
  z-index: 1;
}
.demo-hub-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--demo-radius-pill);
  font-size: 11px;
  font-weight: var(--demo-fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--demo-shadow-sm);
  border: 1px solid transparent;
}
.demo-hub-card__badge .material-symbols-outlined {
  font-size: 13px;
}
.demo-hub-card__badge--popular {
  background: var(--demo-accent);
  color: var(--demo-primary-fg);
}
.demo-hub-card__badge--recent {
  background: var(--demo-bg-elevated);
  color: var(--demo-success);
  border-color: var(--demo-success);
}
[data-theme='dark'] .demo-hub-card__badge--recent {
  background: var(--demo-bg);
}

/* Hub card needs `position: relative` for the badge anchor — the
 * existing .demo-card primitive already provides it via .demo-card,
 * but assert here so a future refactor of .demo-card doesn't break
 * the badge overlay. */
.demo-hub-card { position: relative; }

@media (max-width: 640px) {
  /* Stack badges horizontally at narrow viewports so the title row
   * isn't pushed too far down. */
  .demo-hub-card__badges {
    flex-direction: row;
  }
}

/* ─────────────────────────────────────────────────────
 * Reduced motion — drop card hover lift + cta nudge
 * ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .demo-hub-card,
  .demo-hub-card__cta,
  .demo-hub-filter__pill,
  .demo-hub-tier-hero__spotlight,
  .demo-hub-tier-hero__path-cta,
  .demo-hub-tier-hero__spotlight-cta,
  .demo-hub-tier-hero__path-arrow {
    transition: none !important;
  }
  .demo-hub-card:hover,
  .demo-hub-tier-hero__spotlight:hover,
  .demo-hub-tier-hero__path-cta:hover {
    transform: none;
  }
  .demo-hub-tier-hero__spotlight:hover .demo-hub-tier-hero__spotlight-cta .material-symbols-outlined,
  .demo-hub-tier-hero__path-cta:hover .demo-hub-tier-hero__path-arrow {
    transform: none;
  }
}