/**
 * @file
 * Nuova grafica della pagina Sportello unico.
 *
 * Foglio di stile scritto a mano e caricato solo sulle pagine che usano i
 * paragrafi SUAPE, così non passa dalla compilazione webpack del tema e non
 * tocca il resto del portale.
 *
 * Tipografia: la famiglia sta tutta nella variabile --suape-font, con Futura
 * come primo termine e Titillium Web del Design System come ricaduta. Futura
 * non è caricata, perché i webfont hanno licenza commerciale: finché i file non
 * arrivano il browser scende su Titillium e la pagina resta identica a oggi.
 * Quando arriveranno basterà dichiarare qui la @font-face, senza toccare altro.
 */

.suape-pagina {
  --suape-rosso: #d71920;
  --suape-rosso-scuro: #a81319;
  --suape-grigio-fondo: #f2f0ef;
  --suape-grigio-box: #e4e4e4;
  --suape-testo: #1a1a1a;
  --suape-bordo: #d4d4d4;
  /*
   * Cambio del font: una riga sola. La ricaduta ripete la pila del tema
   * ("Titillium Web", Geneva, Tahoma, sans-serif), così togliendo Futura si
   * torna esattamente alla resa attuale.
   */
  --suape-font: "Futura", "Futura PT", "Titillium Web", Geneva, Tahoma, sans-serif;

  font-family: var(--suape-font);
  color: var(--suape-testo);
}

.suape-pagina h2,
.suape-pagina h3,
.suape-pagina h4 {
  letter-spacing: 0.01em;
}

/**
 * Blocchi cliccabili per intero.
 *
 * Il collegamento resta uno solo, sul titolo, e viene esteso a tutto il blocco
 * con un riquadro trasparente. Così chi usa la tastiera trova un unico elemento
 * con un testo sensato, invece di un collegamento che ripete tutto il contenuto,
 * e chi usa il puntatore può premere in qualsiasi punto.
 */
.suape-card,
.suape-box,
.suape-numero {
  position: relative;
}

.suape-card__link::after,
.suape-box__titolo a::after,
.suape-numero__etichetta a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Il puntatore segnala che tutta la superficie è attiva. */
.suape-card:has(.suape-card__link),
.suape-box--con-link,
.suape-numero:has(.suape-numero__etichetta a) {
  cursor: pointer;
}

/* Il fuoco da tastiera si vede sul blocco, non solo sul titolo. */
.suape-card:focus-within,
.suape-box:focus-within,
.suape-numero:focus-within {
  outline: 3px solid rgba(215, 25, 32, 0.45);
  outline-offset: 2px;
}

/**
 * Fasce colorate a tutta larghezza.
 *
 * Il contenuto resta allineato al contenitore del portale: è solo il colore di
 * fondo a debordare, dipinto con una ombra piena e ritagliato in verticale.
 * Rispetto ad allargare la sezione a 100vw questo non introduce scorrimento
 * orizzontale quando è presente la barra di scorrimento verticale.
 */
.suape-pagina .suape-servizi,
.suape-pagina .suape-numeri--fondo {
  box-shadow: 0 0 0 100vmax var(--suape-grigio-fondo);
  clip-path: inset(0 -100vmax);
}

.suape-pagina .suape-servizio {
  box-shadow: 0 0 0 100vmax var(--suape-rosso);
  clip-path: inset(0 -100vmax);
}

/* -------------------------------------------------------------------------
   Fascia introduttiva: immagine e box in evidenza
   ------------------------------------------------------------------------- */

.suape-intro {
  padding: 2rem 0 2.5rem;
}

/* Le colonne diventano contenitori flessibili, così immagine e pila di box
   arrivano entrambe alla stessa altezza. */
.suape-intro__colonna {
  display: flex;
}

/**
 * L'immagine arriva dal campo Drupal, quindi è annidata dentro i contenitori
 * del campo. Se restano ad altezza automatica, "height: 100%" sull'immagine non
 * ha un riferimento e la foto torna alla sua altezza naturale: per questo la
 * catena di contenitori viene resa flessibile fino all'immagine.
 */
.suape-intro__immagine,
.suape-intro__immagine .field,
.suape-intro__immagine .field--item {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 20rem;
  overflow: hidden;
}

.suape-intro__immagine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Segnaposto quando la redazione non ha ancora caricato la fotografia. */
.suape-intro__immagine--assente {
  background:
    repeating-linear-gradient(
      135deg,
      var(--suape-grigio-box),
      var(--suape-grigio-box) 12px,
      var(--suape-grigio-fondo) 12px,
      var(--suape-grigio-fondo) 24px
    );
}

.suape-intro__box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.suape-box {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex: 1;
  padding: 1.5rem 1.5rem;
  background-color: var(--suape-grigio-box);
  position: relative;
}

.suape-box--rosso {
  background-color: var(--suape-rosso);
  color: #fff;
}

.suape-box__icona {
  flex: 0 0 auto;
  width: 2.75rem;
  color: var(--suape-rosso);
}

.suape-box--rosso .suape-box__icona {
  color: #fff;
}

.suape-box__icona svg {
  width: 100%;
  height: auto;
  display: block;
}

.suape-box__titolo {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  color: var(--suape-rosso);
}

.suape-box--rosso .suape-box__titolo {
  color: #fff;
}

.suape-box__titolo a {
  color: inherit;
  text-decoration: none;
}

.suape-box--con-link:hover .suape-box__titolo a,
.suape-box__titolo a:focus-visible {
  text-decoration: underline;
}

/* Il fondo si scurisce appena, così si capisce che il blocco è attivo. */
.suape-box--con-link:hover {
  background-color: #d9d9d9;
}

.suape-box--rosso.suape-box--con-link:hover {
  background-color: var(--suape-rosso-scuro);
}

.suape-box--con-link:hover .suape-box__freccia {
  transform: translateX(3px);
}

.suape-box__freccia {
  transition: transform 0.2s ease;
}

.suape-box__descrizione {
  font-size: 0.95rem;
  line-height: 1.45;
}

.suape-box__descrizione p:last-child {
  margin-bottom: 0;
}

.suape-box__freccia {
  flex: 0 0 auto;
  align-self: center;
  width: 2rem;
  color: currentColor;
}

.suape-box__freccia svg {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------
   Griglia dei servizi
   ------------------------------------------------------------------------- */

.suape-servizi {
  background-color: var(--suape-grigio-fondo);
  padding: 3rem 0;
  margin-top: 1rem;
}

.suape-servizi__titolo {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.75rem;
}

.suape-card {
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--suape-bordo);
}

.suape-card__media {
  /* 21:9 invece di 16:9: le card erano troppo alte e l'immagine e' comunque
     ritagliata da object-fit, quindi non si perde nulla di significativo. */
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background-color: var(--suape-grigio-box);
}

/**
 * L'immagine arriva dal campo Drupal, quindi è annidata nei contenitori del
 * campo. Se questi restano ad altezza automatica, "height: 100%" sull'immagine
 * non ha un riferimento: la foto torna alla sua altezza naturale e, quando è
 * più larga di 16:9, sotto resta scoperto il fondo grigio del riquadro. La
 * catena di contenitori viene perciò resa alta quanto il riquadro, come già
 * accade nella fascia di apertura.
 */
.suape-card__media .field,
.suape-card__media .field--item {
  height: 100%;
}

.suape-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.suape-card:hover .suape-card__media img {
  transform: scale(1.04);
}

/* Senza immagine la card resta compatta invece di mostrare un buco grigio. */
.suape-card--senza-immagine .suape-card__media {
  aspect-ratio: auto;
  height: 0.5rem;
  background-color: var(--suape-rosso);
}

.suape-card__titolo {
  margin: 0;
  background-color: var(--suape-rosso);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.03em;
}

.suape-card__link {
  display: block;
  padding: 0.9rem 1rem;
  color: #fff;
  text-decoration: none;
}

/* La reazione al passaggio del puntatore vale per tutta la card. */
.suape-card:hover .suape-card__link,
.suape-card__link:focus-visible {
  background-color: var(--suape-rosso-scuro);
  color: #fff;
  text-decoration: underline;
}

.suape-card__descrizione {
  padding: 1rem 1.25rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #333;
}

.suape-card__descrizione p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   PROPOSTA: finanziamenti e agevolazioni
   ------------------------------------------------------------------------- */

/*
 * Quarto blocco della griglia, in tutto uguale alle altre card: stessa
 * cornice, stessa fotografia con la stessa proporzione, stessa barra del
 * titolo. L'unica differenza è la marca "Proposta" sull'immagine, che evita di
 * scambiarlo per un servizio già attivo. Nessun testo in più, così resta in
 * linea con le altre.
 */
.suape-proposta .suape-card__media {
  position: relative;
}

.suape-proposta__marchio {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  margin: 0;
  padding: 0.2rem 0.7rem;
  background-color: #8a5a12;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
}

/*
 * Il titolo ha il rientro della barra delle altre card, ma non è un
 * collegamento: la destinazione non è stata decisa. Niente classe
 * .suape-card__link, che renderebbe cliccabile tutta la card e mostrerebbe il
 * puntatore a mano su un blocco che non porta da nessuna parte.
 */
.suape-proposta__etichetta {
  display: block;
  padding: 0.9rem 1rem;
  color: #fff;
}

/* -------------------------------------------------------------------------
   Ricerca degli sportelli e degli enti terzi
   ------------------------------------------------------------------------- */

.suape-ricerca {
  padding: 3rem 0;
}

.suape-ricerca__intestazione {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.suape-ricerca__icona {
  flex: 0 0 auto;
  width: 3rem;
  color: #6b6b6b;
}

.suape-ricerca__icona svg {
  width: 100%;
  height: auto;
  display: block;
}

.suape-ricerca__titolo {
  color: var(--suape-rosso);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.suape-ricerca__sottotitolo {
  font-weight: 700;
  font-style: italic;
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
}

.suape-ricerca__descrizione {
  margin: 0;
  color: #333;
}

.suape-ricerca__etichetta {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

/**
 * Campi con il contorno pieno, come nel mockup approvato: la sola sottolineatura
 * prevista dal Design System renderebbe i due campi visivamente diversi tra loro,
 * perché il selettore del comune ha comunque un bordo.
 */
/*
 * La classe va accompagnata dal contenitore: il tema imposta
 * "input[type=text] { border: none }", che con una sola classe vincerebbe per
 * specificità e lascerebbe il campo con la sola sottolineatura.
 */
.suape-ricerca .form-control,
.suape-ricerca .suape-combo__campo {
  display: block;
  width: 100%;
  border: 1px solid var(--suape-bordo);
  border-radius: 2px;
  background-color: #fff;
  padding: 0.6rem 0.75rem;
  height: auto;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--suape-testo);
}

.suape-ricerca .form-control:focus,
.suape-ricerca .suape-combo__campo:focus {
  border-color: var(--suape-rosso);
  box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.18);
  outline: none;
}

/* -------------------------------------------------------------------------
   Selettore del comune con ricerca incrementale
   ------------------------------------------------------------------------- */

.suape-combo {
  position: relative;
}

.suape-ricerca .suape-combo__campo {
  padding-right: 2.75rem;
}

.suape-ricerca .suape-combo__campo:disabled {
  background-color: #f5f5f5;
  color: #767676;
  cursor: not-allowed;
}

.suape-combo__interruttore {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--suape-bordo);
  background-color: transparent;
  color: #555;
  cursor: pointer;
}

.suape-combo__interruttore svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease;
}

.suape-combo.is-aperto .suape-combo__interruttore svg {
  transform: rotate(180deg);
}

.suape-ricerca .suape-combo__campo:disabled ~ .suape-combo__interruttore {
  color: #aaa;
  cursor: not-allowed;
}

.suape-combo__elenco {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid var(--suape-bordo);
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.suape-combo__voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.suape-combo__voce.is-attivo,
.suape-combo__voce:hover {
  background-color: rgba(215, 25, 32, 0.08);
}

/* La voce attiva porta anche un segno non affidato al solo colore. */
.suape-combo__voce.is-attivo {
  box-shadow: inset 3px 0 0 var(--suape-rosso);
}

.suape-combo__nome mark {
  background: none;
  color: var(--suape-rosso);
  font-weight: 700;
  padding: 0;
}

.suape-combo__provincia {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: #666;
  letter-spacing: 0.04em;
}

.suape-combo__vuoto {
  padding: 0.65rem 0.85rem;
  font-size: 0.92rem;
  color: #666;
}

.suape-ricerca__azioni {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/**
 * Pulsanti propri della pagina.
 *
 * Le varianti .btn-* di Bootstrap nel tema compilato usano !important, quindi
 * non sarebbero sovrascrivibili: qui il pulsante è costruito da zero, con il
 * rosso istituzionale come colore di azione.
 */
.suape-bottone {
  appearance: none;
  border: 1px solid var(--suape-rosso);
  border-radius: 2px;
  background-color: var(--suape-rosso);
  color: #fff;
  font: inherit;
  font-weight: 600;
  min-width: 8rem;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.suape-bottone:hover {
  background-color: var(--suape-rosso-scuro);
  border-color: var(--suape-rosso-scuro);
}

.suape-bottone:focus-visible {
  outline: 3px solid rgba(215, 25, 32, 0.35);
  outline-offset: 2px;
}

.suape-bottone--neutro {
  background-color: transparent;
  border-color: var(--suape-bordo);
  color: #333;
}

.suape-bottone--neutro:hover {
  background-color: #f3f3f3;
  border-color: #9a9a9a;
  color: #111;
}

@media (prefers-reduced-motion: reduce) {
  .suape-bottone {
    transition: none;
  }
}

.suape-ricerca.is-caricamento .suape-ricerca__azioni {
  opacity: 0.6;
  pointer-events: none;
}

.suape-ricerca__stato {
  margin: 1.25rem 0 0;
  font-weight: 700;
}

.suape-ricerca__esiti {
  margin-top: 1rem;
}

.suape-gruppo {
  margin-top: 2rem;
}

.suape-gruppo__titolo {
  font-size: 1.15rem;
  font-weight: 700;
  border-bottom: 2px solid var(--suape-rosso);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.suape-gruppo__conteggio {
  background-color: var(--suape-rosso);
  color: #fff;
  font-size: 0.8rem;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

.suape-contatti {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.suape-contatto {
  border: 1px solid var(--suape-bordo);
  border-left: 4px solid var(--suape-rosso);
  padding: 1rem 1.15rem;
  background-color: #fff;
}

.suape-contatto__nome {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.suape-contatto__dati {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.suape-contatto__dati li + li {
  margin-top: 0.25rem;
}

.suape-etichetta {
  display: inline-block;
  min-width: 5.5rem;
  font-weight: 700;
  color: #555;
}

.suape-nessun-esito,
.suape-errore {
  font-weight: 700;
  margin: 1rem 0 0;
}

.suape-errore {
  color: var(--suape-rosso-scuro);
}

/* -------------------------------------------------------------------------
   Fascia dei numeri, in chiusura di pagina
   ------------------------------------------------------------------------- */

/*
 * Rientro in basso ridotto: i 3,5rem servivano quando la fascia di chiusura era
 * chiara e staccata. Ora sotto c'è la banda rossa attaccata al footer, e quello
 * spazio si leggeva come un vuoto in fondo alla pagina. Ne resta quel tanto che
 * evita ai riquadri dei numeri di toccare il rosso.
 */
.suape-numeri {
  padding: 0 0 1.5rem;
}

.suape-numeri__titolo {
  color: var(--suape-rosso);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.suape-numero {
  background-color: var(--suape-grigio-box);
  padding: 1.5rem 1.25rem;
  height: 100%;
  text-align: center;
}

.suape-numero__etichetta {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.suape-numero__etichetta a {
  color: var(--suape-testo);
  text-decoration: none;
}

.suape-numero:hover .suape-numero__etichetta a,
.suape-numero__etichetta a:focus-visible {
  color: var(--suape-rosso);
  text-decoration: underline;
}

.suape-numero:hover {
  background-color: #d9d9d9;
}

.suape-numero,
.suape-numero__etichetta a {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Indicatore: è il dato, quindi ha il peso maggiore del riquadro. */
.suape-numero__valore {
  margin: 0 0 0.5rem;
  line-height: 1.1;
}

.suape-numero__cifra {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--suape-rosso);
  font-variant-numeric: tabular-nums;
}

.suape-numero__periodo {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin-top: 0.15rem;
}

.suape-numero__descrizione {
  font-size: 0.9rem;
  line-height: 1.45;
}

.suape-numero__descrizione p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Banda rossa riservata agli enti, ultima fascia prima del footer
   ------------------------------------------------------------------------- */

/*
 * Gli strumenti di amministrazione non sono il compito di cittadini e imprese,
 * quindi stanno in fondo. La banda rossa a piena larghezza serve a renderli
 * comunque riconoscibili a chi li cerca: il colore fa da segnale, la posizione
 * evita che rubino spazio ai servizi.
 *
 * Contrasto: bianco su --suape-rosso è 5,19:1, conforme a WCAG 2.1 AA.
 */
/*
 * Una riga sola: etichetta a sinistra, collegamento a destra. Niente icona del
 * box e niente descrizione, che ripetevano quello che il titolo dice già. Il
 * testo resta nel paragrafo, così torna se il box viene spostato altrove.
 */
.suape-servizio {
  background-color: var(--suape-rosso);
  color: #fff;
  padding: 0.85rem 0 0.95rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.suape-servizio__titolo {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0;
}

.suape-servizio__elenco {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.suape-servizio .suape-box {
  flex: 0 0 auto;
  align-items: center;
  background-color: transparent;
  border: 0;
  padding: 0;
  gap: 0.55rem;
}

/* Tolte dalla banda: il titolo del collegamento basta. */
.suape-servizio .suape-box__icona,
.suape-servizio .suape-box__descrizione {
  display: none;
}

.suape-servizio .suape-box__titolo {
  font-size: 1rem;
  text-transform: none;
  color: #fff;
  margin: 0;
}

.suape-servizio .suape-box__freccia {
  width: 1.2rem;
  color: #fff;
}

/* Sul fondo pieno il richiamo è la sottolineatura, non un cambio di fondo. */
.suape-servizio .suape-box--con-link:hover {
  background-color: transparent;
}

.suape-servizio .suape-box--con-link:hover .suape-box__titolo a {
  text-decoration: underline;
}

/* Sul fondo rosso il contorno di fuoco predefinito sparirebbe. */
.suape-servizio .suape-box:focus-within,
.suape-servizio a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Adattamenti
   ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .suape-intro__immagine {
    min-height: 12rem;
  }

  .suape-intro__box {
    margin-top: 1rem;
  }
}

@media (max-width: 575.98px) {
  .suape-box {
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 1.25rem;
  }

  .suape-box__titolo {
    font-size: 1.25rem;
  }

  .suape-ricerca__intestazione {
    gap: 1rem;
  }

  .suape-ricerca__icona {
    width: 2.25rem;
  }

  .suape-ricerca__azioni {
    flex-direction: column;
  }

  .suape-etichetta {
    min-width: 0;
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suape-card__media img,
  .suape-box__freccia,
  .suape-numero,
  .suape-numero__etichetta a {
    transition: none;
  }

  .suape-card:hover .suape-card__media img,
  .suape-box--con-link:hover .suape-box__freccia {
    transform: none;
  }
}