/* ===================================================================
   GiggleZen Technologies -- Unified Grid System
   File: assets/css/site-grid-system.css
   Loaded LAST in components/head.php (after site-finalize.css) so it
   wins the cascade for all layout rules.

   Architecture:
     - MOBILE-FIRST. Base rules target the narrowest viewport (~360px).
     - One breakpoint set, no overlap:
         * Base   (< 600px)   - all multi-col grids collapse to 1fr
         * Small  (>= 600px)  - large-mobile / small-tablet 2-up
         * Medium (>= 900px)  - tablet / small-desktop 2-3 cols
         * Large  (>= 1200px) - desktop final layout
     - Uses !important on layout properties ONLY to override the
       legacy site-finalize.css which has 223 !important flags.
     - Adds container safety rules (min-width:0, max-width:100%,
       box-sizing:border-box) so long content cannot blow out columns.

   Covered grid classes (14 + 4 admin):
     services-grid, feature-grid, blog-grid, pricing-grid,
     gallery-grid, stack-grid, port-grid, hero-stats, split-row,
     about-grid, about-mv, contact-card, contact-form, process-rail,
     footer-inner, jobs-grid, cards-grid, testimonials-grid,
     showcase-grid, cta-strip-inner
   =================================================================== */


/* ===================================================================
   1. Document-level overflow guards
   Stops any single rogue child from creating a horizontal scrollbar
   on the whole page. Already partially set in site-finalize.css but
   re-asserted here so a mis-typed inline width on a stray element
   can't break the whole layout.
   =================================================================== */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

main, .main, .container, .wrap, .section, section.section {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

img, video, iframe, canvas {
    max-width: 100% !important;
    height: auto;
}


/* ===================================================================
   2. Grid container baseline (mobile-first: ALL collapse to 1fr)
   Apply to every known grid container. Every direct child gets
   min-width: 0 so long words / wide tables don't overflow the cell.
   =================================================================== */
.services-grid,
.feature-grid,
.blog-grid,
.pricing-grid,
.gallery-grid,
.stack-grid,
.port-grid,
.hero-stats,
.split-row,
.about-grid,
.about-mv,
.contact-card,
.contact-form,
.process-rail,
.footer-inner,
.jobs-grid,
.cards-grid,
.testimonials-grid,
.showcase-grid,
.cta-strip-inner {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.services-grid > *,
.feature-grid > *,
.blog-grid > *,
.pricing-grid > *,
.gallery-grid > *,
.stack-grid > *,
.port-grid > *,
.hero-stats > *,
.split-row > *,
.about-grid > *,
.about-mv > *,
.contact-card > *,
.contact-form > *,
.process-rail > *,
.footer-inner > *,
.jobs-grid > *,
.cards-grid > *,
.testimonials-grid > *,
.showcase-grid > *,
.cta-strip-inner > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* port-grid uses fixed 280px rows for the masonry look on desktop;
   on mobile that fixed height crushes content. Auto-rows below 900px. */
.port-grid {
    grid-auto-rows: auto !important;
}


/* ===================================================================
   3. Small breakpoint (>= 600px)
   Large phones in landscape + small tablets. Promotes a few grids to
   2 columns where their cards are narrow enough to read.
   =================================================================== */
@media (min-width: 600px) {
    .gallery-grid,
    .stack-grid,
    .hero-stats,
    .about-mv,
    .contact-form,
    .process-rail,
    .cta-strip-inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
}


/* ===================================================================
   4. Medium breakpoint (>= 900px)
   Tablet landscape + small desktop. Side-by-side rows kick in.
   =================================================================== */
@media (min-width: 900px) {
    .services-grid,
    .feature-grid,
    .blog-grid,
    .pricing-grid,
    .port-grid,
    .testimonials-grid,
    .cards-grid,
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px !important;
    }

    .split-row,
    .about-grid,
    .contact-card {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }

    .gallery-grid,
    .stack-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    .hero-stats {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }

    .process-rail {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 16px !important;
    }

    /* port-grid: restore fixed-row masonry on desktop-class widths */
    .port-grid {
        grid-auto-rows: 280px !important;
    }
}


/* ===================================================================
   5. Large breakpoint (>= 1200px)
   Full desktop. Final column counts and spacing.
   =================================================================== */
@media (min-width: 1200px) {
    .services-grid,
    .feature-grid,
    .blog-grid,
    .pricing-grid,
    .port-grid,
    .testimonials-grid,
    .cards-grid,
    .showcase-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 22px !important;
    }

    .gallery-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }

    .stack-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 14px !important;
    }

    .about-grid {
        grid-template-columns: 1.3fr 1fr !important;
        gap: 48px !important;
    }

    .contact-card {
        grid-template-columns: 0.85fr 1fr !important;
        gap: 50px !important;
    }

    .footer-inner {
        grid-template-columns: 1.6fr 1fr 1fr 1.5fr !important;
        gap: 40px !important;
    }

    .split-row {
        gap: 60px !important;
    }

    .contact-form {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* ===================================================================
   6. Section padding scales with viewport
   Replaces ad-hoc clamp / em padding spread across other files.
   =================================================================== */
.section,
section.section {
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
}

@media (min-width: 900px) {
    .section,
    section.section {
        padding-left: clamp(24px, 5vw, 64px);
        padding-right: clamp(24px, 5vw, 64px);
    }
}


/* ===================================================================
   7. Override for the dynamic feature-grid (about-us.php values)
   The PHP file used to set an inline style="grid-template-columns:..."
   that bypassed all media queries. We now set the column count via
   a CSS custom property (--cols) and clamp it at the large breakpoint.
   At < 1200px the value is ignored; below it we render in 1-3 columns
   so 4-6 value cards stack cleanly on small screens.
   =================================================================== */
.feature-grid[style*="--cols"] {
    /* Below 1200px: behave like any feature-grid (rules above) */
}

@media (min-width: 1200px) {
    .feature-grid[style*="--cols"] {
        grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important;
    }
}


/* ===================================================================
   8. Page-CTAs button row stacks on mobile
   The .page-ctas row holds "Work with us" / "Join the team" type CTA
   pairs. Multiple service pages and the hero use it.
   =================================================================== */
.page-ctas,
.hero-ctas,
body .page-hero .page-ctas {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap;
    gap: 12px !important;
    align-items: stretch;
}

.page-ctas > .btn,
.page-ctas > a,
.hero-ctas > .btn,
.hero-ctas > a {
    width: 100%;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .page-ctas,
    .hero-ctas,
    body .page-hero .page-ctas {
        flex-direction: row !important;
        align-items: center;
    }
    .page-ctas > .btn,
    .page-ctas > a,
    .hero-ctas > .btn,
    .hero-ctas > a {
        width: auto;
    }
}


/* ===================================================================
   9. Navigation: stack on mobile, inline on tablet+
   The header nav often had inline layout that overflowed below ~480px.
   =================================================================== */
.nav-links {
    list-style: none;
}

@media (max-width: 899px) {
    .nav-links {
        gap: 6px !important;
    }
}


/* ===================================================================
   10. Footer overflow safety
   Footer columns sometimes contain long links / long URLs that blow
   out the column on narrow screens. word-break + overflow-wrap fixes.
   =================================================================== */
.footer-inner,
.footer-inner * {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}


/* ===================================================================
   11. Cookie banner / sticky CTA do not stack on top of each other
   Already handled in site-finalize.css but re-asserted with safe
   layout values so a future regression cannot collapse the spacing.
   =================================================================== */
@media (max-width: 599px) {
    .sticky-cta-mobile {
        bottom: 12px;
    }
    .cookie-banner,
    #cookie-banner,
    .cb-banner {
        bottom: 72px !important;
        left: 8px !important;
        right: 8px !important;
        max-width: calc(100% - 16px) !important;
    }
}

/* =================================================================== */
/* END site-grid-system.css                                            */
/* =================================================================== */