/* ==========================================================================
   PRODUCTION-READY RESPONSIVE SYSTEM & MULTI-DEVICE BREAKPOINTS
   Supports: 320px, 360px, 375px, 390px, 414px, 480px, 768px, 820px, 1024px, 
             1280px, 1366px, 1440px, 1600px, 1920px+
   ========================================================================== */

/* --- 1. Large Ultra-Wide Displays (1600px+) --- */
@media (min-width: 1600px) {
    .container {
        width: min(100% - 64px, 1440px);
    }

    .hero-title-bold {
        font-size: clamp(4rem, 5.5vw, 5.6rem);
    }

    .writings-grid, .projects-grid-3col, .tech-stack-grid, .github-linkedin-split-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }
}

/* --- 2. Standard Desktop & Laptops (1200px - 1599px) --- */
@media (min-width: 1200px) and (max-width: 1599px) {
    .container {
        width: min(100% - 48px, 1280px);
    }

    .writings-grid, .projects-grid-3col, .tech-stack-grid, .github-linkedin-split-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

/* Hide desktop sub-tag on screen widths below 1280px to prevent text collisions */
@media (max-width: 1280px) {
    .desktop-only-tag {
        display: none !important;
    }
}

/* --- 3. Laptops & Small Desktops (1024px - 1199px) --- */
@media (min-width: 1024px) and (max-width: 1199px) {
    .container {
        width: min(100% - 36px, 1000px);
    }

    .writings-grid, .projects-grid-3col, .tech-stack-grid, .github-linkedin-split-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .navbar {
        width: min(100% - 32px, 920px);
        padding: 10px 20px;
    }
}

/* --- 4. Tablet Landscape & Portrait (768px - 1023px) --- */
@media (max-width: 1023px) {
    .container {
        width: min(100% - 32px, 920px);
    }

    .navbar {
        width: min(100% - 24px, 780px);
        padding: 10px 18px;
    }

    /* 3-Dot Mobile Toggle Icon Button */
    .mobile-toggle {
        display: flex;
        min-width: 44px;
        min-height: 44px;
    }

    .nav-menu {
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        width: min(100% - 32px, 480px);
        background: rgba(12, 15, 23, 0.98);
        border: 1px solid var(--border-glow);
        border-radius: 24px;
        padding: 28px 24px;
        flex-direction: column;
        gap: 16px;
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        margin-right: 0;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 10002;
    }

    .nav-menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .nav-actions {
        border-left: none;
        padding-left: 0;
    }

    .writings-grid, .projects-grid-3col, .tech-stack-grid, .github-linkedin-split-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .hero-grid, .about-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .portrait-frame-card {
        margin-inline: auto;
        max-width: 360px;
    }

    .hero-bio, .hero-sub-subtitle {
        margin-inline: auto;
        margin-bottom: 32px;
    }

    .hero-actions, .hero-socials-squares {
        justify-content: center;
    }

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

/* --- 5. Mobile Phones (320px - 767px) --- */
@media (max-width: 767px) {
    .container {
        width: min(100% - 24px, 540px);
        padding: 0 12px;
    }

    .section {
        padding: clamp(40px, 8vw, 70px) 0;
    }

    .hero-section {
        padding-top: 120px;
        padding-bottom: 50px;
    }

    .hero-title-bold {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .writings-title-main {
        font-size: clamp(1.75rem, 6vw, 2.4rem);
    }

    /* Single column layout for all cards on mobile */
    .writings-grid, .projects-grid-3col, .tech-stack-grid, .services-grid, .github-linkedin-split-grid, .about-stats-2x2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Education Zig-Zag Timeline Mobile Fallback */
    .edu-timeline-container::before {
        left: 20px;
        transform: none;
    }

    .edu-timeline-node {
        left: 20px;
        transform: translateX(-50%);
    }

    .edu-timeline-item, .edu-timeline-item:nth-child(even) {
        justify-content: flex-start;
        padding-left: 45px;
    }

    .edu-timeline-card {
        width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
        min-height: 48px;
        font-size: 0.85rem;
    }

    .contact-form {
        padding: 24px 16px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    /* Resume Viewer Modal Responsive Adjustments */
    .resume-modal-card {
        width: 96vw;
        padding: 16px;
        max-height: 92vh;
    }

    .resume-top-nav-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .resume-nav-actions {
        width: 100%;
        justify-content: space-between;
    }

    .resume-paper-sheet {
        padding: 24px 18px;
        font-size: 0.85rem;
    }

    .resume-paper-name {
        font-size: 1.5rem;
    }

    .resume-paper-contact-line {
        flex-direction: column;
        gap: 6px;
    }

    .cursor-dot, .cursor-ring {
        display: none !important;
    }
}

/* --- 6. Extra Small Mobile Devices (320px - 414px) --- */
@media (max-width: 414px) {
    .container {
        width: calc(100% - 16px);
        padding: 0 8px;
    }

    .navbar {
        padding: 8px 14px;
    }

    .nav-resume-btn {
        display: none !important;
    }

    .hero-title-bold {
        font-size: 1.85rem;
    }

    .portrait-frame-card {
        max-width: 100%;
        aspect-ratio: 1 / 1.1;
    }

    .social-square-btn {
        width: 44px;
        height: 44px;
    }

    .hero-ticker-track {
        font-size: 0.8rem;
    }
}

/* --- 7. Accessibility: Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .cursor-dot, .cursor-ring {
        display: none !important;
    }

    .cert-scroll-track, .hero-ticker-track {
        animation: none !important;
    }
}