/* ══════════════════════════════════════════════════════
   responsive.css
   Media queries only (all @media blocks live here)
   ══════════════════════════════════════════════════════ */

/* ── CURSOR-WARMING GRID — Task C ───────────────────────
   Only enabled on true pointer devices (not touch).
   JS also checks matchMedia before attaching mousemove.
   ──────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .page-grid-warm {
        display: block;
    }
}

/* ── HEADER ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .header .container {
        padding: 0.8rem clamp(1rem, 4vw, 2rem);
    }

    .nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(20, 20, 22, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: left 0.3s ease;
        z-index: 1000;
    }

    .nav.active {
        left: 0;
    }

    .nav-link {
        font-size: 1.2rem;
        color: var(--text-secondary);
    }

    .nav-sep {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .language-switcher {
        margin-left: 0;
    }
}

/* ── HERO — Phase 2 responsive ──────────────────────── */

/* ── HERO responsive ── */
@media (max-width: 768px) {
    .hero {
        padding: 5rem 0 3rem;
    }

    .hero-content {
        padding: 0 1.25rem;
    }

    .hero-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .hero-tagline {
        font-size: 0.78rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-btn {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(2.2rem, 12vw, 3rem);
    }

    .hero-tagline {
        font-size: 0.72rem;
    }

    .hero-text {
        font-size: 0.95rem;
    }
}

/* ── PORTFOLIO GRID ──────────────────────────────────── */

/* Wide desktop: reduce to 8-col masonry */
@media (max-width: 1200px) {
    .gallery {
        grid-template-columns: repeat(8, 1fr);
    }

    .portfolio-item:nth-child(1),
    .portfolio-item:nth-child(2),
    .portfolio-item:nth-child(3) { grid-column: span 4; }

    .portfolio-item:nth-child(4),
    .portfolio-item:nth-child(5),
    .portfolio-item:nth-child(6),
    .portfolio-item:nth-child(n+7) { grid-column: span 4; }
}

/* Task 6 — Mobile: single-column stack with rhythmic heights.
   Switch to flexbox so grid-column/row spans have no effect.
   Heights alternate tall/short/medium to preserve brick rhythm
   through vertical stacking rather than horizontal tiling.       */
@media (max-width: 768px) {
    .gallery {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 2px;
    }

    .portfolio-item {
        width: 100%;
        flex-shrink: 0;
    }

    /* 3-phase height cycle: tall → short → medium */
    .portfolio-item:nth-child(3n+1) { height: 280px; }
    .portfolio-item:nth-child(3n+2) { height: 200px; }
    .portfolio-item:nth-child(3n)   { height: 240px; }

    /* Captions always legible at mobile */
    .portfolio-caption-title { font-size: 0.82rem; }
    .portfolio-caption-meta  { font-size: 0.65rem; }

    /* Section header: stack vertically */
    .portfolio-section-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Fig.01 marker: raise above bottom edge on mobile */
    .portfolio-fig-marker {
        bottom: 0.75rem;
        right: 1rem;
    }
}

@media (max-width: 480px) {
    /* Slightly reduced heights on small phones */
    .portfolio-item:nth-child(3n+1) { height: 240px; }
    .portfolio-item:nth-child(3n+2) { height: 170px; }
    .portfolio-item:nth-child(3n)   { height: 200px; }
}

/* ── MODALS ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .modal-content {
        width: 95vw;
        max-width: none;
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }

    .modal-image-container {
        min-height: 150px;
        max-height: 250px;
    }

    .modal-info { padding: 1rem; }

    .modal-gallery-container {
        padding: 0.8rem 1rem 0.5rem 1rem;
    }

    .modal-gallery img { width: 60px; height: 45px; }

    .gallery-nav { width: 20px; height: 20px; font-size: 0.8rem; }
    .gallery-nav-left  { left:  0.3rem; }
    .gallery-nav-right { right: 0.3rem; }
}

@media (max-width: 480px) {
    .modal-content {
        width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    .modal-image-container { min-height: 120px; max-height: 200px; }
    .modal-scrollable-content { min-height: 0; }
    .modal-info { padding: 0.8rem; }
    .modal-gallery-container { padding: 0.6rem 0.8rem 0.4rem; }
    .modal-gallery img { width: 50px; height: 38px; }
}

/* ── SKILLS GRID ─────────────────────────────────────── */
@media (max-width: 768px) {
    .skills-grid { grid-template-columns: 1fr; gap: 1rem; }
    .skill-category h4 { font-size: 1rem; }
    .skill-item { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
}

/* ── ABOUT STATS ─────────────────────────────────────── */
@media (max-width: 768px) {
    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .stat { padding: 0.5rem 0.3rem; }
    .stat-number { font-size: 1.2rem; }
    .stat-label { font-size: 0.65rem; }
}

@media (max-width: 480px) {
    .about-stats { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ── CONTACT INFO ────────────────────────────────────── */
@media (max-width: 768px) {
    .contact-info { grid-template-columns: 1fr; gap: 0.8rem; }
    .contact-item { padding: 0.8rem; }
    .contact-icon { font-size: 1rem; }
    .contact-text { font-size: 0.9rem; }
}

/* ── SCROLL TO TOP ───────────────────────────────────── */
@media (max-width: 768px) {
    .scroll-to-top { bottom: 20px; right: 20px; width: 45px; height: 45px; font-size: 18px; }
}

@media (max-width: 480px) {
    .scroll-to-top { bottom: 15px; right: 15px; width: 40px; height: 40px; font-size: 16px; }
}

/* ── ABOUT / CONTACT SECTION LAYOUTS ────────────────── */

/* Tablet and below: collapse two-column layouts to single */
@media (max-width: 900px) {
    .about-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-heading h2 {
        position: static;
    }

    .about-copy p {
        max-width: 100%;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 480px) {
    .section-entry { margin-bottom: 1.75rem; }
    .contact-items-list { margin-top: 1.5rem; }
}

/* ── MISC ────────────────────────────────────────────── */
@media (max-width: 768px) {
    body { overflow-x: hidden; }
    .main { overflow-x: hidden; }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero::before { background-size: 25px 25px; }
    .hero-grid-warm { background-size: 25px 25px; }
}

@media (max-width: 768px) and (orientation: landscape) {
    .hero { padding: 4rem 0 2rem; }
    .hero-content { gap: 1.5rem; }
    .hero-title { font-size: 1.8rem; }
    .modal-content { max-height: calc(100vh - 1rem); }
}

/* Print */
@media print {
    .header, .scroll-to-top, .modal { display: none !important; }
    .main { margin-top: 0; }
    body { background: white; color: black; }
}

/* ── REDUCED MOTION — Task 6 baseline ───────────────── */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
    html {
        scroll-behavior: auto;
    }
    /* Ensure animated elements land at their final visible state */
    .section-entry-rule   { transform: scaleX(1) !important; }
    .guide-card           { opacity: 1 !important; transform: none !important; }
    .hero-btn::before     { display: none !important; }
    .portfolio-fig-marker { transform: none !important; }
}