/* ==========================================================================
   DISTRIBUTION.CSS
   Distribution + Logistics page only — Lisa short-banner hero + network info
   ========================================================================== */

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

/*
 * Intro — shared 72rem measure + Food-style vertical rhythm.
 * Bottom pad = shared footer gap (matches white space below network → footer).
 */
.page-distribution .slam-section.slam-dist-section--top {
    padding-top: clamp(2.75rem, 4.8vw, 4rem);
    padding-bottom: var(--slam-footer-gap);
    background: var(--color-white);
}

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

/* Sole source of space after intro copy → infographic */
.page-distribution .slam-dist-section--top .slam-intro-row {
    margin-bottom: 0;
}

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


/* ==========================================================================
   HERO — Lisa short banner (2667×278). Height via shared .page-service rule.
   Tomatoes left → red field right.
   ========================================================================== */

.page-distribution .slam-ihero-img--dist {
    object-position: left center;
}


/* ==========================================================================
   NETWORK INFOGRAPHIC — Lisa short banner (2667×278) + HTML copy in yellow box
   Yellow fill (measured on source 2667×278): x 1750–2499, y 36–240
     → left 65.62%, top 12.95%, width 28.12%, height 73.74%.
   “11 / DISTRIBUTION CENTERS NATIONWIDE” + map are baked into the JPG.
   Do NOT recreate those in HTML. Keep paragraph inside yellow at all widths.
   Do NOT paint a second yellow background — the JPG already has it.
   ========================================================================== */

.page-distribution .slam-dist-network {
    position: relative;
    width: 100%;
    margin: 0;
    /* Below-network gap comes from shared .slam-footer { margin-top } */
    padding: 0;
    overflow: visible;
    line-height: 0;
    /* Critical: never reintroduce the old stacked yellow band */
    background: none;
    background-color: transparent;

    container-type: inline-size;
    container-name: dist-network;
}

.page-distribution .slam-dist-network__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

/* Full-bleed, same rendered height as the Food egg photo (4968×1062). */
.page-distribution .slam-dist-truck {
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    clear: both;
}

.page-distribution .slam-dist-truck img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    aspect-ratio: 4968 / 1062;
    object-fit: cover;
    object-position: center;
}

/*
 * Exactly the blank yellow rectangle in the JPG (percentage of image).
 * Always absolute over the image — never in normal flow below it.
 */
.page-distribution .slam-dist-network__copy {
    position: absolute;
    left: 65.62%;
    top: 12.95%;
    z-index: 2;

    box-sizing: border-box;
    width: 28.12%;
    height: 73.74%;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
    line-height: normal;
    background: transparent;

    container-type: size;
    container-name: dist-network-yellow;
}

.page-distribution .slam-dist-network__copy p {
    /*
     * Same pixel padding as the Food yellow callout (Food box is 31.91%
     * wide, this box is 28.12%; both share the same banner height).
     */
    position: absolute;
    left: 1.42%;
    right: 1.42%;
    top: 4%;
    bottom: 4%;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);
    text-align: center;

    font-family: "Aptos Display", "Aptos", var(--font-heading);
    /*
     * Same formula as Food (min(5cqw, 14.2cqh) on the wider box).
     * Height cap is 12.5cqh so the paragraph stays inside this narrower
     * yellow box — Food's 14.2cqh wraps an extra line here and spills out.
     */
    font-size: calc(min(5.67cqw, 12.5cqh) * var(--callout-type-scale));
    font-weight: var(--weight-bold);
    line-height: 1.08;
    letter-spacing: 0.005em;
}

/* Keep overlay on the baked-in yellow; type and inset stay matched to Food */
@media (max-width: 1199px) {
    .page-distribution .slam-dist-network__copy {
        position: absolute;
        left: 65.62%;
        top: 12.95%;
        width: 28.12%;
        height: 73.74%;
        background: transparent;
    }
}

@media (max-width: 767px) {
    .page-distribution .slam-dist-network__copy {
        position: absolute;
        left: 65.62%;
        top: 12.95%;
        width: 28.12%;
        height: 73.74%;
        background: transparent;
    }
}

@media (max-width: 768px) {
    .page-distribution .slam-section.slam-dist-section--top {
        padding-top: clamp(2rem, 6vw, 2.75rem);
        padding-bottom: var(--slam-footer-gap);
    }

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