/* Fluid Responsive CSS - Proportional Scaling (Zoom-like) */
/* Implements "Moheim-style" fixed-position scaling using pure VW units */

/* 
   SCALING STRATEGY:
   For desktop (> 768px), we define 1rem = 1vw (approx, or based on 1440px width).
   At 1440px, 1rem should be ~16px. 
   16px / 1440px * 100 = 1.1111111vw.
   
   By setting root font-size to this VW value, any value defined in 'rem' 
   will scale perfectly linearly with the viewport width.
*/

:root {
    /* --- Base Scaling Factor --- */
    /* 
       Desktop Base ( > 768px ):
       Design width: 1440px
       Base font: 16px
       16 / 1440 * 100vw = 1.111111vw
    */
    --base-vw-desktop: 1.111111vw;

    /* --- Fluid Variables (defined in rem for proportional scaling) --- */
    /* These will now mean "Relative to Viewport Width" */

    /* Side Margins: 80px at 1440px -> 5rem */
    --side-margin: 5rem !important;

    /* Gutter: 40px at 1440px -> 2.5rem */
    --gutter: 2.5rem !important;

    /* Header Height: 60px at 1440px -> 3.75rem */
    --header-height: 5.75rem !important;

    /* Section Spacing: 140px -> 8.75rem */
    --space-section: 8.75rem !important;

    /* Content Spacing: 40px -> 2.5rem */
    --space-content: 2.5rem !important;

    /* --- Typography (rem based) --- */

    /* Base Text: 1rem (will scale with vw) */
    --text-base-size: 1rem !important;

    /* Hero Text: 160px -> 10rem */
    --text-hero-size: 10rem !important;

    /* Heading LG: 64px -> 4rem */
    --text-heading-lg: 4rem !important;

    /* Heading MD: 32px -> 2rem */
    --text-heading-md: 2rem !important;
}

/* --- Global Scaling Logic --- */

html {
    /* Default for Mobile / Fallback */
    font-size: 16px;
    overflow-x: hidden;
    width: 100% !important;
    /* Fixed: 100vw includes scrollbar causing right gap */
    max-width: 100% !important;
    min-width: 0 !important;
}

body {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    padding-top: var(--header-height) !important;
    font-size: var(--text-base-size) !important;
}


/* --- Sticky Footer Fix (Global) --- */
/* Ensure the footer is always at the bottom of the viewport */
body {
    min-height: 100dvb !important;
    /* dvb is safer for mobile browsers interaction */
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

.smooth-scroll-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    /* Let flex handle height limits */
    width: 100% !important;
}

main {
    flex: 1 !important;
    width: 100% !important;
}

.footer {
    margin-top: auto !important;
    width: 100% !important;
}

/* --- DESKTOP PROPORTIONAL SCALING ( > 768px ) --- */
@media (min-width: 769px) {
    html {
        /* THIS IS THE KEY: Lock entire site aspect ratio to viewport width */
        font-size: var(--base-vw-desktop) !important;
    }

    /* Ensure containers don't stop scaling */
    .container {
        max-width: 100% !important;
        /* No pixel max-width, it scales forever (like an image) */
    }

    /* Grid columns must be fixed to prevent reflow */
    .product-grid,
    .news-grid,
    .cases-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--gutter) !important;
    }

    .stories-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--gutter) !important;
    }

    /* --- Footer Proportional Scaling Fixes --- */
    /* Force the wide desktop layout to apply immediately at 769px to prevent reflows */

    .footer-content {
        grid-template-columns: 1fr 2fr !important;
        gap: 4rem !important;
        margin-bottom: 6rem !important;
        text-align: left !important;
    }

    .footer-nav {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }

    .footer-nav-col:nth-child(2) {
        grid-column: auto !important;
    }



    .footer-bottom {
        flex-direction: row !important;
        align-items: flex-end !important;
    }

    /* Ensure other elements don't wrap unexpectedly */

}

/* --- MOBILE LOGIC ( <= 768px ) --- */
@media (max-width: 768px) {
    html {
        /* 
           STRICT PROPORTIONAL SCALING (Mobile Zoom)
           User wants the layout at 768px to be the "Absolute Reference".
           We set the root font-size so that 1rem = 16px at 768px width.
           Calculation: 16 / 768 * 100 = 2.083333vw.
           ALL dimensions inside this query must be in 'rem' to scale perfectly with width.
        */
        font-size: 2.083333vw !important;
    }

    :root {
        /* Define base sizes in REM (relative to the 768px viewport width) */
        /* At 768px: */
        /* Side Margin: 30px -> 1.875rem */
        --side-margin: 1.875rem !important;

        /* Gutter: 20px -> 1.25rem */
        --gutter: 1.25rem !important;

        /* Header Height: 60px -> 3.75rem */
        --header-height: 5.00rem !important;

        /* Section Spacing: 60px -> 3.75rem */
        --space-section: 3.75rem !important;

        /* Content Spacing: 20px -> 1.25rem */
        --space-content: 1.25rem !important;

        /* Typography - Fixed relative sizes */
        --text-base-size: 1rem !important;
        /* 16px @ 768px */
        --text-hero-size: 5rem !important;
        /* 80px @ 768px */
        --text-heading-lg: 3rem !important;
        /* 48px @ 768px */
        --text-heading-md: 2rem !important;
        /* 32px @ 768px */
    }

    /* Mobile Footer Fixed Layout */
    .footer-nav {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem 1rem !important;
        /* rem scales */
    }

    .footer-nav-col:nth-child(2) {
        grid-column: auto !important;
    }

    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 3rem !important;
        text-align: left !important;
    }



    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }

    /* Content Grids - Maintain 768px structure (usually stacked or 2-col) */
    .stories-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--gutter) !important;
    }

    /* Content Grids - Maintain 768px structure */
    .product-grid,
    .home-products-grid,
    .news-grid,
    .cases-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--gutter) !important;
    }

    .product-card,
    .news-item,
    .case-card {
        margin-bottom: 0 !important;
        /* Grid handles gap */
        width: 100% !important;
    }

    /* Mobile Hero Height: Locked Aspect Ratio via Padding */
    /* "Apply the particular feeling from the footer" -> Content + Scale Padding */
    .hero {
        min-height: auto !important;
        height: auto !important;
        /* Use intrinsic aspect ratio to lock shape relative to width */
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
        padding: 0 !important;
        /* Let aspect-ratio define height */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-bg {
        /* Ensure image covers the aspect-ratio box */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        /* Reset side margin offset for cleaner box */
        width: 100% !important;
        height: 100% !important;
    }

    /* Reset Content padding/margin for cleaner center */
    .hero-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Footer Scaling: Remove 100vh constraint to allow pure shrink */
    .footer {
        min-height: auto !important;
        padding: 4rem 0 2rem !important;
        /* Scale padding if needed, but rem handles it */
    }

    .footer .container {
        height: auto !important;
    }
}


/* --- COMPONENT OVERRIDES (Use rems to respect scaling) --- */

.container {
    width: 100% !important;
    padding-left: var(--side-margin) !important;
    padding-right: var(--side-margin) !important;
}

/* Header */
.header {
    height: var(--header-height) !important;
}

.header-inner {
    padding-left: var(--side-margin) !important;
    padding-right: var(--side-margin) !important;
}

.logo {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 2.25rem !important;
    font-weight: 500 !important;
    color: #424241 !important;
    letter-spacing: 0.3em !important;
}

.nav-menu {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    gap: 3.5rem !important;
}

.nav-menu .nav-item {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important;
    margin-left: 0 !important;
    font-weight: 400 !important;
    color: #424241 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
}

.menu-toggle {
    display: flex !important;
    width: 2rem !important;
    height: 2rem !important;
}

/* Hero */
.hero {
    padding: 0 var(--side-margin) !important;
    min-height: calc(100vh - var(--header-height)) !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.hero-bg {
    left: var(--side-margin) !important;
    width: calc(100% - (var(--side-margin) * 2)) !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    z-index: 0 !important;
}

.hero-content {
    padding-top: 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: center !important;
}

.hero-logo-large {
    font-size: var(--text-hero-size) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Images */
img {
    height: auto !important;
    display: block;
}

/* Section Padding */
section,
.section-about,
.section-products {
    padding-top: var(--space-section) !important;
    padding-bottom: var(--space-section) !important;
}

/* Text */
.heading-lg {
    font-size: var(--text-heading-lg) !important;
}

.text-lead {
    font-size: var(--text-heading-md) !important;
    margin-bottom: var(--space-content) !important;
    line-height: 1.4 !important;
}

.text-body {
    font-size: var(--text-base-size) !important;
    line-height: 2.0 !important;
}

.section-title {
    font-size: 0.875rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: var(--space-content) !important;
}

/* Wrappers */
.about-content,
.product-grid,
.stories-grid,
.news-grid,
.cases-grid {
    width: 100% !important;
    margin: 0 auto !important;
}