/* ==========================================================================
   pages/hub.css: hubs, index pages and the title band shared with articles.
   Loaded through $pageCss = ['hub'] (article pages add 'article').
   Every value is a tokens.css custom property. Breakpoint numbers appear
   only in the marked section at the end, mirroring base.css section 16.
   Reuses base.css components (band, col, grid, card, dex-card, chip,
   link-arrow, field, btn, ed-tag, safety-banner); nothing here restyles them
   except inside the page-scoped wrappers named below.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Title band: breadcrumb, kicker, H1, lead
   <section class="band band--base pat-spore-print title-band">
   -------------------------------------------------------------------------- */
.title-band .breadcrumb { margin-bottom: var(--space-5); }

.title-band__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-3);
}
.title-band__kicker .t-label { margin: 0; }
.title-band__kicker .ed-tag {
    font-family: var(--role-label-family);
    font-weight: var(--role-label-weight);
    font-size: var(--fs-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--_heading);
}

.title-band h1 { margin: 0 0 var(--space-3); }
.title-band__lead { margin: 0; color: var(--_muted); }
.title-band__lead p { margin: 0 0 var(--space-3); }
.title-band__lead p:last-child { margin-bottom: 0; }
.title-band .safety-banner { margin: var(--space-5) 0 0; }


/* --------------------------------------------------------------------------
   2. Hub bar: the slim white band under the title (search, jump links, count)
   -------------------------------------------------------------------------- */
.hub-bar { padding-block: var(--space-4); }
.hub-bar .col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}
.hub-search {
    display: flex;
    flex: 1 1 18rem;
    align-items: flex-end;
    gap: var(--space-3);
    margin: 0;
}
.hub-search .field { flex: 1 1 auto; }
.hub-bar__count { margin: 0; font-size: var(--fs-small); color: var(--_muted); font-variant-numeric: tabular-nums; }
.hub-bar__count a { color: var(--_link); }

.hub-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hub-jump .t-label { margin: 0 var(--space-1) 0 0; }
.hub-jump .chip { gap: var(--space-2); }
.hub-jump .chip .ed-tag { font-size: var(--fs-small); color: var(--c-on-chip); }


/* --------------------------------------------------------------------------
   3. Group head: the heading row above each grid
   -------------------------------------------------------------------------- */
.group-head { margin: 0 0 var(--space-5); }
.group-head__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
}
.group-head__top h2 { margin: 0; }
.group-head__top .ed-tag { align-self: center; }
.group-head__count { font-size: var(--fs-small); color: var(--_muted); font-variant-numeric: tabular-nums; }
.group-head__top .link-arrow { margin-left: auto; font-size: var(--fs-small); }
.group-head__desc { margin: var(--space-2) 0 0; color: var(--_muted); }


/* --------------------------------------------------------------------------
   4. Index cards (articles, recipes, substitutes, shapes, axis values)
   -------------------------------------------------------------------------- */
.card__media--icon {
    display: grid;
    place-items: center;
    color: var(--c-accent);
    font-size: var(--fs-display);
}
.card--h > .card__media--icon { font-size: var(--fs-h1); }
.card .card__tagline {
    font-size: var(--fs-small);
    line-height: var(--lh-title);
    color: var(--_muted);
}
.card .t-label { margin-bottom: 0; }

/* One species on its own keeps the width of one card in a 3-column grid. */
.dex-single { max-width: calc((100% - 2 * var(--space-4)) / 3); }
.card > .card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--fs-caption);
    color: var(--_muted);
}
.card__foot .ph { vertical-align: -0.1em; }


/* --------------------------------------------------------------------------
   5. Note panel: the closing white panel on a paper band
   -------------------------------------------------------------------------- */
.note-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-5);
    padding: var(--space-5);
    background: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    --_ink: var(--c-ink);
    --_heading: var(--c-ink-heading);
    --_link: var(--c-link);
    --_muted: var(--c-ink-muted);
}
.note-panel > .ed-tag { font-weight: var(--fw-bold); }
.note-panel__text { flex: 1 1 18rem; min-width: 0; }
.note-panel__text h2 {
    margin: 0 0 var(--space-1);
    font-family: var(--role-title-family);
    font-weight: var(--role-title-weight);
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    letter-spacing: 0;
}
.note-panel__text p { margin: 0; color: var(--_ink); }
.note-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
}

/* Chip row of hub links inside a note panel or a band. */
.link-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}


/* --------------------------------------------------------------------------
   6. Feature tiles (type overview "four features", substitute "how swapping works")
   -------------------------------------------------------------------------- */
.feature-tile {
    padding: var(--space-4);
    background: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    --_ink: var(--c-ink);
    --_heading: var(--c-ink-heading);
    --_muted: var(--c-ink-muted);
}
.feature-tile h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-family: var(--role-title-family);
    font-weight: var(--role-title-weight);
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    letter-spacing: 0;
}
.feature-tile h3 .ph { color: var(--c-accent); }
.feature-tile p { margin: 0; font-size: var(--fs-small); color: var(--_ink); }
.band-foot { margin: var(--space-5) 0 0; }

/* Single-column stack of tiles (no grid, so no last row to fill). */
.rule-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.rule-list .feature-tile p { font-size: var(--fs-body); }

/* Editorial hub body and FAQ inside a band (landing-editorial uses .hub-body too). */
.hub-body + .faq { margin-top: var(--space-7); }


/* ==========================================================================
   7. BREAKPOINTS (mirror base.css section 16: phone max-width 767px)
   ========================================================================== */
@media (max-width: 767px) {
    .hub-search { flex-basis: 100%; }
    .dex-single { max-width: calc((100% - var(--space-3)) / 2); }
    .group-head__top .link-arrow { margin-left: 0; width: 100%; }
    .note-panel { padding: var(--space-4); }
}