/* ==========================================================================
   FONDOPRO — FONTI-ISTITUTIVE.CSS
   Pagina "Tutte le Fonti Istitutive": box di ricerca, griglia di card (una
   per fonte istitutiva, logo + nome) e controllo "carica altro" con
   conteggio e barra di progresso. Le card riusano lo standard di hover
   condiviso .fp-hover-lift (style.css) — stessa ombra/sollevamento già
   visto sui grafici doughnut della Home, come richiesto.
   ========================================================================== */

.fp-fonti {
  /* Sfondo (bianco + banda decorativa) gestito da .fp-content-texture,
     applicata direttamente a questa sezione nel markup. */
}

/* --------------------------------------------------------------------------
   TOOLBAR — box di ricerca, allineato a destra su desktop
   -------------------------------------------------------------------------- */
.fp-fonti__toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

/* Box di ricerca (.fp-search-box, .fp-search-box__input, .fp-search-box__btn):
   spostato in css/search-box.css, condiviso anche con la pagina FAQ. */

/* --------------------------------------------------------------------------
   GRIGLIA CARD — 1/2/3/4 colonne responsive
   -------------------------------------------------------------------------- */
.fp-fonti__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 576px) {
  .fp-fonti__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .fp-fonti__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .fp-fonti__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card: nessun bordo/sfondo pesante a riposo (stessa filosofia sobria dei
   grafici doughnut in Home) — l'ombra+sollevamento in hover arriva da
   .fp-hover-lift, applicata insieme a questa classe direttamente nel
   markup. È un link (porterà in futuro alla pagina della singola fonte
   istitutiva): colore/decorazione testo azzerati per non sembrare un
   link "blu sottolineato" qualunque. */
.fp-fonti-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

/* Segnaposto del logo: un monogramma neutro (iniziali/sigla), NON un logo
   ricostruito — ogni ente ha un proprio marchio registrato che non ci
   risulta autorizzato a riprodurre nemmeno in forma approssimata. Il
   markup è pensato per essere sostituito con un <img> reale ente per
   ente, non appena disponibile (vedi commento nell'HTML). */
.fp-fonti-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 96px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-gray-lighter);
  color: var(--color-blue-primary);
  font-weight: var(--fw-bold);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  transition: background-color var(--transition-base);
}
.fp-fonti-card.fp-hover-lift:hover .fp-fonti-card__badge,
.fp-fonti-card.fp-hover-lift:focus-within .fp-fonti-card__badge {
  background-color: var(--color-blue-primary-light);
}

/* Variante per loghi reali (non più un monogramma segnaposto): niente
   sfondo tinto né colore/peso del testo (non c'è testo), solo lo spazio
   per l'immagine — object-fit:contain per non ritagliare mai il logo,
   qualunque sia il suo rapporto larghezza/altezza. min-width tolto: un
   logo largo (es. orizzontale) può occupare più spazio di uno stretto. */
.fp-fonti-card__badge--logo {
  min-width: 0;
  width: 100%;
  background-color: transparent;
  padding-inline: 0;
}
.fp-fonti-card.fp-hover-lift:hover .fp-fonti-card__badge--logo,
.fp-fonti-card.fp-hover-lift:focus-within .fp-fonti-card__badge--logo {
  background-color: transparent;
}
.fp-fonti-card__badge--logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.fp-fonti-card__name {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.fp-fonti__no-results {
  text-align: center;
  color: var(--color-text-secondary);
  padding-block: var(--space-6);
}

/* --------------------------------------------------------------------------
   CARICA ALTRO — conteggio + barra di progresso + pulsante a contorno
   Deliberatamente non un bottone blu pieno: un contorno che si riempie
   solo in hover, più moderno e meno "pesante" per un'azione secondaria
   di navigazione (non una call-to-action primaria come "Aderisci ora").
   -------------------------------------------------------------------------- */
.fp-fonti__load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  text-align: center;
}

.fp-fonti__count {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
}
.fp-fonti__count strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-bold);
}

.fp-fonti__progress {
  width: 100%;
  max-width: 240px;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--color-gray-light);
  overflow: hidden;
}
.fp-fonti__progress-bar {
  display: block;
  height: 100%;
  background-color: var(--color-blue-primary);
  border-radius: var(--radius-pill);
  transition: width var(--transition-base);
}

.fp-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1.5px solid var(--color-blue-primary);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-blue-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.fp-load-more-btn:hover {
  background-color: var(--color-blue-primary);
  color: #ffffff;
}
.fp-load-more-btn:focus-visible {
  outline: 3px solid var(--focus-ring-outer);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
.fp-load-more-btn__icon {
  transition: transform var(--transition-fast);
}
.fp-load-more-btn:hover .fp-load-more-btn__icon {
  transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce) {
  .fp-load-more-btn:hover .fp-load-more-btn__icon {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   LOGHI PIÙ GRANDI, SU UNA SOLA RIGA
   - Riquadro logo da 96px a 128px di altezza (+1/3).
   - 4 colonne già da 768px (prima solo da 1200px): i 4 loghi stanno
     sempre su una riga da tablet in su; su smartphone restano 2x2.
   - Distanza minima tra le card: 24px (era 8px).
   - Il nome sotto il logo è nascosto alla vista (classe .fp-sr-only nel
     markup) ma resta nel documento: lo legge lo screen reader, fa da nome
     accessibile del link e la ricerca della pagina (fonti-istitutive.js,
     che confronta il testo di .fp-fonti-card__name) continua a funzionare.
   -------------------------------------------------------------------------- */
.fp-fonti__grid {
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .fp-fonti__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.fp-fonti-card__badge--logo {
  height: 128px;
}

/* --------------------------------------------------------------------------
   LOGO RIDOTTO DI 1/4 (richiesta cliente, solo ENPAM)
   Il logo ENPAM, molto largo e "pieno", a parità di riquadro appariva più
   grande degli altri. Si riduce l'immagine al 75% lasciando invariato il
   riquadro da 128px: la card mantiene la stessa altezza delle altre, quindi
   allineamento della riga e area cliccabile restano identici.
   -------------------------------------------------------------------------- */
.fp-fonti-card__badge--compact img {
  max-width: 75%;
  max-height: 75%;
}