/* ==========================================================================
   BONN GROUP OF COMPANIES - RESPONSIVE STYLESHEET (css/responsive.css)
   Targeting: Mobile, Tablet, Laptop, Standard Desktop & Ultra-wide Screen sizes
   ========================================================================== */

/* 1. ULTRA-WIDE MONITORS (min-width: 1920px) */
@media (min-width: 1920px) {
    :root {
        --container-max-width: 1600px;
    }
    
    html {
        font-size: 18px; /* Fluid upscale for 4K displays */
    }
    
    .hero-headline {
        font-size: 5.6rem;
    }
    
    .section-headline {
        font-size: 3.6rem;
    }
}

/* 2. LAPTOP & SMALL DESKTOP (max-width: 1200px) */
@media (max-width: 1200px) {
    :root {
        --section-padding-desktop: 110px;
    }
    
    .hero-headline {
        font-size: 4rem;
    }
    
    .grid-split-2 {
        gap: 40px;
    }
    
    .industries-carousel-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 3. TABLET LANDSCAPE & SMALL LAPTOP (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --section-padding-desktop: 90px;
    }
    
    .hero-headline {
        font-size: 3.4rem;
    }
    
    .hero-subheadline {
        font-size: 1.2rem;
        max-width: 550px;
        margin-bottom: 30px;
    }

    .hero-split-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    
    .hero-left-col {
        align-items: center;
    }
    
    .hero-trust-indicators {
        justify-content: center;
        width: 100%;
    }
    
    .hero-video-luxury-container {
        max-width: 650px;
        margin: 0 auto;
    }
    
    .storytelling-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .products-layout-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    /* Make the third product span full width to look balanced */
    .products-layout-grid .product-luxury-card:nth-child(3) {
        grid-column: span 2;
    }
    
    .industries-carousel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .applications-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .applications-gallery-grid .gallery-card:nth-child(3) {
        grid-column: span 2;
    }
    
    .certifications-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .footer-columns-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* 4. TABLET PORTRAIT (max-width: 768px) */
@media (max-width: 768px) {
    :root {
        --section-padding-desktop: 80px;
    }
    
    /* Header & Mobile Toggle Menu */
    .navbar {
        padding: 16px 0;
        background-color: rgba(11, 15, 25, 0.95);
        border-bottom: 1px solid var(--color-border);
    }
    
    .logo {
        margin-right: auto;
    }
    
    .mobile-toggle {
        display: flex;
        order: 3;
    }
    
    /* Responsive slide-down menu drawer */
    .nav-menu {
        position: fixed;
        top: 73px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 73px);
        background-color: var(--color-bg);
        border-top: 1px solid var(--color-border);
        padding: 40px;
        transition: var(--transition-smooth);
        z-index: 999;
        overflow-y: auto;
        margin: 0;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu ul {
        flex-direction: column;
        gap: 28px;
    }
    
    .nav-link {
        font-size: 1.2rem;
        font-weight: 700;
        display: block;
    }
    
    /* Keep nav CTA button always visible and style elegantly */
    .nav-cta {
        display: flex;
        order: 2;
        margin-right: 20px;
        margin-left: 0;
    }
    
    .nav-cta .btn {
        height: 40px;
        padding: 0 16px;
        font-size: 14px;
        border-radius: 12px;
        white-space: nowrap;
    }
    
    /* Menu active icon transform */
    .mobile-toggle.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .mobile-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-toggle.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    /* Grid system collapses */
    .grid-split-2 {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    /* Hero Adjustments */
    .hero-section {
        height: auto;
        padding-top: 140px;
        padding-bottom: 100px;
    }
    
    .hero-headline {
        font-size: 2.8rem;
    }
    
    /* Hero stats bar collapses into 2x2 */
    .hero-stats-bar {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 60px;
        background-color: var(--color-bg-darker);
    }
    
    .stats-bar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .stat-bar-item:nth-child(odd) {
        border-left: none;
        padding-left: 0;
    }
    
    .scroll-indicator {
        display: none;
    }
    
    /* About image offset collapses */
    .about-image-wrapper {
        width: 100%;
        margin-bottom: 30px;
    }
    
    .facility-badge {
        bottom: 20px;
        right: 20px;
        padding: 16px 24px;
    }
    
    .about-text-content {
        padding-left: 0;
    }
    
    /* Timeline Structural Shifting for mobile */
    .timeline-line-indicator {
        left: 20px;
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 0;
    }
    
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0;
        text-align: left;
    }
    
    .timeline-number {
        left: -4px !important;
        right: auto !important;
    }
    
    /* Lightbox Modal collapses columns */
    .lightbox-content {
        grid-template-columns: 1fr;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .lightbox-sidebar {
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding: 30px;
    }
    
    .lightbox-img-wrapper {
        padding-top: 56.25%; /* 16:9 on mobile */
    }
    
    /* Floating action WhatsApp */
    .floating-whatsapp-btn {
        bottom: 24px;
        right: 24px;
        width: 50px;
        height: 50px;
    }
}

/* 5. MOBILE PHONES (max-width: 480px) */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }
    
    .nav-cta {
        margin-right: 15px;
    }
    
    .section-headline {
        font-size: 2.2rem;
    }
    
    .hero-headline {
        font-size: 2.3rem;
    }
    
    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .hero-ctas .btn {
        width: 100%;
    }
    
    .hero-split-grid {
        gap: 36px;
    }
    
    .hero-trust-indicators {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
        margin-top: 30px;
        padding-top: 20px;
    }
    
    .hero-video-luxury-container {
        border-radius: 16px;
    }
    
    /* Hero stats stacked */
    .stats-bar-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .stat-bar-item {
        border-left: none;
        padding-left: 0;
    }
    
    /* About counters to single column */
    .about-counters-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Why FRP to 1 column */
    .storytelling-features-grid {
        grid-template-columns: 1fr;
    }
    
    /* Products to 1 column */
    .products-layout-grid {
        grid-template-columns: 1fr;
    }
    
    .products-layout-grid .product-luxury-card:nth-child(3) {
        grid-column: span 1;
    }
    
    /* Industries to 1 column */
    .industries-carousel-grid {
        grid-template-columns: 1fr;
    }
    
    .industry-luxury-tile {
        aspect-ratio: 1.2 / 1;
        padding: 24px;
    }
    
    /* Applications to 1 column */
    .applications-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .applications-gallery-grid .gallery-card:nth-child(3) {
        grid-column: span 1;
    }
    
    /* Certifications to 1 column */
    .certifications-logos-grid {
        grid-template-columns: 1fr;
    }
    
    /* Form padding */
    .contact-form-box {
        padding: 30px 20px;
    }
    
    .footer-columns-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .bottom-bar-flex {
        flex-direction: column-reverse;
        gap: 20px;
        text-align: center;
    }
    
    .map-popover {
        width: calc(100% - 40px);
        left: 20px;
        bottom: 20px;
    }
    
    .timeline-content-card {
        padding: 20px;
    }
}