/**
 * MRA Foundation — tablet & mobile only (max-width: 1023px).
 * Desktop (1024px+) uses main.css + fitFigmaFrame unchanged.
 */

@media (max-width: 1023px) {
    :root {
        --mra-gutter: 24px;
        --mra-section-gap: 64px;
    }

    /* === Shell: no page scaling === */
    .mra-stage {
        height: auto !important;
        overflow-x: clip;
        overflow-y: visible;
        display: block;
    }

    .mra-frame {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        margin-bottom: 0 !important;
    }

    .mra-landing {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip;
    }

    /* === Navigation === */
    .mra-header {
        position: relative;
    }

    .mra-header__inner {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 12px var(--mra-gutter);
        gap: 8px;
    }

    .mra-frame .mra-menu-btn,
    .mra-header .mra-menu-btn {
        display: flex !important;
        margin-left: auto;
        margin-right: 0;
        z-index: 10;
    }

    .mra-frame .mra-nav:not(.is-open),
    .mra-header .mra-nav:not(.is-open) {
        display: none !important;
    }

    .mra-frame .mra-nav.is-open,
    .mra-header .mra-nav.is-open {
        display: flex !important;
        position: absolute;
        top: calc(100% - 4px);
        left: var(--mra-gutter);
        right: var(--mra-gutter);
        transform: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin: 0;
        padding: 16px;
        background: rgba(80, 30, 0, 0.96);
        border-radius: 16px;
        z-index: 20;
        white-space: normal;
    }

    .mra-header--solid .mra-menu-btn span:not(.screen-reader-text) {
        background: var(--mra-orange-dark);
    }

    .mra-nav__link,
    .mra-nav__toggle {
        width: 100%;
        justify-content: flex-start;
        padding: 10px 8px;
        font-size: 16px;
    }

    .mra-nav__dropdown {
        position: static;
        display: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 0 12px;
        min-width: 0;
    }

    .mra-nav__dropdown a {
        color: #fff;
        padding: 8px 12px;
    }

    .mra-nav__item--drop.is-open .mra-nav__dropdown {
        display: block;
    }

    .mra-header .mra-btn--header {
        margin-top: 0;
        margin-left: 8px;
        flex-shrink: 0;
    }

    /* === Typography === */
    .mra-heading {
        font-size: clamp(32px, 7.5vw, 56px);
    }

    .mra-kicker {
        font-size: clamp(14px, 3vw, 18px);
    }

    /* === All page heroes === */
    .mra-hero,
    .mra-edu-hero,
    .mra-hc-hero,
    .mra-emp-hero,
    .mra-farmer-hero,
    .mra-donation-page-hero,
    .mra-about-hero,
    .mra-contact-hero {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100svh;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mra-hero__media,
    .mra-edu-hero__media,
    .mra-hc-hero__media,
    .mra-emp-hero__media,
    .mra-farmer-hero__media,
    .mra-donation-page-hero__media,
    .mra-about-hero__media,
    .mra-contact-hero__media {
        position: absolute;
        inset: 0;
    }

    .mra-hero__media img,
    .mra-hero__overlay,
    .mra-edu-hero__media img,
    .mra-edu-hero__overlay,
    .mra-hc-hero__media img,
    .mra-hc-hero__overlay,
    .mra-emp-hero__media img,
    .mra-emp-hero__overlay,
    .mra-farmer-hero__media img,
    .mra-farmer-hero__overlay,
    .mra-donation-page-hero__media img,
    .mra-donation-page-hero__overlay,
    .mra-about-hero__media img,
    .mra-contact-hero__media img {
        position: absolute;
        inset: 0;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none;
        object-fit: cover;
    }

    .mra-hero__content,
    .mra-edu-hero__content,
    .mra-hc-hero__content,
    .mra-emp-hero__content,
    .mra-farmer-hero__content,
    .mra-donation-page-hero__content,
    .mra-about-hero__content,
    .mra-contact-hero__content {
        padding: clamp(120px, 22vw, 200px) var(--mra-gutter) 48px;
    }

    .mra-hero__title,
    .mra-edu-hero__title,
    .mra-hc-hero__title,
    .mra-emp-hero__title,
    .mra-farmer-hero__title,
    .mra-donation-page-form__title,
    .mra-about-hero__title,
    .mra-contact-hero__title {
        font-size: clamp(36px, 9vw, 64px);
        white-space: normal;
        max-width: 100%;
    }

    .mra-hero__lead,
    .mra-edu-hero__lead,
    .mra-hc-hero__lead,
    .mra-emp-hero__lead,
    .mra-farmer-hero__lead,
    .mra-about-hero__lead,
    .mra-contact-hero__lead {
        font-size: clamp(16px, 4vw, 22px);
        max-width: 100%;
    }

    .mra-hero-card {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: min(291px, calc(100% - 32px));
        height: auto;
        min-height: 240px;
        margin: 24px var(--mra-gutter) 40px auto;
    }

    /* === Landing page === */
    .mra-strip {
        width: calc(100% - 32px);
        height: auto;
        flex-wrap: wrap;
        padding: 16px 20px;
        gap: 12px;
        margin-top: -20px;
    }

    .mra-strip__contact,
    .mra-strip__tag {
        white-space: normal;
    }

    .mra-stats,
    .mra-mission,
    .mra-sponsors,
    .mra-change,
    .mra-donate,
    .mra-request,
    .mra-stories {
        padding-left: var(--mra-gutter);
        padding-right: var(--mra-gutter);
    }

    .mra-stage .mra-frame .mra-stats__grid,
    .mra-stats__grid {
        grid-template-columns: 1fr !important;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        gap: 24px;
    }

    .mra-stage .mra-frame .mra-change,
    .mra-change {
        width: 100% !important;
        max-width: 100%;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto;
        border-radius: 24px;
    }

    .mra-stage .mra-frame .mra-change__intro,
    .mra-change__intro {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        padding: 32px 24px;
    }

    .mra-change__cell {
        min-height: 220px;
    }

    .mra-stage .mra-frame .mra-mission__inner,
    .mra-mission__inner {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }

    .mra-stage .mra-frame .mra-mission__collage,
    .mra-mission__collage {
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .mra-stage .mra-frame .mra-mission__collage img,
    .mra-mission__collage img {
        position: static !important;
        width: 100% !important;
        height: clamp(140px, 28vw, 200px);
        left: auto !important;
        top: auto !important;
    }

    .mra-stage .mra-frame .mra-donate,
    .mra-donate {
        height: auto;
        min-height: 520px;
    }

    .mra-stage .mra-frame .mra-donate__content,
    .mra-donate__content {
        position: relative;
        padding: 80px var(--mra-gutter) 40px;
        pointer-events: auto;
    }

    .mra-stage .mra-frame .mra-donate__card,
    .mra-donate__card {
        width: 100%;
        max-width: 547px;
        min-height: 0;
        margin: 0 auto;
    }

    .mra-stage .mra-frame .mra-request,
    .mra-request {
        grid-template-columns: 1fr !important;
        min-height: 0;
    }

    .mra-stage .mra-frame .mra-request__visual,
    .mra-request__visual {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }

    .mra-stage .mra-frame .mra-request__grid,
    .mra-request__grid {
        grid-template-columns: 1fr !important;
    }

    .mra-stage .mra-frame .mra-stories__inner,
    .mra-stories__inner {
        grid-template-columns: 1fr !important;
        padding: 48px var(--mra-gutter);
    }

    .mra-stage .mra-frame .mra-story,
    .mra-story {
        flex: 0 0 min(420px, 88vw);
        width: min(420px, 88vw);
    }

    .mra-stage .mra-frame .mra-footer__inner,
    .mra-stage .mra-frame .mra-footer__bar,
    .mra-footer__inner,
    .mra-footer__bar {
        width: auto !important;
        max-width: 100%;
        grid-template-columns: 1fr !important;
        padding-left: var(--mra-gutter);
        padding-right: var(--mra-gutter);
    }

    /* === Program pages (education, healthcare, employment, farmer) === */
    .mra-edu-programs__grid,
    .mra-hc-programs__grid,
    .mra-emp-programs__grid,
    .mra-farmer-programs__grid,
    .mra-edu-impact__grid,
    .mra-hc-impact__grid,
    .mra-emp-impact__grid,
    .mra-farmer-impact__grid,
    .mra-edu-stats__grid,
    .mra-hc-stats__grid,
    .mra-emp-stats__grid,
    .mra-farmer-stats__grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100%;
        gap: 24px;
    }

    .mra-edu-programs__grid,
    .mra-hc-programs__grid,
    .mra-emp-programs__grid,
    .mra-farmer-programs__grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .mra-edu-process__timeline,
    .mra-hc-process__timeline,
    .mra-emp-process__timeline,
    .mra-farmer-process__timeline {
        width: 100% !important;
        max-width: 100%;
    }

    .mra-edu-process__step,
    .mra-hc-process__step,
    .mra-emp-process__step,
    .mra-farmer-process__step {
        grid-template-columns: 1fr !important;
        gap: 16px;
        text-align: center;
    }

    .mra-edu-process__step--right .mra-edu-process__media,
    .mra-edu-process__step--right .mra-edu-process__copy,
    .mra-edu-process__step--left .mra-edu-process__media,
    .mra-edu-process__step--left .mra-edu-process__copy,
    .mra-hc-process__step--right .mra-hc-process__media,
    .mra-hc-process__step--right .mra-hc-process__copy,
    .mra-hc-process__step--left .mra-hc-process__media,
    .mra-hc-process__step--left .mra-hc-process__copy,
    .mra-emp-process__step--right .mra-emp-process__media,
    .mra-emp-process__step--right .mra-emp-process__copy,
    .mra-emp-process__step--left .mra-emp-process__media,
    .mra-emp-process__step--left .mra-emp-process__copy,
    .mra-farmer-process__step--right .mra-farmer-process__media,
    .mra-farmer-process__step--right .mra-farmer-process__copy,
    .mra-farmer-process__step--left .mra-farmer-process__media,
    .mra-farmer-process__step--left .mra-farmer-process__copy {
        grid-column: 1 !important;
        grid-row: auto !important;
        text-align: center;
    }

    .mra-edu-process__num,
    .mra-hc-process__num,
    .mra-emp-process__num,
    .mra-farmer-process__num {
        grid-column: 1 !important;
        order: -1;
    }

    .mra-edu-process__media img,
    .mra-hc-process__media img,
    .mra-emp-process__media img,
    .mra-farmer-process__media img {
        width: 100%;
        max-width: 320px;
        height: auto;
        margin: 0 auto;
    }

    .mra-edu-quote,
    .mra-hc-quote,
    .mra-emp-quote,
    .mra-farmer-quote {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 48px var(--mra-gutter);
    }

    .mra-edu-quote__inner,
    .mra-hc-quote__inner,
    .mra-emp-quote__inner,
    .mra-farmer-quote__inner {
        padding: 0 !important;
    }

    .mra-edu-cta__inner,
    .mra-hc-cta__inner,
    .mra-emp-cta__inner,
    .mra-farmer-cta__inner {
        width: 100% !important;
        max-width: 100%;
        padding: 48px var(--mra-gutter);
    }

    /* Disable full-page scroll snap on tablet/mobile */
    html:has(body.mra-education-page),
    html:has(body.mra-healthcare-page),
    html:has(body.mra-employment-page),
    html:has(body.mra-farmer-page),
    html:has(body.mra-about-page) {
        scroll-snap-type: none;
    }

    body.mra-education-page .mra-education > section:not(.mra-sponsors),
    body.mra-healthcare-page .mra-healthcare > section:not(.mra-sponsors),
    body.mra-employment-page .mra-employment > section:not(.mra-sponsors),
    body.mra-farmer-page .mra-farmer > section:not(.mra-sponsors),
    body.mra-about-page .mra-about > section:not(.mra-sponsors) {
        min-height: auto !important;
        height: auto !important;
        display: block !important;
        justify-content: unset !important;
    }

    /* === About page === */
    .mra-about-mission__grid {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }

    .mra-about-values__grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .mra-about-journey__panel,
    .mra-about-journey__panel--left,
    .mra-about-journey__panel--right {
        grid-template-columns: 1fr !important;
        gap: 20px;
        max-width: 100%;
    }

    .mra-about-journey__panel--right .mra-about-journey__media,
    .mra-about-journey__panel--right .mra-about-journey__copy,
    .mra-about-journey__panel--left .mra-about-journey__media,
    .mra-about-journey__panel--left .mra-about-journey__copy {
        grid-column: 1 !important;
        text-align: center;
    }

    .mra-about-journey__media img {
        width: 100%;
        max-width: 360px;
        height: auto;
        margin: 0 auto;
    }

    .mra-about-programs__viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mra-about-stats__grid,
    .mra-about-team__grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .mra-about-cta__inner {
        width: 100% !important;
        max-width: calc(100% - 32px);
        padding: 40px 24px;
    }

    /* === Contact page === */
    .mra-contact-touch__inner {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .mra-contact-touch__cards {
        grid-template-columns: 1fr !important;
    }

    .mra-contact-touch__card--office {
        width: 100% !important;
        grid-column: 1;
    }

    .mra-contact-touch__form-wrap,
    .mra-contact-touch__submit {
        width: 100%;
        max-width: 100%;
    }

    .mra-contact-touch__row {
        grid-template-columns: 1fr !important;
    }

    .mra-contact-help__grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .mra-contact-donate__photo {
        width: 100% !important;
        max-width: 100%;
        height: clamp(240px, 50vw, 420px);
    }

    .mra-contact-donate__photo img {
        height: 137.93%;
        margin-top: -17.93%;
    }

    /* === Donation page === */
    .mra-donation-page-impact__grid {
        grid-template-columns: 1fr !important;
    }

    .mra-donation-page-options__grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .mra-donation-page-other__panel {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100%;
        padding: 32px var(--mra-gutter);
        min-height: 0;
    }

    .mra-donation-page-other__photo {
        width: 100%;
        height: clamp(240px, 55vw, 400px);
    }

    .mra-donation-page-why__photo {
        width: 100% !important;
        max-width: 100%;
        height: clamp(240px, 50vw, 420px);
    }

    .mra-donation-page-form {
        padding-left: var(--mra-gutter);
        padding-right: var(--mra-gutter);
    }

    .mra-donation-page-form__amounts {
        flex-wrap: wrap;
    }

    /* === Shared stories / sponsors === */
    .mra-stories {
        min-height: 0;
    }

    .mra-sponsors__logos-wrap {
        max-width: 100%;
        overflow: hidden;
    }

    .mra-sponsors__logos {
        width: 100%;
        height: auto;
    }

    /* === Images: prevent overflow === */
    img {
        max-width: 100%;
    }

    .mra-ring {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    :root {
        --mra-gutter: 20px;
        --mra-section-gap: 48px;
    }

    .mra-logo {
        width: 64px;
        height: 86px;
    }

    .mra-btn--header {
        width: 110px;
        height: 40px;
        font-size: 16px;
    }

    .mra-edu-programs__grid,
    .mra-hc-programs__grid,
    .mra-emp-programs__grid,
    .mra-farmer-programs__grid {
        grid-template-columns: 1fr !important;
    }

    .mra-about-values__grid {
        grid-template-columns: 1fr !important;
    }

    .mra-mission__collage {
        grid-template-columns: 1fr !important;
    }

    .mra-contact-touch__heading,
    .mra-contact-touch__form-title {
        font-size: clamp(28px, 7vw, 40px);
    }
}

@media (max-width: 430px) {
    :root {
        --mra-gutter: 16px;
    }

    .mra-hero__title,
    .mra-edu-hero__title,
    .mra-hc-hero__title,
    .mra-emp-hero__title,
    .mra-farmer-hero__title {
        font-size: 32px;
    }

    .mra-btn--ghost-lg {
        font-size: 16px;
        padding: 10px 18px;
    }

    .mra-header .mra-btn--header {
        width: 96px;
        font-size: 14px;
    }

    .mra-donation-page-form__chip,
    .mra-donation-page-form__freq-btn {
        min-width: 0;
        flex: 1 1 auto;
    }
}