/* =========================================================
   SmileAge — Site-wide responsive rules
   -----------------------------------------------------------
   Purpose: a single dedicated place for media-query overrides
   so responsive tweaks never need to be mixed into style.css
   (owned by another developer) or programs.css. Add future
   inner-page responsive rules here too, grouped by page/section
   with a comment banner, keeping every selector scoped to the
   "sa-" namespace already used in programs.css.
   Load order: style.css, then programs.css, then this file last
   (so it can safely override on small screens).
   ========================================================= */

/* Guards against accidental horizontal scroll on narrow viewports.
   Scoped to this page only (responsive.css is only loaded here). */
body {
    overflow-x: hidden;
}

/* ---------- Header: mobile/tablet nav collapse ----------
   The collapsed nav panel (.navbar-collapse) sits inside the
   position: fixed header. Left unconstrained, its rendered height is
   whatever its content needs (nav links + 2 buttons) — on a short mobile
   viewport, or if anything nudges a reflow while it's open, that can end
   up taller than the screen. Since the header is fixed (not part of the
   page's normal scroll), an oversized panel doesn't scroll away cleanly —
   it just keeps covering content, matching the "black area stuck open"
   behavior. Cap it to whatever viewport height remains below the header
   (--header-h is kept live by header-scroll.js) and let the panel scroll
   internally instead, so it can never outgrow the screen. */
@media (max-width: 1199.98px) {
    .hero-navbar .navbar-collapse {
        max-height: calc(100vh - var(--header-h, 101px) - 1.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Small laptop tier (1200px–1399.98px) ----------
   Most inner-page layouts already use clamp()/fr-unit grids (see
   .sa-page-hero-title, .sa-inv-bento, etc.) so they scale continuously
   through this range without needing their own breakpoint. The one
   fixed-px exception is the home page's carousel headline. */
@media (max-width: 1399.98px) {
    .hero-title {
        font-size: 3.75rem;
    }
}

/* ---------- Programs page: inner-page hero ---------- */
@media (max-width: 991.98px) {
    .sa-page-hero {
        padding-block: 3rem 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .sa-page-hero-inner {
        max-width: 100%;
        padding-inline: 0.5rem;
    }

    .sa-page-hero-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .sa-page-hero-subtitle {
        font-size: 0.95rem;
    }

    .sa-search-wrap {
        margin-top: 1.75rem;
    }

    .sa-search-input {
        padding: 0.9rem 1.25rem 0.9rem 3rem;
        font-size: 0.9rem;
    }

    .sa-search-icon {
        left: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .sa-page-hero-badge {
        font-size: 0.75rem;
        padding: 0.45rem 0.9rem;
    }

    .sa-page-hero::before,
    .sa-page-hero::after {
        width: 12rem;
        height: 12rem;
    }
    .sa-ev-list-grid {
    grid-template-columns: repeat(1, 1fr);
    }
}

/* ---------- Programs page: card grid ---------- */
@media (max-width: 767.98px) {
    .sa-prog-card {
        flex-direction: column;
    }

    .sa-prog-card-cover {
        flex-basis: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .sa-prog-card-body {
        padding: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .sa-prog-stat-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-prog-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-prog-card-actions .sa-btn-sponsor {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Programs page: listing / timeline (legacy, superseded) ---------- */
@media (max-width: 991.98px) {
    .sa-results-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        margin-bottom: 2.25rem;
    }

    .sa-prog-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .sa-programs-timeline::before {
        left: 1.5rem;
    }

    .sa-feature-row,
    .sa-feature-row-reverse {
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
        padding-left: 3.5rem;
    }

    .sa-feature-dot {
        top: 0;
        left: 1.5rem;
        transform: translate(-50%, 0);
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.8rem;
    }

    .sa-feature-content {
        padding-top: 0;
    }

    .sa-feature-stat-chip {
        right: 1rem;
        bottom: -1rem;
        padding: 0.6rem 0.9rem;
    }
}

@media (max-width: 575.98px) {
    .sa-programs-timeline::before {
        left: 1.15rem;
    }

    .sa-feature-row,
    .sa-feature-row-reverse {
        padding-left: 2.75rem;
        gap: 1.5rem;
    }

    .sa-feature-dot {
        left: 1.15rem;
        width: 2.15rem;
        height: 2.15rem;
        font-size: 0.7rem;
    }

    .sa-feature-title {
        font-size: 1.35rem;
    }

    .sa-feature-text {
        max-width: 100%;
    }

    .sa-feature-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

    .sa-btn-sponsor {
        width: 100%;
    }
}

/* ---------- Sponsor Program modal ---------- */
@media (max-width: 575.98px) {
    .sa-modal-header {
        padding: 1.25rem;
        gap: 0.75rem;
    }

    .sa-modal-header-icon {
        width: 2.35rem;
        height: 2.35rem;
        font-size: 0.95rem;
    }

    .sa-modal-title {
        font-size: 1.1rem;
    }

    .sa-modal-body {
        padding: 1.25rem;
    }

    .sa-amount-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-modal-trust-row {
        gap: 1rem;
        flex-wrap: wrap;
    }
}

/* ---------- Program Events page ---------- */
@media (max-width: 991.98px) {
    .sa-ev-section-title,
    .sa-rep-eyebrow {
        font-size: 35px;
    }

    /* All Events listing page (template-all-events.php), list view only —
       the 7-column thumbnail grid (events.css) has no built-in breakpoints
       of its own, so without this it stays 7-across down to phone width. */
    #saEvList:not(.sa-ev-list-grid) .sa-ev-gallery {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Tabs (All / per-pillar): the pillar labels are long ("Outreach:
   Implementation & Programmes"), and .sa-ev-tabs is display: inline-flex
   with no wrap of its own — once 4 of them can't all fit on one line,
   each tab's LABEL wraps onto 2 lines instead of the tab bar itself
   wrapping, which inflates every tab's height and makes the whole bar
   look oversized. Scoped to tablet only (≤991.98px) — small-laptop and
   desktop widths have enough room for all 4 tabs on one line already and
   must be left exactly as they are. */
@media (max-width: 991.98px) {
    .sa-ev-tabs {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .sa-ev-tab {
        flex: 1 1 auto;
        justify-content: center;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .sa-ev-section-title,
    .sa-rep-eyebrow {
        font-size: 28px;
    }

    .sa-ev-summary-card {
        padding: 1.35rem;
    }

    /* Toolbar: stack every control in its own full-width row instead of
       trying to fit them side by side (search kept ending up tiny next to
       the selects) — search, then the type select, then the sort select,
       each explicitly 100% wide so none of them look mismatched in size,
       then the view toggle centered as a compact pill below them. */
    .sa-ev-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .sa-ev-search-wrap {
        flex: none;
        width: 100%;
    }

    .sa-ev-filter-select {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .sa-ev-view-toggle {
        flex: none;
        align-self: center;
    }

    .sa-ev-view-btn {
        height: 2.75rem;
    }

    .sa-ev-list-grid {
        grid-template-columns: 1fr !important;
    }

    .sa-ev-gallery-two {
        grid-template-columns: 1fr;
        aspect-ratio: auto;
    }

    .sa-ev-gallery-featured {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .sa-ev-gallery-thumbs {
        flex-direction: row;
        height: auto;
    }

    .sa-ev-gallery-two .sa-ev-gallery-thumb {
        aspect-ratio: 4 / 3;
        flex: 1 1 0;
    }

    /* All Events listing page only — keep the 3-column thumbnail grid on
       mobile (just smaller) instead of stacking, so the gallery doesn't
       triple the card height on small screens. */
    #saEvPanelPast .sa-ev-gallery,
    #saEvPanelUpcoming .sa-ev-gallery {
        gap: 6px;
    }

    #saEvList:not(.sa-ev-list-grid) .sa-ev-gallery {
        grid-template-columns: repeat(4, 1fr);
    }

    #saEvPanelPast .sa-ev-gallery-thumb img,
    #saEvPanelUpcoming .sa-ev-gallery-thumb img {
        height: 78px;
    }
}

@media (max-width: 575.98px) {
    .sa-ev-summary-main {
        gap: 0.85rem;
    }

    .sa-ev-summary-icon {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1rem;
    }

    .sa-ev-card {
        padding: 1.25rem;
        padding-left: 1.5rem;
    }

    .sa-ev-card-actions {
        flex-direction: column;
    }

    .sa-ev-card-actions .sa-btn-sponsor {
        width: 100%;
    }

    .sa-ev-btn-directions {
        width: 100%;
    }
}

/* ---------- Program Impact & Report ---------- */
@media (max-width: 767.98px) {
    .sa-rep-hero-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 1.5rem;
    }

    .sa-rep-grid-2,
    .sa-rep-grid-3 {
        grid-template-columns: 1fr;
    }

    .sa-rep-grid-3 .sa-rep-card:last-child {
        grid-column: auto;
    }

    .sa-rep-mini-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .sa-rep-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .sa-rep-head-actions {
        width: 100%;
        justify-content: space-between;
    }

    .sa-rep-gauge {
        width: 7.5rem;
        height: 7.5rem;
    }

    .sa-rep-gauge-inner strong {
        font-size: 1.75rem;
    }

    .sa-rep-card {
        padding: 1.35rem;
    }

    .sa-rep-stat-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    #saEvList:not(.sa-ev-list-grid) .sa-ev-gallery {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    #saEvPanelPast .sa-ev-gallery-thumb img,
    #saEvPanelUpcoming .sa-ev-gallery-thumb img {
        height: 92px;
    }
}

/* ---------- Research & Knowledge Hub ---------- */
@media (max-width: 991.98px) {
    .mot-team {
        padding: 50px 15px 0px;
    }
    .sa-res-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sa-res-spotlight-accent {
        flex-basis: 12rem;
        padding: 1.5rem;
    }

    .sa-res-spotlight-body {
        padding: 1.5rem 1.75rem 1.75rem;
    }
}

@media (max-width: 767.98px) {
    .sa-res-spotlight-accent {
        height: 240px;
    }
    .sa-res-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .sa-res-spotlight {
        flex-direction: column;
    }

    .sa-res-spotlight-accent {
        flex-basis: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.75rem;
    }

    .sa-res-spotlight-icon {
        font-size: 2rem;
    }

    .sa-res-spotlight-meta {
        gap: 0.4rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .sa-res-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        margin-inline: -0.25rem;
        padding-inline: 0.25rem;
    }

    .sa-res-filter-chip {
        flex-shrink: 0;
    }

    .sa-res-spotlight-accent {
        padding: 1.25rem;
    }

    .sa-res-spotlight-body {
        padding: 1.25rem;
    }

    .sa-res-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ---------- Single Research Article ---------- */
/* Hidden by default (desktop): the floating TOC launcher/panel/backdrop
   only exist for mobile and tablet (built below). Unconditional (outside
   any @media block) so this is the resting state at every width until the
   tablet/mobile rule turns them on — on desktop the TOC stays exactly as
   it always was, a normal always-visible sidebar card. */
.sa-ra-toc-fab,
.sa-ra-toc-backdrop,
.sa-ra-toc-close {
    display: none;
}

@media (max-width: 991.98px) {
    .sa-ra-body h2,
    .sa-ra-card-title {
        font-size: 35px;
    }

    .sa-ra-cover {
        aspect-ratio: 16 / 9;
    }

    .sa-ra-layout {
        grid-template-columns: 1fr;
    }

    .sa-ra-sidebar {
        position: static;
        flex-direction: column;
    }

    /* Table of Contents: an inline card — whether left in place after the
       article or reordered/stickied above it — either pushed into the
       reading flow awkwardly or ended up overlapping the article text.
       Pull it out of the flow entirely instead: a small floating button
       in the bottom-right corner opens it as a fixed popover, closed by
       default so it can never block or push around any content. */
    .sa-ra-toc {
        position: fixed;
        right: 1.25rem;
        bottom: 5.25rem;
        left: 1.25rem;
        margin-left: auto;
        width: auto;
        max-width: 22rem;
        max-height: min(65vh, 30rem);
        overflow-y: auto;
        z-index: 1041;
        box-shadow: 0 1.5rem 3rem rgba(16, 24, 40, 0.25);
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.75rem);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .sa-ra-toc.sa-ra-toc-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .sa-ra-toc-list {
        max-height: none;
    }

    .sa-ra-toc-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 1.25rem;
        bottom: 1.25rem;
        width: 3.25rem;
        height: 3.25rem;
        border: none;
        border-radius: 50%;
        background-color: var(--green, #2fa878);
        color: #fff;
        font-size: 1.15rem;
        box-shadow: 0 0.75rem 1.75rem rgba(16, 24, 40, 0.28);
        z-index: 1041;
        transition: transform 0.2s ease;
    }

    .sa-ra-toc-fab:active {
        transform: scale(0.94);
    }

    .sa-ra-toc-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        margin-left: auto;
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        background-color: var(--cream-bg, #f8f4ee);
        color: var(--navy-heading, #16213e);
        font-size: 0.75rem;
    }

    .sa-ra-toc-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(16, 24, 40, 0.35);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }

    .sa-ra-toc-backdrop.sa-ra-toc-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease;
    }
}

@media (max-width: 767.98px) {
    .sa-ra-body h2,
    .sa-ra-card-title {
        font-size: 28px;
    }

    .sa-ra-highlight {
        padding-left: 1.35rem;
    }
}

@media (max-width: 575.98px) {
    .sa-ra-title {
        font-size: 1.6rem;
    }

    .sa-ra-cover {
        aspect-ratio: 4 / 3;
        margin-top: 1.5rem;
    }

    .sa-ra-share {
        flex-wrap: wrap;
    }

    .sa-ra-card {
        padding: 1.35rem;
    }

    .sa-ra-factor {
        gap: 0.85rem;
    }
}

/* ---------- Single Event Detail ---------- */
/* .sa-evd-layout is a sticky-sidebar grid (1fr main + 20rem sidebar). The
   sidebar's cards (Quick Info, More Events) can end up taller than the
   sticky "top" offset expects once the main column's content re-flows at
   a narrower width, so the two columns visually collide/overlap on small
   laptop screens. Drop to a single stacked column earlier (small-laptop
   width) instead of only at tablet, to stay ahead of that collision. */
@media (max-width: 1399.98px) {
    .sa-evd-layout {
        grid-template-columns: 1fr;
    }

    .sa-evd-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sa-evd-sidebar .sa-rep-card {
        flex: 1 1 16rem;
    }
}

@media (max-width: 991.98px) {
    .sa-evd-section-title {
        font-size: 35px;
    }

    .sa-evd-report-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .sa-evd-cover {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767.98px) {
    .sa-evd-section-title {
        font-size: 28px;
    }

    .sa-evd-volunteers-head {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sa-evd-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sa-evd-rate-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 1rem;
    }

    .sa-evd-funnel-row {
        grid-template-columns: 4.5rem 1fr 3rem;
        gap: 0.5rem;
    }

    .sa-evd-volunteers-grid {
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    }
}

@media (max-width: 575.98px) {
    .sa-evd-title {
        font-size: 1.6rem;
    }

    .sa-evd-share {
        flex-wrap: wrap;
    }

    .sa-evd-countdown {
        justify-content: center;
    }

    .sa-evd-countdown-item {
        width: 4rem;
        height: 4rem;
    }

    .sa-evd-cover {
        aspect-ratio: 4 / 3;
    }

    .sa-evd-stat-grid {
        grid-template-columns: 1fr;
    }

    .sa-evd-funnel-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        text-align: left;
    }

    .sa-evd-funnel-value {
        text-align: left;
    }

    .sa-evd-volunteers-grid {
        grid-template-columns: 1fr;
    }

    .sa-evd-sidebar {
        flex-direction: column;
    }

    .sa-evd-sidebar-actions .sa-btn-sponsor,
    .sa-evd-btn-secondary,
    .sa-evd-btn-outline {
        width: 100%;
    }
}

/* ---------- Impact & Reports page ---------- */
@media (max-width: 991.98px) {
    .sa-imp-jumpnav {
        top: var(--header-h, 127px);
    }

    .sa-imp-title {
        font-size: 35px;
    }

    .sa-imp-compliance-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .sa-imp-compliance-status,
    .sa-imp-compliance-dl {
        justify-self: start;
    }

    .sa-imp-sdg-card {
        flex-basis: 100%;
    }

    .sa-imp-gen-row-split {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sa-imp-prog-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sa-imp-prog-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .sa-imp-title {
        font-size: 28px;
    }

    .sa-imp-section {
        padding-block: 3rem;
    }

    .sa-imp-head {
        margin-bottom: 2.25rem;
    }

    .sa-imp-prog-grid {
        grid-template-columns: 1fr;
    }

    .sa-imp-prog-card:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .sa-imp-insights-cols {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sa-imp-event-grid {
        grid-template-columns: 1fr;
    }

    .sa-imp-event-top {
        flex-wrap: wrap;
    }

    .sa-imp-progroup-head {
        flex-wrap: wrap;
        padding: 1.1rem 1.25rem;
    }

    .sa-imp-progroup-count {
        margin-left: 3.75rem;
    }

    .sa-imp-progroup-body-content {
        padding: 1.25rem;
    }

    .sa-imp-rowcard {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-imp-rowcard-link {
        align-self: flex-start;
    }

    .sa-imp-compliance-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .sa-imp-compliance-status,
    .sa-imp-compliance-dl {
        justify-self: start;
    }

    .sa-imp-campaign-meta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .sa-imp-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

    .sa-imp-hero-actions .btn {
        width: 100%;
    }

    .sa-imp-mini-stat-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-imp-sdg-stats {
        grid-template-columns: 1fr 1fr;
    }

    .sa-imp-generator-card {
        padding: 1.35rem;
    }

    .sa-imp-gen-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-imp-gen-actions .btn {
        width: 100%;
    }
}

/* ---------- MCA Form CSR-2 page ---------- */
@media (max-width: 991.98px) {
    .sa-csr-card-head h2 {
        font-size: 35px;
    }

    .sa-csr-layout {
        grid-template-columns: 1fr;
    }

    .sa-csr-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sa-csr-toc-card,
    .sa-csr-help-card {
        flex: 1 1 16rem;
    }

    .sa-csr-toc-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sa-csr-toc-list a {
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .sa-csr-card-head h2 {
        font-size: 28px;
    }

    .sa-csr-card-head {
        flex-wrap: wrap;
    }

    .sa-csr-table-head {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sa-csr-attachment-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sa-csr-meta-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-csr-meta-actions {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .sa-csr-row-2,
    .sa-csr-row-3 {
        grid-template-columns: 1fr;
    }

    .sa-csr-sidebar {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .sa-csr-title {
        font-size: 1.75rem;
    }

    .sa-csr-card {
        padding: 1.35rem;
    }

    .sa-csr-bottom-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-csr-bottom-actions .btn,
    .sa-csr-bottom-actions .sa-csr-btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Fundraising Campaigns hub page ---------- */
@media (max-width: 767.98px) {
    .sa-cmp-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-cmp-sort {
        width: 100%;
    }

    .sa-cmp-card {
        flex-basis: 100%;
    }
}

/* ---------- Single Campaign page ---------- */
@media (max-width: 991.98px) {
    .sa-cd-card-title,
    .sa-cd-related-title {
        font-size: 35px;
    }

    .sa-cd-layout {
        grid-template-columns: 1fr;
    }

    .sa-cd-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sa-cd-donate-card,
    .sa-cd-facts-card,
    .sa-cd-share-card {
        flex: 1 1 16rem;
    }

    .sa-cd-cover-media {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767.98px) {
    .sa-cd-card-title,
    .sa-cd-related-title {
        font-size: 28px;
    }

    .sa-cd-timeline-head {
        flex-wrap: wrap;
    }

    .sa-cd-facts-list li {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .sa-cd-title {
        font-size: 1.6rem;
    }

    .sa-cd-cover-media {
        aspect-ratio: 4 / 3;
    }

    .sa-cd-allocation {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-cd-allocation-chart {
        max-width: 100%;
        margin: 0 auto;
    }

    .sa-cd-sidebar {
        flex-direction: column;
    }

    .sa-cd-related-card {
        flex-direction: column;
    }

    .sa-cd-related-card img {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 575.98px) {
    .sa-cd-card {
        padding: 1.35rem;
    }

    .sa-cd-amount-grid {
        grid-template-columns: 1fr;
    }

    .sa-cd-donate-stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ---------- Invest & Partner page ---------- */
@media (max-width: 991.98px) {
    .sa-inv-title {
        font-size: 35px;
    }

    .sa-inv-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sa-inv-hero-stats {
        max-width: 28rem;
    }

    .sa-inv-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 7.5rem;
    }

    .sa-inv-bento-tile-featured {
        grid-column: span 2;
        grid-row: span 1;
    }

    .sa-inv-bento-tile-tall {
        grid-row: span 1;
    }

    /* The featured/tall tiles drop from a 2-row-tall box down to the same
       7.5rem single row as every other tile above, but their decorative
       watermark icon (8rem, sized for the full-height desktop version) and
       padding didn't shrink with them — at this height the watermark is
       bigger than the tile itself, clipping over the badge and label so
       the tile reads as empty. Scale both down to fit. */
    .sa-inv-bento-tile-featured,
    .sa-inv-bento-tile-tall {
        padding: 1rem 1.1rem;
    }

    .sa-inv-bento-tile-featured .sa-inv-bento-watermark,
    .sa-inv-bento-tile-tall .sa-inv-bento-watermark {
        font-size: 4rem;
        top: -0.5rem;
        right: -0.5rem;
    }

    .sa-inv-bento-tile.sa-inv-bento-tile-featured strong {
        font-size: 2rem;
    }

    .sa-inv-bento-tile.sa-inv-bento-tile-tall strong {
        font-size: 1.5rem;
    }

    .sa-inv-bento-tile-featured .sa-inv-bento-badge,
    .sa-inv-bento-tile-tall .sa-inv-bento-badge {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {
    .sa-inv-title {
        font-size: 28px;
    }

    .sa-inv-gov-card {
        padding: 1.35rem;
    }

    .sa-inv-hero-title {
        font-size: 2rem;
    }

    .sa-inv-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .sa-inv-path {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .sa-inv-path-track { display: none; }

    .sa-inv-path-node {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
    }

    .sa-inv-path-circle {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.1rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .sa-inv-path-node-active .sa-inv-path-circle { transform: none; }

    .sa-inv-path-node-active .sa-inv-path-circle::after { inset: -0.3rem; }

    .sa-inv-journeymap-stop {
        gap: 1rem;
        margin-bottom: 2.5rem;
    }

    .sa-inv-journeymap-stop-a .sa-inv-journeymap-marker { transform: translateX(-0.7rem); }
    .sa-inv-journeymap-stop-b .sa-inv-journeymap-marker { transform: translateX(0.7rem); }

    .sa-inv-journeymap-marker {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 0.95rem;
    }

    .sa-inv-roadmap-marker-done,
    .sa-inv-roadmap-marker-progress { font-size: 1.05rem; }

    .sa-inv-roadmap-card { padding: 1.25rem; }

    .sa-inv-roadmap-card-top {
        flex-wrap: wrap;
    }

    .sa-inv-sponsor-row {
        flex-wrap: wrap;
    }

    .sa-inv-sponsor-row-head {
        flex-wrap: wrap;
    }

    .sa-inv-sponsor-link {
        width: 100%;
        justify-content: flex-end;
    }

    .sa-inv-gov-tab {
        flex: 1 1 auto;
        text-align: center;
    }
    .sa-inv-bento-tile-featured {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 575.98px) {
    .sa-inv-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .sa-inv-hero-actions .btn {
        width: 100%;
    }

    .sa-inv-hero-stats {
        grid-template-columns: 1fr;
    }

    .sa-inv-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .sa-inv-bento-tile,
    .sa-inv-bento-tile-featured,
    .sa-inv-bento-tile-tall {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 6.5rem;
    }

    .sa-inv-impact-banner {
        padding: 1.5rem;
    }

    .sa-inv-gov-card {
        padding: 1.35rem;
    }

    .sa-inv-deck-inner {
        padding: 0 0.5rem;
    }
}

/* ---------- Get Involved page ---------- */
@media (max-width: 991.98px) {
    .sa-gi-title,
    .sa-gi-cta-inner h2 {
        font-size: 35px;
    }

    .sa-gi-contact-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .sa-gi-contact-side {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sa-gi-touch-card { flex: 1 1 20rem; }
    .sa-gi-compliance-row { flex: 1 1 20rem; align-content: flex-start; }
}

@media (max-width: 767.98px) {
    .sa-gi-title,
    .sa-gi-cta-inner h2 {
        font-size: 28px;
    }

    .sa-gi-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
    }

    .sa-gi-way-card { max-width: 100%; }

    .sa-gi-touch-card { padding: 1.35rem; }

    .sa-gi-contact-side { flex-direction: column; }

    .sa-gi-form-card { padding: 1.5rem; }
    .sa-gi-compliance-row { flex: 1; }
}

@media (max-width: 575.98px) {
    .sa-gi-hero-stats {
        grid-template-columns: 1fr;
    }

    .sa-gi-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-gi-hero-actions .btn,
    .sa-gi-hero-ghost-btn {
        justify-content: center;
        text-align: center;
    }
}

/* ---------- Login page ---------- */
@media (max-width: 991.98px) {
    .sa-login-split {
        grid-template-columns: 1fr;
        max-width: 34rem;
        padding: 6rem 1.5rem 3rem;
        gap: 2.5rem;
        text-align: center;
    }

    .sa-login-brand-panel > p { margin-inline: auto; }

    .sa-login-feature-row { justify-content: center; }

    .sa-login-card {
        max-width: 100%;
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 575.98px) {
    .sa-login-split { padding: 5.5rem 1.25rem 2.5rem; }

    .sa-login-card { padding: 2.25rem 1.5rem; }

    .sa-login-card h2 { font-size: 1.5rem; }

    .sa-login-back {
        top: 1.25rem;
        left: 1.25rem;
        font-size: 0.82rem;
    }
}

/* ---------- Home page ---------- */
@media (max-width: 991.98px) {
    .mission-title,
    .programs-title,
    .values-title,
    .sponsor-title,
    .campaign-title,
    .about-title,
    .mv-title,
    .features-title,
    .empower-title {
        font-size: 35px;
    }

    .mv-image {
        height: 22rem;
    }

    .pf-media {
        width: 11rem;
    }

    /* .pf-content shrinks a lot once the row is squeezed at tablet/small-
       laptop widths. .pf-pill uses white-space: nowrap in style.css (fine
       on desktop, where the row is wide enough) — here that would force a
       long metric label past the card's edge instead of wrapping, and the
       button/content could do the same, so cap them to the column width. */
    .pf-content,
    .pf-btn {
        max-width: 100%;
    }

    .pf-pill {
        white-space: normal;
        max-width: 100%;
    }

    .event-item {
        flex-wrap: wrap;
    }

    .event-item-cta .btn-support {
        white-space: normal;
    }

    /* .hero-title is fixed at 65px in style.css and only shrinks via
       max-height queries there — add a width-based fallback too, since a
       tall-but-narrow phone (e.g. 390x844) can be under neither max-height
       breakpoint and would otherwise keep the full 65px headline. */
    .hero-title {
        font-size: clamp(2rem, 6vw, 3.25rem);
    }
}

/* Programs section ("Outreach / Research / Advocacy" cards) and the Theory
   of Change section (the 01–05 numbered cards) both use Bootstrap's
   row-cols-md-3, which jumps to 3 columns right at the 768px tablet
   breakpoint — too many for a tablet-width container, so every card gets
   squeezed and the copy/icons overlap. Force 2 columns for the tablet
   range only; row-cols-lg-5 already takes back over at 992px for Theory
   of Change, and row-cols-1 already covers phones for both. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .programs-section .row-cols-md-3 > .col,
    .theory-cards-row.row-cols-md-3 > .col {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* "Fund a Program" cards (.pf-row) stay a horizontal row (media + connector
   icon + content) at tablet width, but the narrower row forces .pf-pills to
   wrap onto 2-3 lines, making .pf-content much taller than the fixed-height
   image. With align-items: center (set in style.css) that centers the
   image/icon in that extra height, leaving them floating with a big empty
   gap above/below — align to the top instead so everything lines up flush
   with the title, like it already does on both desktop and mobile. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pf-row,
    .pf-row-reverse {
        align-items: flex-start;
    }
}

/* Home page "Past Events" list (.event-item): at tablet width the fixed
   date-chip + thumbnail + the "View Event Details" button all stay in one
   row alongside the title/description, squeezing the text column down to
   almost nothing. Reuse the same stacking pattern style.css already applies
   on phones (body + button drop to their own full-width rows below the
   date/thumbnail) for the tablet band too, so the text has room to breathe. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .event-item {
        flex-wrap: wrap;
    }

    .event-item-body {
        order: 3;
        flex-basis: 100%;
    }

    .event-item-cta {
        order: 4;
        flex-basis: 100%;
    }

    .event-item-cta .btn-support {
        width: 100%;
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    .mission-title,
    .programs-title,
    .values-title,
    .sponsor-title,
    .campaign-title,
    .about-title,
    .mv-title,
    .features-title,
    .empower-title {
        font-size: 28px;
    }
}

/* ---------- Home page: "Support a Campaign" slider (Swiper coverflow) ---------- */
@media (max-width: 991.98px) {
    .campaign-swiper .swiper-slide {
        width: 17rem;
    }
}

@media (max-width: 767.98px) {
    .campaign-swiper {
        padding-block: 0.5rem 4rem;
    }

    .campaign-swiper .swiper-slide {
        width: 15rem;
    }

    .campaign-swiper-prev {
        left: calc(50% - 4rem);
    }

    .campaign-swiper-next {
        left: calc(50% + 1.25rem);
    }
}

@media (max-width: 575.98px) {
    .campaign-swiper .swiper-slide {
        width: 13rem;
    }
}

/* ---------- Founder page ---------- */
@media (max-width: 991.98px) {
    .fnd-chapter-label {
        flex: 0 0 7rem;
    }
}

/* ---------- Meet Our Team page ---------- */
@media (max-width: 991.98px) {
    .mot-section-title {
        font-size: 35px;
    }
}

@media (max-width: 767.98px) {
    .mot-section-title {
        font-size: 28px;
    }
}

/* ---------- Resources page — Video & Infographics ---------- */
@media (max-width: 1024px) {
    .sa-vi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .sa-vi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .sa-vi-filters {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
    }

    .sa-vi-modal-body {
        padding: 20px 20px 24px;
    }
}

@media (max-width: 575.98px) {
    .sa-vi-grid {
        grid-template-columns: 1fr;
    }

    .sa-vi-card-thumb {
        height: 180px;
    }
}