*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Poppins, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "JetBrains Mono", ui-monospace, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    /* GENERATED:tokens — non modificare a mano, rigenerato da scripts/generate-tokens.js (fonte: theme.json) */
    --primary:        #0a1f38;
    --neutral:        #e6dacf;
    --red-brand:      #d02c2a;
    --gold:           #ffce3a;
    --dark:           #222222;
    --darkbg:         #7a7066;
    --white:          #ffffff;
    --primary-hover:  #06182c;
    --red-hover:      #b62523;
    --gold-hover:     #e0a82e;
    --txt-soft:       #5a5048;
    --txt-softer:     #3a3530;
    --container:      1280px;
    --container-wide: 1440px;
    --border-line:    rgba(10, 31, 56, .12);
    --border-soft:    rgba(10, 31, 56, .08);
    --pad-x:          clamp(20px, 4vw, 40px);
    /* /GENERATED:tokens */
  }

  /*
   * Scala tipografica. Fuori dal blocco GENERATED perché la build lo
   * rigenera (gotcha 11). Ogni variabile è un ruolo, non una misura:
   * tutti gli elementi che fanno la stessa cosa la leggono da qui, e per
   * cambiare le dimensioni del sito si toccano questi valori e basta.
   * Restano fuori le misure di glifi e icone (lente, frecce, chiusure,
   * numeri delle date, iniziali, cifre delle statistiche dell'hero), che non
   * sono testo o che si restringono con una regola loro.
   *
   * `--fs-lead` sta un passo sotto `--fs-body` apposta: il testo
   * introduttivo si distingue per posizione e colore, non per misura, e
   * nella scheda inchiesta non deve gridare più del corpo che segue.
   */
  :root {
    /* Testo */
    --fs-badge:   11px;   /* badge e tag su card e poster */
    --fs-eyebrow: 13px;   /* occhielli, etichette maiuscole, date delle card */
    --fs-meta:    13px;   /* meta, autori, didascalie, chip */
    --fs-small:   13px;   /* meta in evidenza, bio brevi, paginazione */
    --fs-ui:      14px;   /* campi dei moduli, nomi negli autori, menu laterali */
    --fs-desc:    15px;   /* descrizioni delle card, testo dei moduli */
    --fs-body:    18px;   /* corpo di articoli e pagine */
    --fs-lead:    17px;   /* testi introduttivi: hero, pagine, sezioni */

    /* Menu e pulsanti */
    --fs-nav-top: 14px;   /* menu top (riga scura) */
    --fs-nav:     15px;   /* voci principali, anche nel drawer */
    --fs-subnav:  15px;   /* sottovoci; il terzo livello sta 1px sotto */
    --fs-button:  14px;   /* pulsanti; la variante grande sta 1px sopra */

    /* Titoli */
    --fs-card-title:    17px;   /* titoli di card, voci d'agenda, nomi di persone */
    --fs-title-sm:      22px;   /* titoli di card grandi, h3 della prosa */
    --fs-title-md:      clamp(22px, 2.2vw, 28px);   /* h2 della prosa, anni, gruppi, card in evidenza */
    --fs-section-title: clamp(24px, 3.4vw, 32px);   /* titoli di sezione dei blocchi */
    --fs-page-title:    clamp(26px, 3.4vw, 40px);   /* titoli di pagina e di persona */
    --fs-detail-title:  clamp(30px, 5vw, 52px);     /* titolo nell'hero delle schede */
    --fs-hero-title:    clamp(32px, 6vw, 62px);     /* titolo del blocco hero */
  }

  /*
   * Telefono. I valori fissi pensati per lo schermo largo, su 360-430px,
   * danno righe di corpo da 35 caratteri e titoli che occupano mezza
   * schermata: qui scendono di un passo, in proporzione. Il testo
   * introduttivo resta un passo sotto il corpo, come sopra.
   */
  @media (max-width: 600px) {
    :root {
      --fs-body:     17px;
      --fs-lead:     16px;
      --fs-button:   12px;

      /* I titoli in clamp() qui sarebbero fermi al loro minimo: lo si
         abbassa dichiarando la misura, un passo sotto per ciascuno. */
      --fs-card-title:    16px;
      --fs-title-sm:      19px;
      --fs-title-md:      20px;
      --fs-section-title: 21px;
      --fs-page-title:    23px;
      --fs-detail-title:  26px;
      --fs-hero-title:    28px;
    }
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 400;
    color: var(--dark);
    background: var(--white);
  }

  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  ul { list-style: none; padding: 0; margin: 0; }
  img, svg { max-width: 100%; display: block; }
  h1, h2, h3, h4, h5, h6, p { margin: 0; }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
/* ---- Solo per gli screen reader ----
     La stampano `the_posts_pagination()` e altri template tag del core. ---- */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* ---- Skip link ---- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 12px 20px;
    background: var(--gold);
    color: var(--primary);
    font-weight: 600;
    font-size: var(--fs-ui);
    z-index: 9999;
    overflow: visible;
  }
/* ---- Bottoni ---- */
.\!btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 20px !important;
    font-size: var(--fs-button) !important;
    white-space: nowrap !important;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease !important;
  }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: var(--fs-button);
    white-space: nowrap;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
.\!btn:hover { transform: translateY(-1px) !important; }
.btn:hover { transform: translateY(-1px); }
.btn--lg { padding: 14px 28px; font-size: calc(var(--fs-button) + 1px); }
.btn--block { width: 100%; }
.btn--red { background: var(--red-brand); color: #fff; }
.btn--red:hover { background: var(--red-hover); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); }
.btn--gold { background: var(--gold); color: var(--primary); }
.btn--gold:hover { background: var(--gold-hover); }
.btn--outline-white {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.6);
  }
.btn--outline-white:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn--outline {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
  }
.btn--outline:hover { background: var(--primary); color: #fff; }
/*
   * Pulsante core di Gutenberg (core/button): vestito come .btn .btn--red.
   * Due classi di specificità (0,2,0) apposta: nel corpo di pagine e articoli
   * deve battere `.detail-body__main a` (0,1,1), che lo farebbe rosso su rosso
   * e sottolineato (gotcha 25). I colori e le dimensioni scelti nell'editor
   * vincono comunque: le classi preset `has-*` sono !important e i colori
   * personalizzati arrivano inline.
   */
.wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: var(--fs-button);
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    background: var(--red-brand);
    color: #fff;
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
.wp-block-button .wp-block-button__link:hover,
  .wp-block-button .wp-block-button__link:focus-visible {
    transform: translateY(-1px);
    background: var(--red-hover);
    color: #fff;
  }
/* Stile «Contorno» del core: come .btn--outline. */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
  }
.wp-block-button.is-style-outline .wp-block-button__link:hover,
  .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
    background: var(--primary);
    color: #fff;
  }
/* ---- Placeholder a strisce (proxy delle immagini) ---- */
.ph {
    background:
      repeating-linear-gradient(135deg, rgba(10,31,56,.05) 0 8px, rgba(10,31,56,.02) 8px 16px),
      #f4efe8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(10,31,56,.45);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-eyebrow);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    padding: 8px;
    border-radius: 2px;
    min-height: 120px;
  }
.ph--dark {
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 8px, rgba(255,255,255,.02) 8px 16px),
      #1a304a;
    color: rgba(255,255,255,.6);
  }
/* =========================================================
     HEADER B — Editorial split (Row 1 primary · Row 2 oro)
     ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
/*
   * Da loggati la barra di amministrazione è fixed sopra tutto: con top:0
   * l'header ci si incolla sotto e i primi 32px — mezzo logo e il bordo
   * superiore — spariscono dietro di essa. Le soglie sono quelle del core:
   * 46px di barra sotto i 782px, e sotto i 600px la barra non è più fixed,
   * scorre via con la pagina e l'header torna a top:0.
   */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
  }
@media screen and (max-width: 600px) {
    body.admin-bar .site-header { top: 0; }
  }
.site-header--b { background: transparent; }
/* Row 1 */
.site-header--b .header-row-1 { background: var(--primary); color: #fff; }
.site-header--b .header-row-1__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
/* Brand — il lockup è tutto dentro l'immagine, niente testo affiancato */
.brand--b { display: flex; align-items: center; }
.brand__logo { height: 88px; width: auto; display: block; flex-shrink: 0; }
.brand__logo--footer { height: 72px; margin-bottom: 8px; }
/* Il logo esteso è 3:1: nel drawer stretto va contenuto per non spingere
     fuori il pulsante di chiusura sui viewport più piccoli. */
.mobile-drawer__head .brand__logo { height: 56px; }
/* Actions (utility links, search, dona, toggle) */
.header-row-1__actions { display: flex; align-items: center; gap: 22px; font-size: var(--fs-nav-top); letter-spacing: .08em; }
.header-row-1__actions .util { text-transform: uppercase; color: #fff; }
.header-row-1__actions .util:hover { color: var(--gold); }
.header-search {
    border: 0;
    background: transparent;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
    color: #fff;
  }
.header-search:hover,
  .header-search[aria-expanded="true"] { color: var(--gold); }
/* Ricerca nella riga blu (row-utility.php + header.js): aperta, prende il
     posto delle voci del menu top e della lente; la × la richiude. */
.header-ricerca {
    display: flex;
    align-items: center;
    gap: 6px;
  }
.header-ricerca[hidden] { display: none; }
.header-ricerca .search-form { width: 380px; }
.header-row-1__actions.is-cercando .util,
  .header-row-1__actions.is-cercando .header-search { display: none; }
.header-ricerca__chiudi {
    border: 0;
    background: transparent;
    padding: 2px 6px;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
  }
.header-ricerca__chiudi:hover { color: var(--gold); }
/* Modulo di ricerca (searchform.php): campo che si allarga + pulsante. */
.search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }
.search-form .search-box { flex: 1; min-width: 0; }
/* Nella riga blu: campo bianco pieno, senza bordo da evidenziare — il
     contrasto col fondo basta — e pulsante oro, che sul blu si vede. */
.search-form--header { gap: 8px; letter-spacing: normal; }
.search-form--header .search-box {
    padding: 6px 14px;
    background: #fff;
    border-color: transparent;
  }
.search-form--header .search-box:focus-within {
    border-color: transparent;
    outline: 0;
  }
.search-form--header .search-box input::-moz-placeholder { color: var(--txt-soft); }
.search-form--header .search-box input::placeholder { color: var(--txt-soft); }
.search-form--header .search-form__invia { padding: 7px 16px; background: var(--gold); color: var(--primary); }
.search-form--pagina { max-width: 480px; margin-top: 18px; }
.search-form--pagina .search-box { background: #fff; }
/* Su fondo blu: riga top dell'header e drawer. */
.mobile-drawer__ricerca { padding: 18px 22px 0; }
.search-form--scuro .search-box { border-color: rgba(255, 255, 255, .3); }
.search-form--scuro .search-box:focus-within { border-color: #fff; }
.search-form--scuro .search-box span[aria-hidden],
  .search-form--scuro .search-box input { color: #fff; }
.search-form--scuro .search-box input::-moz-placeholder { color: rgba(255, 255, 255, .6); }
.search-form--scuro .search-box input::placeholder { color: rgba(255, 255, 255, .6); }
.search-form--scuro .btn--primary { background: var(--gold); color: var(--primary); }
.menu-toggle {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
  }
.menu-toggle span { display: block; width: 20px; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
/* Row 2 — nav principale */
.site-header--b .header-row-2 {
    background: var(--gold);
    border-bottom: 1px solid rgba(10,31,56,.08);
  }
/* Il contenitore tiene due blocchi: il menu a sinistra e le icone social a
     bandiera a destra. La spaziatura fra le voci è passata a .header-row-2__nav,
     che è il loro contenitore diretto. */
.site-header--b .header-row-2__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: var(--fs-nav);
    font-weight: 600;
    color: var(--primary);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
/* `align-self: stretch` perché le voci dentro restino alte quanto la barra:
     la sottolineatura dell'attiva si appoggia al bordo inferiore dell'header,
     e senza questo si fermerebbe all'altezza del testo. */
.site-header--b .header-row-2__nav {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 36px;
    min-width: 0;
  }
.site-header--b .header-row-2__item {
    position: relative;
    /* Tutte le voci alte quanto la barra: così la sottolineatura della voce
       attiva si appoggia al bordo inferiore dell'header e non al testo. */
    align-self: stretch;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
  }
.site-header--b .header-row-2__item:hover { color: var(--red-brand); }
.site-header--b .header-row-2__item.is-active,
  .site-header--b .header-row-2__item.current-menu-item { color: var(--red-brand); }
.site-header--b .header-row-2__item.is-active::after,
  .site-header--b .header-row-2__item.current-menu-item::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 5px;
    background: var(--red-brand);
  }
/*
   * Titolo di una voce con dropdown. È un flex-child del contenitore, e si
   * prende tutta l'altezza della barra perché l'area cliccabile sia quella
   * della voce e non la sola riga di testo. Vale sia quando è un <a> — voce
   * con destinazione — sia quando resta uno <span>.
   */
.site-header--b .header-row-2__link {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    color: inherit;
  }
.site-header--b .header-row-2__item-caret { opacity: .6; font-size: 20px; line-height: 1; }
/* Dropdown */
.header-row-2__item.has-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
.nav-dropdown {
    position: absolute;
    top: 100%; left: 0;
    background: #fff;
    border-top: 2px solid var(--red-brand);
    box-shadow: 0 8px 24px rgba(10,31,56,.12);
    min-width: 380px;
    z-index: 200;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }
.header-row-2__item.has-dropdown:hover .nav-dropdown,
  .header-row-2__item.has-dropdown:focus-within .nav-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
.nav-dropdown ul { padding: 8px 0; list-style: none; margin: 0; }
.nav-dropdown li a {
    display: block;
    padding: 9px 26px;
    font-size: var(--fs-subnav);
    font-weight: 500;
    color: var(--primary);
    letter-spacing: .02em;
    text-transform: none;
  }
.nav-dropdown li a:hover { background: var(--neutral); color: var(--red-brand); }
.nav-dropdown li.is-active > a { color: var(--red-brand); }
/* Terzo livello: sempre visibile, rientrato sotto il genitore */
.nav-dropdown ul.nav-dropdown__sub {
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
  }
.nav-dropdown__sub li a {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 42px;
    font-size: calc(var(--fs-subnav) - 1px);
    color: var(--primary);
    opacity: .8;
  }
.nav-dropdown__sub li a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 1px;
    margin-right: 8px;
    vertical-align: middle;
    background: currentColor;
    opacity: .5;
  }
.nav-dropdown__sub li a:hover { opacity: 1; }
/* =========================================================
     STICKY COMPRESSION
     Oltre i 120px di scroll l'header si stringe e torna alto solo sotto i
     40px: le due soglie sono in header.js e il divario fra loro deve restare
     più largo dei ~68px che l'header perde qui sotto (52 di riga 1, 16 di
     riga 2), altrimenti lo scroll anchoring del browser riporta scrollY sotto
     la soglia e header e pagina entrano in oscillazione. Si stringono solo
     logo, padding e barra del menu, il tutto accompagnato in 250ms perché il
     contenuto sotto non faccia un salto secco.
     La barra del menu si stringe ma non sparisce: è la navigazione principale
     e deve restare raggiungibile anche a pagina scrollata. Le voci sono
     `align-self: stretch`, quindi la sottolineatura dell'attiva segue la
     nuova altezza da sé.
     ========================================================= */
.site-header--b .header-row-1__inner { transition: padding .25s ease; }
.site-header--b .brand__logo { transition: height .25s ease; }
.site-header--b .header-row-2__inner { transition: height .25s ease; }
.site-header.is-scrolled .header-row-1__inner { padding-top: 12px; padding-bottom: 12px; }
.site-header.is-scrolled .brand__logo { height: 52px; }
.site-header.is-scrolled .header-row-2__inner { height: 44px; }
/* =========================================================
     MOBILE DRAWER
     ========================================================= */
.mobile-drawer {
    position: fixed;
    inset: 0;
    background: var(--primary);
    color: #fff;
    z-index: 100;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__head {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
.mobile-drawer__close {
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
    color: var(--gold);
    font-size: 24px;
  }
.mobile-drawer__nav { padding: 18px 22px 28px; flex: 1; }
.mobile-drawer__nav ul { list-style: none; padding: 0; margin: 0; }
/* Colonna, non riga: la voce ha sotto di sé il proprio sottomenu. */
.mobile-drawer__nav li { display: flex; flex-direction: column; }
.mobile-drawer__nav li > a,
  .mobile-drawer__nav > a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: var(--fs-nav);
    font-weight: 600;
    /* Meno spaziatura di prima: a 16px la stessa .1em allargherebbe troppo le
       voci lunghe, che su schermo stretto andrebbero a capo. */
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
  }
.mobile-drawer__nav li > a::after,
  .mobile-drawer__nav > a::after { content: '›'; opacity: .5; font-size: 16px; }
.mobile-drawer__nav li.current-menu-item > a { color: var(--gold); }
/*
   * Sottolivelli: da mobile sono l'unica strada verso i contenuti delle
   * edizioni (il desktop li apre in dropdown). Restano aperti e rientrati.
   */
.mobile-drawer__nav .sub-menu { padding-left: 14px; }
.mobile-drawer__nav .sub-menu > li > a {
    padding: 12px 0;
    font-size: var(--fs-subnav);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: none;
    color: rgba(255,255,255,.82);
  }
.mobile-drawer__nav .sub-menu .sub-menu > li > a {
    font-size: calc(var(--fs-subnav) - 1px);
    color: rgba(255,255,255,.68);
  }
.mobile-drawer__cta {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
/* I due pulsanti in parti uguali sulla stessa riga. Il padding laterale è
     più stretto di quello di `.btn`: su uno schermo da 320px restano 133px a
     testa, e «NEWSLETTER» in maiuscoletto spaziato non ci sta con 20px per
     lato. `min-width: 0` perché un flex item non scende mai sotto la larghezza
     del proprio contenuto, se non glielo si dice. */
.mobile-drawer__cta-row {
    display: flex;
    gap: 10px;
  }
.mobile-drawer__cta-row .btn {
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
.mobile-drawer__cta-row .\!btn {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
/* =========================================================
     FOOTER
     ========================================================= */
.site-footer { background: var(--primary); color: #fff; }
/* Newsletter — colonna destra del footer */
.footer-newsletter-col .footer-newsletter__head { margin-bottom: 20px; }
.footer-newsletter__head { display: flex; flex-direction: column; gap: 6px; }
.footer-newsletter__eye {
    font-size: var(--fs-eyebrow);
    color: var(--gold);
    letter-spacing: .16em;
    font-weight: 600;
    text-transform: uppercase;
  }
.footer-newsletter__title {
    font-size: var(--fs-title-sm);
    font-weight: 600;
    letter-spacing: -.01em;
  }
.newsletter-form--expanded { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.newsletter-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.newsletter-form__row .newsletter-form__field:last-child { grid-column: 1 / -1; }
.newsletter-form__field { display: flex; flex-direction: column; gap: 6px; }
.newsletter-form__field label {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
  }
.newsletter-form__field input {
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font: inherit;
    font-size: var(--fs-ui);
    padding: 10px 14px;
    transition: border-color .15s ease, background .15s ease;
    outline: none;
    width: 100%;
  }
.newsletter-form__field input:focus { border-color: var(--gold); background: rgba(255,255,255,.1); }
.newsletter-form__field input::-moz-placeholder { color: rgba(255,255,255,.3); }
.newsletter-form__field input::placeholder { color: rgba(255,255,255,.3); }
.newsletter-form__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
.newsletter-form__checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.newsletter-form__checkbox input[type="checkbox"] {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 1px;
    border: 1.5px solid rgba(255,255,255,.6);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: border-color .15s, background-color .15s;
  }
.newsletter-form__checkbox input[type="checkbox"]:hover { border-color: var(--gold); }
.newsletter-form__checkbox input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
.newsletter-form__checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 9px;
    border: solid var(--primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
.newsletter-form__checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.newsletter-form__checkbox span { font-size: var(--fs-meta); line-height: 1.5; color: rgba(255,255,255,.5); }
.newsletter-form__checkbox a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.newsletter-form__checkbox a:hover { color: #fff; }
/* Contact Form 7 — il plugin avvolge campi e checkbox in <span> propri:
     queste regole riportano il suo markup al layout del form del tema.
     Le classi .wpcf7-* sono in safelist in tailwind.config.js, altrimenti
     il purge le eliminerebbe (non compaiono in nessun file PHP). */
.footer-newsletter-col .wpcf7 { min-width: 0; }
.footer-newsletter-col .wpcf7-form-control-wrap { display: block; }
.footer-newsletter-col .wpcf7-not-valid-tip { font-size: var(--fs-meta); margin-top: 4px; color: #ff9d9b; }
.footer-newsletter-col .newsletter-form__field input.wpcf7-not-valid { border-color: #ff9d9b; }
.newsletter-form__checkbox .wpcf7-list-item { display: block; margin: 0; }
.newsletter-form__checkbox .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
  }
.newsletter-form__checkbox .wpcf7-list-item-label::before,
  .newsletter-form__checkbox .wpcf7-list-item-label::after { content: none; }
/* Lo spinner sta fuori dal flusso finché il form non è in invio, altrimenti
     terrebbe 24px di spazio vuoto accanto al bottone. */
.newsletter-form__bottom .wpcf7-spinner {
    display: none;
    margin: 0 0 0 12px;
    background-color: rgba(255,255,255,.55);
  }
.newsletter-form__bottom .wpcf7-spinner::before { background-color: var(--primary); }
.newsletter-form--expanded.submitting .wpcf7-spinner { display: inline-block; }
/* CF7 tiene il submit disabilitato finché non si spunta il consenso:
     senza questo il bottone sembra attivo ma non risponde al clic. */
.newsletter-form__bottom .btn:disabled { opacity: .45; }
.newsletter-form__bottom .\!btn:disabled { opacity: .45 !important; }
.newsletter-form__bottom .btn:disabled:hover { transform: none; background: var(--red-brand); }
.newsletter-form__bottom .\!btn:disabled:hover { transform: none !important; background: var(--red-brand) !important; }
.footer-newsletter-col .wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 10px 14px;
    border-width: 1px;
    border-radius: 4px;
    font-size: var(--fs-small);
    line-height: 1.5;
  }
.footer-newsletter-col .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--gold);
    color: var(--gold);
  }
.footer-newsletter-col .wpcf7 form.invalid .wpcf7-response-output,
  .footer-newsletter-col .wpcf7 form.unaccepted .wpcf7-response-output,
  .footer-newsletter-col .wpcf7 form.failed .wpcf7-response-output,
  .footer-newsletter-col .wpcf7 form.aborted .wpcf7-response-output,
  .footer-newsletter-col .wpcf7 form.spam .wpcf7-response-output {
    border-color: #ff9d9b;
    color: #ff9d9b;
  }
/* Columns */
.footer-cols {
    max-width: var(--container);
    margin: 0 auto;
    padding: 56px var(--pad-x) 36px;
    display: grid;
    grid-template-columns: 1fr 0.8fr 1.6fr;
    gap: 56px;
    align-items: start;
  }
.footer-social .footer-col__title { margin-bottom: 16px; }
.footer-brand__name { font-size: var(--fs-lead); font-weight: 600; margin-top: 18px; line-height: 1.3; }
.footer-brand__name small {
    display: block;
    font-size: var(--fs-small);
    font-weight: 400;
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .12em;
  }
/* Le icone stanno in due posti — colonna del footer e barra oro del menu —
     con lo stesso markup (`prm_the_socials()`) e due vestizioni diverse. */
.socials { display: flex; gap: 8px; }
.socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
.socials a svg { width: 19px; height: 19px; display: block; transition: transform .15s ease; }
.socials a:hover svg { transform: scale(1.08); }
/* Footer e drawer: cerchi contornati su fondo scuro, stesso trattamento. */
.socials--footer { margin-top: 20px; }
.socials--footer a,
  .socials--drawer a {
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
  }
.socials--footer a:hover,
  .socials--drawer a:hover { background: rgba(255,255,255,.08); border-color: var(--gold); color: var(--gold); }
/* Nel drawer stanno sotto due pulsanti a piena larghezza: centrate, o
     sembrerebbero appoggiate al bordo sinistro per sbaglio. */
.socials--drawer {
    justify-content: center;
    margin-top: 6px;
  }
/* Barra del menu: niente cerchi, il fondo è già oro. Solo le icone, che al
     passaggio diventano rosse come le voci accanto. */
.socials--menu {
    gap: 4px;
    flex-shrink: 0;
    color: var(--primary);
  }
.socials--menu a {
    width: 34px; height: 34px;
    border-radius: 999px;
  }
.socials--menu a:hover { color: var(--red-brand); background: rgba(10, 31, 56, .06); }
/* Più grandi del testo delle voci (--fs-nav): un'icona alla stessa misura
     di una maiuscoletta sembra più piccola di quanto sia. Il tondo sta comodo
     anche nella barra compressa, che scende a 44px. */
.socials--menu a svg { width: 22px; height: 22px; }
.footer-col__title {
    font-size: var(--fs-eyebrow);
    color: var(--gold);
    letter-spacing: .16em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 20px var(--pad-x);
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-eyebrow);
    color: rgba(255,255,255,.55);
    letter-spacing: .06em;
    text-transform: uppercase;
    gap: 18px;
    flex-wrap: wrap;
  }
.footer-bottom__links { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: calc(var(--fs-eyebrow) - 1px); }
.footer-bottom a:hover { color: var(--gold); }
/* =========================================================
     HERO — blocco prm/hero. Varianti fondo: scuro (29), bianco (07),
     beige sfumato (04/05), beige uniforme (01). Eyebrow flag o testo.
     Stats/badge opzionali.
     ========================================================= */
.hero {
    background: var(--primary);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
.hero--light { background: #fff; color: var(--primary); }
/* Variante beige: sfumatura sabbia (blocchi 04/05 del prototipo). */
.hero--beige { background: linear-gradient(180deg, #fff 0%, #f8f3ea 100%); color: var(--primary); }
/* Variante beige uniforme: sabbia piena (blocco 01 del prototipo, fondo .hero-b). */
.hero--neutral { background: var(--neutral); color: var(--primary); }
/* Le tre varianti chiare condividono il contesto su fondo chiaro. */
.hero--light .hero-flag,
  .hero--beige .hero-flag,
  .hero--neutral .hero-flag { color: #fff; }
.hero--light .hero-lead,
  .hero--beige .hero-lead,
  .hero--neutral .hero-lead { color: var(--txt-soft); }
.hero--light .hero-stats,
  .hero--beige .hero-stats,
  .hero--neutral .hero-stats { border-top-color: var(--border-line); }
.hero--light .hero-stats__lbl,
  .hero--beige .hero-stats__lbl,
  .hero--neutral .hero-stats__lbl { opacity: 1; color: var(--darkbg); }
/* Eyebrow testuale (alternativa al flag rosso) — blocchi 05/07 del prototipo. */
.hero-eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    color: var(--red-brand);
    letter-spacing: .07em;
    text-transform: uppercase;
  }
/* Fondo scuro (primary): occhiello e CTA primaria in oro anziché rosso. */
.hero--dark .hero-flag { background: var(--gold); color: var(--primary); }
.hero--dark .hero-flag__dot { background: var(--primary); }
.hero--dark .hero-eyebrow { color: var(--gold); }
.hero--dark .btn--red { background: var(--gold); color: var(--primary); }
.hero--dark .btn--red:hover { background: var(--gold-hover); }
.hero__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 72px var(--pad-x) 56px;
    display: grid;
    /* Stacco minimo fra testo e poster: lo spazio tolto al gap (era 56px) va
       tutto alla colonna delle immagini, quella del testo resta larga uguale. */
    grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
/* Senza poster: colonna unica, il contenuto occupa tutta la larghezza. */
.hero--no-poster .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--no-poster .hero-lead { max-width: 760px; }
.hero-flag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--red-brand);
    color: #fff;
    padding: 8px 14px;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
.hero-flag__dot { width: 8px; height: 8px; background: #fff; border-radius: 999px; }
.hero-title {
    margin-top: 14px;
    font-size: var(--fs-hero-title);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
.hero-title em { font-style: italic; font-weight: 300; }
.hero-lead {
    margin-top: 22px;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: rgba(255,255,255,.78);
    max-width: 500px;
  }
.hero-ctas { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
/* Un'etichetta più larga della colonna va a capo dentro il pulsante
     invece di uscire dallo schermo (.btn di suo è `nowrap`). */
.hero-ctas .btn { max-width: 100%; white-space: normal; text-align: center; }
.hero-ctas .\!btn { max-width: 100% !important; white-space: normal !important; text-align: center !important; }
.hero-stats {
    /* Distanza dalle CTA sopra: alla riga di separazione si somma il
       `padding-top` qui sotto, quindi lo stacco a schermo è ~54px. */
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    gap: clamp(14px, 4vw, 56px);
    /* Le voci restano sempre sulla stessa riga: quando lo spazio manca si
       stringono e sono le label ad andare a capo. */
    flex-wrap: nowrap;
  }
.hero-stats__item {
    /* Un flex item non scende sotto la larghezza del suo contenuto finché ha
       il `min-width: auto` implicito: senza questo azzeramento non si
       restringe e, con `nowrap`, la riga andrebbe in overflow. */
    min-width: 0;
  }
.hero-stats__num {
    /* Resta 28px fino a ~540px di viewport: si rimpicciolisce solo dove
       quattro voci affiancate non ci starebbero. */
    font-size: clamp(20px, 5.2vw, 28px);
    font-weight: 600;
    color: var(--gold);
    letter-spacing: -.01em;
  }
.hero--light .hero-stats__num,
  .hero--beige .hero-stats__num,
  .hero--neutral .hero-stats__num { color: var(--red-brand); }
.hero-stats__lbl {
    font-size: var(--fs-eyebrow);
    opacity: .65;
    letter-spacing: .12em;
    margin-top: 4px;
    text-transform: uppercase;
    /* Ultima risorsa: una label di una sola parola più larga della voce viene
       spezzata invece di sfondare la riga. */
    overflow-wrap: break-word;
  }
/* Stessa rete di sicurezza per un numero lungo e senza spazi (1.500.000). */
.hero-stats__num { overflow-wrap: break-word; }
.hero-poster { position: relative; align-self: stretch; }
.hero-poster .ph { width: 100%; height: 420px; }
/* La locandina si vede sempre intera: altezza dalle sue proporzioni, né
     ritagliata (cover) né con le fasce vuote di un contain in un riquadro
     fisso. L'altezza fissa resta solo al segnaposto. */
.hero-poster__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
  }
/* ---- Mini slider del poster (da due immagini in su) ----
     Una striscia a scatti: senza script si scorre col dito, un'immagine alla
     volta. Il riquadro ha le proporzioni della prima immagine (le passa
     render.php); le altre lo riempiono, ritagliate se sono di forma diversa. */
.hero-slider__track {
    display: flex;
    aspect-ratio: var(--hero-slider-ratio, 16 / 9);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 2px;
  }
.hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hero-slider__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.hero-slider__slide .hero-poster__img { height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0; }
.hero-slider__comandi {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
.hero-slider__comandi[hidden] { display: none; }
.hero-slider__punti { display: flex; }
/* Il punto è piccolo, la zona da toccare un po' meno: stretta per tenere i
     punti vicini, alta quanto basta al dito. */
.hero-slider__punto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
.hero-slider__punto::before {
    content: "";
    width: 9px;
    height: 9px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .55;
    transition: opacity .15s, background .15s;
  }
.hero-slider__punto:hover::before { opacity: 1; }
.hero-slider__punto[aria-current="true"]::before { background: currentColor; opacity: 1; }
.hero-slider__punto:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
.hero-poster__badge {
    background: var(--gold);
    color: var(--primary);
    padding: 14px 18px;
    width: 100%;
    box-sizing: border-box;
  }
.hero-poster__badge-eye {
    font-size: var(--fs-badge);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
.hero-poster__badge-title {
    font-size: var(--fs-desc);
    font-weight: 600;
    margin-top: 6px;
    line-height: 1.25;
  }
/* =========================================================
     MAGAZINE — blocco prm/magazine (05 / 05a del prototipo).
     ========================================================= */
.section { padding-block: clamp(56px, 8vw, 90px); }
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
.section-head-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 36px;
    gap: 18px;
    flex-wrap: wrap;
  }
.eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    color: var(--red-brand);
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
.eyebrow--dark { color: var(--gold); }
.section-title {
    font-size: var(--fs-section-title);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--primary);
    line-height: 1.1;
  }
.section-title--dark { color: #fff; }
.tag {
    display: inline-block;
    background: var(--red-brand);
    color: #fff;
    font-size: var(--fs-badge);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
  }
.magazine { background: var(--primary); color: #fff; }
.magazine:not(.magazine--light):not(.magazine--neutral) .section-head-row .btn--outline {
    border-color: rgba(255,255,255,.35);
    color: #fff;
  }
.magazine:not(.magazine--light):not(.magazine--neutral) .section-head-row .btn--outline:hover {
    background: #fff;
    color: var(--primary);
  }
.magazine--light { background: #fff; color: var(--primary); }
.magazine--neutral { background: var(--neutral); color: var(--primary); }
.magazine--light .magazine__item,
  .magazine--neutral .magazine__item { border-bottom-color: var(--border-line); }
.magazine--light .magazine__featured-meta,
  .magazine--neutral .magazine__featured-meta { opacity: .65; color: var(--txt-soft); }
/* ---- Chip filtri (riusabile, allineato al prototipo inchieste-vincitori) ---- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
    background: transparent;
    border: 1px solid rgba(10, 31, 56, .2);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
.chip:hover:not(.is-active) { background: #fff8e9; }
.chip.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    cursor: default;
  }
.chip:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
/* Override per il contesto "magazine scuro" (fondo primary). */
.magazine:not(.magazine--light):not(.magazine--neutral) .chip {
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
  }
.magazine:not(.magazine--light):not(.magazine--neutral) .chip:hover:not(.is-active) {
    background: rgba(255, 255, 255, .08);
  }
.magazine:not(.magazine--light):not(.magazine--neutral) .chip.is-active {
    background: var(--gold);
    color: var(--primary);
    border-color: var(--gold);
  }
/* Reset specifico magazine__filters: il vecchio styling text-only è sostituito dai chip-pulsanti. */
.magazine__empty {
    font-size: var(--fs-desc);
    opacity: .7;
    padding: 24px 0;
  }
.magazine__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 28px;
    align-items: start;
  }
.magazine__featured { display: flex; flex-direction: column; }
.magazine__featured-link {
    display: flex;
    flex-direction: column;
    color: inherit;
  }
.magazine__featured .ph,
  .magazine__featured-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 2px;
  }
/* Categoria: badge rosso come nel prototipo, su tutte le varianti. */
.magazine__featured .tag { margin-top: 18px; align-self: flex-start; }
.magazine__featured-title {
    font-size: var(--fs-title-md);
    font-weight: 600;
    margin-top: 14px;
    line-height: 1.22;
    letter-spacing: -.01em;
    text-wrap: balance;
    /* clamp di sicurezza per titoli molto lunghi */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
.magazine__featured-meta {
    font-size: var(--fs-small);
    opacity: .65;
    margin-top: 12px;
  }
.magazine__col {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
.magazine__item { display: block; }
.magazine__item-link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: inherit;
  }
.magazine__item .ph,
  .magazine__item-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 2px;
  }
.magazine__item-body { display: flex; flex-direction: column; gap: 6px; }
.magazine__item .tag { align-self: flex-start; }
.magazine__item-title {
    font-size: var(--fs-card-title);
    font-weight: 500;
    line-height: 1.35;
    text-wrap: balance;
    /* Riserva sempre esattamente 3 righe per allineare gli item adiacenti.
       Titoli più lunghi sono troncati con line-clamp. */
    --lines: 3;
    display: -webkit-box;
    -webkit-line-clamp: var(--lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1em * 1.35 * var(--lines));
  }
.magazine__item-meta {
    font-size: var(--fs-meta);
    opacity: .65;
    line-height: 1.4;
    /* Riserva una riga per stabilità verticale */
    min-height: calc(1em * 1.4);
  }
/* =========================================================
     CARD GRID — blocco prm/card-grid (08 «Premi collaterali» del prototipo).
     ========================================================= */
.card-grid { background: var(--neutral); }
.section-kicker {
    margin-top: 10px;
    font-size: var(--fs-lead);
    color: var(--txt-soft);
    max-width: 520px;
    line-height: 1.55;
  }
/* Il numero di colonne lo passa render.php in --card-grid-colonne, contando
     le card: tre riconoscimenti fanno tre colonne, quattro ne fanno quattro. */
.card-grid__grid {
    display: grid;
    grid-template-columns: repeat(var(--card-grid-colonne, 3), 1fr);
    gap: 24px;
    margin-top: 36px;
  }
/* Pulsante di card: `flex: 1` su .card-grid__body lo tiene giù in fondo,
     allineato fra card di altezza diversa. Largo quanto il suo testo e a
     sinistra, come il resto del contenuto della card. */
.card-grid__btn {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
  }
/* Pulsante finale di sezione, a sinistra come quello del teaser partner. */
.card-grid__cta { margin-top: 40px; }
.card-grid__item {
    background: #fff;
    border: 1px solid var(--border-line);
    padding: 32px;
    display: flex;
    flex-direction: column;
  }
.card-grid__logo {
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
  }
.card-grid__logo img { max-height: 92px; width: auto; }
.card-grid__title {
    font-size: var(--fs-title-sm);
    font-weight: 600;
    color: var(--primary);
  }
.card-grid__body {
    font-size: var(--fs-desc);
    color: var(--txt-soft);
    margin-top: 12px;
    line-height: 1.6;
    flex: 1;
  }
.card-grid__winner {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-line);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--primary);
    line-height: 1.4;
  }
.card-grid__winner span {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-eyebrow);
    color: var(--red-brand);
    letter-spacing: .04em;
    margin-right: 6px;
  }
/* =========================================================
     PARTNER — blocco prm/partner (10 «Teaser Partner» del prototipo).
     ========================================================= */
/* Sei colonne sempre, anche con meno loghi: la misura del riquadro resta
     quella di una riga piena e i loghi in avanzo lasciano vuote le colonne a
     destra, invece di allargarsi. */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }
.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 3 / 2;
    /* Senza, il contenuto (un nome lungo, un logo verticale) può allungare il
       riquadro oltre la proporzione e le righe non sono più alte uguali. */
    min-height: 0;
    overflow: hidden;
    padding: 20px;
    background: var(--neutral);
    border: 1px solid var(--border-soft);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
  }
.partner-logo:hover {
    border-color: var(--gold);
    background: #fff;
    box-shadow: 0 6px 20px rgba(10, 31, 56, .08);
  }
.partner-logo__name {
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--primary);
    line-height: 1.35;
  }
/* Box con logo reale: fondo bianco e un margine sottile, il logo occupa il
     resto del riquadro (3:2 come quelli col nome, quindi tutti alti uguali,
     qualunque sia la forma del logo); `contain` lo fa stare dentro senza tagliarlo. */
.partner-logo--img {
    padding: 12px;
    background: #fff;
  }
.partner-logo--img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
.partner-teaser__grid { margin-top: 28px; }
.partner-teaser__cta { margin-top: 56px; }
/*
   * Nel corpo di una pagina (page.php, gotcha 25) il blocco sta nella colonna
   * editoriale: niente padding del .container, che rientrerebbe i loghi
   * rispetto al testo, niente padding di .section fra un blocco e l'altro, e
   * link fuori dalla prosa. La colonna è larga 760px: quattro colonne lì
   * danno lo stesso riquadro (~180px) delle sei a tutta larghezza.
   */
.detail-body__main .partner-teaser { padding-block: 0; }
.detail-body__main .partner-teaser + .partner-teaser { margin-top: 56px; }
.detail-body__main .partner-teaser > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
/* Solo i loghi: il pulsante finale (.btn--outline) tiene i colori suoi. */
.detail-body__main .partner-teaser .partner-logo {
    color: inherit;
    text-decoration: none;
  }
.detail-body__main .partner-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
    .detail-body__main .partner-grid { grid-template-columns: repeat(3, 1fr); }
  }
/* =========================================================
     SECTION TILES — blocco prm/section-tiles (04 «Tessere di
     accesso alle sezioni principali» del prototipo).
     ========================================================= */
.section-tiles__grid {
    margin-top: 28px;
    display: grid;
    /* Le colonne le decide render.php in base al numero di tessere (max 4). */
    grid-template-columns: repeat(var(--tiles-cols, 4), 1fr);
    gap: 18px;
  }
.section-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: 26px;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    /* Isola lo stacking context: l'icona decorativa resta sotto al testo
       anche quando la tessera si solleva in hover. */
    isolation: isolate;
    transition: transform .22s ease, box-shadow .22s ease;
  }
.section-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(10, 31, 56, .22);
  }
/* La tessera è un link a tutta area: da tastiera serve un bordo visibile. */
.section-tile:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
/* Su fondo oro un outline oro non si vedrebbe: qui passa al blu. */
.section-tile--eventi:focus-visible { outline-color: var(--primary); }
/* Icona grande decorativa, in filigrana nell'angolo alto a destra */
.section-tile__icon {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 132px;
    height: 132px;
    opacity: .22;
    transition: transform .35s ease, opacity .22s ease;
  }
.section-tile__icon svg { width: 100%; height: 100%; }
.section-tile:hover .section-tile__icon {
    transform: scale(1.08) rotate(-4deg);
    opacity: .32;
  }
.section-tile__title {
    font-size: var(--fs-title-md);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.05;
  }
.section-tile__tags {
    margin-top: 8px;
    font-size: var(--fs-meta);
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .78;
  }
.section-tile__arrow {
    position: absolute;
    bottom: 24px;
    right: 26px;
    font-size: 24px;
    line-height: 1;
    transition: transform .22s ease;
  }
.section-tile:hover .section-tile__arrow { transform: translateX(6px); }
/* Varianti colore. Il nome ricorda la sezione per cui la tinta è nata nel
     prototipo, non quella a cui la tessera punta: nel blocco 04 «Academy» usa
     `--eventi` (oro) ed «Eventi» usa `--academy` (blu notte). È voluto e fedele
     a `redesign/index.php`, non uno scambio da correggere. Restano comunque
     quattro tinte usabili su qualsiasi voce.
     L'elenco degli slug sta in `prm_tile_varianti()` (inc/helpers.php). */
.section-tile--premio  { background: var(--primary);   color: #fff; }
.section-tile--news    { background: var(--red-brand); color: #fff; }
.section-tile--eventi  { background: var(--gold);      color: var(--primary); }
.section-tile--academy { background: #15293f;          color: #fff; }
/* Su fondo blu notte il tratto bianco sparisce: l'icona passa all'oro. */
.section-tile--academy .section-tile__icon { color: var(--gold); opacity: .3; }
.section-tile--academy:hover .section-tile__icon { opacity: .42; }
/* =========================================================
     ARCHIVIO NEWS — archive.php / index.php.
     Griglia card dal prototipo `redesign/news.php`.
     ========================================================= */
.news-archive { background: #fff; }
.news-archive__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 56px var(--pad-x) 72px;
  }
/*
   * Archivio di un'edizione: stessa griglia di .detail-body, sottomenu a
   * destra. Anche il padding sopra è quello di .detail-body e non quello degli
   * altri archivi (56px): passando dalla scheda all'elenco il riquadro laterale
   * deve restare alla stessa quota, non saltare di 14px.
   */
.news-archive__inner--with-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
    padding-top: 70px;
  }
.news-archive__inner--with-aside .news-archive__main { min-width: 0; }
.news-archive__inner--with-aside .cards-grid { grid-template-columns: repeat(2, 1fr); }
/* Archivio di categoria misto: i ritratti seguono le card, staccati. */
.news-archive__main .cards-grid + .people-grid { margin-top: 48px; }
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    row-gap: 40px;
  }
.card { background: #fff; display: flex; flex-direction: column; }
/* Ruolo della persona nella cui scheda sta la card (solo scheda tutor). */
.card__ruolo {
    margin-top: 6px;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red-brand);
  }
.card__media { position: relative; display: block; }
.card__media .ph {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
.card__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 2px;
  }
.card__body { padding: 14px 0 0; display: flex; flex-direction: column; flex: 1; }
.card__meta { display: flex; gap: 8px; align-items: center; }
.card__meta-date {
    font-size: var(--fs-eyebrow);
    color: var(--darkbg);
    font-family: 'JetBrains Mono', monospace;
  }
.card__title {
    font-size: var(--fs-card-title);
    font-weight: 600;
    color: var(--primary);
    margin-top: 10px;
    line-height: 1.3;
  }
.card__title:hover { color: var(--red-brand); }
/* Firma della card news (template-parts/loop/card.php). */
.card__author {
    font-size: var(--fs-meta);
    color: var(--txt-soft);
    margin-top: 4px;
  }
/* Autori e tutor sotto il titolo della card inchiesta: una riga per ruolo. */
.card__people {
    margin-top: 8px;
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: var(--txt-soft);
  }
.card__people-row { margin: 0; }
.card__people-row + .card__people-row { margin-top: 3px; }
.card__people-lbl {
    font-size: var(--fs-eyebrow);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--txt-soft);
    margin-right: 2px;
  }
.card__person { color: var(--primary); }
.card__person:hover { color: var(--red-brand); }
.news-archive__filters { display: flex; justify-content: flex-end; margin-bottom: 32px; }
.news-archive__empty { color: var(--txt-soft); }
/* Paginazione numerata (the_posts_pagination) in stile mono. */
.news-archive .pagination,
  .people-archive .pagination { margin-top: 48px; }
.news-archive .nav-links,
  .people-archive .nav-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-small);
  }
.news-archive .page-numbers,
  .people-archive .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border-line);
    color: var(--primary);
  }
.news-archive .page-numbers.current,
  .people-archive .page-numbers.current {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }
.news-archive a.page-numbers:hover,
  .people-archive a.page-numbers:hover { border-color: var(--primary); }
.news-archive .page-numbers.dots,
  .people-archive .page-numbers.dots { border-color: transparent; color: var(--txt-soft); }
/* Video incorporati: larghi quanto la colonna, proporzioni dal provider
     (inc/embeds.php mette il rapporto in --ratio). */
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ratio, 16 / 9);
    margin: 24px 0;
    border-radius: 2px;
    overflow: hidden;
    background: var(--primary);
  }
.video-embed iframe,
  .video-embed embed,
  .video-embed object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
/*
   * Blocco «Video» del core (`core/embed`). Il core tiene l'altezza con un
   * distanziatore `::before` alto quanto il video — 56.25% della larghezza per
   * il 16:9, 75% per il 4:3 — e poi ancora l'iframe in assoluto sopra di esso.
   * Il tema però avvolge ogni iframe oEmbed in `.video-embed`, che è già un box
   * con le sue proporzioni e `position: relative`: l'iframe si ancora a quello,
   * e il distanziatore del core resta sotto a occupare una seconda altezza.
   * In una griglia diventa mezza pagina di vuoto fra le righe.
   *
   * Vince il box del tema, che usa le proporzioni dichiarate dal provider
   * (`--ratio`) invece di arrotondarle a quelle scelte nell'editor. Il `:has()`
   * limita la cosa agli embed che il tema ha davvero avvolto, e alza la
   * specificità sopra quella del core: così la regola non dipende dall'ordine
   * dei fogli di stile, che WP Rocket può ricombinare.
   */
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper:has( > .video-embed )::before {
    content: none;
  }
/* Il margine verticale lo dà già la <figure> del blocco: quello del tema
     serve agli embed inseriti come URL nudo o `[embed]`, dove contenitore non
     ce n'è. Dentro una griglia si sommerebbe al gap. */
.wp-block-embed__wrapper > .video-embed { margin: 0; }
/* Copertina in apertura dell'articolo (single.php). */
.entry-cover { margin: 0 0 32px; }
.entry-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
  }
.entry-cover figcaption {
    margin-top: 10px;
    font-size: var(--fs-meta);
    line-height: 1.45;
    color: var(--txt-soft);
  }
/* Condivisione in testa all'articolo (template-parts/single/condividi.php).
     Sta dentro .detail-body__main, quindi le regole di prosa su `a`, `ul` e
     `li + li` (gotcha 25) vanno annullate qui, con specificità pari o più alta. */
.condividi {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
  }
.condividi__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-meta);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--txt-soft);
  }
.detail-body__main .condividi__elenco {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
.detail-body__main .condividi__elenco li + li { margin-top: 0; }
.detail-body__main .condividi__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--primary);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
.detail-body__main .condividi__link:hover,
  .detail-body__main .condividi__link:focus-visible {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
  }
.condividi__link svg { width: 17px; height: 17px; display: block; }
.condividi__avviso {
    font-size: var(--fs-meta);
    color: var(--txt-soft);
  }
.condividi__avviso:empty { display: none; }
@media (max-width: 600px) {
    .condividi { flex-wrap: wrap; }
  }
/* =========================================================
     GALLERY DEL CONTENUTO — shortcode [gallery] del core.
     Le classi .gallery-* le genera WordPress, quindi non compaiono in nessun
     sorgente: stanno in safelist in tailwind.config.js.
     ========================================================= */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 32px 0;
  }
.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-item { margin: 0; }
.gallery-icon { margin: 0; line-height: 0; }
.gallery-icon img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 2px;
    transition: opacity .15s ease;
  }
.gallery--lightbox .gallery-icon a { cursor: zoom-in; display: block; }
.gallery--lightbox .gallery-icon a:hover img { opacity: .85; }
/* Blocco galleria di Gutenberg: le immagini non sono linkate, il clic lo
     intercetta il JS. */
.wp-block-gallery.gallery--lightbox img { cursor: zoom-in; }
.wp-block-gallery.gallery--lightbox img:hover { opacity: .85; }
.wp-block-gallery.gallery--lightbox img:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gallery-caption {
    display: block;
    margin-top: 8px;
    font-size: var(--fs-meta);
    line-height: 1.45;
    color: var(--txt-soft);
  }
/* Lightbox costruita da assets/js/src/gallery.js */
body.prm-lightbox-aperta { overflow: hidden; }
.prm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10, 31, 56, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: clamp(16px, 4vw, 48px);
  }
.prm-lightbox[hidden] { display: none; }
.prm-lightbox__figure {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
.prm-lightbox__img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 2px;
  }
.prm-lightbox__caption {
    color: rgba(255,255,255,.75);
    font-size: var(--fs-small);
    line-height: 1.5;
    text-align: center;
    max-width: 68ch;
  }
.prm-lightbox__caption[hidden] { display: none; }
.prm-lightbox__close,
  .prm-lightbox__nav {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease;
  }
.prm-lightbox__nav { width: 44px; height: 44px; font-size: 18px; }
.prm-lightbox__nav[hidden] { display: none; }
.prm-lightbox__close {
    position: absolute;
    top: clamp(12px, 2vw, 24px);
    right: clamp(12px, 2vw, 24px);
    width: 40px; height: 40px;
    font-size: 24px;
    line-height: 1;
  }
.prm-lightbox__close:hover,
  .prm-lightbox__nav:hover { background: rgba(255,255,255,.14); border-color: var(--gold); }
.prm-lightbox__close:focus-visible,
  .prm-lightbox__nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.prm-lightbox__counter {
    position: absolute;
    bottom: clamp(12px, 2vw, 24px);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-meta);
  }
.prm-lightbox__counter[hidden] { display: none; }
/* =========================================================
     SINGOLA INCHIESTA — single-inchiesta.php
     Testata scura col player del trailer, striscia dei dati,
     corpo editoriale e aside coi ritratti degli autori.
     Ricavato dal prototipo `redesign/inchiesta.php`.
     ========================================================= */
/*
   * Testata sul sabbia del tema e fascia dei dati sul blu: l'inverso del
   * prototipo. Il contrasto fra le due bande resta, ma il titolo arriva su
   * fondo chiaro come nel resto del sito, e il blu fa da riga di stacco
   * prima del corpo.
   */
.detail-hero { background: var(--neutral); color: var(--primary); }
.detail-hero__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px var(--pad-x) 0;
  }
.detail-hero__back {
    font-size: var(--fs-meta);
    color: var(--txt-soft);
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 18px;
    text-transform: uppercase;
    display: inline-block;
  }
.detail-hero__back:hover { color: var(--red-brand); }
.detail-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: start;
    padding-bottom: 56px;
  }
/* Senza trailer la colonna del player non esiste: il testo si prende tutta
     la larghezza invece di lasciare mezza testata vuota. */
.detail-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.detail-hero__grid--solo .detail-hero__lead { max-width: 720px; }
.detail-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
.detail-hero__edition {
    font-size: var(--fs-eyebrow);
    font-family: 'JetBrains Mono', monospace;
    color: var(--darkbg);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
.detail-hero__title {
    margin-top: 20px;
    font-size: var(--fs-detail-title);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.05;
  }
.detail-hero__author {
    margin-top: 16px;
    font-size: var(--fs-lead);
    color: var(--txt-softer);
  }
/* Sul sabbia l'oro del prototipo non si legge: il link prende il rosso del
     marchio, che è già il colore dei link nel corpo. */
.detail-hero__author a { color: var(--red-brand); font-weight: 500; }
.detail-hero__author a:hover { text-decoration: underline; }
.detail-hero__lead {
    margin-top: 22px;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--txt-softer);
    max-width: 520px;
  }
.detail-hero__ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.detail-hero__player-label {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    color: var(--red-brand);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
.detail-hero__frame {
    position: relative;
    width: 100%;
    /* Rapporto invece dei 380px fissi del prototipo: l'altezza fissa taglia
       il video sugli schermi stretti, dove la colonna si restringe ma il
       riquadro no. */
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
  }
.detail-hero__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
/* Striscia dei dati essenziali sotto la testata, sul blu istituzionale. */
.meta-strip { background: var(--primary); color: #fff; }
.meta-strip__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 36px var(--pad-x);
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
/* Due righe: dati dell'inchiesta e autori sopra, tutor sotto. */
.meta-strip__riga {
    display: flex;
    /*
     * Il prototipo distribuiva sei voci fisse su una riga sola, con lo
     * scorrimento orizzontale come rete di sicurezza. Qui vanno da due a
     * otto — un tutor per ogni ruolo compilato — e nessuna delle due cose
     * regge: `space-between` apre un vuoto in mezzo alla fascia quando sono
     * poche, e la riga unica ne spinge fuori schermo un paio quando sono
     * tante, dove nessuno le andrà a cercare scorrendo di lato. Vanno a
     * capo: i dati restano tutti visibili a qualunque larghezza.
     */
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 24px clamp(24px, 3vw, 48px);
  }
.meta-strip__riga > div { flex: 0 0 auto; }
.meta-strip__lbl {
    font-size: var(--fs-eyebrow);
    color: var(--gold);
    letter-spacing: .14em;
    font-weight: 600;
    text-transform: uppercase;
  }
.meta-strip__val {
    font-size: var(--fs-card-title);
    color: #fff;
    margin-top: 6px;
    font-weight: 500;
    /* Una voce per riga: gli autori sono da uno a tre, i tutor sempre uno. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
/* Le persone portano alla loro scheda: sottolineatura solo al passaggio,
     perché qui i nomi sono quasi tutti link e sottolinearli tutti farebbe
     della fascia un elenco di link invece che una scheda di dati. */
.meta-strip__val a { color: #fff; }
.meta-strip__val a:hover {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
.meta-strip__val--mono { font-family: 'JetBrains Mono', monospace; }
.tag--gold { background: var(--gold); color: var(--primary); }
/* Chip del ruolo di un tutor: blu come le altre etichette istituzionali, e
     cliccabile — porta all'elenco dei tutor con quel ruolo. */
.tag--ruolo { background: var(--primary); color: #fff; }
.tag--ruolo:hover { background: var(--red-brand); }
/*
   * L'aside segue la lettura. L'offset non è una variabile globale perché
   * l'header è sticky a sua volta e da loggati scende di 32px: le due misure
   * vanno tenute insieme, non in due punti del foglio (vedi .site-header).
   */
.detail-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 112px;
    align-self: start;
  }
body.admin-bar .detail-aside { top: 144px; }
.aside-card {
    background: var(--neutral);
    padding: 20px;
    border-radius: 2px;
  }
/* Riquadro degli autori: fondo istituzionale, come nel prototipo. */
.aside-card--primary { background: var(--primary); color: #fff; }
.aside-card__eye {
    font-size: var(--fs-eyebrow);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--txt-soft);
    margin-bottom: 14px;
  }
.aside-card--primary .aside-card__eye { color: var(--gold); }
.author-block {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
  }
.author-block + .author-block { margin-top: 14px; }
.author-block__portrait {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
  }
.author-block__portrait--empty { background: rgba(10, 31, 56, .1); }
.author-block__meta { display: flex; flex-direction: column; }
.author-block__name {
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
  }
.author-block:hover .author-block__name { color: var(--red-brand); }
.author-block__role {
    font-size: var(--fs-eyebrow);
    color: var(--txt-soft);
    margin-top: 2px;
  }
/* Ritratto grande, incolonnato: la scheda autore della singola inchiesta. */
.author-block--lg {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
.author-block--lg + .author-block--lg { margin-top: 20px; }
/* Il ritratto non riempie più la colonna: resta tondo e centrato, ma a una
     misura che non fa della sidebar una galleria di faccioni. */
.author-block--lg .author-block__portrait {
    width: 170px;
    height: 170px;
    flex: none;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
.author-block--lg .author-block__meta { text-align: center; }
.author-block--lg .author-block__name { font-size: var(--fs-lead); }
.author-block--lg .author-block__role { font-size: var(--fs-meta); }
/* Dentro il riquadro scuro i colori del blocco persona si invertono. */
.aside-card--primary .author-block__name { color: #fff; }
.aside-card--primary .author-block:hover .author-block__name { color: var(--gold); }
.aside-card--primary .author-block__role { color: rgba(255, 255, 255, .7); }
.aside-card--primary .author-block__portrait--empty { background: rgba(255, 255, 255, .12); }
/* =========================================================
     ARCHIVIO INCHIESTE — archive-inchiesta.php
     Filtri a chip + griglia raggruppata per anno.
     Ricavato dal prototipo `redesign/inchieste-vincitori.php`.
     ========================================================= */
.filters { background: #fff; border-bottom: 1px solid var(--border-soft); }
/* Gruppi di chip affiancati che vanno a capo quando non ci stanno (anno,
     categoria, premio), la ricerca spinta a destra. */
.filters__row {
    max-width: var(--container);
    margin: 0 auto;
    padding: 24px var(--pad-x);
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    align-items: flex-start;
  }
.filters__group-lbl {
    font-size: var(--fs-eyebrow);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--darkbg);
    margin-bottom: 8px;
  }
/* I chip sono link, non bottoni: annullo lo stile ereditato dagli <a>. */
a.chip { text-decoration: none; display: inline-block; }
.chip--mono { font-family: 'JetBrains Mono', monospace; }
/* Il campo di ricerca non ha etichetta: lo scalo dell'altezza di una
     .filters__group-lbl così si allinea alla riga dei chip, non a quella
     dei titoli di gruppo. */
.filters__search { margin-left: auto; padding-top: 25px; }
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-line);
    border-radius: 999px;
    padding: 8px 16px;
    min-width: 260px;
  }
.search-box span[aria-hidden] { color: var(--darkbg); font-size: 15px; }
.search-box input {
    border: 0;
    outline: 0;
    background: none;
    font-family: inherit;
    font-size: var(--fs-ui);
    color: var(--primary);
    width: 100%;
  }
.search-box:focus-within {
    border-color: var(--primary);
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
.inchieste-grid { background: #fff; }
.inchieste-grid__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px var(--pad-x) 72px;
  }
.inchieste-grid__empty { color: var(--txt-soft); }
/* `hidden` deve battere i display espliciti di .card e .year-group,
     altrimenti il filtro client-side non nasconde nulla. */
.inchieste-grid [hidden] { display: none !important; }
.year-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 40px 0 22px;
  }
.year-group:first-child .year-head { margin-top: 0; }
.year-head h2 {
    font-size: var(--fs-title-md);
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -.01em;
    white-space: nowrap;
  }
.year-head__line { flex: 1; height: 1px; background: var(--border-line); }
.year-head__count {
    font-size: var(--fs-eyebrow);
    font-family: 'JetBrains Mono', monospace;
    color: var(--darkbg);
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
  }
/* Badge dei premi sovrapposti alla copertina, uno sotto l'altro:
     vincitore e premi speciali possono stare insieme. */
.card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
.card__badge {
    background: var(--gold);
    color: var(--primary);
    font-size: var(--fs-badge);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 2px;
  }
.card__meta-year {
    font-size: var(--fs-eyebrow);
    color: var(--darkbg);
    font-family: 'JetBrains Mono', monospace;
  }
.tag--darkbg { background: var(--darkbg); }
.tag--primary { background: var(--primary); }
/* =========================================================
     ARCHIVI PERSONE — archive-tutor.php, archive-finalista.php
     Griglia ritratti; la bio compare in overlay su hover/focus.
     ========================================================= */
.people-archive { background: #fff; }
.people-archive__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 56px var(--pad-x) 72px;
  }
.people-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    row-gap: 36px;
  }
.people-group + .people-group { margin-top: 56px; }
/* Filtro «Premio» dell'archivio autori (autori-filter.js): card e gruppi si
     nascondono con `hidden`, che da solo perderebbe contro il `display` delle
     card. Lo spazio sopra il primo gruppo visibile lo azzera lo script. */
.people-card[hidden],
  .people-group[hidden] { display: none; }
/* I chip-pulsante di /autori/: `.chip` imposta già misura, peso e cursore. */
button.chip { font-family: inherit; }
.people-group__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-line);
    font-size: var(--fs-title-md);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--primary);
  }
.people-group__eye {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--red-brand);
  }
.people-card__link { display: block; color: inherit; }
.people-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 2px;
  }
.people-card__img,
  .people-card__ph {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    -o-object-fit: cover;
       object-fit: cover;
  }
.people-card__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }
.people-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    background: linear-gradient(to top, rgba(10, 31, 56, .94), rgba(10, 31, 56, .72));
    opacity: 0;
    transition: opacity .25s ease;
  }
.people-card__bio {
    color: #fff;
    font-size: var(--fs-small);
    line-height: 1.5;
  }
.people-card__name {
    display: block;
    margin-top: 12px;
    font-size: var(--fs-card-title);
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
  }
.people-card__link:hover .people-card__name { color: var(--red-brand); }
/* Anno di Baffo Rosso e Testimoni, sotto il nome: stesso carattere delle
     date delle card. */
.people-card__anno {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-meta);
    letter-spacing: .08em;
    color: var(--txt-soft);
  }
/* L'overlay si rivela solo dove l'hover esiste davvero; il focus da
     tastiera lo mostra comunque, per non perdere la bio in navigazione. */
@media (hover: hover) {
    .people-card__link:hover .people-card__overlay,
    .people-card__link:focus-visible .people-card__overlay { opacity: 1; }
  }
/* Touch/tastiera senza hover: bio sempre leggibile sotto il nome. */
@media (hover: none) {
    .people-card__overlay {
      position: static;
      opacity: 1;
      padding: 8px 0 0;
      background: none;
    }
    .people-card__bio { color: var(--txt-soft); }
  }
.people-archive__empty { color: var(--txt-soft); }
/* =========================================================
     PAGE INTRO + DETAIL BODY (template pagine standard)
     Ricavato dal prototipo `redesign/roberto-morrione.php`.
     ========================================================= */
.page-intro { background: var(--neutral); }
.page-intro__inner {
    max-width: var(--container);
    margin: 0 auto;
    /* Asimmetrico di proposito: più aria sopra che sotto, così il titolo
       si stacca dalla barra del menu invece di stare a metà banda. */
    padding: 46px var(--pad-x) 26px;
  }
.page-title {
    font-size: var(--fs-page-title);
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -.02em;
    line-height: 1.1;
  }
.page-intro__row {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: end;
  }
.page-intro__lead {
    font-size: var(--fs-lead);
    color: var(--txt-softer);
    line-height: 1.55;
    max-width: 640px;
  }
/* Variante compatta della testata: usata dal singolo articolo, dove
     sotto segue subito l'immagine in evidenza e il respiro serve meno.
     Va tenuta sotto ai valori di base, altrimenti "compatta" non vuol dire
     più niente. */
.page-intro--compact .page-intro__inner { padding: 26px var(--pad-x) 22px; }
.page-intro--compact .page-title { font-size: var(--fs-section-title); }
.page-intro--compact .page-intro__row { margin-top: 10px; }
.page-intro--compact .post-meta__cat-row { margin-bottom: 8px; }
/* Occhiello categoria sopra il titolo del singolo post. */
.post-meta__cat-row { margin-bottom: 14px; }
/* Meta del singolo post (data) — colonna destra di .page-intro__row. */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: baseline;
    font-size: var(--fs-meta);
  }
.post-meta__cat {
    color: var(--red-brand);
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
a.post-meta__cat:hover { color: var(--primary); }
.post-meta__date {
    font-family: 'JetBrains Mono', monospace;
    color: var(--darkbg);
    text-transform: uppercase;
  }
/* =========================================================
     SCHEDA PERSONA — finalisti e tutor (single-finalista/-tutor.php)
     Ritratto a sinistra in un riquadro di proporzioni fisse, dati a destra.
     ========================================================= */
.persona__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 70px var(--pad-x);
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
.persona__ritratto { margin: 0; }
/*
   * Il taglio lo fa object-fit, non le miniature di WordPress: i ritratti dei
   * finalisti sono diventati immagine in evidenza dopo il caricamento, quindi
   * le versioni ritagliate non esistono e si userebbe comunque l'originale.
   */
.persona__img,
  .persona__ph {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top center;
       object-position: top center;
    border-radius: 2px;
  }
.persona__corpo { min-width: 0; max-width: 680px; }
.persona__nome {
    font-size: var(--fs-page-title);
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -.02em;
    line-height: 1.1;
  }
.persona__tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.persona__bio { margin-top: 22px; }
.persona__bio > * + * { margin-top: 16px; }
.persona__bio p {
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--txt-softer);
  }
.persona__bio a { color: var(--red-brand); }
.persona__bio a:hover { border-bottom: 1px solid var(--red-brand); }
/* La foto è già nella colonna a sinistra: nel testo sarebbe un doppione. */
.persona__bio img { display: none; }
/* Card delle inchieste della persona: sotto la scheda, a tutta larghezza,
     con la stessa griglia e la stessa testata per anno dell'archivio. */
.persona-inchieste__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x) 80px;
  }
.detail-body {
    max-width: var(--container);
    margin: 0 auto;
    padding: 70px var(--pad-x);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
  }
.detail-body--full { grid-template-columns: minmax(0, 1fr); }
.detail-body--full .detail-body__main {
    max-width: 760px;
    margin: 0;
  }
.detail-body__main { max-width: 720px; }
/*
   * Niente esce dallo schermo. Le griglie qui sopra hanno `minmax(0, 1fr)` e
   * non `1fr` perché con `1fr` la colonna si allarga fino al contenuto più
   * largo — un video, una tabella, un indirizzo scritto per esteso — e si
   * porta fuori tutto l'articolo. Sotto, le reti per il contenuto scritto
   * in redazione: parole e indirizzi lunghi vanno a capo, immagini e
   * incorporamenti si fermano alla colonna (anche con una larghezza nello
   * `style`, come le didascalie del vecchio editor), tabelle e codice
   * scorrono al loro interno.
   */
.detail-body__main,
  .persona__bio { min-width: 0; overflow-wrap: break-word; }
.detail-body__main :is(img, video, iframe, embed, object, figure, .wp-caption),
  .persona__bio :is(img, video, iframe, embed, object, figure, .wp-caption) { max-width: 100% !important; }
.detail-body__main :is(img, video),
  .persona__bio :is(img, video) { height: auto; }
.detail-body__main :is(table, pre),
  .persona__bio :is(table, pre) { display: block; max-width: 100%; overflow-x: auto; }
/* Le tabelle del vecchio editor hanno larghezza e altezza nello `style`:
     da `block` quell'altezza diventerebbe vincolante e taglierebbe le righe. */
.detail-body__main table,
  .persona__bio table { height: auto !important; }
/* Tipografia editoriale per il contenuto generato da the_content() */
.detail-body__main > * + * { margin-top: 16px; }
.detail-body__main p {
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--txt-softer);
  }
.detail-body__main h2,
  .detail-body__main h3,
  .detail-body__main h4 {
    color: var(--primary);
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-top: 40px;
  }
.detail-body__main h2 { font-size: var(--fs-title-md); font-weight: 600; }
.detail-body__main h3 { font-size: var(--fs-title-sm); font-weight: 600; }
.detail-body__main h4 { font-size: var(--fs-body); font-weight: 600; }
.detail-body__main a {
    color: var(--red-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
.detail-body__main a:hover { color: var(--primary); }
.detail-body__main strong { color: var(--primary); font-weight: 600; }
.detail-body__main ul,
  .detail-body__main ol {
    padding-left: 22px;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--txt-softer);
  }
.detail-body__main ul { list-style: disc; }
.detail-body__main ol { list-style: decimal; }
.detail-body__main li + li { margin-top: 6px; }
.detail-body__main img,
  .detail-body__main figure { border-radius: 2px; }
.detail-body__main figcaption {
    margin-top: 10px;
    font-size: var(--fs-meta);
    color: var(--txt-soft);
    letter-spacing: .04em;
  }
.detail-body__main blockquote,
  .detail-body__main .quote {
    font-size: var(--fs-title-md);
    font-weight: 500;
    color: var(--primary);
    line-height: 1.35;
    border-left: 4px solid var(--gold);
    padding-left: 24px;
    font-style: italic;
    margin-top: 24px;
  }
/* Sezioni con occhiello — applicabile via "Classe CSS aggiuntiva" del blocco */
.page-pagination {
    margin-top: 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-small);
    display: flex;
    gap: 10px;
  }
/* =========================================================
     AGENDA — prossimi eventi raggruppati per mese (page-calendario-eventi.php)
     ========================================================= */
.agenda { border-top: 1px solid var(--border-soft); }
.agenda-list { display: flex; flex-direction: column; gap: 48px; }
.agenda-month {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 28px;
    align-items: start;
    /*
     * Scostamento dell'etichetta sticky: quanto è alto l'header compresso
     * (logo 52 + padding 12+12 + barra del menu 44) più un po' d'aria. Sta
     * qui e non nel :root perché quel blocco lo rigenera la build da
     * theme.json e una variabile aggiunta lì a mano sparirebbe (gotcha #11).
     */
    --agenda-sticky-top: 144px;
  }
/*
   * Da loggati l'header scende di 32px (vedi .site-header) e l'etichetta gli
   * finirebbe dietro. Serve solo qui sopra i 900px: sotto, l'etichetta non è
   * più sticky e la barra non conta.
   */
body.admin-bar .agenda-month { --agenda-sticky-top: 176px; }
.agenda-month__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--txt-soft);
    padding-top: 26px;
    position: sticky;
    top: var(--agenda-sticky-top);
  }
.agenda-month__items {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-line);
    list-style: none;
    margin: 0;
    padding: 0;
  }
.agenda-item {
    display: grid;
    /* Colonna della data larga abbastanza per «30–31» alla stessa misura di
       «16»: il numero non si rimpicciolisce quando i giorni sono due. */
    grid-template-columns: 96px 1fr auto;
    gap: 24px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid var(--border-line);
  }
.agenda-item__date { display: flex; flex-direction: column; line-height: 1; }
.agenda-item__date strong {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--primary);
    white-space: nowrap;
  }
.agenda-item__date span {
    margin-top: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-badge);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--red-brand);
  }
.agenda-item__meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-eyebrow);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--txt-soft);
    margin-bottom: 6px;
  }
.agenda-item__title {
    font-size: var(--fs-card-title);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--primary);
  }
.agenda-item__title a { color: inherit; }
.agenda-item__title a:hover { border-bottom: 2px solid var(--gold); }
.agenda-item__desc {
    margin-top: 6px;
    font-size: var(--fs-desc);
    line-height: 1.55;
    color: var(--txt-soft);
    max-width: 640px;
  }
.agenda-item__tags { padding-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) {
    .agenda-month { grid-template-columns: 1fr; gap: 10px; }
    .agenda-month__label { position: static; padding-top: 0; }
  }
@media (max-width: 600px) {
    .agenda-item { grid-template-columns: 72px 1fr; gap: 16px; padding: 18px 0; }
    .agenda-item__date strong { font-size: 24px; }
    .agenda-item__tags { grid-column: 2; padding-top: 0; }
  }
/* =========================================================
     EVENTI PASSATI — card a piena larghezza (page-eventi-passati.php)
     ========================================================= */
.passati-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
  }
.passati-empty { color: var(--txt-soft); margin-top: 8px; }
.evento-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--border-line);
    padding: 24px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
.evento-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 28px rgba(10, 31, 56, .08);
    transform: translateY(-2px);
  }
.evento-card__poster {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--neutral);
    overflow: hidden;
  }
.evento-card__poster .ph { width: 100%; height: 100%; }
.evento-card__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.evento-card__body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
  }
.evento-card__title {
    margin: 0;
    font-size: var(--fs-title-md);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--primary);
  }
.evento-card__title a { color: inherit; }
.evento-card__title a:hover { color: var(--red-brand); }
.evento-card__desc {
    margin: 0;
    font-size: var(--fs-desc);
    line-height: 1.55;
    color: var(--txt-soft);
  }
.evento-card__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
  }
/* Sottomenu dell'edizione nella sidebar dei contenuti d'evento */
.aside-nav__list { list-style: none; margin: 0; padding: 0; }
.aside-nav__item + .aside-nav__item { border-top: 1px solid var(--border-soft); }
.aside-nav__item a {
    display: block;
    padding: 10px 0;
    font-size: var(--fs-ui);
    line-height: 1.35;
    color: var(--txt-softer);
  }
.aside-nav__item a:hover { color: var(--red-brand); }
.aside-nav__item.is-active a {
    color: var(--primary);
    font-weight: 600;
  }
/* =========================================================
     BANNER GRID — immagini con link (blocco prm/banner-grid)
     I banner arrivano da inserzionisti diversi, con proporzioni che non
     controlliamo: niente ritaglio, ognuno tiene la sua altezza naturale e la
     riga si allinea in alto. `align-items: start` serve proprio a questo —
     senza, il grid stira ogni immagine all'altezza della più alta.
     Il numero di colonne lo passa render.php in --banner-grid-colonne.
     ========================================================= */
.banner-grid__grid {
    display: grid;
    grid-template-columns: repeat(var(--banner-grid-colonne, 2), 1fr);
    gap: 24px;
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
  }
.banner-grid .section-title + .banner-grid__grid,
  .banner-grid .section-kicker + .banner-grid__grid,
  .banner-grid .eyebrow + .banner-grid__grid { margin-top: 32px; }
.banner-grid__item { min-width: 0; }
.banner-grid__img {
    display: block;
    width: 100%;
    height: auto;
  }
.banner-grid__link {
    display: block;
    transition: opacity .15s ease, transform .15s ease;
  }
.banner-grid__link:hover { opacity: .88; transform: translateY(-2px); }
.banner-grid__link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
  }
/* Le colonne scelte sono un tetto: chi ne ha chieste due ne tiene due anche
     stretto, fino al punto in cui non ci stanno più. Il valore ridotto lo
     calcola render.php: `min()` dentro `repeat()` non è ammesso. */
@media (max-width: 900px) {
    .banner-grid__grid { grid-template-columns: repeat(var(--banner-grid-colonne-md, 2), 1fr); }
  }
@media (max-width: 600px) {
    .banner-grid__grid { grid-template-columns: 1fr; gap: 18px; }
  }
/* =========================================================
     CAROSELLO LOGHI — blocco prm/logo-carousel
     Senza script è una striscia da scorrere a mano. Quando
     assets/js/src/logo-carousel.js mette `.is-animato` sul corpo, l'elenco
     viene copiato in coda e ogni copia trasla della propria larghezza: per
     questo lo spazio dopo l'ultimo logo sta *dentro* l'elenco (padding) e non
     fra un elenco e l'altro — il giro deve essere lungo esattamente il 100%.
     ========================================================= */
.logo-carousel { --logo-carousel-gap: 64px; }
/* Sotto il nastro c'è già il pulsante di pausa col suo margine: con il
     padding pieno di .section il vuoto in fondo sarebbe più alto di quello
     in testa. */
.logo-carousel.section { padding-bottom: clamp(16px, 3vw, 32px); }
.logo-carousel .section-title + .logo-carousel__corpo,
  .logo-carousel .section-kicker + .logo-carousel__corpo,
  .logo-carousel .eyebrow + .logo-carousel__corpo { margin-top: 32px; }
.logo-carousel__viewport {
    display: flex;
    overflow-x: auto;
  }
.logo-carousel__track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--logo-carousel-gap);
    list-style: none;
    margin: 0;
    padding: 8px var(--logo-carousel-gap) 8px 0;
  }
/* Le copie servono solo a nastro in moto. */
.logo-carousel__track[aria-hidden="true"] { display: none; }
.logo-carousel__item { flex: 0 0 auto; }
/* Altezza uguale per tutti, larghezza quella del logo: un marchio largo e
     basso non deve prendersi mezzo schermo, quindi ha un tetto e ci sta
     dentro intero. */
.logo-carousel__img {
    display: block;
    height: 88px;
    width: auto;
    max-width: 260px;
    -o-object-fit: contain;
       object-fit: contain;
  }
.logo-carousel__link {
    display: block;
    transition: opacity .15s ease;
  }
.logo-carousel__link:hover { opacity: .7; }
.logo-carousel__link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
  }
.logo-carousel__corpo.is-animato .logo-carousel__viewport {
    overflow: hidden;
    /* I loghi entrano ed escono sfumando, invece di essere tagliati dal bordo. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
.logo-carousel__corpo.is-animato .logo-carousel__track {
    display: flex;
    animation: prm-logo-carousel var(--logo-carousel-durata, 40s) linear infinite;
    /* Negativo: il giro parte già avviato (vedi logo-carousel.js). */
    animation-delay: var(--logo-carousel-anticipo, 0s);
  }
/* Ci si ferma sopra col mouse per leggere un logo o cliccarlo; il pulsante
     serve a chi il mouse non ce l'ha. */
.logo-carousel__corpo.is-animato .logo-carousel__viewport:hover .logo-carousel__track,
  .logo-carousel__corpo.is-in-pausa .logo-carousel__track,
  .logo-carousel__corpo.is-fuori-vista .logo-carousel__track { animation-play-state: paused; }
@keyframes prm-logo-carousel {
    to { transform: translateX(-100%); }
  }
.logo-carousel__pausa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 12px 0 0 auto;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    transition: border-color .15s;
  }
.logo-carousel__pausa[hidden] { display: none; }
.logo-carousel__pausa:hover { border-color: var(--primary); }
.logo-carousel__pausa:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.logo-carousel__icona { width: 16px; height: 16px; }
.logo-carousel__icona--avvia,
  .logo-carousel__pausa[aria-pressed="true"] .logo-carousel__icona--pausa { display: none; }
.logo-carousel__pausa[aria-pressed="true"] .logo-carousel__icona--avvia { display: block; }
@media (max-width: 600px) {
    .logo-carousel { --logo-carousel-gap: 40px; }
    .logo-carousel__img { height: 60px; max-width: 180px; }
  }
/* Nel corpo di una pagina (gotcha 25): niente padding di sezione e di
     container nella colonna editoriale, e l'elenco fuori dalla prosa —
     niente pallini, rientro e distacco fra le voci. */
.detail-body__main .logo-carousel { padding-block: 0; }
.detail-body__main .logo-carousel > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
.detail-body__main .logo-carousel__track {
    list-style: none;
    padding-left: 0;
  }
.detail-body__main .logo-carousel__item + .logo-carousel__item { margin-top: 0; }
/* =========================================================
     WALL ARTICOLI — blocco prm/post-wall
     Le card sono quelle dell'archivio news (.card): qui si definisce solo la
     griglia, perché .cards-grid ha tre colonne fisse e il wall le fa scegliere
     nell'editor. Il conteggio lo passa render.php in --post-wall-colonne.
     ========================================================= */
/*
   * Spaziature ridotte al minimo: il wall non ne porta di proprie. In
   * verticale zero — il distacco dal contenuto attorno lo dà già
   * `.detail-body__main > * + *` — e in orizzontale niente, perché dentro la
   * colonna editoriale il margine c'è già e raddoppiarlo rientrerebbe le card
   * rispetto al testo sopra e sotto.
   *
   * Il `.container` resta per l'uso a tutta larghezza (`page-full-width.php`,
   * un blocco allineato «full»): lì i suoi `--pad-x` sono l'unica cosa che
   * tiene le card lontane dal bordo dello schermo.
   */
.post-wall { padding-block: 0; }
.detail-body__main .post-wall > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
.post-wall__grid {
    display: grid;
    grid-template-columns: repeat(var(--post-wall-colonne, 3), 1fr);
    gap: 22px;
    row-gap: 40px;
  }
.post-wall .eyebrow + .post-wall__grid,
  .post-wall .section-title + .post-wall__grid,
  .post-wall .section-kicker + .post-wall__grid { margin-top: 32px; }
/*
   * Thumbnail tutte della stessa misura. Il riquadro lo decide la colonna
   * (larghezza × 16/9) e lo tiene il contenitore, non l'immagine: le
   * copertine caricate negli anni hanno proporzioni diverse, e lasciando
   * decidere a loro le card di una riga finirebbero a scaletta. `cover`
   * ritaglia dal centro invece di deformare.
   */
.post-wall .card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    background: var(--border-soft);
  }
.post-wall .card__media img,
  .post-wall .card__media .ph {
    width: 100%;
    height: 100%;
    /* Il riquadro ce l'ha già il contenitore: una seconda proporzione qui
       dentro rimetterebbe in gioco l'altezza naturale dell'immagine. */
    aspect-ratio: auto;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0;
  }
/*
   * Il wall può stare nel corpo di una pagina o di un articolo, e lì
   * `.detail-body__main a` veste i link come prosa: rossi e sottolineati.
   * Sotto una thumbnail la sottolineatura non significa niente, e le card
   * hanno già i loro colori — quelli dell'archivio news, dove le stesse card
   * stanno fuori dal corpo e la regola non le raggiunge. Qui la prosa si
   * ferma; il titolo si riprende il colore suo, che il reset gli toglierebbe.
   */
.detail-body__main .post-wall a {
    color: inherit;
    text-decoration: none;
  }
.detail-body__main .post-wall .card__title { color: var(--primary); }
.detail-body__main .post-wall .card__title:hover { color: var(--red-brand); }
/* Le colonne scelte sono un tetto: chi ne ha chieste due ne tiene due anche
     stretto, fino al punto in cui non ci stanno più. Il valore ridotto lo
     calcola render.php: `min()` dentro `repeat()` non è ammesso. */
@media (max-width: 900px) {
    .post-wall__grid { grid-template-columns: repeat(var(--post-wall-colonne-md, 2), 1fr); }
  }
@media (max-width: 600px) {
    .post-wall__grid { grid-template-columns: 1fr; row-gap: 32px; }
  }
/* =========================================================
     INCHIESTE PREMIATE — shortcode [inchieste_premi] (inc/inchieste-premi.php)
     Le card di /inchieste/ in una .cards-grid. Nel corpo di una pagina vale lo
     stesso reset del wall (gotcha 25): niente padding del .container, dentro
     la colonna c'è già, e link fuori dalla prosa.
     ========================================================= */
.inchieste-premi .section-title + .cards-grid { margin-top: 32px; }
.detail-body__main .inchieste-premi > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
.detail-body__main .inchieste-premi a {
    color: inherit;
    text-decoration: none;
  }
.detail-body__main .inchieste-premi .card__title { color: var(--primary); }
.detail-body__main .inchieste-premi .card__title:hover { color: var(--red-brand); }
/* Perché le card siano le stesse di /inchieste/ e non una loro versione
     ridotta: la colonna editoriale è larga 760px, e in tre colonne le
     copertine sarebbero poco più di metà di quelle dell'archivio. In due
     tornano alla stessa misura. */
.detail-body__main .inchieste-premi .cards-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) {
    .detail-body__main .inchieste-premi .cards-grid { grid-template-columns: 1fr; }
  }
/* E il resto della prosa che ancora le toccava: i paragrafi di autori e
     tutor (corpo 18 e grigio scuro al posto del testo piccolo della card), i
     nomi in grassetto e i loro link, che il reset qui sopra aveva scolorito. */
.detail-body__main .inchieste-premi .card__people-row {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }
.detail-body__main .inchieste-premi strong {
    color: inherit;
    font-weight: bolder;
  }
.detail-body__main .inchieste-premi .card__person { color: var(--primary); }
.detail-body__main .inchieste-premi .card__person:hover { color: var(--red-brand); }
/* Shortcode [baffo_rosso] e [testimoni] (inc/persona-anno.php): i ritratti
     di .people-grid, con lo stesso reset di prosa qui sopra. */
.persone-griglia .section-title + .people-grid { margin-top: 32px; }
.detail-body__main .persone-griglia > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
.detail-body__main .persone-griglia a {
    color: inherit;
    text-decoration: none;
  }
/* =========================================================
     RICERCA — search.php
     Gruppi per tipo con la testata degli anni di /inchieste/; le card sono
     quelle di ogni tipo. Pagine e appuntamenti in un elenco semplice.
     ========================================================= */
.ricerca__conteggio {
    margin-top: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-meta);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--darkbg);
  }
.ricerca__gruppo + .ricerca__gruppo { margin-top: 56px; }
.ricerca__gruppo .year-head { margin-top: 0; }
.ricerca__elenco { list-style: none; margin: 0; padding: 0; }
.ricerca__voce {
    padding: 18px 0;
    border-bottom: 1px solid var(--border-line);
  }
.ricerca__voce:first-child { padding-top: 0; }
.ricerca__titolo {
    font-size: var(--fs-card-title);
    font-weight: 600;
    color: var(--primary);
  }
.ricerca__titolo:hover { color: var(--red-brand); }
.ricerca__riassunto {
    margin: 6px 0 0;
    font-size: var(--fs-desc);
    line-height: 1.6;
    color: var(--txt-soft);
    max-width: 760px;
  }
/* =========================================================
     SOSTIENI — card su fondo sabbia (blocco prm/support-cards)
     Dal blocco 27 del prototipo. Le card sono a pari altezza e il pulsante è
     allineato in fondo a tutte: `.support-card__body` si prende lo spazio
     avanzato con `flex: 1`, altrimenti i pulsanti si disporrebbero a scaletta
     seguendo la lunghezza dei testi.
     ========================================================= */
.sostieni { background: var(--neutral); }
.sostieni__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 36px;
  }
.support-card {
    background: #fff;
    padding: 32px;
    display: flex;
    flex-direction: column;
  }
.support-card__title {
    font-size: var(--fs-title-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary);
  }
.support-card__body {
    margin-top: 10px;
    font-size: var(--fs-desc);
    line-height: 1.55;
    color: var(--txt-soft);
    flex: 1;
  }
.support-card__cta { margin-top: 22px; }
/* Il pulsante non si allarga quanto la card: resta della sua misura,
     allineato a sinistra sotto il testo. */
.support-card__cta .btn { align-self: flex-start; }
.support-card__cta .\!btn { align-self: flex-start !important; }
/* Destinazione non ancora pronta: il pulsante si vede, spento, e non
     reagisce al passaggio del mouse — il colore della variante resta, così la
     riga di card non perde il suo ritmo. */
.support-card__cta .btn.is-inattivo {
    opacity: .55;
    cursor: default;
  }
.support-card__cta .\!btn.is-inattivo {
    opacity: .55 !important;
    cursor: default !important;
  }
.support-card__cta .btn.is-inattivo:hover { transform: none; }
.support-card__cta .\!btn.is-inattivo:hover { transform: none !important; }
@media (max-width: 1100px) {
    .sostieni__grid { grid-template-columns: repeat(2, 1fr); }
  }
@media (max-width: 640px) {
    .sostieni__grid { grid-template-columns: 1fr; }
    .support-card { padding: 26px; }
  }
/* =========================================================
     DIRETTIVO — griglia di ritratti tondi (blocco prm/direttivo)
     Lo stesso markup serve due contesti: da solo dentro <main> (blocco in una
     pagina full width) si comporta come una sezione, con il suo respiro sopra
     e sotto e il contenitore centrato; dentro il contenuto di una pagina —
     dov'è quasi sempre, perché ci arriva con lo shortcode [direttivo] — quel
     respiro e quel contenitore li mette già l'articolo, e qui si azzerano.
     Il numero di colonne arriva da render.php come --direttivo-colonne.
     ========================================================= */
.direttivo { padding-block: clamp(56px, 8vw, 90px); }
.direttivo__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
.detail-body__main .direttivo { padding-block: 0; }
.detail-body__main .direttivo__inner {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
.direttivo .section-title + .direttivo__grid,
  .direttivo .section-kicker + .direttivo__grid,
  .direttivo .eyebrow + .direttivo__grid { margin-top: 28px; }
.direttivo__grid {
    display: grid;
    grid-template-columns: repeat(var(--direttivo-colonne, 4), 1fr);
    gap: 32px 22px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
.direttivo__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
.direttivo__ritratto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--neutral);
  }
.direttivo__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    /* Il ritaglio tondo prende il centro dell'immagine: nei ritratti la
       faccia sta più in alto, così non si perde il mento. */
    -o-object-position: center 30%;
       object-position: center 30%;
  }
/* Ripiego di chi non ha ancora un ritratto: iniziali nel cerchio, invece di
     un buco nella griglia. */
.direttivo__iniziali {
    font-family: 'JetBrains Mono', monospace;
    font-size: 30px;
    letter-spacing: .04em;
    color: rgba(10, 31, 56, .38);
  }
.direttivo__nome {
    margin-top: 14px;
    font-size: var(--fs-card-title);
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary);
  }
.direttivo__ruolo {
    margin-top: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--red-brand);
  }
/*
   * Il numero di colonne scelto nel blocco è un tetto, non un obbligo: sotto
   * una certa larghezza si scende a tre e poi a due, ma chi ne ha chieste due
   * ne tiene due anche sul telefono. I valori ridotti li calcola render.php e
   * arrivano come custom property loro: `min()` dentro `repeat()` non si può
   * usare, ci vuole un intero.
   */
@media (max-width: 1000px) {
    .direttivo__grid { grid-template-columns: repeat(var(--direttivo-colonne-md, 3), 1fr); }
  }
@media (max-width: 640px) {
    .direttivo__grid { grid-template-columns: repeat(var(--direttivo-colonne-sm, 2), 1fr); gap: 26px 16px; }
    .direttivo__ritratto { width: 96px; }
    .direttivo__iniziali { font-size: 22px; }
    .direttivo__nome { margin-top: 10px; font-size: calc(var(--fs-card-title) - 2px); }
  }
/*
   * Docenti (blocco prm/docenti, shortcode [docenti]): stesso markup, ma la
   * foto sta a sinistra e nome, ruolo e descrizione a destra, allineati a
   * sinistra. La descrizione è un <p> dentro il corpo della pagina: la classe
   * doppia (0,2,0) batte `.detail-body__main p` (gotcha 25).
   */
.direttivo--docente .direttivo__grid { gap: 40px; }
.direttivo--docente .direttivo__item {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    text-align: left;
  }
.direttivo--docente .direttivo__ritratto {
    flex: 0 0 120px;
    width: 120px;
  }
.direttivo--docente .direttivo__testo {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
.direttivo--docente .direttivo__nome { margin-top: 0; }
.direttivo--docente .direttivo__descrizione {
    margin: 10px 0 0;
    font-size: var(--fs-desc);
    line-height: 1.6;
    color: var(--txt-soft);
  }
/* Descrizione a scomparsa (assets/js/src/espandi.js): il <p> resta quello
     sopra, sotto c'è il pulsante «Leggi di più» con la freccia che si gira. */
.espandi__pulsante {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--red-brand);
    cursor: pointer;
  }
.espandi__pulsante:hover { color: var(--primary); }
.espandi__pulsante:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.espandi__icona {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
  }
.espandi__pulsante[aria-expanded="true"] .espandi__icona { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .espandi__icona { transition: none; }
  }
@media (max-width: 640px) {
    .direttivo--docente .direttivo__grid { gap: 32px; }
    .direttivo--docente .direttivo__item { gap: 16px; }
    .direttivo--docente .direttivo__ritratto { flex-basis: 80px; width: 80px; }
    .direttivo--docente .direttivo__nome { margin-top: 0; }
  }
/* =========================================================
     MODULI — Contact Form 7 nel contenuto
     I moduli del bando e delle iscrizioni sono scritti a mano dentro il
     plugin: <p>, <br>, label inline e nessuna classe del tema. Qui si veste
     quel markup così com'è, con la stessa grammatica del form newsletter del
     footer — bordo sottile, raggio 4px, campo a piena larghezza, accento sul
     focus — ribaltata in positivo perché le pagine stanno su fondo bianco.
     Tutto è sotto `.site-main`: il modulo del footer ha già le sue regole e
     vive fuori da <main>, quindi i due non si pestano i piedi.
     Le classi .wpcf7-* non compaiono in nessun PHP del tema, le tiene in vita
     la safelist in tailwind.config.js (le genera il plugin a runtime).
     ========================================================= */
.site-main .wpcf7 { max-width: 720px; }
/*
   * `wpcf7_autop()` spezza il modulo in <p>, e a seconda di come è scritto il
   * template l'etichetta finisce nello stesso paragrafo del campo o in quello
   * prima. Il ritmo di base è stretto; i paragrafi di solo testo — quelli che
   * nei moduli lunghi fanno da etichetta o da titoletto — si prendono più
   * aria sopra, così una domanda si stacca dalla precedente. Se `:has()` non
   * c'è, la regola cade e resta il ritmo uniforme: si legge lo stesso.
   */
.site-main .wpcf7 form p {
    margin: 0 0 14px;
    font-size: var(--fs-desc);
    line-height: 1.6;
    color: var(--txt-softer);
  }
.site-main .wpcf7 form p:not(:has(.wpcf7-form-control)) { margin-top: 26px; }
.site-main .wpcf7 form p:first-of-type { margin-top: 0; }
.site-main .wpcf7 form p:last-child { margin-bottom: 0; }
.site-main .wpcf7 label {
    display: block;
    font-size: var(--fs-desc);
    line-height: 1.6;
    color: var(--txt-softer);
  }
.site-main .wpcf7 hr {
    border: 0;
    border-top: 1px solid var(--border-soft);
    margin: 28px 0;
  }
.site-main .wpcf7 .wpcf7-form-control-wrap { max-width: 100%; }
/*
   * I campi di testo vanno a `display: block`: nei moduli più vecchi stanno
   * in mezzo alla frase («nato/a il [text]»), e da inline-block si
   * schiaccerebbero uno accanto all'altro a larghezze diverse. Da blocchi
   * ognuno prende la sua riga sotto la propria etichetta, senza toccare i
   * template dei moduli. Checkbox e radio restano inline apposta: lì il
   * testo deve stare di fianco al quadratino.
   */
.site-main .wpcf7 input[type="text"],
  .site-main .wpcf7 input[type="email"],
  .site-main .wpcf7 input[type="tel"],
  .site-main .wpcf7 input[type="url"],
  .site-main .wpcf7 input[type="number"],
  .site-main .wpcf7 input[type="date"],
  .site-main .wpcf7 input[type="search"],
  .site-main .wpcf7 textarea,
  .site-main .wpcf7 select {
    display: block;
    width: 100%;
    margin-top: 6px;
    font: inherit;
    font-size: var(--fs-desc);
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--border-line);
    border-radius: 4px;
    padding: 10px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
  }
.site-main .wpcf7 input:focus,
  .site-main .wpcf7 textarea:focus,
  .site-main .wpcf7 select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(10, 31, 56, .08);
  }
.site-main .wpcf7 input::-moz-placeholder, .site-main .wpcf7 textarea::-moz-placeholder { color: rgba(10, 31, 56, .35); }
.site-main .wpcf7 input::placeholder,
  .site-main .wpcf7 textarea::placeholder { color: rgba(10, 31, 56, .35); }
.site-main .wpcf7 textarea {
    min-height: 150px;
    line-height: 1.6;
    resize: vertical;
  }
/* La freccina è disegnata qui perché `appearance: none` toglie anche quella
     di sistema: senza, la select sembrerebbe un campo di testo. */
.site-main .wpcf7 select {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230a1f38' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
  }
/* Allegati: bordo tratteggiato per distinguerli dai campi da compilare. */
.site-main .wpcf7 input[type="file"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    font: inherit;
    font-size: var(--fs-ui);
    color: var(--txt-soft);
    background: #fff;
    border: 1px dashed var(--border-line);
    border-radius: 4px;
    padding: 10px 14px;
  }
.site-main .wpcf7 input[type="file"]::file-selector-button {
    font: inherit;
    font-size: var(--fs-button);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary);
    background: transparent;
    border: 1.5px solid var(--primary);
    border-radius: 999px;
    padding: 6px 16px;
    margin-right: 14px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
.site-main .wpcf7 input[type="file"]::file-selector-button:hover {
    background: var(--primary);
    color: #fff;
  }
/* Scelte multiple — stessi quadratini della newsletter, in positivo. */
.site-main .wpcf7 .wpcf7-list-item { display: block; margin: 0 0 8px; }
.site-main .wpcf7 .wpcf7-list-item:last-child { margin-bottom: 0; }
.site-main .wpcf7 .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
  }
/*
   * Il consenso è l'eccezione: il plugin stampa solo la casella e il testo lo
   * scrive l'autore del modulo lì di fianco, fuori dal wrap. Da blocco la
   * casella si porterebbe via una riga tutta sua lasciando la frase sotto,
   * orfana; inline restano sulla stessa riga e il testo va a capo da sé.
   */
.site-main .wpcf7 .wpcf7-acceptance .wpcf7-list-item { display: inline; margin: 0; }
.site-main .wpcf7 .wpcf7-list-item-label::before,
  .site-main .wpcf7 .wpcf7-list-item-label::after { content: none; }
.site-main .wpcf7 input[type="checkbox"],
  .site-main .wpcf7 input[type="radio"] {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: -4px;
    border: 1.5px solid rgba(10, 31, 56, .35);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease;
  }
.site-main .wpcf7 input[type="radio"] { border-radius: 50%; }
.site-main .wpcf7 input[type="checkbox"]:hover,
  .site-main .wpcf7 input[type="radio"]:hover { border-color: var(--primary); }
.site-main .wpcf7 input[type="checkbox"]:checked,
  .site-main .wpcf7 input[type="radio"]:checked {
    background: var(--primary);
    border-color: var(--primary);
  }
.site-main .wpcf7 input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
.site-main .wpcf7 input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
  }
/* Con l'opzione `label_first` il testo precede la casella: lo stacco va
     spostato a sinistra, o resta appiccicato all'etichetta. */
.site-main .wpcf7 .wpcf7-list-item-label + input[type="checkbox"],
  .site-main .wpcf7 .wpcf7-list-item-label + input[type="radio"] { margin: 0 0 0 8px; }
.site-main .wpcf7 input[type="checkbox"]:focus-visible,
  .site-main .wpcf7 input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
/* Invio — stesso pulsante di .btn.btn--red, che qui non si può mettere in
     classe: il markup lo genera il plugin. */
.site-main .wpcf7 input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: calc(var(--fs-button) + 1px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--red-brand);
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
  }
.site-main .wpcf7 input[type="submit"]:hover {
    background: var(--red-hover);
    transform: translateY(-1px);
  }
/* Finché manca il consenso CF7 tiene il submit disabilitato: senza questo
     sembrerebbe attivo e non risponderebbe al clic. */
.site-main .wpcf7 input[type="submit"]:disabled {
    opacity: .45;
    transform: none;
    background: var(--red-brand);
  }
.site-main .wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }
/* Errori di validazione e messaggio finale. */
.site-main .wpcf7 .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: var(--fs-meta);
    line-height: 1.45;
    color: var(--red-brand);
  }
.site-main .wpcf7 input.wpcf7-not-valid,
  .site-main .wpcf7 textarea.wpcf7-not-valid,
  .site-main .wpcf7 select.wpcf7-not-valid { border-color: var(--red-brand); }
.site-main .wpcf7 form .wpcf7-response-output {
    margin: 24px 0 0;
    padding: 12px 16px;
    border-width: 1px;
    border-radius: 4px;
    font-size: var(--fs-ui);
    line-height: 1.5;
  }
.site-main .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--primary);
    background: rgba(10, 31, 56, .04);
    color: var(--primary);
  }
.site-main .wpcf7 form.invalid .wpcf7-response-output,
  .site-main .wpcf7 form.unaccepted .wpcf7-response-output,
  .site-main .wpcf7 form.failed .wpcf7-response-output,
  .site-main .wpcf7 form.aborted .wpcf7-response-output,
  .site-main .wpcf7 form.spam .wpcf7-response-output {
    border-color: var(--red-brand);
    background: rgba(208, 44, 42, .05);
    color: var(--red-brand);
  }
/*
   * Modulo newsletter dentro una pagina (/newsletter/): è lo stesso del
   * footer, quindi si porta dietro le classi .newsletter-form__* pensate per
   * il fondo blu — testo e bordi bianchi, invisibili qui. Il gruppo che lo
   * contiene ha la classe `newsletter_container`, messa nell'editor: sotto
   * quella si tiene l'impaginazione del footer (nome e cognome affiancati,
   * email sotto, consenso e pulsante sulla stessa riga) e si prendono i
   * colori in positivo dei moduli qui sopra. Il footer non viene toccato.
   * Specificità (0,3,1) apposta: deve battere `.site-main .wpcf7 form p` e
   * `.site-main .wpcf7 label`, che vestono i moduli lunghi.
   */
.site-main .newsletter_container > .wpcf7 { flex: 1 1 auto; min-width: 0; }
.site-main .newsletter_container .newsletter-form__field p,
  .site-main .newsletter_container .newsletter-form__bottom p { margin: 0; }
/* Fra etichetta e campo il plugin mette un <br>: con l'etichetta a blocco
     diventerebbe una riga vuota. */
.site-main .newsletter_container .newsletter-form__field br { display: none; }
.site-main .newsletter_container .newsletter-form__field label {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-soft);
  }
.site-main .newsletter_container .newsletter-form__bottom { margin-top: 18px; }
.site-main .newsletter_container .newsletter-form__checkbox span { color: var(--txt-soft); }
/* Lo spinner nel footer si accende con .newsletter-form--expanded, che il
     modulo in pagina non ha: qui basta lo stato di invio di CF7. */
.site-main .newsletter_container form.submitting .wpcf7-spinner { display: inline-block; }
.site-main .newsletter_container .newsletter-form__bottom .wpcf7-spinner { background-color: rgba(10, 31, 56, .35); }
.site-main .newsletter_container .newsletter-form__bottom .wpcf7-spinner::before { background-color: #fff; }
@media (max-width: 600px) {
    .site-main .newsletter_container .newsletter-form__row { grid-template-columns: 1fr; }
    .site-main .newsletter_container .newsletter-form__bottom { flex-direction: column; align-items: flex-start; }
  }
/* =========================================================
     MOVIMENTO RIDOTTO
     Chi ha chiesto meno animazioni al sistema operativo tiene gli stati
     hover/focus ma senza spostamenti: le tessere sezione sono l'effetto più
     marcato del tema (sollevamento + icona che ruota e scala).
     ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .site-header--b .header-row-1__inner,
    .site-header--b .header-row-2__inner,
    .site-header--b .brand__logo { transition: none; }
    .site-header { transition: none; }
    .section-tile,
    .section-tile__icon,
    .section-tile__arrow { transition: none; }
    .section-tile:hover { transform: none; }
    .section-tile:hover .section-tile__icon { transform: none; }
    .section-tile:hover .section-tile__arrow { transform: none; }
    .site-main .wpcf7 input[type="submit"]:hover { transform: none; }
  }
/* =========================================================
     RESPONSIVE
     ========================================================= */
@media (max-width: 1100px) {
    .detail-body { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    /* Il player scende sotto al testo; l'aside smette di seguire la lettura,
       perché in colonna singola resterebbe incollato a mezza pagina. */
    .detail-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .detail-hero__lead { max-width: 720px; }
    .detail-aside,
    body.admin-bar .detail-aside { position: static; }
    /* Il ritratto si stringe prima di scendere sotto al testo. */
    .persona__inner { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
    /* Sotto i 1100 il sottomenu scende in coda: la griglia torna a tre come gli altri archivi. */
    .news-archive__inner--with-aside { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .news-archive__inner--with-aside .cards-grid { grid-template-columns: repeat(3, 1fr); }
    /* `minmax(0, 1fr)` e non `1fr`: con `1fr` la colonna non scende sotto il
       contenuto più largo, e un pulsante dall'etichetta lunga la allargava
       oltre lo schermo portandosi dietro titolo e testo. */
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .hero-poster .ph { height: 320px; }
    /* Gli autori della scheda inchiesta scendono sotto il testo: in colonna
       piena i ritratti da 170px impilati occupavano mezzo schermo per tre
       nomi. Tornano in riga, ritratto piccolo e nome accanto. */
    .author-block--lg { flex-direction: row; align-items: center; gap: 14px; }
    .author-block--lg + .author-block--lg { margin-top: 14px; }
    .author-block--lg .author-block__portrait { width: 64px; height: 64px; flex: 0 0 64px; margin: 0; }
    .author-block--lg .author-block__meta { text-align: left; }
    .magazine__grid { grid-template-columns: 1fr; }
    /* In colonna singola la notizia in evidenza è una fra le altre: titolo,
       meta e distanze sono quelli di .magazine__item. */
    .magazine__featured .tag { margin-top: 12px; }
    .magazine__featured-title {
      font-size: var(--fs-card-title);
      font-weight: 500;
      line-height: 1.35;
      letter-spacing: 0;
      margin-top: 6px;
      -webkit-line-clamp: 3;
    }
    .magazine__featured-meta { font-size: var(--fs-meta); line-height: 1.4; margin-top: 6px; }
    /* Due colonne è un tetto, non un obbligo: chi ne ha due ne tiene due.
       Il valore lo calcola render.php — vedi il commento sulla griglia. */
    .card-grid__grid { grid-template-columns: repeat(var(--card-grid-colonne-md, 2), 1fr); }
    .people-grid { grid-template-columns: repeat(3, 1fr); }
    .partner-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-cols { grid-template-columns: 1fr 1fr; row-gap: 36px; }
    .footer-newsletter-col { grid-column: 1 / -1; }
  }
@media (max-width: 900px) {
    .page-intro__row { grid-template-columns: 1fr; }
    .cards-grid,
    .news-archive__inner--with-aside .cards-grid { grid-template-columns: repeat(2, 1fr); }
  /* Archivio di categoria misto: i ritratti seguono le card, staccati. */
  .news-archive__main .cards-grid + .people-grid { margin-top: 48px; }
    .gallery,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6 { grid-template-columns: repeat(2, 1fr); }
    .people-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-grid { grid-template-columns: repeat(3, 1fr); }
    .section-tiles__grid { grid-template-columns: repeat(2, 1fr); }
    .filters__row { flex-direction: column; align-items: stretch; gap: 20px; }
    .filters__search { margin-left: 0; }
    .search-box { min-width: 0; }
    .footer-cols { grid-template-columns: 1fr; }
  }
@media (max-width: 780px) {
    .site-header--b .header-row-1__inner { padding: 12px var(--pad-x); gap: 12px; }
    .site-header--b .brand__logo { height: 56px; }
    /* Qui l'header non si comprime: scorrendo in giù esce dall'alto e
       tornando su rientra intero (classe .is-nascosto, da header.js). Le due
       righe sullo stato compresso servono lo stesso, perché quelle del
       desktop hanno una classe in più e vincerebbero, cambiando l'altezza. */
    .site-header.is-scrolled .header-row-1__inner { padding-top: 12px; padding-bottom: 12px; }
    .site-header.is-scrolled .brand__logo { height: 56px; }
    .site-header { transition: transform .25s ease; }
    .site-header.is-nascosto { transform: translateY(-100%); }
    /* Col fuoco da tastiera su un suo controllo l'header non può restare fuori vista. */
    .site-header.is-nascosto:focus-within { transform: none; }
    .site-header--b .header-row-1__actions { gap: 10px; }
    .site-header--b .header-row-1__actions .util { display: none; }
    .site-header--b .header-row-1__actions .header-search { display: none; }
    .site-header--b .header-row-1__actions > .btn { display: none; }
    .site-header--b .header-row-2 { display: none; }
    .menu-toggle { display: flex; }
    .page-intro__inner { padding: 34px var(--pad-x) 20px; }
    .persona__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 34px var(--pad-x) 48px; }
    .persona__ritratto { max-width: 280px; }
    .page-intro--compact .page-intro__inner { padding: 20px var(--pad-x) 18px; }
    .detail-body { padding: 48px var(--pad-x); }
    .detail-hero__inner { padding: 28px var(--pad-x) 0; }
    .detail-hero__grid { padding-bottom: 40px; }
    /* La striscia dei dati scorre in orizzontale invece di schiacciarsi:
       le voci sono da due a sei, e a colonna singola diventerebbe un elenco
       lungo quanto la testata. */
    .meta-strip__inner { padding: 26px var(--pad-x); gap: 22px; }
    .meta-strip__riga { gap: 22px; }
    .evento-card { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
    .evento-card__poster { aspect-ratio: 16 / 10; }
    .evento-card__foot { justify-content: flex-start; }
    .evento-card__foot .btn { width: 100%; text-align: center; }
    .hero__inner { padding: 28px var(--pad-x) 36px; }
    .hero-title { margin-top: 12px; }
    .hero-stats { margin-top: 24px; }
    /* Qui l'header non si comprime: scorrendo in giù esce dall'alto e
       tornando su rientra intero (classe .is-nascosto, da header.js). Le due
       righe sullo stato compresso servono lo stesso, perché quelle del
       desktop hanno una classe in più e vincerebbero, cambiando l'altezza. */
    /* Col fuoco da tastiera su un suo controllo l'header non può restare fuori vista. */
    .site-header--b .header-row-1__actions > .\!btn { display: none !important; }
    /* La striscia dei dati scorre in orizzontale invece di schiacciarsi:
       le voci sono da due a sei, e a colonna singola diventerebbe un elenco
       lungo quanto la testata. */
    .evento-card__foot .\!btn { width: 100% !important; text-align: center !important; }
    /* Qui l'header non si comprime: scorrendo in giù esce dall'alto e
       tornando su rientra intero (classe .is-nascosto, da header.js). Le due
       righe sullo stato compresso servono lo stesso, perché quelle del
       desktop hanno una classe in più e vincerebbero, cambiando l'altezza. */
    /* Col fuoco da tastiera su un suo controllo l'header non può restare fuori vista. */
    .site-header--b .header-row-1__actions > .\!btn { display: none !important; }
    /* La striscia dei dati scorre in orizzontale invece di schiacciarsi:
       le voci sono da due a sei, e a colonna singola diventerebbe un elenco
       lungo quanto la testata. */
    .evento-card__foot .\!btn { width: 100% !important; text-align: center !important; }
  }
@media (max-width: 600px) {
    .newsletter-form__row { grid-template-columns: 1fr; }
    .newsletter-form__bottom { flex-direction: column; align-items: stretch; }
    .newsletter-form__bottom .btn { width: 100%; }
    .card-grid__grid { grid-template-columns: 1fr; }
    .cards-grid,
    .news-archive__inner--with-aside .cards-grid { grid-template-columns: 1fr; }
    .section-tiles__grid { grid-template-columns: 1fr; }
    .section-tile { min-height: 200px; }
    .news-archive__filters { justify-content: flex-start; }
    .gallery,
    .gallery-columns-2,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6 { grid-template-columns: 1fr; }
    .prm-lightbox__nav { width: 38px; height: 38px; }
    /* Quattro statistiche affiancate su 360px spezzavano le parole delle
       label («I» da una parte, «NCHIESTE» dall'altra): due per riga. */
    /* Pulsanti: con il testo più piccolo (--fs-button) scende anche l'imbottitura. */
    .btn { padding: 8px 14px; }
    .btn--lg { padding: 10px 19px; }
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 20px;
    }
    .hero-stats__lbl { letter-spacing: .06em; }

    /* Corpo dei testi: interlinea un filo più stretta con la misura minore. */
    .detail-body__main p { line-height: 1.65; }

    /* Il giustificato messo nell'editor, su una colonna stretta, apre buchi
       fra le parole: sul telefono il testo torna allineato a sinistra. È uno
       stile in linea, quindi serve !important. */
    .site-main [style*="text-align: justify"],
    .site-main [style*="text-align:justify"] { text-align: left !important; }

    /* Parole più lunghe della riga (titoli in maiuscolo delle inchieste):
       vanno a capo invece di sbordare. Niente sillabazione automatica: sui
       titoli in maiuscolo spezzava anche parole che ci stavano («LEGALI-TÀ»). */
    .page-title,
    .detail-hero__title,
    .persona__nome { overflow-wrap: break-word; }

    /* Chip dei filtri: una riga che scorre di lato invece di quattro righe
       che spingono i risultati sotto la piega. Il chip tagliato al bordo
       dice che ce ne sono altri. */
    .filters .chips {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      margin-right: calc(-1 * var(--pad-x));
      padding-right: var(--pad-x);
      -webkit-overflow-scrolling: touch;
    }
    .filters .chips::-webkit-scrollbar { display: none; }
    .filters .chip { flex: none; padding: 8px 14px; }
    .filters__row { gap: 16px; }
    /* Senza, il gruppo prende la larghezza di tutti i chip in fila e la
       pagina scorre di lato: deve restare largo quanto lo schermo, e a
       scorrere è solo la riga dei chip. */
    .filters__row > * { min-width: 0; max-width: 100%; }
    .newsletter-form__bottom .\!btn { width: 100% !important; }
    /* Quattro statistiche affiancate su 360px spezzavano le parole delle
       label («I» da una parte, «NCHIESTE» dall'altra): due per riga. */
    /* Pulsanti: con il testo più piccolo (--fs-button) scende anche l'imbottitura. */
    .\!btn { padding: 8px 14px !important; }

    /* Corpo dei testi: interlinea un filo più stretta con la misura minore. */

    /* Il giustificato messo nell'editor, su una colonna stretta, apre buchi
       fra le parole: sul telefono il testo torna allineato a sinistra. È uno
       stile in linea, quindi serve !important. */

    /* Parole più lunghe della riga (titoli in maiuscolo delle inchieste):
       vanno a capo invece di sbordare. Niente sillabazione automatica: sui
       titoli in maiuscolo spezzava anche parole che ci stavano («LEGALI-TÀ»). */

    /* Chip dei filtri: una riga che scorre di lato invece di quattro righe
       che spingono i risultati sotto la piega. Il chip tagliato al bordo
       dice che ce ne sono altri. */
    /* Senza, il gruppo prende la larghezza di tutti i chip in fila e la
       pagina scorre di lato: deve restare largo quanto lo schermo, e a
       scorrere è solo la riga dei chip. */
    .newsletter-form__bottom .\!btn { width: 100% !important; }
    /* Quattro statistiche affiancate su 360px spezzavano le parole delle
       label («I» da una parte, «NCHIESTE» dall'altra): due per riga. */
    /* Pulsanti: con il testo più piccolo (--fs-button) scende anche l'imbottitura. */
    .\!btn { padding: 8px 14px !important; }

    /* Corpo dei testi: interlinea un filo più stretta con la misura minore. */

    /* Il giustificato messo nell'editor, su una colonna stretta, apre buchi
       fra le parole: sul telefono il testo torna allineato a sinistra. È uno
       stile in linea, quindi serve !important. */

    /* Parole più lunghe della riga (titoli in maiuscolo delle inchieste):
       vanno a capo invece di sbordare. Niente sillabazione automatica: sui
       titoli in maiuscolo spezzava anche parole che ci stavano («LEGALI-TÀ»). */

    /* Chip dei filtri: una riga che scorre di lato invece di quattro righe
       che spingono i risultati sotto la piega. Il chip tagliato al bordo
       dice che ce ne sono altri. */
    /* Senza, il gruppo prende la larghezza di tutti i chip in fila e la
       pagina scorre di lato: deve restare largo quanto lo schermo, e a
       scorrere è solo la riga dei chip. */
  }
/* Campi dei moduli a 16px sui touch: sotto questa misura Safari su iPhone
     ingrandisce la pagina quando si tocca un campo, e non torna indietro da
     sé. Vale per ricerca, newsletter e moduli CF7; i selettori del tema hanno
     specificità (0,1,1) o (0,2,1), da qui i :not() che la alzano. */
@media (max-width: 780px) {
    body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
    body select:not([multiple]):not([size]),
    body textarea:not([rows="0"]) { font-size: 16px; }
  }
.static {
  position: static;
}
.sticky {
  position: sticky;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.border {
  border-width: 1px;
}
.uppercase {
  text-transform: uppercase;
}
.outline {
  outline-style: solid;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}