/* ============================================================
   wiki-visuals.css , camada visual das paginas wiki de cidade.
   Componentes reutilizaveis (SSOT de estilo). O HTML vem de
   feriados/data/wiki_render.php; os dados, de cada cidade.
   Dark-safe.
   ============================================================ */

/* -------- Stat cards -------- */
.wiki-statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.wiki-stat {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    background: var(--card-bg, #ffffff);
}
.wiki-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary-color, #0071e3) 13%, #fff);
    color: var(--primary-color, #0071e3);
    flex-shrink: 0;
}
.wiki-stat__icon svg { width: 21px; height: 21px; }
.wiki-stat__body { display: flex; flex-direction: column; min-width: 0; }
.wiki-stat__value {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.18;
    color: var(--hfr-text-deep, #10243f);
    overflow-wrap: anywhere;
}
.wiki-stat__label {
    display: block;
    font-size: 0.72rem;
    color: var(--muted-color, #64748b);
    margin-top: 1px;
    overflow-wrap: anywhere;
}

/* -------- Climate , duas faixas separadas (temperatura e chuva) -------- */
.wiki-climate { margin: 20px 0; }
.wiki-climate__cap {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted-color, #64748b);
    margin: 10px 0 4px;
}
.wiki-climate__cap:first-child { margin-top: 0; }
.wiki-climate__temprow,
.wiki-climate__rainrow {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}
.wiki-climate__rainrow { padding-bottom: 2px; }
.wiki-climate__block { margin-bottom: 22px; }
.wiki-climate__block:last-child { margin-bottom: 0; }
.wiki-climate__tcol {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wiki-climate__tmax { font-size: 0.62rem; font-weight: 800; color: #e11d48; }
.wiki-climate__tmin { font-size: 0.62rem; font-weight: 700; color: #2563eb; }
.wiki-climate__track {
    position: relative;
    height: 92px;
    width: 100%;
    margin: 2px 0;
}
.wiki-climate__range {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 58%;
    max-width: 15px;
    min-height: 6px;
    border-radius: 9px;
    background: linear-gradient(180deg, #ef4444 0%, #f59e0b 48%, #3b82f6 100%);
}
.wiki-climate__rcol {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 96px;
}
.wiki-climate__rainval { font-size: 0.58rem; color: var(--muted-color, #64748b); margin-bottom: 3px; }
.wiki-climate__bar {
    width: 64%;
    max-width: 24px;
    height: calc(var(--h, 0) * 1%);
    min-height: 3px;
    background: linear-gradient(180deg, #7dd3fc 0%, #0ea5e9 100%);
    border-radius: 4px 4px 0 0;
}
.wiki-climate__months {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.wiki-climate__months span {
    flex: 1 1 0;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--hfr-text-deep, #334155);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* Tabela "em numeros" (gerada por wiki_render_stats) */
.wiki-numbers td:first-child { color: var(--muted-color, #64748b); }
.wiki-numbers td:last-child { text-align: right; white-space: nowrap; }

/* -------- Visual timeline -------- */
.wiki-timeline { position: relative; margin: 20px 0; padding-left: 30px; }
.wiki-timeline::before {
    content: "";
    position: absolute;
    left: 9px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--border-color, #e2e8f0);
}
.wiki-timeline__item { position: relative; padding-bottom: 16px; }
.wiki-timeline__item:last-child { padding-bottom: 0; }
.wiki-timeline__item::before {
    content: "";
    position: absolute;
    left: -25px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--primary-color, #0071e3);
    border: 3px solid var(--card-bg, #fff);
    box-shadow: 0 0 0 1px var(--border-color, #e2e8f0);
}
.wiki-timeline__year { font-weight: 800; color: var(--primary-color, #0071e3); }
.wiki-timeline__text { display: block; margin-top: 2px; }

/* -------- Map (aberto ao carregar a pagina, lazy) -------- */
.wiki-map {
    margin: 20px 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
}
.wiki-map__embed { width: 100%; height: 340px; border: 0; display: block; }
.wiki-map__cap {
    font-size: 0.74rem;
    color: var(--muted-color, #64748b);
    padding: 8px 12px;
    background: var(--card-bg, #fff);
}

/* -------- Fotos (galeria + figura com credito/licenca) -------- */
.wiki-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.wiki-gallery .wiki-figure { margin: 0; }
.wiki-figure { margin: 20px 0; }
.wiki-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    background: var(--border-color, #e2e8f0);
}
.wiki-figure figcaption {
    font-size: 0.76rem;
    color: var(--muted-color, #64748b);
    margin-top: 7px;
    line-height: 1.4;
}
.wiki-figure figcaption a { color: var(--muted-color, #64748b); text-decoration: underline; }

/* -------- Dark mode -------- */
body.dark-mode .wiki-stat { background: rgba(17, 24, 39, 0.55); border-color: rgba(148, 163, 184, 0.22); }
body.dark-mode .wiki-stat__icon { background: rgba(0, 113, 227, 0.20); color: #7dd3fc; }
body.dark-mode .wiki-stat__value { color: #e5eef9; }
body.dark-mode .wiki-stat__label,
body.dark-mode .wiki-climate__cap,
body.dark-mode .wiki-climate__rainval,
body.dark-mode .wiki-map__cap,
body.dark-mode .wiki-figure figcaption,
body.dark-mode .wiki-numbers td:first-child { color: #94a3b8; }
body.dark-mode .wiki-climate__months span { color: #e5eef9; }
body.dark-mode .wiki-climate__months,
body.dark-mode .wiki-timeline::before { border-color: rgba(148, 163, 184, 0.22); }
body.dark-mode .wiki-timeline__item::before { border-color: #0f172a; box-shadow: 0 0 0 1px rgba(148,163,184,0.3); }
body.dark-mode .wiki-map { border-color: rgba(148, 163, 184, 0.22); }
body.dark-mode .wiki-map__cap { background: rgba(17, 24, 39, 0.55); }
body.dark-mode .wiki-climate__tmax { color: #fb7185; }
body.dark-mode .wiki-climate__tmin { color: #60a5fa; }

@media (max-width: 560px) {
    .wiki-climate__tmax, .wiki-climate__tmin { font-size: 0.54rem; }
    .wiki-climate__rainval { font-size: 0.5rem; }
    .wiki-climate__labels span { font-size: 0.52rem; }
    .wiki-map__embed { height: 280px; }
}

/* -------- Resposta rapida (bloco de micro-intencao ancorado no pilar) -------- */
.resposta-rapida {
    margin: 0 0 28px;
    padding: 18px 20px 6px;
    /* Borda 1px completa neutra + raio uniforme (sem faixa lateral colorida, que e
       AI tell por doc 11 §484-486). A cor de categoria fica so no rotulo .resposta-rapida__q. */
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    background: var(--card-bg, #f8fafc);
}
.resposta-rapida__title {
    margin: 0 0 12px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--text-color, #0f172a);
}
.resposta-rapida__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 22px;
    margin: 0;
}
.resposta-rapida__item {
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.resposta-rapida__q {
    margin: 0 0 3px;
    font-size: .80rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #2563eb;
}
.resposta-rapida__a {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color, #334155);
}
.resposta-rapida__a a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, 0.35);
}
.resposta-rapida__a a:hover { border-bottom-color: #2563eb; }
@media (max-width: 560px) {
    .resposta-rapida { padding: 15px 16px 4px; }
    .resposta-rapida__list { grid-template-columns: 1fr; }
}