/* ===========================================
   LUMIÈRE Nail Atelier - Responsive
   =========================================== */

/* ========== MOBILE FIRST (< 640px) ========== */
/* Base styles already defined above */

/* ========== TABLET (640px - 767px) ========== */
@media (min-width: 640px) {
    /* Typography */
    h1 { font-size: var(--text-6xl); }
    h2 { font-size: var(--text-5xl); }
    h3 { font-size: var(--text-3xl); }
    
    /* Hero */
    .hero__title-main {
        font-size: var(--text-6xl);
    }
    
    .hero__description {
        font-size: var(--text-xl);
    }
    
    .hero__cta {
        flex-direction: row;
        justify-content: center;
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Contact */
    .contact__item {
        flex-direction: row;
        align-items: center;
    }
}

/* ========== SMALL DESKTOP (768px - 1023px) ========== */
@media (min-width: 768px) {
    /* Sections */
    .section {
        padding: var(--space-24) 0;
    }
    
    /* Section headers */
    .section-title {
        font-size: var(--text-5xl);
    }
    
    /* Hero */
    .hero {
        padding-top: var(--header-height);
    }
    
    .hero__title-main {
        font-size: var(--text-7xl);
    }
    
    .hero__image-wrapper {
        max-width: 450px;
    }
    
    /* About */
    .about__image-accent {
        width: 180px;
        height: 180px;
        bottom: -30px;
        right: -20px;
    }
    
    /* Services */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Features */
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Gallery */
    .gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Statistics */
    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-card__number {
        font-size: var(--text-6xl);
    }
    
    /* Testimonials */
    .testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Pricing */
    .pricing__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pricing-card--featured {
        transform: scale(1.02);
    }
    
    .pricing-card--featured:hover {
        transform: scale(1.02) translateY(-4px);
    }
    
    /* FAQ */
    .faq__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
    
    /* Newsletter */
    .newsletter__wrapper {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
    
    /* Contact */
    .contact__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
    
    .contact__form-wrapper {
        padding: var(--space-10);
    }
    
    /* Footer */
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ========== DESKTOP (1024px - 1279px) ========== */
@media (min-width: 1024px) {
    /* Navigation */
    .nav {
        height: var(--header-height);
    }
    
    .nav__menu {
        display: flex;
        position: static;
        flex-direction: row;
        background: transparent;
        padding: 0;
    }
    
    .nav__toggle {
        display: none;
    }
    
    /* Hero */
    .hero__content {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
    }
    
    .hero__text {
        text-align: left;
    }
    
    .hero__description {
        margin: 0 0 var(--space-8);
    }
    
    .hero__cta {
        justify-content: flex-start;
    }
    
    .hero__image-wrapper {
        max-width: 500px;
    }
    
    /* About */
    .about__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
    }
    
    .about__content {
        padding-top: 0;
    }
    
    .about__image-accent {
        width: 200px;
        height: 200px;
        bottom: -40px;
        right: -30px;
    }
    
    /* Services */
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Features */
    .features__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Gallery */
    .gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Statistics */
    .stats__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Testimonials */
    .testimonials__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Pricing */
    .pricing__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .pricing-card--featured {
        transform: scale(1.05);
    }
    
    .pricing-card--featured:hover {
        transform: scale(1.05) translateY(-4px);
    }
    
    /* FAQ */
    .faq__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
    }
    
    /* Contact */
    .contact__grid {
        grid-template-columns: 1fr 1.5fr;
        gap: var(--space-16);
    }
    
    .contact__form-wrapper {
        padding: var(--space-12);
    }
    
    /* Footer */
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ========== LARGE DESKTOP (1280px+) ========== */
@media (min-width: 1280px) {
    /* Container */
    .container {
        max-width: 1320px;
    }
    
    /* Hero */
    .hero__title-main {
        font-size: var(--text-7xl);
    }
    
    .hero__image-wrapper {
        max-width: 550px;
    }
    
    /* Section headers */
    .section-title {
        font-size: var(--text-6xl);
    }
    
    /* About */
    .about__features {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .about__feature {
        flex: 1 1 250px;
    }
}

/* ========== EXTRA LARGE (1536px+) ========== */
@media (min-width: 1536px) {
    .hero__title-main {
        font-size: 5rem;
    }
    
    .hero__image-wrapper {
        max-width: 600px;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    .header,
    .hero__scroll,
    .btn,
    .nav__toggle,
    .footer__social,
    form {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    .section {
        padding: 20pt 0;
        page-break-inside: avoid;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
}

/* ========== HIGH DPI DISPLAYS ========== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Crisp borders and shadows */
    .card,
    .btn,
    input,
    textarea,
    select {
        transform: translateZ(0);
    }
}

/* ========== DARK MODE (optional) ========== */
@media (prefers-color-scheme: dark) {
    /* Uncomment below to enable dark mode */
    /* 
    :root {
        --color-white: #1a1a1a;
        --color-cream: #2a2a2a;
        --color-text: #e0e0e0;
        --color-text-light: #b0b0b0;
        --color-text-lighter: #808080;
        --color-dark: #f5f5f5;
    }
    */
}

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

/* ========== TOUCH DEVICE OPTIMIZATIONS ========== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .hover-scale:hover,
    .hover-lift:hover,
    .hover-glow:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
    
    /* Make touch targets larger */
    .btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Disable shimmer effects */
    .hover-shine::after {
        display: none;
    }
}

/* ========== ZOOM RESISTANT ========== */
@media (max-width: 319px) {
    html {
        font-size: 14px;
    }
    
    .container {
        padding: 0 var(--space-4);
    }
    
    .btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);
    }
}

/* ========== SMALL HEIGHT SCREENS ========== */
@media (max-height: 600px) {
    .hero {
        min-height: auto;
        padding: var(--space-16) 0;
    }
    
    .hero__scroll {
        display: none;
    }
}