/* Two Column / Home Intro Block — Smith 2.0 "Layout / 42" */

.home-intro {
    background-color: var(--color-white, #ffffff);
    color: var(--color-blue-zodiac, #0e1b44);
    /* Figma: section padding 112px vertical, page padding 64px horizontal */
    padding: clamp(3.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

/* Optional background variants (ACF `background` field) */
.home-intro.section--cream {
    background-color: var(--color-pampas, #f9f8f5);
    color: var(--color-blue-zodiac, #0e1b44);
}

.home-intro.section--primary {
    background-color: var(--color-surfie-green, #0f7e7c);
    color: var(--color-white, #ffffff);
}

.home-intro .container {
    /* Figma container max-width 1280px, centered */
    max-width: 1280px;
    margin-inline: auto;
    width: 100%;
}

.home-intro__grid {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .home-intro__grid {
        /* Two equal columns, 80px gap from Figma */
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem;
        align-items: start;
    }
}

/* Left column — large serif heading (Figma H3: Hoefler Text Bold 36px) */
.home-intro__col--heading > :first-child {
    margin-top: 0;
}

.home-intro__col--heading h1,
.home-intro__col--heading h2,
.home-intro__col--heading h3,
.home-intro__col--heading h4,
.home-intro__col--heading p {
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: inherit;
}

/* The Figma node renders the heading at H3 (36px). Cap responsively. */
.home-intro__col--heading h1 {
    font-size: 4rem; /* H1 64px */
}

.home-intro__col--heading h2 {
    font-size: 3.25rem; /* H2 52px */
}

/* 32px / 1.25 - the Agentis design export renders this lead-in at 32px, not the 36px
   the Figma H3 node specified. Verified against the deployed export on Home
   (H3 32px / w400 / lh 1.25 / -0.01em) and corroborated on About, where the
   export shows 32px x3 against staging's 32px x2 + 36px x1 - the extra 36 being
   exactly this element. Christine, 2026-08-05: "please follow font sizing of
   Agentis design". See docs/DECISIONS.md D20. */
.home-intro__col--heading h3,
.home-intro__col--heading p {
    font-size: 2rem;
    line-height: 1.25;
}

.home-intro__col--heading h4 {
    font-size: 1.5rem; /* H4 24px */
}

/* Right column — body copy (Figma: Barlow Regular 24px / 1.5, 40px gap) */
.home-intro__col--body {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* 40px between paragraphs */
}

.home-intro__col--body p {
    font-family: var(--font-family-base, "Barlow", -apple-system, sans-serif);
    font-weight: 400;
    /* 22px / 1.55 / -0.015em - the export's display-copy treatment, which is
       NOT the 17px body-copy treatment applied in content-features.css and
       content-list.css. Scout's all-scenario audit of the deployed export found
       these paragraphs render 22px / 1.55 on Home, Services, Expertise, all
       three focus pages, About, Insights and Book Publicity; both Home
       instances were then measured directly at 22px / lh 1.55 / -0.015em.
       Supersedes the Figma 24px / 1.5 frame. See docs/DECISIONS.md D20.
       font-weight stays 400 here - the export uses 300, but see the note in
       content-features.css about <strong> and `bolder`. */
    font-size: 1.375rem;
    line-height: 1.55;
    letter-spacing: -0.015em;
    margin: 0;
    color: inherit;
}

.home-intro__col--body p strong,
.home-intro__col--body p b {
    font-weight: 700;
}

/* Lists, if authored into either column */
.home-intro__col ul,
.home-intro__col ol {
    margin: 0 0 1.5rem;
    padding-left: 2rem;
}

.home-intro__col li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}