/* ============================================================
   responsive.css — Harsh Gajipara Portfolio
   Breakpoints: 1200 | 992 | 768 | 480
   ============================================================ */

/* ── 1200px — Wide Laptop ───────────────────────────────────── */
@media (max-width: 1200px) {
    .skills-grid   { grid-template-columns: repeat(3, 1fr); }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid   { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
    .footer-brand  { grid-column: 1 / -1; max-width: 100%; }
    .footer-brand p { max-width: 400px; }

    .hero-layout   { gap: 40px; }
    .hero-img-wrap { width: 320px; height: 320px; }

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

/* ── 992px — Tablet Landscape ───────────────────────────────── */
@media (max-width: 992px) {

    /* Nav */
    .nav {
        position: fixed;
        top: 0; right: -100%;
        width: 280px;
        height: 100vh;
        background: rgba(8,13,39,0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
    }

    .nav.open { right: 0; }

    .nav-list {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        padding: 40px 24px;
    }

    .nav-link {
        font-size: 1rem;
        padding: 12px 16px;
        border-radius: var(--radius-sm);
        width: 100%;
    }

    .hamburger { display: flex; }
    .btn-hire  { display: none; }

    /* Hero */
    .hero-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 48px;
        min-height: auto;
        padding: 80px 0 60px;
    }

    .hero-visual { order: -1; }
    .hero-img-wrap { width: 280px; height: 280px; margin: 0 auto; }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-social { justify-content: center; }
    .badge-exp { left: 0; bottom: 0; }
    .badge-proj { right: 0; top: 0; }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-img-col { display: flex; justify-content: center; }
    .about-img-wrap { max-width: 380px; }
    .about-photo { max-width: 100%; }

    /* Experience Timeline */
    .timeline::before { left: 20px; }

    .tl-item {
        width: 100%;
        padding-left: 48px;
        padding-right: 0;
        margin-left: 0 !important;
    }

    .tl-left  { padding-right: 0; }
    .tl-right { padding-left: 48px; }

    .tl-left  .tl-dot { right: auto; left: 13px; }
    .tl-right .tl-dot { left: 13px; }

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

    /* Services */
    .services-grid { grid-template-columns: repeat(2, 1fr); }

    /* Projects */
    .projects-grid { grid-template-columns: repeat(2, 1fr); }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Process */
    .process-grid { grid-template-columns: repeat(2, 1fr); }

    /* Certs */
    .certs-grid { grid-template-columns: repeat(2, 1fr); }
    .certs-grid .cert-card:nth-child(4),
    .certs-grid .cert-card:nth-child(5) { grid-column: auto; }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .footer-brand { grid-column: 1 / -1; }

    /* Section spacing */
    .section { padding: 80px 0; }
}

/* ── 768px — Tablet Portrait ────────────────────────────────── */
@media (max-width: 768px) {

    /* Hero */
    .name-text { font-size: 2.2rem; }
    .hero-typed-wrap { font-size: 1rem; }
    .float-badge { padding: 8px 12px; font-size: 0.8rem; }

    /* Skills */
    .skills-grid { grid-template-columns: repeat(2, 1fr); }
    .skills-filter { gap: 6px; }
    .filter-tab { padding: 6px 14px; font-size: 0.78rem; }

    /* Services */
    .services-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

    /* Projects */
    .projects-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .proj-filters { gap: 6px; }
    .proj-tab { padding: 6px 14px; font-size: 0.78rem; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Process */
    .process-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

    /* Certs */
    .certs-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .certs-grid .cert-card:nth-child(4),
    .certs-grid .cert-card:nth-child(5) { grid-column: 1; }

    /* Contact form row */
    .form-row { grid-template-columns: 1fr; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-brand { grid-column: 1; max-width: 100%; }
    .footer-bottom .container { justify-content: center; text-align: center; }

    /* About checks */
    .about-checks { grid-template-columns: 1fr; }
    .about-meta   { grid-template-columns: 1fr 1fr; }

    /* Testimonial nav */
    .testi-swiper .swiper-button-prev { left: calc(50% - 52px); }
    .testi-swiper .swiper-button-next { right: calc(50% - 52px); }

    /* Section */
    .section { padding: 64px 0; }
    .section-head { margin-bottom: 48px; }
}

/* ── 480px — Mobile ─────────────────────────────────────────── */
@media (max-width: 480px) {

    :root { --hh: 64px; }

    .container { padding: 0 16px; }

    /* Hero */
    .hero-layout { padding: 48px 0 48px; gap: 32px; }
    .hero-img-wrap { width: 240px; height: 240px; }
    .name-text { font-size: 1.9rem; letter-spacing: -1px; }
    .hello-text { font-size: 0.9rem; }
    .hero-typed-wrap { font-size: 0.95rem; }
    .hero-desc { font-size: 0.88rem; }
    .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
    .hero-actions .btn { width: 100%; max-width: 280px; justify-content: center; }
    .badge-exp { left: 50%; transform: translateX(-50%) translateY(10px); bottom: -20px; }
    .badge-proj { right: 0; top: -10px; }

    /* Logo */
    .logo { font-size: 1.4rem; }

    /* Skills */
    .skills-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .skill-card { padding: 16px; }
    .skill-icon-wrap { font-size: 1.6rem; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }
    .stat-item { padding: 32px 16px; }
    .stat-num { font-size: 2.4rem; }

    /* Timeline */
    .tl-head { flex-direction: column; gap: 8px; }
    .tl-period { align-self: flex-start; }

    /* Section title */
    .section-title { font-size: 1.6rem; }

    /* About meta */
    .about-meta { grid-template-columns: 1fr; }
    .about-meta { padding: 16px; }

    /* Certs */
    .cert-card { padding: 20px; }

    /* Contact form */
    .contact-form { padding: 24px 20px; }

    /* Back to top */
    .back-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }

    /* Footer */
    .footer-top { padding: 48px 0 32px; }
    .footer-col h4 { margin-bottom: 14px; }

    /* Swiper nav */
    .testi-swiper .swiper-button-prev,
    .testi-swiper .swiper-button-next { display: none; }

    /* Section */
    .section { padding: 48px 0; }
    .section-head { margin-bottom: 36px; }

    /* Nav mobile */
    .nav { width: 100%; right: -100%; }
    .nav.open { right: 0; }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── High Contrast ──────────────────────────────────────────── */
@media (prefers-contrast: high) {
    .glass-card { border-color: rgba(255,255,255,0.3); }
    .nav-link   { color: var(--text); }
    .muted      { color: #bbb; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
    .header, .cursor-dot, .cursor-ring,
    .reading-progress, .back-top,
    #preloader, .hero-blobs, #particles-js { display: none !important; }
    body { background: #fff; color: #000; }
    .g-text { -webkit-text-fill-color: inherit; background: none; color: #000; }
}