/* ==========================================================================
   institucional_responsive.css
   Media Queries para Layout Responsivo
   A.R.L.S. Pesquisas e Estudos Voltaire nº 4281

   Breakpoints:
   - Desktop: > 1024px (padrão, estilos base)
   - Notebook: 768px - 1024px
   - Tablet: 480px - 768px
   - Mobile: < 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Notebook (768px - 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --nav-height: 60px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.35rem;
    }

    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .section {
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-2xl);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   2. Tablet (480px - 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --nav-height: 56px;
    }

    html {
        font-size: 15px;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }

    /* Grids colapsam para coluna única */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Cards em coluna única */
    .card {
        padding: var(--spacing-md);
    }

    /* Botões full-width em tablet */
    .btn--responsive {
        width: 100%;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   3. Mobile (< 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    :root {
        --nav-height: 50px;
    }

    html {
        font-size: 14px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    body {
        line-height: 1.5;
    }

    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .section--sm {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }

    /* Grids colapsam para coluna única */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* Cards ajustados para mobile */
    .card {
        padding: var(--spacing-md);
        border-radius: var(--border-radius-sm);
    }

    /* Espaçamentos reduzidos */
    .mt-2xl { margin-top: var(--spacing-xl); }
    .mb-2xl { margin-bottom: var(--spacing-xl); }
    .gap-xl { gap: var(--spacing-lg); }
    .gap-lg { gap: var(--spacing-md); }

    /* Botões full-width em mobile */
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
    }

    .btn--responsive {
        width: 100%;
        text-align: center;
    }

    /* Formulários ajustados */
    .form-input {
        padding: var(--spacing-sm);
        font-size: 16px; /* Previne zoom no iOS */
    }

    /* Texto ajustado */
    .text-xl {
        font-size: 1.1rem;
    }

    .text-2xl {
        font-size: 1.25rem;
    }

    /* Divider ajustado */
    .divider {
        width: 60px;
        margin: var(--spacing-md) auto;
    }
}

/* --------------------------------------------------------------------------
   4. Utilitários de Visibilidade por Breakpoint
   -------------------------------------------------------------------------- */

/* Esconder em mobile */
@media (max-width: 480px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Esconder em tablet */
@media (max-width: 768px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Mostrar apenas em mobile */
@media (min-width: 481px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Mostrar apenas em tablet e abaixo */
@media (min-width: 769px) {
    .show-tablet-only {
        display: none !important;
    }
}

/* Mostrar apenas em desktop */
@media (max-width: 1024px) {
    .show-desktop-only {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   5. Imagens Responsivas
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 768px) {
    img.img-hero {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    img.img-hero {
        max-width: 90%;
    }
}