/* ============================================================
   MDJR THEME — RESPONSIVE GLOBAL
   Arquivo: assets/css/base/responsive.css
   Carregado via functions.php em todas as páginas
   ============================================================

   BREAKPOINTS DE REFERÊNCIA:
   xs  → max-width: 479px   (mobile pequeno)
   sm  → max-width: 767px   (mobile)
   md  → max-width: 1023px  (tablet)
   lg  → max-width: 1279px  (desktop médio)
   xl  → min-width: 1280px  (desktop grande)
   ============================================================ */


/* ============================================================
   1. RESET & BOX MODEL GLOBAL
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
}


/* ============================================================
   2. CONTAINER GLOBAL
   ============================================================ */
.container,
.mdjr-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* Variantes de largura */
.container--sm  { max-width: 768px; }
.container--md  { max-width: 1024px; }
.container--lg  { max-width: 1440px; }
.container--full { max-width: 100%; }


/* ============================================================
   3. TIPOGRAFIA RESPONSIVA (fluid type)
   ============================================================ */
:root {
    /* Escala fluida: cresce com a viewport */
    --text-xs:   clamp(0.75rem,  1.5vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 1.8vw, 1rem);
    --text-base: clamp(1rem,     2vw,   1.125rem);
    --text-md:   clamp(1.125rem, 2.2vw, 1.25rem);
    --text-lg:   clamp(1.25rem,  2.5vw, 1.5rem);
    --text-xl:   clamp(1.5rem,   3vw,   2rem);
    --text-2xl:  clamp(2rem,     4vw,   2.75rem);
    --text-3xl:  clamp(2.5rem,   5vw,   3.5rem);
    --text-4xl:  clamp(3rem,     6vw,   4.5rem);
}

body {
    font-size: var(--text-base);
    line-height: 1.6;
}

h1 { font-size: var(--text-3xl); line-height: 1.15; }
h2 { font-size: var(--text-2xl); line-height: 1.2;  }
h3 { font-size: var(--text-xl);  line-height: 1.3;  }
h4 { font-size: var(--text-lg);  line-height: 1.35; }
h5 { font-size: var(--text-md);  line-height: 1.4;  }
h6 { font-size: var(--text-base);line-height: 1.4;  }


/* ============================================================
   4. ESPAÇAMENTOS RESPONSIVOS
   ============================================================ */
:root {
    --space-xs:  clamp(0.25rem, 1vw,  0.5rem);
    --space-sm:  clamp(0.5rem,  1.5vw, 1rem);
    --space-md:  clamp(1rem,    2.5vw, 1.5rem);
    --space-lg:  clamp(1.5rem,  4vw,  2.5rem);
    --space-xl:  clamp(2.5rem,  6vw,  4rem);
    --space-2xl: clamp(4rem,    8vw,  6rem);
}

section {
    padding-block: var(--space-xl);
}


/* ============================================================
   5. GRID UTILITÁRIO
   ============================================================ */
.grid {
    display: grid;
    gap: var(--space-md);
}

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

/* Auto-fit responsivo — sem media queries */
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.flex {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}


/* ============================================================
   6. NAVEGAÇÃO (HEADER)
   ============================================================ */
.site-header {
    width: 100%;
    position: relative;
    z-index: 100;
}

.nav-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Botão hambúrguer — escondido por padrão */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}


/* ============================================================
   7. FOOTER
   ============================================================ */
.site-footer {
    width: 100%;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}


/* ============================================================
   8. IMAGENS & MÍDIA
   ============================================================ */
.wp-block-image img,
.wp-post-image,
.attachment-full,
figure img {
    max-width: 100%;
    height: auto;
}

/* Aspect ratios */
.ratio-16-9 { aspect-ratio: 16 / 9; overflow: hidden; }
.ratio-4-3  { aspect-ratio: 4  / 3; overflow: hidden; }
.ratio-1-1  { aspect-ratio: 1  / 1; overflow: hidden; }

.ratio-16-9 img,
.ratio-4-3  img,
.ratio-1-1  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* iFrame / embed responsivo */
.embed-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.embed-responsive iframe,
.embed-responsive video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}


/* ============================================================
   9. FORMULÁRIOS
   ============================================================ */
input,
textarea,
select,
button {
    max-width: 100%;
    font-size: var(--text-base);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.form-row > * {
    flex: 1 1 240px;
}


/* ============================================================
   10. UTILITÁRIOS RESPONSIVOS
   ============================================================ */

/* Visibilidade */
.hide-on-mobile  { }
.hide-on-tablet  { }
.hide-on-desktop { display: none; }

/* Texto */
.text-center-mobile { }
.text-left-mobile   { }


/* ============================================================
   ■ DESKTOP MÉDIO — max-width: 1279px
   ============================================================ */
@media (max-width: 1279px) {

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

}


/* ============================================================
   ■ TABLET — max-width: 1023px
   ============================================================ */
@media (max-width: 1023px) {

    /* Container */
    .container,
    .mdjr-container {
        padding-inline: 1.25rem;
    }

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

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Utilitários */
    .hide-on-tablet {
        display: none !important;
    }

}


/* ============================================================
   ■ MOBILE — max-width: 767px
   ============================================================ */
@media (max-width: 767px) {

    /* Container */
    .container,
    .mdjr-container {
        padding-inline: 1rem;
    }

    /* Grid — tudo vira coluna única */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    /* Flex */
    .flex {
        flex-direction: column;
    }

    /* Navegação — hambúrguer */
    .nav-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .nav-menu.is-open {
        display: flex;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Tabelas — scroll horizontal */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Formulários */
    .form-row {
        flex-direction: column;
    }

    /* Utilitários */
    .hide-on-mobile {
        display: none !important;
    }

    .hide-on-desktop {
        display: revert !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .text-left-mobile {
        text-align: left !important;
    }

}


/* ============================================================
   ■ MOBILE PEQUENO — max-width: 479px
   ============================================================ */
@media (max-width: 479px) {

    /* Container mínimo */
    .container,
    .mdjr-container {
        padding-inline: 0.75rem;
    }

    /* Seções com menos padding */
    section {
        padding-block: var(--space-lg);
    }

    /* Botões — largura total */
    .btn,
    button[type="submit"] {
        width: 100%;
        text-align: center;
    }

}


/* ============================================================
   ■ DESKTOP GRANDE — min-width: 1280px
   ============================================================ */
@media (min-width: 1280px) {

    /* Grid de 4 restaurado */
    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

}


/* ============================================================
   ■ PREFERÊNCIA DE MOVIMENTO REDUZIDO (acessibilidade)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   ■ IMPRESSÃO
   ============================================================ */
@media print {

    .nav-toggle,
    .site-header nav,
    .site-footer {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #444;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

}