/**
 * responsive.css - All Responsive Breakpoints
 *
 * Consolidates @media queries for grids, hero, footer, and
 * section spacing. Nav breakpoint lives in components.css
 * to keep show/hide logic co-located and atomic.
 *
 * Breakpoints:
 *   480px  - Small phone tightening
 *   640px  - Tablet portrait (2-col grids)
 *   768px  - Tablet landscape (3-col footer, hero sizing)
 *   1024px - Desktop (3-col grids, larger spacing)
 *   1280px - Wide desktop refinements
 *
 * @package LibrandiOutdoorPower
 * @since 1.1.0
 * @updated 0.1.1 - Hero desktop rules rewritten: padding-block
 *                  zeroed and replaced with min-height:
 *                  calc(100svh - var(--lop-header-h)) so the
 *                  perforated mesh canvas fills the viewport
 *                  on 1080p / 1440p / 4K monitors and the
 *                  safety-orange seams sit flush against the
 *                  sticky header above and the next section
 *                  below.
 * @updated 0.1.2 - Hero min-height swapped from full-viewport
 *                  calc to a clamped value (480px / 65svh /
 *                  680px) so the bottom safety-orange seam
 *                  sits comfortably above the fold on 1080p
 *                  monitors instead of requiring a scroll.
 *                  At taller monitors (1440p, 4K) the clamp
 *                  ceiling keeps the hero from sprawling past
 *                  the bottom-seam visibility threshold.
 */


/* ==========================================================
   Max 480px: Extra-small devices
   ========================================================== */
@media (max-width: 480px) {
    /* Stack services-list into a single centered column at
       narrow widths (mirrors the grid pattern above). */
    .services-list {
        grid-template-columns: max-content;
    }

    .hero__actions {
        flex-direction: column;
    }
    .hero__actions .btn {
        width: 100%;
    }
}


/* ==========================================================
   640px+: Tablet portrait
   ========================================================== */
@media (min-width: 640px) {
    .overview-grid,
    .services-grid,
    .equipment-grid,
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1.2fr 0.8fr;
    }

    /* Footer intentionally skips the generic 2-col step here --
       with a centered-logo pattern it reads cleaner as single
       column below 768px and jumps straight to 3 col above it. */
}


/* ==========================================================
   768px+: Tablet landscape
   Nav breakpoint is in components.css (co-located with base rules).
   ========================================================== */
@media (min-width: 768px) {
    .hero__title {
        font-size: var(--text-5xl);
    }

    /* Footer 3-column layout. auto in the middle lets the logo
       column be only as wide as the logo; 1fr columns on either
       side fill the remaining space equally so info and hours
       sit symmetrically around the centered logo. */
    .site-footer__grid {
        grid-template-columns: 1fr auto 1fr;
    }
}


/* ==========================================================
   1024px+: Desktop
   ========================================================== */
@media (min-width: 1024px) {
    .overview-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .equipment-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .section {
        padding-block: var(--space-20);
    }

    /*
     * Hero at desktop widths.
     *
     * v0.1.1 used min-height: calc(100svh - var(--lop-header-h))
     * which made the hero claim the full visible viewport. On
     * 1080p that produced a 960px hero; combined with the
     * sticky header (120px) the bottom safety-orange seam sat
     * past the fold and required a scroll to see -- defeating
     * the purpose of the seam-as-section-divider language.
     *
     * v0.1.2 replaces the calc with a clamp:
     *   min  480px  -- floor so short laptop screens still get
     *                  a hero with presence, not a sliver
     *   pref 65svh  -- ~70% of small viewport height; reads as
     *                  a generous landing block but leaves room
     *                  for the next section to peek through
     *   max  680px  -- ceiling so 4K monitors do not produce a
     *                  900px+ hero where the bottom seam ends
     *                  up below the fold again
     *
     * On 1080p (1080px viewport): 65svh = 702 -> clamped to
     * 680. Total above-the-fold for hero+header = 800px. The
     * next section ("Your Local Outdoor Power Equipment Experts")
     * starts at y=800px, leaving 280px of it visible on a 1080p
     * monitor with no scroll. Bottom orange seam visible.
     *
     * On 1440p: 65svh = 936 -> clamped to 680. Above-the-fold
     * = 800px, leaving 640px below for the next section.
     *
     * On 4K (2160px viewport): 65svh = 1404 -> clamped to 680.
     * Hero feels tight relative to the screen, which is the
     * correct call for a hero designed around a fixed signage
     * plate -- letting the bolted plate float in 1500px of
     * empty mesh would feel staged, not focused.
     */
    .hero {
        padding-block: 0;
        min-height: clamp(480px, 65svh, 680px);
        display: flex;
        align-items: center;
    }

    /*
     * The mesh wrapper expands to fill the .hero box so the
     * perforated surface paints across the full hero height,
     * not just the natural height of the bolted center plate.
     * The flex centering on .hero pairs with this to keep the
     * bolted plate optically centered in the canvas.
     */
    .hero > .lop-snippet-mesh {
        align-self: stretch;
        width: 100%;
        display: flex;
        align-items: center;
    }
}


/* ==========================================================
   1280px+: Wide desktop
   ========================================================== */
@media (min-width: 1280px) {
    .hero__title {
        font-size: var(--text-6xl);
    }
}


/* ==========================================================
   Reduced motion preference
   ========================================================== */
@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;
    }

    .js-reveal,
    .js-reveal-left,
    .js-reveal-right,
    .js-reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}