/* ==========================================================================
   TIFOSO INFINITO — L'Archivio del Calcio (preview editoriale, homepage)
   Sostituisce la precedente griglia di tile statiche: ora mostra fino a 3
   articoli reali dell'Archivio (js/archivio-preview.js), stesso pattern
   grafico gia' collaudato in Pezzi in Vetrina / Storie & Guide.
   ========================================================================== */

.archivio-preview {
  background: var(--color-dark-0);
  padding: var(--space-8) 0;
}

.archivio-preview__header {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.archivio-preview__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1;
  color: var(--color-foreground);
}

.archivio-preview__intro {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-foreground-muted);
}

.archivio-preview__status {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-foreground-muted);
  padding: var(--space-6) 0;
}

.archivio-preview__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .archivio-preview__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Meno di 3 articoli pubblicati: niente colonne vuote sbilanciate, le card
   restano di larghezza naturale e centrate invece di stirarsi sull'intera
   griglia a 3 colonne. */
.archivio-preview__grid--count-1,
.archivio-preview__grid--count-2 {
  grid-template-columns: minmax(0, 360px);
  justify-content: center;
}

@media (min-width: 640px) {
  .archivio-preview__grid--count-2 {
    grid-template-columns: repeat(2, minmax(0, 340px));
  }
}

.archivio-preview__card {
  display: flex;
  flex-direction: column;
  background: var(--color-dark-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--color-foreground);
  transition: transform var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}

.archivio-preview__card:hover {
  transform: translateY(-4px);
  border-color: var(--color-brand-red);
}

.archivio-preview__card-media {
  aspect-ratio: 4 / 3;
  background: var(--color-dark-1);
}

.archivio-preview__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archivio-preview__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  flex: 1;
}

.archivio-preview__card-title {
  font-family: var(--font-label);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-foreground);
  margin-top: var(--space-1);
  /* MICRO-FASE "Archivio Home mobile": clamp SOLO visivo, il dato
     sorgente (article.title) resta intatto — evita card sproporzionate
     quando il titolo e' lungo, specialmente nella griglia a 2 colonne
     mobile dove ogni riga ha meno caratteri disponibili. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archivio-preview__card-excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-foreground-muted);
  margin-top: var(--space-1);
  /* Stesso motivo del titolo qui sopra: l'excerpt reale (article.excerpt)
     puo' essere lungo diverse righe — senza clamp la card mobile a 2
     colonne diventava altissima, allungando eccessivamente l'intera
     sezione Home. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archivio-preview__card .btn--text {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 13px;
  color: var(--color-foreground-muted);
}

.archivio-preview__card:hover .btn--text {
  color: var(--color-brand-red-bright);
}

.archivio-preview__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}