/* ===========================================================================
   RESPONSIVE BREAKPOINTS - Mobile-First Strategy
   Version: 2.3 - CONTAINER OVERRIDE REMOVAL FOR 80% WIDTH
   Updated: March 2026

   FIXES IN v2.3:
   ✅ REMOVED: max-width and width overrides on .container from the 48em,
               64em, and 90em breakpoints. 03-layout.css v4.3 now owns
               the container width via width: min(80%, 1400px) at the base
               level. Keeping max-width: 1200px here at 48em and 64em would
               override the 80% rule and reintroduce the old fixed widths.
   ✅ REMOVED: The base-level max-width: 100% on .container. With the 80%
               rule in 03-layout.css, this was adding a redundant override
               that also fought the new implementation.
   ✅ KEPT:    Mobile padding override (padding changes only, not width).
   ✅ KEPT:    All grid, typography, and accessibility rules unchanged.
   =========================================================================== */

/* ===========================================================================
   OVERFLOW PREVENTION
   =========================================================================== */
body,
html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ===========================================================================
   MOBILE (Default — No media query)
   Base styles for screens below 600px
   =========================================================================== */

/*
 * Container mobile padding — width is handled by 03-layout.css.
 * The 80% rule from 03-layout.css is overridden to 100% at ≤767px
 * directly in that file's mobile block. This rule adds padding only.
 */
.container {
    padding-left: var(--space-md, 1rem);
    padding-right: var(--space-md, 1rem);
}

/* Grid layouts — Mobile (1 column).
   .services-grid and .portfolio-grid are intentionally omitted:
   08-components.css defines them mobile-first as 1fr and owns all breakpoints. */
.capabilities-grid,
.pricing-grid,
.benefits-grid,
.value-grid,
.industries-grid,
.approach-grid,
.process-steps,
.grid-2,
.grid-3,
.grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-md, 1.5rem);
}

/* Typography — Mobile */
h1 {
    font-size: clamp(1.75rem, 8vw, 2rem);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h2 {
    font-size: clamp(1.5rem, 6vw, 1.75rem);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h3 {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

img,
picture,
video {
    max-width: 100%;
    height: auto;
}

/* ===========================================================================
   VERY SMALL MOBILE (≥320px)
   =========================================================================== */
@media (min-width: 20em) {
    .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* ===========================================================================
   SMALL TABLET (≥600px / 37.5em)
   =========================================================================== */
@media (min-width: 37.5em) {
    /*
     * REMOVED v2.3: max-width and width overrides on .container.
     * 03-layout.css v4.3 handles container width via min(80%, 1400px).
     * Only padding is adjusted here.
     */
    .container {
        padding-left: var(--space-lg, 1.5rem);
        padding-right: var(--space-lg, 1.5rem);
    }

    .capabilities-grid,
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg, 1.75rem);
    }

    h1 { font-size: clamp(2rem, 5vw, 2.5rem); }
    h2 { font-size: clamp(1.75rem, 4vw, 2rem); }
}

/* ===========================================================================
   TABLET (≥768px / 48em)
   =========================================================================== */
@media (min-width: 48em) {
    /*
     * REMOVED v2.3: max-width: 1200px on .container.
     * At 768px viewport, min(80%, 1400px) = 614px — appropriate for tablet.
     * Restoring a 1200px max-width here would override the 80% rule.
     * Only padding is adjusted.
     */
    .container {
        padding-left: var(--space-xl, 2rem);
        padding-right: var(--space-xl, 2rem);
    }

    h1 { font-size: clamp(2.5rem, 4vw, 3rem); }
    h2 { font-size: clamp(2rem, 3vw, 2.5rem); }

    .capabilities-grid,
    .pricing-grid,
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl, 2rem);
    }

    .impact-grid,
    .approach-grid,
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===========================================================================
   LAPTOP (≥1024px / 64em)
   =========================================================================== */
@media (min-width: 64em) {
    /*
     * REMOVED v2.3: max-width: 1200px and explicit width on .container.
     * At 1024px viewport, min(80%, 1400px) = 819px.
     * At 1500px viewport, min(80%, 1400px) = 1200px (matches old limit).
     * The 80% rule provides a natural, proportional progression.
     * Only padding is adjusted here.
     */
    .container {
        padding-left: var(--space-xl, 2rem);
        padding-right: var(--space-xl, 2rem);
    }

    h1 { font-size: clamp(3rem, 4vw, 3.5rem); }
    h2 { font-size: clamp(2.25rem, 3vw, 2.75rem); }

    /*
     * .services-grid and .portfolio-grid column counts removed — owned by
     * 08-components.css. Previously this file was overriding to 2 columns
     * at laptop when 08-components was setting 3.
     */

    .capabilities-grid,
    .pricing-grid,
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl, 2rem);
    }

    .industries-grid,
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===========================================================================
   LARGE DESKTOP (≥1440px / 90em)
   =========================================================================== */
@media (min-width: 90em) {
    /*
     * REMOVED v2.3: max-width: 1400px on .container.
     * min(80%, 1400px) already caps at 1400px on screens ≥1750px.
     * On screens between 1440–1750px, 80% provides proportional sizing.
     */

    h1 { font-size: clamp(3.5rem, 4vw, 4rem); }
    h2 { font-size: clamp(2.5rem, 3vw, 3rem); }

    .benefits-grid,
    .capabilities-grid,
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===========================================================================
   MOBILE LANDSCAPE ORIENTATION
   =========================================================================== */
@media (max-width: 767px) and (orientation: landscape) {
    .section-padding {
        padding: 2rem 0;
    }

    .hero-lower-third .hero-content-wrapper {
        padding: 1.5rem 0;
    }
}

/* ===========================================================================
   ACCESSIBILITY - Reduce Motion
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    a,
    button,
    .btn {
        transition: color 0.05s, background-color 0.05s, border-color 0.05s;
    }
}

/* ===========================================================================
   ACCESSIBILITY - High Contrast
   =========================================================================== */
@media (prefers-contrast: high) {
    .glass-panel,
    .glass-card,
    .service-card,
    .why-card,
    .card,
    .btn,
    .portfolio-item {
        border-width: 2px !important;
        border-color: rgba(183, 148, 246, 0.8) !important;
    }

    body {
        color: #ffffff;
    }

    a {
        text-decoration: underline;
    }
}

/* ===========================================================================
   PRINT STYLES
   =========================================================================== */
@media print {
    .capabilities-grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .menu-toggle,
    .back-to-top,
    .portfolio-filters,
    nav {
        display: none !important;
    }

    .service-card,
    .portfolio-item,
    .glass-card {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}