/* ==========================================================================
   Personalizzazioni IISS "Giudici Saetta e Livatino"
   Caricato DOPO bootstrap-italia.min.css. Solo override minimi.
   ========================================================================== */

/* --- Footer: garantire contrasto AA dei link su fondo blu --- */
.it-footer a,
.it-footer .link-list .list-item,
.it-footer .link-list .list-item span,
.it-footer address,
.it-footer address a {
  color: #ffffff;
}
.it-footer .link-list .list-item:hover span,
.it-footer address a:hover,
.it-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.it-footer h4,
.it-footer h4 a,
.it-footer .h4,
.it-footer .h4 a {
  color: #ffffff;
}
.it-footer-small-prints a {
  color: #ffffff;
  text-decoration: underline;
}

/* --- Logo scuola nell'header --- */
.school-logo {
  height: auto;
  max-height: 92px;
  width: auto;
  padding: 6px 0;
}
@media (max-width: 992px) {
  .school-logo { max-height: 50px; }
}
/* --- Header mobile: niente sovrapposizione tra hamburger, logo e ricerca --- */
@media (max-width: 992px) {
  /* "Registro Elettronico" allineato tutto a destra nell'header slim
     (su mobile il link al Ministero è nascosto, quindi lo space-between
     lascerebbe il pulsante a sinistra) */
  .it-header-slim-right-zone { margin-left: auto; }
  /* Bootstrap Italia posiziona l'hamburger in absolute a sinistra (left:0):
     diamo spazio al logo perché non gli finisca sotto */
  .it-header-center-content-wrapper .it-brand-wrapper { margin-left: 48px; }
}
/* Titolo esteso accanto al logo (header-center a sfondo blu -> testo bianco) */
/* .school-title è un <h1> in home e uno <span> nelle altre pagine:
   azzeriamo dimensioni/margini/peso/crenatura di default dell'h1 (Bootstrap Italia
   applica letter-spacing:-1px alle intestazioni) per un aspetto identico ovunque. */
.school-title { justify-content: center; line-height: 1.15; margin: 0; padding: 0; font-size: 1rem; font-weight: 400; letter-spacing: normal; color: #ffffff; }
.school-title-heading { display: flex; flex-direction: column; margin: 0; padding: 0; font-weight: 400; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.school-title-name { letter-spacing: normal; }
.school-title-pre { font-size: 1.05rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: rgba(255,255,255,.9); }
.school-title-name { font-size: 1.9rem; font-weight: 700; color: #ffffff; line-height: 1.1; }
.school-title-motto { font-size: 1.15rem; font-style: italic; color: #ffffff; margin-top: .25rem; }
.school-title-sedi { font-size: .95rem; color: rgba(255,255,255,.88); margin-top: .15rem; }
/* h1 della home sotto i 992px: invisibile ma letto dai lettori di schermo (stessa tecnica di .visually-hidden) */
@media (max-width: 991.98px) {
  .school-title-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
}
/* Le righe extra (motto/sedi) solo da xl in su per non affollare l'header */
@media (max-width: 1199.98px) {
  .school-title-motto, .school-title-sedi { display: none; }
}

/* --- Icone social (header + footer) --- */
.it-socials-list {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding-left: 0;
}
.it-socials-list .list-inline-item { margin: 0; }
.it-socials-list .icon { width: 24px; height: 24px; }
.footer-social .it-socials-list .icon { fill: #fff; }

/* --- Accesso "Cerca" nell'header-center (testo bianco su fondo blu) --- */
.it-right-zone { display: flex; align-items: center; gap: 1rem; }
.it-search-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #ffffff; text-decoration: none; font-weight: 600;
  padding: .4rem .75rem; border: 1px solid rgba(255,255,255,.55); border-radius: 2rem;
  transition: background-color .15s ease, border-color .15s ease;
}
.it-search-link .icon { width: 20px; height: 20px; fill: #ffffff; }
.it-search-link:hover,
.it-search-link:focus-visible { background: rgba(255,255,255,.15); border-color: #ffffff; color: #ffffff; }
.it-search-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (max-width: 575.98px) {
  .it-search-link-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .it-search-link { padding: .45rem; }
}

/* --- Pagefind UI: integrazione con la palette navy del sito --- */
.ricerca-sito {
  --pagefind-ui-primary: #06305f;
  --pagefind-ui-text: #1b1b1b;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #ccd4e0;
  --pagefind-ui-tag: #f2f5f9;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: .5rem;
  --pagefind-ui-font: inherit;
}
.ricerca-sito .pagefind-ui__search-input:focus { outline: 2px solid #06305f; outline-offset: 2px; }
.ricerca-sito .pagefind-ui__result-title a { color: #06305f; }
.ricerca-sito .pagefind-ui__result-title a:hover { text-decoration: underline; }

/* --- Tabelle nei contenuti (orario, calendario, ecc.) --- */
main table {
  width: 100%;
  margin: 1rem 0 1.5rem;
  border-collapse: collapse;
  font-size: .95rem;
}
main table th,
main table td {
  padding: .6rem .8rem;
  border-bottom: 1px solid #dee2e6;
  text-align: left;
  vertical-align: top;
}
main table thead th,
main table tr:first-child th {
  background: #f2f5f9;
  border-bottom: 2px solid #06305f;
  color: #06305f;
}
main table tbody tr:hover { background: #f8fafc; }

/* --- Card banner "Link utili" --- */
.link-card-img { display: flex; flex-direction: column; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.link-card-img:hover, .link-card-img:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
/* Bootstrap Italia aggiunge un ::after con 48px di margine in fondo alle card: qui non serve */
.link-card-img::after { display: none; }
.link-card-img .card-body p { line-height: 1.4; }
.link-card-banner { position: relative; height: 84px; background-color: var(--lc, #06305f); display: flex; align-items: center; justify-content: center; }
.link-card-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(0,0,0,.2)); }
.link-card-banner .icon { position: relative; width: 40px; height: 40px; fill: #fff; }
.link-card-banner.is-logo { background: #fff; border-bottom: 1px solid #e3e8ef; }
.link-card-banner.is-logo::before { display: none; }
.link-card-banner.is-logo img { max-width: 82%; max-height: 58px; object-fit: contain; }
.link-card-banner.is-logo.is-logo-dark { background: #06305f; border-bottom-color: #06305f; }
.link-card-banner.is-cover { background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #fff; }
/* Servizi online in home: banner un po' più alto, loghi più leggibili */
.link-card-banner.is-servizio { height: 96px; }
.link-card-banner.is-logo.is-servizio img { max-width: 86%; max-height: 72px; }
.card-servizio .card-title { min-width: 0; }
@media (max-width: 575.98px) { .card-servizio .card-title { font-size: .95rem; } }
.link-card-banner.is-cover::before { display: none; }

/* --- Bottone "Registro Elettronico" nell'header slim (bianco su barra blu) --- */
.registro-slim { display: inline-flex; align-items: center; gap: .35rem; background: #ffffff !important; font-weight: 700; padding: .35rem .85rem; border-radius: 2rem; text-decoration: none !important; font-size: .9rem; line-height: 1.2; }
.registro-slim, .registro-slim span { color: #06305f !important; }
.registro-slim:hover, .registro-slim:focus-visible { background: #eef2f7 !important; }
.registro-slim .icon { fill: #06305f !important; width: 18px; height: 18px; }

/* --- Banner informativo cookie --- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: #06305f; color: #fff; padding: .9rem 0; box-shadow: 0 -2px 14px rgba(0,0,0,.3); }
.cookie-banner-inner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cookie-banner .cookie-text { flex: 1; min-width: 240px; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner .btn { flex-shrink: 0; }
.cookie-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.cookie-banner #cookie-accept { background: #fff; color: #06305f; border: 1px solid #fff; font-weight: 600; }
.cookie-banner #cookie-accept:hover, .cookie-banner #cookie-accept:focus-visible { background: #ffd400; color: #06305f; border-color: #ffd400; }
.cookie-banner #cookie-reject { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.75); }
.cookie-banner #cookie-reject:hover, .cookie-banner #cookie-reject:focus-visible { background: rgba(255,255,255,.15); border-color: #fff; }
.cookie-banner .cookie-dismiss { background: none; border: 0; color: #fff; text-decoration: underline; padding-left: .5rem; padding-right: .5rem; }
.cookie-banner .cookie-dismiss:hover, .cookie-banner .cookie-dismiss:focus-visible { color: #ffd400; }
.link-card-img .card-body { color: #1b1b1b; }

/* ==========================================================================
   Pannello di accessibilità
   ========================================================================== */
.a11y-widget { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; }
.a11y-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #06305f; color: #fff; border: 2px solid #fff; border-radius: 2rem;
  padding: .5rem .9rem; box-shadow: 0 2px 12px rgba(0,0,0,.35); cursor: pointer; font-weight: 600;
}
.a11y-toggle:hover, .a11y-toggle:focus-visible { background: #0a3d91; }
.a11y-toggle .a11y-icon { flex-shrink: 0; }
/* su smartphone resta solo l'icona: etichetta nascosta alla vista ma letta dai lettori di schermo (nome accessibile del pulsante) */
@media (max-width: 575px) { .a11y-toggle-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .a11y-toggle { padding: .55rem; } }

.a11y-panel {
  position: absolute; right: 0; bottom: calc(100% + .6rem);
  width: min(320px, 92vw); background: #fff; color: #1b1b1b;
  border: 1px solid #06305f; border-radius: .5rem; box-shadow: 0 8px 28px rgba(0,0,0,.28); padding: 1rem;
}
.a11y-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.a11y-panel-head h2 { color: #06305f; }
.a11y-close { background: none; border: none; cursor: pointer; color: #06305f; padding: .2rem; line-height: 0; }
.a11y-group { border: 0; padding: 0; margin: 0 0 1rem; }
.a11y-group legend { font-size: .85rem; font-weight: 700; color: #06305f; margin-bottom: .45rem; padding: 0; }
.a11y-btns { display: flex; gap: .4rem; }
.a11y-btns button, .a11y-toggle-opt {
  width: 100%; background: #f2f5f9; border: 1px solid #ccd4e0; border-radius: .35rem;
  padding: .5rem .7rem; cursor: pointer; font-size: .9rem; color: #1b1b1b;
}
.a11y-toggle-opt { display: block; text-align: left; margin-bottom: .4rem; }
.a11y-btns button { text-align: center; }
.a11y-btns button[aria-pressed="true"], .a11y-toggle-opt[aria-pressed="true"] {
  background: #06305f; color: #fff; border-color: #06305f;
}
.a11y-toggle-opt[aria-pressed="true"]::after { content: " ✓"; font-weight: 700; }

/* --- Stati applicati a tutto il sito --- */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-readable body { letter-spacing: .03em; word-spacing: .08em; line-height: 1.85; }
html.a11y-underline main a,
html.a11y-underline .it-footer a { text-decoration: underline !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
/* Contrasto elevato */
html.a11y-contrast body { background: #fff; color: #000; }
html.a11y-contrast main a { color: #0a2a6b; }
html.a11y-contrast .card,
html.a11y-contrast main table th,
html.a11y-contrast main table td { border-color: #000 !important; }
html.a11y-contrast .text-muted, html.a11y-contrast .card-text { color: #333 !important; }

/* ==========================================================================
   Pagina Contatti — sedi, recapiti, mappe click-to-load
   ========================================================================== */
.contatti-hero { border-left: 5px solid #06305f; padding-left: 1rem; }
.contatti-hero .lead { color: #33475b; }

.contatti-section-title {
  color: #06305f;
  margin: 2rem 0 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid #e3e8ef;
}

/* --- Card sede --- */
.sede-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(6, 48, 95, .06);
  transition: box-shadow .15s ease, transform .15s ease;
}
.sede-card:hover, .sede-card:focus-within {
  box-shadow: 0 10px 26px rgba(6, 48, 95, .14);
  transform: translateY(-2px);
}
.sede-card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.25rem;
  background: #06305f;
  color: #fff;
}
.sede-card-head.is-principale { background: linear-gradient(135deg, #06305f 0%, #0a4a91 100%); }
.sede-card-head h3 { color: #fff; letter-spacing: normal; }
.sede-card-head-icon { fill: #fff; flex-shrink: 0; }
.icon-white { fill: #fff; }
.sede-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 1rem;
  padding: .1rem .55rem;
  margin-left: .35rem;
  vertical-align: middle;
  white-space: nowrap;
}
.sede-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
.sede-plesso { font-weight: 600; color: #06305f; margin-bottom: .75rem; }
.sede-info-list { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.sede-info-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .4rem 0;
  line-height: 1.5;
}
.sede-info-icon { fill: #06305f; flex-shrink: 0; margin-top: .15rem; }
.sede-info-list a { color: #06305f; font-weight: 600; text-decoration: none; }
.sede-info-list a:hover, .sede-info-list a:focus-visible { text-decoration: underline; }
.sede-mappa { margin-top: auto; }
.sede-card-foto { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.sede-descr { color: #45515d; margin: 0 0 1rem; }
.sede-orari { margin: 0 0 1.1rem; }
.sede-orari-titolo { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #06305f; margin: 0 0 .4rem; }
.sede-orari-list { list-style: none; padding: 0; margin: 0; }
.sede-orari-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px dashed #e3e8ef; font-size: .93rem; }
.sede-orari-list li:last-child { border-bottom: 0; }
.sede-orari-ora { font-weight: 600; color: #06305f; white-space: nowrap; }
html.a11y-contrast .sede-descr { color: #333; }
html.a11y-contrast .sede-orari-list li { border-bottom-color: #000; }

/* --- Box mappa: segnaposto + iframe su consenso --- */
.mappa-consenso {
  border: 1px solid #e3e8ef;
  border-radius: .6rem;
  overflow: hidden;
  background: #f2f5f9;
}
.mappa-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  padding: 1.5rem 1.25rem;
  background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 12px, #e7edf5 12px, #e7edf5 24px);
}
.mappa-placeholder-icon { fill: #06305f; width: 40px; height: 40px; }
.mappa-placeholder-text { font-size: .85rem; color: #3a4a5e; margin: 0; max-width: 42ch; }
.mappa-btn { font-weight: 600; }
.mappa-frame { line-height: 0; }
.mappa-iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}
.mappa-iframe:focus-visible { outline: 3px solid #06305f; outline-offset: -3px; }
.mappa-link { margin-top: .65rem; font-size: .9rem; }
.mappa-link a { color: #06305f; font-weight: 600; text-decoration: none; }
.mappa-link a:hover, .mappa-link a:focus-visible { text-decoration: underline; }

/* --- Card recapiti istituzionali / DPO --- */
.recapiti-card {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: .75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(6, 48, 95, .06);
}
.recapito-item { display: flex; align-items: flex-start; gap: .75rem; }
.recapito-icon {
  fill: #06305f;
  flex-shrink: 0;
  margin-top: .15rem;
  width: 28px;
  height: 28px;
  background: #eef3fa;
  border-radius: .4rem;
  padding: 4px;
  box-sizing: content-box;
}
.recapito-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #5a6b7e; font-weight: 700; margin-bottom: .1rem; }
.recapito-value { color: #1b1b1b; font-weight: 600; }
.recapiti-card a { color: #06305f; font-weight: 600; text-decoration: none; word-break: break-word; }
.recapiti-card a:hover, .recapiti-card a:focus-visible { text-decoration: underline; }

/* --- Contrasto elevato --- */
html.a11y-contrast .sede-card,
html.a11y-contrast .recapiti-card,
html.a11y-contrast .mappa-consenso { border-color: #000 !important; }
html.a11y-contrast .sede-info-list a,
html.a11y-contrast .recapiti-card a,
html.a11y-contrast .mappa-link a { color: #0a2a6b; }
html.a11y-contrast .mappa-placeholder-text,
html.a11y-contrast .recapito-label { color: #000 !important; }

/* --- Responsive: mappa più bassa su mobile --- */
@media (max-width: 575.98px) {
  .mappa-iframe { height: 240px; }
}

/* ==========================================================================
   Rifiniture estetiche (Task 16) — solo additive, palette navy #06305f.
   Nessun font/CDN esterno. Tutte le animazioni si annullano sotto
   prefers-reduced-motion e html.a11y-motion (vedi in fondo al file).
   ========================================================================== */

/* --- Titoli di sezione con filetto/accento navy sotto l'h2 --- */
.section-title {
  position: relative;
  color: #06305f;
  padding-bottom: .55rem;
  letter-spacing: -.01em;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #06305f 0%, #0a4a91 100%);
}

/* Link "Tutte le notizie →" accanto al titolo di sezione */
.section-link {
  font-weight: 600;
  color: #06305f;
  text-decoration: none;
  white-space: nowrap;
}
.section-link:hover,
.section-link:focus-visible { text-decoration: underline; }
.section-link span { transition: transform .18s ease; display: inline-block; }
.section-link:hover span { transform: translateX(3px); }

/* --- Sezione presentazione (hero editoriale) --- */
.home-intro-lead { font-size: 1.08rem; line-height: 1.7; color: #26333f; }

/* --- Immagine "a contorno" (float): il testo scorre accanto e sotto ---
   Usata nella pagina Biblioteca: l'immagine verticale galleggia in alto a
   sinistra e tutto il testo la avvolge, senza spazi bianchi laterali. */
.biblioteca-figure {
  float: left;
  width: clamp(240px, 38%, 320px);
  margin: .35rem 1.75rem 1rem 0;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 48, 95, .16);
}
.biblioteca-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .75rem;
  transition: transform .5s ease;
}
.biblioteca-figure:hover img { transform: scale(1.03); }
/* Su smartphone l'immagine non galleggia: si impila in cima, centrata */
@media (max-width: 575.98px) {
  .biblioteca-figure { float: none; width: 100%; max-width: 340px; margin: 0 auto 1.25rem; }
}
/* Clearfix: garantisce che il contenitore contenga sempre il float */
.it-page-section::after { content: ""; display: table; clear: both; }

/* --- Card generiche (Servizi online, Offerta formativa, Notizie) ---
   Accento superiore navy che si rivela all'hover + sollevamento morbido. */
.card-teaser,
.card-teaser-image {
  position: relative;
  border: 1px solid #e6ebf2;
  border-radius: .6rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-teaser::before,
.card-teaser-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #06305f 0%, #0a4a91 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.card-teaser:hover,
.card-teaser:focus-within,
.card-teaser-image:hover,
.card-teaser-image:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(6, 48, 95, .14);
  border-color: #d4deeb;
}
.card-teaser:hover::before,
.card-teaser:focus-within::before,
.card-teaser-image:hover::before,
.card-teaser-image:focus-within::before { transform: scaleX(1); }

/* Titolo card: colore navy e sottolineatura solo su hover del link */
.card-teaser .card-title a,
.card-teaser-image .card-title a {
  color: #06305f;
  text-decoration: none;
}
.card-teaser .card-title a:hover,
.card-teaser .card-title a:focus-visible,
.card-teaser-image .card-title a:hover,
.card-teaser-image .card-title a:focus-visible { text-decoration: underline; }

/* Icona dei servizi online: pastiglia morbida che si anima all'hover */
.card-servizio .card-body > .icon:first-child {
  background: #eef3fa;
  border-radius: .55rem;
  padding: 8px;
  box-sizing: content-box;
  transition: background-color .18s ease, transform .18s ease;
}
.card-servizio:hover .card-body > .icon:first-child {
  background: #dce7f6;
  transform: translateY(-2px);
}

/* Badge categoria delle notizie: pastiglia navy tenue, contrasto AA */
.news-badge {
  display: inline-block;
  background: #eef3fa;
  color: #06305f;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .18rem .55rem;
  border-radius: 1rem;
}
.card-news .category-top { margin-bottom: .35rem; }

/* --- Badge Bootstrap Italia: leggera rifinitura (angoli morbidi) --- */
.badge { letter-spacing: .01em; border-radius: .35rem; }

/* --- Bottoni: micro-interazione sobria (nessun cambio di colore/contrasto) --- */
.btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(6, 48, 95, .28); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* --- Focus visibile uniforme e curato su tutti gli elementi interattivi --- */
main a:focus-visible,
.btn:focus-visible,
.card-teaser a:focus-visible,
.card-teaser-image a:focus-visible,
.section-link:focus-visible {
  outline: 3px solid #06305f;
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Scroll-reveal (progressive enhancement) ---
   Il contenuto è visibile di default: la classe .is-reveal viene aggiunta da JS
   SOLO se l'IntersectionObserver è supportato e prefers-reduced-motion NON è
   attivo. Senza JS, tutto resta visibile e nella posizione finale. */
html.js-reveal [data-reveal].is-reveal {
  opacity: 0;
  transform: translateY(18px);
}
html.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* --- Contrasto elevato: neutralizza accenti tenui su fondo chiaro --- */
html.a11y-contrast .section-title { color: #06305f; }
html.a11y-contrast .card-teaser,
html.a11y-contrast .card-teaser-image { border-color: #000 !important; }
html.a11y-contrast .card-teaser .card-title a,
html.a11y-contrast .card-teaser-image .card-title a,
html.a11y-contrast .section-link,
html.a11y-contrast .news-badge { color: #06305f; }
html.a11y-contrast .home-intro-lead { color: #000; }

/* ==========================================================================
   Riduzione del movimento — annulla TUTTE le animazioni/transizioni aggiunte.
   Vale sia per la preferenza di sistema sia per il pannello accessibilità
   (html.a11y-motion). Il contenuto resta sempre visibile e leggibile.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal].is-reveal,
  html.js-reveal [data-reveal].is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; }
}
html.a11y-motion [data-reveal].is-reveal,
html.a11y-motion [data-reveal].is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; }
html.a11y-motion .section-link span,
html.a11y-motion .card-servizio .card-body > .icon:first-child { transition: none !important; transform: none !important; }

/* ==========================================================================
   Pagina "L'Istituto": navigazione approfondimenti, biografie, plessi
   ========================================================================== */
.appro-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 0;
  margin: 1.25rem 0 2.25rem;
  list-style: none;
}
.appro-nav a {
  display: inline-flex;
  align-items: center;
  padding: .45rem .95rem;
  border: 1px solid #cdd8e6;
  border-radius: 2rem;
  color: #06305f;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  background: #f6f9fd;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.appro-nav a:hover, .appro-nav a:focus-visible {
  background: #06305f;
  border-color: #06305f;
  color: #fff;
  transform: translateY(-1px);
}

/* Biografie in stile editoriale con ritratto affiancato */
.bio-portrait {
  margin: 0 auto 1.25rem;
  max-width: 260px;
}
.bio-portrait img {
  width: 100%;
  height: auto;
  border-radius: .75rem;
  box-shadow: 0 8px 26px rgba(6, 48, 95, .18);
  display: block;
}
.bio-portrait figcaption {
  margin-top: .55rem;
  font-size: .82rem;
  font-style: italic;
  color: #5a6b7b;
  text-align: center;
}
@media (min-width: 768px) {
  .bio-portrait { float: right; width: 38%; max-width: 300px; margin: .3rem 0 1rem 1.9rem; }
}
.bio-firma {
  clear: both;
  text-align: right;
  font-style: italic;
  font-weight: 600;
  color: #06305f;
  margin: .4rem 0 0;
}
/* Le intestazioni dei blocchi ripuliscono il float del ritratto precedente */
.it-page-section h2, .it-page-section h3 { clear: both; }

/* Griglia sedi e plessi con foto */
.plessi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 1rem;
}
.plesso-card {
  margin: 0;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(6, 48, 95, .06);
  transition: box-shadow .15s ease, transform .15s ease;
}
.plesso-card:hover, .plesso-card:focus-within {
  box-shadow: 0 12px 28px rgba(6, 48, 95, .15);
  transform: translateY(-3px);
}
.plesso-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.plesso-card figcaption { padding: .95rem 1.15rem 1.15rem; }
.plesso-nome { display: block; font-weight: 700; color: #06305f; }
.plesso-loc { display: block; margin-top: .2rem; font-size: .9rem; color: #5a6b7b; }

/* Contrasto elevato */
html.a11y-contrast .bio-portrait figcaption,
html.a11y-contrast .plesso-loc { color: #333; }
html.a11y-contrast .appro-nav a { border-color: #06305f; color: #06305f; }
html.a11y-contrast .plesso-card { border-color: #000; }

/* Riduzione movimento */
html.a11y-motion .appro-nav a,
html.a11y-motion .plesso-card { transition: none !important; transform: none !important; }

/* ==========================================================================
   Credito nel footer
   ========================================================================== */
.footer-credit-link { color: #fff; text-decoration: underline; }
.footer-credit-link:hover, .footer-credit-link:focus-visible { color: #ffd400; }

/* ==========================================================================
   Elenco documenti scaricabili (shortcode doclist)
   ========================================================================== */
.doc-list { list-style: none; padding: 0; margin: 1rem 0 1.75rem; display: grid; gap: .6rem; }
.doc-item { margin: 0; }
.doc-link {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1.1rem;
  border: 1px solid #e3e8ef;
  border-left: 4px solid #06305f;
  border-radius: .55rem;
  background: #fff;
  color: #1b1b1b;
  text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
a.doc-link:hover, a.doc-link:focus-visible {
  box-shadow: 0 6px 18px rgba(6, 48, 95, .12);
  border-left-color: #0a4a91;
  transform: translateX(2px);
}
.doc-icon { width: 26px; height: 26px; fill: #06305f; flex-shrink: 0; }
.doc-text { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.doc-name { font-weight: 600; color: #06305f; }
.doc-meta { font-size: .82rem; color: #5a6b7b; text-transform: uppercase; letter-spacing: .02em; margin-top: .1rem; }
.doc-dl { width: 22px; height: 22px; fill: #06305f; flex-shrink: 0; margin-left: auto; }
.doc-link.is-disabled { cursor: default; border-left-color: #c3ccd8; background: #f6f8fb; }
.doc-link.is-disabled .doc-icon { fill: #8a97a6; }
.doc-link.is-disabled .doc-name { font-weight: 600; color: #54606c; }
.doc-link.is-external { border-left-color: #0a4a91; }
.doc-link.is-external .doc-meta { text-transform: none; letter-spacing: 0; }

/* Tinta dell'icona per famiglia di formato: rende l'elenco leggibile a colpo
   d'occhio quando gli allegati sono molti ed eterogenei. */
.doc-icon.is-pdf   { fill: #a32219; }
.doc-icon.is-word  { fill: #1a5fb4; }
.doc-icon.is-calc  { fill: #16693a; }
.doc-icon.is-slide { fill: #b35c00; }
.doc-icon.is-img   { fill: #6a3fa0; }
.doc-icon.is-zip   { fill: #6b6154; }

/* Intestazione dei blocchi "Allegati" / "Collegamenti esterni" */
.allegati-titolo {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: #06305f;
  margin-bottom: .25rem;
}
.allegati-titolo-icona { fill: #06305f; flex-shrink: 0; }
.allegati-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .4rem;
  border-radius: 1rem;
  background: #06305f;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
}

/* Documento principale: pulsante in evidenza, con formato e peso sotto */
.allegato-principale-meta {
  margin: .5rem 0 0;
  font-size: .82rem;
  color: #5a6b7b;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ==========================================================================
   Card CTA (es. area BES/DSA → inclusione e modulistica)
   ========================================================================== */
.cta-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; margin: 1.5rem 0; }
.cta-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #e3e8ef;
  border-radius: .75rem;
  background: linear-gradient(135deg, #f6f9fd 0%, #eef3fa 100%);
  text-decoration: none;
  color: #1b1b1b;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cta-card:hover, .cta-card:focus-visible { box-shadow: 0 10px 26px rgba(6, 48, 95, .14); transform: translateY(-3px); }
.cta-card-title { font-weight: 700; color: #06305f; }
.cta-card-text { font-size: .92rem; color: #45515d; }

/* ==========================================================================
   Stato vuoto (sezioni senza contenuti, es. Eventi)
   ========================================================================== */
.empty-state { background: #f6f9fd; border: 1px dashed #cdd8e6; color: #45515d; }
.empty-state .icon-lg { width: 48px; height: 48px; }

/* ==========================================================================
   Tour virtuale a 360° (shortcode tour360) — segnaposto "in arrivo"
   ========================================================================== */
.tour360 { margin: 1.25rem 0 1.75rem; }
.tour360-coming {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  margin: 1.25rem 0 1.75rem;
  padding: 2.25rem 1.5rem;
  border: 2px dashed #b9c6d8;
  border-radius: .85rem;
  background: linear-gradient(135deg, #eef3fa 0%, #e3ecf7 100%);
}
.tour360-icon { width: 46px; height: 46px; fill: #06305f; }
.tour360-badge {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  background: #06305f;
  border-radius: 1rem;
  padding: .15rem .7rem;
}
.tour360-text { margin: 0; color: #45515d; }

/* Contrasto elevato */
html.a11y-contrast .doc-link { border-color: #000; }
html.a11y-contrast .doc-icon, html.a11y-contrast .allegati-titolo-icona { fill: #000; }
html.a11y-contrast .allegati-count { background: #000; color: #fff; }
html.a11y-contrast .allegato-principale-meta { color: #333; }
html.a11y-contrast .doc-meta, html.a11y-contrast .cta-card-text, html.a11y-contrast .tour360-text, html.a11y-contrast .empty-state { color: #333; }
html.a11y-contrast .cta-card, html.a11y-contrast .tour360-coming { border-color: #000; }

/* Riduzione movimento */
html.a11y-motion .doc-link,
html.a11y-motion .cta-card { transition: none !important; transform: none !important; }

/* ==========================================================================
   Home: card novità (notizie/eventi/circolari) + carousel Eventi/Circolari
   ========================================================================== */
/* Anteprima immagine (locandina) sulle card evento */
.card-novita-img {
  height: 160px;
  background-size: cover;
  background-position: center;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}
.card-novita-img.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #06305f 0%, #0a4a91 100%);
}
.card-novita-img.is-placeholder .icon { width: 42px; height: 42px; fill: #fff; opacity: .85; }
/* Variante leggera (notizie): fondo chiaro + icona tenue */
.card-novita-img.is-placeholder.is-placeholder-light { background: linear-gradient(135deg, #f2f6fb 0%, #e7eef8 100%); border-bottom: 1px solid #e3e8ef; }
.card-novita-img.is-placeholder.is-placeholder-light .icon { fill: #9fb2cc; opacity: .9; }
html.a11y-contrast .card-novita-img.is-placeholder.is-placeholder-light .icon { fill: #5a6b7b; }
/* Anteprima "documento PDF" per le circolari: stessa altezza delle card evento */
.card-novita-img.is-doc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(#fff, #fff 10px, #f3f6fa 10px, #f3f6fa 11px),
    linear-gradient(135deg, #eef3fa 0%, #e3ecf7 100%);
  border-bottom: 1px solid #e3e8ef;
}
.card-novita-img.is-doc .icon { width: 40px; height: 40px; fill: #06305f; opacity: .9; }
/* Miniatura reale della prima pagina del PDF (generata con Ghostscript) */
.card-novita-img.is-doc-thumb {
  position: relative;
  background-size: cover;
  background-position: center top;
  background-color: #f3f6fa;
  border-bottom: 1px solid #e3e8ef;
}
.card-novita-img.is-doc-thumb::after {
  content: "PDF";
  position: absolute;
  top: .55rem;
  right: .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  background: #c0392b;
  border-radius: .3rem;
  padding: .1rem .45rem;
}
.doc-preview-badge {
  position: absolute;
  top: .55rem;
  right: .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  background: #c0392b;
  border-radius: .3rem;
  padding: .1rem .45rem;
}
.card-novita .card-text { color: #45515d; }

/* Riga finale della card: data + quanti documenti si trovano dentro */
.card-meta-riga { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; }
.card-allegati {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  font-size: .78rem;
  font-weight: 600;
  color: #06305f;
  background: #eef3fa;
  border-radius: 1rem;
  padding: .1rem .55rem .1rem .4rem;
}
.card-allegati-icona { width: 15px; height: 15px; fill: #06305f; }
html.a11y-contrast .card-allegati { background: #fff; border: 1px solid #000; color: #000; }
html.a11y-contrast .card-allegati-icona { fill: #000; }

/* Carousel: senza JS tutte le slide sono impilate e visibili (progressive enhancement) */
.home-carousel { position: relative; }
.home-carousel:focus-visible { outline: 3px solid #06305f; outline-offset: 4px; border-radius: .5rem; }
.home-carousel-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.home-carousel-slide { margin: 0; }
/* Con JS: una slide alla volta + controlli visibili */
.home-carousel.is-enhanced .home-carousel-track { display: block; gap: 0; }
.home-carousel.is-enhanced .home-carousel-slide { display: none; }
.home-carousel.is-enhanced .home-carousel-slide.is-active { display: block; animation: home-carousel-fade .35s ease; }
@keyframes home-carousel-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.home-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.home-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #cdd8e6;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.home-carousel-btn .icon { width: 22px; height: 22px; fill: #06305f; }
.home-carousel-btn:hover, .home-carousel-btn:focus-visible { background: #06305f; border-color: #06305f; }
.home-carousel-btn:hover .icon, .home-carousel-btn:focus-visible .icon { fill: #fff; }
.home-carousel-dots { display: flex; align-items: center; gap: .4rem; }
.home-carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cdd8e6;
  cursor: pointer;
  transition: background .15s ease, width .15s ease;
}
.home-carousel-dot.is-active { background: #06305f; width: 24px; border-radius: 5px; }

html.a11y-contrast .card-novita .card-text { color: #333; }
html.a11y-contrast .home-carousel-btn { border-color: #000; }
html.a11y-contrast .home-carousel-dot { background: #6b7785; }
html.a11y-motion .home-carousel.is-enhanced .home-carousel-slide.is-active { animation: none !important; }
html.a11y-motion .home-carousel-btn, html.a11y-motion .home-carousel-dot { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .home-carousel.is-enhanced .home-carousel-slide.is-active { animation: none !important; }
}

/* ==========================================================================
   Fotolibro sfogliabile (shortcode fotolibro)
   ========================================================================== */
.fotolibro { margin: 2rem 0; }
.fotolibro:focus-visible { outline: 3px solid #06305f; outline-offset: 6px; border-radius: .5rem; }
/* Senza JS: pagine impilate e visibili */
.fotolibro-stage { display: flex; flex-direction: column; gap: 1.25rem; }
.fotolibro-page { margin: 0; }
.fotolibro-page img {
  display: block; width: auto; max-width: 100%;
  height: clamp(320px, 55vh, 500px); object-fit: contain; margin-inline: auto;
  border-radius: .5rem; box-shadow: 0 8px 28px rgba(6, 48, 95, .20);
}

/* Con JS: una pagina alla volta, effetto libro */
.fotolibro.is-enhanced .fotolibro-book {
  /* La cornice navy aderisce alle pagine verticali della brochure (ratio ~0.7):
     larghezza legata all'immagine → niente spazio vuoto sui lati. */
  width: fit-content; max-width: min(340px, 100%); margin-inline: auto;
  perspective: 2200px;
  background: linear-gradient(135deg, #0a2f5c 0%, #06305f 100%);
  padding: clamp(.5rem, 1.6vw, 1rem);
  border-radius: .7rem;
  box-shadow: 0 14px 40px rgba(6, 48, 95, .28);
}
.fotolibro.is-enhanced .fotolibro-stage { display: block; position: relative; }
.fotolibro.is-enhanced .fotolibro-page { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.fotolibro.is-enhanced .fotolibro-page.is-active { position: relative; opacity: 1; visibility: visible; }
/* In modalità sfogliabile l'immagine riempie la larghezza del libro e l'altezza
   segue il rapporto d'aspetto: la cornice avvolge la pagina senza bande vuote. */
.fotolibro.is-enhanced .fotolibro-page img {
  width: 100%; height: auto; max-height: 72vh; object-fit: contain;
  border-radius: .35rem; box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
@keyframes fotolibro-fwd {
  from { transform: rotateY(-32deg) translateZ(0); transform-origin: left center; opacity: .25; }
  to   { transform: none; opacity: 1; }
}
@keyframes fotolibro-back {
  from { transform: rotateY(32deg) translateZ(0); transform-origin: right center; opacity: .25; }
  to   { transform: none; opacity: 1; }
}
.fotolibro.is-enhanced .fotolibro-page.flip-fwd  { animation: fotolibro-fwd .55s cubic-bezier(.2,.7,.3,1); }
.fotolibro.is-enhanced .fotolibro-page.flip-back { animation: fotolibro-back .55s cubic-bezier(.2,.7,.3,1); }

.fotolibro-controls { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1rem; }
.fotolibro-counter { margin: 0; min-width: 4rem; text-align: center; font-weight: 700; color: #06305f; }
.fotolibro-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid #cdd8e6; border-radius: 50%;
  background: #fff; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.fotolibro-btn .icon { width: 24px; height: 24px; fill: #06305f; }
.fotolibro-btn:hover, .fotolibro-btn:focus-visible { background: #06305f; border-color: #06305f; }
.fotolibro-btn:hover .icon, .fotolibro-btn:focus-visible .icon { fill: #fff; }

.fotolibro-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.fotolibro-thumb {
  width: 72px; padding: 0; border: 2px solid transparent; border-radius: .4rem;
  background: none; cursor: pointer; overflow: hidden; line-height: 0;
  transition: border-color .15s ease, transform .15s ease;
}
.fotolibro-thumb img { width: 100%; height: auto; }
.fotolibro-thumb:hover, .fotolibro-thumb:focus-visible { border-color: #9bb4d4; transform: translateY(-2px); }
.fotolibro-thumb.is-active { border-color: #06305f; }

html.a11y-contrast .fotolibro-btn { border-color: #000; }
html.a11y-contrast .fotolibro-thumb.is-active { border-color: #000; }
html.a11y-motion .fotolibro.is-enhanced .fotolibro-page.flip-fwd,
html.a11y-motion .fotolibro.is-enhanced .fotolibro-page.flip-back,
html.a11y-motion .fotolibro-thumb { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fotolibro.is-enhanced .fotolibro-page.flip-fwd,
  .fotolibro.is-enhanced .fotolibro-page.flip-back { animation: none !important; }
}

/* ==========================================================================
   Avviso "contenuto in bozza" + griglia "I numeri della scuola"
   ========================================================================== */
.avviso-bozza {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: #fff8e6;
  border: 1px solid #f0d98a;
  border-left: 4px solid #e0a800;
  border-radius: .5rem;
  padding: .9rem 1.1rem;
  margin: 0 0 1.5rem;
  color: #5a4a1a;
}
.avviso-bozza-icon { width: 24px; height: 24px; fill: #b8860b; flex-shrink: 0; margin-top: .1rem; }
html.a11y-contrast .avviso-bozza { background: #fff; border-color: #000; color: #000; }
html.a11y-contrast .avviso-bozza-icon { fill: #000; }

.numeri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.numero-card { background: linear-gradient(135deg, #f6f9fd 0%, #eef3fa 100%); border: 1px solid #e3e8ef; border-radius: .75rem; padding: 1.3rem 1rem; text-align: center; }
.numero-valore { display: block; font-size: 2.4rem; font-weight: 700; color: #06305f; line-height: 1; }
.numero-label { display: block; margin-top: .4rem; font-size: .9rem; color: #45515d; }
html.a11y-contrast .numero-card { border-color: #000; }
html.a11y-contrast .numero-label { color: #333; }

/* ==========================================================================
   Libri di testo (shortcode libritesto) — griglia di chip scaricabili
   ========================================================================== */
.libritesto { margin: 1.75rem 0 2.25rem; }
.libritesto-title { color: #06305f; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid #e3e8ef; }
.libritesto-sede { display: inline-block; margin-left: .5rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: #06305f; border-radius: 1rem; padding: .12rem .7rem; vertical-align: middle; }
.libritesto-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .7rem; }
.libritesto-grid > li { margin: 0; }
.libritesto-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  height: 100%; min-height: 84px; padding: .85rem .6rem;
  border: 1px solid #e3e8ef; border-radius: .6rem; background: #fff; color: #06305f;
  text-decoration: none; font-weight: 700; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.libritesto-icon { width: 30px; height: 30px; fill: #06305f; transition: fill .15s ease; }
.libritesto-classe { font-size: 1.02rem; line-height: 1.1; }
a.libritesto-chip:hover, a.libritesto-chip:focus-visible {
  transform: translateY(-3px); box-shadow: 0 10px 24px rgba(6, 48, 95, .16);
  border-color: #0a4a91; background: #06305f; color: #fff;
}
a.libritesto-chip:hover .libritesto-icon, a.libritesto-chip:focus-visible .libritesto-icon { fill: #fff; }
.libritesto-chip.is-disabled { cursor: default; background: #f6f8fb; border-style: dashed; border-color: #cdd6e2; color: #6b7684; box-shadow: none; }
.libritesto-chip.is-disabled .libritesto-icon { fill: #9aa6b4; }
.libritesto-nd { font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
html.a11y-contrast .libritesto-chip { border-color: #000; }
html.a11y-contrast a.libritesto-chip:hover, html.a11y-contrast a.libritesto-chip:focus-visible { background: #000; color: #fff; }
html.a11y-contrast a.libritesto-chip:hover .libritesto-icon { fill: #fff; }
html.a11y-motion .libritesto-chip { transition: none !important; }

/* ==========================================================================
   CTA Questionario di gradimento (home)
   ========================================================================== */
.feedback-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  background: linear-gradient(135deg, #06305f 0%, #0a4a91 100%);
  border-radius: .9rem; padding: 1.6rem 1.9rem;
  box-shadow: 0 12px 30px rgba(6, 48, 95, .18);
}
.feedback-cta-text { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.feedback-cta-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.feedback-cta-icon .icon { width: 28px; height: 28px; }
.feedback-cta-title { margin: 0; color: #fff; font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.feedback-cta-sub { margin: .15rem 0 0; color: rgba(255, 255, 255, .9); font-size: 1rem; }
.feedback-cta-btn { flex-shrink: 0; background: #c9a84c; border-color: #c9a84c; color: #06305f; font-weight: 700; }
.feedback-cta-btn:hover, .feedback-cta-btn:focus-visible { background: #d8bb63; border-color: #d8bb63; color: #06305f; }
@media (max-width: 575.98px) {
  .feedback-cta { padding: 1.3rem 1.3rem; }
  .feedback-cta-btn { width: 100%; text-align: center; }
}
html.a11y-contrast .feedback-cta { background: #000; border: 2px solid #fff; }
html.a11y-contrast .feedback-cta-btn { background: #fff; border-color: #fff; color: #000; }

/* Immagini inserite nel testo delle pagine (locandine, foto): mai più larghe della colonna,
   e le locandine verticali non più alte di circa uno schermo */
.it-page-section img { max-width: 100%; height: auto; max-height: 80vh; width: auto; display: block; margin: 1.5rem auto; border-radius: .5rem; box-shadow: 0 4px 16px rgba(0,0,0,.12); }

/* ==========================================================================
   Home: carosello delle sedi (foto a rotazione con dissolvenza + zoom lento).
   Senza JS: striscia scorrevole orizzontale (scroll-snap) con tutte le foto.
   Con JS (.is-enhanced): slide sovrapposte, dissolvenza incrociata, effetto
   "Ken Burns", didascalia animata e barre di avanzamento cliccabili.
   Il tempo di ogni foto è guidato dall'animazione .sedi-seg-fill (vedi
   static/js/sedi-carousel.js): in pausa si ferma tutto, anche lo zoom.
   ========================================================================== */
.sedi-carousel {
  --sedi-interval: 6s;
  --sedi-fade: 1.1s;
  position: relative;
  border-radius: .9rem;
  overflow: hidden;
  background: #06305f;
  box-shadow: 0 18px 40px -12px rgba(6, 48, 95, .35), 0 4px 12px rgba(6, 48, 95, .12);
  isolation: isolate;
}
.sedi-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  pointer-events: none;
  z-index: 4;
}
.sedi-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sedi-carousel-track::-webkit-scrollbar { display: none; }
.sedi-slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  overflow: hidden;
}
@media (min-width: 400px) { .sedi-slide { aspect-ratio: 5 / 4; } }
@media (min-width: 576px) { .sedi-slide { aspect-ratio: 3 / 2; } }
.sedi-slide picture { display: block; height: 100%; }
/* Velo in alto: barre e pulsante restano leggibili anche sul cielo chiaro */
.sedi-slide::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 32%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3, 20, 41, .5) 0%, rgba(3, 20, 41, 0) 100%);
  pointer-events: none;
}
.sedi-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Didascalia sopra la foto (testo bianco su sfumatura scura: contrasto AA) --- */
.sedi-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 3.5rem 1.25rem 1.1rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(3, 20, 41, 0) 0%, rgba(3, 20, 41, .62) 42%, rgba(3, 20, 41, .9) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.sedi-caption p { margin: 0; }
.sedi-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  margin-bottom: .45rem !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-shadow: none;
}
.sedi-title {
  font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.sedi-addr {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem !important;
  font-size: .9rem;
  color: rgba(255, 255, 255, .92);
}
.sedi-addr .icon { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* --- Controlli (compaiono solo con JS) --- */
.sedi-carousel-ui[hidden] { display: none !important; }
.sedi-btn {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(6, 48, 95, .55);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color .2s ease, opacity .25s ease, transform .2s ease;
}
.sedi-btn .icon { width: 24px; height: 24px; fill: currentColor; }
.sedi-ico { width: 20px; height: 20px; fill: currentColor; }
.sedi-btn:hover { background: rgba(6, 48, 95, .9); }
.sedi-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #06305f; }
.sedi-toggle { top: .85rem; right: .85rem; }
.sedi-carousel.is-reduced .sedi-segs { right: 1.25rem; }
.sedi-toggle[hidden] { display: none; }
.sedi-ico-play { display: none; }
.sedi-carousel.is-stopped .sedi-ico-play { display: block; }
.sedi-carousel.is-stopped .sedi-ico-pause { display: none; }
.sedi-nav { top: 50%; margin-top: -42px; }
.sedi-prev { left: .85rem; }
.sedi-next { right: .85rem; }
/* Con il mouse le frecce emergono al passaggio; sempre visibili su touch e
   quando un controllo ha il focus. */
@media (hover: hover) and (pointer: fine) {
  .sedi-nav { opacity: 0; transform: scale(.85); }
  .sedi-carousel:hover .sedi-nav,
  .sedi-carousel:focus-within .sedi-nav { opacity: 1; transform: none; }
}

/* Barre di avanzamento stile "storie": una per foto, cliccabili (area 44px) */
.sedi-segs {
  position: absolute;
  z-index: 5;
  left: 1.25rem;
  right: 4.25rem;
  top: .85rem;
  display: flex;
  gap: .4rem;
}
.sedi-seg {
  flex: 1 1 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.sedi-seg:focus-visible { outline: 3px solid #fff; outline-offset: -8px; border-radius: 8px; }
.sedi-seg-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .38);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: height .2s ease;
}
.sedi-seg:hover .sedi-seg-bar { height: 6px; }
.sedi-seg-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
.sedi-seg.is-done .sedi-seg-fill { transform: scaleX(1); }
.sedi-seg.is-active .sedi-seg-fill { animation: sedi-progress var(--sedi-interval) linear forwards; }
.sedi-carousel.is-stopped .sedi-seg.is-active .sedi-seg-fill { animation: none; transform: scaleX(1); }
@keyframes sedi-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Modalità migliorata (JS): slide sovrapposte con dissolvenza --- */
.sedi-carousel.is-enhanced .sedi-carousel-track {
  display: grid;
  overflow: hidden;
  touch-action: pan-y;
}
.sedi-carousel.is-enhanced .sedi-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sedi-fade) ease, visibility 0s linear var(--sedi-fade);
}
.sedi-carousel.is-enhanced .sedi-slide.is-active,
.sedi-carousel.is-enhanced .sedi-slide.is-leaving { visibility: visible; transition: opacity var(--sedi-fade) ease, visibility 0s; }
.sedi-carousel.is-enhanced .sedi-slide.is-active { opacity: 1; z-index: 1; }

/* Zoom lento ("Ken Burns"), con punto di fuga diverso per ogni foto */
.sedi-carousel.is-enhanced .sedi-slide.is-active .sedi-img,
.sedi-carousel.is-enhanced .sedi-slide.is-leaving .sedi-img {
  animation: sedi-kenburns calc(var(--sedi-interval) + var(--sedi-fade) * 2) ease-out both;
}
.sedi-carousel.is-enhanced .sedi-slide:nth-child(3n+1) .sedi-img { transform-origin: 30% 40%; }
.sedi-carousel.is-enhanced .sedi-slide:nth-child(3n+2) .sedi-img { transform-origin: 70% 35%; }
.sedi-carousel.is-enhanced .sedi-slide:nth-child(3n+3) .sedi-img { transform-origin: 50% 60%; }
.sedi-carousel.is-enhanced .sedi-slide.is-leaving .sedi-img { animation-play-state: paused; }
@keyframes sedi-kenburns { from { transform: scale(1.001); } to { transform: scale(1.09); } }

/* Didascalia: entrata a cascata della slide attiva */
.sedi-carousel.is-enhanced .sedi-slide .sedi-caption > * { opacity: 0; transform: translateY(14px); }
.sedi-carousel.is-enhanced .sedi-slide.is-active .sedi-caption > * {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.sedi-carousel.is-enhanced .sedi-slide.is-active .sedi-caption > :nth-child(1) { transition-delay: .35s; }
.sedi-carousel.is-enhanced .sedi-slide.is-active .sedi-caption > :nth-child(2) { transition-delay: .5s; }
.sedi-carousel.is-enhanced .sedi-slide.is-active .sedi-caption > :nth-child(3) { transition-delay: .65s; }

.sedi-carousel.is-enhanced .sedi-slide.is-leaving .sedi-caption > * { opacity: 1; transform: none; }

/* Pausa (mouse sopra, focus da tastiera, scheda nascosta, fuori schermo) */
.sedi-carousel.is-paused .sedi-seg-fill,
.sedi-carousel.is-paused .sedi-img { animation-play-state: paused !important; }

@media (max-width: 575.98px) {
  .sedi-caption { padding: 3rem 1rem .9rem; }
  .sedi-addr { font-size: .82rem; }
  .sedi-segs { left: 1rem; right: 3.9rem; top: .6rem; }
  .sedi-toggle { top: .6rem; right: .6rem; }
  .sedi-prev { left: .6rem; }
  .sedi-next { right: .6rem; }
  .sedi-btn { width: 40px; height: 40px; }
  .sedi-nav { margin-top: -50px; }
}

/* Contrasto elevato: didascalia su fondo pieno, controlli opachi */
html.a11y-contrast .sedi-caption { background: rgba(0, 0, 0, .88); padding-top: 1rem; }
html.a11y-contrast .sedi-btn { background: #000; border-color: #fff; }
html.a11y-contrast .sedi-seg-bar { background: rgba(255, 255, 255, .6); }

/* Riduzione del movimento: niente zoom né cascate, cambio quasi istantaneo
   (la rotazione automatica è già disattivata dallo script). */
@media (prefers-reduced-motion: reduce) {
  .sedi-carousel { --sedi-fade: .01s; }
  .sedi-carousel .sedi-img { animation: none !important; transform: none !important; }
  .sedi-carousel .sedi-caption > * { transition: none !important; opacity: 1 !important; transform: none !important; }
  .sedi-carousel .sedi-btn, .sedi-carousel .sedi-seg-bar { transition: none !important; }
}
html.a11y-motion .sedi-carousel { --sedi-fade: .01s; }
html.a11y-motion .sedi-carousel .sedi-img { animation: none !important; transform: none !important; }
html.a11y-motion .sedi-carousel .sedi-caption > * { transition: none !important; opacity: 1 !important; transform: none !important; }
html.a11y-motion .sedi-carousel .sedi-btn,
html.a11y-motion .sedi-carousel .sedi-seg-bar { transition: none !important; }