/* ==========================================================================
   DHCS Design System — Responsive Breakpoints & Grid
   ==========================================================================
   Breakpoint        Width Range         Columns  Gutter  Outer Margin
   ──────────────────────────────────────────────────────────────────────
   Mobile Small      320px  – 359px      4        16px    16px
   Mobile Medium     360px  – 599px      8        24px    32px
   Desktop Medium    960px  – 1279px     12       24px    32px
   Desktop Large     1280px – 1919px     12       32px    48px
   Desktop XL        1920px +            12       32px    156px (auto-center)
   ========================================================================== */

/* --- CSS Custom Properties (defaults = Mobile Small) --- */
:root {
    --grid-columns: 4;
    --grid-gutter: 16px;
    --grid-margin: 16px;
}

/* --- Shared grid container --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gutter);
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   Mobile Small — 320px to 359px (default / base styles above)
   ========================================================================== */
@media screen and (max-width: 359px) {
    .card-container {
        flex-direction: column;
        align-items: center;
    }

    .hero-section h1,
    .hero-content h1 {
        font-size: 1.5rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .navbar-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-links {
        flex-direction: column;
        width: 100%;
    }

    .navbar-links a {
        width: 100%;
        padding-left: 0;
    }
}

/* ==========================================================================
   Mobile Medium — 360px to 599px
   Columns: 8 | Gutter: 24px | Outer Margin: 32px
   ========================================================================== */
@media screen and (min-width: 360px) and (max-width: 599px) {
    :root {
        --grid-columns: 8;
        --grid-gutter: 24px;
        --grid-margin: 32px;
    }

    .card-container {
        flex-direction: column;
        align-items: center;
    }

    .hero-section h1,
    .hero-content h1 {
        font-size: 1.8rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    .navbar-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-links {
        flex-direction: column;
        width: 100%;
    }

    .navbar-links a {
        width: 100%;
        padding-left: 0;
    }
}

/* ==========================================================================
   Tablet / Small Desktop — 600px to 959px  (transition zone)
   Columns: 8 | Gutter: 24px | Outer Margin: 32px
   ========================================================================== */
@media screen and (min-width: 600px) and (max-width: 959px) {
    :root {
        --grid-columns: 8;
        --grid-gutter: 24px;
        --grid-margin: 32px;
    }

    .hero-section h1,
    .hero-content h1 {
        font-size: 2rem;
    }

    .navbar-links {
        gap: 0.5rem;
    }
}

/* ==========================================================================
   Desktop Medium — 960px to 1279px
   Columns: 12 | Gutter: 24px | Outer Margin: 32px
   ========================================================================== */
@media screen and (min-width: 960px) and (max-width: 1279px) {
    :root {
        --grid-columns: 12;
        --grid-gutter: 24px;
        --grid-margin: 32px;
    }

    .hero-section h1,
    .hero-content h1 {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   Desktop Large — 1280px to 1919px
   Columns: 12 | Gutter: 32px | Outer Margin: 48px
   ========================================================================== */
@media screen and (min-width: 1280px) and (max-width: 1919px) {
    :root {
        --grid-columns: 12;
        --grid-gutter: 32px;
        --grid-margin: 96px;
    }

    .hero-section h1,
    .hero-content h1 {
        font-size: 2.75rem;
    }
}

/* ==========================================================================
   Desktop Extra Large — 1920px and above
   Columns: 12 | Column Width: 85px | Gutter: 32px | Outer Margin: 156px auto
   ========================================================================== */
@media screen and (min-width: 1920px) {
    :root {
        --grid-columns: 12;
        --grid-gutter: 32px;
        --grid-margin: 156px;
    }

    .grid-container {
        max-width: calc(12 * 85px + 11 * 32px);  /* fixed column width at XL */
    }

    .hero-section h1,
    .hero-content h1 {
        font-size: 2.75rem;
    }
}