/* =========================================================
   Ius Appalti — stile condiviso
   ========================================================= */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/OpenSans-Variable.woff2") format("woff2-variations"),
       url("../fonts/OpenSans-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/OpenSans-Italic-Variable.woff2") format("woff2-variations"),
       url("../fonts/OpenSans-Italic-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Montserrat-Variable.woff2") format("woff2-variations"),
       url("../fonts/Montserrat-Variable.woff2") format("woff2");
}

:root {
  --primary: #0e2a3f;
  --primary-dark: #caa036;
  --text-dark: #0e2a3f;
  --text-body: #4b5563;
  --text-muted: #6b7280;
  --bg-light: #f8f8f8;
  --bg-lighter: #f8f9fb;
  --border: #e4e6eb;
  --footer-bg: #202020;
  --radius: 0;
  --container: 1280px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-body);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  color: var(--text-dark);
  margin: 0;
  line-height: 1.25;
}

p { margin: 0 0 16px; }

.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: var(--radius);
  padding: 12px 26px;
  text-align: center;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  transition: background .15s ease;
}

.btn-primary:hover { background: var(--primary-dark); }

.btn-contatti {
  position: relative;
  font-family: inherit;
  line-height: inherit;
  background: transparent;
  color: var(--primary-dark);
  border: 4px solid var(--primary-dark);
  overflow: visible;
  /* leaving hover: wait for the blue trace to fully retract before the gold border reappears,
     so the two are never visible at once (avoids any visible mismatch between them);
     the text stays blue until then and turns gold together with the border */
  transition: color .1s ease .45s, border-color .1s ease .45s;
}

.btn-contatti-trace {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  pointer-events: none;
}

.btn-contatti-trace path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: square;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .5s ease;
}

.btn-contatti:hover {
  background: transparent;
  color: var(--primary);
  border-color: transparent;
  /* entering hover: gold fades out immediately, no delay */
  transition: color .2s ease, border-color .1s ease;
}

.btn-contatti:hover .btn-contatti-trace path {
  stroke-dashoffset: 0;
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 116px;
}

/* Stacked header: logo centred and bigger, nav row below it in a grid — identical
   on every page, including Home. */

.site-header--stacked .header-inner {
  flex-direction: column;
  height: auto;
  padding-top: 36px;
  position: relative;
}

.header-top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.site-header--stacked .logo img { height: 132px; }

.header-nav-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 20px;
  width: 100%;
  margin-top: 34px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--border);
}

.header-nav-row .main-nav { grid-column: 2; justify-content: center; }
.header-nav-row .header-actions { grid-column: 3; justify-self: end; }
.header-nav-row .header-spacer { grid-column: 1; }

/* only meaningful inside the mobile drawer; hidden elsewhere */
.mobile-menu-logo,
.mobile-menu-copy {
  display: none;
}

/* Header compatto (schermi larghi più di 980px): scorrendo, la parte con il
   logo grande esce dallo schermo e resta agganciata solo la riga del menu.
   main.js imposta --header-stick (top negativo = altezza della parte che
   sparisce) e aggiunge .is-stuck quando la riga è agganciata: allora a
   sinistra compare il logo piccolo. L'header non cambia dimensione, quindi la
   pagina non fa scatti. */
@media (min-width: 981px) {
  .site-header--stacked { top: var(--header-stick, 0px); }
  .site-header--stacked .header-nav-row .mobile-menu-logo {
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: auto;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
  }
  /* logo piccolo alto 64px (più piccolo sugli schermi stretti, per restare
     lontano dalle voci del menu); il margine negativo lo fa sbordare nello
     spazio sopra e sotto della riga senza allungare l'header */
  .site-header--stacked .header-nav-row .mobile-menu-logo { min-width: 0; max-width: 100%; }
  .site-header--stacked .header-nav-row .mobile-menu-logo img { height: auto; width: auto; max-height: 54px; max-width: 100%; display: block; margin: -1px 0; }
  .site-header--stacked.is-stuck .header-nav-row .mobile-menu-logo { opacity: 1; visibility: visible; }
  .header-nav-row .header-spacer { grid-row: 1; }
  .header-nav-row .main-nav,
  .header-nav-row .header-actions { grid-row: 1; }
}
@media (min-width: 981px) and (max-width: 1300px) {
  .site-header--stacked .header-nav-row .mobile-menu-logo img { max-height: 54px; }
}
@media (min-width: 981px) and (max-width: 1120px) {
  .site-header--stacked .header-nav-row .mobile-menu-logo img { max-height: 48px; margin: 0; }
}

.site-header--stacked .main-nav {
  width: auto;
  height: auto;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 72px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  gap: 80px;
  align-items: stretch;
  height: 100%;
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  padding: 0;
  position: relative;
}

.nav-link.active { color: var(--text-dark); }

.nav-link:hover,
.nav-link.active {
  font-weight: 700;
}

/* used momentarily (js/main.js, reserveBoldWidth) to measure how wide a link
   would be at its hover/active weight, so that width can be reserved as a
   min-width up front — without it, the whole menu visibly shifts sideways
   as each link widens/narrows while the mouse crosses it */
.nav-link--measure-bold {
  font-weight: 700;
}

.nav-indicator {
  position: absolute;
  bottom: -24px;
  height: 4px;
  background: var(--primary-dark);
  pointer-events: none;
  transition: left .12s ease-out, width .12s ease-out;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* sette voci di menu (Home, Chi siamo, quattro categorie, Media): spazio tra
   le voci e spazio minimo garantito tra menu, logo dell'header compatto e
   pulsante Contatti (column-gap della griglia), che si stringono insieme fino
   al menu a tendina (980px). Ricalibrati il 12 ottobre 2026 con l'aggiunta di
   "Media", misurando da 981 a 1920px */
.main-nav { gap: 40px; }
.header-nav-row { column-gap: 40px; }
@media (max-width: 1250px) { .main-nav { gap: 26px; } .header-nav-row { column-gap: 36px; } }
@media (max-width: 1120px) {
  .main-nav { gap: 18px; }
  .nav-link { font-size: 14px; }
  .header-nav-row { column-gap: 32px; }
}
@media (max-width: 1050px) { .main-nav { gap: 13px; } .header-nav-row { column-gap: 30px; } }

.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dark);
  padding: 4px;
  display: flex;
}

/* #icon-search sets stroke-width="1.7" as a presentation attribute, which
   beats inheritance from any ancestor — without this, the hover rule below
   has no effect at all, since the symbol's own attribute always wins over
   whatever the <use>/<svg> ancestor specifies. Forcing it to `inherit`
   hands control back to the CSS cascade. */
#icon-search {
  stroke-width: inherit;
}

.search-btn svg {
  stroke-width: 1.7;
  transition: stroke-width .15s ease;
}

.search-btn:hover svg {
  stroke-width: 2.6;
}

.search-btn--mobile {
  display: none;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}
.menu-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  display: block;
}

/* =========================================================
   Search modal
   ========================================================= */

body.modal-open { overflow: hidden; }

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 42, 63, .7);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.search-overlay.open { display: flex; }

.search-modal {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 480px;
  padding: 30px;
}

.search-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
}
.search-modal-close:hover { color: var(--text-dark); }

.search-modal h3 {
  font-size: 18px;
  margin-bottom: 18px;
}

.search-modal-form {
  display: flex;
  border: 1px solid var(--border);
  margin-bottom: 26px;
}

.search-modal-form input {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  min-width: 0;
}

/* niente "x" del browser nel campo di ricerca, come nel resto del sito */
.search-modal-form input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

.search-modal-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.search-tags a {
  border: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.search-tags a:hover { border-color: var(--primary); color: var(--primary); }

.search-recent-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.search-recent-item:first-of-type { border-top: none; }

.search-recent-item .thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.search-recent-item h5 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-dark);
}

.search-recent-item span:not(.title-line) {
  font-size: 11px;
  color: var(--text-muted);
}

/* =========================================================
   Ad banners / pubblicità
   ========================================================= */

.ad-strip {
  padding: 20px 0;
}

.ad-box {
  background: var(--bg-light);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
}

.ad-banner-img {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
}

/* scritta "Pubblicità" sotto i banner, piccola e discreta */
.ad-caption {
  text-align: center;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* Ad placeholders temporarily hidden on request (kept in the markup so they can
   be switched back on in the same spots later — just remove this class to restore). */
.ad-placeholder-hidden {
  display: none;
}

.ad-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 400px));
  justify-content: center;
  gap: 20px;
}

.ad-row .ad-box {
  width: 100%;
  height: 140px;
}

/* posizioni dei banner riprese dalla bozza; misure massime della bozza ma
   flessibili, così non escono dalla pagina sugli schermi stretti */
.ad-slot { padding-top: 10px; padding-bottom: 30px; }
/* banner della home dopo "Ultime sentenze": stesso spazio sopra e sotto. Sopra
   c'è già il fondo della sezione sentenze (88px, 44px su telefono); sotto si
   sommano questo padding e l'inizio della sezione delibere (56px, 32px) */
.ad-slot--after-sentenze { padding-top: 0; padding-bottom: 32px; }
@media (max-width: 720px) { .ad-slot--after-sentenze { padding-bottom: 12px; } }
.ad-box--wide { width: 880px; max-width: 100%; height: 90px; margin: 0 auto; }
.ad-box--sidebar { min-height: 220px; }
/* banner reali (immagini Traspare): l'immagine si adatta alla larghezza e
   l'altezza segue le sue proporzioni, niente tagli. Home: 880px al massimo,
   versione telefono sotto i 720px. Notizia: versione larga tra 561 e 980px
   (colonna sotto l'articolo, a tutta larghezza), sotto i 560px quella per
   computer, più leggibile su uno schermo stretto */
.ad-banner { display: block; box-shadow: 0 3px 6px rgba(0, 0, 0, .15); }
.ad-banner img { display: block; width: 100%; height: auto; }
.ad-banner--wide { width: 880px; max-width: 100%; margin: 0 auto; }
/* versione telefono della home al massimo 480px (in orizzontale non diventa enorme) */
@media (max-width: 720px) { .ad-banner--wide { width: 480px; } }
.sidebar-widget.ad-slot { padding: 0; margin-bottom: 40px; }


.ad-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* =========================================================
   Thumb / image placeholders
   ========================================================= */

.thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #dfe6f5, #c3cfe8);
}

.thumb svg {
  width: 34%;
  height: 34%;
  opacity: .55;
  color: #2c4a9e;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb--dark { background: linear-gradient(135deg, #33415e, #1c2436); }
.thumb--dark svg { color: #9fb2e0; }

.thumb--warm { background: linear-gradient(135deg, #f0e2c8, #d9c096); }
.thumb--warm svg { color: #7a5a24; }

.thumb--green { background: linear-gradient(135deg, #d6ecd8, #a9d1ae); }
.thumb--green svg { color: #2f6b3a; }

.badge {
  display: inline-block;
  background: var(--primary-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 0;
}

.badge-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* =========================================================
   Section title
   ========================================================= */

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

@keyframes dot-ping {
  0% { box-shadow: 0 0 0 0 rgba(202, 160, 54, .55); }
  70% { box-shadow: 0 0 0 10px rgba(202, 160, 54, 0); }
  100% { box-shadow: 0 0 0 0 rgba(202, 160, 54, 0); }
}

.section-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-dark);
  flex: 0 0 auto;
  animation: dot-ping 1.8s ease-out infinite;
}

.section-title h1,
.section-title h2 {
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

.section-title .rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

/* linea e pallino a metà delle lettere minuscole del titolo (il centro visivo
   della parola): centrati come riquadri starebbero a metà delle maiuscole,
   0,1 volte la grandezza del titolo più in alto */
.section-title { --title-shift: 2px; }                 /* titoli da 20px */
.section-title.page-title { --title-shift: 2.6px; }    /* categorie e 404, 26px */
.sidebar-widget .section-title { --title-shift: 1.6px; } /* "Ultime notizie", 16px */
.section-title .rule,
.section-title::before { position: relative; top: var(--title-shift); }

/* =========================================================
   Hero (home)
   ========================================================= */

.hero {
  position: relative;
  color: #fff;
  height: 680px;
  overflow: hidden;
  background: #0b0f16;
}

/* Infinite marquee, below the hero: two identical halves of repeated items
   inside a flex track, animated from translateX(0) to translateX(-50%) —
   since both halves are pixel-identical, the loop point is invisible
   regardless of viewport width or how many items actually fit on screen.
   A mask (not on the moving track, on the static outer section) fades the
   edges to transparent so items visually emerge from / dissolve into the
   white background rather than being cut off hard. */
.traspare-ticker {
  background: #fff;
  padding: 30px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.traspare-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: traspare-ticker-scroll 12s linear infinite;
}

.traspare-ticker-item {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  padding: 0 40px;
}

/* One item per half (of the 12 in the markup) everywhere, not just desktop —
   on a narrow phone screen the long phrase is close to the viewport width
   anyway, so as one instance fades out on the left the next is already
   fading in on the right, the same "disappear/reappear" look as before but
   without ever tiling multiple copies across the screen at once. */
.traspare-ticker-item:not(:nth-child(1)):not(:nth-child(7)) {
  display: none;
}

/* Each half's first item needs to start fully outside the masked viewport
   (nothing visible at all — not even a sliver of the first letter) at
   translateX(0), the position this recurs at on every loop, not just first
   paint. That takes a margin bigger than the container itself (1250px
   desktop / full viewport on mobile) — but only barely bigger: a small
   buffer (~20px) is all that separates "invisible" from "just about to
   emerge", so the item starts appearing almost immediately rather than
   after several seconds of travelling in from a much larger offset. */
.traspare-ticker-item:nth-child(1),
.traspare-ticker-item:nth-child(7) {
  margin-left: 100px;
}

.traspare-ticker-item span {
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--primary);
}

.traspare-ticker-item img {
  height: 46px;
  width: auto;
  display: block;
}

@keyframes traspare-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .traspare-ticker-track { animation: none; }
}

/* Desktop: the edge-to-edge, many-copies-at-once look reads as cluttered on
   a wide screen. Bound the section to the site's standard container (so it
   scrolls in the same centered column as everything else, not full-bleed),
   and keep only one item per half (out of the 12 in the markup) so a single
   phrase+logo crosses the space at a time, rather than a whole tiled row of
   them — still the same seamless two-identical-halves loop underneath, just
   with a single item per half instead of six. */
@media (min-width: 901px) {
  .traspare-ticker {
    max-width: 1250px;
    margin: 0 auto;
  }
  .traspare-ticker-item {
    padding: 0 380px;
  }
  .traspare-ticker-item:nth-child(1),
  .traspare-ticker-item:nth-child(7) {
    margin-left: 250px;
  }
  .traspare-ticker-track {
    animation-duration: 21s;
  }
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease-in-out;
  z-index: 0;
}

.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(8,12,20,.85) 0%, rgba(8,12,20,.55) 45%, rgba(8,12,20,.15) 75%);
}

.hero-content {
  padding: 60px 0 30px;
  max-width: 640px;
}



.hero-title {
  display: block;
  width: fit-content;
  font-size: 34px;
  font-weight: 800;
  margin: 14px 0 12px;
  color: #fff;
}

.hero-title-text,
.title-line {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  padding-bottom: 1px;
  transition: background-size .3s ease;
}

.block-link:hover .hero-title-text,
.block-link:hover .title-line,
.search-recent-item:hover .title-line {
  background-size: 100% 1px;
}

/* nelle anteprime sotto il titolo c'è la data (l'autore resta solo nell'articolo) */
.hero-date { font-size: 13px; opacity: .85; }
/* data accanto al tag: solo su telefono, nelle notizie grandi (categorie,
   "Ultime sentenze", "Ultime normative"), al posto di quella sotto il
   titolo, per guadagnare una riga */
.badge-date { display: none; font-size: 13px; opacity: .85; margin-left: 10px; }
@media (max-width: 720px) {
  .feature-main .badge-date { display: inline; }
  .feature-main .hero-date { display: none; }
}

.hero-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: 26px;
}

.hero-strip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 0 0 10px;
  opacity: .85;
}

.hero-strip-viewport {
  overflow: hidden;
}

.hero-strip-track {
  display: flex;
  gap: 14px;
  transition: transform .6s ease;
  will-change: transform;
}

.strip-item {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  padding: 24px 22px 26px;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: rgba(70, 80, 95, .35);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.strip-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--primary-dark);
}

.strip-item--clone .strip-progress {
  display: none;
}

.strip-item .thumb {
  width: 108px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: 0;
}

.strip-item .strip-text { font-size: 17px; font-weight: 700; line-height: 1.32; color: #fff; }
.strip-item .strip-date { font-size: 13px; opacity: .75; margin-top: 6px; font-weight: 400; }

/* =========================================================
   Card grids
   ========================================================= */

section.block { padding: 56px 0; }
section.block.block--sentenze { padding-bottom: 88px; }
.block-empty { margin: 0; color: var(--text-muted); }

.block-link {
  color: inherit;
  text-decoration: none;
}
.block-link--stack { display: block; }
.block-link--grid { display: contents; }
.block-link:hover .card-title,
.block-link:hover h3:not(.hero-title),
.block-link:hover .feature-list-title,
.block-link:hover h5 {
  color: var(--primary);
}
.block-link:hover .thumb img { transform: scale(1.04); }
.thumb img { transition: transform .3s ease; }

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.card .thumb {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 14px 0 6px;
  line-height: 1.35;
}

.card-meta { font-size: 12px; color: var(--text-muted); }

/* =========================================================
   Sentenze feature block
   ========================================================= */

.feature-grid {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 24px;
}

.feature-main {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 420px;
  color: #fff;
}

.feature-main-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.feature-main-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.feature-main-slide .block-link,
.feature-main-link {
  display: block;
  width: 100%;
}

.feature-main-slide .thumb {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.feature-main-slide .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.38) 30%, rgba(0,0,0,.65) 62%, rgba(0,0,0,.92) 100%);
}

.feature-main-content {
  position: relative;
  z-index: 2;
  padding: 28px;
}

.feature-main-content .hero-title { font-size: 26px; margin: 10px 0 8px; }

.feature-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.feature-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: background-color .6s ease;
}
.feature-dots span.current { background: #fff; }

.feature-excerpt { font-size: 13px; opacity: .9; max-width: 640px; margin-top: 10px; }
/* riassunto della notizia grande: righe limitate con "…" (main.js imposta
   -webkit-line-clamp: 3 righe fino a 980px e meno se il testo non ci sta) */
.feature-main .feature-excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   Ultime normative (home; fino al 19/10/2026 era "Ultimi approfondimenti"): notizia grande a tutta larghezza (stessa
   grafica e dissolvenza di "Ultime sentenze") + fila di schede che scorre di
   una posizione a ogni cambio, con barra di avanzamento sulla scheda attiva
   ========================================================= */

/* stessa altezza della notizia grande di "Ultime sentenze" */
.approf-main { height: 420px; }
.approf-main .feature-main-content { padding: 36px; }
/* su computer l'ultima riga del testo è centrata sulla stessa linea dei
   pallini in basso a destra (centro dei pallini a 40px dal fondo) */
@media (min-width: 981px) {
  .approf-main .feature-main-content { padding-bottom: 30px; }
  .approf-main .feature-main-content > :last-child { margin-bottom: 0; }
}
.approf-main .feature-main-content .hero-title { font-size: 30px; }
.approf-dots-inline { display: none; }
.approf-dots {
  position: absolute;
  right: 36px;
  bottom: 36px;
  z-index: 3;
  margin: 0;
  gap: 14px;
  align-items: center;
}
/* pallini tutti bianchi; quello attivo ha intorno un anello sottile con la
   scia sfumata che gira (come nel riferimento del 12 ottobre 2026). Stessi
   pallini anche in "Ultime sentenze" */
/* 4 pallini a 13px: la fila (anello compreso a sinistra) è larga quanto il tag */
.block--sentenze .feature-dots,
.approf-dots-inline { gap: 13px; margin: 0 0 18px 7px; align-items: center; }
.approf-dots span,
.approf-dots-inline span,
.block--sentenze .feature-dots span {
  position: relative;
  width: 8px;
  height: 8px;
  background: #fff;
}
.approf-dots span::after,
.approf-dots-inline span::after,
.block--sentenze .feature-dots span::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.15) 35%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  opacity: 0;
  transition: opacity .4s ease;
  animation: approf-ring-spin 1.6s linear infinite;
}
.approf-dots span.current::after,
.approf-dots-inline span.current::after,
.block--sentenze .feature-dots span.current::after { opacity: 1; }
@keyframes approf-ring-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .approf-dots span::after,
  .approf-dots-inline span::after,
  .block--sentenze .feature-dots span::after { animation: none; background: rgba(255,255,255,.8); }
}

.approf-strip { overflow: hidden; margin-top: 24px; }
.approf-track {
  display: flex;
  gap: 24px;
  transition: transform .6s ease;
}
.approf-card { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; }
.approf-card.is-hidden { display: none; }
.approf-card .thumb { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius); }
.approf-card .card-title { font-size: 16px; }
.approf-progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  height: 4px;
  width: 0%;
  background: var(--primary-dark);
}

@media (max-width: 980px) {
  .approf-card { flex-basis: calc((100% - 24px) / 2); }
  /* su tablet e telefono la notizia grande è identica a quella di "Ultime
     sentenze": stesso testo, stessi margini, pallini sopra il tag */
  .approf-main .feature-main-content { padding: 28px; max-width: 100%; }
  .approf-dots { display: none; }
  .approf-dots-inline { display: flex; }
  .approf-main .feature-main-content .hero-title { font-size: 26px; }
}
@media (max-width: 720px) {
  .approf-main { height: auto; min-height: 420px; }
  .approf-track { gap: 16px; }
  .approf-card { flex-basis: 80%; }
}

.feature-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg-lighter);
  border-radius: var(--radius);
  padding: 6px 18px;
}

.feature-list-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.feature-list-item.is-next { border-top-color: transparent; }
.feature-list-item.is-hidden { display: none; }

.feature-list-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  width: 0%;
  background: var(--primary-dark);
}

.feature-list-item .thumb {
  width: 62px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 0;
}

.feature-list-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
}
.feature-list-date { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Lista di "Ultime sentenze" con 3 voci: miniature e titoli più grandi e,
   accanto alla notizia grande, ogni voce occupa un terzo dell'altezza con il
   contenuto centrato, così non restano spazi vuoti tra le voci */
.block--sentenze .feature-list-item { gap: 16px; }
.block--sentenze .feature-list-item .thumb { width: 128px; height: 96px; }
.block--sentenze .feature-list-title { font-size: 15px; }
.block--sentenze .feature-list-date { font-size: 12px; }
@media (min-width: 981px) {
  .block--sentenze .feature-list { justify-content: stretch; }
  .block--sentenze .feature-list-item { flex: 1 1 0; align-items: center; }
}

/* =========================================================
   Listing pages (Normative / Delibere / Sentenze)
   ========================================================= */

.page-header { padding-top: 40px; }
.page-title { margin-bottom: 20px; }
.page-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 30px;
}
.page-lead p { margin: 0; }

/* =========================================================
   Media → Legal Talks: shorts YouTube verticali (9:16) affiancati, al
   massimo 5; su telefono e tablet scorrono in orizzontale
   ========================================================= */
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.short-thumb { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); }
.short-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.short-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(14, 42, 63, .55);
  border: 2px solid rgba(255,255,255,.85);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.short-card:hover .short-play { background: var(--primary-dark); border-color: var(--primary-dark); transform: scale(1.08); }
/* .thumb svg (segnaposto delle immagini mancanti) lo colorerebbe e ridimensionerebbe */
.short-thumb .short-play svg { width: 24px; height: 24px; color: #fff; fill: currentColor; opacity: 1; margin-left: 1px; }
/* margin-left 1px: con il triangolo centrato nel cerchio il baricentro della
   forma (il suo centro visivo) cade sull'asse; misurato, scarto sotto 0,5px */
.short-card .card-title { font-size: 15px; }
/* i pallini servono solo dove la fila scorre (fino a 980px) */
.shorts-dots { display: none; }
.short-card--more img { filter: blur(6px) brightness(.45); transform: scale(1.12); }
.block-link:hover .short-card--more img,
.short-card--more:hover img { transform: scale(1.16); }
.short-card--more .short-thumb::after { display: none; }
.short-more-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 14px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.short-thumb .short-more-label svg { width: 40px; height: 40px; color: #fff; opacity: 1; }
.short-card--more:hover .short-more-label svg { color: var(--primary-dark); }
.shorts-dots {
  justify-content: center;
  gap: 13px;
  margin-top: 18px;
}
.shorts-dots button {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #c9ced6;
  cursor: pointer;
}
.shorts-dots button.current { background: var(--primary); }
.shorts-dots button::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(14,42,63,0) 0%, rgba(14,42,63,.15) 35%, var(--primary) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  opacity: 0;
  transition: opacity .4s ease;
  animation: approf-ring-spin 1.6s linear infinite;
}
.shorts-dots button.current::after { opacity: 1; }
@media (max-width: 980px) {
  .shorts-dots { display: flex; }
}

@media (max-width: 980px) {
  .shorts-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* tablet: due shorts interi e un pezzo del terzo */
    grid-auto-columns: calc((100% - 24px) / 2.3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .shorts-grid::-webkit-scrollbar { display: none; }
  .short-card { scroll-snap-align: start; }
}
@media (max-width: 720px) {
  .shorts-grid { gap: 16px; grid-auto-columns: 62%; }
}
.count-badge {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
}

/* full-width lead story above the listing: same look as the "Ultime
   sentenze" box in Home, but a single static slide (no dots, no rotation) */
/* 62px dal sottotitolo, come le anteprime delle pagine successive: il margine
   si sovrappone ai 30px sotto il sottotitolo (.page-lead), quindi vale 60px */
.listing-feature { margin-top: 60px; margin-bottom: 30px; }
/* notizia grande delle categorie e di "Ultime normative": il riassunto
   è largo quanto il titolo. Il blocco di testo si stringe sul contenuto
   (fit-content) e il riassunto non conta nel calcolo (width: 0) ma poi ne
   occupa tutta la larghezza (min-width) */
.listing-feature .feature-main-content,
.approf-main .feature-main-content { width: fit-content; max-width: 100%; }
/* in "Ultime normative" il testo può arrivare fino a 60px prima dei
   pallini in basso a destra (pallini e anello occupano circa 72px dal bordo) */
@media (min-width: 981px) { .approf-main .feature-main-content { max-width: calc(100% - 132px); } }
.listing-feature .feature-excerpt,
.approf-main .feature-excerpt { width: 0; min-width: 100%; max-width: none; }
/* su telefono la notizia in evidenza delle categorie ha la stessa grafica
   delle anteprime sotto (immagine con il tag, poi titolo, data e riassunto
   su fondo bianco), solo con il titolo più grande (20px invece di 16px).
   Il tag sull'immagine esiste solo per questa versione */
.listing-feature-badge { display: none; }
/* "Più recente" sulla notizia in evidenza, con il pallino oro che pulsa
   come quello dei titoli di sezione: su computer e tablet accanto al tag
   dorato (--inline), su telefono in alto a destra sull'immagine */
.latest-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.latest-badge--inline {
  position: static;
  display: inline-flex;
  margin-left: 8px;
  vertical-align: top;
}
.latest-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-dark);
  flex: 0 0 auto;
  animation: dot-ping 1.8s ease-out infinite;
}
@media (max-width: 720px) {
  .listing-feature {
    min-height: 0;
    overflow: visible;
    border-radius: 0;
    color: inherit;
    margin-bottom: 0;
    padding-bottom: 30px;
  }
  /* linea di separazione come tra le anteprime */
  .listing-feature::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border);
  }
  .listing-feature .feature-main-slide { position: static; display: block; }
  .listing-feature .feature-main-slide .thumb {
    position: relative;
    inset: auto;
    aspect-ratio: 3/2;
    border-radius: var(--radius);
  }
  .listing-feature .feature-main-slide .thumb::after { display: none; }
  .listing-feature-badge { display: inline-block; }
  /* stessa distanza dal bordo del tag a sinistra */
  .listing-feature .thumb .latest-badge { display: inline-flex; }
  .listing-feature .latest-badge--inline { display: none; }
  .listing-feature .feature-main-content { padding: 30px 0 0; width: auto; }
  .listing-feature .feature-main-content > .badge,
  .listing-feature .badge-date { display: none; }
  .listing-feature .hero-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    margin: 12px 0 8px;
    color: var(--text-dark);
  }
  .listing-feature .hero-date {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 1;
    margin: 0 0 8px;
  }
  .listing-feature .feature-excerpt {
    font-size: 13.5px;
    color: var(--text-body);
    opacity: 1;
    margin: 0;
    width: auto;
    min-width: 0;
  }
}

.listing-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}

.listing-grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  /* le anteprime dell'ultima riga non hanno spazio sotto: la riga arriva
     fino al fondo dell'ultima anteprima */
  bottom: 0;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
}

.listing-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 30px 0;
  align-items: start;
}

.listing-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border);
}

.listing-grid > .listing-item:nth-child(odd) { padding-right: 30px; }
.listing-grid > .listing-item:nth-child(odd)::after { right: 30px; }
.listing-grid > .listing-item:nth-child(even) { padding-left: 30px; }
.listing-grid > .listing-item:nth-child(even)::after { left: 30px; }

.listing-grid > .listing-item:last-child::after,
.listing-grid > .listing-item:nth-last-child(2)::after { display: none; }

.listing-item .thumb { aspect-ratio: 3/2; border-radius: var(--radius); }
.listing-item h3 { font-size: 16px; margin: 12px 0 8px; line-height: 1.35; }
/* testo accanto all'immagine: il titolo parte allineato al bordo superiore */
@media (min-width: 981px) { .listing-item h3 { margin-top: -3px; } }
/* su telefono titoli a 20px, come la notizia in evidenza sopra */
@media (max-width: 720px) { .listing-item h3 { font-size: 20px; } }
.listing-item .card-meta { margin-bottom: 8px; }
.listing-item .excerpt {
  font-size: 13.5px;
  color: var(--text-body);
  margin: 0;
  /* massimo 3 righe con "…"; main.js riduce le righe se il titolo è lungo,
     così il testo non va mai oltre il fondo dell'immagine */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  /* stessa distanza che separa il sottotitolo della categoria dalla prima
     anteprima (62px nelle pagine 2 e successive) */
  padding: 62px 0 0;
}

.page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.page-btn:hover { border-color: var(--primary-dark); color: var(--primary-dark); }

.page-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.page-btn--arrow { font-size: 18px; font-weight: 400; line-height: 1; }

/* =========================================================
   Chi siamo
   ========================================================= */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: center;
  padding: 70px 0 62px;
}

.about-images {
  position: relative;
  min-height: 460px;
}

.about-images .thumb-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 76%;
  border-radius: var(--radius);
}

.about-images .thumb-front {
  position: absolute;
  bottom: 0;
  right: 4%;
  width: 62%;
  height: 76%;
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}

.about-text h1 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 32px;
}
.mobile-break { display: none; }

.about-text h1 .accent {
  display: inline-block;
  color: var(--primary-dark);
  border-right: 4px solid var(--primary);
  padding-right: 3px;
  height: 30px;
  line-height: 30px;
  vertical-align: top;
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink {
  50% { border-color: transparent; }
}
.about-text h4 {
  font-size: 16px;
  font-weight: 800;
  margin: 22px 0 8px;
}
.about-text .btn { margin-top: 20px; }

/* =========================================================
   Contatti
   ========================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: .8fr 1.4fr;
  gap: 30px;
  padding: 60px 0 62px;
}

.contact-info {
  background: var(--primary);
  background: linear-gradient(160deg, #17405c, #0e2a3f);
  color: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}

.contact-info-title {
  color: inherit; /* è un h1: non prende il colore scuro dei titoli */
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
@keyframes dot-ping-white {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.contact-info-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: dot-ping-white 1.8s ease-out infinite;
}

.contact-info-row {
  padding: 20px 26px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.contact-info-row:last-child { border-bottom: none; }
.contact-info-row strong { display: block; font-size: 14px; margin-bottom: 6px; }
.contact-info-row span { font-size: 14px; opacity: .9; display:block; line-height: 1.5; }

.contact-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.contact-form h3 { font-size: 18px; font-weight: 800; margin-bottom: 20px; }
/* il riquadro del messaggio si allunga fino a riempire il box (alto quanto il
   riquadro blu accanto), così "Invia" finisce in basso alla stessa distanza dal
   bordo del titolo "Invia un messaggio" dal bordo superiore */
.contact-form { display: flex; flex-direction: column; }
.contact-form form { flex: 1; display: flex; flex-direction: column; }
.contact-form form textarea { flex: 1; }
.contact-form form .btn { align-self: flex-start; }
.contact-form [data-contatti-esito] { margin: 0; }
.contact-form [data-contatti-esito]:not(:empty) { margin-top: 14px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-dark);
}

.contact-form textarea { min-height: 160px; margin-bottom: 20px; resize: vertical; }

/* Form contatti dinamico (packages/contatti): invio in corso, esito */
.contact-form form.is-invio button[type="submit"] { opacity: .6; cursor: progress; }
.contact-form .contatti-esito { margin-top: 16px; font-size: 14px; color: var(--text-muted); }
.contact-form .contatti-esito:empty { display: none; }
.contact-form .contatti-esito.is-ok { color: #1f7a3d; font-weight: 700; }
.contact-form .contatti-esito.is-errore { color: #b3261e; font-weight: 700; }

/* =========================================================
   Articolo (notizia singola)
   ========================================================= */

.article-layout {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 50px;
  padding: 30px 0 70px;
}

/* La colonna dell'articolo segue lo scorrimento, subito sotto l'header fisso.
   main.js sceglie cosa può restare visibile: banner e notizie insieme
   (.sidebar-sticky-all) se il blocco sta tutto nello schermo, altrimenti solo
   le notizie (.sidebar-sticky) se ci stanno loro, altrimenti niente */
@media (min-width: 981px) {
  .article-layout aside.sidebar-sticky-all .sidebar-group,
  .article-layout aside.sidebar-sticky .sidebar-news {
    position: sticky;
    top: calc(var(--header-h, 0px) + 24px);
  }
  /* solo notizie: il gruppo non deve fare da contenitore, così le notizie si
     muovono lungo tutta la colonna */
  .article-layout aside.sidebar-sticky .sidebar-group { display: contents; }
}

.breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  margin: 16px 0 14px;
}
.breadcrumb a { color: var(--text-muted); }

/* Link che diventano grassetto al passaggio del mouse (breadcrumb, menu del
   footer) senza spostare il testo accanto: l'::after, invisibile e alto 0,
   contiene la stessa parola in grassetto (data-text) e riserva già la sua
   larghezza */
.hover-bold { display: inline-grid; justify-items: center; }
.hover-bold::after {
  content: attr(data-text);
  font-weight: 700;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
/* il font è variabile: il peso passa gradualmente da normale a grassetto */
.hover-bold { transition: font-weight .3s ease; }
.hover-bold:hover { font-weight: 700; }

.article-title {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 26px;
  font-weight: 800;
  border-bottom: 1px solid var(--border);
  padding-bottom: 22px;
  margin-bottom: 20px;
}
.article-title::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--primary-dark);
  flex: 0 0 auto;
  animation: dot-ping 1.8s ease-out infinite;
}

.article-lead { font-size: 18px; line-height: 1.6; color: var(--text-dark); }
/* Occhiello in Markdown: paragrafi, elenchi e link come nel testo */
.article-lead p { font-size: inherit; margin: 0 0 .6em; }
.article-lead > :last-child { margin-bottom: 0; }
.article-lead ul, .article-lead ol { margin: 0 0 .6em 1.2em; }
.article-lead a { color: var(--primary-dark); text-decoration: underline; }
/* l'autore è solo nel box in fondo all'articolo: sotto l'occhiello c'è
   subito la data, alla distanza che prima aveva l'autore */
.article-date { font-size: 12px; color: var(--text-muted); margin-top: 20px; margin-bottom: 20px; }

.article-hero-img { border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.article-hero-img .thumb { aspect-ratio: 16/9; }

.article-body h4 { font-size: 20px; font-weight: 800; margin: 32px 0 12px; }
.article-body p,
.article-body li { font-size: 17px; line-height: 1.75; color: #2f3a48; }
.article-body p { margin-bottom: 22px; }
@media (max-width: 720px) {
  .article-lead { font-size: 17px; }
  .article-body p,
  .article-body li { font-size: 16px; }
}

.tags-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 10px;
}
.tags-row strong { font-size: 14px; color: var(--text-dark); }
.tag {
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 0;
}

/* Allegati, subito dopo il testo dell'articolo (il box dell'autore usa .author-box della bozza, più sotto) */
.article-attachments { margin: 26px 0 24px; }
.article-attachments h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px; color: var(--text-dark); }
.article-attachments ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.article-attachments a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 700;
  transition: border-color .2s;
}
.article-attachments a:hover { border-color: var(--primary-dark); }
.article-attachments svg { color: var(--primary-dark); }
.article-attachments .attachment-meta { font-size: 12px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }


.share-block { text-align: center; padding: 40px 0; }
.share-block h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.share-icons {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
}
.share-icons a,
.share-icons button {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: color .15s ease;
}
.share-icons a:hover,
.share-icons button:hover { color: var(--primary); }
.share-note { font-size: 13px; color: var(--text-muted); margin: -8px 0 18px; min-height: 1em; }
.share-note:empty { display: none; }
.copy-link {
  display: flex;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.copy-link input {
  flex: 1;
  border: none;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-muted);
  background: #fff;
}
.copy-link button {
  border: none;
  background: #fff;
  border-left: 1px solid var(--border);
  padding: 12px 16px;
  cursor: pointer;
  color: var(--text-dark);
}

.author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-top: 20px;
}
.author-box .name-row { display:flex; align-items:center; gap: 10px; margin-bottom: 8px; text-align: left; }
.author-box strong { font-size: 15px; color: var(--text-dark); }
.role-badge {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 0;
}
.author-box p { font-size: 13.5px; margin: 0; text-align: left; white-space: pre-line; }

.sidebar-widget { margin-bottom: 40px; }
.popular-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.popular-item:last-child { border-bottom: none; }
.popular-item .thumb { width: 96px; height: 72px; flex: 0 0 auto; border-radius: 0; order: 2; }
.popular-item .popular-text { order: 1; }
.popular-item h5 { font-size: 13px; font-weight: 700; color: var(--text-dark); margin: 0 0 6px; line-height: 1.35; }
.popular-item span:not(.title-line) { font-size: 11px; color: var(--text-muted); }
/* "Ultime notizie" accanto agli articoli: miniatura 96×72 (era 74×56, dove
   stavano solo 2 righe di titolo; ora 3), titolo e data alti quanto la
   miniatura, il titolo parte dal bordo superiore e la data è appoggiata al
   fondo; se non ci stanno main.js accorcia il titolo con "…". Si allineano
   le lettere, non le righe (margini negativi pari all'interlinea vuota) */
.sidebar-news .popular-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 72px;
}
.sidebar-news .popular-item h5 { margin-top: -4px; }
.sidebar-news .popular-item .popular-text > span { line-height: 1.2; margin-bottom: -2px; }

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(18,18,18,.82), rgba(14,14,14,.92)),
    url("../img/footer-columns.jpg");
  background-size: cover;
  background-position: center 35%;
  color: #fff;
  padding: 70px 0 0;
  overflow: hidden;
  margin-top: 62px;
}

body.sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.sticky-footer .site-footer {
  margin-top: auto;
}

.footer-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.footer-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
}

.footer-logo img {
  height: 84px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-links {
  max-width: 760px;
  margin: 0 auto;
}

.footer-social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 20px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-transform: uppercase;
}
/* al passaggio del mouse la parola si sottolinea con la stessa linea che si
   allarga da sinistra delle anteprime delle notizie (.title-line) */
.footer-social .social-text {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  padding-bottom: 1px;
  transition: background-size .3s ease;
}
.footer-social a:hover .social-text { background-size: 100% 1px; }

.social-icon { display: none; }

.footer-nav {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 22px 0;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}

.footer-copy {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  padding: 22px 0 26px;
}

.footer-copy-link {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-images { min-height: 360px; margin-bottom: 20px;}
  .contact-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  /* colonna sotto l'articolo: 40px tra "Condividi articolo" e il banner,
     uguali a quelli tra banner e "Ultime notizie" */
  .article-layout { row-gap: 40px; }
  .ad-row, .ad-row-2 { grid-template-columns: 1fr; }
  .listing-grid { grid-template-columns: 1fr; }
  .listing-grid::before { display: none; }
  .listing-grid > .listing-item:nth-child(odd) { padding-right: 0; }
  .listing-grid > .listing-item:nth-child(odd)::after { right: 0; }
  .listing-grid > .listing-item:nth-child(even) { padding-left: 0; }
  .listing-grid > .listing-item:nth-child(even)::after { left: 0; }
  .listing-item { grid-template-columns: 1fr; }
}

/* Menu a tendina (hamburger e pannello laterale) fino a 980px: tablet compresi.
   Nella bozza scattava solo sotto i 720px e tra 721 e 980px il menu da
   computer non ci stava ("Chi siamo" a capo, lente fuori schermo). */
@media (max-width: 980px) {
  .main-nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    display: none;
    padding: 10px 24px 20px;
  }
  .main-nav.open { display: flex; }
  .nav-link { padding: 12px 0; }
  .main-nav .nav-link { width: 100%; justify-content: center; }
  .main-nav .nav-link:not(:last-child) { border-bottom: 1px solid var(--border); }
  .nav-indicator { display: none; }
  .menu-toggle { display: flex; }
  .btn-contatti { padding: 10px 16px; font-size: 12px; }
  .site-header--stacked .logo img { height: 78px; }
  .site-header--stacked .header-inner { padding-bottom: 30px; }
  /* hamburger on the left, search on the right, logo truly centered between
     them regardless of the two icons' exact widths (3-column grid, like the
     desktop nav row already does) */
  .site-header--stacked .header-top {
    position: relative;
    display: grid;
    grid-template-columns: minmax(34px, 1fr) minmax(0, auto) minmax(34px, 1fr);
    column-gap: 14px;
    align-items: center;
  }
  .site-header--stacked .header-top .menu-toggle { justify-self: start; }
  .site-header--stacked .header-top .logo { justify-self: center; min-width: 0; }
  /* on narrow phones the logo shrinks to fit between the icons (keeping the
     column gap clear) instead of running into them; wider screens keep 78px */
  .site-header--stacked .header-top .logo img {
    height: auto;
    width: 100%;
    max-height: 78px;
    max-width: 250px;
  }
  .header-actions .search-btn { display: none; }
  .site-header--stacked .header-top .search-btn--mobile {
    display: flex;
    justify-self: end;
  }
  .search-btn--mobile svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.4;
  }
  .site-header--stacked .header-spacer { display: none; }

  /* the menu is a left-hand drawer (78% width, max 320px) over a dark
     overlay, not a dropdown under the header — slides in via transform so
     it can animate, rather than the old display:none/grid toggle */
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 22, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .menu-overlay.open {
    opacity: 1;
    visibility: visible;
  }
  .site-header--stacked .header-nav-row {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78%;
    max-width: 320px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: none;
    margin-top: 0;
    padding: 28px 28px 24px;
    transform: translateX(-100%);
    transition: transform .3s ease;
    overflow-y: auto;
  }
  .site-header--stacked .header-nav-row.open {
    transform: translateX(0);
  }
  .mobile-menu-logo { display: block; width: 100%; margin-bottom: 44px; }
  .mobile-menu-logo img { width: 100%; height: auto; }
  .site-header--stacked .header-nav-row .main-nav {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    background: none;
    border-bottom: none;
    padding: 0;
  }
  .site-header--stacked .header-nav-row .header-actions {
    width: 100%;
    margin-top: 20px;
  }
  .site-header--stacked .header-nav-row .btn-contatti {
    width: 100%;
    box-sizing: border-box;
  }
  .mobile-menu-copy {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: auto;
    padding-top: 24px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
  }
  .mobile-menu-copy a { color: inherit; text-decoration: none; font-weight: 700; }
}

@media (max-width: 720px) {
  .hero-title { font-size: 26px; }
  .hero { height: 560px; }
  .strip-item { gap: 14px; padding: 18px 16px 20px; }
  /* alta 64px: ci stanno due righe di titolo più l'autore (con 60px una sola) */
  .strip-item .thumb { width: 82px; height: 64px; }
  .strip-item .strip-text {
    font-size: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .strip-item .strip-date { font-size: 12px; margin-top: 4px; }
  .hero-content { padding-top: 60px; }
  .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  /* footer su telefono: social e linea larghi al massimo 330px (un po' più
     del logo) e centrati, con le icone che arrivano agli estremi della linea
     (icone più vicine, YouTube lontano dal bordo); menu su due righe da 4
     voci, ognuna centrata. Lo pseudo-elemento largo 100% fa da "a capo" dopo
     la quarta voce (le voci dalla quinta in poi vanno dopo, con order) */
  .footer-social { width: min(330px, 100%); margin-left: auto; margin-right: auto; }
  /* righe del menu centrate, con spazi uguali tra le voci; la linea sopra è
     larga quanto i social (330px) */
  .footer-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px clamp(10px, calc((100vw - 300px) / 5), 22px);
    font-size: 13px;
    border-top: none;
    background: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)) top center / min(330px, 100%) 1px no-repeat;
  }
  .footer-nav::before { content: ""; flex-basis: 100%; height: 0; order: 1; }
  .footer-nav a:nth-child(n+5) { order: 2; }
  .footer-social a { text-decoration: none; }
  .social-icon { display: block; }
  .social-text { display: none; }
  section.block { padding: 32px 0; }
  section.block.block--sentenze { padding-bottom: 44px; }
  /* elenchi delle categorie: su telefono si vedono tutte le 8 anteprime della
     pagina (la bozza ne nascondeva 3, che così non comparivano su nessuna
     pagina perché la pagina successiva riparte dalla nona) */
  .mobile-break { display: block; }
}

@media (max-width: 350px) {
  /* telefoni molto piccoli: quattro voci per riga nel footer ci stanno solo così */
  .footer-nav { font-size: 12px; column-gap: 8px; }
}

/* =========================================================
   Fondo pagina
   ========================================================= */

/* Fondo pagina uniforme: tra l'ultimo contenuto e il footer restano sempre
   62px (erano 40 fino al 13 ottobre 2026), cioè il margine superiore del
   footer (o, nelle pagine con footer spinto in fondo, .sticky-footer, i 62px
   in fondo al contenuto). Qui si
   tolgono gli spazi che si sommerebbero a quei 62px. */
body section.block:last-of-type { padding-bottom: 0; }
.card .card-meta:last-child,
.approf-card .card-meta { margin-bottom: 0; }
.article-layout { padding-bottom: 0; }
.article-layout .share-block { padding-bottom: 0; }
.article-layout .sidebar-news { margin-bottom: 0; }
.article-layout .sidebar-news .popular-item:last-child { padding-bottom: 0; }
.listing-empty { margin-bottom: 0; }
/* notizia in evidenza senza anteprime sotto (categoria con un solo articolo) */
.listing-feature:has(+ .listing-grid:empty) { margin-bottom: 0; }
.listing-grid > .listing-item:last-child { padding-bottom: 0; }
@media (min-width: 981px) {
  /* due colonne: anche la penultima, se sta nell'ultima riga */
  .listing-grid > .listing-item:nth-last-child(2):nth-child(odd) { padding-bottom: 0; }
}
.page-404 { padding-bottom: 62px; }

/* testo solo per motori di ricerca e lettori di schermo (es. h1 della home) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}