/* ============================================================
   AFRO VISION - RESPONSIVE CSS
   ============================================================ */

/* ── Extra Large (≤ 1200px) ────────────────────────────────── */
@media (max-width: 1200px) {
    .container {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .why-bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Large / Tablet Landscape (≤ 992px) ────────────────────── */
@media (max-width: 992px) {
    .top-bar {
        display: none;
    }

    /* Mobile Navigation */
    .site-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        box-shadow: 0 12px 32px rgba(13, 27, 62, 0.12);
        border-top: 1px solid var(--color-border);
        z-index: var(--z-dropdown);
    }

    .site-header__nav .nav-menu {
        flex-direction: column;
        padding: var(--space-4) 0;
    }

    .site-header__nav .nav-link {
        padding: 0.875rem var(--space-6);
        font-size: var(--font-size-sm);
        justify-content: space-between;
    }

    .site-header__nav .nav-link::after {
        display: none;
    }

    .site-header__nav .nav-link.active {
        background: var(--color-off-white);
        color: var(--color-accent);
        border-left: 3px solid var(--color-accent);
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--color-off-white);
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

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

    .site-header__cta {
        display: none;
    }

    /* Hero adjustments */
    .hero-section {
        min-height: 520px;
    }

    .hero-section__title {
        font-size: 2.25rem;
    }

    .hero-section__stats {
        gap: var(--space-4);
    }

    .hero-stat__number {
        font-size: var(--font-size-xl);
    }

    /* Grid collapses */
    .about-snippet__grid,
    .who-we-are__grid,
    .mission-vision__grid,
    .testimonials-inner,
    .grid-2col {
        grid-template-columns: 1fr;
    }

    .testimonials-image {
        display: none;
    }

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

    .page-banner__image-side {
        display: none;
    }

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

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

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

    /* Tablet Bento Grid Alignments (Preventing spacing gaps) */
    .innovation-bento-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: var(--space-6) !important;
    }

    .inno-card--large {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }

    .inno-card--primary {
        grid-column: span 1 !important;
        flex-direction: column !important;
        padding: var(--space-6) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .inno-card--primary .inno-icon {
        margin-bottom: var(--space-3) !important;
    }

    .inno-card--accent,
    .inno-card--dark {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .ecosystem-bento {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: var(--space-6) !important;
    }

    .eco-card--featured {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }

    .eco-card--dark {
        grid-column: span 2 !important;
    }

    .eco-card--light,
    .eco-card--accent {
        grid-column: span 1 !important;
    }
}

/* ── Medium / Tablet Portrait (≤ 768px) ────────────────────── */
@media (max-width: 768px) {
    .section {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

    .section-header {
        margin-bottom: var(--space-10);
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }

    /* Hero */
    .hero-section {
        min-height: 480px;
    }

    .hero-section .container {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }

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

    .hero-section__subtitle {
        font-size: var(--font-size-base);
    }

    .hero-section__stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .hero-stat__divider {
        display: none;
    }

    .hero-stat {
        flex: 1 1 40%;
        min-width: 100px;
    }

    /* Grids to single column */
    .services-grid,
    .industries-grid,
    .stats-grid,
    .footer-grid,
    .credibility-inner,
    .innovation-bento-grid,
    .ecosystem-bento,
    .contact-grid-modern {
        grid-template-columns: 1fr;
    }

    .inno-card--large,
    .inno-card--primary,
    .eco-card--featured,
    .eco-card--dark,
    .eco-card--light,
    .eco-card--accent {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .inno-card--primary {
        flex-direction: column;
        padding: var(--space-6);
    }

    .credibility-content {
        max-width: 100%;
        margin-bottom: var(--space-8);
    }

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

    .about-snippet__features {
        grid-template-columns: 1fr;
    }

    /* Reusable responsive overrides */
    .flex-2col {
        flex-direction: column !important;
        gap: var(--space-4) !important;
    }
    .flex-2col > * {
        width: 100% !important;
    }
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }
    .values-banner {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-4) !important;
    }
    .eco-brands {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    /* Process Timeline to single column */
    .process-timeline::before {
        left: 32px;
    }

    .process-timeline__item,
    .process-timeline__item--odd {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 80px;
    }

    .process-timeline__marker {
        left: 32px;
        top: 0;
        transform: translate(-50%, 0);
    }

    .process-timeline__item:hover .process-timeline__marker {
        transform: translate(-50%, 0) scale(1.1);
    }

    .process-timeline__content {
        width: 100%;
        margin-top: 10px;
    }

    .process-timeline__content::before {
        display: none;
    }

    .core-values__grid {
        grid-template-columns: 1fr;
    }

    .team-photos {
        flex-wrap: wrap;
    }
    .team-photo {
        flex: 1 1 50%;
    }

    .services-grid--detailed {
        grid-template-columns: 1fr;
    }

    /* CTA Banner */
    .cta-banner__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }

    .cta-banner__icon {
        display: none;
    }
}

/* ── Small / Phone (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {
    .hero-section__title {
        font-size: 1.625rem;
    }

    .hero-section__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-section__actions .btn {
        text-align: center;
        justify-content: center;
    }

    .hero-section__badge {
        font-size: 0.6875rem;
    }

    .why-bento-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }
}

/* ────────────────────────────────────────────────────────────
   CINEMATIC COMPONENTS MOBILE RESPONSIVE OVERRIDES
   ──────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .cinematic-storytelling-panel {
        padding-right: 0;
        margin-bottom: var(--space-8);
    }
    .cinematic-main-frame {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .cinematic-floating-narrative {
        position: relative;
        width: 100%;
        bottom: 0;
        margin-top: var(--space-6);
        right: auto;
        left: auto;
    }
    
    .diff-editorial-composition {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }
    .diff-editorial-block {
        position: relative;
        width: 100% !important;
        height: 300px !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
    }
    .diff-floating-stat {
        top: 20px;
        right: 20px;
    }
}

/* ────────────────────────────────────────────────────────────
   PREMIUM DESKTOP COMPONENTS RESPONSIVE OVERRIDES
   ──────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .benefits-editorial-wrapper,
    .approach-editorial-grid,
    .tech-philosophy-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .benefits-editorial-left,
    .approach-editorial-left,
    .tech-canvas-column {
        padding-right: 0;
        text-align: center;
    }
    
    .section-title--left {
        text-align: center;
    }
    
    .benefits-editorial-card {
        max-width: 500px;
        margin: 0 auto var(--space-6);
        text-align: left;
    }
    
    /* Bento Grid collapses beautifully */
    .benefits-bento-deck {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .benefit-editorial-card {
        margin-top: 0 !important; /* Reset staggered offsets on tablet/mobile */
    }
    
    .approach-photo-frame,
    .tech-canvas-composition {
        max-width: 600px;
        margin: var(--space-8) auto 0;
    }
}

@media (max-width: 768px) {
    .benefits-bento-deck {
        grid-template-columns: 1fr;
    }
    
    .tech-code-terminal {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: var(--space-6);
        box-shadow: 0 15px 30px rgba(8, 18, 40, 0.2);
    }
    
    .approach-photo-badge {
        left: var(--space-4);
        right: var(--space-4);
        bottom: calc(-1 * var(--space-6));
    }
}