/* ==========================================================
   MOBILE ADAPTIVE FIT — v9
   Keeps the current mobile storytelling behaviour, but lets tall artwork
   shrink against the available viewport height. Copy only gets smaller on
   compact/short phones instead of reducing typography on every mobile device.
   ========================================================== */

@media (max-width: 760px) {
    :root {
        --mobile-copy-size: 17px;
        --mobile-copy-line: 25px;
        --mobile-small-title: 18px;
        --mobile-visual-landscape: min(88vw, 50dvh, 350px);
        --mobile-visual-square: min(86vw, 42dvh, 330px);
        --mobile-visual-portrait: min(58vw, 29dvh, 220px);
        --mobile-logo-size: min(34vw, 18dvh, 150px);
    }

    /* Landscape monitor / booklet artwork is capped by BOTH viewport width and
       viewport height. Because the wrappers preserve aspect-ratio, the screen
       masks and overlays remain aligned while the whole visual scales down. */
    html.mobile-motion .challenge-visual,
    html.mobile-motion .lca-dashboard__visual,
    html.mobile-motion .circular-guide__visual,
    html.mobile-motion .circular-case__visual,
    html.mobile-motion .business-models__visual {
        width: var(--mobile-visual-landscape) !important;
        max-width: 100% !important;
    }

    /* The nudging monitor is almost square, so it needs a slightly tighter
       height-based cap than the wide 16:10-ish monitor artwork above. */
    html.mobile-motion .return-nudging__visual {
        width: min(88vw, 43dvh, 350px) !important;
        max-width: 100% !important;
    }

    html.mobile-motion .map-visual {
        width: min(84vw, 34dvh, 330px) !important;
        max-width: 100% !important;
    }

    html.mobile-motion .lca-pie {
        width: min(62vw, 29dvh, 230px) !important;
        max-width: 100% !important;
    }

    html.mobile-motion .lca-legend-image {
        width: min(60vw, 26dvh, 215px) !important;
        max-width: 100% !important;
    }

    html.mobile-motion .lca-bars__chart {
        width: min(100%, 54dvh, 360px) !important;
        margin-inline: auto !important;
    }

    html.mobile-motion .return-grin__visual {
        width: min(64vw, 28dvh, 230px) !important;
        max-width: 100% !important;
    }

    html.mobile-motion .return-recycle__visual {
        width: min(58vw, 29dvh, 200px) !important;
        max-width: 100% !important;
    }

    html.mobile-motion .policy-recommendations__visual {
        width: min(58vw, 30dvh, 225px) !important;
        max-width: 100% !important;
    }

    /* Resource/logo grids still use two columns, but each image is allowed to
       contract on a short viewport while remaining larger on tall phones. */
    html:is(.mobile-motion, :root) .training-resource img,
    html:is(.mobile-motion, :root) .looking-initiative img {
        width: var(--mobile-logo-size) !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* Keep every Looking Ahead partner logo inside the same white panel. The
   artwork preserves its original proportions while the card size stays equal. */
@media (max-width: 760px) {
    html:is(.mobile-motion, :root) .looking-initiative img {
        width: min(100%, var(--mobile-logo-size)) !important;
        height: clamp(92px, 14dvh, 118px) !important;
        padding: 12px !important;
        border: 1px solid rgb(42 43 95 / 0.06) !important;
        border-radius: 10px !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        background: #fff !important;
    }
}

/* Compact phones: about iPhone SE / smaller Android heights, or narrow phones.
   Here we reduce the 17px mobile body copy by ~2px and tighten vertical rhythm.
   Tall modern phones keep the original typography. */
@media (max-width: 390px), (max-width: 760px) and (max-height: 780px) {
    :root {
        --mobile-copy-size: 15px;
        --mobile-copy-line: 22px;
        --mobile-small-title: 16px;
        --mobile-visual-landscape: min(88vw, 45dvh, 320px);
        --mobile-visual-square: min(84vw, 38dvh, 300px);
        --mobile-visual-portrait: min(56vw, 25dvh, 190px);
        --mobile-logo-size: min(33vw, 16dvh, 132px);
    }

    body {
        font-size: 15px;
        line-height: 1.48;
    }

    .primary-nav a {
        font-size: 15px !important;
    }

    .device-reveal__lead p,
    .challenge-copy p,
    .map-copy p,
    .device-detail-intro,
    .device-facts li,
    .device-facts strong,
    .device-facts li::before,
    .intro-summary__lead,
    .topic-links,
    .lca-introduction p,
    .lca-content p,
    .lca-findings__copy,
    .circular-guide__copy,
    .circular-steps > p,
    .circular-case__copy,
    .return-pilots__copy,
    .return-context,
    .return-strategies__intro,
    .return-nudging__copy,
    .return-nudging__copy--intro,
    .return-nudging__copy--outcome,
    .return-grin__copy,
    .return-logistics-card,
    .return-recycle__copy,
    .business-policy__copy,
    .training-library__lead p,
    .training-library__closing,
    .looking-initiatives__lead,
    .looking-initiatives__closing,
    .looking-links,
    .looking-credits__copy p,
    .looking-contact p,
    .site-footer.site-footer--dice p {
        font-size: var(--mobile-copy-size) !important;
        line-height: var(--mobile-copy-line) !important;
    }

    .lca-content h2,
    .lca-findings h2,
    .lca-findings .lca-findings__copy h2,
    .circular-guide__copy h2,
    .return-nudging__copy h2,
    .business-policy__copy h2,
    .training-library__lead h2,
    .looking-credits__copy h2,
    .looking-contact h2 {
        font-size: var(--mobile-small-title) !important;
        line-height: 1.3 !important;
    }

    .return-strategies__title {
        font-size: 16px !important;
        line-height: 1.05 !important;
    }

    .training-resource span,
    .looking-initiative span {
        font-size: 14px !important;
        line-height: 17px !important;
    }

    /* Reduce whitespace before reducing content further. */
    html.mobile-motion .scroll-scene .sticky-stage {
        padding-block: 14px !important;
    }

    html.mobile-motion .challenge-content,
    html.mobile-motion .map-layout,
    html.mobile-motion .business-models,
    html.mobile-motion .policy-recommendations,
    html.mobile-motion .circular-case,
    html.mobile-motion .return-nudging {
        gap: 14px !important;
    }

    html.mobile-motion .lca-pie-layout {
        gap: 12px !important;
        margin-top: 14px !important;
    }

    html.mobile-motion .lca-bars {
        margin-top: 14px !important;
    }

    html.mobile-motion .return-pilots,
    html.mobile-motion .return-grin,
    html.mobile-motion .return-recycle,
    html.mobile-motion .training-library,
    html.mobile-motion .looking-initiatives {
        row-gap: 18px !important;
    }

    html.mobile-motion .return-nudging__visual {
        width: min(86vw, 38dvh, 300px) !important;
    }

    html.mobile-motion .map-visual {
        width: min(82vw, 30dvh, 285px) !important;
    }

    html.mobile-motion .lca-pie {
        width: min(58vw, 25dvh, 205px) !important;
    }

    html.mobile-motion .lca-legend-image {
        width: min(56vw, 22dvh, 190px) !important;
    }

    html.mobile-motion .lca-bars__chart {
        width: min(100%, 48dvh, 320px) !important;
    }

    html.mobile-motion .return-grin__visual {
        width: min(58vw, 24dvh, 195px) !important;
    }

    html.mobile-motion .return-recycle__visual {
        width: min(52vw, 25dvh, 175px) !important;
    }
}

/* Extremely short landscape-ish phone viewports get one extra density step.
   This does not affect normal portrait phones. */
@media (max-width: 760px) and (max-height: 640px) {
    :root {
        --mobile-copy-size: 14px;
        --mobile-copy-line: 20px;
        --mobile-small-title: 15px;
        --mobile-logo-size: min(30vw, 14dvh, 112px);
    }

    .return-strategies__title {
        font-size: 15px !important;
    }

    html.mobile-motion .scroll-scene .sticky-stage {
        padding-block: 10px !important;
    }
}


/* Intro device grid: scale against viewport height as well as width.
   This keeps all six cards visible inside the sticky first story even on
   short phones such as iPhone SE, without disabling the reveal animation. */
@media (max-width: 760px) {
    html.mobile-motion .device-reveal__content {
        width: min(100%, 430px) !important;
        height: auto !important;
        max-height: calc(100dvh - var(--header-height) - 24px);
        grid-template-rows: auto auto !important;
        align-content: center;
        gap: clamp(12px, 2dvh, 20px) !important;
    }

    html.mobile-motion .device-reveal .device-grid--large {
        /* 3 rows of square cards: capping grid width by dvh also caps total
           grid height while preserving the original 2-column composition. */
        width: min(100%, 46dvh, 330px) !important;
        height: auto !important;
        max-height: none !important;
        justify-self: center;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(3, auto) !important;
        gap: clamp(8px, 1.25dvh, 12px) !important;
    }

    html.mobile-motion .device-grid--large .device-card {
        width: 100%;
        aspect-ratio: 1 / 1;
        min-width: 0;
        min-height: 0;
    }

    html.mobile-motion .device-grid--large .device-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

@media (max-width: 390px), (max-width: 760px) and (max-height: 780px) {
    html.mobile-motion .device-reveal .device-grid--large {
        width: min(100%, 42dvh, 292px) !important;
        gap: clamp(7px, 1dvh, 10px) !important;
    }

    html.mobile-motion .device-reveal__content {
        gap: clamp(10px, 1.5dvh, 14px) !important;
    }
}

@media (max-width: 760px) and (max-height: 640px) {
    html.mobile-motion .device-reveal .device-grid--large {
        width: min(100%, 34dvh, 230px) !important;
        gap: 7px !important;
    }

    html.mobile-motion .device-reveal__content {
        gap: 8px !important;
    }
}