/* =============================================================================
   Greenwood Volunteer Fire Company — Coming Soon
   responsive.css — Breakpoints & layout shifts
   -----------------------------------------------------------------------------
   Breakpoint Strategy (mobile-first):
     * Base           : up to 479px   — vertical phones, single column
     * Small tablet   : 480px - 767px — landscape phones / small tablets
     * Tablet         : 768px - 1023px — tablets / small laptops
     * Desktop        : 1024px - 1439px — standard desktops
     * Large desktop  : 1440px - 1919px — large displays
     * Wide desktop   : 1920px - 3439px — 1080p / 1440p / ultrawide
     * 4K threshold   : 3440px+        — 4K & ultra-wide 3440x1440 and up
   ============================================================================= */

/* -------------------------------------------------------------------------
   BASE (≤ 479px) — vertical phone
   Everything is a single column. Touch-friendly targets.
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   MOBILE — anything below tablet (< 768px)
   Everything is single-column and center-aligned, per spec.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Masthead: stack vertically; tighter letter-spacing at smaller width */
    .masthead {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-4) 0 var(--space-3);
        text-align: center;
        letter-spacing: 0.15em;
    }
    .masthead__rank,
    .masthead__identifier,
    .masthead__county {
        text-align: center;
        justify-content: center;
    }
    .masthead__identifier {
        order: -1;
    }

    /* Grids collapse to single column */
    .stats__grid,
    .contact__grid,
    .about__content {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Section titles center horizontally (was: flex-start + column) */
    .section-title {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-2);
    }

    /* About: center text; convert left-border accent to top-border so it reads centered */
    .about {
        text-align: center;
    }
    .about__content {
        margin-left: auto;
        margin-right: auto;
    }
    .about__lead {
        border-left: none;
        border-top: 2px solid var(--color-red);
        padding-left: 0;
        padding-top: var(--space-4);
        text-align: center;
        max-width: 52ch;
        margin-left: auto;
        margin-right: auto;
    }
    .about__body {
        text-align: center;
        max-width: 55ch;
        margin-left: auto;
        margin-right: auto;
    }

    /* Stats: center content; convert left-border accent to top-border */
    .stats__item {
        border-left: none;
        border-top: 2px solid rgba(245, 241, 235, 0.1);
        text-align: center;
        padding: var(--space-4);
    }
    .stats__item--accent {
        border-top-color: var(--color-red);
    }
    .stats__item--accent::before {
        background: linear-gradient(180deg, rgba(200, 16, 46, 0.08), transparent);
    }

    /* Contact cards: center everything inside */
    .contact__card {
        text-align: center;
        align-items: center;
    }
    .contact__card-address {
        text-align: center;
    }
    .contact__card-button {
        align-self: stretch; /* keep full-width CTA at mobile */
        padding: var(--space-4); /* 44px+ touch target per WCAG 2.5.5 */
    }

    /* Footer: stack vertically and center all three items */
    .site-footer__row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        text-align: center;
    }
    .site-footer__brand,
    .site-footer__credit,
    .site-footer__meta {
        justify-self: center;
    }
    .site-footer__brand {
        justify-content: center;
    }
    .site-footer__meta {
        justify-content: center;
    }
    .site-footer__motto {
        text-align: center;
    }
}

/* -------------------------------------------------------------------------
   BASE (≤ 479px) — vertical phone
   Extra tightness on top of the shared mobile layout above.
   ------------------------------------------------------------------------- */
@media (max-width: 479px) {
    :root {
        --gutter: 1.25rem;
    }

    .emergency-banner {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        padding: 0.6rem 1rem;
        text-align: center;
        flex-wrap: wrap;
    }

    .hero {
        padding: var(--space-6) 0 var(--space-7);
    }
    .hero__eyebrow-line { width: 30px; }
    .hero__title { letter-spacing: -0.01em; }

    .stats__grid,
    .contact__grid {
        gap: var(--space-3);
    }

    .contact__card {
        padding: var(--space-4);
    }

    .site-footer__meta {
        font-size: 0.65rem;
    }
}

/* -------------------------------------------------------------------------
   TABLET (768px - 1023px)
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about__content {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

/* -------------------------------------------------------------------------
   DESKTOP (1024px - 1439px) — default grid layout already set in styles.css
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1439px) {
    .page {
        padding: 0 var(--space-7);
    }
}

/* -------------------------------------------------------------------------
   LARGE DESKTOP (1440px - 1919px)
   ------------------------------------------------------------------------- */
@media (min-width: 1440px) and (max-width: 1919px) {
    :root {
        --max-content: 1500px;
    }
}

/* -------------------------------------------------------------------------
   WIDE DESKTOP (1920px - 3439px) — 1080p, 1440p, ultrawide below 4K threshold
   ------------------------------------------------------------------------- */
@media (min-width: 1920px) and (max-width: 3439px) {
    :root {
        --max-content: 1700px;
        --gutter: 4rem;

        --fs-body:  1.2rem;
        --fs-lead:  1.5rem;
        --fs-h2:    3.5rem;
        --fs-h1:    9rem;
        --fs-huge:  11rem;
    }
    .maltese-badge { width: 320px; }
    .about__content { max-width: 1400px; }
}

/* -------------------------------------------------------------------------
   4K & ULTRA-WIDE (≥ 3440px)
   Per spec: 4K break points start at 3440 x 1440.
   Scale up typography, spacing, and asset sizes proportionally.
   ------------------------------------------------------------------------- */
@media (min-width: 3440px) {
    :root {
        --max-content: 2800px;
        --gutter: 6rem;

        /* Scale font sizes significantly for 4K */
        --fs-micro: 1.1rem;
        --fs-small: 1.4rem;
        --fs-body:  1.75rem;
        --fs-lead:  2.25rem;
        --fs-h3:    3rem;
        --fs-h2:    5rem;
        --fs-h1:    14rem;
        --fs-huge:  16rem;

        /* Scale spacing */
        --space-1:  0.375rem;
        --space-2:  0.75rem;
        --space-3:  1.125rem;
        --space-4:  1.5rem;
        --space-5:  2.25rem;
        --space-6:  3rem;
        --space-7:  4.5rem;
        --space-8:  6rem;
        --space-9:  9rem;
        --space-10: 12rem;
    }

    html { font-size: 20px; }

    /* Backdrop: bigger grid cells and glow, so texture stays proportional */
    .backdrop__grid {
        background-size: 140px 140px;
    }
    .backdrop__glow {
        filter: blur(200px);
    }

    /* Badge scales up but capped so it doesn't dwarf everything */
    .maltese-badge { width: 460px; }

    /* Ember particles scale */
    .ember {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 10px var(--color-ember);
    }

    /* Tighter line-height at huge sizes */
    .hero__title { line-height: 0.85; }

    /* Border accents visible at 4K */
    .stats__item {
        border-left-width: 3px;
    }
    .contact__card {
        border-top-width: 4px;
    }

    /* About content scales with the rest of 4K layout */
    .about__content { max-width: 2200px; }
}

/* -------------------------------------------------------------------------
   EXTREME 4K (≥ 5120px) — future-proof for 5K / 8K displays
   ------------------------------------------------------------------------- */
@media (min-width: 5120px) {
    :root {
        --max-content: 4000px;
        --fs-body:  2.25rem;
        --fs-h1:    18rem;
        --fs-huge:  20rem;
    }
    html { font-size: 24px; }
    .maltese-badge { width: 620px; }
    .about__content { max-width: 3200px; }
}

/* -------------------------------------------------------------------------
   Landscape mobile (phone rotated)
   ------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: var(--space-5) 0;
    }
    .maltese-badge { width: 130px; }
    .hero__badge-wrap { margin-bottom: var(--space-4); }
}

/* -------------------------------------------------------------------------
   Hover capability — only apply hover transforms on devices that can hover
   ------------------------------------------------------------------------- */
@media (hover: none) {
    .contact__card:hover,
    .stats__item:hover {
        transform: none;
    }
}