/* page-blocks.css - blocks shared by the service, program and interior pages.

   Linked from App.razor after 05-theme.css (docs/REDESIGN-PLAN.md 1.6), so a
   rule here beats the theme by order. Budget 2,000 bytes brotli, by test.

   .crisis-note   an in-page crisis block on a LIGHT ground. The .crisis class
                  in 03-components.css is the footer one and is drawn for
                  --bg-deep; its translucent white border disappears entirely
                  on --bg. This is the same information, drawn for the page.

   .reviewed-by   the clinical review line at the foot of a service page.

   .crisis-strip  the one-line signpost under the h1 on the three risk pages.

   .page-hero--themed and .town-list are at the foot of the file. */

/* ===========================================================================
   CRISIS NOTE. Placed ABOVE the call to action on the pages where risk is
   relevant (docs/MARKET-RESEARCH.md section 5.4). Quiet, not red, not a
   banner, not dismissible. It is information, not an alarm: someone reading a
   page about depression at 11pm should find these numbers without being
   shouted at.

   Contrast: --ink on --bg-sage is 12.4:1 and the link color --teal-text is
   6.3:1 on the same ground, both comfortably past AA.
   =========================================================================== */

.crisis-note {
    background-color: var(--bg-sage);
    border-left: 4px solid var(--sage);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    max-width: var(--measure);
}

.crisis-note h2 {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    margin-top: 0;
}

.crisis-note p {
    margin-top: var(--space-3);
}

/* The numbers are tap targets here too, for the same reason as in the footer
   block: a bold 19px run of text inside a sentence is not something a thumb
   can reliably hit. DESIGN.md sets a 24px floor. */
.crisis-note a {
    display: inline-block;
    font-weight: 600;
    min-height: 24px;
    /* 4px all round takes 911, the smallest of them, from 22x19 to 30x27,
       past the 24px floor. The horizontal half is cancelled again by the
       negative margin, so the padding buys target size without opening a gap
       in the middle of a sentence that has to stay a sentence. */
    padding: var(--space-1);
    margin-inline: calc(var(--space-1) * -1);
    border-radius: var(--radius);
}

.crisis-note p {
    line-height: 2;
}

/* ===========================================================================
   REVIEWED BY. Who checked this page and when. It is a trust signal for a
   reader and the human-readable half of the lastReviewed value in the page's
   MedicalWebPage node, so the two must always be changed together.
   =========================================================================== */

.reviewed-by {
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

/* ===========================================================================
   CRISIS STRIP. One line, directly under the H1 on the three pages where the
   subject itself carries risk: depression, trauma, sexual abuse and neglect
   (docs/MARKET-RESEARCH.md section 5.4 asks for the contextual placement to be
   at the TOP of those three, and the fuller block was arriving after the
   reviewed-by line).

   Drawn quieter than .crisis-note on purpose. It is a signpost passed on the
   way into the page, not the block a reader stops at, and shouting at somebody
   at the top of a page about depression is the opposite of what this site is
   for. Nothing here is red and nothing flashes.

   Contrast: --ink on --bg-sage is 12.4:1 and --teal-text on the same ground is
   6.3:1, both past AA. The links are 24px tap targets for the same reason as
   in the footer block: a bold run of text inside a sentence is not something a
   thumb can reliably hit.
   =========================================================================== */

.crisis-strip {
    max-width: var(--measure);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-sage);
    border-left: 4px solid var(--sage);
    border-radius: var(--radius);
    font-size: var(--fs-small);
    line-height: 1.9;
}

.crisis-strip a {
    display: inline-block;
    font-weight: 600;
    min-height: 24px;
    /* 4px all round takes 911, the smallest of them, from 22x19 to 30x27,
       past the 24px floor. The horizontal half is cancelled again by the
       negative margin, so the padding buys target size without opening a gap
       in the middle of a sentence that has to stay a sentence. */
    padding: var(--space-1);
    margin-inline: calc(var(--space-1) * -1);
    border-radius: var(--radius);
}

/* ===========================================================================
   PAGE HERO, THEMED (Shared/PageHero.razor). The wide inner is a grid: one
   column, then from 860px the copy beside the arch. The 04 hairline goes,
   the arch's offset block makes the boundary, and the band that follows
   starts closer, its first block dropping its own top margin.
   =========================================================================== */

.page-hero--themed {
    border-bottom: 0;
    padding-bottom: var(--space-6);
}

.page-hero--themed + .section {
    padding-top: var(--space-5);
}

.page-hero--themed + .section > .prose > :first-child {
    margin-top: 0;
}

.page-hero__inner--wide {
    width: var(--container);
    display: grid;
    gap: var(--space-6);
}

.page-hero__copy > * + * {
    margin-top: var(--space-4);
}

.page-hero__copy .page-hero__actions {
    margin-top: var(--space-5);
}

.page-hero__tile {
    display: flex;
}

/* 720 CSS px is the entrance frame's ceiling (the sign in it), so the
   one-column arch stops short of a tablet's full container. */
.page-hero__figure {
    max-width: 720px;
}

/* One column: the petal would sit behind the h1. On the three risk pages
   the tile and the eyebrow give way, so the crisis strip after the h1 is on
   the first screen of a 375x667 phone (findings BC-31.1). */
@media (max-width: 859.98px) {
    .page-hero--themed .bloom,
    .page-hero--has-below .page-hero__tile,
    .page-hero--has-below .eyebrow {
        display: none;
    }

    .page-hero--has-below h1 {
        margin-top: 0;
    }
}

@media (min-width: 860px) {
    .page-hero__inner--wide {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-7);
        align-items: start;
    }
}

/* ===========================================================================
   TOWN LIST (ComingFromTowns). A map pin in place of the disc; the text sits
   in one box so a wrapped line keeps its indent.
   =========================================================================== */

.prose .town-list {
    list-style: none;
    padding-left: 0;
}

.town-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.town-list .icon {
    color: var(--teal);
    margin-top: 0.2em;
}