/* ==========================================================================
   Keystone Building Supply LLC — Responsive
   Mobile-first breakpoints. Base styles target small screens; media queries
   progressively enhance for larger viewports.
   Switch point for desktop nav vs. mobile bottom nav is 768px.
   ========================================================================== */

/* ==========================================================================
   MOBILE FIRST DEFAULTS (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Header: hide desktop nav & topbar, show compact controls */
    .topbar { display: none; }
    .primary-nav, .header-actions { display: none; }
    .mobile-actions { display: flex; }
    .brand-logo--full { display: none; }
    .brand-logo--icon { display: block; }
    .header-inner { min-height: var(--mobile-header-height); gap: var(--space-3); }

    /* Show app-style bottom nav; keep content clear of it */
    .mobile-bottom-nav { display: block; }
    body.has-mobile-nav { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
    .back-to-top { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px); }

    /* Utility visibility */
    .d-none-mobile { display: none !important; }
    .d-mobile-only { display: block; }

    /* Collapse multi-column grids */
    .grid-3, .grid-4, .grid-services,
    .benefits-strip, .steps, .project-chips,
    .gallery-preview-grid, .gallery-grid,
    .why-grid, .customers-grid { grid-template-columns: 1fr; }

    .split, .intro-grid, .location-grid,
    .detail-grid, .form-layout, .contact-top,
    .form-row { grid-template-columns: 1fr; }

    .service-row, .category-row { grid-template-columns: 1fr; }
    .service-row--reverse .service-row-media,
    .category-row:nth-child(even) .category-row-media { order: 0; }
    .service-row-media img, .category-row-media img { min-height: 220px; }

    /* Sticky asides become static on mobile */
    .form-aside, .detail-aside { position: static; }

    /* Section head stacks */
    .section-head { display: block; }
    .section-head .btn { margin-top: var(--space-4); }

    /* Hero */
    .hero-slide-inner { min-height: 460px; }
    .hero-slide-actions .btn { flex: 1 1 auto; }
    .hero-nav { display: none; }
    .benefits-section { margin-top: 0; }
    .benefits-strip { box-shadow: var(--shadow-sm); }

    /* CTA + footer stack */
    .cta-band-inner { display: block; }
    .cta-band-actions { margin-top: var(--space-4); }
    .cta-band-actions .btn { flex: 1 1 auto; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .footer-bottom { justify-content: center; text-align: center; }

    /* Detail check-list single column */
    .check-list { grid-template-columns: 1fr; }

    /* Lightbox arrows sit lower so they don't overlap the close button */
    .lightbox-prev { left: 0; }
    .lightbox-next { right: 0; }

    /* Owner card stacks */
    .owner-card { flex-direction: column; }
}

/* Very small phones (<= 380px) */
@media (max-width: 380px) {
    :root { --gutter: 0.9rem; }
    .mobile-bottom-nav-item { font-size: 0.62rem; }
    .mobile-bottom-nav-item i { font-size: 1.2rem; }
    .btn { padding-inline: 1rem; }
    .hero-slide-heading { font-size: 1.75rem; }
}

/* ==========================================================================
   TABLET / COMPACT DESKTOP (>= 768px): desktop nav appears
   ========================================================================== */
@media (min-width: 768px) {
    .mobile-bottom-nav { display: none; }
    .mobile-actions { display: none; }
    .mobile-menu { display: none !important; }

    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4, .grid-services { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .project-chips { grid-template-columns: repeat(2, 1fr); }
    .gallery-preview-grid { grid-template-columns: repeat(3, 1fr); }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .benefits-strip { grid-template-columns: repeat(2, 1fr); }
    .customers-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Compact desktop nav (768–991): keep 7 items on one row */
@media (min-width: 768px) and (max-width: 991.98px) {
    .brand-logo--full { display: none; }
    .brand-logo--icon { display: block; }
    .primary-nav-list { gap: 0.1rem; }
    .primary-nav-list > li > a, .nav-dropdown-toggle { padding: 0.5rem 0.5rem; font-size: var(--fs-xs); }
    .btn-quote { padding: 0.5rem 0.85rem; font-size: var(--fs-xs); min-height: 42px; }
    .topbar-location { display: none; }
    .topbar-inner { gap: var(--space-5); }
}

/* ==========================================================================
   DESKTOP (>= 992px): full layout
   ========================================================================== */
@media (min-width: 992px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4, .grid-services { grid-template-columns: repeat(4, 1fr); }
    .steps { grid-template-columns: repeat(4, 1fr); }
    .project-chips { grid-template-columns: repeat(4, 1fr); }
    .gallery-grid { grid-template-columns: repeat(4, 1fr); }
    .benefits-strip { grid-template-columns: repeat(4, 1fr); }
    .customers-grid { grid-template-columns: repeat(4, 1fr); }
    .serve-grid { }
}

/* Large desktops (>= 1440px): a touch more breathing room */
@media (min-width: 1440px) {
    :root { --section-y: clamp(3.5rem, 6vw, 6rem); }
}

/* Ultra-wide safety: never exceed max container */
@media (min-width: 1600px) {
    .hero-slide-inner { min-height: 600px; }
}

/* Print */
@media print {
    .site-header, .mobile-bottom-nav, .back-to-top, .cta-band, .hero-nav, .carousel-nav { display: none !important; }
    body { padding-bottom: 0; }
}