/* ============================================================
   PRIMA LIVING — About Us (About.html)
   Page-scoped section styles. Shared chrome lives in styleguide.css.
   Mobile-first. Breakpoints:
     · ≥ 640px   small tablet / large phone
     · ≥ 768px   tablet (iPad portrait)
     · ≥ 1024px  desktop
   ============================================================ */

/* ============================================================
   section.about-hero
   Desktop:  big "About Us" headline (left)  |  sage vertical
             rule  |  tagline (right, body size)
   Tablet:   same two-column treatment kicks in
   Mobile:   stacked — h1 → short sage rule → tagline
   ============================================================ */
section.about-hero {
    background: var(--pl-forest-green);
    color: var(--pl-white-base);
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 3.5rem);
}

    section.about-hero .about-hero__inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        align-items: flex-start;
    }

    section.about-hero .about-hero__title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-display);
        line-height: 1.1;
        color: var(--pl-white-base);
    }

    section.about-hero .about-hero__rule {
        width: 80px;
        height: 4px;
        background: var(--pl-sage-green);
        border: none;
        margin: 0;
    }

    section.about-hero .about-hero__tagline {
        font-family: var(--font-body);
        font-size: var(--fs-body-md);
        font-weight: 500;
        line-height: 1.5;
        color: var(--pl-white-base);
        max-width: 60ch;
    }

/* ============================================================
   section.about-who
   Desktop:  two columns — heading + body on the left, photo
             spanning both rows on the right.
   Mobile:   stacked in Figma order — heading, photo, body.
   ============================================================ */
section.about-who {
    padding-block: var(--section-y);
}

    section.about-who .about-who__inner {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "media"
            "body";
        gap: var(--space-5);
    }

    section.about-who .about-who__heading {
        grid-area: heading;
        margin-bottom: 0;
    }

    section.about-who .about-who__media {
        grid-area: media;
    }

    section.about-who .about-who__body {
        grid-area: body;
    }

    section.about-who .about-who__media img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-photo);
    }

/* ============================================================
   section.about-guides
   Mobile:   1-column stack of cards
   Tablet:   2-column grid
   Desktop:  3-column grid (Figma is 3×2 = 6 items)
   ============================================================ */
section.about-guides {
    padding-block: var(--section-y);
    background: var(--pl-fill);
}

    section.about-guides .about-guides__list {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: 1fr;
    }

    section.about-guides .about-guides__item {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-5);
        background: var(--pl-white-base);
        border-radius: var(--radius-sm);
    }

    section.about-guides .about-guides__title {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: var(--fs-h3);
        color: var(--pl-forest-green-text);
        line-height: 1.3;
    }

    section.about-guides .about-guides__text {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: var(--fs-body-md);
        line-height: 1.6;
        color: var(--pl-dark);
    }

/* ============================================================
   section.about-testimonials
   Forest-green section with light testimonial cards.
   Mobile:   1-up + dots
   Tablet:   2-up + dots
   Desktop:  3-up + dots
   ============================================================ */
section.about-testimonials {
    padding-block: var(--section-y);
    background: var(--pl-forest-green);
    color: var(--pl-white-base);
}

    section.about-testimonials .about-testimonials__heading {
        color: var(--pl-white-base);
    }

    section.about-testimonials .about-testimonials__list {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    section.about-testimonials .about-testimonials__dots {
        display: flex;
        justify-content: center;
        margin-top: var(--space-6);
        color: var(--pl-white-base);
    }

/* ============================================================
   section.about-team
   Light-fill section with centred heading + intro, then a
   responsive grid of team cards.
   Mobile:   2 columns
   Tablet:   3 columns
   Desktop:  5 columns (Figma)
   ============================================================ */
section.about-team {
    padding-block: var(--section-y);
    background: var(--pl-fill);
}

    section.about-team .about-team__lede {
        text-align: center;
        margin-inline: auto;
        max-width: 60ch;
        margin-top: var(--space-4);
        margin-bottom: var(--space-8);
        color: var(--pl-dark);
    }

    section.about-team .about-team__grid {
        /* display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr); */

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

        section.about-team .about-team__grid .team-card {
            width: 100%;
            max-width: 240px;
        }

/* ============================================================
   section.about-primacorp  (.section--feature variant)
   Dark, full-bleed photo background w/ overlay.
   Mobile:   stacked — title, body, link, then stat cards stacked.
   Tablet:   stacked but stat cards become 3-up row.
   Desktop:  title row (heading left, partner logo right),
             then content row (body+link left, stat cards right).
   ============================================================ */
section.about-primacorp {
    position: relative;
    isolation: isolate;
    padding-block: var(--section-y);
    color: var(--pl-white-base);
    background: var(--pl-dark);
}

    section.about-primacorp .about-primacorp__bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        overflow: hidden;
    }

        section.about-primacorp .about-primacorp__bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        section.about-primacorp .about-primacorp__bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.78);
        }

    section.about-primacorp .about-primacorp__inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    section.about-primacorp .about-primacorp__title-row {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        align-items: flex-start;
    }

    section.about-primacorp .about-primacorp__title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-h2);
        line-height: 1.2;
        color: var(--pl-white-base);
    }

        section.about-primacorp .about-primacorp__title span {
            color: var(--pl-sage-green);
            display: block;
        }

    section.about-primacorp .about-primacorp__rule {
        width: 80px;
        height: 4px;
        background: var(--pl-sage-green);
        border: none;
        margin: 0;
    }

    section.about-primacorp .about-primacorp__logo {
        width: clamp(180px, 22vw, 320px);
        height: auto;
        align-self: flex-start;
    }

    section.about-primacorp .about-primacorp__content {
        display: grid;
        gap: var(--space-6);
        grid-template-columns: 1fr;
        align-items: start;
    }

    section.about-primacorp .about-primacorp__copy p {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: var(--fs-body-md);
        line-height: 1.5;
        color: var(--pl-white-base);
    }

    section.about-primacorp .about-primacorp__link {
        display: inline-flex;
        margin-top: var(--space-4);
        color: var(--pl-white-base);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    section.about-primacorp .about-primacorp__cards {
        display: grid;
        gap: var(--space-3);
        grid-template-columns: 1fr;
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---------- Small tablet (≥ 640px) ---------- */
@media (min-width: 640px) {
    section.about-guides .about-guides__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }

    section.about-testimonials .about-testimonials__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}

/* ---------- Tablet (≥ 768px) ---------- */
@media (min-width: 768px) {
    /* Hero shifts to its two-column desktop-ish layout earlier so the
     long tagline doesn't visually crowd the headline on iPad portrait. */
    section.about-hero .about-hero__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-8);
    }

    section.about-hero .about-hero__rule {
        width: 4px;
        height: 80px;
        align-self: stretch;
        flex: none;
    }

    section.about-hero .about-hero__title {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    section.about-hero .about-hero__tagline {
        flex: 1 1 0;
        font-size: 1.125rem;
        max-width: 60ch;
    }

    /* Guides becomes 3-up so the 6 items sit in a clean 3×2 grid */
    section.about-guides .about-guides__list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    /* Team becomes 3-up — 5 rows of 3 (last row shows 2) */
    section.about-team .about-team__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    /* Primacorp: title row becomes horizontal, stat cards stay stacked
     until ≥ 1024 because they get cramped at 768. */
    section.about-primacorp .about-primacorp__title-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    section.about-primacorp .about-primacorp__cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Desktop (≥ 1024px) ---------- */
@media (min-width: 1024px) {
    /* Who: two columns, image on the right spans both content rows */
    section.about-who .about-who__inner {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "heading media"
            "body    media";
        column-gap: var(--space-10);
        row-gap: var(--space-5);
        align-items: start;
    }

    section.about-who .about-who__media img {
        aspect-ratio: 3 / 2;
    }

    /* Testimonials → 3-up */
    section.about-testimonials .about-testimonials__list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }

    /* Team → 5-up like Figma */
    section.about-team .about-team__grid {
        /* grid-template-columns: repeat(5, 1fr);
     */
        grid-template-columns: repeat(auto-fit, minmax(0, 240px));
        gap: var(--space-5);
    }

    /* Primacorp: body + cards live side-by-side */
    section.about-primacorp .about-primacorp__content {
        grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
        column-gap: var(--space-8);
    }
}

/* ---------- Large desktop polish (≥ 1280px) ---------- */
@media (min-width: 1280px) {
    section.about-hero .about-hero__inner {
        gap: var(--space-10);
    }

    section.about-primacorp .about-primacorp__title {
        font-size: 3rem;
    }
}