/*
Theme Name: Studio Sara Salvati 2026
Theme URI: https://sarasalvati.it/
Description: Tema figlio di Extendable per lo Studio Sara Salvati — Ingegneria civile, Trento. Contenuti resi lato server (HTML), font Inter inclusi nel tema, nessuna chiamata a servizi esterni. Include Home, template di pagina e stili per le schede progetto. All'attivazione crea la pagina Progetti e le nove schede, con le immagini gia' presenti nel tema.
Author: Studio Sara Salvati
Template: extendable
Version: 1.2.6
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio-sara-salvati-2026
Tags: block-styles, full-site-editing, one-column, custom-colors, custom-logo, editor-style, accessibility-ready
*/

/* ==========================================================================
   Studio Sara Salvati 2026 — tema figlio a blocchi di Extendable.
   Palette allineata all'anteprima (campionata dal logo dello studio).
   Prefisso ss- su tutte le classi personalizzate.
   ========================================================================== */

:root {
  --ss-navy: #082e48;
  --ss-petrolio: #256866;
  --ss-giallo: #fdc01d;
  --ss-menta: #e6efec;
  --ss-inchiostro: #1d2f37;
  --ss-grigio: #5c6d72;
  --ss-libellula: #7fb2c4;
  --ss-salvia: #a8bcbd;
  --ss-bianco: #fbfcfb;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ss-inchiostro);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.wp-block-heading {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ss-navy);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   Intestazione e navigazione
   -------------------------------------------------------------------------- */
.ss-header {
  border-bottom: 1px solid var(--ss-menta);
  background: var(--ss-bianco);
}
.ss-header .wp-block-site-logo img {
  height: 48px;
  width: auto;
}
.ss-nav a {
  color: var(--ss-navy);
  font-weight: 600;
  font-size: 0.9375rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.ss-nav a:hover,
.ss-nav a:focus-visible {
  color: var(--ss-petrolio);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Occhiello, hero, sezioni
   -------------------------------------------------------------------------- */
.ss-occhiello {
  color: var(--ss-petrolio);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.ss-hero {
  background: linear-gradient(180deg, var(--ss-navy) 0%, #0f4459 55%, var(--ss-petrolio) 100%);
}
.ss-hero .ss-occhiello {
  color: var(--ss-libellula);
}
.ss-hero .ss-hero__titolo,
.ss-hero .wp-block-post-title {
  color: #ffffff;
}
.ss-hero__titolo {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  max-width: 22ch;
}
.ss-hero__sottotitolo {
  color: var(--ss-grigio);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  max-width: 62ch;
}
.ss-sezione {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.ss-sezione--menta { background: var(--ss-menta); }
.ss-sezione--navy {
  background: var(--ss-navy);
  color: var(--ss-bianco);
}
.ss-sezione--navy h2,
.ss-sezione--navy h3 { color: var(--ss-bianco); }
.ss-sezione--navy p { color: #d7e2e8; }
.ss-sezione__intro {
  color: var(--ss-grigio);
  max-width: 62ch;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Numeri chiave
   -------------------------------------------------------------------------- */
.ss-numero {
  border-top: 3px solid var(--ss-giallo);
  padding-top: 0.875rem;
}
.ss-numero__valore {
  color: var(--ss-navy);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
.ss-numero__etichetta {
  color: var(--ss-grigio);
  font-size: 0.875rem;
  margin: 0.375rem 0 0;
}

/* --------------------------------------------------------------------------
   Competenze
   -------------------------------------------------------------------------- */
.ss-competenza {
  box-sizing: border-box;
  background: var(--ss-bianco);
  border: 1px solid var(--ss-menta);
  border-left: 3px solid var(--ss-petrolio);
  border-radius: 4px;
  padding: 1.5rem;
}
.ss-competenza h3 {
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}
.ss-competenza p {
  color: var(--ss-grigio);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Schede progetto
   -------------------------------------------------------------------------- */
.ss-progetto__dati {
  background: var(--ss-menta);
  padding: 1.25rem;
  border-radius: 4px;
}
.ss-progetto__dati table { width: 100%; border-collapse: collapse; }
.ss-progetto__dati td { vertical-align: top; padding: 0.4rem 0.6rem; }
.ss-progetto__dato-chiave {
  color: var(--ss-navy);
  font-weight: 600;
  width: 40%;
}
.ss-progetto__sottotitolo {
  color: var(--ss-petrolio);
  font-size: 1.0625rem;
}
.ss-progetto__ruolo {
  color: var(--ss-petrolio);
  font-weight: 600;
}
.ss-progetto__fonte {
  color: var(--ss-grigio);
  font-size: 0.875rem;
}
.ss-progetto__card {
  box-sizing: border-box;
  background: var(--ss-bianco);
  border: 1px solid var(--ss-menta);
  border-radius: 4px;
  overflow: hidden;
}
.ss-progetto__card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.ss-progetto__card-testo { padding: 1.25rem; }
.ss-progetto__titolo {
  font-size: 1.125rem;
  margin: 0 0 0.375rem;
}

/* --------------------------------------------------------------------------
   Immagini tecniche: planimetrie, prospetti, render, viste aeree
   -------------------------------------------------------------------------- */
.ss-figura--tecnica img {
  object-fit: contain;
  background: var(--ss-menta);
  width: 100%;
  height: auto;
}
.ss-figura__credito {
  color: var(--ss-grigio);
  font-size: 0.8125rem;
  display: block;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Chiamate all'azione
   -------------------------------------------------------------------------- */
.ss-cta .wp-block-button__link,
.wp-block-button.ss-cta > .wp-block-button__link {
  background: var(--ss-giallo);
  color: var(--ss-navy);
  font-weight: 600;
  min-height: 48px;
  padding: 0.8125rem 1.75rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.ss-cta--chiara .wp-block-button__link {
  background: transparent;
  color: var(--ss-bianco);
  border: 1px solid rgba(251, 252, 251, 0.45);
}

/* --------------------------------------------------------------------------
   Contatti
   -------------------------------------------------------------------------- */
.ss-contatto {
  border-top: 1px solid var(--ss-menta);
  padding-top: 1rem;
}
.ss-contatto a {
  color: var(--ss-petrolio);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Piè di pagina
   -------------------------------------------------------------------------- */
.ss-footer {
  background: var(--ss-navy);
  color: #d7e2e8;
  font-size: 0.9375rem;
}
.ss-footer a {
  color: var(--ss-bianco);
  text-decoration: none;
}
.ss-footer a:hover,
.ss-footer a:focus-visible { text-decoration: underline; }
.ss-footer__nota {
  color: var(--ss-salvia);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Accessibilità
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--ss-giallo);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Schermi stretti
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .ss-progetto__titolo,
  .ss-hero__titolo {
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .ss-progetto__dati { padding: 1rem; }
  .ss-progetto__dato-chiave { width: auto; }
  .ss-progetto__card img { height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-progetto__card,
  .ss-cta,
  .ss-hero {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   v1.1.0 — schede progetto generate all'attivazione del tema
   ========================================================================== */

.ss-progetto__sottotitolo {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ss-inchiostro);
  margin-bottom: 0.5rem;
}

.ss-progetto__ruolo {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--ss-petrolio);
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 2rem;
}

.ss-progetto__dati table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
}

.ss-progetto__dati td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--ss-menta);
  vertical-align: top;
}

.ss-progetto__dati tr:last-child td {
  border-bottom: 0;
}

.ss-progetto__dato-chiave {
  width: 34%;
  color: var(--ss-grigio);
  font-weight: 600;
  white-space: normal;
}

.ss-progetto__fonte {
  font-size: 0.875rem;
  color: var(--ss-grigio);
  line-height: 1.7;
}

.ss-figura,
.ss-figura--tecnica {
  margin: 2rem 0;
}

.ss-figura--tecnica img {
  background: #ffffff;
  padding: 0.75rem;
  border: 1px solid var(--ss-menta);
}

.ss-figura figcaption,
.ss-figura--tecnica figcaption,
.wp-block-image figcaption {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ss-grigio);
  text-align: left;
  margin-top: 0.6rem;
}

.ss-figura__credito {
  font-size: 0.75rem;
  color: var(--ss-grigio);
}

.ss-figura__credito a {
  color: var(--ss-grigio);
}

.ss-progetto__titolo a,
.ss-progetto__card a {
  text-decoration: none;
  color: inherit;
}

.ss-progetto__titolo a:hover,
.ss-progetto__titolo a:focus-visible {
  color: var(--ss-petrolio);
  text-decoration: underline;
}

.ss-progetto__card img {
  transition: transform 240ms ease;
}

.ss-progetto__card:hover img {
  transform: scale(1.02);
}

.ss-sezione__intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ss-grigio);
  max-width: 46rem;
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   v1.2.2 — piè di pagina completo e sezione Network della pagina Team
   ========================================================================== */

/* --------------------------------------------------------------------------
   Piè di pagina: marchio, indirizzo, elenchi, riga legale
   -------------------------------------------------------------------------- */
.ss-footer__marchio {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.ss-footer__logo {
  background: var(--ss-bianco);
  border-radius: 6px;
  padding: 0.5rem;
  display: inline-flex;
  flex: 0 0 auto;
}
.ss-footer__logo img {
  width: 44px;
  height: 44px;
  display: block;
}
.ss-footer__marchio-testo {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
.ss-footer__marchio-testo strong {
  color: #ffffff;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
}
.ss-footer__sottomarchio {
  color: var(--ss-libellula);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ss-footer__indirizzo {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.8;
  margin: 0;
}
.ss-footer__riga {
  display: block;
}
.ss-footer__etichetta {
  color: var(--ss-libellula);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ss-footer__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.ss-footer__elenco li {
  margin: 0 0 0.375rem;
}
.ss-footer__elenco a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.ss-footer__elenco--dati li {
  color: #d7e2e8;
}
.ss-footer__legale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.ss-footer__copyright {
  margin: 0;
  color: var(--ss-salvia);
  font-size: 0.8125rem;
}
.ss-footer__legale-elenco {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
}
/*
   Voce legale: dal 10 settembre 2026 /privacy-policy/ e' pubblicata e cliccabile.
   Lo <span> resta previsto per eventuali voci non ancora collegate.
*/
.ss-footer__legale-elenco span {
  color: rgba(127, 178, 196, 0.7);
}
.ss-footer__legale-elenco a {
  color: var(--ss-salvia);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 178, 196, 0.45);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ss-footer__legale-elenco a:hover,
.ss-footer__legale-elenco a:focus-visible {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Sezione Network (pagina Team)
   -------------------------------------------------------------------------- */
.ss-network {
  position: relative;
  overflow: hidden;
  background: var(--ss-navy);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.ss-network__sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
}
.ss-network__velo {
  position: absolute;
  inset: 0;
  background: rgba(8, 46, 72, 0.8);
  pointer-events: none;
}
.ss-network__contenuto {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.25rem;
}
.ss-network__occhiello {
  color: var(--ss-libellula);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.ss-network__titolo {
  color: #ffffff;
  font-size: clamp(1.5rem, 4.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.14;
  max-width: 30ch;
  margin: 0.75rem 0 0;
}
.ss-network__testo {
  max-width: 72ch;
  margin-top: 1.25rem;
}
.ss-network__testo p {
  color: var(--ss-menta);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}
.ss-network__testo p:last-child {
  margin-bottom: 0;
}
.ss-network__testo-forte {
  color: #ffffff !important;
  font-weight: 600;
}
.ss-network__sottotitolo {
  color: #ffffff;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}
.ss-network__intro {
  color: var(--ss-menta);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 72ch;
  margin: 0.75rem 0 0;
}
.ss-network__griglia {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  margin: 1.5rem 0 0;
  padding: 0;
}
.ss-network__griglia--competenze { gap: 1.25rem; }
.ss-network__griglia--partner { gap: 1rem; }
.ss-network__voce,
.ss-network__partner {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}
.ss-network__voce {
  padding: 1.5rem;
}
.ss-network__partner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem;
}
.ss-network__voce h4 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.ss-network__voce p {
  color: var(--ss-menta);
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0.75rem 0 0;
}
.ss-network__partner h4 {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.ss-network__partner p {
  color: var(--ss-libellula);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Due colonne da tablet, tre e quattro soltanto dai 1280 px. */
@media (min-width: 640px) {
  .ss-network__griglia--competenze,
  .ss-network__griglia--partner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .ss-network__griglia--competenze {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ss-network__griglia--partner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Coordinamento: chiusura della pagina Team
   -------------------------------------------------------------------------- */
.ss-coordinamento {
  background: #ffffff;
  border-top: 1px solid var(--ss-menta);
}
.ss-coordinamento__contenuto {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.25rem;
}
.ss-coordinamento__occhiello {
  color: var(--ss-petrolio);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.ss-coordinamento__titolo {
  color: var(--ss-navy);
  font-size: clamp(1.4rem, 4.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  max-width: 34ch;
  margin: 0.75rem 0 0;
}
.ss-coordinamento__testo {
  color: var(--ss-grigio);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 70ch;
  margin: 1.25rem 0 0;
}
.ss-coordinamento__azione {
  margin: 2rem 0 0;
}
.ss-bottone {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  background: var(--ss-navy);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.ss-bottone:hover,
.ss-bottone:focus-visible {
  background: var(--ss-petrolio);
  color: #ffffff;
}

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

/* --------------------------------------------------------------------------
   v1.2.3 — Ritmo verticale della pagina Team

   La pagina /team/ e' un contenuto WordPress preesistente: il tema non la
   modifica e non scrive nulla nel database. Tutto quello che segue agisce
   soltanto in visualizzazione.

   Lo stacco che si vede sotto il banner blu NON e' il padding di #team, come
   sembrava a prima vista: il banner e' dentro il contenitore #about, e il
   vuoto e' il padding-bottom di #about (64px mobile, 112px desktop). Il bordo
   superiore di #team coincide esattamente con il bordo inferiore di #about.
   I due valori derivano dalla stessa preset spacing--70 e per questo si
   confondono facilmente.

   Sono stili in linea sul contenitore: per sovrascriverli servono l'id nel
   selettore e !important. Sono gli unici !important del tema e stanno qui
   per non dover toccare il contenuto della pagina.

   #about esiste soltanto su /team/ (verificato su home, servizi, progetti,
   contatti), quindi la regola non tocca il resto del sito.
   -------------------------------------------------------------------------- */
#about {
  padding-bottom: 36px !important;
}
#team {
  padding-top: 32px !important;
  padding-bottom: 44px !important;
}

/* Ritmo interno delle tre schede: foto -> nome -> qualifica -> testo.
   Attenzione ai selettori: dentro .wp-block-column c'e' un ulteriore
   div.wp-block-group, quindi h3, p e figure NON sono figli diretti della
   colonna. Servono selettori discendenti. */
#team .wp-block-column figure {
  margin-top: 0;
  margin-bottom: 16px;
}
#team .wp-block-column h3 {
  margin-top: 0;
  margin-bottom: 0;
}

/* La qualifica e' il paragrafo subito dopo il nome. Su una riga sola lasciava
   la colonna piu' corta delle altre e la griglia riempiva la differenza con
   una fascia bianca in fondo alla scheda. Riservando l'altezza di due righe
   le tre schede combaciano e il vuoto sparisce. */
#team .wp-block-column h3 + p {
  line-height: 1.5;
  min-height: 3em;
  margin-top: 0;
  margin-bottom: 0;
}
#team .wp-block-column h3 + p + p {
  margin-top: 12px;
  margin-bottom: 0;
}

@media (min-width: 782px) {
  #about {
    padding-bottom: 48px !important;
  }
  #team {
    padding-top: 40px !important;
    padding-bottom: 64px !important;
  }
}

/* --------------------------------------------------------------------------
   v1.2.5 — Leggibilita' dei titoli sulle copertine fotografiche

   Difetto rilevato sul sito pubblicato il 10 settembre 2026: nel banner della
   pagina /team/ il titolo «Competenze integrate, un unico coordinamento»
   risultava blu navy (rgb 8,46,72) sopra una fotografia scura, quindi
   praticamente illeggibile.

   Causa: theme.json assegna il navy a h1, h2 e h3 come stile di elemento.
   Dentro un blocco copertina il colore del testo lo decide la copertina
   (bianco), ma il titolo non lo eredita perche' ha un colore proprio.
   Nella copertina di /servizi/ il titolo e' bianco perche' li' il colore era
   stato impostato a mano nel blocco; in quella di /team/ no.

   Rimedio: dentro le copertine i titoli tornano a ereditare il colore del
   blocco. Vale per tutte le copertine, presenti e future.
   -------------------------------------------------------------------------- */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4 {
  color: inherit;
}

/* --------------------------------------------------------------------------
   v1.2.6 — Velo del banner /team/: contrasto misurato, non stimato

   La copertina di /team/ ha gia' un velo scritto in stile in linea
   (linear-gradient(90deg, rgb(1,1,1), rgba(0,0,0,0.15))): scuro a sinistra,
   trasparente a destra. Con il titolo bianco della 1.2.5 sembrava sufficiente,
   ma la misura del contrasto sulla pagina pubblicata dice altro.

   Contrasto peggiore fra testo bianco e sfondo, rilevato l'11 settembre 2026
   sul sito con la 1.2.5 installata (soglia WCAG 2.1 AA: 4,5:1 per il testo
   corrente, 3:1 per i titoli grandi):

     393 px   titolo 5,71:1   paragrafo 5,75:1   nessun pixel sotto soglia
     1024 px  titolo 2,97:1   paragrafo 2,74:1   16,7% dell'area sotto soglia
     1440 px  titolo 3,47:1   paragrafo 3,14:1    8,5% dell'area sotto soglia

   Su schermo largo il tavolo chiaro e il portatile della fotografia passano
   sotto il testo. Rimedio: un velo direzionale navy, denso a sinistra dove
   sta il testo e trasparente a destra, cosi' la fotografia resta leggibile
   nella parte che conta. Sotto i 782 px il testo occupa tutta la larghezza,
   quindi li' il velo resta uniforme.
   -------------------------------------------------------------------------- */
#about .wp-block-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 46, 72, 0.82) 0%,
    rgba(8, 46, 72, 0.72) 40%,
    rgba(8, 46, 72, 0.28) 68%,
    rgba(8, 46, 72, 0) 92%
  );
  pointer-events: none;
  z-index: 0;
}
#about .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}
@media (max-width: 781px) {
  #about .wp-block-cover::after {
    background: rgba(8, 46, 72, 0.62);
  }
}

/* Il paragrafo del banner, su schermo largo, correva fin oltre la meta' della
   fotografia. Trattenuto entro la fascia scura: meno righe lunghe da leggere
   e nessun tratto di testo sopra il tavolo chiaro. */
@media (min-width: 782px) {
  #about .wp-block-cover__inner-container p {
    max-width: 34rem;
  }
}

/* Il banner occupava l'altezza intera dello schermo (min-height: 100vh) e
   spingeva le tre schede del team sotto la piega. Qui viene riportato a una
   fascia di apertura. Per tornare all'originale basta togliere queste due
   regole. */
#about .wp-block-cover {
  min-height: 420px !important;
}
@media (min-width: 782px) {
  #about .wp-block-cover {
    min-height: 520px !important;
  }
}