@media (max-width: 900px) {
    .desktop-nav,
    .donate,
    .donate-btn {
        display: none;
    }

    .menu-toggle {
        display: block;
        margin: 6px 0;
    }

    /* mobile nav styles handled in style.css for premium look */

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

    .founder {
        gap: 40px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .centre-detail {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .archive-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

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

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

@media (max-width: 600px) {
    .container {
        width: min(100% - 40px, 1152px);
    }

    .hero h1 {
        font-size: 2.15rem;
    }

    .section,
    .intro {
        padding: 40px 0;
    }

    .cards.three,
    .cards.two,
    .two-cols,
    .founder,
    .event-columns {
        grid-template-columns: 1fr;
    }

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

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

    .cta {
        margin: 64px 16px;
        padding: 38px 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        padding: 44px 0;
        gap: 30px;
    }

    .footer-bottom {
        display: block;
    }

    .footer-bottom span {
        display: block;
        margin: 6px 0;
    }

    .footer-bottom a:first-child {
        margin-left: 0;
    }

    .page-hero {
        padding: 60px 0;
    }

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

    .archive-gallery img {
        height: 130px;
    }

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

    .team-grid {
        grid-template-columns: 1fr;
    }
}

/* ==============================
   Home - Fully Responsive Enhancements
   ============================== */

/* Tablet (768px - 900px) */
@media (max-width: 900px) {
    .shruti {
        height: 50px;
    }

    .shruti-title {
        left: 16px;
    }

    .shruti-title b {
        font-size: 13px;
        padding: 5px 12px;
    }

    .ticker {
        padding-left: 155px;
    }

    .scrolling {
        font-size: 13px;
        animation-duration: 35s;
    }

    .hero-content {
        padding: 24px 16px;
    }
}

/* Mobile (below 600px) */
@media (max-width: 600px) {
    .shruti {
        height: 46px;
    }

    .shruti-title {
        left: 12px;
    }

    .shruti-title b {
        font-size: 11.5px;
        padding: 4px 10px;
    }

    .ticker {
        padding-left: 135px;
    }

    .scrolling {
        font-size: 11.5px;
        animation-duration: 28s;
    }

    /* Hero actions stack on mobile */
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .hero-actions .button {
        width: 100%;
        max-width: 240px;
    }
}

/* Small mobile (below 480px) */
@media (max-width: 480px) {
    .hero {
        min-height: 72vh;
    }

    .hero h1 {
        font-size: 1.95rem;
        line-height: 1.1;
    }

    .hero-content .hero-logo {
        width: 68px;
        height: 68px;
    }

    .hero .eyebrow.light {
        font-size: .65rem;
    }

    .shruti {
        height: 42px;
    }

    .shruti-title {
        left: 8px;
    }

    .shruti-title b {
        font-size: 10px;
        padding: 3px 8px;
        border-width: 1.5px;
    }

    .ticker {
        padding-left: 118px;
    }

    .scrolling {
        font-size: 10px;
        animation-duration: 24s;
    }

    .intro h2 {
        font-size: 1.35rem;
    }

    .section,
    .intro {
        padding: 32px 0;
    }

    .card {
        padding: 20px;
    }
}

/* Extra small (below 360px) */
@media (max-width: 360px) {
    .hero h1 {
        font-size: 1.72rem;
    }

    .hero-content {
        padding: 16px 8px;
    }

    .shruti-title {
        left: 6px;
    }

    .shruti-title b {
        font-size: 9px;
        padding: 2px 6px;
    }

    .ticker {
        padding-left: 102px;
    }

    .scrolling {
        font-size: 9px;
    }
}

/* Founder on mobile: ensure good spacing */
@media (max-width: 600px) {
    .founder {
        gap: 32px;
    }

    .founder blockquote {
        font-size: 1.1rem;
        padding: 18px;
    }
}

/* CTA tighter on mobile */
@media (max-width: 600px) {
    .cta {
        padding: 32px 20px;
        margin: 48px 12px;
    }
}

/* Event list better padding on small */
@media (max-width: 480px) {
    .event-list li {
        padding: 10px 0;
        font-size: .95rem;
    }
}

/* ==============================
   Centre Pages Responsive
   ============================== */

@media (max-width: 900px) {
    .centre-card-img {
        aspect-ratio: 16/10;
    }
}

@media (max-width: 600px) {
    .centre-card {
        flex-direction: column;
    }

    .centre-card-img {
        aspect-ratio: 4/3;
        border-radius: 16px;
    }

    .centre-detail {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .centre-detail img {
        border-radius: 14px;
    }

    .centre-hero h1 {
        font-size: 2.2rem;
    }

    .centre-hero .eyebrow {
        font-size: .65rem;
    }

    .centre-gallery {
        flex-direction: column;
    }

    .centre-gallery img {
        width: 100%;
    }

    .membership-table {
        min-width: 100%;
        font-size: .85rem;
    }

    .membership-table th,
    .membership-table td {
        padding: 10px 8px;
    }
}

@media (max-width: 480px) {
    .centre-card-img {
        aspect-ratio: 3/2;
    }

    .centre-hero {
        padding: 48px 0;
    }

    .centre-hero h1 {
        font-size: 1.9rem;
    }

    .centre-detail .card {
        padding: 18px;
    }
}