/* ==========================================================================
   FONDOPRO — BANNERS.CSS
   Due banner promozionali (accordo SaluteMia, campagna ENPAM 5x1000) tra
   l'Hero e la sezione News in Home. Pagine di destinazione NON collegate
   al menu principale — si raggiungono solo cliccando il banner stesso,
   quindi l'intero banner è un unico link, non solo il titolo.
   ========================================================================== */

.fp-banners {
  /* Sezione volutamente "nuda" (niente padding-block di .home-section):
     i banner hanno già il loro sfondo colorato a fare da separatore
     visivo, un padding aggiuntivo qui sopra/sotto renderebbe la
     separazione meno netta, non di più. */
  padding-block: var(--space-8);
}

.fp-banners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .fp-banners__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fp-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: center;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.fp-banner:hover,
.fp-banner:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-2px);
}
/* Anello interno scuro, stesso colore del testo: il bianco sui due
   fondi dei banner non raggiungeva 3:1 (2,3:1 e 3,1:1). */
.fp-banner:focus-visible {
  outline: 3px solid var(--color-text-primary);
  outline-offset: -6px;
  box-shadow: none;
}

.fp-banner--salutemia {
  background-color: #E09D00;
}
.fp-banner--enpam {
  background-color: #21A0AB;
}

/* Titolo grande quanto un H1 era prima dell'aumento del 25% (i banner
   andavano già bene secondo il cliente) — valore fisso pre-scala, non
   var(--fs-h1) che resta scalato ovunque altrove. Non è comunque un
   <h1>: resta un testo di richiamo del banner, non il titolo semantico
   della pagina — l'unico vero <h1> di ogni pagina resta quello della
   fascia titolo (.fp-page-header__title), qui non presente perché la
   Home non ne ha uno proprio per questa sezione. */
.fp-banner__title {
  margin: 0;
  max-width: 46ch;
  font-size: 3rem;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  /* Testo scuro (era bianco): sui due fondi dei banner il bianco si
     fermava a 2,3:1 (SaluteMia) e 3,1:1 (ENPAM), sotto soglia per il
     sottotitolo e, su SaluteMia, anche per il titolo grande. Il quasi
     nero del corpo testo arriva a 7,5:1 e 5,5:1: AA pieno per titolo e
     sottotitolo. Colori di fondo invariati. */
  color: var(--color-text-primary);
}

/* Parte finale del titolo (dopo "Accordo" / "SaluteMia-FondoPro:") più
   piccola del resto, su una riga a sé — solo per il banner SaluteMia,
   il cui titolo è più lungo e beneficia di questa gerarchia visiva. */
.fp-banner__title-sub {
  display: block;
  margin-top: var(--space-2);
  font-size: 1.375rem; /* pre-scala 1,25x, sezione lasciata invariata su richiesta */
  font-weight: var(--fw-semibold);
}

@media (max-width: 575.98px) {
  .fp-banner {
    min-height: 200px;
    padding: var(--space-4);
  }
  .fp-banner__title {
    font-size: 1.75rem; /* H1 pieno (3rem) sarebbe eccessivo su schermi molto stretti */
  }
  .fp-banner__title-sub {
    font-size: 1.125rem;
  }
}

/* --------------------------------------------------------------------------
   BANNER INFORMATIVO — riferimenti bancari per i versamenti
   Rettangolo con bordi arrotondati, come i due banner sopra (SaluteMia/
   ENPAM), ma non è un link: niente <a>, nessuna altezza minima forzata —
   la sua altezza è quella naturale del testo. Sfondo azzurro chiarissimo,
   testo scuro (non bianco): col bianco il contrasto scenderebbe sotto la
   soglia WCAG AA (serve 4,5:1), con testo scuro invece la supera
   ampiamente. Testo a var(--fs-h4), più grande del corpo standard.
   -------------------------------------------------------------------------- */
.fp-bank-info {
  padding-block: var(--space-3);
}
.fp-bank-info__box {
  /* Azzurro chiarissimo nella stessa tonalità del Blu Istituzionale, al
     posto del grigio #E0E0E0: un filo più scuro del token
     --color-blue-primary-light (#e6eef5) per staccarsi meglio dal bianco.
     Testo #1a1a1a: contrasto 13,9:1. */
  background-color: #dbe7f1;
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.fp-bank-info__content {
  color: #1a1a1a;
  font-size: 1.375rem; /* pre-scala 1,25x, sezione lasciata invariata su richiesta */
}
.fp-bank-info__content p {
  margin: 0 0 var(--space-2);
}
.fp-bank-info__content p:last-child {
  margin-bottom: 0;
}
.fp-bank-info__content strong {
  font-weight: var(--fw-bold);
}

/* --------------------------------------------------------------------------
   BANNER SALUTEMIA / ENPAM — ridotti di 1/4 (larghezza, altezza, padding e
   titolo al 75% dei valori precedenti) su richiesta. Su smartphone restano
   a tutta larghezza: ridurli lì toglierebbe solo spazio al testo.
   Il sottotitolo di SaluteMia non scende sotto 1.125rem (18px), per non
   andare sotto la dimensione minima leggibile della scala del sito.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .fp-banners__grid {
    max-width: 75%;
    margin-inline: auto;
    gap: var(--space-5); /* era --space-6 (64px): 40px, circa 3/4 */
  }
  .fp-banners .fp-banner {
    min-height: 150px;           /* era 200px */
    padding: var(--space-4);     /* era --space-5 (40px): 24px */
  }
  .fp-banners .fp-banner__title {
    font-size: 2.25rem;          /* era 3rem */
  }
  .fp-banners .fp-banner__title-sub {
    font-size: 1.125rem;         /* era 1.375rem (3/4 sarebbe ~1.03rem) */
  }
}