/* ==========================================================================
   FONDOPRO — NEWS-POPUP.CSS
   Popup della news in evidenza, solo in Home (vedi js/news-popup.js).
   Elemento nativo <dialog> aperto con showModal(): il browser rende inerte
   il resto della pagina, gestisce Esc e riporta il focus alla chiusura.
   Il <dialog> ha padding 0 e il riquadro interno lo riempie: così un click
   che arriva al <dialog> stesso è per forza sullo sfondo (chiude la popup).
   ========================================================================== */

.fp-news-popup {
  width: min(520px, calc(100% - 2 * var(--space-3)));
  max-height: calc(100dvh - 2 * var(--space-3));
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background-color: #ffffff;
  box-shadow: var(--shadow-lg);
  overflow: auto; /* schermi bassi (smartphone in orizzontale): scorre */
}
.fp-news-popup::backdrop {
  background-color: rgba(0, 20, 40, 0.6);
}

/* Immagine della news mostrata intera (contiene loghi: ritagliarla ne
   taglierebbe una parte). Altezza massima legata allo schermo, così il
   testo sotto resta visibile senza scorrere sulla maggior parte dei
   dispositivi; lo spazio eventualmente libero ai lati è bianco come il
   fondo dell'immagine. */
.fp-news-popup__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 45dvh;
  object-fit: contain;
  background-color: #ffffff;
}

.fp-news-popup__body {
  padding: var(--space-4);
}
.fp-news-popup__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--color-text-primary);
}
.fp-news-popup__text {
  margin: 0;
  color: var(--color-text-secondary); /* 8,9:1 su bianco */
}

/* Barra superiore con la X: la X non si sovrappone all'immagine (i loghi
   nell'angolo in alto a destra resterebbero coperti). 48px per il tocco
   (WCAG 2.5.8); icona blu scuro su bianco: 11,6:1. Nome accessibile
   nell'aria-label. */
.fp-news-popup__bar {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-2) 0;
}
.fp-news-popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #ffffff;
  color: var(--color-blue-primary-dark);
  font-size: 1.25rem;
  cursor: pointer;
}
.fp-news-popup__close:hover {
  background-color: var(--color-gray-band);
}
/* Cerchio anche al focus (la regola globale imporrebbe un raggio da 4px) */
.fp-news-popup__close:focus-visible {
  border-radius: 50%;
}

@media (max-width: 575.98px) {
  .fp-news-popup__body {
    padding: var(--space-3);
  }
  .fp-news-popup__title {
    font-size: 1.5rem;
  }
}

/* Pagina sotto ferma mentre la popup è aperta */
html.fp-no-scroll {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .fp-news-popup[open] {
    animation: fp-news-popup-in var(--transition-base) ease-out both;
  }
  .fp-news-popup[open]::backdrop {
    animation: fp-news-popup-fade var(--transition-base) ease-out both;
  }
  @keyframes fp-news-popup-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes fp-news-popup-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}