/* ========================================
   RESPONSIVIDADE - MOBILE FIRST
   breakpoints: 480px, 768px, 992px, 1200px
   ======================================== */

/* ===== BASE MOBILE (default) ===== */
:root {
    --container-padding: var(--space-4);
}

.container {
    padding: 0 var(--container-padding);
}

/* Header Mobile */
.menu-toggle {
    display: flex;
}

.desktop-nav {
    display: none;
}

.header-actions .btn-associado {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

/* Hero Mobile */
.hero {
    padding: var(--space-10) var(--space-4);
    min-height: auto;
    padding-top: 100px;
}

.hero-buttons {
    flex-direction: column;
    align-items: center;
}

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

/* Grids Mobile */
.grid-2,
.grid-3,
.grid-4,
.footer-grid,
.sobre-grid,
.evento-content,
.contato-grid {
    grid-template-columns: 1fr;
}

/* Cards Mobile */
.card {
    margin-bottom: var(--space-4);
}

/* Forms Mobile */
.form-control {
    font-size: 16px; /* Evita zoom no iOS */
}

/* Countdown Mobile */
.countdown {
    flex-wrap: wrap;
    justify-content: center;
}

.countdown-item {
    min-width: calc(50% - var(--space-4));
    margin: var(--space-2);
}

/* Footer Mobile */
.footer-grid {
    gap: var(--space-6);
}

.footer-newsletter {
    text-align: center;
}

.newsletter-input-group {
    flex-direction: column;
}

.footer-legal {
    flex-direction: column;
    gap: var(--space-2);
}

/* ===== TABLET: 768px+ ===== */
@media (min-width: 768px) {
    :root {
        --container-padding: var(--space-6);
    }
    
    .hero h2 {
        font-size: var(--font-size-4xl);
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .countdown-item {
        min-width: auto;
        flex: 1;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== DESKTOP: 992px+ ===== */
@media (min-width: 992px) {
    :root {
        --container-padding: var(--space-8);
    }
    
    .menu-toggle {
        display: none;
    }
    
    .desktop-nav {
        display: flex;
    }
    
    .hero {
        min-height: 0;
        height: 620px;
        padding-top: 0;
    }
    
    .hero-buttons {
        flex-direction: row;
    }
    
    .btn {
        width: auto;
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .sobre-grid,
    .evento-content,
    .contato-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }
    
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    
    /* Hover effects apenas em desktop */
    .card:hover {
        transform: translateY(-5px);
    }
    
    .social-link:hover {
        transform: translateY(-3px);
    }
}

/* ===== LARGE DESKTOP: 1200px+ ===== */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
    
    .hero h2 {
        font-size: var(--font-size-5xl);
    }
}

/* ===== ULTRA WIDE: 1400px+ ===== */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

/* ===== TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
    .btn:active {
        transform: scale(0.98);
    }
    
    .card:hover {
        transform: none;
    }
    
    .nav-list a::after {
        display: none;
    }
    
    .nav-list a.active {
        color: var(--dourado);
        font-weight: 600;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .site-header,
    .site-footer,
    .whatsapp-float,
    .btn,
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    .hero {
        min-height: auto;
        padding: 2cm;
        background: white !important;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
    }
}

/* ===== DARK MODE SUPPORT (opcional) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --cinza-fundo: #1a1a1a;
        --branco: #1a1a1a;
        --branco-suave: #2c2c2c;
        --preto: #f5f5f0;
        --cinza: #b0b0b0;
    }
    
    body {
        background: var(--cinza-fundo);
        color: var(--preto);
    }
    
    .card {
        background: var(--branco-suave);
    }
    
    .form-control {
        background: var(--branco-suave);
        border-color: var(--preto-claro);
        color: var(--preto);
    }
}