/* =========================================================
   WORLDCALENDARY - MOBILE FIX
   Carregar DEPOIS do style.css principal.
   ========================================================= */

/* Evita estouro horizontal causado por elementos largos */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.container {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

/* Elementos que costumam causar overflow */
.panel,
.result-card,
.stat,
.compare-card,
.mini-cal,
.table-wrap,
.filters,
.form-grid,
.split,
.calendar-grid,
.list,
.list-row {
    min-width: 0;
    max-width: 100%;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .container {
        width: min(100% - 28px, 760px);
    }

    .split {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .compare-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .filters,
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    header .container,
    .site-header .container {
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    nav,
    .nav,
    .site-nav {
        flex-wrap: wrap !important;
        gap: 10px 18px !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    body {
        font-size: 15px;
    }

    .container {
        width: calc(100% - 24px);
    }

    .section {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    h1 {
        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.03em;
        overflow-wrap: anywhere;
    }

    h2 {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    .lead {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .breadcrumbs {
        font-size: 12px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere;
        margin-bottom: 14px !important;
    }

    /* Header sem navegação horizontal */
    header .container,
    .site-header .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    nav,
    .nav,
    .site-nav {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px 10px !important;
    }

    nav a,
    .nav a,
    .site-nav a {
        width: 100% !important;
        padding: 8px 0 !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    /* Cards e painéis mais compactos */
    .panel,
    .result-card {
        padding: 18px !important;
        border-radius: 8px !important;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 18px !important;
        margin-bottom: 20px !important;
    }

    .stat {
        padding: 14px 10px !important;
        min-height: 104px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .stat span {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .stat strong {
        font-size: 24px !important;
        line-height: 1.1 !important;
        margin-top: 4px !important;
    }

    .stat small {
        margin-top: 4px !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    /* Formulários 100% verticais */
    .filters,
    .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .field,
    .field select,
    .field input,
    .field button,
    .btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .field select,
    .field input {
        min-height: 46px !important;
    }

    /* Calendário: 1 mês por linha, sem arrastar */
    .calendar-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .mini-cal {
        width: 100% !important;
        padding: 14px !important;
    }

    .mini-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
    }

    .mini-grid span {
        min-width: 0 !important;
        width: 100% !important;
        aspect-ratio: 1 / 1;
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        padding: 0 !important;
    }

    .mini-head span {
        min-height: 24px !important;
        aspect-ratio: auto !important;
        font-size: 10px !important;
    }

    /* Próximos feriados e listas:
       reduz bastante os espaços em branco */
    .list {
        gap: 0 !important;
    }

    .list-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 0 !important;
        min-height: 0 !important;
    }

    .list-row + .list-row {
        border-top: 1px solid var(--line, #dfe4ea);
    }

    .list-row strong {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .list-row .muted {
        font-size: 12px !important;
        margin-top: 2px !important;
        line-height: 1.35 !important;
    }

    .date-pill {
        min-width: 50px !important;
        padding: 7px 8px !important;
        text-align: center !important;
        font-size: 12px !important;
    }

    /* Tabelas viram cards verticais no celular.
       Sem scrollbar horizontal. */
    .table-wrap {
        overflow: visible !important;
        width: 100% !important;
    }

    .table-wrap table,
    .table-wrap tbody,
    .table-wrap tr,
    .table-wrap td {
        display: block !important;
        width: 100% !important;
    }

    .table-wrap thead {
        display: none !important;
    }

    .table-wrap table {
        min-width: 0 !important;
    }

    .table-wrap tr {
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--line, #dfe4ea) !important;
    }

    .table-wrap tr:last-child {
        border-bottom: 0 !important;
    }

    .table-wrap td {
        border: 0 !important;
        padding: 4px 0 !important;
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        overflow-wrap: anywhere;
    }

    .table-wrap td::before {
        font-size: 11px;
        font-weight: 600;
        color: var(--muted, #5e6b7a);
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .table-wrap td:nth-child(1)::before { content: "Data"; }
    .table-wrap td:nth-child(2)::before { content: "Dia"; }
    .table-wrap td:nth-child(3)::before { content: "Feriado"; }
    .table-wrap td:nth-child(4)::before { content: "Tipo"; }

    /* Comparação entre anos */
    .compare-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .compare-card {
        padding: 16px !important;
    }

    /* Chips quebram linha ao invés de estourar */
    .chips {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .chip {
        max-width: 100% !important;
        white-space: normal !important;
    }

    /* Botões/links não podem gerar largura maior que a tela */
    a,
    button,
    input,
    select {
        max-width: 100%;
    }
}

/* Celulares muito estreitos */
@media (max-width: 380px) {

    .container {
        width: calc(100% - 20px);
    }

    .stats {
        grid-template-columns: 1fr !important;
    }

    nav,
    .nav,
    .site-nav {
        grid-template-columns: 1fr !important;
    }

    .table-wrap td {
        grid-template-columns: 76px minmax(0, 1fr) !important;
    }

    .mini-grid span {
        min-height: 30px !important;
        font-size: 11px !important;
    }
}