/* responsive.css — intentional mobile/tablet layouts (not shrunk desktop) */

/* ---------- ≤1200 ---------- */
@media (max-width: 1200px) {
    :root {
        --container-pad: 40px;
    }

    .worldimpact__cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .wi-card {
        max-width: 300px;
    }
}

/* ---------- ≤1024 (tablet landscape) ---------- */
@media (max-width: 1024px) {
    :root {
        --fs-h1: 36px;
        --fs-lead: 22px;
    }

    .statistics__grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 640px;
    }

    .stat {
        min-height: 280px;
    }

    .card-reveal {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .card-reveal__content {
        max-width: none;
        justify-self: stretch;
        padding: 56px var(--container-pad) 24px;
    }

    .card-reveal__stage {
        padding: 24px 0 80px;
    }

    .card-reveal__track {
        padding-left: var(--container-pad);
    }

    .people {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .people__text {
        position: static;
        padding-top: 0;
        max-width: 560px;
    }

    .split {
        gap: var(--space-5);
        min-height: 0;
    }

    .news__inner {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .news__video {
        justify-self: start;
    }
}

/* ---------- ≤768 (tablet portrait / mobile nav switch) ---------- */
@media (max-width: 768px) {
    :root {
        --container-pad: 24px;
        --fs-h1: 32px;
        --fs-h2-card: 26px;
        --fs-lead: 20px;
        --fs-body-lg: 18px;
        --fs-stat-label: 20px;
        --fs-quote: 20px;
    }

    .hero__figure {
        width: 260px;
        margin-bottom: var(--space-5);
    }

    .hero__video {
        margin-top: var(--space-7);
    }

    /* Collage stacks: wide image full width, two smaller side by side */
    .photo-collage {
        grid-template-columns: 1fr 1fr;
        margin-top: var(--space-7);
    }

    .photo-collage__item:first-child {
        grid-column: 1 / -1;
    }

    .photo-collage__item {
        height: 240px; /* img fills the item (height 100%), caption stays flush */
    }

    /* no slider controls — let touch users swipe the card rail natively */
    .card-reveal__stage {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .card-reveal__track {
        flex-wrap: nowrap; /* single swipeable row on touch layouts */
    }

    .card-reveal__item {
        flex-basis: 300px;
        width: 300px;
        min-height: 360px;
    }

    .leaders__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        max-width: 480px;
        margin: 0 auto;
    }

    .statistics {
        padding-top: 240px;
    }

    .profile__avatar {
        width: 220px;
        height: 220px;
    }

    /* People deck flattens to a flowing stack on mobile */
    .people__text {
        position: static;
        padding-top: 0;
    }

    .people-card {
        position: static;
        margin-bottom: 72px;
    }

    .people-card:last-child {
        margin-bottom: 0;
    }

    .testimonial {
        position: static;
        width: auto;
        margin: -56px 16px 0;
    }

    .section-dark {
        min-height: 560px;
        padding: 80px var(--container-pad);
    }

    .split {
        grid-template-columns: 1fr;
        padding: 0 0 var(--space-4);
    }

    .split--media-left .split__media,
    .split--media-right .split__media {
        order: 1;
    }

    .split--media-left .split__text,
    .split--media-right .split__text {
        margin-left: 0;
        margin-right: 0;
        justify-self: start;
    }

    .split__text {
        order: 2;
        max-width: none;
        padding: 0 var(--container-pad);
    }

    .news {
        padding: 56px 0;
    }

    .worldimpact__cards {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: var(--space-5);
        margin-top: var(--space-7);
    }

    .wi-card {
        max-width: 400px;
    }
}

/* ---------- ≤600 (large phones): statistics stack like reference phone--12 ---------- */
@media (max-width: 600px) {
    .statistics__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .stat {
        min-height: 0;
        padding: 24px;
    }

    .stat__label {
        margin-bottom: 0;
    }
}

/* ---------- ≤430 (phones) ---------- */
@media (max-width: 430px) {
    :root {
        --container-pad: 16px;
        --fs-h1: 28px;
        --fs-stat-number: 36px;
    }

    .hero__figure {
        width: 220px;
    }

    .photo-collage {
        grid-template-columns: 1fr;
    }

    .photo-collage__item {
        height: 220px;
    }

    .card-reveal__item {
        flex-basis: 260px;
        width: 260px;
        min-height: 320px;
    }

    .testimonial {
        padding: 24px;
    }

    .btn--blue,
    .btn--black {
        width: 100%;
    }
}