/**
 * Responsive Styles
 * Mobile-First Breakpoints
 */

/* ========================================
   SMALL TABLETS / LARGE PHONES (>= 576px)
   ======================================== */

@media (min-width: 576px) {
    .hero__title {
        font-size: var(--font-size-4xl);
    }
    
    .section-header__title {
        font-size: var(--font-size-3xl);
    }
    
    .form__actions {
        flex-direction: row;
    }
    
    .form__actions .btn {
        flex: 1;
    }
    
    .export {
        flex-direction: row;
    }
    
    .export .btn {
        flex: 1;
        width: auto;
    }
    
    .trust-section__container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .usecases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   TABLETS (>= 768px)
   ======================================== */

@media (min-width: 768px) {
    :root {
        --panel-padding: var(--space-8);
    }
    
    .main {
        padding: 0;
    }
    
    /* Hero */
    .hero {
        padding: var(--space-16) var(--space-6) var(--space-12);
    }
    
    .hero__title {
        font-size: 3rem;
    }
    
    .hero__subtitle {
        font-size: var(--font-size-xl);
    }
    
    /* Trust */
    .trust-section {
        padding: var(--space-10) var(--space-6);
    }
    
    .trust-section__container {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Generator */
    .generator-section {
        padding: var(--space-12) var(--space-6);
    }
    
    .generator {
        gap: var(--space-8);
    }
    
    .preview {
        min-height: 300px;
    }
    
    /* Steps */
    .howto-section {
        padding: var(--space-16) var(--space-6);
    }
    
    /* Features */
    .features-section {
        padding: var(--space-16) var(--space-6);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    /* Types */
    .types-section {
        padding: var(--space-16) var(--space-6);
    }
    
    .types-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    /* Use Cases */
    .usecases-section {
        padding: var(--space-16) var(--space-6);
    }
    
    .usecases-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    /* FAQ */
    .faq-section {
        padding: var(--space-16) var(--space-6);
    }
    
    /* CTA */
    .cta-section {
        padding: var(--space-16) var(--space-6);
    }
    
    .cta-section__title {
        font-size: var(--font-size-3xl);
    }
    
    /* Header */
    .header__nav {
        display: flex;
    }
    
    .header__menu-btn {
        display: none;
    }
    
    .header__brand-text,
    .header__brand-divider {
        display: block;
    }
    
    /* Footer */
    .footer {
        padding: var(--space-12) var(--space-6) 0;
    }
    
    .footer__container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .footer__links {
        gap: var(--space-12);
    }
}

/* ========================================
   DESKTOP (>= 992px)
   ======================================== */

@media (min-width: 992px) {
    .generator {
        display: grid;
        grid-template-columns: minmax(360px, 1fr) minmax(400px, 1.5fr);
        gap: var(--space-8);
        align-items: start;
    }
    
    .generator__form {
        order: 1;
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
    }
    
    .generator__preview {
        order: 2;
    }
    
    .preview {
        min-height: 350px;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .types-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .usecases-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .type-card--featured {
        grid-column: span 2;
    }
}

/* ========================================
   LARGE SCREENS (>= 1200px)
   ======================================== */

@media (min-width: 1200px) {
    .hero {
        padding: var(--space-20) var(--space-8) var(--space-16);
    }
    
    .hero__title {
        font-size: 3.5rem;
    }
    
    .generator-section {
        padding: var(--space-16) var(--space-8);
    }
    
    .generator {
        grid-template-columns: minmax(400px, 1fr) minmax(500px, 1.8fr);
    }
    
    .preview {
        min-height: 400px;
    }
    
    .types-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .type-card--featured {
        grid-column: span 2;
    }
}

/* ========================================
   EXTRA LARGE SCREENS (>= 1400px)
   ======================================== */

@media (min-width: 1400px) {
    :root {
        --container-max-width: 1320px;
    }
    
    .types-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .type-card--featured {
        grid-column: span 2;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .header,
    .footer,
    .form__actions,
    .export,
    .notice,
    .hero,
    .trust-section,
    .howto-section,
    .features-section,
    .types-section,
    .usecases-section,
    .faq-section,
    .cta-section,
    .generator__form {
        display: none !important;
    }
    
    .app {
        background: white;
    }
    
    .generator {
        display: block;
    }
    
    .generator__preview {
        border: none;
        background: white;
    }
    
    .preview {
        background: white;
        border: none;
    }
    
    .preview__canvas-wrapper {
        box-shadow: none;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    .form__input,
    .form__select {
        min-height: 48px;
        padding: var(--space-3) var(--space-4);
    }
    
    .btn {
        min-height: 48px;
        padding: var(--space-4) var(--space-5);
    }
    
    .btn--large {
        min-height: 52px;
    }
    
    .form__checkbox-custom {
        width: 24px;
        height: 24px;
    }
    
    .form__range::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }
    
    .form__range::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
    
    .faq-item__question {
        padding: var(--space-5);
    }
    
    .header__menu-btn {
        width: 44px;
        height: 44px;
    }
    
    .mobile-nav__link {
        padding: var(--space-4);
    }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
    :root {
        --color-border: #666666;
        --color-text-secondary: #CCCCCC;
        --color-text-muted: #AAAAAA;
    }
    
    .form__input,
    .form__select {
        border-width: 2px;
    }
    
    .btn {
        border-width: 2px;
    }
    
    .faq-item {
        border-width: 2px;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}