/* =============================================================================
   Template "Archivio Articoli" — raccoglitore di tutti gli articoli.
   Riusa la griglia/card del widget (.cp-latest-posts*). Qui: spaziature di
   pagina, colonne responsive (4→3→2→1) e il bottone "Carica altri".
   ============================================================================= */

.cp-archivio {
    padding-block: var(--cp-sp-10, 64px) var(--cp-sp-12, 96px);
}

.cp-archivio__title {
    margin-bottom: var(--cp-sp-8, 48px);
}

/* Con la testata hero (featured image impostata sulla pagina): il hero va a
   filo dell'header — il padding-top di pagina passa da .cp-archivio allo
   spazio TRA hero e griglia. */
.cp-archivio--has-hero {
    padding-block-start: 0;
}

.cp-archivio__hero {
    margin-block-end: var(--cp-sp-10, 64px);
}

/* Griglia archivio: 4 colonne desktop, responsive verso il basso. */
.cp-archivio__grid {
    --cp-lp-cols: 4;
    --cp-lp-gap: 24px;
}

@media (max-width: 1100px) {
    .cp-archivio__grid { --cp-lp-cols: 3; }
}
@media (max-width: 760px) {
    .cp-archivio__grid { --cp-lp-cols: 2; }
}
@media (max-width: 460px) {
    .cp-archivio__grid { --cp-lp-cols: 1; }
}

/* Bottone "Carica altri" centrato sotto la griglia. */
.cp-archivio__more {
    display: flex;
    justify-content: center;
    margin-top: var(--cp-sp-8, 48px);
}

.cp-archivio__more-btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.cp-archivio__more-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}

.cp-archivio__empty {
    padding-block: var(--cp-sp-8, 48px);
    color: var(--cp-muted, rgba(43, 36, 39, 0.55));
}