/* ==========================================================================
   FONDOPRO — BANNERS-AUDIENCE.CSS
   Riquadri "A chi si rivolge" tra Hero e News. Versione scelta dal cliente
   tra le varianti proposte (ex v4): fondo grigio chiaro (lo stesso della
   fascia grafici), filetto sinistro colorato, titolo blu scuro + sottotesto.
   Tutti gli stili della sezione sono qui (le vecchie regole dei banner a
   colore pieno sono state tolte da banners.css).
   Contrasti (WCAG AA, testo normale 4,5:1):
     titolo #003a68 su #e9ebee 9,7:1 — in hover 8,6:1
     testo  #4a4a4a su #e9ebee 7,4:1 — in hover 6,6:1
   ========================================================================== */

.fp-audience {
  padding-bottom: 0; /* la sezione News subito sotto ha già il suo padding */
}

/* Griglia a tutta larghezza dei contenuti. Per ora i riquadri sono 3 (il
   quarto è nascosto nell'HTML): una colonna fino a 991px, 3 affiancati da
   992px. Niente 2 colonne su tablet: con 3 riquadri l'ultimo resterebbe
   da solo nella seconda riga. Se il quarto torna visibile, rivedere le
   colonne (2x2 oppure 4 in riga solo da 1400px). */
.fp-audience__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 992px) {
  .fp-audience__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Riquadro: l'intero box è un link (come i banner). position:relative
   serve alla sovrimpressione in hover (::before). Nessuna altezza minima:
   la griglia allinea già in altezza i riquadri della stessa riga.
   Filetto sinistro da 6px, decorativo: il colore non porta informazione,
   quindi niente soglia di contrasto. */
.fp-audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1.5px solid transparent; /* spazio per il bordo blu in hover di .fp-hover-lift */
  border-left: 6px solid transparent;
  border-radius: var(--radius-md);
  background-color: var(--color-gray-band);
  text-decoration: none;
  color: inherit;
}

/* Colori del filetto: tonalità derivate da blu, azzurro, oro e ceruleo
   (non identiche alla palette), nell'ordine scelto dal cliente. Il quarto
   colore resta pronto per il riquadro oggi nascosto. */
.fp-audience-card:nth-child(1) { border-left-color: #2f6fa6; }
.fp-audience-card:nth-child(2) { border-left-color: #2aa6b1; }
.fp-audience-card:nth-child(3) { border-left-color: #e5a300; }
.fp-audience-card:nth-child(4) { border-left-color: #4f8aa0; }

/* In hover .fp-hover-lift colora di blu tutto il bordo: si mantiene il
   filetto nel suo colore, cambiano solo gli altri tre lati. */
.fp-audience-card.fp-hover-lift:hover,
.fp-audience-card.fp-hover-lift:focus-within {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

/* Sovrimpressione in hover/focus: velo blu al 8% sopra il fondo. Ombra e
   sollevamento arrivano da .fp-hover-lift, lo stesso effetto delle card
   Fonti Istitutive. pointer-events:none per non intercettare il click. */
.fp-audience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: rgba(0, 81, 145, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.fp-audience-card:hover::before,
.fp-audience-card:focus-visible::before {
  opacity: 1;
}

/* Testi sopra la sovrimpressione */
.fp-audience-card__title,
.fp-audience-card__text {
  position: relative;
  margin: 0;
}
.fp-audience-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-blue-primary-dark);
}
.fp-audience-card__text {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

/* 3 colonne su schermi da 992 a 1199px: colonne più strette, titolo
   ridotto perché parole lunghe come "Professionisti" non escano dal
   riquadro. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .fp-audience-card__title {
    font-size: 1.75rem;
  }
}

@media (max-width: 575.98px) {
  .fp-audience-card {
    padding: var(--space-3);
  }
  .fp-audience-card__title {
    font-size: 1.5rem; /* H3 pieno (~33px) eccessivo su schermi molto stretti */
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-audience-card::before {
    transition: none;
  }
}