/* ==========================================================================
   pages/article.css: silo articles, guides, roundups, recipes, substitutes.
   Loaded after hub.css through $pageCss = ['hub', 'article'].
   The article body itself (Template::articleBlocks inside .prose) belongs to
   blocks.css; this sheet styles only the chrome around it.
   Every value is a tokens.css custom property. Breakpoint numbers appear
   only in the marked section at the end, mirroring base.css section 16.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Title band: header, date, lead, byline, hero
   -------------------------------------------------------------------------- */
.article-header .t-lead { margin: 0 0 var(--space-4); color: var(--_ink); }
.article-date {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-caption);
    color: var(--_muted);
}
.article-header .byline { margin: var(--space-3) 0 var(--space-4); }

.article-hero { margin: var(--space-6) 0 0; }
.article-hero img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    background: var(--c-surface-sunk);
}


/* --------------------------------------------------------------------------
   2. Body band
   -------------------------------------------------------------------------- */
.article-body > * + * { margin-top: var(--space-6); }
.article-body > .safety-banner { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   3. End bands: sources, the FAQ and the related band; the FAQ or the sources band is ink
   -------------------------------------------------------------------------- */
.article-end .sources-section { margin: 0; }
.article-end .sources-section h2,
.related-posts h2 { margin-bottom: var(--space-5); }
.related-posts .card--h h3 { font-size: var(--fs-title); }


/* --------------------------------------------------------------------------
   4. Roundup ranked list
   -------------------------------------------------------------------------- */
.roundup-list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.roundup-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.roundup-item .card__media { border-radius: var(--radius-sm); }
/* A white surface card, also on the ink band: light-surface ink and light edibility marks. */
.roundup-item {
    --_ink: var(--c-ink);
    --_heading: var(--c-ink-heading);
    --_label: var(--c-label-on-light);
    --_link: var(--c-link);
    --_muted: var(--c-ink-muted);
    --_focus: var(--c-focus);
}
.band--ink .roundup-item .ed-mark { --_c: var(--_m); }
.roundup-item__rank {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-base);
    display: inline-grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border-radius: 50%;
    background: var(--c-band-strong);
    color: var(--c-on-strong);
    font-family: var(--role-display-family);
    font-weight: var(--role-display-weight);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}
.roundup-item__body { display: grid; gap: var(--space-2); min-width: 0; }
.roundup-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
}
.roundup-item__head h3 { margin: 0; font-size: var(--fs-h3); }
.roundup-item__head h3 a { color: var(--_heading); text-decoration: none; }
.roundup-item__head h3 a:hover { text-decoration: underline; }
.roundup-item__body p { margin: 0; }
.roundup-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    font-size: var(--fs-small);
}


/* --------------------------------------------------------------------------
   5. Recipe card: times, ingredients, method
   -------------------------------------------------------------------------- */
.recipe-card {
    padding: var(--space-5);
    background: var(--c-band-paper);
    border-radius: var(--radius-md);
}
.recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    margin: 0 0 var(--space-5);
    padding: 0 0 var(--space-4);
    border-bottom: var(--border-hairline) solid var(--c-line);
}
.recipe-meta .rm { display: grid; gap: var(--space-1); }
.recipe-meta .rm b {
    font-family: var(--role-display-family);
    font-weight: var(--role-display-weight);
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--_heading);
}
.recipe-meta .rm span {
    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(--_label);
}
/* On the ink contrast band the card drops its paper panel: the band is the card. */
.band--ink .recipe-card { padding: 0; background: none; }
.band--ink .recipe-meta { border-bottom-color: color-mix(in srgb, var(--_ink) 18%, transparent); }
.recipe-cols {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-6);
}
.recipe-cols h2 { font-size: var(--fs-h3); }
.recipe-cols ul,
.recipe-cols ol { margin: 0; padding-left: var(--space-5); }
.recipe-cols li { padding-block: var(--space-1); }
.recipe-cols li::marker { color: var(--_muted); font-variant-numeric: tabular-nums; }
.recipe-cols .steps li + li { margin-top: var(--space-2); }
.featured-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}


/* --------------------------------------------------------------------------
   6. Substitute options
   -------------------------------------------------------------------------- */
.option-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: option;
}
.option-list > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4);
    background: var(--c-surface);
    border: var(--border-hairline) solid var(--c-line);
    border-radius: var(--radius-md);
}
.option-list__no {
    grid-row: span 2;
    display: inline-grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border-radius: 50%;
    background: var(--c-chip);
    color: var(--c-on-chip);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}
.option-list h3 {
    margin: 0;
    align-self: center;
    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;
}
.option-list__note { margin: 0; font-size: var(--fs-small); }


/* ==========================================================================
   7. BREAKPOINTS (mirror base.css section 16: phone max-width 767px)
   ========================================================================== */
@media (max-width: 767px) {
    .roundup-item { grid-template-columns: minmax(0, 1fr); }
    .recipe-card { padding: var(--space-4); }
    .recipe-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .article-hero { margin-top: var(--space-5); }
}