/* ==========================================================
   responsive.css
   All breakpoint overrides. Mobile-first where practical,
   max-width used only for additive desktop patterns.
   Part of: Mohammed Shehzad Khan Portfolio v2.0
========================================================== */

/* ── ≤900px: Tablet and mobile ───────────────────────── */

@media (max-width: 900px) {

    /* Show hamburger; hide desktop-only nav items */
    .nav-toggle {
        display: flex;
    }

    /* Mobile dropdown menu */
    .nav-links {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(248, 250, 252, 0.98);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--border);
        padding: 0.5rem 0 1rem;
        z-index: 999;
    }

    .nav-links.is-open {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    /* Section spacing */
    section {
        padding: var(--section-py-mobile) 0;
    }

    /* Hero layout */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }


    .hero-image img {
        max-width: 300px;
    }

    .button-group {
        justify-content: flex-start;
    }

    .hero-meta {
        justify-content: flex-start;
    }

}

/* ── ≤768px: Tablets and large phones ──────────────────────── */

@media (max-width: 768px) {
    .story-grid {
        grid-template-columns: 1fr;
    }
    
    .wc-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ── ≤480px: Small phones ────────────────────────────── */

@media (max-width: 480px) {

    .hero-grid {
        gap: 2rem;
    }

    .button-group {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        justify-content: center;
    }

    /* Recruiter Action Bar: stack and stretch on small phones */
    .recruiter-bar__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .recruiter-bar .btn {
        justify-content: center;
    }

}