/* Página "Arquivo de notícias" (/noticias/arquivo/). Só carrega nela (inc/arquivo.php); usa os tokens do style.css. */

/* Atalhos para os anos: botões quadrados, como os da paginação. */
.arq-anos ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.arq-anos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--paper-2); color: var(--ink); font: 500 1rem/1 var(--text); text-decoration: none; transition: background-color .15s; }
.arq-anos a:hover { background: var(--leaf); }

/* Um bloco por ano: filete grosso em cima, o ano em letra grande e os meses numa grade de 2, 3, 4 ou 6 colunas (números que dividem os 12 meses). */
.arq-ano { margin-top: clamp(32px, 5vw, 56px); padding-top: 14px; border-top: 3px solid var(--ink); }
.arq-ano-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-bottom: 18px; }
.arq-ano-titulo { font: 400 clamp(2.4rem, 1.6rem + 3vw, 3.4rem)/1 var(--display); letter-spacing: -.02em; }
.arq-ano-meta { color: var(--soft); font: 500 var(--s-small)/1.4 var(--text); }
.arq-ano-meta a { display: inline-block; margin-block: -13px; padding-block: 13px; color: var(--mid); text-underline-offset: .18em; } /* o texto não muda de lugar: o padding só alarga a área de toque, que a margem negativa devolve */
.arq-ano-meta a:hover { color: var(--ink); }

.arq-meses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.arq-meses a { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-height: 64px; padding: 10px 14px; background: var(--paper-2); color: var(--ink); text-decoration: none; transition: background-color .15s; }
.arq-meses a:hover { background: var(--leaf); }
.arq-mes-nome { font: 400 1.35rem/1.15 var(--display); letter-spacing: -.01em; text-transform: capitalize; }
.arq-mes-total { color: var(--soft); font: 500 var(--s-small)/1.3 var(--text); }
@media (min-width: 520px) { .arq-meses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .arq-meses { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .arq-meses { grid-template-columns: repeat(6, minmax(0, 1fr)); } }