/* home.css - the home page only.

   Linked from App.razor with every other page sheet (REDESIGN-PLAN 1.6),
   after 05-theme and 06-motion, so a rule here wins on order. Only what no
   other page composes: the hero bleed grid, the wall's overlap, the serving
   band, the reviews block and the FAQ split. Everything shared is in 05.
   Tokens only, no images, no motion (06). Budget 4,000 bytes brotli. */

/* HERO. Copy first in the DOM at every width. Under 860px one column in the
   container; from 860px a four-column grid whose outer tracks are the page
   margins, so the arch takes the photo column AND the right margin and
   bleeds to the edge without 100vw arithmetic. The chip hangs 2rem under
   the photo from 860px and 05 reserves that room under the arch. */

.home-hero {
    padding-block: var(--space-6) var(--space-8);
}

.home-hero__inner {
    width: var(--container);
    margin-inline: auto;
    display: grid;
    gap: var(--space-6);
}

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

.home-hero h1 {
    font-size: var(--fs-display);
}

/* The display line: the one sentence for somebody who has not decided. */
.home-hero__line {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    color: var(--ink-strong);
    max-width: var(--measure-lead);
}

/* One primary action, the number beside it as text (DESIGN.md law 2, 3). */
.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.home-hero__phone {
    display: inline-block;
    padding-block: var(--space-3);
    font-weight: 600;
    color: var(--teal-text);
}

.home-hero .proof-row {
    margin-top: var(--space-6);
}

@media (max-width: 859.98px) {
    .home-hero .bloom {
        display: none;
    }
}

@media (min-width: 860px) {
    .home-hero {
        padding-block: var(--space-9);
    }

    .home-hero__inner {
        width: auto;
        grid-template-columns: minmax(1.25rem, 1fr) minmax(0, 630px) minmax(0, 570px) minmax(1.25rem, 1fr);
        column-gap: var(--space-7);
        align-items: center;
    }

    .home-hero__copy {
        grid-column: 2;
    }

    .home-hero__figure {
        grid-column: 3 / 5;
    }
}

/* INSURERS. The wrapper paints the sage ground and holds the petal (a bloom
   shows only through the ground of its own parent), so the strip goes
   transparent and keeps the tight padding of a strip, not a chapter. */

.home-insurers {
    background-color: var(--bg-sage);
}

.home-insurers .insurer-strip {
    background-color: transparent;
    padding-block: var(--space-7);
}

@media (min-width: 860px) {
    .home-insurers .insurer-strip {
        padding-block: var(--space-8);
    }
}

/* THE WALL. The band is 2:1 from 860px (04 says 24:9 sitewide) and keeps
   its 118% draw so the half-cut sign stays out of frame. The deep block
   rides 120px up into the photo's bottom-right corner, 32px full width on
   a phone; the copy sits in the right column on solid deep, and the
   scatter in the empty left column, off where the column would be under
   text. The h2 is the one heading louder than the page title. */

.statement {
    position: relative;
}

.statement::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -32px;
    height: 32px;
    background-color: var(--bg-deep);
}

.statement h2 {
    font-size: var(--fs-h1);
    margin-top: var(--space-3);
}

.statement p {
    margin-top: var(--space-4);
    max-width: var(--measure-lead);
}

.statement .bloom {
    display: none;
    left: 3%;
    bottom: 6%;
    width: min(38vw, 30rem);
}

/* Under 860px the 32px lip plus a full section's padding put about 130px of
   deep between the photograph and the eyebrow; 16px of padding makes it 48,
   once the eyebrow, a p, stops taking the paragraph margin below. */
@media (max-width: 859.98px) {
    .statement {
        padding-top: var(--space-4);
    }

    .statement .eyebrow {
        margin-top: 0;
    }
}

@media (min-width: 860px) {
    .wall .photo-band img {
        aspect-ratio: 2 / 1;
    }

    .statement::before {
        left: auto;
        top: -120px;
        width: 56%;
        height: 120px;
    }

    .statement__inner {
        display: grid;
        grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
        column-gap: var(--space-7);
    }

    .statement__copy {
        grid-column: 2;
    }

    .statement .bloom {
        display: block;
    }
}

/* THE PRACTICE. The entrance frame never wider than 720px (the sign's text
   must stay unreadable), cropped to keep the paper flower and the sign; a
   20px petal seated on the top of the pull quote's rule. */

.home-practice .media__figure {
    max-width: 720px;
}

.home-practice .arch img {
    object-position: 45% 50%;
}

.home-practice .pull-quote {
    position: relative;
}

.home-practice .pull-quote::before {
    content: "";
    position: absolute;
    left: -12px;
    top: -12px;
    width: 20px;
    height: 20px;
    border-radius: 100% 0;
    transform: rotate(45deg);
    background-color: var(--sage);
}

/* THE ROOMS. Each tile is a link and 06 scales its picture 2% on hover, so
   the picture box clips at the card radius. The therapy room neither
   scales nor centers: 60% keeps the teepee and leaves the shelf. */

.editorial-grid picture {
    overflow: clip;
    border-radius: var(--radius-card);
}

.editorial-grid img.photo--no-scale {
    object-position: 60% 50%;
}

/* On a phone the private office is one column at 3:2, which shows the wall
   art at the left edge; 4:3 anchored right keeps it out of the box. */
@media (max-width: 859.98px) {
    .editorial-grid img.photo--crop-left {
        aspect-ratio: 4 / 3;
        object-position: 100% 50%;
    }
}

/* SERVING. Copy on the left, the facts column on the right from 860px, the
   closing line under both. Two hour lines, not a table. */

.serving h2 {
    margin-bottom: var(--space-4);
}

.serving__side {
    margin-top: var(--space-6);
}

.serving__hours {
    display: block;
}

.serving__facts + p {
    margin-top: var(--space-4);
}

.serving__closing {
    margin-top: var(--space-6);
}

@media (min-width: 860px) {
    .serving {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: var(--space-7);
        align-items: start;
    }

    .serving__side {
        margin-top: 0;
    }

    .serving__side > :first-child {
        margin-top: 0;
    }

    .serving__closing {
        grid-column: 1 / -1;
    }
}

/* HOW IT WORKS. Air under each step's heading, and the no-booking-form line
   under the timeline. */

.steps--timeline h3 {
    margin-bottom: var(--space-2);
}

.steps-note {
    margin-top: var(--space-6);
    color: var(--ink-muted);
}

/* REVIEWS AND QUESTIONS. Both left aligned: a tile, an eyebrow, the
   heading. The questions split 4/7 from 1120px, the call-and-ask number a
   44px target. */

.home-reviews {
    max-width: var(--measure);
}

.home-reviews .icon-tile,
.home-faq__intro .icon-tile {
    margin-bottom: var(--space-4);
}

.home-reviews h2,
.home-faq__intro h2 {
    margin-bottom: var(--space-4);
}

.home-reviews__action {
    margin-top: var(--space-5);
}

.home-faq__intro {
    margin-bottom: var(--space-6);
}

.home-faq__phone {
    display: inline-block;
    padding-block: var(--space-3);
    font-weight: 600;
}

@media (min-width: 1120px) {
    .home-faq {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: var(--space-7);
        align-items: start;
    }

    .home-faq__intro {
        margin-bottom: 0;
    }

    .home-faq .faq {
        max-width: none;
    }
}

/* THE CLOSING. The hours, quietly, under the lead. */

.home-cta__hours {
    margin-top: var(--space-4);
    font-size: var(--fs-small);
    color: var(--ink-muted);
}