/* ==========================================
   Responsive CSS - Media Queries
   ========================================== */

/* ==========================================
   Desktop First Approach
   Max-width breakpoints for smaller screens
   ========================================== */

/* Large Desktop (1400px and above) */
@media (min-width: 1400px) {
    .section__container {
        max-width: 1320px;
    }

    .landing__title {
        font-size: var(--text-6xl);
    }

    .landing__title .highlight {
        font-size: 4.5rem;
    }
}

/* ==========================================
   Tablet Landscape (1024px - 1199px)
   ========================================== */

@media (max-width: 1199px) {
    :root {
        --text-5xl: 2.75rem;
        --text-6xl: 3.25rem;
    }

    .skills__grid,
    .projects__grid,
    .mindset__grid {
        gap: var(--space-6);
    }
}

/* ==========================================
   Tablet Portrait (768px - 1023px)
   ========================================== */

@media (max-width: 1023px) {
    :root {
        --text-4xl: 2rem;
        --text-5xl: 2.5rem;
        --text-6xl: 3rem;
    }

    .section {
        padding: var(--space-12) var(--space-6);
    }

    /* Skills Grid - 2 columns on tablet */
    .skills__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skill-card--js {
        grid-column: span 2;
    }

    /* Projects Grid - 2 columns on tablet */
    .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .projects__grid .project-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        justify-self: center;
    }

    /* Mindset Grid - 3 columns stays */
    .mindset__grid {
        gap: var(--space-4);
    }

    /* Introduction */
    .intro__line {
        font-size: var(--text-3xl);
    }

    /* Navigation Indicator */
    .nav-indicator {
        right: var(--space-3);
    }

    .nav-dot {
        width: 10px;
        height: 10px;
    }
}

/* ==========================================
   Mobile Landscape / Small Tablet (640px - 767px)
   ========================================== */

@media (max-width: 767px) {
    :root {
        --text-3xl: 1.5rem;
        --text-4xl: 1.75rem;
        --text-5xl: 2rem;
        --text-6xl: 2.25rem;
    }

    .section {
        padding: var(--space-10) var(--space-4);
    }

    /* Landing */
    .landing__title {
        font-size: var(--text-4xl);
    }

    .landing__title .highlight {
        font-size: var(--text-5xl);
        margin-top: var(--space-2);
    }

    #start-journey-btn {
        font-size: var(--text-base);
        padding: var(--space-4) var(--space-8);
    }

    /* Introduction */
    .intro__text-container {
        min-height: 250px;
        gap: var(--space-4);
    }

    .intro__line {
        font-size: var(--text-2xl);
    }

    /* Skills Grid - 1 column on mobile */
    .skills__grid {
        grid-template-columns: 1fr;
    }

    .skill-card--js {
        grid-column: span 1;
    }

    .skill-card {
        padding: var(--space-6);
    }

    /* Projects Grid - 1 column on mobile */
    .projects__grid {
        grid-template-columns: 1fr;
    }

    .projects__grid .project-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    .project-card {
        padding: var(--space-6);
    }

    /* Mindset Grid - 1 column on mobile */
    .mindset__grid {
        grid-template-columns: 1fr;
    }

    .mindset-card {
        padding: var(--space-6);
    }

    .mindset-card__icon {
        font-size: var(--text-4xl);
        margin-bottom: var(--space-4);
    }

    /* CTA Buttons - Stack on mobile */
    .cta__buttons {
        flex-direction: column;
        align-items: center;
    }

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

    /* Modal */
    .modal {
        padding: var(--space-4);
    }

    .modal__content {
        padding: var(--space-6);
    }

    .modal__footer {
        flex-direction: column;
    }

    /* Navigation Indicator - Hide on mobile */
    .nav-indicator {
        display: none;
    }

    /* Section titles */
    .section__title {
        font-size: var(--text-3xl);
    }

    .section__subtitle {
        font-size: var(--text-base);
        margin-bottom: var(--space-8);
    }

    /* Ensure minimum touch target size (44x44px) */
    .btn,
    .nav-dot,
    .skill-card,
    .project-card,
    .mindset-card,
    .js-demo-tab,
    .counter-btn,
    .modal__close {
        min-height: 44px;
        min-width: 44px;
    }

    /* JS Demo tabs wrap nicely */
    .js-demo-tabs {
        justify-content: center;
    }

    .js-demo-tab {
        padding: var(--space-3) var(--space-4);
    }
}

/* ==========================================
   Mobile Portrait (< 480px)
   ========================================== */

@media (max-width: 479px) {
    :root {
        --text-2xl: 1.25rem;
        --text-3xl: 1.375rem;
        --text-4xl: 1.5rem;
        --text-5xl: 1.75rem;
    }

    .section {
        padding: var(--space-8) var(--space-4);
    }

    /* Landing */
    .landing__title {
        font-size: var(--text-3xl);
    }

    .landing__title .highlight {
        font-size: var(--text-4xl);
    }

    /* Introduction */
    .intro__text-container {
        min-height: 200px;
    }

    .intro__line {
        font-size: var(--text-xl);
        white-space: normal;
    }

    /* Skills */
    .skill-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .skill-card__icon {
        width: 40px;
        height: 40px;
        font-size: var(--text-lg);
    }

    .skill-card__title {
        font-size: var(--text-xl);
    }

    /* JS Demo */
    .js-demo-tabs {
        gap: var(--space-1);
    }

    .js-demo-tab {
        font-size: 0.7rem;
        padding: var(--space-2) var(--space-3);
    }

    .counter-value {
        font-size: var(--text-3xl);
    }

    /* Projects */
    .project-card__title {
        font-size: var(--text-lg);
    }

    /* CTA */
    .cta__tagline {
        font-size: var(--text-base);
    }

    /* Background animation - Smaller on mobile */
    .landing__bg-animation::before,
    .landing__bg-animation::after {
        width: 300px;
        height: 300px;
        filter: blur(60px);
    }
}

/* ==========================================
   Height-based adjustments
   ========================================== */

/* Short viewports (landscape phones, split-screen) */
@media (max-height: 600px) {
    .section {
        min-height: auto;
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }

    .landing__title {
        margin-bottom: var(--space-6);
    }

    .intro__text-container {
        min-height: 150px;
    }

    .section__next-btn {
        margin-top: var(--space-6);
    }
}

/* ==========================================
   Print Styles
   ========================================== */

@media print {

    .nav-indicator,
    .btn--glow,
    .landing__bg-animation,
    .modal {
        display: none !important;
    }

    .section {
        min-height: auto;
        page-break-inside: avoid;
    }

    body {
        background: white;
        color: black;
    }

    .section__title,
    .landing__title,
    .highlight {
        background: none;
        -webkit-text-fill-color: inherit;
        color: black;
    }
}

/* ==========================================
   High Contrast Mode Support
   ========================================== */

@media (prefers-contrast: high) {
    :root {
        --color-bg-card: rgba(0, 0, 0, 0.9);
        --color-text-secondary: #d1d5db;
    }

    .skill-card,
    .project-card,
    .mindset-card,
    .modal__content {
        border-width: 2px;
    }

    .btn {
        border: 2px solid currentColor;
    }
}

/* ==========================================
   Dark Mode Media Query (for system preference)
   ========================================== */

@media (prefers-color-scheme: light) {
    /* Note: The default theme is dark, so this only applies 
       if user hasn't toggled theme and prefers light */
    /* Uncomment below to auto-switch to light theme */
    /*
    :root {
        --color-bg-primary: #f8fafc;
        --color-bg-secondary: #f1f5f9;
        --color-bg-tertiary: #e2e8f0;
        --color-bg-card: rgba(255, 255, 255, 0.9);
        --color-text-primary: #0f172a;
        --color-text-secondary: #475569;
    }
    */
}