/* ====================================================
   IseMoody – About Us Mobile Responsiveness
   Loaded globally; every rule is scoped to .about-page
   (a div that only exists inside page-about.php).
   Desktop layout is completely untouched.
   ==================================================== */

/* ── Body-level overflow fix ──────────────────────────
   body:has(.about-page) fires only when the about-page
   div is present — i.e. exclusively on the About Us page.
   This stops mobile browsers from zooming to fit overflow.
   ─────────────────────────────────────────────────────── */
body:has(.about-page) {
    overflow-x: hidden;
}

/* Belt-and-suspenders clip at the wrapper level */
.about-page {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Primary overflow source: negative side-margins on the
   team carousel scroll-wrap make it 32px wider than its
   container, inflating the document scroll width. */
.about-page .about-team--carousel .about-team__scroll-wrap {
    margin-left: 0;
    margin-right: 0;
}

/* ================================================================
   MOBILE — max-width: 768px
   All layout, spacing, and typography adaptations below.
   ================================================================ */
@media (max-width: 768px) {

    /* ── Story / Values / Craftsmanship sections ─────────────────── */

    /* Cut section vertical padding from ~90px to 44px */
    .about-page .about-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
    .about-page .about-section:first-of-type {
        padding-top: 32px !important;
    }

    /* style.css forces text-align:center at 767px — restore left */
    .about-page .about-section__inner {
        text-align: left !important;
    }

    /* 4/3 ratio is very tall on a 375px screen — switch to 3/2
       (craftsmanship keeps its own 4/3 override below) */
    .about-page .about-section__image:not(.about-craftsmanship__image) {
        aspect-ratio: 3/2;
    }

    /* Body text: slightly tighter for narrow columns */
    .about-page .about-section__text {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    /* ── Our Values: image before text on mobile ─────────────────── */
    .about-page .about-values-block__inner {
        display: flex !important;
        flex-direction: column !important;
    }

    .about-page .about-values-block__image {
        order: -1 !important;
    }

    /* ── Craftsmanship carousel ──────────────────────────────────── */

    /* Keep section image wrapper at 4/3 to match desktop carousel proportions */
    .about-page .about-craftsmanship__image {
        aspect-ratio: 4 / 3 !important;
    }

    .about-page .about-craftsmanship__gallery-main {
        border-radius: 16px;
        height: 100%;
    }

    .about-page .about-craftsmanship__gallery-track {
        height: 100%;
    }

    /* Each slide fills the scroll container exactly, matching desktop 4/3 */
    .about-page .about-craftsmanship__slide {
        flex: 0 0 100%;
        width: 100%;
        aspect-ratio: 4 / 3;
        height: 100%;
    }

    .about-page .about-craftsmanship__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* ── Team carousel ───────────────────────────────────────────── */

    /* Cut team section top padding from ~100px to 44px */
    .about-page .about-team {
        padding-top: 44px !important;
        padding-bottom: 24px !important;
    }

    .about-page .about-team__heading {
        font-size: 1.35rem;
        margin-bottom: 20px;
    }

    /* style.css sets min-width:260px at 767px — shows only 1 card.
       Override to 160px so ~2 cards are visible at 375px. */
    .about-page .about-team--carousel .about-team__member {
        width: 160px !important;
        min-width: 160px !important;
    }

    /* Remove the 56px horizontal padding on the track */
    .about-page .about-team--carousel .about-team__track {
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 16px !important;
    }

    /* Avatars: 140px → 110px to fit narrower cards */
    .about-page .about-team__avatar--circle {
        width: 110px !important;
        height: 110px !important;
    }

    .about-page .about-team__name {
        margin-top: 10px;
    }

    /* ── Regional teams ──────────────────────────────────────────── */

    .about-page .about-regional-teams {
        padding-bottom: 44px !important;
    }

    .about-page .about-regional-teams__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .about-page .about-regional-teams__column {
        padding: 1.5rem 1.25rem !important;
    }

    /* ── Newsletter (in footer, outside .about-page) ─────────────
       body:has(.about-page) scopes these to the About Us page only. */

    body:has(.about-page) .newsletter-strip {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body:has(.about-page) .newsletter-strip__inner {
        padding: 2rem 1.25rem !important;
    }

    body:has(.about-page) .newsletter-strip__title {
        font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
    }

    body:has(.about-page) .newsletter-form {
        width: 100%;
    }

    body:has(.about-page) .newsletter-form__field,
    body:has(.about-page) .newsletter-form input[type="email"],
    body:has(.about-page) .newsletter-form input[type="text"] {
        width: 100%;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    body:has(.about-page) .newsletter-form button,
    body:has(.about-page) .newsletter-form__submit {
        width: 100%;
    }

    /* ── Overflow safety net ─────────────────────────────────────── */

    .about-page img {
        max-width: 100%;
        height: auto;
    }

    .about-page .about-section__inner,
    .about-page .about-map-wrapper,
    .about-page .contact-journey--about {
        max-width: 100%;
    }
}