/*
    responsive.css
    Every breakpoint override in the project lives in this one file,
    so there is a single place to look up what changes and where.
    Mobile-first: base styles in the other CSS files already work at
    320px; each query below only adds what changes as room increases.

    Card and update grids are NOT handled here — they use fluid
    auto-fit/minmax in layout.css and adapt continuously without a
    hard breakpoint. What genuinely needs a breakpoint is anything
    that changes MODE (nav: dropdown vs. bar) or DIRECTION (hero/about:
    stacked vs. side-by-side), which fluid sizing alone can't express.

    Verified at the project's required test widths:
    320 / 375 / 480 / 768 / 1024 / 1280 / 1440 / 1920.
*/

/* ---------------------------------------------------------------------
   768px — Navigation switches from mobile dropdown to a horizontal bar.
   Chosen because four short nav labels need far less width than the
   hero/about layouts below, so nav can comfortably go horizontal first.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }

    .nav-menu {
        position: static;
        flex-direction: row;
        gap: var(--space-2);
        padding: 0;
        background: none;
        border-bottom: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .nav-menu a {
        padding: var(--space-2) var(--space-4);
    }

    .site-footer__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------
   1024px — Hero and About switch from stacked to side-by-side. Given
   more room than the nav needs, these two-column layouts wait for a
   wider viewport so neither column feels cramped.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .hero__inner {
        flex-direction: row;
        align-items: center;
    }

    .hero__content {
        flex: 1 1 50%;
    }

    .hero__media,
    .hero .media-placeholder {
        flex: 1 1 50%;
    }

    .about__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-8);
    }

    .about__inner .media-placeholder {
        flex: 1 1 45%;
    }

    .about__content {
        flex: 1 1 55%;
    }
}

/* ---------------------------------------------------------------------
   1280px — Slightly roomier outer padding now that the container is
   further from the viewport edge on large monitors.
   ------------------------------------------------------------------ */
@media (min-width: 1280px) {
    :root {
        --container-padding-inline: var(--space-6);
    }
}

/* ---------------------------------------------------------------------
   1920px — More generous vertical breathing room between sections on
   very large displays, where the default rhythm starts to feel tight
   relative to the amount of surrounding space.
   ------------------------------------------------------------------ */
@media (min-width: 1920px) {
    main > section {
        padding-block: var(--space-9);
    }
}