/* ==========================================
   RESPONSIVE
   Breakpoint-specific refinements only.
   Base responsive behaviour (container width,
   fluid type via clamp, fluid spacing) already
   lives in global.css / variables.css.
   This file layers small, necessary overrides
   on top - it does not redefine the system.

   Reference breakpoints covered:
   320 / 375 / 390 / 425 / 768 / 1024 / 1280 / 1440 / 1920
========================================== */


/* ---- Small phones (~320-424px) ----
   Base mobile-first styles already target this
   range by default. Only a safety adjustment for
   the very smallest devices so content never
   feels cramped. */
@media (max-width: 374px) {
    .container {
        width: 94%;
    }
}


/* ---- Large phones / small tablets (~425-767px) ----
   Default mobile container/spacing already applies
   correctly here; nothing additional required yet. */


/* ---- Tablet (~768px and up) ----
   Content can breathe a little more before the
   85% desktop rule takes over at 1024px. */
@media (min-width: 768px) {
    .container {
        width: 90%;
    }

    .grid {
        gap: var(--space-xl);
    }
}


/* ---- Desktop (~1024px and up) ----
   Desktop content width rule (~85%) is defined
   in global.css. This adds desktop-only grid
   density as a genuinely reusable default. */
@media (min-width: 1024px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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


/* ---- Large desktop (~1280-1440px) ----
   Container already caps at --container-max-width,
   so large screens keep controlled, readable
   content instead of stretching further. */


/* ---- Extra-large desktop (~1920px and up) ----
   Same max-width cap applies; only background
   surfaces should extend full width, per the
   full-width-background + contained-content rule. */
@media (min-width: 1920px) {
    .section {
        padding-block: var(--space-3xl);
    }
}