/* ==========================================================================
   pages/home.css: homepage, approved round 6 layout L1
   (art-src/style-refs/home-r6-top-approved.png, home-r6-bottom-approved.png).
   Values come from tokens.css; breakpoints only in the marked section at the end.
   ========================================================================== */

.home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
}
.home-head h2 { margin: 0; }
/* Section label, heading and lead keep one rhythm in every inserted band. */
:is(.home-counts, .home-read, .home-lookalike, .home-season, .home-overlap, .home-faq) .t-label { margin: 0 0 var(--rhythm-label); }
:is(.home-counts, .home-read, .home-lookalike, .home-season, .home-overlap, .home-faq) h2.t-h2 { margin: 0 0 var(--rhythm-heading-below); }

/* Numbered pin shared by "Read a profile" and the correction steps. */
.home-pin {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: calc(var(--space-5) - var(--space-1));
    height: calc(var(--space-5) - var(--space-1));
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-bg);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* --- Hero (the page's primary element) ----------------------------------- */
.home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: var(--space-5);
}
/* The H1 is the query-led title (AGENTS.md rule 5) set as the kicker line of the approved comp; the
   slogan below it is the visual headline. The slogan is sized to the column so no word breaks. */
.home-hero__text { container-type: inline-size; min-width: 0; }
.home-hero__h1 {
    margin: 0 0 var(--space-3);
    font-family: var(--role-label-family);
    font-weight: var(--role-label-weight);
    font-size: var(--fs-small);
    line-height: var(--lh-title);
    letter-spacing: 0;
    color: var(--c-label-on-light);
}
.home-hero__slogan { margin: 0 0 var(--space-4); font-size: clamp(var(--fs-h2), 11.8cqi, var(--fs-display)); line-height: var(--lh-display); }
/* Gold text on a light ground is highlight-ink (design/tokens.json color.$usage): bright gold
   reads 1.97:1 on the hero ground, highlight-ink 5.11:1. */
.home-hero__em {
    font-family: var(--font-taxon);
    font-style: italic;
    color: var(--c-highlight-ink);
}
/* The hero is locked to the approved comp, so it keeps its own leading and width. */
.home-hero .t-lead { margin: 0 0 var(--space-5); max-width: none; line-height: var(--lh-title); }
.home-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}
.home-hero__visual {
    position: relative;
    display: flex;
    justify-content: flex-end;
}
.home-hero__card { position: relative; z-index: calc(var(--z-base) + 1); width: 100%; max-width: 19.5rem; }
.home-hero__card .dex-card__name { font-size: var(--fs-h3); }
.home-hero__card .t-taxon, .home-hero__card .ed-tag { font-size: var(--fs-body); }
.home-hero__sporo {
    position: absolute;
    left: calc(-1 * var(--space-7));
    bottom: calc(-1 * var(--space-6));
    z-index: var(--z-base);
    width: 12rem;
    height: auto;
    pointer-events: none;
}
.home-hero__card .dex-card { position: relative; }

/* --- Edibility legend ---------------------------------------------------- */
.home-legend h2 { margin: 0 0 var(--space-5); }
.home-legend__tiers { margin: 0; }
.home-legend__tiers a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: calc(var(--space-9) + var(--space-3));
    padding: var(--space-3) var(--space-2);
    border: var(--border-hairline) solid color-mix(in srgb, var(--_ink) 22%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--_ink) 5%, transparent);
    text-decoration: none;
    text-align: center;
}
.home-legend__tiers a:hover { background: color-mix(in srgb, var(--_ink) 12%, transparent); }
.home-legend__tiers .ed-tag {
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--fs-small);
    white-space: normal;
}
.home-legend__tiers .ed-mark { width: calc(var(--space-7) + var(--space-2)); height: calc(var(--space-7) + var(--space-2)); }

/* --- A: how many are safe to eat ----------------------------------------- */
.home-counts__line { margin: 0 0 var(--rhythm-sibling); color: var(--_muted); }
.home-counts__bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: var(--space-6);
    margin: 0 0 var(--space-3);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
/* Cells of one tier touch; a hairline gap opens where the next tier starts. */
.home-counts__seg { position: relative; display: grid; place-items: center; min-width: 0; }
.home-counts__seg.is-first:not(:first-child) { margin-left: var(--border-hairline); }
.home-counts__seg b {
    position: relative;
    z-index: var(--z-base);
    color: var(--c-surface);
    font-family: var(--role-title-family);
    font-weight: var(--role-title-weight);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.home-counts__seg--choice    { background: var(--ed-choice); }
.home-counts__seg--edible    { background: var(--ed-edible); }
.home-counts__seg--caution   { background: var(--ed-caution); }
.home-counts__seg--medicinal { background: var(--ed-medicinal); }
.home-counts__seg--inedible  { background: var(--ed-inedible); }
.home-counts__seg--poisonous { background: var(--ed-poisonous); }
.home-counts__legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: var(--space-6);
    margin: 0 0 var(--space-4);
}
.home-counts__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: var(--border-hairline) solid var(--c-line);
}
.home-counts__row dt, .home-counts__row dd { margin: 0; }
.home-counts__row .ed-tag { font-size: var(--fs-body); }
.home-counts__row dd { display: flex; align-items: baseline; gap: var(--space-3); font-variant-numeric: tabular-nums; }
.home-counts__row dd .t-muted { min-width: 3ch; font-size: var(--fs-caption); text-align: right; }

/* --- B: read a profile in ten seconds ------------------------------------ */
.home-read__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--space-5);
    margin-top: var(--rhythm-stack);
}
.home-read__card { gap: var(--space-3); padding: var(--space-3); }
.home-read__card.card > * { margin: 0; }
.home-read__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}
.home-read__photo { border-radius: var(--radius-sm); overflow: hidden; background: var(--c-surface-sunk); }
.home-read__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-read__id { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.home-read__id p { margin: 0; }
.home-read__name {
    font-family: var(--role-title-family);
    font-weight: var(--role-title-weight);
    font-size: var(--fs-h3);
    color: var(--_heading);
}
.home-read__pinned { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); }
.home-read__pinned .safety-banner { flex: 1; margin: 0; padding: var(--space-2) var(--space-3); }
.home-read__pinned .safety-banner__text { font-size: var(--fs-small); line-height: var(--lh-title); }
.home-read__pinned .safety-banner__head .ed-tag { font-size: var(--fs-small); }
.home-read__facts {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    font-size: var(--fs-small);
    line-height: var(--lh-title);
}
.home-read__facts > div { display: contents; }
.home-read__facts dt, .home-read__facts dd {
    margin: 0;
    padding: var(--space-1) 0;
    border-top: var(--border-hairline) solid var(--c-line);
}
.home-read__facts dt { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-bold); color: var(--_heading); }
.home-read__facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--_ink); }
.home-read__facts .home-pin { width: var(--space-4); height: var(--space-4); font-size: var(--fs-label); }
.home-read__look .ed-tag { font-size: var(--fs-small); color: var(--ed-poisonous-text); }
.home-read__meta { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-caption); }
.home-read__list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.home-read__list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.home-read__list b { display: block; color: var(--_heading); }
.home-read__list p { margin: 0; color: var(--_muted); font-size: var(--fs-small); line-height: var(--lh-title); }

/* --- C: lookalike check ------------------------------------------------- */
.home-lookalike__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}
.home-lookalike__chips .chip.is-on { background: var(--c-accent); color: var(--c-bg); }
.home-lookalike__panel { gap: var(--space-3); padding: var(--space-4); }
.home-lookalike__panel.card > * { margin: 0; }
.home-lookalike__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
}
.home-lookalike__pair .vs-badge { align-self: center; }
.home-lookalike__side { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
/* Whole photos: the box takes each photo's own aspect, so nothing is cropped and nothing is letterboxed. */
.home-lookalike__photo { border-radius: var(--radius-sm); overflow: hidden; }
.home-lookalike__photo img { display: block; width: 100%; height: auto; }
.home-lookalike__id { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.home-lookalike__id h3 { margin: 0; }
.home-lookalike__id a { color: inherit; text-decoration: none; }
.home-lookalike__id a:hover { text-decoration: underline; }
.home-lookalike__deciding {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--c-chip);
    color: var(--c-on-chip);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    line-height: var(--lh-title);
    text-align: center;
}
.home-lookalike__traits { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-title); }
.home-lookalike__traits :is(td, th) { padding: var(--space-2); border-top: var(--border-hairline) solid var(--c-line); vertical-align: top; }
.home-lookalike__traits th {
    width: 22%;
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    text-align: center;
    color: var(--_muted);
}
.home-lookalike__traits td:last-child { text-align: left; }
.home-lookalike__traits .ph-check { color: var(--ed-choice); }
.home-lookalike__traits .ph-x { color: var(--c-danger); }
.home-lookalike__more { margin-top: var(--space-4); }
.home-lookalike .link-arrow.home-lookalike__more { display: inline-flex; }

/* --- Topics -------------------------------------------------------------- */
.home-topics h2 { margin: 0 0 var(--space-5); }
.home-topic .t-muted { font-size: var(--fs-small); line-height: var(--lh-title); }

/* --- Numbers ------------------------------------------------------------- */
.home-numbers { padding-block: var(--space-6); }
.home-numbers ul { margin: 0; }
.home-numbers li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.home-numbers li + li { border-left: var(--border-hairline) solid var(--c-line-strong); }

/* --- What fruits this month --------------------------------------------- */
.home-season__strip { margin: var(--rhythm-stack) 0 var(--space-4); }
.home-season__cards { margin: 0; }
.home-season__card {
    align-items: center;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-4) var(--space-3);
    text-align: center;
}
.home-season__card.card > * { margin: 0; }
.home-season__card h3 { font-size: var(--fs-small); }
.home-season__photo { width: 8.5rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c-surface-sunk); }
.home-season__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-season__card .ed-tag { font-size: var(--fs-caption); }
.home-season__more { margin: var(--space-4) 0 0; }

/* --- D: when the lookalikes fruit too ----------------------------------- */
.home-overlap__chart { gap: 0; margin-top: var(--rhythm-stack); padding: var(--space-3) var(--space-4); }
.home-overlap__row {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 7.5rem);
    align-items: center;
    gap: var(--space-3);
    min-height: var(--space-6);
}
.home-overlap__pair { padding: var(--space-1) 0; border-top: var(--border-hairline) solid var(--c-line); }
.home-overlap__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.home-overlap__name a { color: var(--_heading); text-decoration: none; }
.home-overlap__name a:hover { text-decoration: underline; }
.home-overlap__thumb { flex: none; width: var(--space-6); height: var(--space-5); border-radius: var(--radius-sm); object-fit: cover; }
.home-overlap__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--border-hairline); align-self: stretch; }
.home-overlap__months > span { min-height: var(--space-5); background: var(--c-surface-sunk); }
.home-overlap__axis .home-overlap__months > span {
    display: grid;
    place-items: center;
    min-height: var(--space-5);
    background: none;
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    color: var(--_ink);
}
.home-overlap__months > .home-overlap__cell--choice    { background: var(--ed-choice); }
.home-overlap__months > .home-overlap__cell--edible    { background: var(--ed-edible); }
.home-overlap__months > .home-overlap__cell--caution   { background: var(--ed-caution); }
.home-overlap__months > .home-overlap__cell--poisonous { background: var(--ed-poisonous); }
/* The current month's column is outlined from the axis letter to the last row. */
.home-overlap__months > .is-now {
    box-shadow: inset calc(var(--border-hairline) * 2) 0 0 var(--c-accent), inset calc(var(--border-hairline) * -2) 0 0 var(--c-accent);
}
.home-overlap__axis .home-overlap__months > .is-now { box-shadow: inset 0 calc(var(--border-hairline) * 2) 0 var(--c-accent), inset calc(var(--border-hairline) * 2) 0 0 var(--c-accent), inset calc(var(--border-hairline) * -2) 0 0 var(--c-accent); }
.home-overlap__region { font-size: var(--fs-caption); line-height: var(--lh-tight); }
.home-overlap__note { margin: var(--space-3) 0 0; font-size: var(--fs-caption); }

/* --- App band ------------------------------------------------------------ */
.home-app__grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
}
.home-app__art { display: flex; align-items: flex-end; }
.home-app__sporo { width: 8rem; height: auto; margin-right: calc(-1 * var(--space-5)); position: relative; z-index: var(--z-base); }
.home-app__art .phone-outline { flex: none; width: 8.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-app h2 { margin: 0 0 var(--space-3); }
.home-app__text > p:not(.t-label):not(.waitlist-note) { margin: 0 0 var(--space-4); color: var(--_muted); }

/* --- New guides: text-only card when an article has no image file ------ */
.home-guide--text { justify-content: center; padding-block: var(--space-2) var(--space-4); }

/* --- E: short answers to safety questions (5/7 master-detail) ---------- */
.home-faq__md { position: relative; margin-top: var(--rhythm-stack); }
.home-faq__item summary {
    display: block;
    padding: var(--space-3) var(--space-3);
    border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--_ink) 22%, transparent);
    color: var(--_ink);
    font-size: var(--fs-small);
    line-height: var(--lh-title);
    list-style: none;
    cursor: pointer;
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__item summary:hover { color: var(--_label); }
.home-faq__item[open] summary {
    box-shadow: inset var(--border-edge) 0 0 var(--c-highlight);
    font-weight: var(--fw-bold);
}
.home-faq__answer {
    --_ink: var(--c-ink);
    --_heading: var(--c-ink-heading);
    --_link: var(--c-link);
    --_muted: var(--c-ink-muted);
    --_focus: var(--c-focus);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-ink);
    box-shadow: var(--shadow-card);
}
.home-faq__answer p { margin: 0 0 var(--space-3); font-size: var(--fs-small); line-height: var(--lh-title); }
.home-faq__q { font-family: var(--role-title-family); font-weight: var(--role-title-weight); color: var(--c-ink-heading); }
.home-faq__all { margin-top: var(--space-5); }

/* --- F: spotted a wrong field mark? ------------------------------------- */
.home-fix .col { text-align: center; }
.home-fix h2 { margin: 0 0 var(--space-2); }
.home-fix__line { max-width: 60ch; margin: 0 auto var(--space-4); font-size: var(--fs-small); }
.home-fix__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 30rem;
    margin: 0 auto var(--space-5);
    padding: 0;
    list-style: none;
    font-size: var(--fs-small);
}
/* The line that connects the three steps runs through the pins' centres, behind them. */
.home-fix__steps::before {
    content: "";
    position: absolute;
    top: calc((var(--space-5) - var(--space-1)) / 2);
    left: calc(100% / 6);
    right: calc(100% / 6);
    border-top: var(--border-hairline) solid var(--c-line-strong);
}
.home-fix__steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.home-fix__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); }

/* --- Danger strip -------------------------------------------------------- */
.home-danger__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}
.home-danger__row p { margin: 0; color: var(--c-danger); font-size: var(--fs-small); }
.home-danger__row a:not(.link-arrow) { color: inherit; }
.home-danger__row i { color: var(--c-danger); font-size: var(--fs-lead); vertical-align: -0.2em; }

/* ==========================================================================
   Breakpoints (the only media queries in this file)
   ========================================================================== */
/* tablet and up: the safety answers sit beside their questions, 5/7 */
@media (min-width: 768px) {
    .home-faq__md { width: calc((100% - var(--space-5)) * 5 / 12); min-height: calc(var(--space-9) * 2); }
    .home-faq__item[open] .home-faq__answer {
        position: absolute;
        top: 0;
        left: calc(100% + var(--space-5));
        width: calc(100% * 7 / 5);
    }
}

/* phone */
@media (max-width: 767px) {
    .home-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .home-hero__visual { justify-content: center; align-items: flex-end; }
    .home-hero__sporo { position: static; flex: none; width: 8rem; margin-right: calc(-1 * var(--space-5)); }
    .home-hero__card { max-width: 11.5rem; }

    .home-legend__tiers a { min-height: calc(var(--space-8) + var(--space-4)); }

    .home-counts__legend { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }

    .home-read__grid { grid-template-columns: minmax(0, 1fr); }
    .home-read__list { gap: var(--space-3); }

    .home-lookalike__pair { gap: var(--space-2); }
    .home-lookalike__pair .vs-badge { width: var(--control-h-sm); height: var(--control-h-sm); font-size: var(--fs-caption); }
    .home-lookalike__id { flex-direction: column; align-items: flex-start; }
    .home-lookalike__traits th { width: 26%; }

    .home-topics .grid--3 { --_cols: 2; }
    .home-numbers .grid--3 { --_cols: 3; }
    .home-numbers .t-stat { font-size: var(--fs-h2); }
    .home-numbers .t-muted { font-size: var(--fs-caption); }

    .home-season__photo { width: 5rem; }

    .home-overlap__chart { padding: var(--space-2) var(--space-3); }
    .home-overlap__row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name region" "months months";
        row-gap: var(--space-1);
        padding: var(--space-1) 0;
    }
    .home-overlap__name { grid-area: name; }
    .home-overlap__region { grid-area: region; }
    .home-overlap__months { grid-area: months; }
    .home-overlap__axis { grid-template-areas: "months months"; }
    .home-overlap__axis > span:not(.home-overlap__months) { display: none; }

    .home-app__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .home-app__art { justify-content: center; }
    .home-app__sporo { width: 6.5rem; }
    .home-app__art .phone-outline { width: 7rem; }

    .home-faq__q { display: none; }
    .home-faq__answer { margin: var(--space-2) 0 var(--space-3); }
}