/**
 * ═══════════════════════════════════════════════════════════
 * Responsive — Media Query Overrides
 * ═══════════════════════════════════════════════════════════
 *
 * Strategy: MOBILE-FIRST
 *   - Base styles (in all other files) target mobile.
 *   - This file progressively enhances for wider viewports.
 *   - Never add mobile-only styles here — put them in the
 *     base file and override at wider breakpoints.
 *
 * Breakpoints:
 *   --bp-sm:  640px   (large mobile / small tablet)
 *   --bp-md:  768px   (tablet)
 *   --bp-lg:  1024px  (desktop)
 *   --bp-xl:  1280px  (large desktop)
 *
 * Load order: LAST — overrides everything above
 * ═══════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════
   SMALL TABLET  (min-width: 640px)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 640px) {

    /* Grid adjustments */
    .grid--auto-sm {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

}

/* ══════════════════════════════════════════════════════════
   TABLET  (min-width: 768px)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

    /* Navigation — switch from mobile overlay to inline */
    .nav__toggle {
        display: none;
    }

    .nav__menu {
        position: static;
        flex-direction: row;
        background: none;
        padding: 0;
        /* Horizontal rhythm is owned by pages.css (.nav__menu gap: 2.25rem).
           Do NOT set gap here — this file loads last and would override it. */
    }

    /* Nav labels must never wrap to a second line. */
    .nav__link {
        white-space: nowrap;
    }

    /* Tablet / small laptop: tighten spacing so the bar never wraps,
       without collapsing it the way the old gap: var(--space-1) did. */
    @media (max-width: 1119px) {
        .nav__menu {
            gap: 1.25rem;
        }
    }

    /* Below ~1024px the full bar (logo + subtitle + 5 links + CV button)
       cannot fit. Drop the subtitle and tighten, keeping the desktop
       design at >=1024px completely untouched. */
    @media (max-width: 1023px) {
        .nav__menu {
            gap: 0.9rem;
        }
        .nav__logo-subtitle {
            display: none;
        }
        .nav__actions {
            gap: 0.75rem;
        }
        .nav__cv {
            padding: 0.55rem 0.9rem;
        }
    }

    /* Grid: force 2 columns where needed */
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Section padding increase */
    .section {
        padding-block: calc(var(--section-padding-y) * 0.85);
    }

}

/* ══════════════════════════════════════════════════════════
   DESKTOP  (min-width: 1024px)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

    /* Section full padding */
    .section {
        padding-block: var(--section-padding-y);
    }

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

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

}

/* ══════════════════════════════════════════════════════════
   LARGE DESKTOP  (min-width: 1280px)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {

    /* Container padding increases on very large screens */
    .container {
        padding-inline: var(--space-8);
    }

    /* Full-bleed bands follow the same gutter so their text stays aligned */
    :root {
        --container-gutter: var(--space-8);
    }

}

/* ══════════════════════════════════════════════════════════
   MOBILE NAVIGATION OVERLAY
   Raised from 767px to 849px: between 768-849px the inline bar
   (logo + 5 links + CV button) overflows the viewport, so the
   hamburger is used instead. This block is last in the file, so it
   intentionally overrides the inline nav rules in the 768px block.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 849px) {

    .nav__toggle {
        display: flex;
    }

    .nav__actions {
        display: none; /* Hidden on mobile nav bar — shown in mobile menu */
    }

    .nav__menu {
        position: fixed;
        top: var(--header-height-mobile);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-bg);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-6);
        z-index: var(--z-overlay);
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        border-top: 1px solid var(--color-border);
    }

    .nav__menu--open {
        transform: translateX(0);
    }

    .nav__link {
        font-size: var(--text-xl);
    }

    /* Mobile nav height */
    .site-header {
        height: var(--header-height-mobile);
    }

    main#main-content {
        padding-top: var(--header-height-mobile);
    }

}

/* ══════════════════════════════════════════════════════════
   PAGE-SPECIFIC RESPONSIVE OVERRIDES
   (Added per phase — Phase 5–9)
   ══════════════════════════════════════════════════════════ */

/* Home page responsive     → Phase 5 */
/* Journey page responsive  → Phase 6 */
/* Work page responsive     → Phase 7 */
/* Blog page responsive     → Phase 8 */
/* Contact page responsive  → Phase 9 */