/**
 * Responsive Styles - Gerador de Sorteios Online
 * Mobile-First Approach
 * Desenvolvido por B20 Conteúdo Digital
 */

/* ===== TABLET (768px+) ===== */
@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
    
    .container {
        padding: 24px;
        max-width: 720px;
    }
    
    /* Header Desktop Navigation */
    .desktop-nav {
        display: flex;
        gap: 8px;
    }
    
    .desktop-nav .nav-link {
        padding: 8px 16px;
        border-radius: 8px;
        color: var(--text-color);
        text-decoration: none;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
    }
    
    .desktop-nav .nav-link i {
        font-size: 16px;
    }
    
    .desktop-nav .nav-link:hover,
    .desktop-nav .nav-link.active {
        background: var(--primary-color);
        color: white;
    }
    
    /* Hide Bottom Navigation on Desktop */
    .bottom-nav {
        display: none !important;
    }
    
    /* Hero Section */
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    /* Type Grid */
    .type-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Raffle Config */
    .raffle-config {
        padding: 32px;
    }
    
    /* Results */
    .winner-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .results-actions {
        justify-content: center;
    }
    
    .results-actions button {
        flex: 0 1 auto;
    }
    
    /* History */
    .history-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* About Cards */
    .about-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Toast */
    .toast {
        bottom: 24px;
        max-width: 400px;
    }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
        padding: 32px;
    }
    
    /* Header */
    .app-header {
        padding: 0 32px;
    }
    
    .header-logo h1 {
        font-size: 1.5rem;
    }
    
    .desktop-nav {
        gap: 12px;
    }
    
    .desktop-nav .nav-link {
        padding: 10px 20px;
        font-size: 1rem;
    }
    
    /* Hero */
    .hero-section {
        padding: 48px 0;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    /* Type Grid */
    .type-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    /* Raffle Config - Two Column Layout */
    .raffle-config {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 40px;
    }
    
    #participants-section,
    #numbers-section {
        grid-column: 1 / -1;
    }
    
    .btn-draw {
        grid-column: 1 / -1;
    }
    
    /* Results */
    .results-section {
        padding: 32px;
    }
    
    .winner-cards {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* History */
    .history-list {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* About */
    .about-content {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* FAQ */
    .faq-container {
        max-width: 800px;
        margin: 24px auto;
    }
}

/* ===== LARGE DESKTOP (1440px+) ===== */
@media (min-width: 1440px) {
    .container {
        max-width: 1200px;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.5rem;
    }
    
    .type-card {
        padding: 24px;
    }
    
    .type-card i {
        font-size: 40px;
    }
    
    .raffle-config {
        padding: 48px;
    }
    
    .winner-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .app-header,
    .bottom-nav,
    .header-actions,
    .btn-primary,
    .btn-secondary,
    .results-actions,
    .app-footer {
        display: none !important;
    }
    
    body {
        padding: 0;
        background: white;
        color: black;
    }
    
    .results-section {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .winner-card {
        background: white !important;
        color: black !important;
        border: 1px solid #000;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000;
        --text-muted: #333;
    }
    
    .btn-primary,
    .btn-secondary {
        border: 2px solid currentColor;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-section {
        padding: 16px 0;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .type-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .type-card {
        padding: 12px;
    }
    
    .type-card i {
        font-size: 24px;
    }
    
    .type-card span {
        font-size: 0.8rem;
    }
    
    .type-card small {
        display: none;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn-primary,
    .btn-secondary,
    .nav-item,
    .type-card {
        min-height: 48px;
        min-width: 48px;
    }

    /* Enhanced nav-item touch targets */
    .nav-item {
        padding: 12px 20px;
        min-width: 72px;
        min-height: 56px;
    }

    /* Remove hover effects */
    .type-card:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .nav-item:hover {
        transform: none;
        background: transparent;
    }

    /* Strong active states for touch feedback */
    .type-card:active {
        transform: scale(0.96);
        background: rgba(255, 153, 0, 0.15);
    }

    .btn-primary:active,
    .btn-secondary:active {
        transform: scale(0.96);
        background: var(--primary-color);
    }

    .nav-item:active {
        transform: scale(0.95);
        background: rgba(255, 153, 0, 0.2);
        transition: all 0.1s ease;
    }
}

/* ===== SAFE AREAS (iPhone X+) ===== */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: max(60px, env(safe-area-inset-top));
    }
    
    .app-header {
        padding-top: env(safe-area-inset-top);
        height: calc(60px + env(safe-area-inset-top));
    }
    
    .bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        height: calc(65px + env(safe-area-inset-bottom));
    }
}

/* ===== DARK MODE SPECIFIC ADJUSTMENTS ===== */
@media (prefers-color-scheme: dark) {
    [data-theme="dark"] .type-card {
        border-color: #374151;
    }
    
    [data-theme="dark"] .type-card:hover {
        border-color: var(--primary-color);
    }
    
    [data-theme="dark"] .participants-textarea,
    [data-theme="dark"] .input-field input {
        background: #1E1E1E;
        border-color: #374151;
    }
    
    [data-theme="dark"] .spinner {
        border-color: #374151;
        border-top-color: var(--primary-color);
    }
}