/* ==========================================================================
   ods-home.css — stili della SOLA home page.

   Caricato da templates/_tpl_header_site.php dietro `$pagina == "ODS-Home-Page"`,
   dopo styles.css e ods-mobile.css. Sta in un file suo e non dentro
   ods-mobile.css di proposito: quel foglio vale per tutto il sito ed e' toccato
   in parallelo da altre lavorazioni (modulo, magic link). Qui dentro c'e' solo
   cio' che la home usa, e nulla di cio' che c'e' qui puo' ricadere altrove.

   Contiene tre cose:
     1. i tre passaggi affiancati (prima erano un diagramma verticale);
     2. il video con la copertina (prima era un iframe vuoto);
     3. le distanze fra le sezioni, ora che ne restano otto.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. I TRE PASSAGGI, AFFIANCATI

   Prima erano `.flowchart-step` uno sotto l'altro, uniti da due connettori
   verticali da 90px: 2.100px di pagina su telefono per tre frasi. Ora sono una
   griglia; il numero non e' piu' un cerchio sospeso sopra il bordo (che
   obbligava a `padding-top` e `margin-top:-45px` incrociati) ma un elemento in
   flusso, quindi le tre carte hanno la stessa altezza senza calcoli.

   `grid` e non `flex`: le colonne devono essere uguali anche quando una frase
   va a capo e le altre no. `1fr` lo garantisce, `flex-basis` no.
   -------------------------------------------------------------------------- */

.ods-steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.ods-step {
  position: relative;
  border-radius: 20px;
  padding: 22px 20px 92px 20px;
  color: #222;
  background-color: var(--ods-step-bg, #eef1f5);
  background-image: var(--ods-step-img);
  background-repeat: no-repeat;
  /* `right bottom` netto incastrava la figura nell'angolo arrotondato e le
     tagliava i piedi. Dodici pixel di respiro bastano. */
  background-position: right 12px bottom 10px;
  background-size: auto 88px;
  /* Il fondo scuro non c'e': il testo e' sempre #222 su tinte chiare. I tre
     valori usati (verde #7dc36f, rosa #FAB1EB, giallo #f4ea2b) danno con #222
     un contrasto fra 6.4:1 e 10:1, cioe' oltre il minimo AA di 4.5:1. */
}

/* Il numero: cerchio pieno, in flusso, allineato al titolo. */
.ods-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #1b1b1b;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  margin-bottom: 12px;
}

.ods-step .ods-step-t {
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 6px 0;
  font-weight: 800;
}

.ods-step .ods-step-p {
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  /* Le lingue con parole lunghe (nl, de, pl) in una colonna da un terzo di
     pagina sfondavano il bordo. E' la stessa regressione gia' vista sull'H1
     olandese: si previene qui invece di scoprirla a schermo. */
  overflow-wrap: break-word;
}

/* Sopra i 768px l'illustrazione e' gia' il fondo della carta: l'<img> in piu'
   la mostrerebbe due volte. La regola va PRIMA della media query, non dopo:
   hanno la stessa specificita', quindi vince l'ultima scritta. Messa in fondo
   (com'era nella prima stesura) rimetteva `display:none` anche sul telefono e
   l'illustrazione spariva del tutto — verificato a schermo. */
.ods-step-img {
  display: none;
}

/* Su telefono si mantiene lo stesso linguaggio del desktop: colore pieno,
   numero sopra e testo sotto. L'illustrazione si toglie per lasciare tutta la
   larghezza alle traduzioni piu' lunghe. */
@media (max-width: 768px) {
  .ods-steps-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ods-step {
    display: block;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background-color: var(--ods-step-bg, #eef1f5);
    background-image: none;
  }

  .ods-step-n {
    width: 32px;
    height: 32px;
    margin: 0 0 10px;
    font-size: 14px;
  }

  .ods-step h3,
  .ods-step .ods-step-t {
    margin: 0 0 4px !important;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
  }

  .ods-step p,
  .ods-step .ods-step-p {
    margin: 0 !important;
    color: #222;
    font-size: .88rem;
    line-height: 1.5;
  }

  .ods-step-img {
    display: none;
  }
}

/* Tre colonne a 390px sarebbero illeggibili, ma a 769-991px ci starebbero
   strette: due righe sono meglio di tre colonne da 220px. */
@media (min-width: 768.02px) and (max-width: 991.98px) {
  .ods-steps-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ods-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 76px;
    align-items: center;
    column-gap: 16px;
    min-height: 132px;
    padding: 18px 20px;
    background-image: none;
  }

  .ods-step-n {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .ods-step .ods-step-t {
    font-size: 18px;
    grid-column: 2;
    margin-bottom: 4px;
  }

  .ods-step .ods-step-p {
    grid-column: 2;
  }

  .ods-step-img {
    display: block;
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 76px;
    height: auto;
  }
}


/* --------------------------------------------------------------------------
   2. IL VIDEO

   Due difetti, non uno:
     - su telefono NON si vedeva affatto. `public/ods-mobile.css` nasconde
       `iframe[data-src]:not([src])` perche' senza consenso l'iframe e' un buco
       bianco da 400px; il risultato pero' era che la sezione del video su
       telefono conteneva solo due pulsanti;
     - su schermo grande era un rettangolo vuoto, e appena arrivava il consenso
       mostrava la copertina automatica di YouTube.

   Ora il contenitore ha una proporzione 16:9 propria, quindi non collassa mai,
   e ci sta sopra una copertina servita DA NOI (assets/img/ods-video-cover-*.webp).
   Nessuna richiesta a Google prima che l'utente tocchi la copertina: il
   comportamento vale come consenso esplicito a quel singolo caricamento, ed e'
   piu' prudente del caricamento automatico di prima, non meno.

   Piu' grande: prima `col-md-6` dentro il container, cioe' ~636px su 1440.
   Ora `col-lg-9`, ~855px, e su telefono passa da 0 a tutta la larghezza.
   -------------------------------------------------------------------------- */

.ods-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: #0d0b1f;   /* il viola scuro della copertina: niente lampo bianco */
}

.ods-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* La copertina e' un <button>, non un <div> con onclick: cosi' arriva il fuoco
   da tastiera, Invio e Barra spaziatrice funzionano da soli e gli screen reader
   lo annunciano come comando. */
.ods-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: #0d0b1f;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ods-video-poster[hidden] {
  display: none;
}

/* Il triangolo e' disegnato con un bordo: nessuna immagine, nessuna icona da
   caricare, e resta nitido a ogni densita' di schermo. */
.ods-video-play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(17, 17, 17, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background-color .15s ease;
}

.ods-video-play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 6px;   /* ottico: il triangolo pesa a sinistra */
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent #fff;
}

.ods-video-poster:hover .ods-video-play,
.ods-video-poster:focus-visible .ods-video-play {
  background: rgba(17, 17, 17, .92);
  transform: scale(1.06);
}

.ods-video-poster:focus-visible {
  outline: 3px solid #ff8a00;
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .ods-video-play {
    transition: none;
  }
}

@media (max-width: 768px) {
  .ods-video {
    border-radius: 16px;
  }

  .ods-video-play {
    width: 58px;
    height: 58px;
  }

  .ods-video-play::after {
    border-width: 11px 0 11px 19px;
    margin-left: 5px;
  }
}


/* --------------------------------------------------------------------------
   3. DISTANZE FRA LE SEZIONI

   Tolte cinque sezioni, restavano margini orfani: `margin-top:150px` era
   scritto in linea su due delle sezioni sparite, e le altre alternavano
   `mt-5 mb-5` con `py-5`. Le otto sezioni rimaste prendono da qui la stessa
   distanza, cosi' la pagina ha un ritmo unico invece di tre.
   -------------------------------------------------------------------------- */

.ods-home-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

.ods-home-section > .container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ods-home-section h2 {
  margin-bottom: 28px;
}

@media (max-width: 768px) {
  .ods-home-section {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .ods-home-section h2 {
    margin-bottom: 20px;
  }

}

/* Fino ai tablet landscape le tre schede non hanno spazio sufficiente per
   restare affiancate. Bootstrap le tiene quindi su righe intere e questa
   variante compatta evita sia il 2+1 sia grandi vuoti fra una card e l'altra. */
@media (max-width: 1199.98px) {
  .ods-commitment .card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 0;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .ods-commitment .card-header {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .ods-commitment .card-header img {
    width: 38px;
    height: 38px;
    margin: 2px 0 0 !important;
  }

  .ods-commitment .card-body {
    padding: 0;
  }

  .ods-commitment .card-title {
    margin-bottom: .35rem;
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .ods-commitment .card-text {
    font-size: .9rem;
    line-height: 1.5;
  }

  /* Le descrizioni del servizio sono molto piu' lunghe: tre colonne prima
     del breakpoint XL le riducevano fino a 156px di testo utile. */
  .ods-features .card {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .ods-features .card-body {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    padding: 0;
  }

  .ods-features .card-body > img {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 52px;
    margin: 0 !important;
  }

  .ods-features .card-title,
  .ods-features .card-text {
    grid-column: 2;
  }

  .ods-features .card-title {
    margin-bottom: 0;
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .ods-features .card-text {
    margin: .35rem 0 0 !important;
    font-size: .9rem;
    line-height: 1.5;
  }
}

@media (max-width: 575.98px) {
  .ods-features .card {
    padding: 16px !important;
  }

  .ods-features .card-body {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
  }

  .ods-features .card-body > img {
    width: 40px;
  }
}

/* La sezione delle FAQ e' l'ultima cosa che si legge prima del pie' di pagina:
   l'accordion non deve toccare il bordo del blocco successivo. */
.ods-faq .accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(255, 138, 0, .35);
}

.ods-faq .accordion-button {
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   4. LA SEZIONE ART. 21 (pagine/_art21_section.php)

   Il quadro normativo comunicato con il MOTIVO europeo — blu istituzionale e
   una fila di stelle disegnata in CSS — senza bandiere ne' emblemi interi:
   compliance/2026-08-10 vieta di affermare un'appartenenza istituzionale che
   non c'e', e le stelle come decorazione sono il compromesso gia' approvato.

   Tono visivo: una carta chiara su fondo azzurrino, bordo sinistro blu. Calma,
   non allarme: nessun rosso, nessun grassetto urlato.
   -------------------------------------------------------------------------- */

.ods-art21 {
  background: #eef3fb;
}

.ods-art21-card {
  background: #fff;
  border-left: 4px solid #003399;      /* il blu dell'Unione */
  border-radius: 8px;
  padding: 28px 32px;
  box-shadow: 0 2px 10px rgba(0, 20, 70, .06);
}

.ods-art21-card h2 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

/* La fila di stelle: testo decorativo generato, mai contenuto. aria non serve:
   un ::before non entra nell'albero dell'accessibilita' come testo letto se
   resta puramente ornamentale — e qui e' un fregio, non un'informazione. */
.ods-art21-card h2::before {
  content: '\2605 \2605 \2605 \2605 \2605';
  display: block;
  color: #f4c542;                      /* l'oro delle stelle */
  font-size: .65rem;
  letter-spacing: .45em;
  margin-bottom: 8px;
}

.ods-art21-card p {
  margin-bottom: .7rem;
}


/* --------------------------------------------------------------------------
   5. LE PIATTAFORME PIU' COMUNI

   Titolo e introduzione vengono dal vecchio blocco CMS. La lista completa da
   trenta voci diventa una griglia di otto link, gia' ordinati dall'API in base
   ai casi: abbastanza per dare contesto e collegamenti alle landing senza
   trasformare la home in una directory.
   -------------------------------------------------------------------------- */

.ods-platform-highlights {
  background: #f7f8fc;
  padding-bottom: 28px;
}

.ods-platform-highlights__intro {
  max-width: 780px;
  margin: -12px auto 28px;
  color: #4e5870;
  line-height: 1.65;
}

.ods-platform-highlights__intro p:last-child {
  margin-bottom: 0;
}

.ods-platform-highlights__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ods-platform-highlight {
  display: flex;
  align-items: center;
  min-height: 78px;
  gap: 13px;
  padding: 13px 16px;
  border: 1px solid #e3e6ef;
  border-radius: 16px;
  background: #fff;
  color: #1c2340;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(18, 30, 80, .04);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ods-platform-highlight:hover,
.ods-platform-highlight:focus-visible {
  color: #192c78;
  border-color: #8b95c5;
  box-shadow: 0 7px 18px rgba(18, 30, 80, .1);
  transform: translateY(-2px);
}

.ods-platform-highlight:focus-visible {
  outline: 3px solid rgba(255, 138, 0, .55);
  outline-offset: 2px;
}

.ods-platform-highlight__mark {
  display: grid;
  position: relative;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 12px;
  background: #f0f2f7;
  color: #263770;
  font-weight: 800;
}

.ods-platform-highlight__mark::before {
  content: attr(data-initial);
}

.ods-platform-highlight__mark img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
  background: #fff;
  opacity: 0;
  transition: opacity .14s ease;
}

.ods-platform-highlight__mark img.is-loaded {
  opacity: 1;
}

.ods-platform-highlight__name {
  min-width: 0;
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
  .ods-platform-highlights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .ods-platform-highlights {
    padding-top: 32px;
    padding-bottom: 28px;
  }

  .ods-platform-highlights h2 {
    margin-bottom: 12px;
    font-size: 1.55rem;
    line-height: 1.22;
    text-align: left !important;
  }

  .ods-platform-highlights__intro {
    margin: 0 auto 24px;
    font-size: .96rem;
    line-height: 1.55;
    text-align: left;
  }

  .ods-platform-highlights__grid {
    gap: 12px 10px;
  }

  .ods-platform-highlight {
    min-height: 66px;
    padding: 10px;
    gap: 9px;
    border-radius: 13px;
  }

  .ods-platform-highlight__mark {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .ods-platform-highlight__name {
    font-size: .84rem;
  }
}

/* Gli approfondimenti che prima occupavano otto card complete restano link
   interni forti, ma condividono il fondo del blocco piattaforme e prendono
   soltanto due righe su desktop. */
.ods-common-problems {
  padding-top: 28px;
  background: #f7f8fc;
  border-top: 1px solid #e3e6ef;
}

.ods-common-problems h2 {
  margin-bottom: 18px;
  font-size: 1.45rem;
}

.ods-common-problems__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ods-common-problems__grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid #e3e6ef;
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  color: #1c2340;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.ods-common-problems__grid a:hover,
.ods-common-problems__grid a:focus-visible {
  background: #fff;
  border-color: #8b95c5;
  color: #192c78;
}

.ods-common-problems__grid a:focus-visible {
  outline: 3px solid rgba(255, 138, 0, .55);
  outline-offset: 2px;
}

.ods-common-problems__arrow {
  flex: 0 0 auto;
  color: #5968a8;
  font-size: 1.05rem;
}

@media (max-width: 991.98px) {
  .ods-common-problems__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .ods-common-problems {
    padding-top: 20px;
  }

  .ods-common-problems h2 {
    font-size: 1.25rem;
  }

  .ods-common-problems__grid {
    gap: 8px;
  }

  .ods-common-problems__grid a {
    min-height: 50px;
    padding: 9px 10px;
  }
}

/* La CTA ripetuta: riga di contesto sopra, bottone sotto, centrati. */
.ods-art21-cta {
  text-align: center;
  margin: 1.4rem 0 0;
}

.ods-art21-cta-note {
  display: block;
  color: #5a6b85;
  font-size: .95rem;
  margin-bottom: .6rem;
}

@media (max-width: 767.98px) {
  .ods-art21-card {
    padding: 20px 18px;
  }

  .ods-art21-card h2 {
    font-size: 1.3rem;
  }
}


/* --------------------------------------------------------------------------
   6. LA CTA DI CHIUSURA DOPO LE FAQ

   L'ultima cosa che un utente vede prima dell'ecosistema e del pie' di pagina
   dev'essere una porta, non un vicolo: chi e' arrivato in fondo leggendo le
   risposte e' la persona piu' vicina alla decisione di tutta la pagina.
   -------------------------------------------------------------------------- */

.ods-home-cta-end {
  text-align: center;
  padding-bottom: 3rem;
}

.ods-home-cta-end .ods-art21-cta-note {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   7. FAQ: RAGGIO UNIFORME.

   Bootstrap arrotonda solo il primo e l'ultimo .accordion-item del gruppo:
   le domande in mezzo avevano gli angoli vivi (visto nello screenshot
   dell'operatore, 12/08). Qui ogni domanda e' una carta a se': stesso raggio
   per tutte, overflow nascosto cosi' il bottone interno non buca gli angoli.
   -------------------------------------------------------------------------- */

.ods-faq .accordion-item,
.ods-faq .accordion-item:first-of-type,
.ods-faq .accordion-item:last-of-type {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}

.ods-faq .accordion-item .accordion-button,
.ods-faq .accordion-item:first-of-type .accordion-button,
.ods-faq .accordion-item:last-of-type .accordion-button,
.ods-faq .accordion-item:last-of-type .accordion-button.collapsed {
  border-radius: 0;   /* il taglio lo fa l'overflow della carta, identico per tutte */
}

@media (max-width: 575.98px) {
  .ods-faq {
    padding-bottom: 20px;
  }

  .ods-faq h2 {
    font-size: 1.7rem;
  }

  .ods-faq .accordion-item {
    margin-bottom: 10px;
  }

  .ods-faq .accordion-button {
    padding: 14px 16px;
    font-size: 1rem;
    line-height: 1.35;
  }

  .ods-faq .ods-home-cta-end {
    padding-bottom: 0;
  }

  /* ods-home.css e' caricato solo in home: qui si annulla il vecchio margine
     globale da 140px senza cambiare il footer delle pagine interne. */
  footer.container {
    margin-top: 16px;
    padding-top: 2rem;
  }
}