/* Design tokens */
:root{
  --ibsa-accent:#8996ae; --ibsa-ink:#1a2624; --ibsa-slate:#384554;
  --ibsa-slate-2:#4c5867; --ibsa-grey:#5b6664; --ibsa-teal:#58abb7;
  --ibsa-bg:#ffffff; --ibsa-bg-alt:#eef0f3; --ibsa-banner:#8f9bb3;
  --ibsa-container:1280px; --ibsa-gutter:80px; --ibsa-card-gap:25px;
  --ibsa-ico-dl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' fill='none'%3E%3Cpath d='M7 1V9M11 5L7 9L3 5M1 15H13' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Bottone base (Figma: #8996ae, testo bianco, Roboto Condensed Regular, rounded 5, bordo bianco 1.5) */
.patologia-btn-fill{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ibsa-accent);color:#fff;text-decoration:none;font-family:'Roboto Condensed',sans-serif;font-weight:400;font-size:14px;letter-spacing:.02em;border:1.5px solid #fff;border-radius:5px;padding:9px 20px;transition:background .2s}
.patologia-btn-fill:hover{background:#7a879f;color:#fff}
.patologia-ico-dl{width:14px;height:16px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ibsa-ico-dl) center/contain no-repeat;mask:var(--ibsa-ico-dl) center/contain no-repeat}

/* @font-face self-hosted (file aggiunti in Task 12) */
@font-face{font-family:'Roboto Condensed';src:url('../fonts/roboto-condensed-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto Condensed';src:url('../fonts/roboto-condensed-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Source Sans Pro';src:url('../fonts/source-sans-pro-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Sans Pro';src:url('../fonts/source-sans-pro-700.woff2') format('woff2');font-weight:700;font-display:swap}

.patologia{font-family:'Roboto Condensed',Arial,sans-serif;color:var(--ibsa-slate);background:var(--ibsa-bg)}
.patologia *{box-sizing:border-box}
.patologia-container{max-width:calc(var(--ibsa-container) + var(--ibsa-gutter) * 2);margin:0 auto;padding:0 var(--ibsa-gutter)}
.patologia h1,.patologia h2,.patologia h3,.patologia .patologia-kicker{font-family:'Roboto Condensed',Arial,sans-serif}
.patologia-kicker{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ibsa-accent);font-weight:700}

/* Hero */
.patologia-hero{position:relative;padding:52px 0 16px;background:var(--ibsa-bg)}
.patologia-hero__inner{display:flex;justify-content:space-between;gap:40px;min-height:380px}
/* Senza immagine, l'altezza minima pensata per lei lascerebbe una fascia
   bianca vuota sotto al titolo (o fra titolo e testo, se c'e' solo quello). */
.patologia-hero--compact .patologia-hero__inner{min-height:0}
.patologia-hero--compact.patologia-hero{padding-bottom:16px}
.patologia-hero__main{max-width:720px}
.patologia-breadcrumb{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ibsa-grey);font-family:'Roboto Condensed',sans-serif}
.patologia-breadcrumb i{font-style:normal;color:var(--ibsa-grey)}
.patologia-breadcrumb .is-current{color:var(--ibsa-accent);font-weight:700}
.patologia-tags{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ibsa-accent);font-family:'Roboto Condensed',sans-serif}
.patologia-tags__bar{width:4px;height:24px;background:var(--ibsa-accent);display:inline-block}
.patologia-tags i{font-style:normal;color:var(--ibsa-accent)}
.patologia-hero__title{font-size:48px;line-height:1.1;margin:24px 0 0;color:var(--ibsa-slate);font-weight:400}
.patologia-hero__desc{max-width:601px;margin:24px 0 0;font-size:19px;line-height:1.35;color:var(--ibsa-slate)}
.patologia-hero__meta{display:flex;gap:56px;margin:40px 0 0;padding-top:20px;border-top:1px solid #e2e5ea}
.patologia-hero__meta dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ibsa-accent);font-family:'Roboto Condensed',sans-serif}
.patologia-hero__meta dd{margin:8px 0 0;font-size:14px;color:var(--ibsa-slate)}
.patologia-hero__meta dd span{display:block}
/* Larghezza libera (flex:0 0 auto), solo l'altezza resta fissa: il box si
   allarga o si stringe quanto serve a mostrare l'immagine intera alla sua
   proporzione naturale, senza ritagliarla ne' deformarla. Prima il box era
   fisso a 380x380 con overflow:hidden: qualsiasi regola sull'<img> dentro
   restava comunque ritagliata a quella finestra quadrata. */
.patologia-hero__figure{flex:0 0 auto;height:380px;margin:0;border-radius:2px;overflow:hidden}
.patologia-hero__figure img{width:auto;height:100%;display:block}

/* Responsive base */
@media (max-width:1023px){
  :root{--ibsa-gutter:24px}
  .patologia-hero__inner{flex-direction:column}
  .patologia-hero__figure{order:-1;width:100%;height:auto;max-width:380px}
  .patologia-hero__figure img{width:100%;height:auto}
  .patologia-hero__title{font-size:36px}
}

/* Anchor nav */
.patologia-anchor{background:var(--ibsa-bg);border-top:1px solid #e2e5ea;border-bottom:1px solid #e2e5ea;z-index:50}
.patologia-anchor.is-stuck{position:sticky;top:0;box-shadow:0 2px 10px rgba(26,38,36,.06)}
.patologia-anchor__inner{display:flex;align-items:center;justify-content:space-between;min-height:74px;padding-top:14px;padding-bottom:14px}
.patologia-anchor__list{display:flex;flex:1;justify-content:center;gap:40px;margin:0;padding:0;list-style:none}
/* Icona sopra, numero+titolo sotto: la barra non e' piu' una striscia sottile
   ma una colonna per voce, per lasciare spazio all'icona senza affollare. */
.patologia-anchor__list a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;font-family:'Roboto Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.05em;color:var(--ibsa-slate);text-align:center;padding-bottom:10px;border-bottom:3px solid transparent}
.patologia-anchor__list a.is-active{color:var(--ibsa-ink);border-bottom-color:var(--ibsa-accent)}
.patologia-anchor__icon{width:130px;height:130px;object-fit:contain}
.patologia-anchor__row{display:flex;gap:8px;align-items:baseline}
.patologia-anchor__n{color:var(--ibsa-accent)}
.patologia-anchor__aside{display:flex;align-items:center;gap:24px;font-family:'Roboto Condensed',sans-serif;font-size:14px;letter-spacing:.05em}
.patologia-anchor__indicator{color:var(--ibsa-grey)}
.patologia-anchor__download{display:inline-flex;align-items:center;gap:8px;background:var(--ibsa-accent);color:#fff;text-decoration:none;font-weight:400;font-size:14px;padding:6px 22px;border-radius:5px}
.patologia-anchor__download::before{content:"";width:11px;height:13px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ibsa-ico-dl) center/contain no-repeat;mask:var(--ibsa-ico-dl) center/contain no-repeat}
@media (max-width:1023px){
  .patologia-anchor__inner{height:auto;padding:12px 0;gap:12px;flex-wrap:wrap}
  .patologia-anchor__list{justify-content:flex-start;overflow-x:auto;gap:24px}
  .patologia-anchor__aside{display:none}
}

/* Section shared */
.patologia-section{padding:64px 0}
.patologia-section__lead{max-width:1040px;margin:34px 0 0;padding-left:20px;border-left:4px solid var(--ibsa-accent);font-family:'Roboto Condensed',sans-serif;font-size:36px;line-height:1.15;font-weight:700;color:var(--ibsa-slate)}
.patologia-section__sublead{margin:24px 0 0;font-size:19px;color:var(--ibsa-slate)}

/* Video generico */
.patologia-video{position:relative;background:#0d1620;border-radius:2px;overflow:hidden}
.patologia-video--embed{aspect-ratio:16/9}
.patologia-video--embed iframe,.patologia-video--mp4 video{position:absolute;inset:0;width:100%;height:100%;border:0}
.patologia-video--mp4{aspect-ratio:16/9}
.patologia-video--poster{aspect-ratio:620/348;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.patologia-video--image{display:block;aspect-ratio:16/9;background-size:cover;background-position:center;background-repeat:no-repeat}
.patologia-video__play{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.9);position:relative}
.patologia-video__play:before{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent var(--ibsa-ink)}

/* Section 01 grid */
.patologia-s01__grid{display:grid;grid-template-columns:520px 1fr;gap:140px;margin-top:65px}
.patologia-s01__body{font-size:19px;line-height:1.5;color:var(--ibsa-slate)}
/* La colonna sinistra viene stirata dalla grid all'altezza del video (il piu'
   alto dei due): qui la mettiamo in colonna cosi' l'elenco pillole, con
   margin-top:auto, scende ad allinearsi con la base del video invece di
   restare appiccicato al testo con un vuoto sotto. */
.patologia-s01__left{display:flex;flex-direction:column;gap:40px}
.patologia-numlist{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid #e2e5ea}
.patologia-numlist li{display:flex;gap:18px;align-items:baseline;padding:9px 0;font-size:14px;color:var(--ibsa-slate)}
.patologia-numlist__n{color:var(--ibsa-accent);font-family:'Roboto Condensed',sans-serif;font-weight:700}
.patologia-videopill{display:flex;align-items:center;gap:20px;margin-top:20px}
.patologia-videopill__bar{width:0;border-left:3px solid #d3d8df;align-self:stretch}
.patologia-videopill__label{font-family:'Roboto Condensed',sans-serif;font-size:12px;letter-spacing:.08em;color:var(--ibsa-accent);text-transform:uppercase}
.patologia-videopill__title{font-size:15px;color:var(--ibsa-ink);margin-top:6px}
.patologia-videopill__meta{font-size:13px;color:var(--ibsa-grey);margin-top:6px}
.patologia-videopill__watch{margin-left:auto;display:inline-flex;align-items:center;background:var(--ibsa-accent);color:#fff;text-decoration:none;font-family:'Roboto Condensed',sans-serif;font-weight:400;font-size:14px;white-space:nowrap;border:1.5px solid #fff;border-radius:5px;padding:7px 20px}
.patologia-videopill__watch:hover{background:#7a879f;color:#fff}
@media (max-width:1023px){ .patologia-s01__grid{grid-template-columns:1fr;gap:40px} .patologia-section__lead{font-size:26px} }

/* Section 02 */
.patologia-section--pathology{background:var(--ibsa-bg)}
.patologia-s02__body{max-width:1059px;margin:24px 0 0;font-size:19px;line-height:1.5;color:var(--ibsa-slate)}
.patologia-pathology__panels{margin-top:48px;display:flex;align-items:flex-start;gap:var(--ibsa-card-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;transition:height .22s ease}
.patologia-pathology__panels::-webkit-scrollbar{display:none}
.patologia-ppanel{display:grid;flex:0 0 100%;align-self:flex-start;scroll-snap-align:start;grid-template-columns:320px 1fr;gap:60px;background:var(--ibsa-bg-alt);border-radius:2px;padding:40px;position:relative}
.patologia-ppanel__bar{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ibsa-accent)}
.patologia-ppanel__figure{margin:0;width:320px}
.patologia-ppanel__figure img{width:100%;height:auto;display:block}
.patologia-ppanel__title{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:36px;color:var(--ibsa-slate);margin:8px 0 0;padding-left:20px;border-left:4px solid var(--ibsa-accent)}
.patologia-ppanel__body{max-width:616px;margin:24px 0 0;font-size:19px;line-height:1.5;color:var(--ibsa-slate)}
.patologia-treatment{margin-top:24px;padding:20px 24px;border:1px solid #dfe3e9;border-left:6px solid var(--ibsa-accent);background:var(--ibsa-bg)}
.patologia-treatment__text{font-size:14px;color:var(--ibsa-slate);margin-top:8px}
.patologia-treatment__ref{font-size:13px;color:var(--ibsa-grey);margin-top:6px}
.patologia-ppanel__downloads{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}
.patologia-dl{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ibsa-accent);color:#fff;text-decoration:none;font-family:'Roboto Condensed',sans-serif;font-weight:400;font-size:14px;letter-spacing:.02em;border:1.5px solid #fff;padding:9px 20px;border-radius:5px;cursor:pointer;transition:background .2s}
.patologia-dl:hover{background:#7a879f;color:#fff}
.patologia-dl__ico{width:14px;height:16px;flex:0 0 auto;background:#fff;-webkit-mask:var(--ibsa-ico-dl) center/contain no-repeat;mask:var(--ibsa-ico-dl) center/contain no-repeat}
.patologia-dl--video{background:var(--ibsa-accent);color:#fff}
@media (max-width:1023px){ .patologia-ppanel{grid-template-columns:1fr;gap:24px;padding:24px} .patologia-ppanel__figure{width:100%} }

/* Section 03 */
.patologia-inj-wrap{position:relative;margin-top:48px}
.patologia-inj-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--ibsa-card-gap) * 2) / 3);gap:var(--ibsa-card-gap);overflow-x:hidden}
.patologia-inj{background:var(--ibsa-bg);border-radius:2px;overflow:hidden;box-shadow:0 1px 0 rgba(26,38,36,.06);display:flex;flex-direction:column}
.patologia-inj__media{position:relative}
.patologia-inj__img{display:block;height:240px;background-size:cover;background-position:center}
.patologia-inj__body{padding:24px 20px}
.patologia-inj__title{font-family:'Roboto Condensed',sans-serif;font-size:19px;color:var(--ibsa-ink);margin:6px 0 0;padding-left:20px;border-left:4px solid var(--ibsa-accent)}
.patologia-inj__text{font-size:14px;color:var(--ibsa-slate-2);margin:16px 0 20px}
.patologia-arrow{position:absolute;top:120px;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid #d3d8df;background:var(--ibsa-bg);color:var(--ibsa-slate);font-size:22px;line-height:1;cursor:pointer}
.patologia-arrow--prev{left:-22px}
.patologia-arrow--next{right:-22px}
@media (max-width:1023px){
  .patologia-inj-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory}
  .patologia-inj{scroll-snap-align:start}
  /* Solo le frecce degli approcci: il selettore nudo spegneva anche quelle
     della hero, che a schermo stretto invece devono esserci. */
  .patologia-inj-wrap>.patologia-arrow{display:none}
}

/* Section 04 */
.patologia-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ibsa-card-gap);margin-top:48px}
.patologia-vcard__media{position:relative;border-radius:2px;overflow:hidden}
.patologia-vcard__label{font-family:'Roboto Condensed',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ibsa-accent);margin-top:20px}
.patologia-vcard__title{font-family:'Roboto Condensed',sans-serif;font-size:19px;color:var(--ibsa-ink);margin:8px 0 0}
.patologia-vcard__sub{font-size:14px;color:var(--ibsa-grey);margin-top:6px}
.patologia-center{display:flex;justify-content:center;margin-top:52px}
.patologia-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 40px;border:1px solid var(--ibsa-accent);background:var(--ibsa-accent);color:#fff;text-decoration:none;font-family:'Roboto Condensed',sans-serif;font-weight:400;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border-radius:5px}
.patologia-btn:hover{background:#7a879f;border-color:#7a879f;color:#fff}
@media (max-width:1023px){ .patologia-vgrid{grid-template-columns:1fr} }

/* Banner */
.patologia-banner{background:var(--ibsa-banner);color:#fff;padding:57px 0}
.patologia-banner__inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.patologia-kicker--light{color:rgba(255,255,255,.85)}
.patologia-banner__title{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:36px;margin:12px 0 0;padding-left:20px;border-left:4px solid #fff}
.patologia-banner__desc{max-width:602px;margin:16px 0 0;font-size:15px;color:rgba(255,255,255,.9)}
.patologia-btn--light{background:#fff;border-color:#fff;color:var(--ibsa-accent);text-transform:none;padding:16px 34px}
.patologia-btn--light::before{content:"";width:16px;height:18px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ibsa-ico-dl) center/contain no-repeat;mask:var(--ibsa-ico-dl) center/contain no-repeat}
.patologia-btn--light:hover{background:#eef0f3;color:var(--ibsa-accent)}
/* Closing */
.patologia-closing{padding:86px 0}
.patologia-closing__chip{display:inline-flex;padding:8px 20px;border-left:4px solid var(--ibsa-accent);font-family:'Roboto Condensed',sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ibsa-accent)}
.patologia-closing__quote{max-width:606px;margin:32px 0 0;font-family:'Source Sans Pro',sans-serif;font-style:italic;font-size:22px;line-height:1.4;color:var(--ibsa-slate)}
.patologia-closing__author{margin-top:24px;font-size:14px;color:var(--ibsa-ink)}
.patologia-closing__author span{display:block;color:var(--ibsa-grey)}
@media (max-width:1023px){ .patologia-banner__inner{flex-direction:column;align-items:flex-start} }

/* Header: l'header animato del tema e' trasparente e, quando diventa fixed su scroll,
   il contenuto ci passa sotto. Gli diamo un fondo bianco semitrasparente con blur,
   coerente con l'aspetto leggero delle altre pagine. */
#site-header.animated-header.fixed{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 10px rgba(26,38,36,.06)}

/* Site footer (replica del footer WPBakery usato nelle altre pagine) */
.patologia-sitefooter{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#fff}
.patologia-sitefooter__main{background:#8696b0;padding:44px 0}
.patologia-sitefooter__inner{display:flex;align-items:center;gap:44px}
.patologia-sitefooter__logo img{display:block;width:160px;height:auto}
.patologia-sitefooter__info{font-size:14px;line-height:1.55;color:#fff}
.patologia-sitefooter__info p{margin:0 0 12px}
.patologia-sitefooter__info a{color:#fff;text-decoration:none}
.patologia-sitefooter__info a:hover{text-decoration:underline}
.patologia-sitefooter__title{font-weight:400}
.patologia-sitefooter__link{margin-top:16px}
.patologia-sitefooter__legal{background:#6e81a4;padding:15px 0}
.patologia-sitefooter__legal-inner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-size:12px;letter-spacing:.03em}
.patologia-sitefooter__legal span,.patologia-sitefooter__legal a{color:#fff;text-decoration:none}
.patologia-sitefooter__legal a:hover{text-decoration:underline}
@media (max-width:1023px){ .patologia-sitefooter__inner{flex-direction:column;align-items:flex-start;gap:20px} }

/* Hub Patologie */
.patologia-hubgrid{display:flex;flex-direction:column;gap:25px;margin-top:48px}
.patologia-hubrow{display:flex;gap:25px}
.patologia-hubrow>.patologia-hubcard{flex:1 1 0;min-width:0}
.patologia-hubrow--1>.patologia-hubcard{flex:0 0 calc((100% - 50px)/3)}
.patologia-hubcard{background:#fff;border:1px solid #e2e5ea;border-radius:2px;overflow:hidden;display:flex;flex-direction:column}
.patologia-hubcard__media{display:block}
.patologia-hubcard__img{display:block;height:240px;background-size:cover;background-position:center}
.patologia-hubcard__body{padding:28px 30px}
.patologia-hubcard__cat{margin:0}
.patologia-hubcard__title{font-family:'Source Sans Pro',sans-serif;font-weight:700;font-size:18px;color:#1a2624;margin:8px 0 0}
.patologia-hubcard__desc{font-size:14px;line-height:1.5;color:#384554;margin:12px 0 20px}
.patologia-hubcard__cta{display:inline-flex;align-items:center;justify-content:center;background:#8996ae;color:#fff;text-decoration:none;font-family:'Roboto Condensed',sans-serif;font-size:14px;padding:6px 22px;border-radius:5px;width:140px}
.patologia-hubcard__cta:hover{background:#7a879f}
.patologia-hero__title a{color:inherit;text-decoration:none}
.patologia-hero__title a:hover{color:var(--ibsa-accent)}
.patologia-hero__cta{display:inline-flex;align-items:center;margin-top:32px;background:var(--ibsa-accent);color:#fff;text-decoration:none;font-family:'Roboto Condensed',sans-serif;font-size:14px;padding:9px 26px;border-radius:5px}
.patologia-hero__cta:hover{background:#7a879f;color:#fff}
.patologia-hero__figure--hub{position:relative}
.patologia-hero__figure--hub a{display:block;width:100%;height:100%}
.patologia-hub-badge{position:absolute;top:22px;left:-40px;width:80px;height:48px;background:#fff;border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(26,38,36,.12)}
.patologia-hub-badge b{font-size:22px;font-weight:700;color:#222b36;line-height:1;font-family:'Helvetica Neue',Arial,sans-serif}
.patologia-hub-badge em{font-style:normal;font-size:10px;color:#8996ae}
.patologia-pagination{display:flex;justify-content:center;gap:8px;margin-top:52px}
.patologia-pagination a,.patologia-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border:1px solid #d3d8df;border-radius:4px;color:#384554;text-decoration:none;font-family:'Roboto Condensed',sans-serif;font-size:14px}
.patologia-pagination .current{background:#8996ae;border-color:#8996ae;color:#fff}
.patologia-pagination a:hover{border-color:#8996ae;color:#8996ae}
@media (max-width:1023px){
  .patologia-hubrow{flex-wrap:wrap}
  .patologia-hubrow>.patologia-hubcard{flex:1 1 100%}
  .patologia-hubrow--1>.patologia-hubcard{flex:1 1 100%}
  .patologia-hero__figure--hub{margin-left:0}
}

/* ============================================================
   Hero a carousel
   Tre slide affiancate su desktop (410px, stesso passo delle
   altre griglie), una per volta con scorrimento a dito sotto i
   1024px. Titolo e sottotitolo restano sempre leggibili su una
   fascia bianca in fondo; il testo copre l'immagine all'hover
   su desktop e al tocco su touch.
   ============================================================ */
.patologia-hero{padding:52px 0 40px}
.patologia-hslides-wrap{position:relative;margin-top:32px}
.patologia-hslides{display:flex;gap:var(--ibsa-card-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
/* Durante il trascinamento col mouse: niente aggancio e niente scorrimento
   morbido, altrimenti la fila combatte contro la mano e torna indietro. */
.patologia-hslides.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.patologia-hslides::-webkit-scrollbar{display:none}

/* Niente altezza fissa: la slide e' alta quanto il suo contenuto, cosi' sotto
   la didascalia non avanza spazio vuoto. Le slide restano comunque allineate
   fra loro perche' il flex le stira tutte all'altezza della piu' alta. */
.patologia-hslide{position:relative;display:flex;flex-direction:column;flex:0 0 410px;overflow:hidden;border-radius:2px;background:#fff;scroll-snap-align:start;cursor:pointer}
.patologia-hslide:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ibsa-accent)}
/* Altezza fissa: con l'immagine elastica, una didascalia su due righe
   accorciava la foto e le slide finivano disallineate fra loro. */
.patologia-hslide__mediawrap{position:relative;flex:0 0 460px;height:460px}
.patologia-hslide__media{display:block;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}

/* La didascalia sta sopra il pannello (z-index), cosi' i caratteri
   del titolo restano quelli del riferimento anche a pannello aperto. */
/* La didascalia riempie lo spazio che avanza, cosi' la parte bassa delle slide
   piu' corte resta bianca invece che scoperta. */
.patologia-hslide__caption{position:relative;z-index:2;flex:1 1 auto;background:#fff;padding:16px 18px 8px}
.patologia-hslide__meta{display:flex;gap:28px;margin:14px 0 0;padding-top:12px;border-top:1px solid #e2e5ea}
.patologia-hslide__meta dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ibsa-accent);font-family:'Roboto Condensed',Arial,sans-serif}
.patologia-hslide__meta dd{margin:4px 0 0;font-size:13px;line-height:1.3;color:var(--ibsa-slate)}
.patologia-hslide__title{margin:0;font-family:'Roboto Condensed',Arial,sans-serif;font-weight:700;font-size:15px;line-height:1.25;letter-spacing:.02em;text-transform:uppercase;color:var(--ibsa-ink)}
.patologia-hslide__sub{margin:6px 0 0;font-family:'Roboto Condensed',Arial,sans-serif;font-weight:400;font-size:14px;line-height:1.3;color:var(--ibsa-teal)}

/* Il pannello copre SOLO l'immagine: con inset:0 arrivava fino in fondo alla
   slide e dipingeva di grigio anche la fascia vuota sotto la didascalia, che
   si forma quando una slide e' piu' bassa della piu' alta della fila. */
.patologia-hslide__panel{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-start;overflow-y:auto;background:rgba(56,69,84,.7);opacity:0;pointer-events:none;transition:opacity .25s ease}
.patologia-hslide__text{padding:22px;color:#fff;font-family:'Roboto Condensed',Arial,sans-serif;font-size:16px;line-height:1.45}
.patologia-hslide__text p{margin:0 0 10px}
.patologia-hslide__text ul,.patologia-hslide__text ol{margin:0 0 10px;padding-left:20px}
.patologia-hslide__text a{color:#fff;text-decoration:underline}

/* hover solo dove esiste davvero un puntatore: sui telefoni resterebbe
   attaccato dopo il tocco, ed e' il classico hover che non si toglie piu'. */
@media (hover:hover){
  .patologia-hslide:hover .patologia-hslide__panel{opacity:1;pointer-events:auto}
}
.patologia-hslide.is-open .patologia-hslide__panel,
.patologia-hslide:focus-within .patologia-hslide__panel{opacity:1;pointer-events:auto}

/* Centrate sull'immagine, non sull'intera card: la didascalia sopra ha
   un'altezza variabile, quindi il centro della card non coincide con quello
   della foto. Si ancorano dal basso, alla meta' dell'altezza dell'immagine
   (.patologia-hslide__mediawrap), che invece e' fissa. */
.patologia-hslides-wrap>.patologia-arrow{position:absolute;top:auto;bottom:230px;transform:translateY(50%);z-index:3}
.patologia-hslides-wrap>.patologia-arrow--prev{left:-18px}
.patologia-hslides-wrap>.patologia-arrow--next{right:-18px}

/* Faculty, sceso in fondo alla scheda */
.patologia-section--faculty .patologia-hero__meta{margin:0}

@media (max-width:1023px){
  .patologia-hslide{flex:0 0 min(86vw,410px)}
  .patologia-hslide__mediawrap{flex-basis:380px;height:380px}
  /* Le frecce restano: a schermo stretto servono piu' che altrove. Rientrano
     dentro il bordo, perche' fuori finirebbero oltre il margine di pagina. */
  .patologia-hslides-wrap>.patologia-arrow--prev{left:4px}
  .patologia-hslides-wrap>.patologia-arrow--next{right:4px}
  .patologia-hslides-wrap>.patologia-arrow{bottom:190px}
}

/* ============================================================
   Videopill: un solo pulsante, tre comportamenti
   Il contenuto della voce SOSTITUISCE il testo descrittivo sopra
   l'elenco, non ci galleggia sopra. Con un video il cambio
   riguarda la sola colonna di testo, cosi' il video resta
   visibile a destra; senza video il contenuto si allarga su
   tutto il blocco.
   ============================================================ */
.patologia-pill{appearance:none;border:0;background:none;padding:0;text-align:left;font-family:'Roboto Condensed',Arial,sans-serif;font-size:14px;line-height:1.35;color:var(--ibsa-teal);cursor:pointer;text-transform:uppercase;letter-spacing:.02em}
.patologia-pill:hover{color:var(--ibsa-accent);text-decoration:underline}
.patologia-pill:focus-visible{outline:2px solid var(--ibsa-accent);outline-offset:3px}
.patologia-pill.is-active{color:var(--ibsa-ink);font-weight:700;text-decoration:none}

/* Voce senza video ne' testo: resta scritta ma non e' cliccabile */
.patologia-pill--inert{color:var(--ibsa-slate);cursor:default;text-transform:none;letter-spacing:0}
.patologia-pill--inert:hover{color:var(--ibsa-slate);text-decoration:none}

/* Crocetta di chiusura, accanto alla voce aperta */
.patologia-pill-close{margin-left:10px;width:22px;height:22px;flex:0 0 auto;border:1px solid #d3d8df;border-radius:50%;background:var(--ibsa-bg);color:var(--ibsa-slate);font-size:14px;line-height:1;cursor:pointer;padding:0}
.patologia-pill-close:hover{background:var(--ibsa-bg-alt);color:var(--ibsa-ink)}
.patologia-pill-close:focus-visible{outline:2px solid var(--ibsa-accent);outline-offset:2px}

/* Contenuto sostituito: stessa tipografia del testo che rimpiazza, senza
   riquadri ne' ombre, solo la barra accento che segnala il cambio. */
.patologia-us-swap{padding-left:20px;border-left:4px solid var(--ibsa-accent);font-size:19px;line-height:1.5;color:var(--ibsa-slate)}
/* Il testo incollato da Word/Google Docs porta classi del tema padre
   (es. "title-h6", "p1") con una loro dimensione: qui dentro non deve
   valere, il box ha gia' la sua tipografia. */
.patologia-us-swap *:not(.wp-fs-sm):not(.wp-fs-md):not(.wp-fs-lg){font-size:inherit !important;line-height:inherit !important}
/* Con il video accanto l'altezza resta quella del testo che si sostituisce,
   cosi' l'elenco sotto non si sposta e la pagina non balla sotto il clic.
   Il testo piu' lungo scorre dentro, con una barra discreta. */
.patologia-us-swap--capped{overflow-y:auto;padding-right:16px;scrollbar-width:thin;scrollbar-color:#c9cfd8 transparent}
.patologia-us-swap--capped::-webkit-scrollbar{width:6px}
.patologia-us-swap--capped::-webkit-scrollbar-thumb{background:#c9cfd8;border-radius:3px}
.patologia-us-swap--capped::-webkit-scrollbar-track{background:transparent}
.patologia-us-swap p{margin:0 0 14px}
.patologia-us-swap p:last-child{margin-bottom:0}
.patologia-us-swap img{max-width:100%;height:auto;border-radius:2px;margin:6px 0 14px}
.patologia-us-swap ul,.patologia-us-swap ol{margin:0 0 14px;padding-left:22px}

/* Voce senza video: il blocco diventa a colonna unica */
.patologia-s01__grid.is-full{grid-template-columns:1fr;gap:0}
.patologia-s01__grid.is-full .patologia-s01__video{display:none}

/* ============================================================
   Pathology: una patologia per volta
   Le card di anteprima sono state tolte. Resta il pannello
   grande, con le frecce ai lati che girano in cerchio.
   ============================================================ */
.patologia-pathology{position:relative;margin-top:48px}
.patologia-pathology__panels{margin-top:0}
.patologia-arrow--ppanel{top:50%;transform:translateY(-50%);z-index:3}
.patologia-pathology__counter{margin:18px 0 0;text-align:center;font-family:'Roboto Condensed',Arial,sans-serif;font-size:14px;letter-spacing:.05em;color:var(--ibsa-grey)}
.patologia-pathology__counter span{color:var(--ibsa-ink);font-weight:700}
@media (max-width:1023px){
  .patologia-arrow--ppanel.patologia-arrow--prev{left:4px}
  .patologia-arrow--ppanel.patologia-arrow--next{right:4px}
}
/* Superfici trascinabili: il puntatore dice che si puo' afferrare */
.patologia-pathology__panels,.patologia-inj-track{cursor:grab}
.patologia-pathology__panels.is-dragging,.patologia-inj-track.is-dragging{cursor:grabbing;user-select:none;scroll-snap-type:none;scroll-behavior:auto}

/* ============================================================
   Testo degli approcci: altezza massima con apertura
   Le schede sono affiancate e i testi hanno lunghezze molto
   diverse: senza un tetto, una scheda sola allunga tutta la fila.
   ============================================================ */
.patologia-inj__text{position:relative;max-height:96px;overflow:hidden;font-size:14px;color:var(--ibsa-slate-2);margin:16px 0 0}
.patologia-inj__text p{margin:0 0 12px}
.patologia-inj__text p:last-child{margin-bottom:0}
/* Sfumatura solo dove il testo e' davvero tagliato: la classe la mette il JS
   nello stesso momento in cui decide di mostrare il pulsante. */
.patologia-inj__text.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--ibsa-bg));pointer-events:none}
.patologia-inj__text.is-open{max-height:none}
.patologia-inj__text.is-open::after{display:none}

.patologia-more{appearance:none;border:0;background:none;padding:0;margin:10px 0 0;font-family:'Roboto Condensed',Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ibsa-teal);cursor:pointer}
.patologia-more:hover{color:var(--ibsa-accent);text-decoration:underline}
.patologia-more:focus-visible{outline:2px solid var(--ibsa-accent);outline-offset:3px}
.patologia-more[hidden]{display:none}

/* Dimensioni disponibili dal menu "Formato" dei campi WYSIWYG (vedi
   inc/tinymce-patologia.php). Le percentuali seguono la dimensione ereditata
   dal blocco che le contiene, invece di un valore fisso in px. */
.wp-fs-sm{font-size:.85em}
.wp-fs-md{font-size:1em}
.wp-fs-lg{font-size:1.3em}

/* Modale video: sfondo scurito, pannello centrato con l'embed 16:9. Un solo
   pannello condiviso, creato da patologia.js (initVideoModal). */
.patologia-video-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.patologia-video-modal[hidden]{display:none}
.patologia-video-modal__backdrop{position:absolute;inset:0;background:rgba(10,16,26,.85)}
.patologia-video-modal__panel{position:relative;z-index:1;width:100%;max-width:920px}
/* Overflow sul body, non sul pannello: il bottone di chiusura e' un
   fratello del body, posizionato fuori dal suo bordo superiore (top
   negativo) - se lo scroll stesse sul pannello lo taglierebbe via. */
.patologia-video-modal__body{max-height:90vh;overflow-y:auto}
.patologia-video-modal__caption{margin-top:16px;padding:20px 24px;background:#fff;border-radius:2px;font-size:15px;line-height:1.55;color:var(--ibsa-slate)}
.patologia-video-modal__caption p{margin:0 0 12px}
.patologia-video-modal__caption p:last-child{margin-bottom:0}
/* La "x" scritta come testo non e' mai centrata davvero: il glifo del font
   non e' simmetrico nel proprio riquadro. Due barre disegnate in CSS invece
   si centrano in modo esatto, sempre. */
.patologia-video-modal__close{position:absolute;top:-46px;right:0;padding:0;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:0;line-height:0}
.patologia-video-modal__close::before,
.patologia-video-modal__close::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:2px;background:#fff;border-radius:1px}
.patologia-video-modal__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.patologia-video-modal__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.patologia-video-modal__close:hover{background:rgba(255,255,255,.18)}
body.patologia-modal-open{overflow:hidden}

/* Area di testo libero, larga quanto lo schermo (fuori da .patologia-container
   nel chiamante), con box di sfondo. Il contenuto interno resta invece alla
   larghezza standard di pagina. */
.patologia-textbox{width:100%;margin-top:56px;padding:48px 0;background:var(--ibsa-bg)}
.patologia-textbox__content{font-size:17px;line-height:1.6;color:var(--ibsa-slate)}
.patologia-textbox__content p{margin:0 0 16px}
.patologia-textbox__content p:last-child{margin-bottom:0}
.patologia-textbox__content img{max-width:100%;height:auto;border-radius:6px;margin:8px 0 16px;display:block}
.patologia-textbox__content h2,.patologia-textbox__content h3{margin:28px 0 12px;color:var(--ibsa-ink);font-family:'Roboto Condensed',sans-serif}

/* Tabelle a tab, stesso pattern gia' usato in Home (assets/css/home.css
   .home-tables*), qui coi token/nomi classe della Scheda Patologia. */
.patologia-tables{margin-top:56px}
.patologia-tables__tabs{display:flex;flex-wrap:wrap;gap:40px;margin-bottom:28px;border-bottom:1px solid #e2e5ea}
.patologia-tables__tab{appearance:none;background:none;border:0;padding:0 0 12px;font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--ibsa-slate);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.patologia-tables__tab:hover{color:var(--ibsa-ink)}
.patologia-tables__tab.is-active{color:var(--ibsa-ink);border-bottom-color:var(--ibsa-accent)}
.patologia-tables__panel{display:none}
.patologia-tables__panel.is-active{display:block}
.patologia-tables__scroll{overflow-x:auto;background:#fff;border-radius:8px;border:1px solid #e2e5ea}
.patologia-tables__scroll table{width:100%;min-width:720px;border-collapse:collapse}
.patologia-tables__scroll th,.patologia-tables__scroll td{padding:14px 16px;border-bottom:1px solid #e2e5ea;text-align:left;font-size:14px;line-height:1.5;color:var(--ibsa-slate);vertical-align:top}
.patologia-tables__scroll tbody tr:last-child th,.patologia-tables__scroll tbody tr:last-child td{border-bottom:0}
.patologia-tables__scroll thead th{background:#e9edf8;font-weight:700;color:#1a2c5c;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.patologia-tables__scroll tbody tr:nth-child(even){background:var(--ibsa-bg-alt)}
.patologia-tables__scroll th:first-child,.patologia-tables__scroll td:first-child{position:sticky;left:0;background:#fff;box-shadow:1px 0 0 #e2e5ea}
.patologia-tables__scroll tbody tr:nth-child(even) td:first-child{background:var(--ibsa-bg-alt)}
.patologia-tables__scroll thead th:first-child{background:#e9edf8;z-index:1}