/* ==========================================================================
   KnowTheSpore pages/profile.css: the mushroom profile (/mushrooms/{slug}/).
   Loaded through $pageCss = ['profile'] after tokens.css, base.css and
   blocks.css. Every value comes from a tokens.css custom property; breakpoint
   numbers appear only in the marked section at the end, mirroring base.css.
   Template: templates/mushroom-profile.php.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Emergency strip (poisonous profiles only): base.css band--emergency with
      the octagon mark, one sentence and the call button, as on safety pages
   -------------------------------------------------------------------------- */
.profile-alert .safety-emg-text {
    flex: 1 1 auto;
    min-width: min(20rem, 100%);
}


/* --------------------------------------------------------------------------
   1. Title band: breadcrumb, H1, taxon, byline, safety banner, lead
   -------------------------------------------------------------------------- */
.profile-title h1 { margin-bottom: var(--space-2); }
.profile-title__taxon {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-lead);
    line-height: var(--lh-title);
}
.profile-title .byline { margin-bottom: var(--space-2); }
.profile-title__date {
    margin: 0 0 var(--space-5);
    font-size: var(--fs-caption);
}
.profile-title .safety-banner { margin-bottom: var(--space-5); }
.profile-title__lead p { margin: 0 0 var(--space-3); }
.profile-title__lead p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   2. Field-marks band: picture (7) beside the one field-mark list (5)
   -------------------------------------------------------------------------- */
.profile-marks__layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--space-5);
}
.profile-marks__layout--single { grid-template-columns: minmax(0, 1fr); }

/* The field-mark list runs longer than the picture, so the picture stays in view beside it. */
.profile-hero {
    position: sticky;
    top: var(--space-7);
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--c-surface-sunk);
}
/* The whole identification photo at its natural aspect ratio, never cropped. */
.profile-hero img {
    display: block;
    width: 100%;
    height: auto;
}

.profile-marks__panel {
    padding: var(--space-5);
    background: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    color: var(--c-ink);
}
.profile-marks__panel h2 { margin-bottom: var(--space-2); }

/* The panel is narrow, so each fact stacks its label above its value. */
.profile-marks__panel .facts { grid-template-columns: minmax(0, 1fr); }
.profile-marks__panel .facts dt { padding-bottom: 0; }
.profile-marks__panel .facts dd {
    padding-top: var(--space-1);
    border-top: 0;
}

.profile-marks__spore {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.profile-marks__panel .month-strip { margin-top: var(--space-3); }


/* --------------------------------------------------------------------------
   3. Dangerous lookalikes band
   -------------------------------------------------------------------------- */
.lookalike-guidance h2 { margin-bottom: var(--space-4); }
.lookalike-guidance > .prose { margin-bottom: var(--space-5); }
.lookalike-guidance .lookalike-guidance__warning { margin: var(--space-5) 0 0; }

.lookalike-list {
    display: grid;
    gap: var(--space-4);
}

.lookalike-card {
    --_edge: var(--ed-inedible);
    align-items: stretch;
    border-top: var(--border-edge) solid var(--_edge);
}
.lookalike-card--choice    { --_edge: var(--ed-choice); }
.lookalike-card--edible    { --_edge: var(--ed-edible); }
.lookalike-card--caution   { --_edge: var(--ed-caution); }
.lookalike-card--medicinal { --_edge: var(--ed-medicinal); }
.lookalike-card--poisonous { --_edge: var(--ed-poisonous); }

.lookalike-card .card__body { justify-content: center; }
.lookalike-card .ed-tag { margin-bottom: var(--space-1); }
.lookalike-card h3 a { color: var(--_heading); text-decoration: none; }
.lookalike-card h3 a:hover { text-decoration: underline; }
.lookalike-card .t-taxon {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-tight);
}
.lookalike-card__text {
    margin: var(--space-2) 0;
    font-size: var(--fs-small);
    line-height: var(--lh-title);
}
.lookalike-card .link-arrow { font-size: var(--fs-small); }


/* --------------------------------------------------------------------------
   4. Profile sections
   -------------------------------------------------------------------------- */
.profile-body .article-body > h2,
.profile-safety-details > h2 { margin-top: var(--space-7); }
.profile-body .article-body > h2:first-child { margin-top: 0; }
.profile-body .article-body > h2 + .prose { margin-top: var(--space-3); }


/* --------------------------------------------------------------------------
   5. Sources, the one cross-link block, related species, closing step
   -------------------------------------------------------------------------- */
.profile-reading .sources-section:first-child { margin-top: 0; }
.profile-reading__links { margin-top: var(--space-7); }
.profile-reading__links:first-child { margin-top: 0; }
.profile-reading__links h2 { margin-bottom: var(--space-4); }
.profile-reading__group + .profile-reading__group { margin-top: var(--space-4); }
.profile-reading__group .t-label { margin-bottom: var(--space-2); }
.profile-reading__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-next__cta {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--c-surface);
    border: var(--border-hairline) solid var(--c-line);
    border-radius: var(--radius-md);
    color: var(--c-ink);
}
.profile-next__cta:first-child { margin-top: 0; }
.profile-next__cta .t-label { margin-bottom: var(--space-1); }
.profile-next__cta h2 { margin-bottom: var(--space-2); }
.profile-next__cta p { margin-bottom: var(--space-4); }


/* ==========================================================================
   6. BREAKPOINTS
   The only place breakpoint numbers appear in this sheet. They mirror the
   breakpoint tokens documented in tokens.css: phone (max-width: 767px).
   ========================================================================== */

/* phone */
@media (max-width: 767px) {
    .profile-marks__layout { grid-template-columns: minmax(0, 1fr); }
    .profile-marks__panel { padding: var(--space-4); }
}