/* =============================================================
   NOVARIS POWER — GLOBAL MOBILE RESPONSIVE FIXES
   Covers all pages · all screen sizes
   ============================================================= */

/* ── Prevent horizontal overflow globally ───────────────────── */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe, embed, canvas {
    max-width: 100%;
}

/* ── Top Bar ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .top-bar {
        padding: 0.4rem 4%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .top-bar-left { gap: 1rem; }
    .top-bar-socials { display: none; }
}

@media (max-width: 480px) {
    .top-bar { justify-content: center; }
    .top-bar-left { justify-content: center; }
    .top-bar-right { display: none; }
}

/* ── Navigation ──────────────────────────────────────────────── */
nav {
    padding: 0.75rem 4%;
}

@media (max-width: 1100px) {
    nav .nav-links { gap: 1rem; }
    nav .nav-links > li > a { font-size: 0.82rem; }
}

@media (max-width: 900px) {
    nav .nav-links { display: none; }
    nav .hamburger { display: flex; }
}

/* ── Mobile Menu ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mobile-menu {
        width: 85%;
        max-width: 340px;
    }

    .mobile-menu ul {
        padding: 1.5rem 0;
    }

    .mobile-dropdown-item > a {
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
    }

    .mobile-dropdown a {
        font-size: 0.85rem;
        padding: 0.6rem 2rem;
    }
}

/* ── Hero (index page) ───────────────────────────────────────── */
@media (max-width: 768px) {
    .hero {
        min-height: 88vh;
        padding-top: 110px;
    }
    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
        letter-spacing: -0.03em;
    }
    .hero-subtitle {
        font-size: clamp(1.2rem, 5vw, 1.75rem);
    }
    .hero-description {
        font-size: 0.9rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }
    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.85rem;
    }
    .cta-buttons .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/* ── Who We Are ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .stats-image-row {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    .stat-card { padding: 1.5rem; }
    .stat-number { font-size: 1.75rem !important; }
}

/* ── What We Do ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .boxed-row.responsive-row {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    .boxed-row.responsive-row img {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover !important;
    }
    .solution-card { padding: 2rem 1.5rem; }
    .solution-title { font-size: 1.2rem; }
}

/* ── Impact Section ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .small-collage {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    .small-collage img {
        height: 180px;
        width: 100%;
        object-fit: cover;
        border-radius: 12px;
    }
    .impact-metrics {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem;
    }
    .metric-card { padding: 1.5rem 1rem; }
    .metric-value { font-size: 1.6rem !important; }
}

@media (max-width: 480px) {
    .impact-metrics { grid-template-columns: 1fr !important; }
}

/* ── Video / Testimonial Carousel ────────────────────────────── */
@media (max-width: 768px) {
    .video-carousel-container {
        padding: 0 2.5rem;
    }
    .video-slide .video-wrapper {
        flex-direction: column;
    }
    .carousel-control {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* ── Insights Grid ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .insights-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 600px) {
    .insights-grid {
        grid-template-columns: 1fr !important;
    }
    .insight-image { height: 180px !important; }
    .newsletter-section { padding: 2.5rem 1.5rem !important; }
    .newsletter-form { flex-direction: column; }
    .newsletter-input { min-width: auto !important; width: 100%; }
    .newsletter-btn { width: 100%; }
}

/* ── Partners Grid ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
    .partner-logo { height: 80px !important; }
}

@media (max-width: 480px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── CTA Section ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cta-section {
        padding: 2.5rem 1.5rem !important;
        text-align: center;
    }
    .cta-buttons {
        justify-content: center;
    }
}

/* ── Footer ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .footer-content {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
    footer { padding: 3rem 5% 1.5rem !important; }
}

@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr !important;
    }
    .footer-section { border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 1.5rem; }
    .footer-section:last-child { border-bottom: none; }
    .footer-bottom { font-size: 0.75rem !important; }
}

/* ── About Page ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    #who-we-are-section .who-we-are-grid,
    .leadership-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 600px) {
    #who-we-are-section .who-we-are-grid,
    .leadership-grid {
        grid-template-columns: 1fr !important;
    }
    .leader-card { max-width: 320px; margin: 0 auto; }
}

/* ── Solutions Page ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .solutions-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Projects Page ───────────────────────────────────────────── */
@media (max-width: 768px) {
    #mini-grids-section > div > div {
        grid-template-columns: 1fr !important;
    }
    .gallery-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Impact Page ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .impact-cols,
    .gender-grid,
    .csr-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ── Insights Page ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .publications-grid,
    .news-grid,
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .events-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Partners Page ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .partner-types-grid,
    .investment-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ── Careers / GDP Page ──────────────────────────────────────── */
@media (max-width: 768px) {
    .job-cards-grid,
    .openings-grid {
        grid-template-columns: 1fr !important;
    }
    .job-overview-panel {
        grid-template-columns: 1fr !important;
    }
}

/* ── Contact Page ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ── Job Modals ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .job-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }
    .job-modal-header { padding: 1.25rem 1.25rem 1rem; }
    .job-modal-header h2 { font-size: 1.3rem !important; }
    .job-modal-body { padding: 1.25rem; }
    .job-overview-panel { grid-template-columns: 1fr !important; }
}

/* ── Digital Products Page ───────────────────────────────────── */
@media (max-width: 768px) {
    .digital-features-grid,
    .supanova-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ── Section titles on small screens ─────────────────────────── */
@media (max-width: 480px) {
    .section-title {
        font-size: clamp(1.4rem, 6vw, 1.75rem) !important;
        word-break: break-word;
        hyphens: auto;
    }
    .section-description {
        font-size: 0.88rem !important;
    }
}

/* ── Buttons on small screens ─────────────────────────────────── */
@media (max-width: 480px) {
    .btn {
        padding: 0.8rem 1.75rem;
        font-size: 0.85rem;
    }
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .cta-buttons .btn {
        text-align: center;
        justify-content: center;
    }
}

/* ── Stat / Metric grids ─────────────────────────────────────── */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── Page hero sections ──────────────────────────────────────── */
@media (max-width: 768px) {
    .page-hero,
    .about-hero,
    .projects-hero,
    .solutions-hero,
    .impact-hero,
    .insights-hero,
    .partners-hero,
    .careers-hero,
    .contact-hero,
    .gdp-hero {
        min-height: 55vh !important;
        padding-top: 100px !important;
        padding-bottom: 3rem !important;
    }

    .page-hero h1,
    .page-hero-title,
    [class*="-hero"] h1 {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    }
}

/* ── Erikorodo / Project detail pages ───────────────────────── */
@media (max-width: 768px) {
    .project-detail-grid {
        grid-template-columns: 1fr !important;
    }
    .project-specs-list {
        columns: 1 !important;
    }
}

/* ── Scrollable tables on mobile ─────────────────────────────── */
table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

/* ── Fix nav z-index / overlap on all pages ──────────────────── */
#navbar {
    z-index: 1000;
}
.top-bar {
    z-index: 1001;
}
.mobile-menu {
    z-index: 1100;
}
.menu-overlay {
    z-index: 1099;
}
#page-loader {
    z-index: 99999;
}