/* ============================================
   CHELVANAYAKAM MEMORIAL TRUST
   Responsive — Breakpoints & mobile layouts
   ============================================ */

/* ─── SMALL PHONES (up to 480px) ─── */
@media (max-width: 480px) {
    :root {
        --section-pad-y: 64px;
        --container-pad-x: 16px;
    }

    .header__status-badge {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + 20px);
        padding-bottom: 48px;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }

    .hero__trust-badge {
        padding: 4px 12px 4px 6px;
        gap: 8px;
        margin-bottom: 18px;
    }

    .hero__avatar {
        width: 24px;
        height: 24px;
    }

    .hero__trust-text {
        font-size: 0.74rem;
    }

    .hero__heading {
        font-size: clamp(21px, 6.8vw, 34px);
        gap: 8px;
        margin-bottom: 18px;
        line-height: 1.25;
        padding: 0 4px;
    }

    .hero__heading-row {
        gap: 6px;
        justify-content: center;
        text-align: center;
    }

    .hero__chip {
        display: none !important;
    }

    .hero__supporting-copy,
    .edu-hero__lead {
        font-size: 0.92rem;
        margin-bottom: 24px;
    }

    .hero__cta-group {
        gap: 10px;
        margin-bottom: 28px;
        width: 100%;
    }

    .hero__btn-primary,
    .hero__btn-outline {
        width: 100%;
        height: 48px;
        padding: 12px 20px;
        font-size: 0.82rem;
        justify-content: center;
    }

    .hero__showcase-perspective {
        padding: 0 16px;
    }

    .cmt-statement-title {
        font-size: clamp(1.4rem, 6.2vw, 2rem);
        margin-bottom: 24px;
    }

    .cmt-category-pills {
        gap: 8px;
    }

    .cmt-cat-pill {
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    .cmt-bento-section .cmt-section-header {
        margin-bottom: 50px;
    }

    .cmt-bento-card {
        min-height: auto;
    }

    .cmt-bento-card--metrics {
        padding: 24px 20px;
    }

    .cmt-metrics-list {
        gap: 20px;
    }

    .cmt-metric-val {
        font-size: 2.4rem;
    }

    .cmt-stacking-section {
        min-height: auto;
        padding-top: 24px;
        padding-bottom: 44px;
    }

    .cmt-stacking-section .cmt-section-header {
        margin-top: 0;
        margin-bottom: 58px;
        position: relative;
        z-index: 2;
    }

    .cmt-stacking-section .cmt-watermark {
        top: 75px;
    }

    .cmt-stacking-cards-container {
        height: clamp(520px, 75vh, 600px);
        padding: 0 12px;
    }

    .cmt-stack-card {
        left: 12px;
        right: 12px;
        min-height: auto;
        border-radius: 20px;
    }

    .cmt-stack-card__content {
        padding: 22px 18px;
    }

    .cmt-stack-card__title {
        font-size: 1.35rem;
        margin-bottom: 8px;
    }

    /* Read More button on mobile */
    .cmt-card-readmore-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        margin-bottom: 10px;
        font-family: var(--font-body);
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--white);
        background: rgba(11, 113, 112, 0.22);
        border: 1px solid rgba(11, 113, 112, 0.45);
        border-radius: 999px;
        cursor: pointer !important;
        transition: all var(--transition-fast);
        width: fit-content;
        position: relative;
        z-index: 15;
        pointer-events: auto !important;
    }

    .cmt-card-readmore-btn:hover {
        background: rgba(11, 113, 112, 0.38);
    }

    .cmt-card-readmore-icon {
        transition: transform 0.25s ease;
    }

    .cmt-stack-card.is-expanded .cmt-card-readmore-icon {
        transform: rotate(180deg);
    }

    /* Paragraph hidden by default so photo is visible */
    .cmt-stack-card__desc {
        display: none;
        font-size: 0.84rem;
        line-height: 1.48;
        color: rgba(255, 255, 255, 0.92);
        margin-bottom: 12px;
        background: rgba(14, 16, 18, 0.88);
        padding: 10px 12px;
        border-radius: 12px;
        border-left: 2.5px solid var(--cmt-primary);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .cmt-stack-card.is-expanded .cmt-stack-card__desc {
        display: block;
        animation: cmtCardDescFade 0.25s ease-out forwards;
    }

    .cmt-stack-card__tags {
        gap: 5px;
        margin-bottom: 14px;
    }

    .cmt-stack-card .cmt-tag {
        font-size: 0.68rem;
        padding: 3px 9px;
        letter-spacing: 0.01em;
    }

    /* Focus Areas (What We Deliver) — Compact Card for Small Phones */
    .cmt-focus-section {
        padding-top: 32px;
        padding-bottom: 42px;
    }

    .cmt-focus-section .cmt-section-header {
        margin-bottom: 18px;
    }

    .cmt-tabs-nav {
        gap: 4px;
        margin-bottom: 16px;
        justify-content: center;
    }

    .cmt-tab-btn {
        padding: 5px 11px;
        font-size: 0.72rem;
        gap: 5px;
    }

    .cmt-tab-showcase-container {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        max-width: 100%;
        overflow: visible;
    }

    .cmt-tab-content-card {
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: visible;
    }

    /* Standalone photo card (3:4 aspect ratio - compact size) */
    .cmt-tab-visual {
        position: relative;
        inset: auto;
        width: min(82%, 240px);
        margin: 0 auto;
        aspect-ratio: 3 / 4;
        height: auto;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .cmt-tab-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cmt-tab-visual::after {
        display: none;
    }

    /* Content placed outside and under the card */
    .cmt-tab-details {
        position: relative;
        inset: auto;
        padding: 16px 2px 0;
        max-width: 100%;
    }

    .cmt-tab-details-title {
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 750;
        color: var(--graphite);
        margin-bottom: 6px;
        line-height: 1.25;
    }

    .cmt-tab-details-text {
        font-family: var(--font-body);
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--body-grey);
        margin-bottom: 12px;
    }

    .cmt-tab-features {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .cmt-tab-feature-pill {
        background: rgba(0, 0, 0, 0.05);
        color: var(--charcoal);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 0.7rem;
        font-weight: 500;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Heritage Profile Section — Move Card Down Slightly on Mobile */
    .cmt-heritage-section .cmt-section-header {
        margin-bottom: 46px;
    }

    .cmt-heritage-grid {
        gap: 32px;
    }

    .cmt-heritage-stamp-wrap {
        width: clamp(70px, 18vw, 86px);
        height: clamp(70px, 18vw, 86px);
        bottom: 12px;
        right: 12px;
    }

    /* Sponsorship Plans Section — Move Watermark Down on Mobile */
    .cmt-pricing-section .cmt-watermark {
        top: 130px;
    }

    .cmt-contact-card {
        padding: 28px 20px;
    }

    .cmt-footer-container {
        padding: 36px 18px;
    }

    .cmt-footer-giant-wordmark {
        margin-top: clamp(20px, 4vw, 36px);
        margin-bottom: 4px;
    }

    .cmt-footer-giant-wordmark span {
        font-size: clamp(4.2rem, 22vw, 7.5rem);
        letter-spacing: 0.03em;
    }

    .cmt-footer-nav-cols {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 24px;
    }

    /* Running Strips (Infinite Marquee) — Compact Height for Mobile */
    .cmt-marquee-wrapper {
        padding: 28px 0;
        margin: 10px 0 0;
    }

    .cmt-marquee-strip {
        padding: 8px 0;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .cmt-marquee-content {
        gap: 16px;
        padding-right: 16px;
    }

    .cmt-marquee-item {
        font-size: 0.78rem;
    }

    .cmt-marquee-star {
        font-size: 0.65rem;
    }

    .floating-donate-cta {
        bottom: 16px;
        right: 16px;
        padding: 9px 15px 9px 12px;
        font-size: 0.72rem;
        gap: 6px;
        box-shadow: 0 6px 20px -2px rgba(220, 38, 38, 0.48);
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    }

    .floating-donate-cta.is-hidden-footer {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(24px) scale(0.85) !important;
        visibility: hidden !important;
    }

    .floating-donate-cta__icon--heart svg {
        width: 14px;
        height: 14px;
    }

    .floating-donate-cta__icon--arrow svg {
        width: 14px;
        height: 14px;
    }
}


/* ─── PHONES (481px – 768px) ─── */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --section-pad-y: 72px;
        --container-pad-x: 24px;
    }

    .header__status-badge {
        display: none;
    }

    .hero {
        padding-top: calc(var(--header-height) + 24px);
        padding-bottom: 56px;
    }

    .hero__heading {
        font-size: clamp(32px, 6.8vw, 46px);
    }

    .hero__chip {
        display: none !important;
    }

    .impact__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .impact__stat::after {
        display: none;
    }

    /* Running Strips (Infinite Marquee) — Compact Height for Mobile */
    .cmt-marquee-wrapper {
        padding: 34px 0;
        margin: 12px 0 0;
    }

    .cmt-marquee-strip {
        padding: 10px 0;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }

    .cmt-marquee-content {
        gap: 20px;
        padding-right: 20px;
    }

    .cmt-marquee-item {
        font-size: 0.84rem;
    }

    .cmt-marquee-star {
        font-size: 0.7rem;
    }

    .cmt-bento-section .cmt-section-header {
        margin-bottom: 58px;
    }

    .cmt-bento-card {
        min-height: auto;
    }

    .cmt-stacking-section {
        min-height: auto;
        padding-top: 28px;
        padding-bottom: 50px;
    }

    .cmt-stacking-section .cmt-section-header {
        margin-top: 0;
        margin-bottom: 68px;
        position: relative;
        z-index: 2;
    }

    .cmt-stacking-section .cmt-watermark {
        top: 80px;
    }

    .cmt-stacking-cards-container {
        height: clamp(520px, 72vh, 620px);
        padding: 0 16px;
    }

    .cmt-stack-card {
        left: 16px;
        right: 16px;
        min-height: auto;
        border-radius: 24px;
    }

    .cmt-stack-card__content {
        padding: 28px 24px;
    }

    .cmt-stack-card__title {
        font-size: 1.55rem;
        margin-bottom: 10px;
    }

    /* Read More button on mobile */
    .cmt-card-readmore-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 14px;
        margin-bottom: 12px;
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--white);
        background: rgba(11, 113, 112, 0.22);
        border: 1px solid rgba(11, 113, 112, 0.45);
        border-radius: 999px;
        cursor: pointer !important;
        transition: all var(--transition-fast);
        width: fit-content;
        position: relative;
        z-index: 15;
        pointer-events: auto !important;
    }

    .cmt-card-readmore-btn:hover {
        background: rgba(11, 113, 112, 0.38);
    }

    .cmt-card-readmore-icon {
        transition: transform 0.25s ease;
    }

    .cmt-stack-card.is-expanded .cmt-card-readmore-icon {
        transform: rotate(180deg);
    }

    /* Paragraph hidden by default so photo is visible */
    .cmt-stack-card__desc {
        display: none;
        font-size: 0.88rem;
        line-height: 1.52;
        color: rgba(255, 255, 255, 0.92);
        margin-bottom: 14px;
        background: rgba(14, 16, 18, 0.88);
        padding: 12px 16px;
        border-radius: 12px;
        border-left: 2.5px solid var(--cmt-primary);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .cmt-stack-card.is-expanded .cmt-stack-card__desc {
        display: block;
        animation: cmtCardDescFade 0.25s ease-out forwards;
    }

    .cmt-stack-card__tags {
        gap: 6px;
        margin-bottom: 16px;
    }

    .cmt-stack-card .cmt-tag {
        font-size: 0.72rem;
        padding: 4px 11px;
        letter-spacing: 0.01em;
    }

    /* Focus Areas (What We Deliver) — Compact Card for Mobile */
    .cmt-focus-section {
        padding-top: 36px;
        padding-bottom: 48px;
    }

    .cmt-focus-section .cmt-section-header {
        margin-bottom: 20px;
    }

    .cmt-tabs-nav {
        gap: 6px;
        margin-bottom: 18px;
        justify-content: center;
    }

    .cmt-tab-btn {
        padding: 6px 14px;
        font-size: 0.78rem;
        gap: 6px;
    }

    .cmt-tab-dot {
        width: 5px;
        height: 5px;
    }

    .cmt-tab-showcase-container {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        max-width: 100%;
        overflow: visible;
    }

    .cmt-tab-content-card {
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: visible;
    }

    /* Standalone photo card (3:4 aspect ratio - compact size) */
    .cmt-tab-visual {
        position: relative;
        inset: auto;
        width: min(82%, 280px);
        margin: 0 auto;
        aspect-ratio: 3 / 4;
        height: auto;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .cmt-tab-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cmt-tab-visual::after {
        display: none;
    }

    /* Content placed outside and under the card */
    .cmt-tab-details {
        position: relative;
        inset: auto;
        padding: 18px 4px 0;
        max-width: 100%;
    }

    .cmt-tab-details-title {
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-weight: 750;
        color: var(--graphite);
        margin-bottom: 8px;
        line-height: 1.25;
    }

    .cmt-tab-details-text {
        font-family: var(--font-body);
        font-size: 0.88rem;
        line-height: 1.55;
        color: var(--body-grey);
        margin-bottom: 14px;
    }

    .cmt-tab-features {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .cmt-tab-feature-pill {
        background: rgba(0, 0, 0, 0.05);
        color: var(--charcoal);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 999px;
        padding: 5px 12px;
        font-size: 0.74rem;
        font-weight: 500;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .cmt-bg-marquee-strip {
        opacity: 0.45;
        transition: top 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cmt-bg-marquee-track {
        font-size: 2.2rem;
    }

    /* Heritage Profile Section — Move Card Down Slightly on Mobile */
    .cmt-heritage-section .cmt-section-header {
        margin-bottom: 54px;
    }

    .cmt-heritage-grid {
        gap: 36px;
    }

    /* Sponsorship Plans Section — Move Watermark Down on Mobile */
    .cmt-pricing-section .cmt-watermark {
        top: 140px;
    }

    .floating-donate-cta {
        bottom: 20px;
        right: 20px;
        padding: 11px 18px 11px 15px;
        font-size: 0.76rem;
        gap: 8px;
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    }

    .floating-donate-cta.is-hidden-footer {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(24px) scale(0.85) !important;
        visibility: hidden !important;
    }
}


/* ─── TABLETS (769px – 1023px) ─── */
@media (min-width: 769px) and (max-width: 1023px) {
    :root {
        --section-pad-y: 100px;
        --container-pad-x: 5vw;
    }

    .hero {
        padding-top: calc(var(--header-height) + 32px);
        min-height: auto;
    }

    .hero__heading {
        font-size: clamp(44px, 5.8vw, 60px);
    }

    .hero__chip {
        width: 66px;
        height: 48px;
    }
}


/* ─── SMALL DESKTOP (1024px – 1279px) ─── */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --container-pad-x: 5vw;
    }

    .hero__title {
        font-size: 5rem;
    }
}


/* ─── LARGE DESKTOP (1280px – 1439px) ─── */
@media (min-width: 1280px) and (max-width: 1439px) {
    .hero__title {
        font-size: 6rem;
    }
}


/* ─── EXTRA LARGE (1440px+) ─── */
@media (min-width: 1440px) {
    .hero__title {
        font-size: 7.5rem;
    }

    .hero__inner {
        gap: 80px;
    }
}


/* ─── MOBILE NAVIGATION ─── */
@media (max-width: 1023px) {
    .header__nav {
        display: none;
    }

    .header__donate-btn {
        display: none;
    }

    /* Make sure mobile menu is usable */
    .mobile-menu__inner {
        padding-top: calc(var(--header-height) + 20px);
        justify-content: flex-start;
        padding-bottom: 40px;
        overflow-y: auto;
    }
}


/* ─── TOUCH DEVICE ADJUSTMENTS ─── */
@media (hover: none) {
    /* Remove hover-dependent gallery overlays on touch */
    .gallery__category,
    .gallery__location {
        opacity: 1;
        transform: translateY(0);
    }

    .gallery__overlay {
        background: linear-gradient(to top, rgba(17, 21, 21, 0.5) 0%, transparent 60%);
    }

    /* Disable custom cursor on touch */
    .cursor {
        display: none !important;
    }

    body,
    a,
    button,
    [data-cursor-hover] {
        cursor: auto !important;
    }
}


/* ─── SECTION-SPECIFIC MOBILE OVERRIDES ─── */

/* Legacy section - stack on mobile */
@media (max-width: 1023px) {
    .legacy__inner {
        gap: 32px;
    }

    .legacy__media {
        position: relative;
        max-width: 300px;
    }

    .legacy__portrait-wrapper {
        aspect-ratio: 1 / 1;
    }

    .legacy__quote-marks {
        font-size: 4rem;
    }
}

/* Principles - no sticky on mobile */
@media (max-width: 1023px) {
    .principles__header {
        position: relative;
        top: auto;
    }
}

/* Displacement section - shorter on mobile */
@media (max-width: 767px) {
    .section--displacement {
        min-height: 50vh;
    }

    .displacement__quote p {
        font-size: 1rem;
    }
}

/* Map section - stack on mobile */
@media (max-width: 767px) {
    .map__visual {
        order: -1;
    }

    .map__svg {
        max-width: 260px;
    }
}

/* Activities - no alternating direction on mobile */
@media (max-width: 767px) {
    .activity:nth-child(even) {
        direction: ltr;
    }

    .activity__media {
        aspect-ratio: 16 / 9;
    }
}

/* Contact form - single column on mobile */
@media (max-width: 599px) {
    .contact__form {
        grid-template-columns: 1fr;
    }

    .form__group--full {
        grid-column: auto;
    }
}

/* Footer - stack on mobile */
@media (max-width: 767px) {
    .footer__main {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ─── DONATION CARDS MOBILE ─── */
@media (max-width: 767px) {
    .donation__grid {
        grid-template-columns: 1fr;
    }

    .donation__cta-heading {
        font-size: 1.5rem;
    }

    .donation__cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .donation__cta-buttons .btn {
        justify-content: center;
    }
}


/* ─── CHALLENGES MOBILE ─── */
@media (max-width: 767px) {
    .challenge {
        gap: 8px;
    }

    .challenge__header {
        gap: 10px;
    }

    .challenge__number {
        font-size: 1.2rem;
    }
}

/* ─── INSTITUTIONAL COMMENDATIONS TABLE (Mobile & Tablet) ─── */
@media (max-width: 768px) {
    .cmt-table-wrap {
        border-top: none;
    }

    .cmt-table-row--header {
        display: none !important;
    }

    .cmt-table-row {
        grid-template-columns: 1fr !important;
        gap: 8px;
        padding: 16px 14px;
        margin-bottom: 12px;
        background: var(--white);
        border: 1px solid rgba(0, 0, 0, 0.07);
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    }

    .cmt-table-row:not(.cmt-table-row--header):hover {
        padding-left: 14px;
        transform: translateY(-2px);
    }

    .cmt-table-cell--org {
        font-size: 0.98rem;
        color: var(--graphite);
    }

    .cmt-table-cell--award {
        font-size: 0.88rem;
        color: var(--body-grey);
        line-height: 1.45;
    }

    .cmt-table-cell--year {
        text-align: left !important;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--cmt-primary);
        display: inline-flex;
        align-items: center;
        background: var(--cmt-primary-bg);
        padding: 2px 10px;
        border-radius: 999px;
        width: fit-content;
    }
}

/* ─── PRINT STYLES ─── */
@media print {
    .loader,
    .cursor,
    .scroll-progress,
    .header,
    .mobile-menu,
    .hero__bg-elements,
    .hero__scroll-indicator,
    .footer__top-link,
    .floating-donate-cta {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .section--legacy,
    .section--quote {
        background: #fff;
        color: #000;
    }

    .section--legacy *,
    .section--quote * {
        color: #000 !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__title-word {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__image-wrapper {
        clip-path: none !important;
    }
}

@keyframes cmtCardDescFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}