/* ==========================================================================
   data-centers — responsive layer
   The page ships with no @media queries and sizes everything with inline
   style="" attributes, which is why the overrides below need !important.
   Breakpoints follow BuildAssets/postcss/settings.sizes.css
   ($ss-media--medium 899px, $ss-media--small 599px).
   ========================================================================== */

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

/* iframe carries width="560" — the sideways-scroll culprit */
.dc-page iframe {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

@supports not (aspect-ratio: 16 / 9) {
    .dc-page iframe {
        height: 56.25vw;
        max-height: 315px;
    }
}

/* max-height: 975px clips the category grid once cards stack */
.dc-page .dc-categories-wrap {
    max-height: none !important;
}

/* The hero's two columns are width:60% / width:40% with padding-right:10px on
   top, so without border-box they add up to 100% + 20px and the right-floated
   image cannot share the line — it drops below the copy and leaves a column of
   dead space beside it. No-op if the site's base CSS already sets border-box
   globally. */
.dc-page .dc-hero > div {
    box-sizing: border-box;
}

/* Hero CTA buttons.
   The pair used to be two float:left/width:50% divs holding display:inline
   anchors — the float widths ignored how long the labels are, and an inline
   anchor fragments its background per line when the label wraps, so vertical
   padding never grew the box. They are now one flex row: each button takes an
   equal share of the line and both drop to full width on their own once
   220px each no longer fits, no media query needed. */
.dc-page .dc-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.dc-page .dc-hero__cta {
    display: flex;
    flex: 1 1 220px;
    min-width: 0;
}

    /* flex on the anchor centres a wrapped label and keeps both buttons the
   same height; min-height holds the 44px touch target on one-line labels. */
    .dc-page .dc-hero__cta a {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        line-height: 1.35;
        text-align: center;
    }

/* The markup sizes icons with height="40px;" / height="70px;" — an invalid
   HTML height attribute, which takes a bare number. The browser discards it,
   so the images fall back to intrinsic size. Size them here instead. */
.dc-page .dc-hero__stats img {
    height: 40px;
    width: auto;
    max-width: 100%;
}

.dc-page .dc-grid--7 img,
.dc-page .dc-grid--4 img {
    height: 70px;
    width: auto;
    max-width: 100%;
}

/* 18 elements carry line-height:auto, which is invalid and dropped — they
   then inherit the 16px set on their wrappers. Valid inline line-heights
   elsewhere on the page still win over this rule. */
.dc-page p {
    line-height: 1.4;
}

/* ---------- tablet ---------- */
@media (max-width: 899px) {

    .dc-page .dc-grid--7 > div,
    .dc-page .dc-grid--5 > div {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }

    /* These four sit inside the still-50%-wide FAQ panel, so 25% each leaves
   about 90px per tile and the captions break onto three lines. */
    .dc-page .dc-grid--4 > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 12px;
    }

    /* The inline border-right is a column separator drawn on every tile. It
   only lines up in the one-row desktop layout — once the tiles wrap it also
   lands on the last column, where it reads as a stray line down the edge. */
    .dc-page .dc-grid--7 > div,
    .dc-page .dc-grid--4 > div {
        border-right-style: none !important;
    }

    .dc-page .dc-grid--cards > div {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        height: auto !important;
        margin-right: 0 !important; /* add this */
    }


    .dc-page .dc-cta-bar__intro {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 12px;
    }

    .dc-page .dc-cta-link {
        flex: 0 0 46%;
        max-width: 46%;
    }
}

/* ---------- phone ---------- */
@media (max-width: 599px) {

    /* every two-column split becomes one column.
   The VS badge is a direct child of .sourcing-comparison too, so it has to be
   excluded here — width:100% turns the 56px circle into a full-width ellipse. */
    .dc-page .dc-hero > div,
    .dc-page .dc-split > div,
    .dc-page .sourcing-comparison > div:not(.sourcing-vs-badge) {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding-right: 0 !important;
    }

    /* border-right divides the two panels side by side; stacked it is a stray
   line down the right edge, so it becomes the seam between them instead. */
    .dc-page .sourcing-comparison > div:not(.sourcing-vs-badge) {
        border-right-style: none !important;
    }

    /* Icon tiles — a centred icon above a short caption. One per row leaves
   most of the row empty and runs the section over several screens, so they
   go two-up. border-right is a separator between columns and reads as a
   stray line once they wrap, so it comes off. */
    .dc-page .dc-grid--7 > div,
    .dc-page .dc-grid--4 > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        height: auto !important;
        border-right-style: none !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 16px;
    }

    /* "Who We Support" tiles are icon-left / label-right rows, so they already
   fill the width — they just need the full row to sit on. */
    .dc-page .dc-grid--5 > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-right-style: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 8px;
    }

    /* Benefit cards — a full solid box border plus their own padding, so keep
   both. The inline margin-right:10px would push the card past a 100% flex
   basis and the right border would be clipped by overflow:auto above. */
    .dc-page .dc-grid--cards > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-right: 0 !important;
        margin-bottom: 12px;
    }


    /* hero internals — one full-width button per row on a phone, so the two
   labels never sit side by side at ~150px each */
    .dc-page .dc-hero__cta {
        flex: 1 1 100%;
    }

    /* was: .dc-page .dc-hero__stats { width:100% !important; float:none !important; padding-top:16px !important; } */
    .dc-page .dc-hero__stats {
        width: 100% !important;
        float: none !important;
        padding-top: 16px !important;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .dc-page .dc-hero__stats > div {
            width: auto !important;
            float: none !important;
            padding-top: 0 !important;
        }

            .dc-page .dc-hero__stats > div:first-child {
                flex: 0 0 44px;
            }

            .dc-page .dc-hero__stats > div:last-child {
                flex: 1 1 auto;
            }

        .dc-page .dc-hero__stats p {
            margin: 0;
        }


    /* Badge moves to the seam between the stacked panels. Absolute positioning
   cannot find that seam — the two panels are different heights, so no
   percentage of the container lands on it, and top:50% dropped the badge onto
   the "Alps Controls Sourcing" heading. Stacking the container as a flex
   column and ordering the badge between the two panels puts it on the seam
   whatever the panels measure. position:relative keeps it in flow but still
   allows z-index, so it paints over both panel backgrounds. */
    .dc-page .sourcing-comparison {
        display: flex;
        flex-direction: column;
    }

        .dc-page .sourcing-comparison > div:nth-child(2) {
            order: 1;
        }

        .dc-page .sourcing-vs-badge {
            order: 2;
            position: relative;
            top: auto;
            left: auto;
            transform: none;
            align-self: center;
            flex: 0 0 auto;
            margin: -14px 0;
        }

        .dc-page .sourcing-comparison > div:nth-child(3) {
            order: 3;
        }

    /* type scale — 20px body copy is too large in a 375px column */
    .dc-page h1 {
        font-size: 26px !important;
        line-height: 32px !important;
    }

    .dc-page h2 {
        font-size: 20px !important;
    }

    .dc-page .dc-hero > div > p {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    .dc-page .dc-cta-bar {
        padding: 20px 16px;
    }

    .dc-page .dc-cta-link {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
    }
}