/* Font in locale (nessuna richiesta a Google): Unna per titoli e testata, Karla per testi, occhielli, menu e firme. */
@font-face { font-family: "Unna"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/unna-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Unna"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/unna-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Unna"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/unna-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/karla-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/karla-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/karla-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/karla-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/karla-latin-400-italic.woff2") format("woff2"); }

/* Layout: testata centrata, poi blocchi a due colonne su griglia a 1920 px (margini 56, colonne 860 + 874),
   misure tipografiche prese dai mockup Sez1–Sez5 e scalate in vw sotto i 1920 px.
   Identità grafica approvata dal cliente: un solo tema chiaro, scelto di proposito. */
:root {
  --blu-testata: #003c6b;
  --blu-occhielli: #263c61;
  --blu-tv: #003068;
  --grigio-territori: #e6e6e6;
  --linea-testata: #8a96aa;
  --linea-grigia: #6c6c6c;
  --testo: #141414;
  --testo-2: #2a2a2a;
  --muto: #5d6879;
  --fondo: #ffffff;
  --bianco: #ffffff;

  --f-titoli: "Unna", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-testo: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* scala tipografica: valori dei mockup a 1920 px */
  --t-titolo: clamp(26px, 2.79vw, 53.6px);
  --t-titolo-md: clamp(22px, 2.1vw, 40px);
  --t-titolo-sm: clamp(21px, 1.92vw, 36.9px);
  --t-sommario: clamp(16.5px, 1.27vw, 24.4px);
  --t-sommario-sm: clamp(15px, .875vw, 16.8px);
  --t-occhiello: clamp(12.5px, 1.016vw, 19.5px);
  --t-occhiello-sm: clamp(11.5px, .7vw, 13.4px);
  --t-sezione: clamp(28px, 2.56vw, 49px);
  --t-menu: clamp(13px, 1.016vw, 19.5px);

  --gutter: clamp(16px, 2.92vw, 56px);
  --col-gap: clamp(24px, 3.5vw, 67px);
  --stacco: clamp(44px, 4.2vw, 80px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--testo); font-family: var(--f-testo); font-size: 17px; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blu-testata); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
hr { border: 0; margin: 0; }

.wrap {
  width: 100%; max-width: 1920px; margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------------------------------------------------------------- testata */
.testata { border-bottom: 1.5px solid var(--linea-testata); }
.testata-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-block: clamp(14px, 1.5vw, 28px) clamp(10px, 1.1vw, 22px);
}
.logo { grid-column: 2; display: block; width: clamp(190px, 24vw, 462px); }
.logo img { width: 100%; }
.hamburger {
  grid-column: 3; justify-self: end; align-self: start; margin-top: clamp(4px, 1vw, 20px);
  width: clamp(36px, 2.9vw, 56px); aspect-ratio: 56 / 38; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hamburger span { display: block; height: clamp(3px, .27vw, 5px); background: var(--blu-occhielli); border-radius: 1px; }
.menu-sezioni ul {
  list-style: none; margin: 0; padding: 0 0 clamp(8px, .55vw, 11px);
  display: flex; justify-content: center; flex-wrap: wrap; column-gap: clamp(18px, 2.08vw, 40px); row-gap: 6px;
}
.menu-sezioni a, .drawer a {
  font-weight: 600; font-size: var(--t-menu); letter-spacing: .04em; text-transform: uppercase; color: var(--blu-occhielli);
}
.menu-sezioni a:hover, .menu-sezioni .current-menu-item > a, .menu-sezioni .current-cat > a, .menu-sezioni .current-menu-parent > a, .menu-sezioni .current-cat-parent > a { color: var(--blu-testata); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

/* ---------------------------------------------------------------- elementi comuni */
.occhiello {
  font-weight: 700; font-size: var(--t-occhiello); letter-spacing: .035em; text-transform: uppercase;
  color: var(--blu-occhielli); margin-bottom: clamp(8px, 1.05vw, 20px);
}
.titolo { font-family: var(--f-titoli); font-weight: 400; color: var(--testo); text-wrap: balance; }
.titolo a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.sommario { color: var(--testo-2); }
.firma { color: var(--testo); }
.firma strong { font-weight: 700; }

.story { display: flex; flex-direction: column; min-width: 0; }
.story.lg .titolo { font-size: var(--t-titolo); line-height: 1.2; margin-bottom: clamp(12px, 1.5vw, 28px); }
.story.lg .sommario, .story.lg .firma { font-size: var(--t-sommario); line-height: 1.2; letter-spacing: .012em; }
.story.lg .sommario { margin-bottom: clamp(14px, 1.65vw, 32px); }
.story.md .titolo { font-size: var(--t-titolo-md); line-height: 1.2; margin-bottom: clamp(10px, 1.1vw, 20px); }
.story.md .sommario, .story.md .firma { font-size: clamp(15.5px, 1vw, 19px); line-height: 1.25; }
.story.md .sommario { margin-bottom: clamp(12px, 1.2vw, 22px); }
.story.sm .occhiello { font-size: var(--t-occhiello-sm); margin-bottom: clamp(8px, .9vw, 16px); }
.story.sm .titolo { font-size: var(--t-titolo-sm); line-height: 1.21; margin-bottom: clamp(10px, .9vw, 16px); }
.story.sm .sommario, .story.sm .firma { font-size: var(--t-sommario-sm); line-height: 1.2; letter-spacing: .01em; }
.story.sm .sommario { margin-bottom: clamp(12px, 1.1vw, 20px); }

.foto { display: block; overflow: hidden; background: var(--grigio-territori); }
.foto img { width: 100%; aspect-ratio: 1.93; object-fit: cover; object-position: 50% 35%; }

.sep { border-top: 1.5px solid var(--blu-occhielli); margin-block: clamp(20px, 2vw, 38px); }
.sep-grey { border-top-width: 1px; border-color: var(--linea-grigia); margin-inline: -6px -8px; }

.sez-titolo {
  font-family: var(--f-titoli); font-weight: 400; font-size: var(--t-sezione); line-height: 1.1; letter-spacing: .01em;
  text-transform: uppercase; color: var(--blu-occhielli);
  border-bottom: 1.5px solid var(--blu-occhielli); padding-bottom: clamp(4px, .4vw, 8px); margin-bottom: clamp(16px, 1.05vw, 20px);
}
.due-col, .primo-piano, .dopo-editoriale { display: grid; grid-template-columns: 860fr 874fr; column-gap: var(--col-gap); align-items: start; }
.col-main, .col-side { min-width: 0; }
.col-main > .foto + .story { margin-top: clamp(18px, 2.4vw, 46px); }

main > section + section { margin-top: var(--stacco); }

/* 1 · In primo piano */
.primo-piano { padding-top: clamp(28px, 3.2vw, 62px); }
.primo-piano .col-main .story { margin-bottom: clamp(14px, 1.1vw, 20px); }

/* 2 · Sezione con titolo */
.sezione { padding-top: 6px; }

/* 3 · L'Editoriale */
.hero { position: relative; display: grid; overflow: hidden; color: var(--bianco); background: var(--blu-occhielli); }
.hero > img, .hero-testo { grid-area: 1 / 1; }
.hero > img { width: 100%; height: 100%; max-width: none; min-height: clamp(360px, 35.7vw, 686px); object-fit: cover; filter: brightness(.5) saturate(.85); transition: filter .4s ease; }
.hero:hover > img { filter: brightness(.42) saturate(.85); }
.hero-testo {
  position: relative; z-index: 1; text-shadow: 0 1px 18px rgba(0, 18, 40, .35);
  align-self: center; justify-self: center; text-align: center; display: flex; flex-direction: column; align-items: center;
  padding: clamp(28px, 4vw, 70px) clamp(18px, 6vw, 120px); gap: clamp(16px, 2.6vw, 50px);
}
.hero-occhiello { font-weight: 600; font-size: clamp(14px, 1.66vw, 31.8px); letter-spacing: .03em; text-transform: uppercase; }
.hero-titolo { font-family: var(--f-titoli); font-size: clamp(30px, 4.55vw, 87.4px); line-height: 1.2; text-transform: uppercase; text-wrap: balance; max-width: 15em; }
.hero-firma { font-size: clamp(17px, 2.07vw, 39.7px); letter-spacing: .03em; }
.hero-firma strong { font-weight: 700; }

.dopo-editoriale { margin-top: clamp(32px, 3.3vw, 64px) !important; }
.box-blu { background: var(--blu-occhielli); color: var(--bianco); padding: clamp(20px, 2.4vw, 46px); min-width: 0; }
.box-blu .titolo, .box-blu .sommario, .box-blu .firma { color: var(--bianco); }
.box-blu .sommario { opacity: .9; }
.box-titolo {
  font-family: var(--f-titoli); font-weight: 400; font-size: clamp(24px, 1.9vw, 36px); text-transform: uppercase; letter-spacing: .01em;
  border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 6px; margin-bottom: clamp(16px, 1.4vw, 26px);
}
.box-foto { margin-bottom: clamp(14px, 1.3vw, 24px); }
.sep-chiara { border-top: 1px solid rgba(255,255,255,.35); margin-block: clamp(18px, 1.6vw, 30px); }

/* 4 · Blocco su fondo grigio (L'Italia dei Territori) */
.territori {
  background: var(--grigio-territori); margin-inline: clamp(0px, 1.4vw, 27px);
  padding-block: clamp(6px, .5vw, 10px) clamp(36px, 3.6vw, 70px);
}
.territori .wrap { padding-left: max(calc(var(--gutter) - clamp(0px, 1.4vw, 27px)), 16px, env(safe-area-inset-left, 0px)); padding-right: max(calc(var(--gutter) - clamp(0px, 1.4vw, 27px)), 16px, env(safe-area-inset-right, 0px)); }

/* 5 · Tre colonne */
.tre-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 5.5vw, 106px); padding-inline: clamp(16px, 4.5vw, 87px); }
.segnaposto .attesa {
  font-family: var(--f-titoli); font-style: italic; color: var(--muto); font-size: clamp(18px, 1.35vw, 26px); line-height: 1.3;
  border-top: 1px solid var(--linea-testata); padding-top: clamp(10px, .9vw, 16px);
}

/* 6 · Libertas TV */
.tv { padding-inline: clamp(16px, 4.5vw, 87px); }
.tv-banda { background: var(--blu-tv); padding: clamp(12px, 1.2vw, 23px) clamp(16px, 1.7vw, 33px); }
.tv-banda a { display: inline-block; }
.tv-banda img { height: clamp(34px, 2.9vw, 57px); width: auto; }
.tv-corpo { display: grid; grid-template-columns: 1183fr 522fr; column-gap: clamp(24px, 2.5vw, 48px); margin-top: clamp(20px, 1.95vw, 37px); align-items: start; }
.video-segnaposto {
  aspect-ratio: 16 / 9; max-width: 100%; background: var(--grigio-territori); color: var(--blu-occhielli);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  font-weight: 600; font-size: var(--t-occhiello); letter-spacing: .035em; text-transform: uppercase;
}
.play { width: clamp(56px, 5vw, 96px); aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.play::after { content: ""; position: absolute; left: 39%; top: 29%; border-style: solid; border-width: .9em 0 .9em 1.5em; border-color: transparent transparent transparent currentColor; font-size: clamp(11px, .95vw, 18px); }
.tv-corpo .story { padding-top: clamp(10px, 1.3vw, 25px); }
.tv-video iframe, .tv-video video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.foto-video img { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------- piè di pagina */
.piede { background: var(--blu-testata); color: var(--bianco); margin-top: var(--stacco); }
.piede .wrap { padding-block: clamp(36px, 3.6vw, 64px) clamp(24px, 2vw, 36px); display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2vw, 34px); text-align: center; }
.piede .logo-piede { width: clamp(200px, 18vw, 340px); }
.piede ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(16px, 2vw, 36px); row-gap: 8px; }
.piede a { font-weight: 600; font-size: clamp(13px, .85vw, 16px); letter-spacing: .05em; text-transform: uppercase; color: var(--bianco); }
.piede .rubriche a { font-weight: 500; opacity: .85; }
.piede a:hover { text-decoration: underline; text-underline-offset: 4px; }
.piede-fondo { width: 100%; border-top: 1px solid rgba(255,255,255,.3); padding-top: clamp(16px, 1.4vw, 24px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; opacity: .85; }
.piede-fondo a { text-transform: none; font-weight: 400; font-size: 14px; letter-spacing: 0; }

/* ---------------------------------------------------------------- menu laterale */
.velo { position: fixed; inset: 0; background: rgba(10, 22, 40, .45); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--fondo); z-index: 41;
  padding: calc(22px + env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) 28px;
  display: flex; flex-direction: column; gap: 22px; overflow-y: auto; box-shadow: -12px 0 40px rgba(0, 30, 60, .18);
}
.drawer-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.drawer-top img { width: 170px; height: auto; }
.chiudi { border: 0; background: none; font: 600 15px var(--f-testo); letter-spacing: .05em; text-transform: uppercase; color: var(--blu-occhielli); cursor: pointer; padding: 8px 0; }
.drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drawer li a { display: block; padding: 13px 0; border-bottom: 1px solid #d5dae2; font-size: 16px; }
.drawer .gruppo { font: 400 italic 17px var(--f-titoli); color: var(--muto); margin-top: 6px; }
.cerca { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.cerca label { font: 400 italic 17px var(--f-titoli); color: var(--muto); }
.cerca div { display: flex; gap: 8px; }
.cerca input { flex: 1; min-width: 0; font: 16px var(--f-testo); padding: 10px 12px; border: 1px solid #b9c1cd; border-radius: 0; }
.cerca button { font: 700 14px var(--f-testo); letter-spacing: .05em; text-transform: uppercase; background: var(--blu-occhielli); color: var(--bianco); border: 0; padding: 0 16px; cursor: pointer; }
html.menu-aperto { overflow: hidden; }

/* ---------------------------------------------------------------- pagine di sezione */
.vista-sezione { padding-top: 6px; }
.sez-testa { display: flex; flex-direction: column; }
.sottosezioni ul { list-style: none; margin: 0 0 clamp(18px, 1.6vw, 30px); padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.sottosezioni a { font-weight: 600; font-size: var(--t-occhiello); letter-spacing: .035em; text-transform: uppercase; color: var(--blu-occhielli); }
.sottosezioni a:hover { text-decoration: underline; text-underline-offset: 4px; }
.griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.5vw, 67px) var(--col-gap); margin-top: var(--stacco); }
.leggi .griglia, .sez-testa + .griglia { margin-top: 0; }
.griglia .foto { margin-bottom: clamp(14px, 1.2vw, 22px); }
.griglia .foto img { aspect-ratio: 16 / 9; }
.vuota { font-family: var(--f-titoli); font-style: italic; color: var(--muto); font-size: clamp(20px, 1.6vw, 30px); padding-block: clamp(24px, 3vw, 60px); }
.vuota a { text-decoration: underline; }
.paginazione { margin-top: var(--stacco); border-top: 1.5px solid var(--blu-occhielli); padding-top: 18px; }
.paginazione .nav-links { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; font-weight: 600; letter-spacing: .03em; color: var(--blu-occhielli); }
.paginazione .page-numbers { padding: 6px 10px; }
.paginazione .current { background: var(--blu-occhielli); color: var(--bianco); }

/* ---------------------------------------------------------------- articolo */
.articolo { padding-top: clamp(28px, 3.2vw, 62px); }
.art-testa { max-width: 1180px; margin-inline: auto; }
.art-testa h1 { font-family: var(--f-titoli); font-weight: 400; font-size: clamp(32px, 3.4vw, 66px); line-height: 1.15; text-wrap: balance; margin-bottom: clamp(16px, 1.6vw, 30px); }
.is-editoriale .art-testa h1 { text-transform: uppercase; }
.art-sommario { font-size: clamp(18px, 1.35vw, 26px); line-height: 1.3; color: var(--testo-2); max-width: 46em; }
.art-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-top: clamp(18px, 1.6vw, 30px); padding-block: 12px; border-top: 1.5px solid var(--blu-occhielli); border-bottom: 1px solid #c9cfd8; font-size: clamp(15px, .95vw, 18px); }
.art-meta time { color: var(--muto); }
.art-foto { max-width: 1180px; margin: clamp(22px, 2.2vw, 42px) auto 0; }
.art-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.art-foto figcaption { font-size: 14px; color: var(--muto); padding-top: 8px; }
.art-corpo { max-width: 68ch; margin: clamp(26px, 2.6vw, 50px) auto 0; font-size: clamp(17.5px, 1.05vw, 20px); line-height: 1.68; color: #1d1d1d; display: flex; flex-direction: column; gap: 1.05em; }
.art-corpo > * { margin: 0; }
.art-corpo > p:first-child::first-line { font-weight: 600; }
.art-corpo a { color: var(--blu-testata); text-decoration: underline; text-underline-offset: 3px; }
.art-corpo h2, .art-corpo h3 { font-family: var(--f-titoli); font-weight: 400; line-height: 1.2; color: var(--testo); margin-top: .6em; }
.art-corpo h2 { font-size: 1.6em; }
.art-corpo h3 { font-size: 1.3em; }
.art-corpo blockquote { border-left: 3px solid var(--blu-occhielli); padding-left: 1em; font-family: var(--f-titoli); font-size: 1.25em; line-height: 1.4; color: var(--blu-occhielli); }
.art-corpo figure { margin: .4em 0; }
.art-corpo img { height: auto; }
.art-corpo figcaption { font-size: 14px; color: var(--muto); padding-top: 6px; }
.art-corpo iframe { width: 100%; max-width: 100%; }
.art-corpo .wp-embed-aspect-16-9 .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.art-corpo .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-corpo ul, .art-corpo ol { padding-left: 1.3em; }
.leggi { margin-top: var(--stacco); }

/* ---------------------------------------------------------------- accessibilità */
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--blu-testata); color: var(--bianco); padding: 10px 16px; font-weight: 700; }
.salta:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.firma a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.occhiello a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sez-titolo a:hover, .box-titolo a:hover { opacity: .8; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- telefono e tablet */
@media (max-width: 1023px) {
  .due-col, .primo-piano, .dopo-editoriale, .tv-corpo { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .tre-col, .griglia { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .tre-col, .tv { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .primo-piano .col-main { display: flex; flex-direction: column; }
  .primo-piano .col-main .foto { order: -1; margin-bottom: 18px; }
  .sep-grey { margin-inline: 0; }
  .territori { margin-inline: 0; }
  .territori .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .hero > img { min-height: 420px; object-position: 22% 50%; }
  .primo-piano .col-side, .due-col .col-side.lista { border-top: 1px solid var(--linea-grigia); padding-top: 28px; }
  .territori .due-col .col-side.lista, .sezione .due-col .col-side.lista, .vista-sezione .due-col .col-side.lista { border-top-color: var(--blu-occhielli); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .tre-col, .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (max-width: 860px) {
  .menu-sezioni { display: none; }
  .testata-top { padding-block: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }