/* ============================================
   RESPONSIVE STYLES - Media Queries
   ============================================ */

/* ========== MOBILE FIRST BASE ========== */
/* Base styles are already mobile-first in other CSS files */

/* ========== SMALL DEVICES (landscape phones, 576px and up) ========== */
@media (min-width: 576px) {
    .hero__stats {
        gap: var(--space-12);
    }

    .hero__stat-number {
        font-size: var(--text-5xl);
    }
}

/* ========== MEDIUM DEVICES (tablets, 768px and up) ========== */
@media (min-width: 768px) {

    /* Navigation */
    .nav__links {
        display: flex;
    }

    .nav__toggle {
        display: none;
    }

    /* Hero */
    .hero__title {
        font-size: clamp(4rem, 10vw, 8rem);
    }

    .hero__cta {
        flex-direction: row;
    }

    /* About */
    .about__headline {
        font-size: var(--text-5xl);
    }

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

    /* Impact */
    .impact__card {
        min-height: 500px;
        padding: var(--space-16);
    }

    /* Philosophy */
    .philosophy__quote {
        font-size: var(--text-5xl);
    }

    .philosophy__process {
        gap: var(--space-6);
    }
}

/* Stats fix for tablet (768px-1199px) - use 2x2 grid like mobile */
@media (min-width: 768px) and (max-width: 1199px) {
    .hero__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6) var(--space-8);
    }

    .hero__stat-number {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    .hero__stat-label {
        font-size: var(--text-xs);
    }
}

/* ========== LARGE DEVICES (desktops, 1024px and up) ========== */
@media (min-width: 1024px) {

    /* Hero */
    .hero__scroll {
        display: flex;
    }

    /* About Grid */
    .about__grid {
        grid-template-columns: 40% 1fr;
        gap: var(--space-20);
    }

    /* Contact Grid */
    .contact__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-20);
    }

    /* Footer */
    .footer__name {
        font-size: clamp(4rem, 12vw, 12rem);
    }
}

/* ========== EXTRA LARGE DEVICES (large desktops, 1200px and up) ========== */
@media (min-width: 1200px) {

    /* Hero Stats - 4 columns on large screens */
    .hero__stats {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-8);
    }

    /* Expertise Grid */
    .expertise__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Portfolio Grid */
    .portfolio__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Impact Cards */
    .impact__card {
        width: 60vw;
        max-width: 800px;
    }
}

/* ========== EXTRA EXTRA LARGE DEVICES (larger desktops, 1400px and up) ========== */
@media (min-width: 1400px) {
    .container {
        padding-inline: var(--space-16);
    }

    .hero__title {
        font-size: clamp(5rem, 12vw, 10rem);
    }
}

/* ========== TOUCH DEVICES ========== */
@media (hover: none) and (pointer: coarse) {

    /* Disable hover effects that don't work on touch */
    .cursor,
    .cursor-dot {
        display: none !important;
    }

    body,
    a,
    button {
        cursor: auto;
    }

    /* Portfolio - always show overlay on touch */
    .portfolio__overlay {
        opacity: 1;
        background: linear-gradient(to top,
                rgba(10, 10, 10, 0.8) 0%,
                transparent 70%);
    }

    .portfolio__item-title,
    .portfolio__item-tag {
        transform: translateY(0);
    }

    /* Expertise cards - always show icons on touch */
    .expertise__card-icons {
        opacity: 0.6;
        transform: translateY(0);
    }

    /* Disable 3D effects on touch */
    .tilt,
    .expertise__card {
        transform: none !important;
    }
}

/* ========== REDUCED MOTION ========== */
@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;
    }

    .hero__video {
        animation: none;
    }

    .infinite-scroll {
        animation: none;
    }

    .float {
        animation: none;
    }

    .typing {
        width: 100%;
        border-right: none;
        animation: none;
    }
}

/* ========== HIGH CONTRAST MODE ========== */
@media (prefers-contrast: high) {
    :root {
        --color-text-secondary: rgba(255, 255, 255, 0.9);
        --color-text-muted: rgba(255, 255, 255, 0.8);
        --glass-border: rgba(255, 255, 255, 0.3);
    }

    .btn {
        border: 2px solid currentColor;
    }

    .card,
    .expertise__card,
    .portfolio__item {
        border-width: 2px;
    }
}

/* ========== DARK MODE (already default, but ensuring) ========== */
@media (prefers-color-scheme: dark) {
    /* Site is already dark mode by default */
}

/* ========== PRINT STYLES ========== */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .nav,
    .cursor,
    .cursor-dot,
    .back-to-top,
    .scroll-progress,
    .hero__scroll,
    .video-modal {
        display: none !important;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
    }

    .hero__video,
    .hero__bg {
        display: none;
    }

    .section {
        padding: 2rem 0;
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* ========== MOBILE NAVIGATION BREAKPOINTS ========== */
@media (max-width: 767.98px) {
    .nav__links {
        display: none;
    }

    .nav__toggle {
        display: flex;
    }

    /* Mobile menu styles are in components.css */

    /* Loader fix for mobile */
    .loader__text {
        font-size: clamp(1.75rem, 10vw, 3rem);
        letter-spacing: -0.01em;
    }

    /* Hero title fix for mobile - prevent text cutoff */
    .hero__title {
        font-size: clamp(2.5rem, 11vw, 4rem);
        word-break: break-word;
    }

    /* Stats 2x2 grid on mobile */
    .hero__stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4) var(--space-4);
    }

    .hero__stat {
        text-align: left;
    }

    .hero__stat-number {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .hero__stat-label {
        font-size: 0.65rem;
    }

    /* Footer name fix for mobile - prevent text cutoff */
    .footer__name {
        font-size: clamp(1.75rem, 9vw, 3rem);
        word-break: break-word;
        hyphens: auto;
    }
}

/* ========== LANDSCAPE MOBILE ========== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--space-20) 0;
    }

    .hero__scroll {
        display: none;
    }

    .philosophy {
        min-height: auto;
    }
}

/* ========== VERY SMALL SCREENS ========== */
@media (max-width: 374px) {
    :root {
        --section-padding-x: 1rem;
    }

    /* Loader fix for small screens */
    .loader__text {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
        letter-spacing: -0.02em;
    }

    .hero__title {
        font-size: clamp(2rem, 12vw, 3rem);
    }

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

    .about__headline,
    .expertise__title,
    .portfolio__title,
    .contact__title {
        font-size: var(--text-3xl);
    }

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

    .footer__name {
        font-size: clamp(2rem, 15vw, 4rem);
    }
}

/* ========== HIDE SCROLL INDICATOR ON SHORT VIEWPORTS ========== */
@media (max-height: 700px) {
    .hero__scroll {
        display: none;
    }
}

/* ========== NAVIGATION MOBILE MENU ========== */
@media (max-width: 767.98px) {
    .nav__mobile.active .nav__link {
        font-size: var(--text-3xl);
        font-family: var(--font-display);
        text-transform: uppercase;
    }
}