/**
 * Vivek Sharma — Career Evolution Responsive Design System
 * Pixel-Perfect Mobile, Tablet, Laptop, and Desktop Breakpoints
 */

/* ═══════════════════════════════════════════════════════════════════
   LARGE LAPTOPS & DESKTOPS (MAX 1400px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
    :root {
        --section-px: clamp(1.5rem, 4vw, 4rem);
    }

    .hero-split-card-container {
        width: 46%;
        right: 3vw;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET LANDSCAPE & SMALL LAPTOPS (MAX 1024px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    :root {
        --section-py: clamp(4rem, 8vh, 7rem);
        --nav-height: 75px;
    }

    .nav-menu {
        display: none !important;
    }

    .nav-cta.desktop-only {
        display: none !important;
    }

    .nav-hamburger {
        display: flex !important;
    }

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

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

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .stat-item:nth-child(2)::after {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(3.5rem, 9vw, 7rem);
    }

    .hero-split-card-container {
        width: 50%;
        max-width: 480px;
        right: 2vw;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET PORTRAIT & MEDIUM MOBILE (MAX 768px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    :root {
        --section-py: clamp(3rem, 6vh, 5rem);
        --section-px: 1.25rem;
        --nav-height: 70px;
    }

    .hero-intro-box {
        padding-top: calc(var(--nav-height) + 1rem);
    }

    .hero-title {
        font-size: clamp(2.5rem, 10vw, 4.5rem);
        line-height: 1.05;
        letter-spacing: -0.02em;
    }

    .hero-intro-sub {
        font-size: 1.1rem;
        margin-bottom: 1.25rem;
    }

    .hero-split-card-container {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: 2rem;
        padding: 0 1rem;
    }

    .hero-split-card {
        padding: 1.5rem;
        border-radius: var(--radius-lg);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .about-split {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .about-split .about-image {
        aspect-ratio: 4/5;
        max-height: 420px;
        margin: 0 auto;
    }

    .project-card {
        aspect-ratio: 4/3;
    }

    .project-card-title {
        font-size: 1.25rem;
    }

    .section-header {
        margin-bottom: var(--space-xl);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer-bottom .container {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 320px;
    }

    .testimonial-card {
        padding: var(--space-lg);
    }

    .quote-popup {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .lms-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SMALL MOBILE SCREENS (MAX 480px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root {
        --section-px: 1rem;
    }

    .hero-title {
        font-size: clamp(2.2rem, 11vw, 3.5rem);
    }

    .btn {
        padding: 0.85rem 1.5rem;
        font-size: 0.8rem;
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
    }

    .stat-item {
        padding: var(--space-sm) var(--space-xs);
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .stat-item::after {
        display: none;
    }

    .card {
        padding: 1.25rem;
    }

    .whatsapp-btn {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .nav-logo-text {
        font-size: 1.15rem;
    }

    .nav-logo-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    /* Prevent auto-zoom on iOS Safari for inputs */
    .form-input, .form-select, .form-textarea {
        font-size: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ULTRA-WIDE & 4K DISPLAYS (MIN 2560px)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 2560px) {
    html {
        font-size: 20px;
    }

    :root {
        --container-max: 1800px;
    }
}