/* ==========================================================================
   FOOD-PACKAGING.CSS
   Food + Packaging page only — layout matched to SLAM_Website Layout PDF page 5
   ========================================================================== */

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

/*
 * Intro — match Lisa PDF: generous vertical space, yellow arrow + left-aligned copy.
 * Overrides compressed --interior-section-padding for this band only.
 * Bottom pad = shared footer gap (matches white space below eggs → footer).
 */
.page-food-packaging .slam-section.slam-food-section--top {
    padding-top: clamp(2.75rem, 4.8vw, 4rem);
    padding-bottom: var(--slam-footer-gap);
}

/* Sole source of space after intro copy → eggs (avoid stacking with section pad) */
.page-food-packaging .slam-food-section--top .slam-intro-row {
    margin-bottom: 0;
}

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

/*
 * Preferred soft break on phone widths only — sizing/wrap come from titles.css.
 */
.page-food-packaging .slam-food-section-heading__br {
    display: none;
}

@media (max-width: 480px) {
    .page-food-packaging .slam-food-section-heading__br {
        display: block;
    }
}

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

.page-food-packaging .slam-food-media-row {
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-bottom: 0;
}

.page-food-packaging .slam-food-plate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-top: clamp(1.25rem, 3.5vw, 2.5rem);
}

.page-food-packaging .slam-food-plate-row__img {
    display: block;
    width: 100%;
    aspect-ratio: 2.15 / 1;
    object-fit: cover;
    object-position: 54% 76%;
    border-radius: 0;
}

.page-food-packaging .slam-food-plate-row__text {
    padding-right: var(--layout-gutter);
}

.page-food-packaging .slam-food-media-row--centered {
    align-items: center;
}

/* Packaging row — aligned to virtual 4-col grid (same proportions as equipment gallery) */
.page-food-packaging .slam-gallery-aligned-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 100%;
    margin-bottom: 0;
    align-items: start;
}

.page-food-packaging .slam-food-packaging-row.slam-gallery-aligned-row {
    align-items: center;
}

.page-food-packaging .slam-gallery-aligned-row .slam-outline-box {
    grid-column: 1 / 3;
    box-sizing: border-box;
    margin-left: 0;
    width: auto;
    max-width: none;
    padding-left: 25%;
    padding-right: clamp(0.75rem, 2vw, 1.5rem);
}

.page-food-packaging .slam-gallery-aligned-row__media {
    grid-column: 3 / 5;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding-left: 25%;
    padding-right: 25%;
}

.page-food-packaging .slam-gallery-aligned-row .slam-food-media-row__img--menu {
    display: block;
    width: 100%;
    max-width: min(100%, 39.375rem);
    height: auto;
    object-fit: contain;
    object-position: center;
    margin-inline: 0;
}

@media (min-width: 769px) {
    .page-food-packaging .slam-food-packaging-row .slam-block-title {
        white-space: nowrap;
    }
}

.page-food-packaging .slam-food-media-row__img {
    display: block;
    border-radius: 2px;
}


/* Hero height/fit: shared .page-service .slam-ihero in interior.css
   (Lisa short-banner aspect 2667/278 — matches Equipment reference). */

/* Food hero — Lisa asset is left-weighted breakfast; keep food in frame */
.page-food-packaging .slam-ihero-img--food {
    object-position: left center;
}

/* ==========================================================================
   EGG INFOGRAPHIC — Lisa short banner (2667×278) + HTML copy in yellow box
   Yellow fill (measured on source): x 160–1010, y 42–246
     → left 6.00%, top 15.11%, width 31.91%, height 73.74%.
   “14+ MILLION / EGGS PURCHASED ANNUALLY” is baked into the red field.
   Do NOT recreate the statistic in HTML.
   ========================================================================== */

.page-food-packaging .slam-food-eggs {
    position: relative;
    width: 100%;
    margin: 0;
    /* Below-eggs gap comes from shared .slam-footer { margin-top } */
    padding: 0;
    overflow: visible;
    line-height: 0;

    /* Size container = rendered infographic width */
    container-type: inline-size;
    container-name: food-eggs;
}

/* Full-bleed banner — natural aspect, no crop/scale wrapper */
.page-food-packaging .slam-food-eggs__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

/* High-res source (4968×1062), shown at its natural size so it stays sharp.
   Framing matches the reference screenshot: carton tips, about two egg rows. */
.page-food-packaging .slam-food-eggs-photo {
    position: relative;
    z-index: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    clear: both;
}

.page-food-packaging .slam-food-eggs-photo img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}

/* Exactly the blank yellow rectangle in the JPG (percentage of image) */
.page-food-packaging .slam-food-eggs__copy {
    position: absolute;
    left: 6%;
    top: 15.11%;
    z-index: 2;

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

    /* Height+width container so type can fit the padded safe area */
    container-type: size;
    container-name: food-eggs-yellow;
}

.page-food-packaging .slam-food-eggs__copy p {
    /*
     * Inset is % of the yellow-box overlay (this containing block).
     * Keep clear of all yellow edges; center in the usable area.
     */
    position: absolute;
    /* Tighter inset so larger type still stays inside the yellow box */
    left: 1.25%;
    right: 1.25%;
    top: 4%;
    bottom: 4%;
    width: auto;
    max-width: none;
    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);
    /* Larger than the previous callout, still scaled to the yellow box */
    font-size: calc(min(5cqw, 14.2cqh) * var(--callout-type-scale));
    font-weight: var(--weight-bold);
    line-height: 1.08;
    letter-spacing: 0.005em;
}

/* No breakpoint font floors — rem minimums overflow the shrinking yellow box */


/* Stack plate row when image height would fall below the text block */
@media (max-width: 1120px) {
    .page-food-packaging .slam-food-plate-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .page-food-packaging .slam-food-plate-row__text {
        padding-inline: var(--layout-gutter);
    }
}

@media (max-width: 768px) {
    .page-food-packaging .slam-section.slam-food-section--top {
        padding-top: clamp(2rem, 6vw, 2.75rem);
        /* Keep eggs band gap balanced (do not re-inflate bottom pad) */
        padding-bottom: var(--slam-footer-gap);
    }

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

    .page-food-packaging .slam-food-plate-row {
        margin-top: clamp(1rem, 3vw, 1.5rem);
    }

    .page-food-packaging .slam-food-plate-row__img {
        aspect-ratio: 2 / 1;
    }

    .page-food-packaging .slam-food-media-row {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .page-food-packaging .slam-gallery-aligned-row .slam-outline-box,
    .page-food-packaging .slam-gallery-aligned-row__media {
        grid-column: 1;
        padding-inline: var(--layout-gutter);
    }

    .page-food-packaging .slam-gallery-aligned-row__media {
        justify-content: center;
    }

    .page-food-packaging .slam-food-media-row__img--menu {
        justify-self: center;
        margin-inline: auto;
        max-width: min(100%, 35.625rem);
    }

    .page-food-packaging .slam-block-title {
        font-size: clamp(1rem, 4.2vw, 1.125rem);
    }

    .page-food-packaging .slam-block-body,
    .page-food-packaging .slam-bullets li {
        font-size: clamp(0.9375rem, 3.6vw, 1.125rem);
    }
}