/* ==========================================================================
   DISTRIBUTION.CSS
   Distribution + Logistics page only — layout matched to Distribution PDF
   ========================================================================== */

.page-distribution .slam-main {
    padding-bottom: 0;
    overflow-x: clip;
}

/*
 * Intro — shared 72rem measure + Food/Leadership-style vertical rhythm.
 * White band only; no ghosted architecture background.
 */
.page-distribution .slam-section.slam-dist-section--top {
    padding-top: clamp(2.75rem, 4.8vw, 4rem);
    padding-bottom: clamp(5.5rem, 10vw, 8rem);
    background: var(--color-white);
}

.page-distribution .slam-dist-section--top .slam-section-heading {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Intro row uses shared .slam-intro-row */


/* ==========================================================================
   11 DISTRIBUTION CENTERS — composed artboard + right copy overlay (desktop)
   Art asset (2500×1038) already paints red pattern, yellow band, 11, title, map.
   ≤900px: stacked HTML band / map / yellow copy (see mobile rules below).
   ========================================================================== */

.page-distribution .slam-dist-network {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--color-secondary);
}

.page-distribution .slam-dist-network__desktop {
    position: relative;
    width: 100%;
}

.page-distribution .slam-dist-network__art {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
    pointer-events: none;
    user-select: none;
}

/* Mobile stack hidden on desktop */
.page-distribution .slam-dist-network__stack {
    display: none;
}

/*
 * Right-side copy — yellow column only (desktop overlay).
 * Narrow max-width drives target-like wrapping; block sits in the upper-
 * middle of the yellow band (PDF alignment), shifted right of the map.
 */
.page-distribution .slam-dist-network__copy--overlay {
    position: absolute;
    z-index: 2;
    /* Farther right of the map; leave a yellow gutter on the outer edge.
       ~18% wider than prior 22% / 18.25rem so lines wrap closer to the PDF. */
    left: 69.5%;
    width: 26%;
    max-width: 21.5rem;
    /* Higher in the yellow panel (~40–100% of artboard); was 70% */
    top: 65%;
    bottom: auto;
    transform: translateY(-50%);

    box-sizing: border-box;
    margin: 0;
    padding: 0;

    color: var(--color-primary);
    font-family: var(--font-heading);
    /* ~12% larger than prior max 1.375rem / 22px → 1.55rem / 24.8px */
    font-size: clamp(1rem, 1.65vw, 1.55rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.28;
    text-align: center;
}

.page-distribution .slam-footer {
    margin-top: 0;
}

/* Tablet (still desktop composition): slightly tighten overlay copy */
@media (max-width: 1024px) and (min-width: 901px) {
    .page-distribution .slam-dist-network__copy--overlay {
        left: 68%;
        width: 24%;
        max-width: 15.5rem;
        font-size: clamp(0.8125rem, 1.55vw, 1.2rem);
        line-height: 1.28;
    }
}

/* --------------------------------------------------------------------------
   STACKED LAYOUT — mobile / narrow tablet (≤900px)
   Order: compact red band (11 + title) → yellow map → yellow copy
   Desktop artboard remains unchanged above this breakpoint.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .page-distribution .slam-section.slam-dist-section--top {
        padding-top: clamp(2rem, 6vw, 2.75rem);
        padding-bottom: clamp(3.25rem, 10vw, 4.5rem);
    }

    .page-distribution .slam-dist-section--top .slam-section-heading {
        margin-bottom: var(--space-2);
    }

    /* Hide entire desktop artboard (baked-in 11, title, red/yellow split, overlay) */
    .page-distribution .slam-dist-network__desktop {
        display: none !important;
    }

    .page-distribution .slam-dist-network__stack {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow-x: clip;
        background-color: var(--color-secondary);
    }

    /* 1. Compact red patterned header: 11 + title only */
    .page-distribution .slam-dist-network__band {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;

        box-sizing: border-box;
        width: 100%;
        padding: clamp(0.7rem, 2.4vw, 0.95rem) clamp(0.85rem, 4vw, 1.25rem)
            clamp(0.65rem, 2.2vw, 0.9rem);

        background-color: var(--color-primary);
        background-image: url("../assets/services/pattern-red-digital-clean.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .page-distribution .slam-dist-network__eleven {
        margin: 0;
        color: var(--color-white);
        font-family: var(--font-heading);
        font-size: clamp(2.5rem, 12vw, 3.5rem);
        font-weight: var(--weight-extrabold);
        line-height: 0.85;
        letter-spacing: -0.02em;
        text-align: center;
        -webkit-text-stroke: 0.045em var(--color-secondary);
        paint-order: stroke fill;
    }

    .page-distribution .slam-dist-network__title {
        margin: 0;
        max-width: 12.5rem;

        color: var(--color-white);
        font-family: var(--font-heading);
        font-size: clamp(1.05rem, 4.6vw, 1.35rem);
        font-weight: var(--weight-extrabold);
        line-height: 1.12;
        letter-spacing: 0.02em;
        text-align: center;
        text-transform: uppercase;
        white-space: normal;
    }

    /* 2. Map only on solid yellow — no desktop fragments */
    .page-distribution .slam-dist-network__map {
        box-sizing: border-box;
        width: 100%;
        padding: clamp(0.85rem, 3vw, 1.15rem) 0 clamp(0.35rem, 1.5vw, 0.6rem);
        background-color: var(--color-secondary);
    }

    .page-distribution .slam-dist-network__map-img {
        display: block;
        width: 92%;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
        object-fit: contain;
    }

    /* 3. Compact yellow copy */
    .page-distribution .slam-dist-network__copy--stack {
        position: static;
        left: auto;
        top: auto;
        transform: none;

        box-sizing: border-box;
        width: min(calc(100% - 2 * var(--layout-gutter)), 36rem);
        max-width: 36rem;
        margin: 0 auto;
        padding: clamp(0.35rem, 1.5vw, 0.55rem) clamp(0.75rem, 3vw, 1.1rem)
            clamp(1.1rem, 4vw, 1.5rem);

        color: var(--color-primary);
        font-family: var(--font-heading);
        font-size: clamp(0.875rem, 3.2vw, 1.0625rem);
        font-weight: var(--weight-extrabold);
        line-height: 1.35;
        text-align: center;
        background-color: transparent;
    }
}

@media (max-width: 480px) {
    .page-distribution .slam-dist-network__band {
        gap: 0.15rem;
        padding: 0.65rem 0.85rem 0.6rem;
    }

    .page-distribution .slam-dist-network__eleven {
        font-size: clamp(2.25rem, 14vw, 3rem);
    }

    .page-distribution .slam-dist-network__title {
        max-width: 11.5rem;
        font-size: clamp(1rem, 4.8vw, 1.2rem);
    }

    .page-distribution .slam-dist-network__map {
        padding-block: 0.75rem 0.25rem;
    }

    .page-distribution .slam-dist-network__map-img {
        width: 94%;
    }

    .page-distribution .slam-dist-network__copy--stack {
        font-size: clamp(0.8125rem, 3.6vw, 0.9375rem);
        line-height: 1.36;
        padding: 0.3rem 0.75rem 1.15rem;
    }
}