/* ==========================================================================
   MEGHALAYA FOREST — GLOBAL RESPONSIVE FOUNDATION
   Covers all 70 pages. Works on top of per-page CSS files.
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small phone)
   ========================================================================== */

/* ── 1. TOPBAR ── */
@media (max-width: 768px) {
    .gigw-topbar {
        height: auto;
        padding: 6px 4%;
        flex-wrap: wrap;
        gap: 6px;
    }
    .gigw-left a,
    .gigw-left .gigw-sep {
        font-size: 10px;
    }
    .topbar-right {
        gap: 10px;
    }
    .lang-select {
        font-size: 10px;
        padding: 2px 22px 2px 6px;
    }
}

/* ── 2. BRAND HEADER ── */
@media (max-width: 768px) {
    .brand-header {
        padding: 8px 4%;
        top: 0;
        position: relative; /* Un-sticky on mobile to save space */
    }
    .navbar-brand h1 {
        font-size: 1rem !important;
        letter-spacing: 0;
    }
    .brand-subtitle {
        font-size: 0.7rem;
    }
    .navbar-brand img {
        height: 44px !important;
    }
    .navbar-brand {
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .brand-header {
        justify-content: flex-start;
    }
    .navbar-brand h1 {
        font-size: 0.85rem !important;
    }
}

/* ── 3. PAGE HERO (used on all inner pages) ── */
@media (max-width: 768px) {
    .page-hero {
        min-height: 100px;
        padding: 16px 4%;
    }
    .page-hero h1 {
        font-size: 1.25rem !important;
        letter-spacing: 0.02em;
    }
    .hero-underline {
        width: 50px;
        margin-top: 10px;
    }
    .breadcrumb {
        font-size: 0.72rem;
        margin-top: 8px;
    }
}
@media (max-width: 480px) {
    .page-hero h1 {
        font-size: 1rem !important;
    }
}

/* ── 4. GLOBAL SECTION & CONTAINER PADDING ── */
@media (max-width: 768px) {
    .section, section {
        padding: 20px 0 !important;
    }
    .wrap, .container {
        padding: 0 4% !important;
    }
}

/* ── 5. COMMON GRID PATTERNS (covers wildlife, social forestry, etc.) ── */
/* 2-column and 3-column CSS grids collapse to 1 column on mobile */
@media (max-width: 768px) {
    [class*="-grid"],
    [class*="-layout"],
    [class*="-row"],
    [class*="-cols"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── 6. COMMON CARD PATTERNS ── */
@media (max-width: 768px) {
    [class*="-card"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ── 7. TABLE OVERFLOW (publications, tenders, etc.) ── */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    th, td {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }
}

/* ── 8. IMAGES & MEDIA ── */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    iframe {
        width: 100% !important;
    }
}

/* ── 9. TYPOGRAPHY SCALING ── */
@media (max-width: 768px) {
    h1 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
    h2 { font-size: clamp(1.2rem, 4.5vw, 1.6rem) !important; }
    h3 { font-size: clamp(1rem, 4vw, 1.25rem) !important; }
}
@media (max-width: 480px) {
    h1 { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; }
    h2 { font-size: clamp(1rem, 4.5vw, 1.3rem) !important; }
}

/* ── 10. BUTTON & FORM RESPONSIVENESS ── */
@media (max-width: 768px) {
    button, .btn, [class*="-btn"] {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
    }
    input, select, textarea {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 0.9rem !important;
    }
    form {
        width: 100% !important;
    }
}

/* ── 11. FOOTER RESPONSIVE ── */
@media (max-width: 768px) {
    .footer-grid,
    .footer-cols,
    .footer-layout,
    [class*="footer-"] {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }
}

/* ── 12. DISABLE HEAVY ANIMATIONS ON MOBILE (performance) ── */
@media (max-width: 768px) {
    .leaf,
    #leaf-container {
        display: none !important;
    }
    [class*="hm-rings"],
    [class*="hm-particles"],
    [class*="hm-p"] {
        display: none !important;
    }
    /* Reduce animation complexity */
    * {
        animation-duration: 0.3s !important;
    }
    .hm-hero-title span {
        animation: none !important;
        -webkit-text-fill-color: #f1c40f !important;
    }
}

/* ── 13. FIX STICKY TOPBAR STACKING ON MOBILE ── */
@media (max-width: 768px) {
    .gigw-topbar {
        position: relative !important;
        z-index: 100;
    }
    .green-navbar {
        top: 0 !important;
        position: sticky !important;
    }
}

/* ── 14. HOME PAGE SPECIFIC (complements home.css) ── */
@media (max-width: 768px) {
    .hm-hero {
        min-height: 60vh;
        padding: 40px 0;
    }
    .hm-hero-container {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 30px;
    }
    .hm-hero-right {
        display: none; /* Hide geological card on mobile — saves space */
    }
    .hm-hero-actions {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .hm-btn-gold,
    .hm-btn-trans {
        width: 100%;
        justify-content: center;
    }
    .hm-welcome-layout {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    .hm-auth-grid {
        flex-direction: column;
        align-items: center;
    }
    .hm-auth-card {
        width: 100% !important;
        max-width: 340px;
    }
    .hm-compliance-console {
        grid-template-columns: 1fr !important;
        gap: 30px;
        padding: 28px;
    }
    .hm-bento-row {
        grid-template-columns: 1fr !important;
    }
    .hm-services-layout {
        grid-template-columns: 1fr !important;
    }
    .hm-compliance-metrics {
        grid-template-columns: 1fr 1fr !important;
    }
    .hm-bento-card {
        padding: 24px !important;
    }
    
    /* Leader Cards fix */
    .hm-leaders-inner {
        gap: 30px !important;
        flex-direction: column;
        align-items: center;
    }
    .hm-ld {
        width: 100% !important;
        max-width: 320px;
        margin: 0 auto;
    }

    /* External links strip fix */
    .hm-ext-inner {
        flex-direction: column;
        align-items: stretch !important;
        gap: 15px;
    }
    .hm-ext-links {
        flex-direction: column;
        align-items: stretch !important;
    }
    .hm-ext-title {
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .hm-compliance-metrics {
        grid-template-columns: 1fr !important;
    }
    .hm-ticker-item {
        font-size: 11px;
        padding: 0 24px;
    }
}