/* ============================================
   PRADEEPAN — Responsive Stylesheet
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

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

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

    .about-preview {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .founder-section {
        grid-template-columns: 220px 1fr;
        gap: 30px;
    }

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

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

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

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

    .contact-details-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    html { font-size: 15px; }

    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }

    .container { padding: 0 16px; }

    /* Top bar */
    .top-bar-left { display: none; }
    .top-bar-content { justify-content: flex-end; }

    /* Header */
    .header-content { padding: 10px 0; }

    .logo img { height: 40px; }
    .logo-name { font-size: 1.2rem; }

    .mobile-menu-btn { display: flex; }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        background: var(--bg-white);
        box-shadow: -5px 0 30px rgba(0,0,0,0.15);
        transition: right var(--transition);
        padding: 80px 24px 24px;
        overflow-y: auto;
        z-index: 1000;
    }

    .main-nav.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-list > li > a {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        font-size: 1rem;
    }

    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0;
        padding-left: 16px;
        background: var(--bg-alt);
        border-radius: 0;
        display: none;
    }

    .has-dropdown.open .dropdown {
        display: block;
    }

    .dropdown li a {
        padding: 10px 16px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        border-radius: 0;
        font-size: 0.9rem;
    }

    .nav-donate-btn {
        margin-top: 16px;
        text-align: center;
        justify-content: center;
    }

    /* Mobile overlay */
    .nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .nav-overlay.active {
        display: block;
    }

    /* Hero */
    .hero {
        min-height: 70vh;
        padding: 40px 0;
    }

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

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

    .hero-buttons {
        flex-direction: column;
    }

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

    /* Impact */
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .impact-card {
        padding: 20px 14px;
    }

    .impact-number {
        font-size: 1.8rem;
    }

    .impact-label {
        font-size: 0.78rem;
    }

    /* Sections */
    .section {
        padding: 50px 0;
    }

    .section-header {
        margin-bottom: 30px;
    }

    /* Theme cards */
    .theme-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Founder */
    .founder-section {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .founder-image {
        max-width: 240px;
        margin: 0 auto;
    }

    /* Partners */
    .partners-grid {
        gap: 16px;
    }

    .partner-item {
        font-size: 0.82rem;
        padding: 10px 16px;
    }

    /* Page banner */
    .page-banner {
        padding: 80px 0 40px;
    }

    .page-banner h1 {
        font-size: 1.9rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-top {
        padding: 40px 0 30px;
    }

    /* Values grid */
    .values-grid {
        grid-template-columns: 1fr;
    }

    /* Impact highlights */
    .impact-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA Banner */
    .cta-banner {
        padding: 40px 0;
    }

    .cta-banner h2 {
        font-size: 1.5rem;
    }

    /* Back to top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }

    /* Donate */
    .donate-card {
        padding: 24px;
    }

    .donate-card .bank-detail {
        flex-direction: column;
        gap: 2px;
    }

    /* Tables */
    .reg-table {
        font-size: 0.82rem;
    }

    .reg-table th, .reg-table td {
        padding: 10px 12px;
    }

    /* Timeline */
    .timeline {
        padding-left: 30px;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-details-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form {
        padding: 24px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    html { font-size: 14px; }

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

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

    .impact-number { font-size: 1.5rem; }

    .impact-highlights {
        grid-template-columns: 1fr;
    }

    .sdg-badges {
        justify-content: center;
    }

    /* Team list */
    .team-member {
        grid-template-columns: 1fr;
    }

    .team-member-photo img {
        min-height: 260px;
        max-height: 300px;
    }

    .team-member-body {
        padding: 20px;
    }

    /* News clippings */
    .news-clippings-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .news-filter-tabs {
        gap: 8px;
    }

    .filter-btn {
        font-size: 0.78rem;
        padding: 6px 13px;
    }
}