/* ==========================================================================
   Perfetto Network - Main CSS
   Redesign basato su Figma "Network PerfeTTO sito"
   ==========================================================================

   ⚠️  ATTENZIONE — NON CARICARE QUESTO FILE IN WP-ADMIN  ⚠️

   Questo CSS contiene regole globali (body, html, *, a, h1..h6, ecc.)
   pensate per il frontend del sito. Caricarlo in wp-admin, nel block editor
   o nella pagina di login ROMPE l'interfaccia di WordPress. In particolare:

   - body { overflow-x: hidden }   → rompe dropdown ACF/menu admin
   - body { line-height: 1.6 }     → distorce spaziature admin
   - body { background: transparent } → mostra trasparenze indesiderate
   - body { font-family: ... }     → cambia tipografia admin globale
   - * { box-sizing: border-box }  → cambia dimensioni input/widget WP

   Hook ammessi per enqueue di questo file:
     ✅ wp_enqueue_scripts         (frontend, hook attuale - corretto)

   Hook VIETATI:
     ❌ admin_enqueue_scripts      (wp-admin)
     ❌ enqueue_block_editor_assets (Gutenberg)
     ❌ enqueue_block_assets       (frontend+editor, ha effetto admin)
     ❌ login_enqueue_scripts      (pagina di login)

   Se serve stile in admin: creare un asset dedicato e scoped (vedi
   inc/acf/acf-admin-assets.php → assets/css/acf-admin.css come esempio).

   Vincolo documentato anche in docs/ai/AGENT.md ("Paletti assoluti").
   ========================================================================== */

/* Google Fonts: caricati via <link> in functions.php (perfetto_network_enqueue_assets)
   per evitare @import render-blocking. */

/* ╔════════════════════════════════════════════════════════════════════════╗
   ║ INDICE main.css                                                         ║
   ║ Cerca i banner di sezione (commenti con linee di trattini) per saltare. ║
   ╠════════════════════════════════════════════════════════════════════════╣
   ║  1. :root (design tokens: --variant-*, --pn-*, spacing, font, radius)   ║
   ║  2. Reset (scoped a .site-*)                                            ║
   ║  3. Page loader (#pn-loader)                                            ║
   ║  4. Hero (sezione home)                                                 ║
   ║  5. Header (.pn-header-*, dropdown servizi)                             ║
   ║  6. Sezione Servizi home (.pn-servizi-*, accordion)                     ║
   ║  7. (rimossa: Call attive — 2026-05-18)                                 ║
   ║  8. Sezione News + carousel                                             ║
   ║  9. Sezione Eventi                                                      ║
   ║ 10. (rimossa: In evidenza — 2026-05-18, CSS in docs/archive/)           ║
   ║ 11. Footer (.pn-footer-*)                                               ║
   ║ 12. Pillolons footer (pre-footer decorativo)                            ║
   ║ 13. Page-title interno (.pn-page-title-*, palette servizio)             ║
   ║ 14. Single servizio (.pn-servizio-*, blocchi Flexible Content)          ║
   ║ 14b. Sezione Partner (.pn-partner-*, riusabile, 3 brand Magma)          ║
   ║ 15. Card post Magma (.pn-magma-card-*)                                  ║
   ║ 16. Utility (.pn-bg-decor-*, .sr-only, ecc.)                            ║
   ║ 17. Reveal animations (.reveal-on-scroll)                               ║
   ║ 18. Responsive @media (max-width: 1023px) — tablet                      ║
   ║ 19. Responsive @media (max-width: 767px) — mobile                       ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

:root {
  /* ═════════════════════════════════════════════════════════════════════
     DESIGN TOKENS — Brand Perfetto sovrascrivono i default Magma.
     Aggiornato il 2026-05-19: le scale --variant-{primary|secondary|tertiary}-*
     NON sono piu' scritte qui. Vengono generate da `npm run tokens`
     (vedi tools + docs/ai/modules/design-tokens.md), output in
     assets/css/tokens/css/colors-{rgb,hex}-perfetto.css ed enqueuate
     in functions.php DOPO i vendor Magma e PRIMA di questo file.

     Tutti i componenti Magma con variant="primary|secondary|tertiary"
     prendono i colori brand Perfetto automaticamente: NON serve definire
     --variant-* a mano qui.

     ALIAS LEGACY: per non riscrivere il CSS esistente, alcuni alias
     `--variant-{ns}-seed` puntano al seed Magma `--variant-{ns}` (con
     fallback hex per render senza token CSS, es. email/preview).
     Token Magma (--tone-*, --status-*) sono caricati a parte da
     assets/css/vendor/magma/*.css.
     ═════════════════════════════════════════════════════════════════════ */

  /* Alias "-seed": il Figma chiama il seed come `variant primary/seed`, in
   * CSS il tool Magma lo espone come `--variant-primary` (RGB triplet).
   * Aliasing wrappato in rgb() per usarlo come colore diretto. Hex fallback
   * usato quando il file token generato non e' caricato. */
  --variant-primary-seed: rgb(var(--variant-primary, 0 91 132));
  --variant-secondary-seed: rgb(var(--variant-secondary, 208 219 113));
  --variant-tertiary-seed: rgb(var(--variant-tertiary, 173 70 147));

  /* ── Brand: Accent NON coperti dal generato ──────────────────────── */
  --secondary-light: #ecf68c; /* giallo-verde chiaro */
  --primary-light-01: #0fa7cd; /* azzurro accent */
  --primary-light-01-rgb: 15 167 205; /* triplet per rgb(var()) */

  /* ── Spacing (Figma scala 100 = 4px) ──────────────────────────────── */
  --spacing-100: 4px;
  --spacing-200: 8px;
  --spacing-300: 12px;
  --spacing-350: 14px;
  --spacing-400: 16px;
  --spacing-600: 24px;
  --spacing-800: 32px;
  --spacing-1000: 40px;
  --spacing-1200: 48px;
  --spacing-1600: 64px;
  --spacing-3200: 128px;

  /* ── Tipografia ───────────────────────────────────────────────────── */
  /* Decisione (vedi docs/ai/figma-tokens-todo.md): Montserrat ovunque,
   * Roboto solo dove Figma lo richiede esplicitamente (Title/H4 nei menu).
   * Karla (Figma Info/*) skippata per ora -> alias a body. */
  --pn-font-body: "Montserrat", system-ui, sans-serif;
  --pn-font-display: "Montserrat", system-ui, sans-serif;
  --pn-font-menu: "Roboto", "Montserrat", system-ui, sans-serif;
  --pn-font-info: var(--pn-font-body);

  /* ── Container & Radius ───────────────────────────────────────────── */
  --pn-max-width: 1280px; /* allineato al Figma (era 1220) */
  --pn-radius-sm: 30px;
  --pn-radius-md: 50px;
  --pn-radius-lg: 80px;
  --pn-radius-xl: 1000px;
  --pn-radius-pill: 500px;

  /* ═════════════════════════════════════════════════════════════════════
     ALIAS LEGACY — Mappano i vecchi nomi --pn-* ai nuovi token Figma.
     Tutto il CSS esistente continua a funzionare. Refactor incrementale.
     TODO (vedi docs/ai/figma-tokens-todo.md):
       - --pn-biscay, --pn-fuchsia, --pn-wattle, --pn-azure-*:
         token "legacy v1" non presenti nel Figma corrente -> verificare uso
         e rimuovere dopo audit.
     ═════════════════════════════════════════════════════════════════════ */

  /* Brand alias */
  --pn-brand-blu: var(--variant-primary-seed);
  --pn-brand-rosa: var(--variant-tertiary-seed);
  --pn-brand-verde: var(--variant-secondary-seed);
  --pn-brand-azzurro: var(--primary-light-01);

  /* Varianti chiare/scure derivate.
   * I --variant-{ns}-NN sono RGB triplet (generati dal tool tokens), per usarli
   * come colore diretto vanno wrappati in rgb(). Hex fallback per render senza
   * token CSS (es. email/preview senza CSS loaded). */
  --pn-brand-blu-dark: rgb(
    var(--variant-primary-03, 0 82 120)
  ); /* hover/active blu */
  --pn-brand-blu-light: rgb(
    var(--variant-primary-10, 231 248 255)
  ); /* bg leggero */
  --pn-brand-blu-pastel: rgb(
    var(--variant-primary-08, 159 225 255)
  ); /* bg leggero pastello */
  --pn-brand-rosa-pastel: rgb(var(--variant-tertiary-10, 250 243 248));
  --pn-brand-verde-light: var(--secondary-light);

  /* Brand palette scale legacy */
  --pn-primary-01: #001d2b; /* legacy, non in Figma — da verificare */
  --pn-primary-02: rgb(var(--variant-primary-02, 0 69 101));
  --pn-primary-03: rgb(var(--variant-primary-03, 0 82 120));
  --pn-primary-06: #0096d9; /* legacy, non in Figma — da verificare */
  --pn-primary-10: rgb(var(--variant-primary-10, 231 248 255));

  --pn-secondary-02: #3e4411; /* legacy, non in Figma */
  --pn-secondary-04: rgb(var(--variant-secondary-04, 89 97 24));
  --pn-secondary-06: rgb(var(--variant-secondary-06, 137 149 38));
  --pn-secondary-07: #b9c933; /* legacy, non in Figma */
  --pn-secondary-10: rgb(var(--variant-secondary-10, 245 247 223));

  --pn-tertiary-01: #2b1225; /* legacy, non in Figma */
  --pn-tertiary-04: #923b7c; /* legacy, non in Figma */
  --pn-tertiary-05: #ae4693; /* Figma anomalia: quasi-duplicato di seed */
  --pn-tertiary-06: #c571b0; /* legacy, non in Figma */
  --pn-tertiary-10: rgb(var(--variant-tertiary-10, 250 243 248));

  /* Legacy v1 (audit 2026-05-17: --pn-wattle, --pn-azure-65, --pn-azure-84,
   * --pn-slate-gray rimossi perche' 0 referenze nel codice. I rimanenti sono
   * ancora usati in 1-4 punti; vedi docs/ai/figma-tokens-todo.md per la
   * mappatura ai possibili token Figma equivalenti). */
  --pn-azure-24: #004b79; /* .pn-news-tag--blue (potrebbe diventare --variant-primary-seed) */
  --pn-biscay: #1b295e;
  --pn-fuchsia: #b9529f; /* .pn-news-tag--pink (potrebbe diventare --variant-tertiary-seed) */

  /* Neutrali: valori FISSI (non legati ai --tone-* Magma).
   * NB: i token Magma --tone-neutral / --tone-neutral-* cambiano valore in
   * dark mode (es. --tone-neutral diventa #000000 con prefers-color-scheme:
   * dark). Il sito Perfetto Network non supporta dark mode, quindi usiamo
   * hex fissi qui per evitare "sfondi che diventano neri" se il browser/OS
   * dell'utente e' in dark mode. */
  --pn-white: #ffffff;
  --pn-surface-base: #f8f8f8; /* Figma Tone/Neutral/10 — bg globale sito */
  --pn-text: #1a1a1a;
  --pn-grey-27: #444444;
  --pn-grey-93: #eeeeee;

  /* Tipografia legacy */
  --pn-font-heading: var(--pn-font-display);
}

/* Reset
 * Scoped al frontend (.site-header, .site-main, .site-footer) per ridurre il
 * rischio di danno collaterale se per errore questo CSS venisse caricato in
 * wp-admin (vedi paletto in alto al file). Si applica anche a #pn-loader e a
 * tutti i template parts del tema, che sono sempre figli di .site-* nel
 * markup standard WP. */
.site-header,
.site-header *,
.site-header *::before,
.site-header *::after,
.site-main,
.site-main *,
.site-main *::before,
.site-main *::after,
.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after,
#pn-loader,
#pn-loader *,
#pn-loader *::before,
#pn-loader *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

html {
  background: var(--pn-surface-base);
}

body {
  margin: 0;
  font-family: var(--pn-font-body);
  color: var(--pn-text);
  background: transparent;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ==========================================================================
   PAGE LOADER
   ========================================================================== */
#pn-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--pn-primary-01);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#pn-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.pn-loader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.pn-loader-wordmark {
  font-family: var(--pn-font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--pn-white);
  letter-spacing: -0.02em;
  overflow: hidden;
  display: flex;
  gap: 0.12em;
}

.pn-loader-wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px);
  animation: loaderCharIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pn-loader-wordmark .accent {
  color: var(--pn-primary-06);
}

.pn-loader-bar {
  width: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--pn-primary-06),
    var(--pn-secondary-07)
  );
  border-radius: 99px;
  animation: loaderBar 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

@keyframes loaderCharIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loaderBar {
  to {
    width: 100%;
  }
}

/* Animazioni ingresso hero dopo loader */
.pn-hero-inner > * {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-ready .pn-hero-inner > * {
  opacity: 1;
  transform: translateY(0);
}

body.page-ready .pn-hero-inner > *:nth-child(1) {
  transition-delay: 0.05s;
}
body.page-ready .pn-hero-inner > *:nth-child(2) {
  transition-delay: 0.15s;
}
body.page-ready .pn-hero-inner > *:nth-child(3) {
  transition-delay: 0.25s;
}
body.page-ready .pn-hero-inner > *:nth-child(4) {
  transition-delay: 0.35s;
}
body.page-ready .pn-hero-inner > *:nth-child(5) {
  transition-delay: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  #pn-loader {
    display: none;
  }
  .pn-hero-inner > * {
    opacity: 1;
    transform: none;
  }
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Interactive hover baseline: feedback sobrio per CTA, bottoni e card-link.
   Le frecce carousel/paginazione mantengono i loro hover direzionali dedicati. */
:where(
  .pn-btn,
  .pn-header-accedi,
  .pn-hero-cta-button,
  .pn-news-cta,
  .pn-eventi-cta,
  .pn-call-cta-button,
  .pn-call-cta-empty-button,
  .pn-news-featured-button,
  .pn-news-card-link,
  .pn-evento-card-link,
  .pn-servizio-cta,
  .pn-piano-cta,
  .pn-partner-card__link,
  .pn-call-list-button,
  .pn-call-card-content-button,
  .pn-call-card-archivio-content-button,
  .pn-eventi-past-button,
  .pn-eventi-archive-search-button,
  .pn-partner-archive-search-button,
  .pn-eventi-archive-filter,
  .pn-partner-archive-filter,
  .pn-footer-social-link,
  .pn-footer-newsletter-mc4wp input[type="submit"],
  .pn-footer-newsletter-mc4wp button[type="submit"],
  .lcn-bando-button
) {
  transition:
    color 0.2s ease,
    background 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease;
}

:where(
    .pn-btn,
    .pn-header-accedi,
    .pn-hero-cta-button,
    .pn-news-cta,
    .pn-eventi-cta,
    .pn-call-cta-button,
    .pn-call-cta-empty-button,
    .pn-news-featured-button,
    .pn-news-card-link,
    .pn-evento-card-link,
    .pn-servizio-cta,
    .pn-piano-cta,
    .pn-partner-card__link,
    .pn-call-list-button,
    .pn-call-card-content-button,
    .pn-call-card-archivio-content-button,
    .pn-eventi-past-button,
    .pn-eventi-archive-search-button,
    .pn-partner-archive-search-button,
    .pn-eventi-archive-filter,
    .pn-partner-archive-filter,
    .pn-footer-social-link,
    .pn-footer-newsletter-mc4wp input[type="submit"],
    .pn-footer-newsletter-mc4wp button[type="submit"],
    .lcn-bando-button
  ):where(:hover, :focus-visible):not(:disabled):not([disabled]) {
  box-shadow: 0 8px 18px rgba(0, 82, 120, 0.14);
  filter: brightness(0.98);
  transform: translateY(-1px);
}

:where(
    .pn-btn,
    .pn-header-accedi,
    .pn-hero-cta-button,
    .pn-news-cta,
    .pn-eventi-cta,
    .pn-call-cta-button,
    .pn-call-cta-empty-button,
    .pn-news-featured-button,
    .pn-news-card-link,
    .pn-evento-card-link,
    .pn-servizio-cta,
    .pn-partner-card__link,
    .pn-call-list-button,
    .pn-call-card-content-button,
    .pn-call-card-archivio-content-button,
    .pn-eventi-past-button,
    .pn-eventi-archive-search-button,
    .pn-partner-archive-search-button,
    .pn-eventi-archive-filter,
    .pn-partner-archive-filter,
    .pn-footer-social-link,
    .pn-footer-newsletter-mc4wp input[type="submit"],
    .pn-footer-newsletter-mc4wp button[type="submit"],
    .lcn-bando-button
  ):where(:active):not(:disabled):not([disabled]) {
  box-shadow: 0 2px 6px rgba(0, 82, 120, 0.12);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pn-eventi-archive-row {
    transition-duration: 0.01ms;
  }

  .pn-eventi-archive-row:has(.pn-eventi-archive-row-link:hover),
  .pn-eventi-archive-row:has(.pn-eventi-archive-row-link:focus-visible) {
    transform: none;
  }

  :where(
    .pn-btn,
    .pn-header-accedi,
    .pn-hero-cta-button,
    .pn-news-cta,
    .pn-eventi-cta,
    .pn-call-cta-button,
    .pn-call-cta-empty-button,
    .pn-news-featured-button,
    .pn-news-card-link,
    .pn-evento-card-link,
    .pn-servizio-cta,
    .pn-partner-card__link,
    .pn-call-list-button,
    .pn-call-card-content-button,
    .pn-call-card-archivio-content-button,
    .pn-eventi-past-button,
    .pn-eventi-archive-search-button,
    .pn-partner-archive-search-button,
    .pn-eventi-archive-filter,
    .pn-partner-archive-filter,
    .pn-footer-social-link,
    .pn-footer-newsletter-mc4wp input[type="submit"],
    .pn-footer-newsletter-mc4wp button[type="submit"],
    .lcn-bando-button
  ) {
    transition-duration: 0.01ms;
  }

  :where(
    .pn-btn,
    .pn-header-accedi,
    .pn-hero-cta-button,
    .pn-news-cta,
    .pn-eventi-cta,
    .pn-call-cta-button,
    .pn-call-cta-empty-button,
    .pn-news-featured-button,
    .pn-news-card-link,
    .pn-evento-card-link,
    .pn-servizio-cta,
    .pn-piano-cta,
    .pn-partner-card__link,
    .pn-call-list-button,
    .pn-call-card-content-button,
    .pn-call-card-archivio-content-button,
    .pn-eventi-past-button,
    .pn-eventi-archive-search-button,
    .pn-partner-archive-search-button,
    .pn-eventi-archive-filter,
    .pn-partner-archive-filter,
    .pn-footer-social-link,
    .pn-footer-newsletter-mc4wp input[type="submit"],
    .pn-footer-newsletter-mc4wp button[type="submit"],
    .lcn-bando-button
  ):where(:hover, :focus-visible, :active) {
    transform: none;
  }
}

/* Accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  background: #fff;
  padding: 0.5rem 1rem;
}
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}

/* Container */
.pn-container {
  max-width: var(--pn-max-width);
  margin: 0 auto;
  padding: 0 110px;
}

@media (max-width: 1023px) {
  .pn-container {
    padding: 0 40px;
  }
}
@media (max-width: 767px) {
  .pn-container {
    padding: 0 20px;
  }
}

/* ==========================================================================
   HEADER - pillola bianca galleggiante (Figma 205:13489)
   HTML custom (non <mds-header> Magma) perche' Magma non espone API
   per layout pillola max-width 1280. Magma usato per <mds-button> menu e Accedi.
   ========================================================================== */
.pn-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 24px;
  background: transparent;
}

.pn-header-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pn-header-inner > .pn-header-pill {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.pn-header-pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  background: var(--pn-white);
  border-radius: 1024px;
  padding: 16px 24px 16px 36px;
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 1.5px rgba(0, 0, 0, 0.15);
  max-width: 1280px;
  margin: 0 auto;
}

.pn-header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 48px;
  text-decoration: none;
  line-height: 0;
  overflow: hidden;
}
.pn-header-logo img,
.pn-header-logo .custom-logo-link img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 174px;
  object-fit: contain;
}
.pn-header-logo .custom-logo-link {
  line-height: 0;
}

.pn-header-nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  /* Spinge la CTA (avatar/Accedi) sempre contro il bordo destro interno della
     pillola: senza questo, con justify-content:flex-start gli elementi restano
     impacchettati a sinistra e il margin-left:auto della CTA non ha spazio
     elastico affidabile da consumare. */
  margin-right: auto;
}

.pn-header-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.pn-header-menu li {
  margin: 0;
}
.pn-header-menu > li {
  display: flex;
  align-items: center;
}
.pn-header-menu-button {
  --mds-button-background: transparent !important;
  --mds-button-border-color: transparent !important;
  --mds-button-color: var(--pn-brand-blu);
  --mds-button-gap: 8px;
  --mds-button-radius: 1000px;
  color: var(--pn-brand-blu);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  white-space: nowrap;
}
/* size="lg" di mds-button applica padding 1.5rem (24px) sx/dx direttamente
   sull':host: il cliente li vuole a 16px. mds-button non espone custom property
   per il padding, quindi override sull'host. !important + attributo [size]
   per battere la specificita' di :host([size="lg"]) nello shadow DOM. */
.pn-header-menu-button[size="lg"] {
  padding-inline: 14px !important;
}
.pn-header-menu-button::part(label) {
  font-family: "Roboto", var(--pn-font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}
.pn-header-menu-button:hover,
.pn-header-menu-button[aria-expanded="true"] {
  --mds-button-background: transparent !important;
  --mds-button-border-color: transparent !important;
}
.pn-header-menu-button:focus-visible {
  --mds-button-border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(0, 91, 132, 0.18);
}
/* Voce attiva (Figma 205:13630): pillola verde-lime --secondary-light (#ecf68c)
   con testo blu --variant-primary/seed. */
.pn-header-menu-button.is-active,
.pn-header-menu-button[aria-current="page"] {
  --mds-button-background: var(--secondary-light, #ecf68c) !important;
  --mds-button-border-color: var(--secondary-light, #ecf68c) !important;
  --mds-button-color: var(--pn-brand-blu);
  color: var(--pn-brand-blu);
}
.pn-header-menu-button.is-active:hover,
.pn-header-menu-button[aria-current="page"]:hover {
  box-shadow: none;
}
.pn-header-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 10px 34px;
  border: 2px solid transparent;
  border-radius: 1000px;
  box-sizing: border-box;
  font-family: "Roboto", var(--pn-font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: #005b84;
  text-decoration: none;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}
.pn-header-menu a:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
/* Voce attiva (Figma 205:13630): pillola verde-lime --secondary-light (#ecf68c)
   con testo blu. Vale per is-active, aria-current e le classi WP correnti. */
.pn-header-menu a.is-active,
.pn-header-menu a[aria-current="page"],
.pn-header-menu .current-menu-item > a,
.pn-header-menu .current_page_item > a {
  background: var(--secondary-light, #ecf68c);
  border-color: var(--secondary-light, #ecf68c);
  color: var(--pn-brand-blu);
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   SOTTOMENU SERVIZI (Figma 205:13354)
   Voce "Servizi" del menu principale: <mds-button> caller che apre un <mds-dropdown>
   Magma popolato dai post CPT pn_servizio. Su mobile il dropdown e' nascosto,
   al suo posto si mostra la lista flat .pn-header-servizi-mobile.
   ========================================================================== */
.pn-header-menu-servizi {
  position: relative;
}

.pn-header-menu-servizi-trigger {
  margin: 0;
}
.pn-header-menu-servizi-trigger::part(label) {
  display: inline-flex;
  align-items: center;
}
.pn-header-menu-servizi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
  color: var(--pn-brand-rosa);
  vertical-align: middle;
  pointer-events: none;
}

/* mds-dropdown contenitore: Magma-first.
 * Nodo Figma 555:15195: balloon 240px, padding 24px, radius 24px, shadow lg-sharp.
 * Le custom property `--mds-dropdown-*` sono API pubbliche del componente
 * (vedi @prop in node_modules/.../mds-dropdown.css). */
.pn-header-servizi-dropdown {
  --mds-dropdown-background: #ffffff;
  --mds-dropdown-drop-shadow: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1))
    drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
  display: none;
  padding: 24px;
  min-width: 240px;
  border-radius: 24px;
}
.pn-header-servizi-dropdown[visible]:not([visible="false"]) {
  display: grid;
}
.pn-header-servizi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.pn-header-menu .pn-header-servizi-item {
  display: flex;
  align-items: center;
  gap: 8px; /* Figma 555:15195 */
  height: 36px;
  padding: 6px 0;
  border-radius: 8px;
  text-decoration: none;
  color: #545454; /* Tone/Neutral/04 */
  font-family: "Roboto", var(--pn-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.pn-header-menu .pn-header-servizi-item:hover,
.pn-header-menu .pn-header-servizi-item:focus-visible {
  background: rgba(173, 70, 147, 0.08);
  color: #404040; /* Tone/Neutral/03 */
}
/* Sotto-voce attiva nel dropdown (es. "Affari Legali" mentre si è su quel
   servizio): stesso accento brand della voce di menu principale attiva. */
.pn-header-menu .pn-header-servizi-item.is-active {
  background: rgb(var(--variant-secondary) / 0.35);
  color: #212121; /* Tone/Neutral/01 */
  font-weight: 700;
}
.pn-header-servizi-item-icon {
  font-size: 24px; /* Figma: icona 24x24 */
  line-height: 1;
  color: var(--pn-brand-rosa);
  flex-shrink: 0;
}
.pn-header-servizi-item--verde .pn-header-servizi-item-icon {
  color: var(--pn-secondary-06);
}
.pn-header-servizi-item--azzurro .pn-header-servizi-item-icon {
  color: var(--pn-brand-azzurro);
}
.pn-header-servizi-item--blu .pn-header-servizi-item-icon {
  color: var(--pn-brand-blu);
}
.pn-header-servizi-item--rosa .pn-header-servizi-item-icon {
  color: var(--pn-brand-rosa);
}
.pn-header-servizi-item-label {
  flex: 1;
}

/* Lista mobile (visibile solo nel drawer hamburger ≤720px) */
.pn-header-servizi-mobile {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pn-header-cta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

/* Bottone Accedi rosa Magma (variant tertiary strong) - Figma 205:13360 */
.pn-header-accedi {
  --mds-button-background: var(--variant-tertiary-seed);
  --mds-button-border-color: var(--variant-tertiary-seed);
  --mds-button-color: var(--pn-white);
  --mds-button-radius: 1000px;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.pn-header-accedi:hover {
  --mds-button-background: rgb(var(--variant-tertiary-04, 155 63 132));
  --mds-button-border-color: rgb(var(--variant-tertiary-04, 155 63 132));
  box-shadow: 0 4px 14px rgba(173, 70, 147, 0.22);
  transform: translateY(-1px);
}
.pn-header-accedi:focus-visible {
  box-shadow: 0 0 0 3px rgba(173, 70, 147, 0.22);
}

/* Wrapper trigger: trasparente, gestisce solo click/focus per il dropdown.
   La resa visiva (cerchio blu + iniziali) la fa <mds-avatar> dentro. */
.pn-header-user {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 1000px;
  background: transparent;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* mds-avatar: dimensioni Figma 545:11384 (52px, iniziali 20px).
   Sfondo --variant-primary/seed (#005b84), iniziali --variant-primary/10 (#e7f8ff). */
.pn-header-user-avatar {
  --mds-avatar-radius: 1000px;
  width: 52px;
  height: 52px;
}
/* mds-avatar assegna un colore automatico dalle iniziali (hash char code):
   ignora `variant`. Per il brand Perfetto vogliamo SEMPRE blu seed con testo
   azzurrino, quindi forziamo lo sfondo via ::part(wrapper) (vince sulla classe
   bg-status-* interna) e il colore testo via custom property. */
.pn-header-user-avatar::part(wrapper) {
  background-color: var(--variant-primary-seed) !important;
}
.pn-header-user-avatar {
  --mds-avatar-color: rgb(var(--variant-primary-10, 231 248 255));
}

.pn-header-user:hover,
.pn-header-user:focus-visible {
  box-shadow: 0 4px 14px rgba(0, 91, 132, 0.22);
  transform: translateY(-1px);
}

.pn-header-user:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 91, 132, 0.22),
    0 4px 14px rgba(0, 91, 132, 0.22);
}

.pn-header-user-dropdown {
  --mds-dropdown-background: #ffffff;
  --mds-dropdown-drop-shadow: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1))
    drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
  display: none;
  min-width: 176px;
  padding: 12px;
  border-radius: 20px;
}

.pn-header-user-dropdown[visible]:not([visible="false"]) {
  display: grid;
}

.pn-header-user-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pn-header-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #545454;
  font-family: "Roboto", var(--pn-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.pn-header-user-menu-item:hover,
.pn-header-user-menu-item:focus-visible {
  background: rgba(0, 91, 132, 0.08);
  color: var(--pn-brand-blu);
  outline: none;
}

.pn-header-user-menu-item--logout:hover,
.pn-header-user-menu-item--logout:focus-visible {
  background: rgba(173, 70, 147, 0.08);
  color: var(--pn-brand-rosa);
}

.pn-header-user-menu-item .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
}

/* Menu "Area riservata" (TTO/Advisor) - Figma 838:23382 + dropdown 1133:24464.
   È un clone di "Cosa offriamo": stesso markup e classi pn-header-servizi-*
   (vedi header.php), quindi eredita tutto il CSS del dropdown Servizi.
   Nessuna regola dedicata necessaria. */

/* Switcher lingua - pillola separata accanto pillola menu (Figma 205:13361).
 *
 * Magma-first: usa SOLO le custom property pubbliche `--mds-tab-*` esposte
 * da <mds-tab> (vedi @prop in node_modules/.../mds-tab/mds-tab.css). I default
 * Magma sono gia' molto vicini al Figma; qui si overridano solo i 4 valori
 * che differiscono: colori (Figma usa Tone/Neutral/03 e Tone/Neutral/04
 * grezzi al posto delle token RGB), radius pillola al posto del rounded-md
 * Magma di default, shadow allineata al playground Figma del componente.
 */
.pn-lang-switcher-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: max-content;
  margin-left: 8px;
  background: var(--pn-white);
  border-radius: 1024px;
  padding: 16px 24px;
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 1.5px rgba(0, 0, 0, 0.15);
}

.pn-lang-switcher-tab {
  /* Tabbar esterna (grigia): Figma pillola intera invece del rounded-md default. */
  --mds-tab-tabs-radius: 99px;
  --mds-tab-tabs-background: #f3f3f3; /* Tone/Neutral/09 */
  /* Item: pillola, non rounded-md. */
  --mds-tab-item-radius: 99px;
  /* Stato a riposo: il default Magma punta a --tone-neutral-03 ma i token
     MDS non sono caricati nel tema, quindi setto il colore esplicitamente. */
  --mds-tab-item-default-color: #545454; /* Tone/Neutral/04 */
  --mds-tab-item-hover-background: rgba(0, 91, 132, 0.08);
  --mds-tab-item-hover-color: #404040; /* Tone/Neutral/03 */
  --mds-tab-item-hover-shadow: 0 2px 8px rgba(0, 91, 132, 0.08);
  /* Stato selezionato: pillola bianca con shadow leggera (Figma). */
  --mds-tab-item-selected-background: #ffffff;
  --mds-tab-item-selected-color: #404040; /* Tone/Neutral/03 */
  --mds-tab-item-selected-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}

/* mds-button dentro mds-tab-item dello switcher lingua (markup Figma).
   Non possiamo usare ::part(button) sul tab-item perche' adesso il button
   e' un mds-button reale figlio nel light DOM (non shadow part). Le regole
   sono direttamente sull'host del button. */
.pn-lang-switcher .pn-lang-item-button {
  --mds-button-background: transparent;
  --mds-button-color: inherit;
  --mds-button-border-color: transparent;
  /* Pillola come la lingua selezionata (--mds-tab-item-radius: 99px), cosi'
     l'hover non risulta squadrato. */
  --mds-button-radius: 99px;
  /* Figma 205:13362: ogni item h36, px14 py6. Forzo i valori per evitare che
     il padding di default di mds-button (size=sm) gonfi la larghezza. */
  --mds-button-height: 36px;
  --mds-button-padding-x: 14px;
  --mds-button-padding-y: 6px;
  --mds-button-font-size: 14px;
  --mds-button-line-height: 20px;
  border-radius: 99px;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.pn-lang-switcher .pn-lang-item.is-active .pn-lang-item-button,
.pn-lang-switcher .pn-lang-item[selected] .pn-lang-item-button {
  --mds-button-background: var(--pn-white);
  --mds-button-color: var(--pn-brand-blu);
  --mds-button-border-color: transparent;
  border-radius: 99px;
  font-weight: 700;
}

.pn-lang-switcher .pn-lang-item:not([selected]) .pn-lang-item-button:hover {
  --mds-button-background: rgba(0, 91, 132, 0.08);
  --mds-button-color: #005b84;
  border-radius: 99px;
  box-shadow: 0 2px 8px rgba(0, 91, 132, 0.08);
}

@media (min-width: 1321px) and (max-width: 1560px) {
  .pn-header {
    padding: 12px 16px;
  }
  .pn-header-inner {
    gap: 8px;
    max-width: none;
  }
  .pn-header-pill {
    gap: 16px;
    max-width: none;
    padding: 12px 18px 12px 26px;
  }
  .pn-header-logo img,
  .pn-header-logo .custom-logo-link img {
    height: 30px;
    max-width: 150px;
  }
  .pn-header-menu-button::part(label) {
    font-size: 20px;
    line-height: 28px;
  }
  .pn-header-menu li {
    margin-inline: 3px;
  }
  .pn-header-menu-servizi-icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
  .pn-header-cta {
    margin-left: auto;
  }
  .pn-header-accedi {
    --mds-button-radius: 1000px;
  }
  .pn-header-user,
  .pn-header-user-avatar {
    width: 44px;
    height: 44px;
  }
  .pn-lang-switcher-wrap {
    margin-left: 4px;
    padding: 8px 10px;
  }
}

@media (min-width: 1024px) and (max-width: 1320px) {
  .pn-header {
    padding: 10px 12px;
  }
  .pn-header-inner {
    gap: 0;
    max-width: none;
  }
  .pn-header-pill {
    gap: 14px;
    max-width: none;
    padding: 10px 18px 10px 24px;
  }
  .pn-header-logo {
    height: 42px;
  }
  .pn-header-logo img,
  .pn-header-logo .custom-logo-link img {
    height: 28px;
    max-width: 142px;
  }
  .pn-header-menu-button::part(label) {
    font-size: 18px;
    line-height: 24px;
  }
  .pn-header-menu-button {
    --mds-button-height: 44px;
    --mds-button-padding-x: 14px;
    --mds-button-padding-y: 8px;
  }
  .pn-header-menu li {
    margin-inline: 4px;
  }
  .pn-header-menu-servizi-trigger {
    display: inline-flex;
    align-items: center;
    align-self: center;
  }
  .pn-header-menu-servizi-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
  .pn-header-cta {
    margin-left: auto;
  }
  .pn-header-accedi {
    --mds-button-height: 46px;
    --mds-button-padding-x: 30px;
    --mds-button-padding-y: 9px;
    --mds-button-font-size: 20px;
    --mds-button-line-height: 28px;
    --mds-button-font-weight: 700;
    --mds-button-radius: 1000px;
  }
  .pn-header-user,
  .pn-header-user-avatar {
    width: 42px;
    height: 42px;
  }
  .pn-lang-switcher-wrap {
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1140px) {
  .pn-header {
    padding: 8px 8px;
  }
  .pn-header-pill {
    gap: 10px;
    padding: 8px 12px 8px 18px;
  }
  .pn-header-logo img,
  .pn-header-logo .custom-logo-link img {
    height: 26px;
    max-width: 132px;
  }
  .pn-header-menu-button {
    --mds-button-height: 42px;
    --mds-button-padding-x: 12px;
    --mds-button-padding-y: 8px;
  }
  .pn-header-menu-button::part(label) {
    font-size: 17px;
    line-height: 22px;
  }
  .pn-header-menu li {
    margin-inline: 3px;
  }
  .pn-header-accedi {
    --mds-button-height: 44px;
    --mds-button-padding-x: 26px;
    --mds-button-padding-y: 8px;
    --mds-button-font-size: 20px;
    --mds-button-line-height: 28px;
  }
}

@media (max-width: 1023px) {
  .pn-header {
    padding: 12px 20px;
  }
  .pn-header-pill {
    gap: 12px;
    max-width: none;
    padding: 12px 20px 12px 28px;
  }
  .pn-header-logo img,
  .pn-header-logo .custom-logo-link img {
    height: 28px;
  }
  .menu-toggle {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }
  .pn-header-nav,
  .pn-header-cta {
    display: none;
  }
  .pn-header-cta--user {
    display: flex;
    order: 3;
    margin-left: 0;
  }
  .pn-header-cta--user .pn-header-user,
  .pn-header-cta--user .pn-header-user-avatar {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
  .pn-lang-switcher-wrap {
    display: none;
  }
  body.pn-menu-lock {
    overflow: hidden;
  }
  .pn-header.is-menu-open .pn-header-inner {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(env(safe-area-inset-top) + 24px) 20px
      calc(24px + env(safe-area-inset-bottom));
    background: var(--pn-white, #fff);
  }
  .pn-header.is-menu-open .pn-header-pill {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 4px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 12px;
  }
  .pn-header.is-menu-open .pn-header-logo {
    order: 0;
    align-self: center;
    width: auto;
    margin: 0 auto 0 0;
    padding: 0;
    border-bottom: 0;
  }
  .pn-header.is-menu-open .pn-header-logo img {
    height: 30px;
    width: auto;
  }
  .pn-header.is-menu-open .menu-toggle {
    order: 2;
    position: relative;
    z-index: 1;
    margin-left: 0;
  }
  .pn-header.is-menu-open .pn-header-nav,
  .pn-header.is-menu-open .pn-header-cta {
    display: flex;
    position: static;
    width: 100%;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .pn-header.is-menu-open .pn-header-nav {
    order: 3;
    flex-basis: 100%;
    margin-top: 20px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 91, 132, 0.12);
  }
  .pn-header.is-menu-open .pn-header-cta {
    order: 4;
    justify-content: center;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 91, 132, 0.12);
  }
  .pn-header.is-menu-open .pn-header-accedi {
    width: 100%;
    max-width: none;
  }
  .pn-header.is-menu-open .pn-lang-switcher-wrap {
    order: 5;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: auto 0 0;
    padding: 28px 0 0;
    border-top: 1px solid rgba(0, 91, 132, 0.12);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .pn-header.is-menu-open .pn-header-cta--user {
    order: 1;
    width: auto;
    position: static;
    align-self: center;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border-top: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .pn-header.is-menu-open .pn-header-cta--user .pn-header-user,
  .pn-header.is-menu-open .pn-header-cta--user .pn-header-user-avatar,
  .pn-header.is-menu-open .menu-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .pn-header.is-menu-open .pn-header-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  .pn-header.is-menu-open .pn-header-menu > li {
    border-bottom: 0;
  }
  .pn-header.is-menu-open .pn-header-menu a,
  .pn-header.is-menu-open .pn-header-menu-button {
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
  }
  .pn-header.is-menu-open .pn-header-menu a,
  .pn-header.is-menu-open .pn-header-menu-button,
  .pn-header.is-menu-open .pn-header-menu-servizi-trigger {
    min-height: 48px;
    padding: 12px 8px;
    font-size: 18px;
  }
  .pn-header.is-menu-open .pn-header-menu-button::part(label) {
    font-size: 18px;
    line-height: 24px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .pn-header-servizi-dropdown {
    display: none !important;
  }
  .pn-header-menu-servizi-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 8px;
    min-height: 48px;
  }
  .pn-header.is-menu-open .pn-header-menu-servizi {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .pn-header-menu-servizi-icon {
    display: none;
  }
  .pn-header-servizi-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 2px 0 8px;
    padding: 8px 0 8px 28px;
  }
  .pn-header-servizi-item--mobile {
    min-height: 44px;
    height: auto;
    padding: 10px 12px;
    font-size: 16px;
  }
  .pn-header-servizi-item--mobile.is-active {
    background: rgb(var(--variant-primary-10, 231 248 255));
    color: var(--pn-brand-blu);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--pn-brand-blu);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pn-header-menu-button,
  .pn-header-menu a,
  .pn-header-accedi,
  .pn-header-user,
  .pn-lang-switcher .pn-lang-item-button,
  .pn-footer-newsletter-mc4wp input[type="submit"],
  .pn-footer-newsletter-mc4wp button[type="submit"] {
    transition-duration: 0s;
  }

  .pn-header-menu-button:hover,
  .pn-header-menu a:hover,
  .pn-header-accedi:hover,
  .pn-header-user:hover,
  .pn-footer-newsletter-mc4wp input[type="submit"]:hover,
  .pn-footer-newsletter-mc4wp button[type="submit"]:hover {
    transform: none;
  }
}

.pn-lang-switcher .pn-lang-item {
  /* Wrapper esterno: tipografica del testo (le label IT/EN sono uppercase
     anche se in i18n-helpers torna 'it'/'en' minuscoli). */
  text-transform: uppercase;
}

/* Slot mobile menu di mds-header - dentro modal lato destro */
.pn-header-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
.pn-header-mobile-menu .pn-header-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pn-header-mobile-menu .pn-header-menu a,
.pn-header-mobile-menu .pn-header-menu-button {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 16px;
  font-family: "Roboto", var(--pn-font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #005b84;
  text-decoration: none;
}
.pn-header-mobile-accedi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 1000px;
  background: #ad4693;
  color: #ffffff;
  font-family: "Roboto", var(--pn-font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  text-decoration: none;
}

.menu-toggle {
  position: relative;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0, 75, 121, 0.12);
  background: var(--pn-white);
  cursor: pointer;
  line-height: 0;
}
.menu-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--pn-primary-02);
  transition:
    transform 0.25s,
    opacity 0.25s;
}
.pn-header.is-menu-open .menu-toggle {
  gap: 0;
}
.pn-header.is-menu-open .menu-toggle-bar {
  opacity: 0;
}
.pn-header.is-menu-open .menu-toggle::before,
.pn-header.is-menu-open .menu-toggle::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--pn-primary-02, #004565);
  transform-origin: center;
  z-index: 1;
}
.pn-header.is-menu-open .menu-toggle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.pn-header.is-menu-open .menu-toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 1023px) {
  .menu-toggle {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }
}

body.admin-bar .pn-header.is-menu-open .pn-header-inner {
  top: 46px;
  height: calc(100% - 46px);
  max-height: calc(100dvh - 46px);
}

@media (min-width: 783px) {
  body.admin-bar .pn-header.is-menu-open .pn-header-inner {
    top: 32px;
    height: calc(100% - 32px);
    max-height: calc(100dvh - 32px);
  }
}

/* ==========================================================================
   HERO - Figma 191:5111 (Group 5: 1499x1177)
   Padding contenitore Figma: top 304, left 80 (Frame 38: padding-top 300+4)
   ========================================================================== */
.pn-hero {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 190px auto 0;
  height: 387px;
  padding-bottom: 700px;
}

/* Contenuto principale: titolo + cta. Figma: titolo Group 2 (1282x288/291)
   + gap 48 + cta md (48). Altezza totale 387px = altezza hero. Content
   ancorato al top del frame (la hero gia' parte 300px dal viewport via
   margin-top esterno). */
.pn-hero-content {
  position: absolute;
  top: 0;
  left: 80px;
  width: 1282px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  z-index: 2;
}

/* Wrapper titolo - Figma Group 2: 1282x288 (3 righe x 72 + ~72 paddingbottom) */
.pn-hero-titolo-wrap {
  position: relative;
  width: 1282px;
  height: 291px;
}

/* Titolo Figma 191:5117 - Montserrat ExtraBold 60/72 */
.pn-hero-titolo {
  position: absolute;
  top: 0;
  left: 0;
  width: 1282px;
  margin: 0;
  z-index: 2;
  font-family: "Montserrat", var(--pn-font-heading);
  font-weight: 800;
  font-size: 60px;
  line-height: 82px;
  color: #005b84;
  letter-spacing: 0;
  text-transform: none;
  white-space: pre-wrap;
  z-index: 2;
}

/* ==========================================================================
   Highlights inline titolo hero - ACF repeater hero_highlights
   Decori applicati come <span class="hl hl-<tipo>"> dentro al testo.
   No piu' coordinate fisse: il decoro segue la parola anche se cambia testo/lingua.
   ========================================================================== */

/* Pillola piena verde lime - Figma 191:5114 (#d0db71) */
.pn-hero-titolo .hl-pillola {
  background: #d0db71;
  padding: 0 0.2em;
  border-radius: 99px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Ovale bordo blu - Figma 191:5115 (border 4px #005b84) */
.pn-hero-titolo .hl-ovale_outline {
  display: inline-block;
  border: 4px solid #005b84;
  padding: 0 0.4em;
  border-radius: 99px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Pallino viola standalone - Figma 191:5116 (#ad4693, 72x72) */
.pn-hero-titolo .hl-pallino {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  background: #ad4693;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 0.25em;
}

/* CTA mds-button - Figma 191:5118 (left 80, top 639, w 338, h 52) */
/* Bottone hero "Scopri di più sul Network" - Figma 191:5118.
   bg #005278, border 2px stesso, Roboto Bold 24/32, height 52, padding 10x34, radius 1000. */
/* CTA bottoni home: tutti usano --variant-primary-03 (blu scuro #005278).
   Figma 656:17438 / 656:17457. Stile condiviso, override per classe. */
/* CTA bottoni home: stile condiviso da Figma 656:17438/17457.
   Tutti size="lg", colore --variant-primary-03, font 24px Bold. */
.pn-hero-cta-button,
.pn-news-cta,
.pn-eventi-cta,
.pn-call-cta-button,
.pn-call-cta-empty-button {
  --mds-button-background: rgb(var(--variant-primary-03, 0 82 120));
  --mds-button-background-hover: rgb(var(--variant-primary-02, 0 69 101));
  --mds-button-border-color: rgb(var(--variant-primary-03, 0 82 120));
  --mds-button-color: #ffffff;
  --mds-button-font-size: 24px;
  --mds-button-line-height: 32px;
  --mds-button-font-weight: 700;
  --mds-button-height: 52px;
  --mds-button-padding-x: 34px;
  --mds-button-radius: 1000px;
}

.pn-hero-cta-button {
  align-self: flex-start;
  margin-right: auto;
  width: fit-content;
  max-width: max-content;
}

/* Decori background globali (Figma Group 5 esterni) - fixed top-right + bottom-left.
   Posizioni viewport-based: cluster top-right (pillola blu + cerchio verde),
   cluster bottom-left (cerchio verde + pillola rosa + pillola verde).
   Z-index: -1 (sotto tutto), pointer-events none.
   Will-change transform per parallax JS futuro. */
/* Wrapper decori - full-width per ancorare i decori ai bordi del viewport.
   I decori usano left/right relativi al viewport (non al frame 1440 Figma),
   cosi' restano appoggiati ai bordi del browser a qualsiasi risoluzione.
   Altezza leggermente oltre il frame Group 5 Figma: il cerchio basso finisce a
   1177px esatti, quindi serve margine per non tagliare bordo/antialias. */
.pn-bg-decor {
  --pn-bg-decor-min-opacity: 0.18;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1260px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.pn-bg-decor > span {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  transition:
    opacity 280ms ease,
    filter 280ms ease;
}

/* Cluster TOP-RIGHT - sotto il menu, a destra.
   Ancorate alla pillola IT/EN del lang switcher: si comportano come l'HEADER.
   .pn-header-inner ha max-width 1440px + margin:0 auto → su viewport >1440px
   resta centrato. Le decor devono seguire lo stesso ancoraggio: NON appoggiate
   al bordo destro del viewport, ma al bordo destro del contenitore centrato.
   max() = il maggiore tra "186px dal viewport" (≤1440px) e
   "186px + margin auto" (>1440px). Stesso pattern per il cerchio verde. */
/* Figma 191:5119: 210x304, bg #005b84, radius bottom only */
.pn-bg-decor-blue-top {
  top: 0;
  right: max(186px, calc((100vw - 1440px) / 2 + 141px));
  width: 210px;
  height: 304px;
  background: #005b84;
  border-bottom-left-radius: 1000px;
  border-bottom-right-radius: 1000px;
  /* Fade verso l'alto come la pillola del page-title (trasparente in cima →
   * piena in basso), stesso 45%. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
}
/* Figma 191:5122: 200x200, border 8px #d0db71, full circle.
   Stesso ancoraggio della pillola blu. In Figma il cerchio sporge a destra
   rispetto alla pillola blu di (1160+200)-(1049+210)=101px → offset 186-101=85. */
.pn-bg-decor-circle-green-top {
  top: 185px;
  right: max(85px, calc((100vw - 1440px) / 2 + 85px));
  width: 200px;
  height: 200px;
  border: 8px solid #d0db71;
  border-radius: 1000px;
  background: transparent;
}

/* Pillola blu top: animazione progressiva su scroll, NON si stacca dal top.
   Resta ancorata, accorcia leggermente in altezza e mantiene una presenza
   attenuata a scroll completo.
   Variabile --scroll-progress (0=top, 1=oltre 500px) aggiornata da main.js. */
.pn-bg-decor-blue-top {
  transform-origin: top center;
  /* leggera contrazione + fade */
  transform: scaleY(calc(1 - var(--scroll-progress, 0) * 0.4));
  opacity: max(
    var(--pn-bg-decor-min-opacity),
    calc(1 - var(--scroll-progress, 0))
  );
  transition:
    transform 0.15s ease-out,
    opacity 0.15s ease-out;
}

body.pn-has-scrolled .pn-bg-decor-circle-green-top {
  opacity: 0.45;
  filter: saturate(0.82) brightness(1.16);
}

/* Figma 191:5120: rettangolo 381x200 ruotato -90deg → diventa pillola orizzontale
   200(h)x381(w) con lato SINISTRO semicircolare e lato destro piatto/tagliato.
   Ancorata al bordo DESTRO del viewport: il lato destro piatto si estende
   sempre fino al bordo del browser indipendentemente dalla larghezza. */
.pn-bg-decor-pill-green {
  top: 610px;
  right: 0;
  width: 381px;
  height: 200px;
  background: #d0db71;
  border-top-left-radius: 1000px;
  border-bottom-left-radius: 1000px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* Figma 191:5121: y=745, 586x200, bg #ad4693, full pill (radius 1000 ovunque).
   In Figma a 1440px sporge da x=1216 a x=1802: 224px visibili (38%) +
   362px fuori (62%). Ancorata al bordo DESTRO del viewport con right=-362px
   per replicare la proporzione a qualsiasi larghezza del browser. */
.pn-bg-decor-pill-pink {
  top: 745px;
  right: 224px;
  width: 586px;
  height: 200px;
  background: #ad4693;
  border-radius: 1000px;
}
/* Figma 191:5123: y=794, 383x383, border 8px #d0db71, full circle.
   Ancorato al bordo SINISTRO del viewport con x=-59px: il lato destro del
   cerchio resta visibile, il lato sinistro sporge fuori di 59px.
   Comportamento responsive: a qualsiasi larghezza il cerchio sporge sempre
   di 59px oltre il bordo sinistro del browser. */
.pn-bg-decor-circle-green-bottom {
  top: 794px;
  left: -59px;
  width: 383px;
  height: 383px;
  border: 8px solid #d0db71;
  border-radius: 1000px;
  background: transparent;
}

/* Effetto su scroll per le 3 decor centrali/basse: solo fade di opacity via
   --scroll-progress. Nessun resize, nessun translate. transform:!important
   neutralizza il translate3d residuo applicato da main.js prima del cambio. */
.pn-bg-decor-pill-green,
.pn-bg-decor-pill-pink,
.pn-bg-decor-circle-green-bottom {
  transform: none !important;
  opacity: max(
    var(--pn-bg-decor-min-opacity),
    calc(1 - var(--scroll-progress, 0))
  );
  transition: opacity 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .pn-bg-decor-pill-green,
  .pn-bg-decor-pill-pink,
  .pn-bg-decor-circle-green-bottom {
    opacity: 1;
    transition: none;
  }
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */
.pn-stats-bar {
  background: var(--pn-primary-10);
  border-radius: 10000px;
  padding: 40px 0;
  max-width: var(--pn-max-width);
  margin: -40px auto 0;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}

.pn-stat-number {
  font-family: var(--pn-font-heading);
  font-weight: 900;
  font-size: 64px;
  line-height: 64px;
  color: var(--pn-primary-03);
  text-transform: uppercase;
}

.pn-stat-label {
  font-family: var(--pn-font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--pn-primary-06);
  text-transform: uppercase;
  margin-top: 8px;
}

/* ==========================================================================
   SECTION: Area Formazione (WP3)
   ========================================================================== */
.pn-section-formazione {
  position: relative;
  background: var(--pn-tertiary-10);
  border-radius: var(--pn-radius-xl);
  padding: 100px 0;
  margin: 80px 0;
  overflow: hidden;
}

.pn-section-formazione-inner {
  max-width: var(--pn-max-width);
  margin: 0 auto;
  padding: 0 110px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

.pn-formazione-content {
  max-width: 500px;
}

.pn-section-label {
  font-family: var(--pn-font-heading);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.pn-section-label--tertiary {
  color: var(--pn-tertiary-06);
}
.pn-section-label--primary {
  color: var(--pn-primary-02);
}
.pn-section-label--secondary {
  color: var(--pn-secondary-06);
}

.pn-section-title {
  font-family: var(--pn-font-heading);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.pn-section-title--tertiary {
  color: var(--pn-tertiary-01);
}
.pn-section-title--primary {
  color: var(--pn-primary-01);
}
.pn-section-title--secondary {
  color: var(--pn-secondary-02);
}

.pn-section-text {
  font-family: var(--pn-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  margin: 0 0 24px;
}
.pn-section-text--tertiary {
  color: var(--pn-tertiary-01);
}
.pn-section-text--primary {
  color: var(--pn-grey-27);
}
.pn-section-text--secondary {
  color: var(--pn-secondary-04);
}

.pn-section-text strong {
  font-weight: 700;
}

.pn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 35px;
  border-radius: var(--pn-radius-md);
  font-family: var(--pn-font-body);
  font-weight: 800;
  font-size: 16px;
  color: var(--pn-white);
  text-decoration: none;
  transition:
    background 0.25s,
    transform 0.25s;
}
.pn-btn--tertiary {
  background: var(--pn-tertiary-05);
}
.pn-btn--tertiary:hover {
  background: var(--pn-tertiary-04);
  transform: translateY(-1px);
}
.pn-btn--primary {
  background: var(--pn-primary-02);
}
.pn-btn--primary:hover {
  background: var(--pn-primary-01);
  transform: translateY(-1px);
}
.pn-btn--secondary {
  background: var(--pn-secondary-06);
}
.pn-btn--secondary:hover {
  background: var(--pn-secondary-04);
  transform: translateY(-1px);
}

/* Varianti colore sezione Formazione */
.pn-section-formazione--primary {
  background: var(--pn-primary-10);
}
.pn-section-formazione--secondary {
  background: var(--pn-secondary-10);
}

/* Agenda */
.pn-agenda {
  background: var(--pn-tertiary-05);
  border-radius: 96px;
  padding: 50px 60px;
  min-width: 400px;
  color: var(--pn-white);
}

.pn-agenda-title {
  font-family: var(--pn-font-heading);
  font-weight: 700;
  font-size: 18.7px;
  text-transform: uppercase;
  margin: 0 0 24px;
}

.pn-agenda-event {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.pn-agenda-event:last-child {
  border-bottom: none;
}

.pn-agenda-date {
  text-align: center;
  min-width: 40px;
}
.pn-agenda-date-day {
  font-family: var(--pn-font-body);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
}
.pn-agenda-date-month {
  font-family: var(--pn-font-body);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 4px;
}

.pn-agenda-event-title {
  font-family: var(--pn-font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 4px;
}
.pn-agenda-event-desc {
  font-family: var(--pn-font-body);
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Varianti colore Agenda */
.pn-agenda--primary {
  background: var(--pn-primary-02);
}
.pn-agenda--secondary {
  background: var(--pn-secondary-06);
}

/* ==========================================================================
   SECTION: TT Accelerator (WP1)
   ========================================================================== */
.pn-section-accelerator {
  position: relative;
  background: #ecf7fc;
  border-radius: var(--pn-radius-xl);
  padding: 100px 0;
  margin: 0 0 80px;
  overflow: hidden;
}

.pn-section-accelerator-inner {
  max-width: var(--pn-max-width);
  margin: 0 auto;
  padding: 0 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.pn-accelerator-image {
  flex-shrink: 0;
  width: 500px;
  height: 500px;
  border-radius: 250px;
  overflow: hidden;
}
.pn-accelerator-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-accelerator-content {
  max-width: 500px;
}

/* Varianti colore sezione Accelerator */
.pn-section-accelerator--tertiary {
  background: var(--pn-tertiary-10);
}
.pn-section-accelerator--secondary {
  background: var(--pn-secondary-10);
}

/* ==========================================================================
   SECTION: "In Evidenza" — RIMOSSA il 2026-05-18.
   CSS archiviato in docs/archive/section-evidenza/evidenza.css
   (il template PHP era gia' stato cancellato in precedenza).
   ========================================================================== */

/* ==========================================================================
   SECTION: News (WP6)
   ========================================================================== */
.pn-section-news {
  background: var(--pn-secondary-10);
  border-radius: var(--pn-radius-lg);
  padding: 80px 0;
  margin: 0 0 0;
}

.pn-section-news-inner {
  max-width: var(--pn-max-width);
  margin: 0 auto;
  padding: 0 110px;
}

.pn-news-header {
  margin-bottom: 30px;
}
.pn-news-header-title {
  font-family: var(--pn-font-heading);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--pn-biscay);
  margin: 0 0 4px;
}
.pn-news-header-link {
  font-family: var(--pn-font-body);
  font-weight: 800;
  font-size: 16px;
  color: #2f6b5a;
  text-decoration: none;
}
.pn-news-header-link:hover {
  text-decoration: underline;
}

.pn-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: start;
}

/* Featured news */
.pn-news-featured {
  display: block;
  background: var(--pn-white);
  border: 1px solid var(--pn-grey-93);
  border-radius: var(--pn-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  grid-row: 1 / 3;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.pn-news-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.pn-news-featured-img {
  height: 280px;
  overflow: hidden;
}
.pn-news-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-news-featured-body {
  padding: 30px 40px;
}

.pn-news-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--pn-radius-md);
  font-family: var(--pn-font-body);
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--pn-white);
  margin-bottom: 16px;
}
.pn-news-tag--green {
  background: var(--pn-secondary-06);
}
.pn-news-tag--blue {
  background: rgb(var(--variant-primary, 0 91 132));
  color: var(--variant-primary-10, #e7f8ff);
}
.pn-news-tag--pink {
  background: var(--pn-fuchsia);
}

.pn-news-featured-title {
  font-family: var(--pn-font-body);
  font-weight: 800;
  font-size: 26px;
  color: var(--pn-secondary-02);
  margin: 0 0 12px;
  line-height: 1.3;
}

.pn-news-featured-excerpt {
  font-family: var(--pn-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pn-secondary-04);
  margin: 0 0 16px;
}

.pn-news-readmore {
  font-family: var(--pn-font-body);
  font-weight: 800;
  font-size: 16px;
  color: var(--pn-secondary-02);
  border-bottom: 2px solid var(--pn-secondary-02);
  padding-bottom: 2px;
}

/* Stacked news item */
.pn-news-stacked {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--pn-white);
  border: 1px solid var(--pn-grey-93);
  border-radius: var(--pn-radius-sm);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.pn-news-stacked:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pn-news-stacked-img {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 20px;
  overflow: hidden;
}
.pn-news-stacked-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-news-stacked-body {
  flex: 1;
  min-width: 0;
}

.pn-news-stacked-title {
  font-family: var(--pn-font-heading);
  font-weight: 700;
  font-size: 18.7px;
  text-transform: uppercase;
  color: var(--pn-biscay);
  margin: 0 0 6px;
  line-height: 1.3;
}

.pn-news-stacked-excerpt {
  font-family: var(--pn-font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--pn-biscay);
  margin: 0;
  line-height: 1.4;
}

/* Varianti colore sezione News */
.pn-section-news--tertiary {
  background: var(--pn-tertiary-10);
}
.pn-section-news--primary {
  background: var(--pn-primary-10);
}

/* ==========================================================================
   FOOTER - Figma 191:5165
   Container: 1440x396, bg #F8F8F8, radius 48 top, padding 0 0 64px (no top)
   Content: max-width 1280, flex row space-between, gap 137
   Colonne menu: 121px ciascuna, items radius 8 padding 6x14
   Newsletter: 400x332, inner box #E7F8FF, outer #9FE1FF, radius 40
   ========================================================================== */
.pn-footer {
  background: var(--pn-surface-base);
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  padding: 0 0 64px;
  margin-top: 80px;
  overflow: visible;
}
.pn-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 0 0;
}
.pn-footer-content {
  /* Desktop Figma: brand | 2 colonne menu | newsletter. */
  display: grid;
  grid-template-columns: 221px repeat(2, max-content) 400px;
  justify-content: space-between;
  align-items: start;
  column-gap: 48px;
  row-gap: 32px;
  overflow: visible;
}
.pn-footer-content.p-600 {
  padding: 0 !important;
}

.pn-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pn-footer-logo {
  display: block;
  width: 221px;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}
.pn-footer-tagline {
  font-family: "Karla", var(--pn-font-body);
  font-size: 12px;
  line-height: 16px;
  color: #545454;
  width: 221px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Social icons sotto al logo + tagline */
.pn-footer-social {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pn-footer-social li {
  margin: 0;
}
.pn-footer-social-link {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}
.pn-footer-social-link:hover,
.pn-footer-social-link:focus-visible {
  transform: translateY(-1px);
  opacity: 0.85;
}
.pn-footer-social-link svg {
  width: 36px;
  height: 36px;
  display: block;
}

.pn-footer-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* min-width invece di width fissa: la colonna si adatta a titoli piu' larghi
     (es. "Cosa offriamo") senza spezzarli, restando >= 121px. */
  min-width: 121px;
}
.pn-footer-col-titolo {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #005278;
  margin: 0 0 0 14px;
  /* Titolo colonna su una sola riga (es. "Cosa offriamo" non deve spezzarsi). */
  white-space: nowrap;
}
.pn-footer-col-voci {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pn-footer-col-voci li {
  margin: 0;
}

/* Magma <mds-button size="md" tone="quiet" variant="dark"> come link Figma 656:16137.
   Niente override: lo styling viene dagli attributi nativi del componente. */
.pn-footer-col-link {
  display: inline-flex;
}

/* Fallback per <a> esistenti (transizione: lasciato attivo finché ACF non aggiorna) */
.pn-footer-col-voci a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: "Roboto", var(--pn-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #545454;
  text-decoration: none;
  transition: background 0.2s ease;
}
.pn-footer-col-voci a:hover {
  background: rgba(0, 91, 132, 0.06);
}

/* Newsletter card */
.pn-footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 400px;
  max-width: 400px;
  justify-self: end;
}
.pn-footer-newsletter-box {
  background: #9fe1ff;
  border: 4px solid #9fe1ff;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
}
.pn-footer-newsletter-header {
  background: #e7f8ff;
  border-radius: 40px 40px 0 0;
  padding: 24px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pn-footer-newsletter-titolo {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #005278;
  margin: 0;
  padding: 0 16px;
}
.pn-footer-newsletter-descr {
  font-family: "Karla", var(--pn-font-body);
  font-size: 16px;
  line-height: 24px;
  color: #005278;
  margin: 0;
  padding: 0 16px;
}
.pn-footer-newsletter-form {
  background: #e7f8ff;
  border-radius: 0 0 40px 40px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pn-footer-newsletter-mc4wp .mc4wp-form {
  margin: 0;
}
.pn-footer-newsletter-mc4wp .mc4wp-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pn-footer-newsletter-mc4wp p {
  margin: 0;
}
.pn-footer-newsletter-mc4wp label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "Karla", var(--pn-font-body);
  font-size: 14px;
  line-height: 20px;
  color: #005278;
}
.pn-footer-newsletter-mc4wp .mc4wp-form-fields > label {
  margin-top: 2px;
}
.pn-footer-newsletter-mc4wp input[type="email"],
.pn-footer-newsletter-mc4wp input[type="text"],
.pn-footer-newsletter-mc4wp select {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--pn-white);
  border: 0;
  border-radius: 100px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
  color: #282828;
  font-family: "Karla", var(--pn-font-body);
  font-size: 16px;
  line-height: 24px;
}
.pn-footer-newsletter-mc4wp input[type="email"]:focus,
.pn-footer-newsletter-mc4wp input[type="text"]:focus,
.pn-footer-newsletter-mc4wp select:focus {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(0, 91, 132, 0.18),
    0 0 0 4px rgba(0, 91, 132, 0.1);
}
.pn-footer-newsletter-mc4wp input[type="email"]::placeholder,
.pn-footer-newsletter-mc4wp input[type="text"]::placeholder {
  color: #a2a2a2;
}
.pn-footer-newsletter-mc4wp input[type="submit"],
.pn-footer-newsletter-mc4wp button[type="submit"] {
  min-height: 48px;
  padding: 10px 24px;
  background: #005278;
  border: 2px solid #005278;
  border-radius: 100px;
  color: #ffffff;
  cursor: pointer;
  font-family: "Roboto", var(--pn-font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.pn-footer-newsletter-mc4wp input[type="submit"]:hover,
.pn-footer-newsletter-mc4wp button[type="submit"]:hover {
  background: #004565;
  border-color: #004565;
  box-shadow: 0 4px 12px rgba(0, 82, 120, 0.2);
  transform: translateY(-1px);
}
.pn-footer-newsletter-mc4wp .privacy-text {
  margin-top: 2px;
}
.pn-footer-newsletter-mc4wp .privacy-text label {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  column-gap: 8px;
  font-family: "Karla", var(--pn-font-body);
  font-size: 14px;
  line-height: 20px;
  color: #005278;
}
.pn-footer-newsletter-mc4wp .privacy-text input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #005278;
  flex: 0 0 auto;
  justify-self: start;
}
.pn-footer-newsletter-mc4wp p:has(input[type="checkbox"]):not(.privacy-text) {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Karla", var(--pn-font-body);
  font-size: 14px;
  line-height: 20px;
  color: #005278;
}
.pn-footer-newsletter-mc4wp input[name="procaptcha"] {
  display: none;
}
.pn-footer-newsletter-mc4wp .mc4wp-alert {
  margin: 8px 0 0;
  font-family: "Karla", var(--pn-font-body);
  font-size: 14px;
  line-height: 20px;
  color: #005278;
}

/* ==========================================================================
   Newsletter footer — layout Figma 697:23594 (select frequenza + riga email
   composta con icona busta e bottone freccia + nota privacy).
   Il markup viene dal form MC4WP (classi pn-nl-*).
   ========================================================================== */
/* Select "frequenza" (solo grafico): pillola bianca con freccia. */
.pn-footer-newsletter-mc4wp .pn-nl-select {
  margin: 0;
}
.pn-footer-newsletter-mc4wp .pn-nl-select select {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--pn-white);
  border: 0;
  border-radius: 100px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.1);
  color: #282828;
  font-family: "Karla", var(--pn-font-body);
  font-size: 16px;
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23282828'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Riga email: contenitore blu radius 100, padding 8; dentro input bianco
   con icona busta + bottone tondo freccia. */
.pn-footer-newsletter-mc4wp .pn-nl-emailrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #005278;
  border-radius: 100px;
}
.pn-footer-newsletter-mc4wp .pn-nl-emailwrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 8px 0 12px;
  background: var(--pn-white);
  border-radius: 100px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
.pn-footer-newsletter-mc4wp .pn-nl-icon {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  color: #005278;
}
/* L'input email dentro la riga: trasparente, senza la pillola di default. */
.pn-footer-newsletter-mc4wp .pn-nl-emailwrap input[type="email"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.pn-footer-newsletter-mc4wp .pn-nl-emailwrap input[type="email"]:focus {
  outline: none;
  box-shadow: none;
}
/* Bottone tondo blu con freccia (Figma: radius 8, ma resa tonda coerente). */
.pn-footer-newsletter-mc4wp .pn-nl-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: #005278;
  border: 2px solid #005278;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.pn-footer-newsletter-mc4wp .pn-nl-send:hover {
  background: #004565;
  border-color: #004565;
  transform: translateY(-1px);
}
.pn-footer-newsletter-mc4wp .pn-nl-send .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
}

/* Nota privacy in fondo alla card. */
.pn-footer-newsletter-mc4wp .pn-nl-privacy {
  margin: 8px 0 0;
  padding: 0 16px;
  font-family: "Karla", var(--pn-font-body);
  font-size: 14px;
  line-height: 20px;
  color: #004565;
}

/* Honeypot anti-spam MC4WP ("Leave this field empty if you're human"): deve
   restare invisibile. Se il wrapper inline display:none viene strippato, lo
   nascondiamo noi via name dell'input + la sua label/contenitore. */
.pn-footer-newsletter-mc4wp input[name="_mc4wp_honeypot"],
.pn-footer-newsletter-mc4wp input[name*="honeypot"],
.pn-footer-newsletter-mc4wp label:has(> input[name*="honeypot"]),
.pn-footer-newsletter-mc4wp p:has(> input[name*="honeypot"]),
.pn-footer-newsletter-mc4wp
  .mc4wp-form-fields
  > div:has(input[name*="honeypot"]) {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.pn-footer-copyright {
  text-align: center;
  font-family: "Karla", var(--pn-font-body);
  font-size: 13px;
  color: #545454;
  margin: 48px 0 0;
}

@media (max-width: 1279px) {
  .pn-footer {
    padding: 48px 40px calc(72px + env(safe-area-inset-bottom));
  }
  .pn-footer-inner {
    padding: 0;
  }
  .pn-footer-content {
    display: grid;
    grid-template-columns: 221px repeat(2, minmax(120px, max-content)) minmax(
        320px,
        400px
      );
    gap: 32px;
    justify-content: space-between;
  }
  .pn-footer-brand {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
  }
  .pn-footer-col {
    grid-row: 1;
  }
  .pn-footer-newsletter {
    width: 100%;
    grid-column: 4;
    grid-row: 1;
    max-width: none;
    justify-self: stretch;
  }
  .pn-footer-newsletter-box {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .pn-footer {
    padding: 40px 20px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
  .pn-footer-inner {
    padding: 0;
  }
  .pn-footer-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 24px;
  }
  .pn-footer-brand {
    grid-column: 1 / -1;
    grid-row: auto;
    display: flex;
    align-items: center;
  }
  .pn-footer-brand .pn-footer-social {
    justify-content: center;
    margin-top: 16px;
  }
  .pn-footer-col {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .pn-footer-col-titolo {
    margin-left: 0;
  }
  .pn-footer-newsletter {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
  .pn-footer-newsletter-box {
    width: 100%;
  }
  .pn-footer-newsletter-header,
  .pn-footer-newsletter-form {
    align-items: center;
    text-align: center;
  }
  .pn-footer-newsletter-titolo,
  .pn-footer-newsletter-descr {
    padding-left: 0;
    padding-right: 0;
  }
  .pn-footer-newsletter-mc4wp .mc4wp-form,
  .pn-footer-newsletter-mc4wp .mc4wp-form-fields,
  .pn-footer-newsletter-mc4wp label,
  .pn-footer-newsletter-mc4wp p {
    width: 100%;
  }
  .pn-footer-newsletter-mc4wp label {
    text-align: left;
  }
  .pn-footer-newsletter-mc4wp .privacy-text label,
  .pn-footer-newsletter-mc4wp p:has(input[type="checkbox"]):not(.privacy-text) {
    text-align: left;
  }
}

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

/* Varianti direzionali */
.reveal-from-left {
  transform: translateX(-48px) translateY(0);
}
.reveal-from-right {
  transform: translateX(48px) translateY(0);
}
.reveal-scale {
  transform: scale(0.94) translateY(20px);
}
.reveal-from-left.is-visible,
.reveal-from-right.is-visible,
.reveal-scale.is-visible {
  transform: none;
}

/* Delay utility per stagger manuale */
.reveal-delay-1 {
  transition-delay: 0.08s;
}
.reveal-delay-2 {
  transition-delay: 0.18s;
}
.reveal-delay-3 {
  transition-delay: 0.28s;
}
.reveal-delay-4 {
  transition-delay: 0.38s;
}

/* Mobile: spostamento ridotto (standard portali informativi: fade-first,
   motion-light). Su schermo piccolo 36px causa micro-shift percepito → 18px. */
@media (max-width: 767px) {
  .reveal-on-scroll {
    transform: translateY(18px);
  }
  .reveal-from-left {
    transform: translateX(-20px);
  }
  .reveal-from-right {
    transform: translateX(20px);
  }
}

/* Accessibilità: reset garantito in CSS (non solo via JS in main.js). Se il JS
   è lento o fallisce, l'utente reduced-motion non vede comunque animazione. */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-from-left,
  .reveal-from-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Lenis */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* ==========================================================================
   PAGINE INTERNE - layout container (centratura come la home)
   Tutto il contenuto del <main> (article, commenti, navigation, post-footer,
   widget...) sta dentro un container max-width centrato. Il banner titolo
   esce dal container per arrivare full-width.
   ========================================================================== */
.site-main.page-generic,
.site-main.single-post,
.site-main.single-servizio,
.site-main.news-listing,
.site-main.archive-listing,
.site-main.search-results,
.site-main.error-404 {
  width: 100%;
  box-sizing: border-box;
}

/* Centra direttamente i figli del <main>, eccetto il banner titolo.
   max-width 1280, centrati con margin auto, niente padding fisso desktop:
   ai lati spazio automatico in base allo schermo. */
.site-main.page-generic > *:not(.pn-page-title),
.site-main.single-post > *:not(.pn-page-title),
.site-main.single-servizio > *:not(.pn-page-title),
.site-main.news-listing > *:not(.pn-page-title),
.site-main.archive-listing > *:not(.pn-page-title),
.site-main.search-results > *:not(.pn-page-title),
.site-main.error-404 > *:not(.pn-page-title) {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Article: stesso container ma con padding-bottom proprio */
.site-main.page-generic > .page-article,
.site-main.single-post > .news-article,
.site-main.single-servizio > .pn-servizio-article,
.site-main.news-listing--template > .news-page-article {
  padding-top: 0;
  padding-bottom: 48px;
}

/* Banner titolo: niente padding orizzontale (gestito internamente),
   eredita il max-width del container come tutto il resto */
.page-article > .pn-page-title,
.news-article > .pn-page-title,
.pn-servizio-article > .pn-page-title,
.news-page-article > .pn-page-title,
.single-evento .pn-evento-article > .pn-page-title,
.archive-eventi .pn-eventi-archive-article > .pn-page-title {
  padding-left: 0;
  padding-right: 0;
}

/* Spaziatura tra banner e contenuto dentro l'article */
.page-article > .pn-page-title + .page-content,
.news-article > .pn-page-title + .post-header,
.news-article > .pn-page-title + .post-content,
.news-page-article > .pn-page-title + .pn-news-page-hero,
.pn-servizio-article > .pn-page-title + .pn-servizio-abstract,
.pn-servizio-article > .pn-page-title + .pn-servizio-blocco {
  margin-top: 32px;
}

/* Tutto cio' che sta dentro article (commenti, tags, navigation, widgets) eredita */
.page-article .page-comments,
.page-article .page-content,
.news-article .post-comments,
.news-article .post-content,
.news-article .post-header,
.news-article .post-footer {
  width: 100%;
}

/* ==========================================================================
   PAGINA CONTATTI - form Fluent Forms allineato al Figma
   ========================================================================== */
.page-article--contatti .page-content,
.page-article--contatti-en .page-content {
  padding-bottom: 48px;
  box-sizing: border-box;
}

.page-article--contatti .wp-block-columns.has-custom-css,
.page-article--contatti-en .wp-block-columns.has-custom-css {
  display: flex;
  align-items: flex-start;
  gap: 72px;
  width: 100%;
  margin: 0;
}

.page-article--contatti .wp-block-column,
.page-article--contatti-en .wp-block-column {
  min-width: 0;
}

.page-article--contatti .wp-block-column:first-child,
.page-article--contatti-en .wp-block-column:first-child {
  flex: 1 1 0;
  padding: 48px 0;
}

.page-article--contatti .wp-block-column:last-child,
.page-article--contatti-en .wp-block-column:last-child {
  flex: 0 0 699px;
  max-width: 699px;
  padding: 48px;
  border: 4px solid rgb(var(--variant-primary, 0 91 132));
  border-radius: 60px;
  box-sizing: border-box;
}

.page-article--contatti .wp-block-column:first-child h2,
.page-article--contatti-en .wp-block-column:first-child h2 {
  margin: 0 0 24px;
  color: rgb(var(--variant-primary, 0 91 132));
  font-family: var(--pn-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 1.6px;
}

.page-article--contatti .wp-block-column:first-child p,
.page-article--contatti-en .wp-block-column:first-child p {
  margin: 0 0 48px;
  color: rgb(var(--variant-primary, 0 91 132));
  font-family: var(--pn-font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 1.2px;
}

.page-article--contatti .wp-block-column:last-child h3,
.page-article--contatti-en .wp-block-column:last-child h3 {
  margin: 0 0 24px;
  color: rgb(var(--variant-primary, 0 91 132));
  font-family: "Poppins", var(--pn-font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: 2px;
}

.page-article--contatti .pn-contact-icons,
.page-article--contatti-en .pn-contact-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.page-article--contatti .pn-contact-icon,
.page-article--contatti-en .pn-contact-icon {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-article--contatti .pn-contact-icon-container,
.page-article--contatti-en .pn-contact-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: 999px;
  background: rgb(var(--variant-primary, 0 91 132));
  box-sizing: border-box;
}

.page-article--contatti .pn-contact-icon-container mds-icon,
.page-article--contatti-en .pn-contact-icon-container mds-icon {
  color: #ffffff;
  --mds-icon-color: #ffffff;
  --mds-icon-size: 24px;
}

.page-article--contatti .pn-contact-icon-container mds-icon::part(svg),
.page-article--contatti-en .pn-contact-icon-container mds-icon::part(svg) {
  fill: #ffffff;
}

.page-article--contatti .pn-contact-icon span,
.page-article--contatti-en .pn-contact-icon span {
  color: rgb(var(--variant-primary, 0 91 132));
  font-family: var(--pn-font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.page-article--contatti .fluentform,
.page-article--contatti-en .fluentform,
.page-article--contatti .frm-fluent-form,
.page-article--contatti-en .frm-fluent-form {
  width: 100%;
}

.page-article--contatti .fluentform *,
.page-article--contatti-en .fluentform *,
.page-article--contatti .frm-fluent-form *,
.page-article--contatti-en .frm-fluent-form * {
  box-sizing: border-box;
}

.page-article--contatti .fluentform .ff-el-group,
.page-article--contatti-en .fluentform .ff-el-group,
.page-article--contatti .frm-fluent-form .ff-el-group,
.page-article--contatti-en .frm-fluent-form .ff-el-group {
  margin: 0 0 16px;
}

.page-article--contatti .fluentform .ff-t-container,
.page-article--contatti-en .fluentform .ff-t-container,
.page-article--contatti .frm-fluent-form .ff-t-container,
.page-article--contatti-en .frm-fluent-form .ff-t-container {
  display: flex;
  gap: 16px;
  margin: 0 0 16px;
}

.page-article--contatti .fluentform .ff-t-cell,
.page-article--contatti-en .fluentform .ff-t-cell,
.page-article--contatti .frm-fluent-form .ff-t-cell,
.page-article--contatti-en .frm-fluent-form .ff-t-cell {
  flex: 1 1 0;
  min-width: 0;
}

.page-article--contatti .fluentform .ff-el-input--label,
.page-article--contatti-en .fluentform .ff-el-input--label,
.page-article--contatti .frm-fluent-form .ff-el-input--label,
.page-article--contatti-en .frm-fluent-form .ff-el-input--label {
  margin: 0 0 8px;
}

.page-article--contatti .fluentform .ff-el-input--label label,
.page-article--contatti-en .fluentform .ff-el-input--label label,
.page-article--contatti .frm-fluent-form .ff-el-input--label label,
.page-article--contatti-en .frm-fluent-form .ff-el-input--label label {
  display: block;
  margin: 0;
  color: rgb(var(--tone-neutral-01, 33 33 33));
  font-family: "Karla", var(--pn-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
}

.page-article--contatti .fluentform .ff-el-input--label .ff-el-is-required,
.page-article--contatti-en .fluentform .ff-el-input--label .ff-el-is-required,
.page-article--contatti .frm-fluent-form .ff-el-input--label .ff-el-is-required,
.page-article--contatti-en
  .frm-fluent-form
  .ff-el-input--label
  .ff-el-is-required {
  color: rgb(var(--status-error-05, 194 63 64));
}

.page-article--contatti .fluentform .ff-el-input--content,
.page-article--contatti-en .fluentform .ff-el-input--content,
.page-article--contatti .frm-fluent-form .ff-el-input--content,
.page-article--contatti-en .frm-fluent-form .ff-el-input--content {
  position: relative;
}

.page-article--contatti .fluentform input.ff-el-form-control,
.page-article--contatti-en .fluentform input.ff-el-form-control,
.page-article--contatti .frm-fluent-form input.ff-el-form-control,
.page-article--contatti-en .frm-fluent-form input.ff-el-form-control {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 12px 16px 12px 48px;
  border: 0;
  border-radius: 100px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.1);
  color: rgb(var(--tone-neutral-01, 33 33 33));
  font-family: "Karla", var(--pn-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  outline: 0;
}

.page-article--contatti .fluentform textarea.ff-el-form-control,
.page-article--contatti-en .fluentform textarea.ff-el-form-control,
.page-article--contatti .frm-fluent-form textarea.ff-el-form-control,
.page-article--contatti-en .frm-fluent-form textarea.ff-el-form-control {
  width: 100%;
  min-height: 129px;
  padding: 12px 16px;
  border: 0;
  border-radius: 24px 24px 0 24px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.1);
  color: rgb(var(--tone-neutral-01, 33 33 33));
  font-family: "Karla", var(--pn-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  outline: 0;
  resize: vertical;
}

.page-article--contatti .fluentform input.ff-el-form-control::placeholder,
.page-article--contatti-en .fluentform input.ff-el-form-control::placeholder,
.page-article--contatti .fluentform textarea.ff-el-form-control::placeholder,
.page-article--contatti-en .fluentform textarea.ff-el-form-control::placeholder,
.page-article--contatti .frm-fluent-form input.ff-el-form-control::placeholder,
.page-article--contatti-en
  .frm-fluent-form
  input.ff-el-form-control::placeholder,
.page-article--contatti
  .frm-fluent-form
  textarea.ff-el-form-control::placeholder,
.page-article--contatti-en
  .frm-fluent-form
  textarea.ff-el-form-control::placeholder {
  color: rgb(var(--tone-neutral-06, 162 162 162));
  opacity: 1;
}

.page-article--contatti .fluentform input.ff-el-form-control:focus,
.page-article--contatti-en .fluentform input.ff-el-form-control:focus,
.page-article--contatti .fluentform textarea.ff-el-form-control:focus,
.page-article--contatti-en .fluentform textarea.ff-el-form-control:focus,
.page-article--contatti .frm-fluent-form input.ff-el-form-control:focus,
.page-article--contatti-en .frm-fluent-form input.ff-el-form-control:focus,
.page-article--contatti .frm-fluent-form textarea.ff-el-form-control:focus,
.page-article--contatti-en .frm-fluent-form textarea.ff-el-form-control:focus {
  box-shadow:
    0 0 0 2px rgb(var(--variant-primary, 0 91 132)),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

.page-article--contatti .fluentform .ff-el-input--content:has(input)::before,
.page-article--contatti-en .fluentform .ff-el-input--content:has(input)::before,
.page-article--contatti
  .frm-fluent-form
  .ff-el-input--content:has(input)::before,
.page-article--contatti-en
  .frm-fluent-form
  .ff-el-input--content:has(input)::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: rgb(var(--variant-primary, 0 91 132));
  pointer-events: none;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4Zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.page-article--contatti
  .fluentform
  .ff-el-group:has(input[type="email"])
  .ff-el-input--content::before,
.page-article--contatti-en
  .fluentform
  .ff-el-group:has(input[type="email"])
  .ff-el-input--content::before,
.page-article--contatti
  .frm-fluent-form
  .ff-el-group:has(input[type="email"])
  .ff-el-input--content::before,
.page-article--contatti-en
  .frm-fluent-form
  .ff-el-group:has(input[type="email"])
  .ff-el-input--content::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z'/%3E%3C/svg%3E");
}

.page-article--contatti
  .fluentform
  .ff-el-group:has(input[type="tel"])
  .ff-el-input--content::before,
.page-article--contatti-en
  .fluentform
  .ff-el-group:has(input[type="tel"])
  .ff-el-input--content::before,
.page-article--contatti
  .frm-fluent-form
  .ff-el-group:has(input[type="tel"])
  .ff-el-input--content::before,
.page-article--contatti-en
  .frm-fluent-form
  .ff-el-group:has(input[type="tel"])
  .ff-el-input--content::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E");
}

.page-article--contatti
  .fluentform
  .ff-el-group:has(input[name*="azienda" i])
  .ff-el-input--content::before,
.page-article--contatti-en
  .fluentform
  .ff-el-group:has(input[name*="azienda" i])
  .ff-el-input--content::before,
.page-article--contatti
  .fluentform
  .ff-el-group:has(input[name*="company" i])
  .ff-el-input--content::before,
.page-article--contatti-en
  .fluentform
  .ff-el-group:has(input[name*="company" i])
  .ff-el-input--content::before,
.page-article--contatti
  .frm-fluent-form
  .ff-el-group:has(input[name*="azienda" i])
  .ff-el-input--content::before,
.page-article--contatti-en
  .frm-fluent-form
  .ff-el-group:has(input[name*="azienda" i])
  .ff-el-input--content::before,
.page-article--contatti
  .frm-fluent-form
  .ff-el-group:has(input[name*="company" i])
  .ff-el-input--content::before,
.page-article--contatti-en
  .frm-fluent-form
  .ff-el-group:has(input[name*="company" i])
  .ff-el-input--content::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V3h10v4h8v14H3Zm4-2h2v-2H7v2Zm0-4h2v-2H7v2Zm0-4h2V9H7v2Zm0-4h2V5H7v2Zm4 12h2v-2h-2v2Zm0-4h2v-2h-2v2Zm0-4h2V9h-2v2Zm0-4h2V5h-2v2Zm4 12h2v-2h-2v2Zm0-4h2v-2h-2v2Zm0-4h2V9h-2v2Z'/%3E%3C/svg%3E");
}

.page-article--contatti .fluentform .ff-el-form-check,
.page-article--contatti-en .fluentform .ff-el-form-check,
.page-article--contatti .frm-fluent-form .ff-el-form-check,
.page-article--contatti-en .frm-fluent-form .ff-el-form-check,
.page-article--contatti .fluentform .ff-el-form-check-label,
.page-article--contatti-en .fluentform .ff-el-form-check-label,
.page-article--contatti .frm-fluent-form .ff-el-form-check-label,
.page-article--contatti-en .frm-fluent-form .ff-el-form-check-label {
  color: #000000;
  font-family: "Poppins", var(--pn-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.page-article--contatti .fluentform .ff-el-form-check-label a,
.page-article--contatti-en .fluentform .ff-el-form-check-label a,
.page-article--contatti .frm-fluent-form .ff-el-form-check-label a,
.page-article--contatti-en .frm-fluent-form .ff-el-form-check-label a {
  color: inherit;
  text-decoration: underline;
}

.page-article--contatti .fluentform .pn-contact-privacy-wrap,
.page-article--contatti-en .fluentform .pn-contact-privacy-wrap,
.page-article--contatti .frm-fluent-form .pn-contact-privacy-wrap,
.page-article--contatti-en .frm-fluent-form .pn-contact-privacy-wrap {
  margin: 16px 0 0;
}

.page-article--contatti .fluentform .pn-contact-privacy,
.page-article--contatti-en .fluentform .pn-contact-privacy,
.page-article--contatti .frm-fluent-form .pn-contact-privacy,
.page-article--contatti-en .frm-fluent-form .pn-contact-privacy {
  margin: 0;
  color: #000000;
  font-family: "Poppins", var(--pn-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.page-article--contatti .fluentform .pn-contact-privacy a,
.page-article--contatti-en .fluentform .pn-contact-privacy a,
.page-article--contatti .frm-fluent-form .pn-contact-privacy a,
.page-article--contatti-en .frm-fluent-form .pn-contact-privacy a {
  color: inherit;
  text-decoration: underline;
}

.page-article--contatti .fluentform .ff_submit_btn_wrapper,
.page-article--contatti-en .fluentform .ff_submit_btn_wrapper,
.page-article--contatti .frm-fluent-form .ff_submit_btn_wrapper,
.page-article--contatti-en .frm-fluent-form .ff_submit_btn_wrapper {
  margin: 24px 0 0;
}

.page-article--contatti .fluentform .ff-btn-submit,
.page-article--contatti-en .fluentform .ff-btn-submit,
.page-article--contatti .frm-fluent-form .ff-btn-submit,
.page-article--contatti-en .frm-fluent-form .ff-btn-submit,
.page-article--contatti .fluentform button[type="submit"],
.page-article--contatti-en .fluentform button[type="submit"],
.page-article--contatti .frm-fluent-form button[type="submit"],
.page-article--contatti-en .frm-fluent-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 34px;
  border: 2px solid rgb(var(--variant-primary-03, 0 82 120)) !important;
  border-radius: 1000px;
  background: rgb(var(--variant-primary-03, 0 82 120)) !important;
  color: #ffffff !important;
  font-family: "Roboto", var(--pn-font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.page-article--contatti .fluentform .ff-btn-submit:hover,
.page-article--contatti-en .fluentform .ff-btn-submit:hover,
.page-article--contatti .frm-fluent-form .ff-btn-submit:hover,
.page-article--contatti-en .frm-fluent-form .ff-btn-submit:hover,
.page-article--contatti .fluentform button[type="submit"]:hover,
.page-article--contatti-en .fluentform button[type="submit"]:hover,
.page-article--contatti .frm-fluent-form button[type="submit"]:hover,
.page-article--contatti-en .frm-fluent-form button[type="submit"]:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

@media (max-width: 1279px) {
  .page-article--contatti .page-content,
  .page-article--contatti-en .page-content {
    padding-right: 40px;
    padding-left: 40px;
  }

  .page-article--contatti .wp-block-columns.has-custom-css,
  .page-article--contatti-en .wp-block-columns.has-custom-css {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
  }

  .page-article--contatti .wp-block-column:first-child,
  .page-article--contatti-en .wp-block-column:first-child {
    width: 100%;
    padding: 24px 0 0;
    text-align: center;
  }

  .page-article--contatti .wp-block-column:first-child p,
  .page-article--contatti-en .wp-block-column:first-child p {
    margin-bottom: 32px;
  }

  .page-article--contatti .pn-contact-icons,
  .page-article--contatti-en .pn-contact-icons {
    align-items: center;
  }

  .page-article--contatti .wp-block-column:last-child,
  .page-article--contatti-en .wp-block-column:last-child {
    flex-basis: auto;
    width: 100%;
    max-width: none;
    padding: 40px;
    border-radius: 48px;
  }
}

@media (max-width: 767px) {
  .page-article--contatti .page-content,
  .page-article--contatti-en .page-content {
    padding-right: 20px;
    padding-left: 20px;
  }

  .page-article--contatti .wp-block-columns.has-custom-css,
  .page-article--contatti-en .wp-block-columns.has-custom-css {
    gap: 32px;
  }

  .page-article--contatti .wp-block-column:first-child,
  .page-article--contatti-en .wp-block-column:first-child {
    padding-top: 8px;
  }

  .page-article--contatti .wp-block-column:first-child h2,
  .page-article--contatti-en .wp-block-column:first-child h2 {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: 0;
  }

  .page-article--contatti .wp-block-column:first-child p,
  .page-article--contatti-en .wp-block-column:first-child p,
  .page-article--contatti .pn-contact-icon span,
  .page-article--contatti-en .pn-contact-icon span {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
  }

  .page-article--contatti .wp-block-column:last-child,
  .page-article--contatti-en .wp-block-column:last-child {
    padding: 28px 24px;
    border-width: 3px;
    border-radius: 32px;
  }

  .page-article--contatti .wp-block-column:last-child h3,
  .page-article--contatti-en .wp-block-column:last-child h3 {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 0;
  }

  .page-article--contatti .fluentform .ff-t-container,
  .page-article--contatti-en .fluentform .ff-t-container,
  .page-article--contatti .frm-fluent-form .ff-t-container,
  .page-article--contatti-en .frm-fluent-form .ff-t-container {
    flex-direction: column;
    gap: 16px;
  }

  .page-article--contatti .fluentform .ff-btn-submit,
  .page-article--contatti-en .fluentform .ff-btn-submit,
  .page-article--contatti .frm-fluent-form .ff-btn-submit,
  .page-article--contatti-en .frm-fluent-form .ff-btn-submit,
  .page-article--contatti .fluentform button[type="submit"],
  .page-article--contatti-en .fluentform button[type="submit"],
  .page-article--contatti .frm-fluent-form button[type="submit"],
  .page-article--contatti-en .frm-fluent-form button[type="submit"] {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 374px) {
  .page-article--contatti .page-content,
  .page-article--contatti-en .page-content {
    padding-right: 20px;
    padding-left: 20px;
  }

  .page-article--contatti .wp-block-column:last-child,
  .page-article--contatti-en .wp-block-column:last-child {
    padding: 24px 18px;
  }
}

/* ==========================================================================
   DETTAGLIO NEWS - single.php + template-parts/news/single.php
   Figma 266:5368: page-title condiviso, hero immagine in evidenza, card bianca
   sovrapposta e pillolons decorativi di sfondo.
   ========================================================================== */
.pn-news-single {
  position: relative;
}

.pn-news-single > .pn-page-title + .pn-news-single-shell {
  margin-top: 32px;
}

.pn-news-single-shell {
  position: relative;
  width: 100%;
  padding-bottom: 92px;
  isolation: isolate;
}

.pn-news-single-decor {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 64px;
  width: 100vw;
  height: min(42vw, 380px);
  margin-left: -50vw;
  pointer-events: none;
  overflow: hidden;
}

.pn-news-single-pill {
  position: absolute;
  display: block;
  height: 118px;
  border-radius: 999px;
  opacity: 0.48;
}

.pn-news-single-pill--green-left {
  left: -52px;
  top: 18px;
  width: 180px;
  background: var(--pn-brand-verde);
}

.pn-news-single-pill--blue-left {
  left: -48px;
  bottom: 0;
  width: 214px;
  background: var(--pn-brand-azzurro);
}

.pn-news-single-pill--magenta-right {
  right: -72px;
  top: 18px;
  width: 292px;
  background: var(--pn-brand-rosa-pastel);
}

.pn-news-single-pill--green-right {
  right: 160px;
  bottom: 12px;
  width: 164px;
  background: var(--pn-brand-verde);
  opacity: 0.28;
}

.pn-news-single-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  border-radius: 72px;
  overflow: hidden;
  background: var(--pn-brand-blu-light);
}

.pn-news-single-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 520;
  min-height: 360px;
  object-fit: cover;
}

.pn-news-single-card {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 80px));
  margin: -118px auto 0;
  padding: 52px 56px 40px;
  border-radius: 52px;
  background: #ffffff;
  box-shadow: 0 18px 60px rgb(0 0 0 / 0.1);
  box-sizing: border-box;
}

.pn-news-single-card--no-hero {
  margin-top: 0;
}

.pn-news-single-header {
  margin-bottom: 34px;
}

.pn-news-single-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.pn-news-single-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: 32px;
  min-width: 126px;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 100px;
  background: var(--cat-color, var(--pn-brand-verde));
  color: var(--cat-text-color, var(--pn-brand-blu-dark));
  font-family: "Karla", var(--pn-font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 1.5px rgba(0, 0, 0, 0.15);
}

.pn-news-single-date {
  font-family: var(--pn-font-body);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: #8b8b8b;
}

.pn-news-single-title {
  margin: 0 0 20px;
  max-width: 640px;
  font-family: var(--pn-font-heading);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
  font-weight: 800;
  color: var(--pn-brand-blu-dark);
  letter-spacing: 0;
}

.pn-news-single-lead {
  margin: 0;
  padding-left: 20px;
  border-left: 4px solid var(--pn-brand-rosa);
  font-family: var(--pn-font-body);
  font-size: 22px;
  line-height: 1.45;
  font-weight: 700;
  color: #424242;
}

.pn-news-single-content {
  font-family: var(--pn-font-body);
  font-size: 18px;
  line-height: 1.72;
  font-weight: 400;
  color: #526078;
}

.pn-news-single-content > *:first-child {
  margin-top: 0;
}

.pn-news-single-content > *:last-child {
  margin-bottom: 0;
}

.pn-news-single-content p {
  margin: 0 0 22px;
}

.pn-news-single-content h2,
.pn-news-single-content h3,
.pn-news-single-content h4 {
  margin: 42px 0 16px;
  font-family: var(--pn-font-heading);
  font-weight: 800;
  line-height: 1.2;
  color: var(--pn-brand-blu-dark);
  letter-spacing: 0;
}

.pn-news-single-content h2 {
  font-size: 28px;
  text-transform: uppercase;
}

.pn-news-single-content h3 {
  font-size: 24px;
}

.pn-news-single-content ul,
.pn-news-single-content ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.pn-news-single-content li + li {
  margin-top: 8px;
}

.pn-news-single-content a {
  color: var(--pn-brand-blu);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pn-news-single-content blockquote {
  margin: 28px 0;
  padding: 0 0 0 20px;
  border-left: 4px solid var(--pn-brand-rosa);
  font-weight: 700;
  color: #424242;
}

.pn-news-single-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid #e5e5e5;
}

.pn-news-single-share-label {
  font-family: var(--pn-font-heading);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  color: var(--pn-brand-blu-dark);
  text-transform: uppercase;
}

.pn-news-single-share-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pn-news-single-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  background: #ffffff;
  color: var(--pn-brand-blu);
  font-family: var(--pn-font-body);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.pn-news-single-share:hover,
.pn-news-single-share:focus-visible {
  background: var(--pn-brand-blu);
  border-color: var(--pn-brand-blu);
  color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .pn-news-single-shell {
    padding-bottom: 72px;
  }

  .pn-news-single-hero {
    border-radius: 44px;
  }

  .pn-news-single-hero img {
    min-height: 300px;
    aspect-ratio: 16 / 9;
  }

  .pn-news-single-card {
    width: min(720px, calc(100% - 40px));
    margin-top: -72px;
    padding: 40px 34px 34px;
    border-radius: 36px;
  }

  .pn-news-single-title {
    font-size: 36px;
  }

  .pn-news-single-lead {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .pn-news-single > .pn-page-title + .pn-news-single-shell {
    margin-top: 18px;
  }

  .pn-news-single-shell {
    padding-bottom: 48px;
  }

  .pn-news-single-decor {
    bottom: 32px;
    height: 320px;
  }

  .pn-news-single-pill {
    height: 80px;
  }

  .pn-news-single-pill--green-left {
    left: -70px;
    width: 150px;
  }

  .pn-news-single-pill--blue-left {
    width: 160px;
  }

  .pn-news-single-pill--magenta-right {
    right: -118px;
    width: 230px;
  }

  .pn-news-single-pill--green-right {
    display: none;
  }

  .pn-news-single-hero {
    border-radius: 30px;
  }

  .pn-news-single-hero img {
    min-height: 230px;
  }

  .pn-news-single-card {
    width: calc(100% - 24px);
    margin-top: -42px;
    padding: 30px 22px 28px;
    border-radius: 28px;
  }

  .pn-news-single-card--no-hero {
    margin-top: 0;
  }

  .pn-news-single-meta {
    gap: 10px;
  }

  .pn-news-single-category {
    min-width: 0;
    max-width: 100%;
  }

  .pn-news-single-title {
    font-size: 30px;
    line-height: 1.12;
  }

  .pn-news-single-lead {
    padding-left: 14px;
    font-size: 18px;
  }

  .pn-news-single-content {
    font-size: 16px;
    line-height: 1.65;
  }

  .pn-news-single-content h2 {
    font-size: 24px;
  }

  .pn-news-single-content h3 {
    font-size: 21px;
  }

  .pn-news-single-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-top: 36px;
  }
}

.site-main.error-404 .page-content {
  max-width: 760px;
  padding-bottom: 72px;
}

.pn-404-cta {
  --mds-button-background: var(--pn-brand-blu);
  --mds-button-border-color: 0 91 132;
  --mds-button-color: #ffffff;
  --mds-button-radius: 1000px;
}

/* Commenti WordPress nativi: reset margin per stare dentro il container */
.comment-list,
#respond,
.comment-respond {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  list-style: none;
  padding-left: 0;
}

.comment-list .children {
  list-style: none;
  padding-left: 24px;
}

/* ==========================================================================
   BANNER TITOLO PAGINE INTERNE
   Figma 220:17902 — SVG nativi.
   Pill blu 1280x150 con titolo Montserrat 800/48 #ECF68C.
   Decori a destra:
     - verde (150x250) sborda sopra (entra sotto menu pillola header)
     - celeste cerchio (150x150) accanto a verde
     - magenta (150x220) sborda sotto, dietro a celeste+verde
   ========================================================================== */
.pn-page-title {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 24px auto 48px;
  box-sizing: border-box;
  /* Niente overflow:hidden: i decori sbordano sopra/sotto */
}

.pn-page-title-inner {
  position: relative;
  width: 100%;
  height: 150px; /* altezza del pill; decori sbordano oltre */
}

/* Pill blu: larghezza piena del container (parent gestisce max-width 1280) */
.pn-page-title-pill {
  position: relative;
  width: 100%;
  height: 150px;
  padding: 0 48px;
  background: #005b84;
  border-radius: 75px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  z-index: 0;
}

.pn-page-title-text {
  margin: 0;
  font-family: var(--pn-font-heading);
  font-weight: 800;
  font-size: 48px;
  line-height: 48px;
  color: #ecf68c;
  text-transform: uppercase;
}

.news-article > .pn-page-title .pn-page-title-text,
.news-page-article > .pn-page-title .pn-page-title-text,
.archive-eventi .pn-eventi-archive-article > .pn-page-title .pn-page-title-text,
.single-evento .pn-evento-article > .pn-page-title .pn-page-title-text {
  color: var(--pn-white);
}

/* Decori SVG: posizione assoluta rispetto a .pn-page-title-inner */
.pn-page-title-decor {
  position: absolute;
  display: block;
  pointer-events: none;
}

.pn-page-title-decor--green {
  top: -250px;
  right: 170px;
  z-index: 2;
  /* color pilota il fill="currentColor" dell'SVG. Default: verde lime brand.
   * Override per palette via --pt-decor-green sul .pn-page-title--<palette>. */
  color: var(--pt-decor-green, #d0db71);
  /* Fade verso l'alto: la pillola sfuma (trasparente in cima → piena verso il
   * basso). Mask verticale, ~25% di dissolvenza in alto. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}

/* Celeste 150x150: Figma Rectangle 15, border-radius 1000px + rotate 90deg */
.pn-page-title-decor--blue {
  width: 150px;
  height: 150px;
  background: var(--pt-decor-blue, #0fa7cd);
  border-radius: 1000px;
  transform: rotate(90deg);
  top: -120px;
  right: 0;
  z-index: 4;
}

/* Magenta: Figma Rectangle 12 (220x150) + rotate 90deg → diventa pillola verticale.
   Bounding box CSS resta 220x150, compenso right -35 per allineare il bordo destro
   visivo della pillola ruotata al bordo del container. */
.pn-page-title-decor--magenta {
  width: 220px;
  height: 150px;
  background: var(--pt-decor-magenta, #ad4693);
  border-radius: 1000px;
  transform: rotate(90deg);
  top: 90px;
  right: -35px;
  z-index: 2;
}

@media (min-width: 900px) and (max-width: 1279px) {
  .page-article > .pn-page-title--piani,
  .pn-page-title--piani {
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 24px;
  }

  .pn-page-title--piani .pn-page-title-inner {
    height: auto;
  }

  .pn-page-title--piani .pn-page-title-pill {
    height: auto;
    min-height: 120px;
    padding: 32px 40px;
    border-radius: 999px;
    overflow: hidden;
    z-index: 3;
  }

  .pn-page-title--piani .pn-page-title-text {
    max-width: 760px;
    font-size: 42px;
    line-height: 46px;
  }

  .pn-page-title--piani .pn-page-title-decor--green,
  .pn-page-title--piani .pn-page-title-decor--magenta {
    display: none;
  }

  .pn-page-title--piani .pn-page-title-decor--blue {
    width: 112px;
    height: 112px;
    top: -54px;
    right: 48px;
    z-index: 1;
  }
}

/* ==========================================================================
   PILLOLONS - fascia decorativa prima del footer (pagine interne)
   Figma 656:16136. Layout flex: pillole centrali width fissa, le 2 esterne
   flex:1 che sbordano nei bordi del viewport. Gap 24, padding-y 128.
   ========================================================================== */
.pn-pillolons {
  width: 100%;
  padding: 128px 0 70px;
  overflow: hidden;
}

.pn-pillolons-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.pn-pillolons-pill {
  display: block;
  height: 150px;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Blu sborda da sx: solo radius destro */
.pn-pillolons-pill--blue-left {
  width: 184px;
  background: #005b84;
  border-radius: 0 1000px 1000px 0;
}

/* Bianca bordo magenta */
.pn-pillolons-pill--white-magenta {
  width: 313px;
  background: #ffffff;
  border: 8px solid #ad4693;
  border-radius: 1000px;
}

/* Magenta piena */
.pn-pillolons-pill--magenta-fill {
  width: 152px;
  background: #ad4693;
  border-radius: 1000px;
}

/* Bianca bordo blu */
.pn-pillolons-pill--white-blue {
  width: 286px;
  background: #ffffff;
  border: 8px solid #005b84;
  border-radius: 1000px;
}

/* Verde piena */
.pn-pillolons-pill--green-fill {
  width: 185px;
  background: #d0db71;
  border-radius: 1000px;
}

/* Magenta sborda a dx: solo radius sinistro, flex:1 riempie spazio rimanente */
.pn-pillolons-pill--magenta-right {
  flex: 1 0 0;
  min-width: 80px;
  background: #ad4693;
  border-radius: 1000px 0 0 1000px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  .page-article > .pn-page-title,
  .news-article > .pn-page-title,
  .pn-servizio-article > .pn-page-title,
  .news-page-article > .pn-page-title,
  .single-evento .pn-evento-article > .pn-page-title,
  .archive-eventi .pn-eventi-archive-article > .pn-page-title,
  .gov-page > .pn-page-title,
  .lcn-page > .pn-page-title {
    width: auto;
    padding-right: 40px;
    padding-left: 40px;
    margin: 24px -40px 40px;
  }

  .pn-page-title-inner {
    height: auto;
    display: block;
    width: 100%;
  }

  .pn-page-title-decor--green,
  .pn-page-title-decor--magenta,
  .pn-page-title-decor--blue {
    display: none;
  }

  .pn-page-title-pill {
    position: static;
    width: 100%;
    height: auto;
    min-height: 120px;
    padding: 32px 40px;
    border-radius: 999px;
  }

  .pn-page-title-text {
    font-size: 36px;
    line-height: 40px;
  }

  .site-main.page-generic > *:not(.pn-page-title),
  .site-main.archive-listing > *:not(.pn-page-title),
  .site-main.search-results > *:not(.pn-page-title),
  .site-main.error-404 > *:not(.pn-page-title),
  .site-main.single-post > *:not(.pn-page-title),
  .site-main.single-servizio > *:not(.pn-page-title),
  .site-main.news-listing > *:not(.pn-page-title),
  .news-listing--template .pn-news-archive {
    padding-left: 40px;
    padding-right: 40px;
  }

  .pn-hero {
    height: auto;
    margin-top: 96px;
    aspect-ratio: 1440 / 1177;
  }
  .pn-hero-content {
    left: clamp(40px, 6vw, 80px);
    right: clamp(40px, 6vw, 80px);
    width: auto;
    top: 18%;
  }
  .pn-bg-decor-blue-top,
  .pn-bg-decor-circle-green-top {
    transform: translateY(-96px);
  }
  .pn-bg-decor-pill-green,
  .pn-bg-decor-pill-pink,
  .pn-bg-decor-circle-green-bottom {
    transform: translateY(120px) !important;
    opacity: 0.62;
  }
  .pn-hero-titolo-wrap {
    width: 100%;
    height: auto;
  }
  .pn-hero-titolo {
    position: static;
    width: 100%;
    font-size: clamp(40px, 5vw, 52px);
    line-height: 1.16;
  }
  .pn-servizi {
    padding-top: 32px;
  }
  .pn-servizi-header {
    position: relative;
    z-index: 3;
    margin-bottom: 36px;
  }
  .pn-servizi-title {
    line-height: 1.15;
  }
  .pn-servizio-article > .pn-page-title {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .pn-servizio-abstract {
    padding: 56px 40px;
    font-size: 30px;
    line-height: 44px;
  }
  .pn-servizio-blocco {
    margin: 48px 0;
  }
  .pn-servizio-blocco-inner,
  .pn-servizio-blocco--testo-immagine .pn-servizio-blocco-inner,
  .pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-sx
    .pn-servizio-blocco-inner,
  .pn-servizio-blocco--mappa-testo .pn-servizio-blocco-inner,
  .pn-servizio-blocco--mappa-testo.pn-servizio-blocco--mappa-dx
    .pn-servizio-blocco-inner {
    grid-template-columns: 1fr;
  }
  .pn-servizio-blocco-media {
    width: min(420px, 70vw);
    height: min(420px, 70vw);
    margin: 0 auto;
  }
  .pn-servizio-blocco-mappa {
    margin: 0 auto;
  }
}

@media (max-width: 1023px) {
  .pn-header {
    padding: 12px 20px;
  }
  .pn-header-pill {
    padding: 12px 20px 12px 28px;
    gap: 12px;
  }
  .pn-header-menu-button {
    padding: 0 16px;
    min-height: 44px;
  }
  .pn-header-menu a {
    font-size: 16px;
    padding: 0 16px;
    height: 44px;
  }
  .pn-header-logo img {
    height: 28px;
  }
  .pn-header-user {
    width: 48px;
    height: 48px;
    font-size: 15px;
  }
  .site-footer-inner {
    padding: 0 40px;
  }

  /* Hero responsive (Figma 1440 -> scale) */
  .pn-hero {
    height: auto;
    aspect-ratio: 1440 / 1177;
  }
  .pn-hero-content {
    left: 5%;
    right: 5%;
    width: auto;
    top: 26%;
  }
  .pn-hero-titolo-wrap {
    width: 100%;
    height: auto;
  }
  .pn-hero-titolo {
    width: 100%;
    font-size: 44px;
    line-height: 56px;
    position: static;
  }
  /* highlights inline restano (responsive via em). Niente piu' decori coordinate fisse. */

  .pn-section-formazione-inner,
  .pn-section-accelerator-inner {
    flex-direction: column;
  }

  .pn-agenda {
    min-width: auto;
    width: 100%;
  }
  .pn-accelerator-image {
    width: 100%;
    max-width: 500px;
    height: 400px;
  }

  .pn-news-grid,
  .pn-news-track {
    grid-template-columns: 1fr;
  }
  .pn-news-featured {
    grid-row: auto;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Pillolons tablet: pillole piu' basse, padding ridotto */
  .pn-pillolons {
    padding: 88px 0;
  }
  .pn-pillolons-pill {
    height: 88px;
  }
  .pn-pillolons-pill--blue-left {
    width: 144px;
    background: var(--pn-brand-verde);
  }
  .pn-pillolons-pill--white-magenta {
    width: 88px;
    border-radius: 50%;
  }
  .pn-pillolons-pill--magenta-fill {
    width: 260px;
    background: var(--pn-brand-blu);
  }
  .pn-pillolons-pill--white-blue {
    width: 150px;
  }
  .pn-pillolons-pill--green-fill {
    width: 190px;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .pn-pillolons {
    padding: 88px 0;
  }
  .pn-pillolons-row {
    gap: 24px;
  }
  .pn-pillolons-pill {
    height: 88px;
  }
  .pn-pillolons-pill--blue-left {
    width: 144px;
    background: var(--pn-brand-verde);
  }
  .pn-pillolons-pill--white-magenta {
    width: 88px;
    border-radius: 50%;
  }
  .pn-pillolons-pill--magenta-fill {
    width: 260px;
    background: var(--pn-brand-blu);
  }
  .pn-pillolons-pill--white-blue {
    display: block;
    width: 150px;
  }
  .pn-pillolons-pill--green-fill {
    display: block;
    width: 190px;
  }
  .pn-pillolons-pill--magenta-right {
    min-width: 80px;
  }
}

@media (max-width: 767px) {
  .pn-header {
    padding: 10px 12px;
  }
  .pn-header.is-menu-open {
    height: 72px;
  }
  .pn-header-pill {
    padding: 10px 12px 10px 16px;
    gap: 8px;
  }
  .pn-header-logo img {
    height: 24px;
  }

  /* Banner titolo mobile: solo pill rettangolare, niente decori */
  .pn-page-title {
    padding: 0 20px;
    margin: 20px 0 32px;
  }

  .pn-page-title-inner {
    display: block;
    width: 100%;
    height: auto;
  }

  .pn-page-title-decor--green,
  .pn-page-title-decor--magenta,
  .pn-page-title-decor--blue {
    display: none;
  }

  .pn-page-title-pill {
    width: 100%;
    height: 110px;
    min-height: 0;
    padding: 28px 32px;
    border-radius: 999px;
    justify-content: flex-start;
    overflow: hidden;
  }

  .pn-page-title-text {
    font-size: 28px;
    line-height: 32px;
    max-width: none;
  }

  /* Container pagine interne mobile */
  .site-main.page-generic > *:not(.pn-page-title),
  .site-main.single-post > *:not(.pn-page-title),
  .site-main.single-servizio > *:not(.pn-page-title),
  .site-main.news-listing > *:not(.pn-page-title),
  .site-main.archive-listing > *:not(.pn-page-title),
  .site-main.search-results > *:not(.pn-page-title),
  .site-main.error-404 > *:not(.pn-page-title) {
    padding-left: 20px;
    padding-right: 20px;
  }
  .page-article > .pn-page-title,
  .news-article > .pn-page-title,
  .pn-servizio-article > .pn-page-title,
  .news-page-article > .pn-page-title,
  .single-evento .pn-evento-article > .pn-page-title,
  .archive-eventi .pn-eventi-archive-article > .pn-page-title {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
  }

  /* Pillolons mobile: nasconde 2 pillole centrali per non ingombrare */
  .pn-pillolons {
    padding: 40px 0;
  }
  .pn-pillolons-row {
    gap: 16px;
  }
  .pn-pillolons-pill {
    height: 58px;
  }
  .pn-pillolons-pill--blue-left {
    width: 72px;
  }
  .pn-pillolons-pill--white-magenta {
    width: 58px;
  }
  .pn-pillolons-pill--magenta-fill {
    width: 168px;
  }
  .pn-pillolons-pill--white-blue,
  .pn-pillolons-pill--green-fill {
    display: none;
  }
  .pn-pillolons-pill--magenta-right {
    min-width: 64px;
  }
  .menu-toggle {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }
  .pn-header-nav {
    display: none;
  }
  .pn-header-cta {
    display: none;
  }
  .pn-header-cta--user {
    display: flex;
    order: 3;
    margin-left: 0;
  }
  .pn-header-cta--user .pn-header-user {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
  /* ── Menu mobile FULL-SCREEN ──────────────────────────────────────────
     Il drawer hamburger diventa un overlay a tutto schermo (fixed, inset 0)
     con sfondo pieno bianco. Le voci sono grandi e scrollabili. Lo switcher
     lingua va in fondo. Il body e' bloccato (.pn-menu-lock da main.js). */
  body.pn-menu-lock {
    overflow: hidden;
  }
  /* L'overlay full-screen e' l'INTERO header-inner (contiene pill + switcher
     lingua, che nel markup sono fratelli, non annidati). */
  .pn-header.is-menu-open .pn-header-inner {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(env(safe-area-inset-top) + 24px) 20px
      calc(24px + env(safe-area-inset-bottom));
    background: var(--pn-white, #fff);
  }
  /* La pill interna perde il suo sfondo/shadow: ora e' un contenitore flat
     in colonna dentro l'overlay. */
  .pn-header.is-menu-open .pn-header-pill {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 4px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 12px;
  }
  /* Riga in alto del drawer: logo a sinistra + X (hamburger) a destra,
     separati da una linea sottile dal resto del menu. */
  .pn-header.is-menu-open .pn-header-logo {
    order: 0;
    align-self: center;
    width: auto;
    margin: 0 auto 0 0;
    padding: 0;
    border-bottom: 0;
  }
  .pn-header.is-menu-open .pn-header-logo img {
    height: 30px;
    width: auto;
  }
  .pn-header.is-menu-open .menu-toggle {
    order: 2;
    position: relative;
    z-index: 1;
    margin-left: 0;
  }
  .pn-header.is-menu-open .pn-header-nav,
  .pn-header.is-menu-open .pn-header-cta {
    display: flex;
    position: static;
    width: 100%;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .pn-header.is-menu-open .pn-header-nav {
    order: 3;
    flex-basis: 100%;
    margin-top: 20px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 91, 132, 0.12);
  }
  .pn-header.is-menu-open .pn-header-cta {
    order: 4;
    justify-content: center;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 91, 132, 0.12);
  }
  .pn-header.is-menu-open .pn-header-accedi {
    width: 100%;
    max-width: none;
  }
  /* Switcher lingua: nascosto a menu chiuso, mostrato IN FONDO al drawer. */
  .pn-lang-switcher-wrap {
    display: none;
  }
  .pn-header.is-menu-open .pn-lang-switcher-wrap {
    order: 5;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: auto 0 0;
    padding: 28px 0 0;
    border-top: 1px solid rgba(0, 91, 132, 0.12);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  /* Voci di navigazione piu' grandi nel full-screen. */
  .pn-header.is-menu-open .pn-header-menu a,
  .pn-header.is-menu-open .pn-header-menu-button,
  .pn-header.is-menu-open .pn-header-menu-servizi-trigger {
    min-height: 56px;
    padding: 14px 16px;
    font-size: 20px;
  }
  .pn-header.is-menu-open .pn-header-cta--user {
    order: 1;
    width: auto;
    position: static;
    align-self: center;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border-top: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .pn-header.is-menu-open .pn-header-cta--user .pn-header-user,
  .pn-header.is-menu-open .pn-header-cta--user .pn-header-user-avatar,
  .pn-header.is-menu-open .menu-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .pn-header.is-menu-open .pn-header-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  /* Voci principali: niente separatori dentro l'area tappabile. */
  .pn-header.is-menu-open .pn-header-menu > li {
    border-bottom: 0;
  }
  .pn-header.is-menu-open .pn-header-menu a,
  .pn-header.is-menu-open .pn-header-menu-button {
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
  }
  /* Override delle voci "grandi": altezza compatta uniforme. */
  .pn-header.is-menu-open .pn-header-menu a,
  .pn-header.is-menu-open .pn-header-menu-button,
  .pn-header.is-menu-open .pn-header-menu-servizi-trigger {
    min-height: 48px;
    padding: 12px 8px;
    font-size: 18px;
  }
  .pn-header.is-menu-open .pn-header-menu-button::part(label) {
    font-size: 18px;
    line-height: 24px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  /* Sottomenu Servizi mobile: nascondo dropdown Magma + trigger button,
   * mostro la lista flat sotto la voce "Servizi" nel drawer hamburger. */
  .pn-header-servizi-dropdown {
    display: none !important;
  }
  .pn-header-menu-servizi-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 8px;
    min-height: 48px;
  }
  .pn-header.is-menu-open .pn-header-menu-servizi {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .pn-header-menu-servizi-icon {
    display: none;
  }
  .pn-header-servizi-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 2px 0 8px;
    padding: 8px 0 8px 28px; /* indentato sotto "Servizi" */
  }
  .pn-header-servizi-item--mobile {
    min-height: 44px;
    height: auto;
    padding: 10px 12px;
    font-size: 16px;
  }
  .pn-header-servizi-item--mobile.is-active {
    background: rgb(var(--variant-primary-10, 231 248 255));
    color: var(--pn-brand-blu);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--pn-brand-blu);
  }
  .pn-hero {
    aspect-ratio: auto;
    height: auto;
    margin-top: 96px;
    padding: 32px 20px 64px;
  }
  .pn-bg-decor {
    top: -128px;
  }
  .pn-bg-decor-blue-top {
    right: -8px;
    width: 150px;
    height: 220px;
    opacity: 0.56;
  }
  .pn-bg-decor-circle-green-top {
    top: 188px;
    right: 10px;
    width: 136px;
    height: 136px;
    border-width: 6px;
    opacity: 0.5;
  }
  .pn-bg-decor-pill-green,
  .pn-bg-decor-pill-pink,
  .pn-bg-decor-circle-green-bottom {
    opacity: 0.42;
  }
  .pn-bg-decor-pill-green {
    top: 590px;
    right: -72px;
    width: 260px;
    height: 112px;
  }
  .pn-bg-decor-pill-pink {
    top: 720px;
    right: -104px;
    left: auto;
    width: 320px;
    height: 112px;
  }
  .pn-bg-decor-circle-green-bottom {
    top: 780px;
    left: -116px;
    width: 250px;
    height: 250px;
    border-width: 6px;
  }
  .pn-hero-content {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    gap: 32px;
  }
  .pn-hero-titolo {
    font-size: 28px;
    line-height: 36px;
  }
  .pn-hero-deco-blue-top {
    right: 0;
    left: auto;
    width: 100px;
    height: 140px;
  }
  .pn-hero-deco-circle-green-top {
    right: 20px;
    left: auto;
    top: 90px;
    width: 100px;
    height: 100px;
    border-width: 5px;
  }
  .pn-hero-deco-pill-green-right {
    right: 0;
    left: auto;
    top: 380px;
    width: 100px;
    height: 200px;
  }
  .pn-hero-deco-pill-pink-bottom {
    left: 60px;
    top: 460px;
    width: 100px;
    height: 280px;
  }
  .pn-hero-deco-circle-green-bottom {
    left: -60px;
    top: 520px;
    width: 200px;
    height: 200px;
    border-width: 5px;
  }

  .pn-stats-bar {
    flex-direction: column;
    gap: 24px;
    border-radius: 40px;
    margin: -20px 20px 0;
    padding: 30px 20px;
  }
  .pn-stat-number {
    font-size: 40px;
    line-height: 40px;
  }

  .pn-section-formazione,
  .pn-section-accelerator {
    padding: 60px 0;
    margin: 40px 0;
    border-radius: 40px;
  }
  .pn-section-formazione-inner,
  .pn-section-accelerator-inner {
    padding: 0 20px;
  }

  .pn-section-title {
    font-size: 32px;
  }

  .pn-agenda {
    border-radius: 40px;
    padding: 30px;
  }

  .pn-section-news {
    padding: 50px 0;
    border-radius: 40px;
  }
  .pn-section-news-inner {
    padding: 0 20px;
  }
}

/* ==========================================================================
   SEZIONE NEWS - Figma 191:5133
   ========================================================================== */
.pn-news {
  padding: 80px;
  background: transparent;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.pn-news-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}
.pn-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  margin-bottom: 48px;
  border-bottom: 2px solid #005b84;
  padding-bottom: 16px;
}
.pn-news-titolo {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 48px;
  color: #005b84;
  text-transform: uppercase;
  margin: 0;
}
.pn-news-nav {
  display: flex;
  gap: 8px;
}
.pn-news-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 10px;
  background: var(--pn-brand-blu-dark);
  border: 2px solid var(--pn-brand-blu-dark);
  border-radius: 1000px;
  color: var(--pn-white);
  cursor: pointer;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.pn-news-nav-btn:not(:disabled):hover {
  background: var(--pn-brand-blu);
  border-color: var(--pn-brand-blu);
  box-shadow: 0 8px 18px rgba(0, 82, 120, 0.14);
  transform: translateY(-1px);
}
.pn-news-nav-btn:not(:disabled):active {
  box-shadow: 0 2px 6px rgba(0, 82, 120, 0.12);
  transform: translateY(0);
}
.pn-news-nav-btn:focus-visible {
  outline: 3px solid var(--pn-brand-verde);
  outline-offset: 3px;
}
.pn-news-nav-btn mds-icon {
  width: 24px;
  height: 24px;
  --mds-icon-color: #ffffff;
}
.pn-news-nav-btn mds-icon::part(svg) {
  fill: #ffffff;
}

/* Filtri chip: rail centrato con bg azzurro chiaro Figma `--variant-primary/10` */
.pn-news-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 24px;
  margin: 0 auto 32px;
  background: rgb(var(--variant-primary-09, 199 238 255));
  border-radius: 100px;
  max-width: 900px;
}
.pn-news-chip {
  --cat-active-color: rgb(var(--variant-primary-10, 231 248 255));
  --cat-label-color: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-background: #ffffff;
  --mds-chip-color: var(--cat-label-color);
  --mds-chip-border: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-icon-background: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-icon-color: #ffffff;
  --mds-chip-shadow:
    0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1.5px rgba(0, 0, 0, 0.15);

  flex-shrink: 0;
  cursor: pointer;
}
.pn-news-chip:hover,
.pn-news-chip:focus-visible {
  --mds-chip-background: rgb(var(--variant-primary-10, 231 248 255));
}
.pn-news-chip.is-active {
  --mds-chip-background: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-color: var(--cat-active-color);
  --mds-chip-border: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-icon-background: var(--cat-active-color);
  --mds-chip-icon-color: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-shadow: 0 1px 3px rgba(0, 91, 132, 0.14);
}
.pn-news-chip[data-brand="secondary"] {
  --cat-active-color: rgb(var(--variant-secondary-03, 75 81 20));
  --cat-label-color: rgb(var(--variant-secondary-03, 75 81 20));
}
.pn-news-chip[data-brand="tertiary"] {
  --cat-active-color: rgb(var(--variant-tertiary-10, 250 243 248));
  --cat-label-color: rgb(var(--variant-tertiary, 173 70 147));
}
.pn-news-chip[data-brand="info"] {
  --cat-active-color: rgb(var(--variant-primary-02, 0 69 101));
  --cat-label-color: rgb(var(--variant-primary-03, 0 82 120));
}
.pn-news-chip[data-brand="aqua"] {
  --cat-active-color: rgb(var(--aqua-dark-10, 221 250 247));
  --cat-label-color: rgb(var(--aqua-dark, 16 114 103));
}
/* Carousel track: tutte le card flow naturale, JS toggla is-in-view */
.pn-news-track-wrap {
  margin-bottom: 32px;
  position: relative; /* contiene le card, NON i pillolons */
  z-index: 1; /* sopra pillolons che stanno a z-index 0 */
}
.pn-news-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* altezza minima per non far collassare quando filtro nasconde card */
  min-height: 495px;
  /* Le card si ancorano in alto e non si stirano: cambiando pagina del
     carosello l'altezza del blocco resta determinata dalla card piu' alta
     visibile, senza ridistribuire lo spazio verticale. Evita che il
     contenuto sotto (e i decori di sfondo a top fisso) sembrino "saltare". */
  align-content: start;
  /* align-items: start; */
}
.pn-news-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--pn-white);
  border: 4px solid var(--cat-color, #005b84);
  border-radius: 48px;
  /* transition per fade smooth senza saltare pillolons */
  transition: opacity 0.25s ease;
}
/* Quando JS attivo, card non in finestra: hidden ma layout preserved? No: display:none
   per togliere dal flow grid, altrimenti grid riserva spazio. Pillolons stanno
   in absolute fuori dal flow → non si muovono comunque. */
.pn-news-track.is-js-active .pn-news-card {
  display: none;
}
.pn-news-track.is-js-active .pn-news-card.is-in-view {
  display: flex;
}
.pn-news-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.pn-news-card-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.pn-news-card-chip-wrap {
  /* flex-shrink evita che la chip si schiacci negli spazi stretti del top card */
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   CHIP CARD NEWS — resa "selected pieno" del Figma 656:17426.
   I colori brand arrivano dai token generati (--variant-{ns}-*, vedi ADR 0007).
   Magma di default rende la chip selected con SFONDO BIANCO + icona colorata;
   il Figma la vuole con SFONDO PIENO brand + testo chiaro. Questa differenza
   NON e' un colore brand (quelli li danno i token) ma una resa visiva diversa,
   quindi va espressa con override delle custom property pubbliche --mds-chip-*.
   Centralizzato qui (non inline su card.php) e pilotato da [data-brand] sull'article.

   Namespace token per categoria (il campo ACF category_color e' un select
   ristretto ai colori del registro — vedi inc/design-registry.php):
     data-brand="primary"   -> blu   (--variant-primary-*)
     data-brand="secondary" -> verde (--variant-secondary-*) - testo su seed = -03
     data-brand="tertiary"  -> rosa  (--variant-tertiary-*)
     data-brand="info"      -> azzurro (--primary-light-01 + --variant-primary-02)
     data-brand="aqua"      -> aqua (--aqua-dark-*)

   I valori sono RGB triplet: vanno wrappati in rgb() (vedi design-tokens.md).
   ───────────────────────────────────────────────────────────────────────── */

/* NB: .pn-news-card-chip (chip dentro la card) e .pn-news-chip (chip filtro
   archivio) sono entrambi <mds-chip>, ma restano separati per contesto e stato. */

/* Default = primary (blu). Sovrascritto da [data-brand] sotto. */
.pn-news-card[data-brand] .pn-news-card-chip {
  --pn-chip-seed: var(--variant-primary);
  --pn-chip-contrast: var(--variant-primary-10);
}
.pn-news-card[data-brand="secondary"] .pn-news-card-chip {
  --pn-chip-seed: var(--variant-secondary);
  --pn-chip-contrast: var(
    --variant-secondary-03
  ); /* verde: testo scuro su seed chiaro */
}
.pn-news-card[data-brand="tertiary"] .pn-news-card-chip {
  --pn-chip-seed: var(--variant-tertiary);
  --pn-chip-contrast: var(--variant-tertiary-10);
}
.pn-news-card[data-brand="info"] .pn-news-card-chip {
  --pn-chip-seed: var(--primary-light-01-rgb);
  --pn-chip-contrast: var(--variant-primary-02);
}
.pn-news-card[data-brand="aqua"] .pn-news-card-chip {
  --pn-chip-seed: var(--aqua-dark);
  --pn-chip-contrast: var(--aqua-dark-10);
}

/* Chip categoria "selected": sfondo pieno seed, testo/icona-fill = contrast,
   icona bg = contrast (cerchietto chiaro), border = seed. */
.pn-news-card-chip--cat {
  --mds-chip-background: rgb(var(--pn-chip-seed));
  --mds-chip-color: rgb(var(--pn-chip-contrast));
  --mds-chip-border: rgb(var(--pn-chip-seed));
  --mds-chip-icon-background: rgb(var(--pn-chip-contrast));
  --mds-chip-icon-color: rgb(var(--pn-chip-seed));
}

/* Chip data "not selected": sfondo bianco, border+testo = seed,
   icona bg = seed, icona fill = bianco. Per il verde il testo/icona-fill
   usa il contrast scuro (leggibilita'). */
.pn-news-card-chip--date {
  --mds-chip-background: #ffffff;
  --mds-chip-color: rgb(var(--pn-chip-seed));
  --mds-chip-border: rgb(var(--pn-chip-seed));
  --mds-chip-icon-background: rgb(var(--pn-chip-seed));
  --mds-chip-icon-color: #ffffff;
}
.pn-news-card[data-brand="secondary"] .pn-news-card-chip--date {
  --mds-chip-color: rgb(var(--variant-secondary-03));
  --mds-chip-icon-color: rgb(var(--variant-secondary-03));
}

/* Freccia "leggi" card news: <mds-button> cerchio 36x36, bg brand dark, icona bianca.
   Figma 191:5149 / 110:15070. */
.pn-news-card-link {
  flex-shrink: 0;
  --mds-button-background: rgb(var(--pn-chip-dark, var(--variant-primary-03)));
  --mds-button-background-hover: rgb(
    var(--pn-chip-dark, var(--variant-primary-03))
  );
  --mds-button-border-color: rgb(
    var(--pn-chip-dark, var(--variant-primary-03))
  );
  --mds-button-color: #ffffff;
  --mds-button-radius: 1000px;
}
.pn-news-card[data-brand] .pn-news-card-link {
  --pn-chip-dark: var(--variant-primary-03);
}
.pn-news-card[data-brand="secondary"] .pn-news-card-link {
  --pn-chip-dark: var(--variant-secondary-03);
}
.pn-news-card[data-brand="tertiary"] .pn-news-card-link {
  --pn-chip-dark: var(--variant-tertiary-03);
}
.pn-news-card[data-brand="info"] .pn-news-card-link {
  --pn-chip-dark: var(--variant-primary-02);
}
.pn-news-card[data-brand="aqua"] .pn-news-card-link {
  --pn-chip-dark: var(--aqua-dark);
}

/* Media: 139px height, radius 48px come card */
.pn-news-card-media {
  width: 100%;
  height: 139px;
  border-radius: 48px;
  overflow: hidden;
  background: #d9d9d9;
}
.pn-news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titolo Roboto Bold 24/32, bordo bottom 2px cat-color */
.pn-news-card-titolo {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  /* Titoli reali da 2 o 3 righe. Altezza FISSA = 3 righe (3 x 32px) cosi' il
     border-bottom (la "riga" colorata) cade ESATTAMENTE alla stessa quota su
     tutte le card, indipendentemente dalla lunghezza del titolo. box-sizing
     border-box: l'altezza include padding+bordo. flex + flex-end: il testo si
     appoggia in basso, attaccato alla riga; lo spazio vuoto resta sopra. */
  box-sizing: border-box;
  height: calc(32px * 3 + 4px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--cat-color, #005b84);
  border-bottom: 2px solid var(--cat-color, #005b84);
  padding-bottom: 4px;
  margin: 0;
  min-height: 4.5em; /* ~3 righe */
}
.pn-news-card-titolo a {
  color: inherit;
  text-decoration: none;
}

/* Excerpt Montserrat Regular 20/32, color #282828 */
.pn-news-card-excerpt {
  font-family: "Montserrat", var(--pn-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: #282828;
  margin: 0;
}
.pn-news-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.pn-news-cta-wrap {
  display: flex;
  justify-content: center;
}
/* .pn-news-cta colore gestito dalla regola condivisa CTA home (sopra) */

/* ==========================================================================
   PAGINA NEWS - Figma 205:8384
   ========================================================================== */
.news-listing {
  padding-bottom: 0;
}

.pn-news-page-hero {
  padding: 160px 80px 0;
}

.news-listing--template .pn-news-page-hero {
  padding: 0;
}

.pn-news-page-title-wrap {
  display: flex;
  align-items: center;
  min-height: 150px;
  margin-bottom: 72px;
}

.pn-news-page-title {
  font-family: "Montserrat", var(--pn-font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 48px;
  color: var(--pn-brand-blu);
  margin: 0;
}

.pn-news-featured-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 24px 24px 24px 48px;
  border: 4px solid var(--pn-brand-blu);
  border-radius: 60px;
  background: var(--pn-white);
}

.pn-news-featured-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 48px 0;
}

.pn-news-featured-label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 20px;
  border-radius: 100px;
  background: var(--pn-brand-blu);
  color: #e7f8ff;
  font-family: "Karla", var(--pn-font-body);
  font-size: 14px;
  line-height: 20px;
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 1.5px rgba(0, 0, 0, 0.15);
}

.pn-news-featured-title {
  max-width: 580px;
  margin: 0;
  color: #004b79;
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 48px;
}

.pn-news-featured-title a {
  color: inherit;
  text-decoration: none;
}

.pn-news-featured-abstract {
  max-width: 580px;
  margin: 0;
  color: #666666;
  font-family: "Karla", var(--pn-font-body);
  font-size: 16px;
  line-height: 24px;
}

.pn-news-featured-button {
  --mds-button-background: transparent;
  --mds-button-border-color: var(--pn-brand-blu-dark);
  --mds-button-border-width: 2px;
  --mds-button-color: var(--pn-brand-blu-dark);
  --mds-button-font-size: 24px;
  --mds-button-font-weight: 700;
  --mds-button-height: 56px;
  --mds-button-line-height: 32px;
  --mds-button-padding-x: 34px;
  --mds-button-padding-y: 10px;
  --mds-button-radius: 1000px;
  --mds-button-gap: 8px;
  font-family: "Roboto", var(--pn-font-heading);
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}
.pn-news-featured-button:hover,
.pn-news-featured-button:focus-visible {
  --mds-button-background: transparent;
  --mds-button-border-color: var(--pn-brand-blu);
  --mds-button-color: var(--pn-brand-blu);
  filter: brightness(0.94);
  transform: translateY(-1px);
}
.pn-news-featured-button::part(label) {
  font-family: "Roboto", var(--pn-font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.pn-news-featured-button mds-icon {
  width: 24px;
  height: 24px;
  --mds-icon-color: currentColor;
}

.pn-news-featured-media {
  min-height: 424px;
  height: 100%;
  border-radius: 48px;
  overflow: hidden;
  background: #d9d9d9;
}

.pn-news-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-news-archive {
  max-width: none;
  padding: 80px;
  position: relative;
  /* niente overflow:hidden qui: il decoro pillolons di sfondo dentro
   * .pn-news-archive-grid-wrap deve poter sbordare edge-to-edge con 100vw.
   * Eventuale scroll orizzontale parassita e' bloccato dal body globale. */
}

.news-listing--template .pn-news-archive {
  padding-left: 0;
  padding-right: 0;
}

.pn-news-archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding: 20px 24px;
  border-radius: 1000px;
  border: 1px solid rgb(var(--tone-neutral-08, 231 231 231));
  background: rgb(var(--tone-neutral-10, 255 255 255));
  position: relative;
  z-index: 2;
}

.pn-news-archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px;
  border-radius: 1000px;
  background: rgb(var(--variant-primary-09, 199 238 255));
}

.pn-news-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 248px;
  margin-left: auto;
}

.news-listing--template .pn-news-search {
  gap: 0;
}

.pn-news-search-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 6px 0 14px;
  border: 2px solid var(--tone-neutral-07, #d4d4d4);
  border-radius: 100px;
  background: var(--pn-white);
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 1.5px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Icona ricerca: solo lente blu, senza cerchio di sfondo.
   Usata da News e ricerca partner/spoke (stesse classi).
   ========================================================================== */
.pn-news-search-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgb(var(--variant-primary, 0 91 132)) !important;
  --mds-icon-color: rgb(var(--variant-primary, 0 91 132)) !important;
  --mds-icon-size: 22px !important;
  line-height: 0 !important; /* Azzera totalmente lo spazio verticale del testo */
  letter-spacing: normal !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Intercettiamo anche l'eventualità che l'icona sia un tag figlio nascosto */
.pn-news-search-icon > * {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 auto !important;
  line-height: 0 !important;
  padding: 0 !important;
}
.pn-news-search-input {
  width: 190px;
  flex: 1 1 auto;
  height: 32px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tone-neutral-05, #717171);
  font-family: "Karla", var(--pn-font-body);
  font-size: 14px;
  line-height: 20px;
  padding: 0;
  outline: none;
  box-shadow: none;
}

.news-listing--template .pn-news-search-input {
  width: 190px;
}

.pn-news-search-input:focus {
  border-color: var(--pn-brand-blu);
}

.pn-news-search:focus-within .pn-news-search-field {
  border-color: var(--pn-brand-blu);
  box-shadow: 0 0 0 3px rgba(0, 91, 132, 0.14);
}

.pn-news-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: 1000px;
  background: rgb(var(--tone-neutral-10, 255 255 255));
  border: 1px solid rgb(var(--tone-neutral-08, 231 231 231));
  color: rgb(var(--variant-primary-02, 0 69 101));
  font-family: "Karla", var(--pn-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
}
.pn-news-active-filters[hidden] {
  display: none;
}
.pn-news-active-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}
.pn-news-active-label {
  color: rgb(var(--tone-neutral-04, 82 82 82));
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pn-news-active-chip {
  --active-label-color: rgb(var(--variant-tertiary, 173 70 147));
  --mds-chip-background: #ffffff;
  --mds-chip-color: var(--active-label-color);
  --mds-chip-border: rgb(var(--variant-tertiary, 173 70 147));
  --mds-chip-icon-background: rgb(var(--variant-tertiary, 173 70 147));
  --mds-chip-icon-color: #ffffff;
  --mds-chip-shadow: 0 1px 3px rgba(173, 70, 147, 0.14);

  cursor: pointer;
}

.pn-news-chip,
.pn-news-active-chip,
.pn-eventi-archive-filter,
.pn-partner-archive-filter,
.pn-eventi-active-chip,
.pn-news-chip::part(label),
.pn-news-chip::part(text),
.pn-news-chip::part(content),
.pn-news-chip::part(button),
.pn-news-active-chip::part(label),
.pn-news-active-chip::part(text),
.pn-news-active-chip::part(content),
.pn-news-active-chip::part(button),
.pn-eventi-archive-filter::part(label),
.pn-eventi-archive-filter::part(text),
.pn-eventi-archive-filter::part(content),
.pn-eventi-archive-filter::part(button),
.pn-partner-archive-filter::part(label),
.pn-partner-archive-filter::part(text),
.pn-partner-archive-filter::part(content),
.pn-partner-archive-filter::part(button),
.pn-eventi-active-chip::part(label),
.pn-eventi-active-chip::part(text),
.pn-eventi-active-chip::part(content),
.pn-eventi-active-chip::part(button) {
  text-decoration: none !important;
}

.pn-news-active-chip--category {
  --active-label-color: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-color: var(--active-label-color);
  --mds-chip-border: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-icon-background: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-icon-color: #ffffff;
  --mds-chip-shadow: 0 1px 3px rgba(0, 91, 132, 0.1);
}
.pn-news-active-chip--category[data-brand="secondary"] {
  --active-label-color: rgb(var(--variant-secondary-03, 75 81 20));
}
.pn-news-active-chip--category[data-brand="tertiary"] {
  --active-label-color: rgb(var(--variant-tertiary, 173 70 147));
}
.pn-news-active-chip--category[data-brand="info"] {
  --active-label-color: rgb(var(--variant-primary-03, 0 82 120));
}
.pn-news-active-chip--category[data-brand="aqua"] {
  --active-label-color: rgb(var(--aqua-dark, 16 114 103));
}
.pn-news-active-reset {
  margin-left: auto;
  --mds-button-radius: 1000px;
}

/* Wrapper che contiene grid + decoro pillolons di sfondo.
 * Posizione relative: ancoraggio per il pillolons in absolute che vive dietro.
 * Padding verticale per dare aria al decoro che sborda sopra/sotto le card. */
.pn-news-archive-grid-wrap {
  position: relative;
  padding: 48px 0;
}

/* Decoro pillolons posizionato come SFONDO della grid: assoluto, full-viewport
 * (esce dal container 1280 con 100vw + margin negativo), z-index basso, sotto
 * alle card. Le card lo coprono parzialmente al centro mentre il decoro
 * sborda oltre i lati arrivando edge-to-edge.
 * overflow:visible serve a sovrascrivere il default `.pn-home-pillolons { overflow:hidden }`
 * che altrimenti clippa le pillole interne al box (1280 del container article). */
.pn-news-archive-grid-wrap > .pn-home-pillolons {
  position: absolute;
  inset: 0;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  padding: 0;
  z-index: 0;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
}

.pn-news-archive.has-no-results .pn-news-archive-grid-wrap {
  display: none;
}

.pn-news-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
  position: relative;
  z-index: 1;
}

.pn-news-archive.is-loading .pn-news-archive-grid {
  opacity: 0.45;
  pointer-events: none;
}

.pn-news-archive-empty {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 48px auto 24px;
  padding: 32px 40px;
  border: 1px solid rgb(var(--tone-neutral-08, 231 231 231));
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(0, 82, 120, 0.08);
  color: var(--pn-brand-blu);
  font-family: "Montserrat", var(--pn-font-body);
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}

.pn-news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  margin-top: 40px;
}

/* Paginator news - override custom properties Magma per matchare Figma 465:6284.
 * API custom properties supportate (vedi node_modules/@maggioli-design-system/magma/
 * dist/components/mds-paginator-item2.js):
 *   --mds-paginator-background                  wrapper esterno
 *   --mds-paginator-item-background[-hover|-selected|-disabled]
 *   --mds-paginator-item-color[-hover|-selected|-disabled]
 *   --mds-paginator-item-shadow[-hover|-selected|-disabled]
 *   --mds-paginator-item-size                   altezza/larghezza item
 *   --mds-paginator-item-radius                 raggio item
 *
 * Figma token reali (Tone/Neutral/09 = #f3f3f3, Tone/Neutral/02 = #282828,
 * variant-primary/02 = #004565, Tone/Neutral/seed = #ffffff). */
.pn-news-mds-paginator {
  --mds-paginator-background: var(--tone-neutral-09, #f3f3f3);

  /* Stato base (pagine non selezionate): pill grigio chiaro + testo scuro */
  --mds-paginator-item-background: var(--tone-neutral-09, #f3f3f3);
  --mds-paginator-item-color: var(--tone-neutral-02, #282828);

  /* Hover: scurisce leggermente il grigio (default Magma) */
  --mds-paginator-item-background-hover: var(--tone-neutral-08, #e5e5e5);
  --mds-paginator-item-color-hover: var(--tone-neutral-02, #282828);

  /* Stato selected: blu scuro brand + testo bianco + drop-shadow leggera */
  --mds-paginator-item-background-selected: rgb(
    var(--variant-primary-02, 0 69 101)
  );
  --mds-paginator-item-color-selected: var(--pn-white, #ffffff);
  --mds-paginator-item-shadow-selected: 0 1px 1.5px rgba(0, 0, 0, 0.15);

  --mds-paginator-item-size: 36px;
  --mds-paginator-item-radius: 200px;

  max-width: 100%;
}

/* ==========================================================================
   Pillolons: decoro full-width dietro le card news (Figma 191:5134)
   2 righe di "pillole" orizzontali che attraversano tutta la pagina.
   Posizionato in absolute dentro .pn-news (relative). z-index 0 → sotto le card.
   ========================================================================== */
.pn-news {
  position: relative;
  overflow: hidden;
}
.pn-news-inner {
  position: relative;
  z-index: 1;
}

.pn-news-pillolons {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  padding: 128px 0;
}
.pn-news-pillolons-row {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
}
.pillolone {
  flex-shrink: 0;
  height: 150px;
  border-radius: 1000px;
}
.pillolone--flex {
  flex: 1 0 0;
  min-width: 1px;
}

/* Pillola che esce dal viewport a sinistra (parte dal bordo, rounded SOLO destra) */
.pillolone--end-right {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  /* Sporge fuori sx per andare oltre il viewport */
  margin-left: -40px;
  padding-left: 40px;
  box-sizing: content-box;
}

/* Pillola che esce dal viewport a destra (finisce al bordo, rounded SOLO sinistra) */
.pillolone--end-left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -40px;
}

/* Varianti fill */
.pillolone--blu-fill {
  background: #005b84;
}
.pillolone--verde-fill {
  background: #d0db71;
}
.pillolone--viola-fill {
  background: #ad4693;
}

/* Varianti outline 8px (bg bianco + border colorato) */
.pillolone--blu-outline {
  background: #ffffff;
  border: 8px solid #005b84;
}
.pillolone--verde-outline {
  background: #ffffff;
  border: 8px solid #d0db71;
}
.pillolone--viola-outline {
  background: #ffffff;
  border: 8px solid #ad4693;
}

/* ==========================================================================
   HOMEPAGE PRE-FOOTER PILLOLONS - Figma 656:17467
   ========================================================================== */
.pn-home-pillolons {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 128px 0;
  overflow: hidden;
  background: transparent;
}

/* Variante "faded": stesso decoro ma attenuato al 30% di opacita'.
 * Usata sotto l'archivio news della pagina /news/, dove il decoro deve
 * fare da sfondo morbido senza competere con le card. Si attiva passando
 * `opacity` < 1 al template-part `template-parts/home/pillolons.php`. */
.pn-home-pillolons--faded {
  opacity: 0.3;
}

.pn-home-pillolons-row {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.pn-home-pillolons-pill {
  display: block;
  height: 150px;
  flex-shrink: 0;
  border-radius: 1000px;
  box-sizing: border-box;
}

.pn-home-pillolons-pill--green-left {
  width: 144px;
  background: var(--pn-brand-verde);
  border-radius: 0 1000px 1000px 0;
}

.pn-home-pillolons-pill--blue-left {
  width: 184px;
  background: var(--pn-brand-blu);
  border-radius: 0 1000px 1000px 0;
}

.pn-home-pillolons-pill--magenta-right {
  flex: 1 0 0;
  min-width: 80px;
  background: var(--pn-brand-rosa);
  border-radius: 1000px 0 0 1000px;
}

.pn-home-pillolons-pill--blue-fill {
  background: var(--pn-brand-blu);
}
.pn-home-pillolons-pill--green-fill {
  background: var(--pn-brand-verde);
}
.pn-home-pillolons-pill--magenta-fill {
  background: var(--pn-brand-rosa);
}

.pn-home-pillolons-pill--white-blue {
  background: var(--pn-white);
  border: 8px solid var(--pn-brand-blu);
}

.pn-home-pillolons-pill--white-magenta {
  background: var(--pn-white);
  border: 8px solid var(--pn-brand-rosa);
}

.pn-home-pillolons-pill--circle {
  width: 150px;
}
.pn-home-pillolons-pill--wide-blue {
  width: 359px;
}
.pn-home-pillolons-pill--short-blue {
  width: 188px;
}
.pn-home-pillolons-pill--medium-green {
  width: 231px;
}
.pn-home-pillolons-pill--long-magenta {
  width: 313px;
}
.pn-home-pillolons-pill--small-magenta {
  width: 152px;
}
.pn-home-pillolons-pill--long-blue {
  width: 286px;
}
.pn-home-pillolons-pill--small-green {
  width: 185px;
}

/* ==========================================================================
   SEZIONE EVENTI - Figma 656:17458 (home) + 443:56223 (single)
   ==========================================================================
   Card pillola colorate con immagine tonda + chip MDS. 
   I token --variant-primary/-secondary/-tertiary e --aqua-dark sono generati
   in /assets/css/tokens/css/colors-rgb-perfetto.css.
   ========================================================================== */

:root {
  --pn-evento-aqua-bg: var(--aqua-dark, 16 114 103);
  --pn-evento-aqua-fg: var(--aqua-dark-10, 221 250 247);
  --pn-evento-aqua-chip: var(--aqua-dark, 16 114 103);
  --pn-evento-violet-bg: var(--variant-tertiary, 173 70 147);
  --pn-evento-violet-fg: var(--variant-tertiary-10, 250 243 248);
  --pn-evento-violet-chip: var(--variant-tertiary, 173 70 147);
  --pn-evento-info-bg: var(--status-info, 35 178 225);
  --pn-evento-info-fg: var(--status-info-01, 5 29 37);
  --pn-evento-info-chip: var(--status-info-03, 14 83 106);
}

.pn-eventi {
  padding: 80px 80px 0;
  background: transparent;
  position: relative;
  z-index: 1;
}
.pn-eventi-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.pn-eventi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  margin-bottom: 48px;
  border-bottom: 2px solid rgb(var(--variant-primary, 0 91 132));
  padding-bottom: 16px;
}
.pn-eventi-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pn-eventi-nav {
  display: none;
  gap: 8px;
}
.pn-eventi[data-eventi-carousel-init="1"] .pn-eventi-nav {
  display: flex;
}
.pn-eventi-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 10px;
  background: rgb(var(--variant-primary, 0 91 132));
  border: 2px solid rgb(var(--variant-primary, 0 91 132));
  border-radius: 1000px;
  color: var(--pn-white);
  cursor: pointer;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.pn-eventi-nav-btn:not(:disabled):hover {
  background: rgb(var(--variant-primary-04, 0 82 120));
  border-color: rgb(var(--variant-primary-04, 0 82 120));
  box-shadow: 0 8px 18px rgba(0, 82, 120, 0.14);
  transform: translateY(-1px);
}
.pn-eventi-nav-btn:not(:disabled):active {
  box-shadow: 0 2px 6px rgba(0, 82, 120, 0.12);
  transform: translateY(0);
}
.pn-eventi-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.pn-eventi-nav-btn:focus-visible {
  outline: 3px solid rgb(var(--variant-secondary, 208 219 113));
  outline-offset: 3px;
}
.pn-eventi-nav-btn mds-icon {
  width: 24px;
  height: 24px;
  --mds-icon-color: #ffffff;
}
.pn-eventi-nav-btn mds-icon::part(svg) {
  fill: #ffffff;
}
.pn-eventi-titolo {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 48px;
  color: rgb(var(--variant-primary, 0 91 132));
  text-transform: uppercase;
  margin: 0;
}

/* Track orizzontale fallback senza JS; con JS attivo le frecce prev/next
   mostrano una card alla volta, stesso pattern logico della sezione News. */
.pn-eventi-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  width: max-content;
  transition: transform 0.32s ease;
  will-change: transform;
}
.pn-eventi-inner {
  overflow: hidden;
}
.pn-eventi-track {
  overflow-x: visible;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.pn-eventi-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari/WebKit */
  width: 0;
  height: 0;
}
.pn-eventi-track > .pn-evento-card {
  flex: 0 0 880px;
  max-width: 880px;
}
.pn-eventi-track.is-js-active {
  overflow: visible;
}
.pn-eventi-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* Card pillola: colore di sfondo via data-variant. */
.pn-evento-card {
  --pn-event-row-bg: var(--cat-bg-color, "#005b84");
  /* --pn-card-chip-border: var(--cat-bg-color, "#005b84"); */
  --pn-card-chip-border: #005b84;

  background: var(--pn-event-row-bg);
  color: #005b84;
  border-radius: 1000px;
  padding: 48px 96px 48px 48px;
  position: relative;
  isolation: isolate;
}

.pn-evento-card-link {
  display: grid;
  grid-template-columns: 239px 1fr;
  gap: 48px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.pn-evento-card-link:hover,
.pn-evento-card-link:focus-visible {
  color: inherit;
  /* L'effetto hover globale dei bottoni qui disegnerebbe un'ombra RETTANGOLARE
     (il link e' il grid interno, senza radius): lo spegniamo e lo spostiamo
     sulla card pillola, che il radius ce l'ha. */
  box-shadow: none;
  filter: none;
  transform: none;
}
.pn-evento-card {
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.pn-evento-card:has(.pn-evento-card-link:hover),
.pn-evento-card:has(.pn-evento-card-link:focus-visible) {
  box-shadow: 0 8px 18px rgba(0, 82, 120, 0.14);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .pn-evento-card {
    transition-duration: 0.01ms;
  }
  .pn-evento-card:has(.pn-evento-card-link:hover),
  .pn-evento-card:has(.pn-evento-card-link:focus-visible) {
    transform: none;
  }
}

.pn-evento-card-media {
  width: 239px;
  height: 239px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pn-evento-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pn-evento-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 539px;
}
.pn-evento-card-titolo {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: inherit;
  border-bottom: 2px solid currentColor;
  padding-bottom: 8px;
  margin: 0;
}
.pn-evento-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Chip meta (data / luogo): sfondo bianco, testo + icona col seed della
   variant card. Magma legge --mds-chip-* sull'host e li propaga nello
   Shadow DOM. */
.pn-evento-card-chip {
  flex-shrink: 0;
}
.pn-evento-card-chip--meta {
  --mds-chip-background: #ffffff;
  --mds-chip-color: var(--pn-card-chip-border);
  --mds-chip-border: var(--pn-card-chip-border);
  --mds-chip-icon-background: var(--pn-card-chip-border);
  --mds-chip-icon-color: #ffffff;
}
/* Chip categoria: pillola piena bianca con testo+icona dello stesso colore
   della variant card (piu' vistosa delle meta). */
.pn-evento-card-chip--cat {
  --mds-chip-background: #ffffff;
  --mds-chip-color: var(--pn-card-chip-border);
  --mds-chip-border: #ffffff;
  --mds-chip-icon-background: var(--pn-card-chip-border);
  --mds-chip-icon-color: #ffffff;
}
.pn-evento-card-excerpt {
  font-family: "Montserrat", var(--pn-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: inherit;
  margin: 0;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   ARCHIVIO EVENTI - /eventi/ (archive-pn_evento.php)
   ==========================================================================
   Featured prossimo evento + toolbar filtri/search + lista compatta Figma.
   ========================================================================== */
.archive-eventi .pn-eventi-archive-article {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0 80px;
}
.pn-eventi-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
  gap: 48px;
  align-items: stretch;
  margin: 48px 0 40px;
  padding: 24px 24px 24px 48px;
  border-radius: 60px;
  background: rgb(var(--variant-primary, 0 91 132));
  color: #ffffff;
  overflow: hidden;
}
.pn-eventi-featured-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
}
.pn-eventi-featured-eyebrow {
  margin: 0 0 16px;
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  color: rgb(var(--tone-neutral-06, 170 170 170));
}
.pn-eventi-featured-title {
  max-width: 680px;
  margin: 0;
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 48px;
  color: #ffffff;
}
.pn-eventi-featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 24px;
  font-family: "Karla", var(--pn-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  color: rgb(var(--status-info, 35 178 225));
}
.pn-eventi-featured-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pn-eventi-featured-meta-item mds-icon {
  --mds-icon-size: 20px;
}
.archive-eventi .pn-eventi-featured-meta-item mds-icon {
  color: rgb(var(--status-info, 35 178 225));
  --mds-icon-color: rgb(var(--status-info, 35 178 225));
}
.archive-eventi .pn-eventi-featured-meta-item mds-icon::part(svg) {
  fill: rgb(var(--status-info, 35 178 225));
}
.pn-eventi-featured-text {
  max-width: 680px;
  margin: 24px 0 0;
  font-family: "Karla", var(--pn-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.9);
}
.pn-eventi-featured-cta {
  align-self: flex-start;
  margin-top: 32px;
  --mds-button-background: var(--primary-light-01);
  --mds-button-border-color: var(--primary-light-01);
  --mds-button-color: #ffffff;
  border-radius: 1000px;
}
.pn-eventi-featured-media {
  min-height: 320px;
  border-radius: 48px;
  overflow: hidden;
  background: rgb(var(--variant-primary-03, 0 81 124));
}
.pn-eventi-featured-img,
.pn-eventi-featured-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}
.pn-eventi-featured-img {
  object-fit: cover;
}
.pn-eventi-featured-placeholder {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    rgb(var(--variant-primary-03, 0 81 124));
}
.pn-eventi-archive-toolbar,
.pn-partner-archive-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0 0 32px;
  padding: 20px 24px;
  border-radius: 1000px;
  border: 1px solid rgb(var(--tone-neutral-08, 231 231 231));
  background: rgb(var(--tone-neutral-10, 255 255 255));
}
.pn-eventi-archive-filters,
.pn-partner-archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px;
  border-radius: 1000px;
  background: rgb(var(--variant-primary-09, 199 238 255));
}
.pn-eventi-archive-filter,
.pn-partner-archive-filter {
  --cat-active-color: rgb(var(--variant-primary-10, 231 248 255));
  --cat-label-color: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-background: #ffffff;
  --mds-chip-color: var(--cat-label-color);
  --mds-chip-border: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-icon-background: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-icon-color: #ffffff;
  --mds-chip-shadow:
    0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1.5px rgba(0, 0, 0, 0.15);

  flex-shrink: 0;
  cursor: pointer;
}
.pn-eventi-archive-filter[data-eventi-category=""] {
  --cat-label-color: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-color: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-border: rgb(var(--tone-neutral-08, 231 231 231));
}
.pn-eventi-archive-filter[data-brand="secondary"] {
  --cat-active-color: rgb(var(--variant-secondary-03, 75 81 20));
  --cat-label-color: rgb(var(--variant-secondary-03, 75 81 20));
}
.pn-eventi-archive-filter[data-brand="tertiary"] {
  --cat-active-color: rgb(var(--variant-tertiary-10, 250 243 248));
  --cat-label-color: rgb(var(--variant-tertiary, 173 70 147));
}
.pn-eventi-archive-filter[data-brand="info"],
.pn-eventi-archive-filter[data-brand="aqua"] {
  --cat-active-color: rgb(var(--variant-primary-02, 0 69 101));
  --cat-label-color: rgb(var(--variant-primary-03, 0 82 120));
}
.pn-eventi-archive-filter[data-brand="aqua"] {
  --cat-active-color: rgb(var(--aqua-dark-10, 221 250 247));
  --cat-label-color: rgb(var(--aqua-dark, 16 114 103));
}
.pn-eventi-archive-filter:hover,
.pn-eventi-archive-filter:focus-visible {
  --mds-chip-background: rgb(var(--variant-primary-10, 231 248 255));
}
.pn-eventi-archive-filter[data-brand="secondary"]:hover,
.pn-eventi-archive-filter[data-brand="secondary"]:focus-visible {
  --mds-chip-background: rgb(var(--variant-secondary-10, 245 247 223));
}
.pn-eventi-archive-filter[data-brand="tertiary"]:hover,
.pn-eventi-archive-filter[data-brand="tertiary"]:focus-visible {
  --mds-chip-background: rgb(var(--variant-tertiary-10, 250 243 248));
}
.pn-eventi-archive-filter[data-brand="info"]:hover,
.pn-eventi-archive-filter[data-brand="info"]:focus-visible {
  --mds-chip-background: rgb(var(--variant-primary-10, 231 248 255));
}
.pn-eventi-archive-filter[data-brand="aqua"]:hover,
.pn-eventi-archive-filter[data-brand="aqua"]:focus-visible {
  --mds-chip-background: rgb(var(--aqua-dark-10, 221 250 247));
}
.pn-eventi-archive-filter.is-active {
  --mds-chip-background: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-color: var(--cat-active-color);
  --mds-chip-border: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-icon-background: var(--cat-active-color);
  --mds-chip-icon-color: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-shadow: 0 1px 3px rgba(0, 91, 132, 0.14);
}
.pn-eventi-archive-filter[data-eventi-category=""].is-active {
  --mds-chip-background: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-border: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-color: #ffffff;
}
.pn-eventi-archive-filter[data-brand="secondary"].is-active {
  --mds-chip-shadow: 0 1px 3px rgba(137, 149, 38, 0.14);
}
.pn-eventi-archive-filter[data-brand="tertiary"].is-active {
  --mds-chip-shadow: 0 1px 3px rgba(173, 70, 147, 0.14);
}
.pn-eventi-archive-filter[data-brand="info"].is-active,
.pn-eventi-archive-filter[data-brand="aqua"].is-active {
  --mds-chip-shadow: 0 1px 3px rgba(15, 167, 205, 0.14);
}
.pn-partner-archive-filter[data-eventi-category=""] {
  --cat-label-color: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-color: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-border: rgb(var(--tone-neutral-08, 231 231 231));
}
.pn-partner-archive-filter[data-brand="secondary"] {
  --cat-active-color: rgb(var(--variant-secondary-03, 75 81 20));
  --cat-label-color: rgb(var(--variant-secondary-03, 75 81 20));
}
.pn-partner-archive-filter[data-brand="tertiary"] {
  --cat-active-color: rgb(var(--variant-tertiary-10, 250 243 248));
  --cat-label-color: rgb(var(--variant-tertiary, 173 70 147));
}
.pn-partner-archive-filter[data-brand="info"],
.pn-partner-archive-filter[data-brand="aqua"] {
  --cat-active-color: rgb(var(--variant-primary-02, 0 69 101));
  --cat-label-color: rgb(var(--variant-primary-03, 0 82 120));
}
.pn-partner-archive-filter[data-brand="aqua"] {
  --cat-active-color: rgb(var(--aqua-dark-10, 221 250 247));
  --cat-label-color: rgb(var(--aqua-dark, 16 114 103));
}
.pn-partner-archive-filter:hover,
.pn-partner-archive-filter:focus-visible {
  --mds-chip-background: rgb(var(--variant-primary-10, 231 248 255));
}
.pn-partner-archive-filter[data-brand="secondary"]:hover,
.pn-partner-archive-filter[data-brand="secondary"]:focus-visible {
  --mds-chip-background: rgb(var(--variant-secondary-10, 245 247 223));
}
.pn-partner-archive-filter[data-brand="tertiary"]:hover,
.pn-partner-archive-filter[data-brand="tertiary"]:focus-visible {
  --mds-chip-background: rgb(var(--variant-tertiary-10, 250 243 248));
}
.pn-partner-archive-filter[data-brand="info"]:hover,
.pn-partner-archive-filter[data-brand="info"]:focus-visible {
  --mds-chip-background: rgb(var(--variant-primary-10, 231 248 255));
}
.pn-partner-archive-filter[data-brand="aqua"]:hover,
.pn-partner-archive-filter[data-brand="aqua"]:focus-visible {
  --mds-chip-background: rgb(var(--aqua-dark-10, 221 250 247));
}
.pn-partner-archive-filter.is-active {
  --mds-chip-background: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-color: var(--cat-active-color);
  --mds-chip-border: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-icon-background: var(--cat-active-color);
  --mds-chip-icon-color: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-shadow: 0 1px 3px rgba(0, 91, 132, 0.14);
}
.pn-partner-archive-filter[data-eventi-category=""].is-active {
  --mds-chip-background: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-border: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-color: #ffffff;
}
.pn-partner-archive-filter[data-brand="secondary"].is-active {
  --mds-chip-shadow: 0 1px 3px rgba(137, 149, 38, 0.14);
}
.pn-partner-archive-filter[data-brand="tertiary"].is-active {
  --mds-chip-shadow: 0 1px 3px rgba(173, 70, 147, 0.14);
}
.pn-partner-archive-filter[data-brand="info"].is-active,
.pn-partner-archive-filter[data-brand="aqua"].is-active {
  --mds-chip-shadow: 0 1px 3px rgba(15, 167, 205, 0.14);
}

.pn-eventi-archive-search,
.pn-partner-archive-search {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  min-width: 260px;
  height: 44px;
  padding: 0 6px 0 18px;
  border-radius: 1000px;
  border: 1px solid rgb(var(--tone-neutral-08, 231 231 231));
  background: #ffffff;
}
.pn-eventi-archive-search-input,
.pn-partner-archive-search-input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Karla", var(--pn-font-body);
  font-size: 15px;
  line-height: 24px;
  color: rgb(var(--tone-neutral-01, 33 33 33));
}
.pn-eventi-archive-search-input::placeholder,
.pn-partner-archive-search-input::placeholder {
  color: rgb(var(--tone-neutral-05, 113 113 113));
}
.pn-eventi-archive-search-button,
.pn-partner-archive-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgb(var(--variant-primary, 0 91 132));
  padding: 0;
  cursor: pointer;
}
.pn-eventi-archive-search-button mds-icon,
.pn-partner-archive-search-button mds-icon {
  width: 24px;
  height: 24px;
  color: rgb(var(--variant-primary, 0 91 132));
  --mds-icon-color: rgb(var(--variant-primary, 0 91 132));
  --mds-icon-size: 22px;
}
.pn-eventi-archive-search-button mds-icon::part(svg),
.pn-partner-archive-search-button mds-icon::part(svg) {
  fill: rgb(var(--variant-primary, 0 91 132));
}
.pn-eventi-active-filters,
.pn-partner-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: 1000px;
  background: rgb(var(--tone-neutral-10, 255 255 255));
  border: 1px solid rgb(var(--tone-neutral-08, 231 231 231));
  color: rgb(var(--variant-primary-02, 0 68 109));
  font-family: "Karla", var(--pn-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
}
.pn-eventi-active-filters[hidden],
.pn-partner-active-filters[hidden] {
  display: none;
}
.pn-eventi-active-list,
.pn-partner-active-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}
.pn-eventi-active-label,
.pn-partner-active-label {
  color: rgb(var(--tone-neutral-04, 82 82 82));
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pn-eventi-active-chip {
  --active-label-color: rgb(var(--variant-tertiary, 173 70 147));
  --mds-chip-background: #ffffff;
  --mds-chip-color: var(--active-label-color);
  --mds-chip-border: rgb(var(--variant-tertiary, 173 70 147));
  --mds-chip-icon-background: rgb(var(--variant-tertiary, 173 70 147));
  --mds-chip-icon-color: #ffffff;
  --mds-chip-shadow: 0 1px 3px rgba(173, 70, 147, 0.14);

  cursor: pointer;
}
.pn-eventi-active-chip--category {
  --active-label-color: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-color: var(--active-label-color);
  --mds-chip-border: var(--cat-color, rgb(var(--variant-primary, 0 91 132)));
  --mds-chip-icon-background: var(
    --cat-color,
    rgb(var(--variant-primary, 0 91 132))
  );
  --mds-chip-icon-color: #ffffff;
  --mds-chip-shadow: 0 1px 3px rgba(0, 91, 132, 0.1);
}
.pn-eventi-active-chip--category[data-brand="secondary"] {
  --active-label-color: rgb(var(--variant-secondary-03, 75 81 20));
}
.pn-eventi-active-chip--category[data-brand="tertiary"] {
  --active-label-color: rgb(var(--variant-tertiary, 173 70 147));
}
.pn-eventi-active-chip--category[data-brand="info"] {
  --active-label-color: rgb(var(--variant-primary-03, 0 82 120));
}
.pn-eventi-active-chip--category[data-brand="aqua"] {
  --active-label-color: rgb(var(--aqua-dark, 16 114 103));
}
.pn-eventi-active-reset,
.pn-partner-active-reset {
  margin-left: auto;
  --mds-button-radius: 1000px;
}
.pn-eventi-archive-panel {
  position: relative;
  padding: 45px 50px;
  border-radius: 96px;
  border: 1px solid rgb(var(--tone-neutral-07, 212 212 212));
  background: rgb(var(--tone-neutral-08, 231 231 231));
}
.pn-eventi-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: inherit;
  background: rgba(231, 231, 231, 0.72);
  backdrop-filter: blur(2px);
}
.pn-eventi-loading span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(var(--variant-primary, 0 91 132));
  animation: pn-eventi-loading-bounce 900ms ease-in-out infinite;
}
.pn-eventi-loading span:nth-child(2) {
  background: rgb(var(--variant-secondary, 208 219 113));
  animation-delay: 120ms;
}
.pn-eventi-loading span:nth-child(3) {
  background: rgb(var(--variant-tertiary, 173 70 147));
  animation-delay: 240ms;
}
.pn-eventi-archive-ajax.is-loading .pn-eventi-loading {
  display: flex;
}
.pn-eventi-archive-ajax.is-loading .pn-eventi-archive-list {
  opacity: 0.42;
}
@keyframes pn-eventi-loading-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
}
.pn-eventi-archive-title {
  margin: 0 0 35px;
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: rgb(var(--variant-primary-02, 0 68 109));
}
.pn-eventi-archive-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pn-eventi-archive-row {
  --pn-event-row-bg: var(--cat-bg-color, "#005b84");
  --pn-event-row-badge: var(--variant-primary, 0 91 132);
  display: block;
  min-height: 120px;
  border-radius: 1000px;
  background: var(--pn-event-row-bg);
  transition:
    box-shadow 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease;
}
.pn-eventi-archive-row:has(.pn-eventi-archive-row-link:hover),
.pn-eventi-archive-row:has(.pn-eventi-archive-row-link:focus-visible) {
  box-shadow: 0 8px 18px rgba(0, 82, 120, 0.14);
  filter: brightness(0.98);
  transform: translateY(-1px);
}
.pn-eventi-archive-row-link {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  min-height: 120px;
  padding: 14px 28px 14px 16px;
  color: inherit;
  text-decoration: none;
}
.pn-eventi-archive-date {
  display: flex;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: var(--cat-color);
  color: #ffffff;
  font-family: "Roboto", var(--pn-font-heading);
  text-transform: uppercase;
}
.pn-eventi-archive-date-day {
  font-weight: 900;
  font-size: 36px;
  line-height: 36px;
}
.pn-eventi-archive-date-month {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}
.pn-eventi-archive-date-year {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}
.pn-eventi-archive-row-body {
  min-width: 0;
  align-self: center;
}
.pn-eventi-archive-row-title {
  margin: 0;
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 30px;
  line-height: 36px;
  color: rgb(var(--variant-primary-02, 0 68 109));
}
.pn-eventi-archive-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-top: 8px;
}
.pn-eventi-archive-row-chip {
  --mds-chip-background: #ffffff;
  --mds-chip-color: rgb(var(--pn-event-row-badge));
  --mds-chip-border: #ffffff;
  --mds-chip-icon-background: rgb(var(--pn-event-row-badge));
  --mds-chip-icon-color: #ffffff;
}
.pn-eventi-archive-row-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Karla", var(--pn-font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: rgb(var(--variant-primary-03, 0 82 120));
  text-transform: uppercase;
}
.pn-eventi-archive-row-location mds-icon {
  --mds-icon-color: rgb(var(--tone-neutral-06, 162 162 162));
  --mds-icon-size: 16px;
}
.pn-eventi-archive-row-location mds-icon::part(svg) {
  color: rgb(var(--tone-neutral-06, 162 162 162));
  fill: rgb(var(--tone-neutral-06, 162 162 162));
}
.pn-eventi-archive-row-excerpt {
  margin: 6px 0 0;
  font-family: "Karla", var(--pn-font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: rgb(var(--tone-neutral-02, 51 51 51));
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pn-eventi-archive-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.pn-eventi-mds-paginator {
  --mds-paginator-background: var(--tone-neutral-09, #f3f3f3);
  --mds-paginator-item-background: var(--tone-neutral-09, #f3f3f3);
  --mds-paginator-item-color: var(--tone-neutral-02, #282828);
  --mds-paginator-item-background-hover: var(--tone-neutral-08, #e5e5e5);
  --mds-paginator-item-color-hover: var(--tone-neutral-02, #282828);
  --mds-paginator-item-background-selected: rgb(
    var(--variant-primary, 0 91 132)
  );
  --mds-paginator-item-color-selected: #ffffff;
  --mds-paginator-item-shadow-selected: 0 1px 1.5px rgba(0, 0, 0, 0.15);
  --mds-paginator-item-size: 36px;
  --mds-paginator-item-radius: 200px;
}
.pn-eventi-archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  margin: 0 4px;
  border-radius: 24px;
  font-family: "Montserrat", var(--pn-font-body);
  font-weight: 600;
  font-size: 16px;
  color: rgb(var(--variant-primary, 0 91 132));
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
}
.pn-eventi-archive-pagination .page-numbers:hover,
.pn-eventi-archive-pagination .page-numbers:focus-visible {
  background: rgb(var(--variant-primary-10, 231 248 255));
  border-color: rgb(var(--variant-primary, 0 91 132));
}
.pn-eventi-archive-pagination .page-numbers.current {
  background: rgb(var(--variant-primary, 0 91 132));
  color: #ffffff;
  border-color: rgb(var(--variant-primary, 0 91 132));
}
.pn-eventi-archive-empty {
  text-align: center;
  font-family: "Montserrat", var(--pn-font-body);
  font-size: 18px;
  color: rgb(var(--variant-primary-04, 0 98 141));
  padding: 64px 0;
}
.pn-eventi-past-cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.pn-eventi-past-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 1000px;
  background: rgb(var(--variant-primary, 0 91 132));
  color: #ffffff;
  font-family: "Karla", var(--pn-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
}
.pn-eventi-past-button mds-icon {
  --mds-icon-color: currentColor;
  --mds-icon-size: 18px;
  margin-right: 8px;
}
.pn-eventi-past-button mds-icon::part(svg) {
  fill: white;
}

/* ==========================================================================
   SINGLE EVENTO - Figma 443:56223
   ========================================================================== */
.single-evento .pn-evento-article {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px 80px;
}
@media (min-width: 1280px) {
  .single-evento .pn-evento-article > .pn-page-title {
    width: auto;
    margin-left: -80px;
    margin-right: -80px;
  }
}
/* ==========================================================================
   BREADCRUMB - Forza layout orizzontale su tutti i dispositivi
   ========================================================================== */
.pn-breadcrumb {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important; /* Permette lo scroll orizzontale se il testo è troppo lungo su mobile */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0px 0 24px;
  font-family: "Karla", var(--pn-font-body);
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--tone-neutral-01, 33 33 33));
}
.pn-breadcrumb::-webkit-scrollbar {
  display: none;
}

/* Buca lo Shadow DOM di Magma per spegnere il layout mobile nativo */
.pn-breadcrumb::part(back-button) {
  display: none !important; /* Nasconde la freccia "indietro" iniettata su mobile */
}
.pn-breadcrumb::part(list) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Regole per i singoli item */
.pn-breadcrumb mds-breadcrumb-item {
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0;
}

/* Stato corrente come Figma: testo tone-neutral-05 e nessun background. */
.pn-breadcrumb mds-breadcrumb-item[selected] {
  --mds-breadcrumb-item-button-background: transparent;
  --mds-breadcrumb-item-button-background-selected: transparent;
  --mds-breadcrumb-item-button-color: rgb(var(--tone-neutral-05, 113 113 113));
  --mds-breadcrumb-item-button-color-selected: rgb(
    var(--tone-neutral-05, 113 113 113)
  );
  --mds-breadcrumb-button-background-selected: transparent;
  --mds-breadcrumb-button-color-selected: rgb(
    var(--tone-neutral-05, 113 113 113)
  );
  cursor: default;
}
/* Voce antenata non navigabile (es. "Cosa offriamo"): testo, non link.
   Non ha data-url -> non naviga; qui togliamo solo l'aspetto cliccabile. */
.pn-breadcrumb mds-breadcrumb-item.pn-breadcrumb-item--plain {
  cursor: default;
}
.pn-breadcrumb mds-breadcrumb-item::part(button),
.pn-breadcrumb mds-breadcrumb-item::part(label) {
  background: transparent !important;
  padding: 4px 16px !important;
  text-transform: none !important; /* Evita il maiuscolo forzato */
  color: inherit !important;
  font-weight: normal !important;
}

/* Fallback pre-idratazione del Web Component */
.pn-breadcrumb:not(.hydrated) mds-breadcrumb-item:not(:last-child)::after {
  content: "›";
  display: inline-block;
  margin: 0 16px;
  color: rgb(var(--tone-neutral-07, 212 212 212));
}
.pn-evento-back {
  margin: 8px 0 16px;
  --mds-button-background: transparent;
  --mds-button-border-color: transparent;
  --mds-button-color: rgb(var(--tone-neutral-06, 162 162 162));
  --mds-button-icon-color: rgb(var(--tone-neutral-06, 162 162 162));
}
.pn-evento-back::before {
  content: "←";
}
.pn-evento-back:hover {
  --mds-button-color: rgb(var(--variant-primary-04, 0 98 141));
  --mds-button-icon-color: rgb(var(--variant-primary-04, 0 98 141));
}
.pn-evento-back::before {
  content: none;
}

.pn-evento-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
  padding: 32px 0 64px;
}
.pn-evento-hero-text {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 50px 20px 50px 0px;
}
.pn-evento-titolo {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 48px;
  text-transform: uppercase;
  color: rgb(var(--variant-primary-04, 0 98 141));
  margin: 0;
}
.pn-evento-sommario {
  font-family: "Karla", var(--pn-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: rgb(var(--tone-neutral-05, 113 113 113));
  margin: 0;
}
.pn-evento-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
  margin: 8px 0 0;
  padding: 26px 30px;
  max-width: 579px;
  background: rgb(var(--variant-primary-10, 231 248 255));
  border: 1px solid rgb(var(--tone-neutral-08, 231 231 231));
  border-radius: 30px;
}
.pn-evento-meta-row {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.pn-evento-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: rgb(var(--tone-neutral-seed, 255 255 255));
}
.pn-evento-meta-icon mds-icon {
  color: rgb(var(--status-info, 35 178 225));
  --mds-icon-color: rgb(var(--status-info, 35 178 225));
}
.pn-evento-meta-icon mds-icon::part(svg) {
  fill: rgb(var(--status-info, 35 178 225));
}
.pn-evento-meta-copy {
  min-width: 0;
}
.pn-evento-meta-label {
  font-family: "Karla", var(--pn-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgb(var(--tone-neutral-05, 113 113 113));
  margin: 0;
}
.pn-evento-meta-value {
  font-family: "Karla", var(--pn-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--variant-primary-02, 0 69 101));
  margin: 0;
}
.pn-evento-hero-media {
  border: 15px solid rgb(var(--tone-neutral-seed, 255 255 255));
  border-radius: 300px 300px 40px 40px;
  overflow: hidden;
  height: 100%;
}
.pn-evento-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pn-evento-programma {
  padding: 37px 0 64px;
}
.pn-evento-programma-titolo {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 36px;
  line-height: 40px;
  text-align: center;
  color: rgb(var(--variant-primary-03, 0 82 120));
  margin: 0 0 46px;
}
.pn-evento-programma-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 828px;
}
.pn-evento-programma-item {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 87px;
  align-items: center;
  min-height: 107px;
  background: #ffffff;
  border: 1px solid rgb(var(--tone-neutral-09, 243 243 243));
  border-radius: 30px;
  padding: 21px 24px;
  box-shadow: 0 5px 7.5px rgba(0, 0, 0, 0.02);
}
.pn-evento-programma-ora {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 30px;
  line-height: 36px;
  color: rgb(var(--variant-tertiary-05, 174 70 147));
}
.pn-evento-programma-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pn-evento-programma-item-titolo {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: rgb(var(--variant-primary-02, 0 69 101));
  margin: 0;
}
.pn-evento-programma-item-desc {
  font-family: "Karla", var(--pn-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--tone-neutral-05, 113 113 113));
  margin: 0;
}

@media (max-width: 1024px) {
  .pn-news,
  .pn-eventi {
    padding: 60px 40px;
  }
  .pn-news-titolo,
  .pn-eventi-titolo {
    font-size: 36px;
    line-height: 36px;
  }
  .pn-news-grid,
  .pn-news-track,
  .pn-news-archive-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pn-eventi-track > .pn-evento-card {
    flex: 0 0 88%;
    max-width: 88%;
  }
  .pn-evento-card {
    padding: 32px 48px 32px 32px;
    border-radius: 48px;
  }
  .pn-evento-card-link {
    grid-template-columns: 160px 1fr;
    gap: 24px;
  }
  .pn-evento-card-media {
    width: 160px;
    height: 160px;
  }
  .single-evento .pn-evento-article,
  .archive-eventi .pn-eventi-archive-article {
    padding: 0 40px 60px;
  }
  .single-evento .pn-evento-article > .pn-page-title,
  .archive-eventi .pn-eventi-archive-article > .pn-page-title {
    width: auto;
    padding-right: 40px;
    padding-left: 40px;
    margin-right: -40px;
    margin-left: -40px;
  }
  .pn-eventi-featured {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px;
    border-radius: 48px;
  }
  .pn-eventi-featured-title {
    font-size: 40px;
    line-height: 44px;
  }
  .pn-eventi-featured-media {
    min-height: 280px;
    border-radius: 36px;
  }
  .pn-eventi-archive-toolbar,
  .pn-partner-archive-toolbar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 36px;
  }
  .pn-eventi-archive-search,
  .pn-partner-archive-search {
    width: 100%;
  }
  .pn-eventi-archive-panel {
    padding: 36px 28px;
    border-radius: 56px;
  }
  .pn-eventi-archive-row {
    border-radius: 44px;
  }
  .pn-eventi-archive-row-link {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .pn-eventi-archive-date {
    width: 76px;
    height: 76px;
  }
  .pn-eventi-archive-date-day {
    font-size: 28px;
    line-height: 28px;
  }
  .pn-eventi-archive-date-month {
    font-size: 15px;
    line-height: 18px;
  }
  .pn-eventi-archive-row-title {
    font-size: 24px;
    line-height: 30px;
  }
  .pn-evento-hero {
    grid-template-columns: 1fr 1fr; /* <-- Manteniamo le 2 colonne! */
    gap: 16px; /* Riduciamo la distanza centrale per farci stare tutto */
    padding: 24px 0 52px;
  }
  .pn-evento-hero-text {
    align-items: flex-start; /* Ripristiniamo l'allineamento a sinistra */
    padding: 0;
    text-align: left;
  }
  .pn-evento-sommario {
    max-width: 100%;
  }
  .pn-evento-hero-media {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    border-width: 8px;
    border-radius: 180px 180px 32px 32px; /* Proporzioniamo l'arco per il tablet */
  }
  .pn-evento-meta {
    grid-template-columns: 1fr; /* Impiliamo a 1 colonna il box azzurro così non si schiaccia */
    width: 100%;
    max-width: none;
    text-align: left;
  }
  .pn-evento-titolo {
    font-size: 40px;
    line-height: 48px;
  }
  .pn-evento-programma-item {
    grid-template-columns: 96px 1fr;
    gap: 24px;
    padding: 20px 24px;
  }
  .pn-evento-programma-ora {
    font-size: 24px;
  }
  .pn-home-pillolons {
    padding: 88px 0;
  }
  .pn-home-pillolons-pill {
    height: 88px;
  }
  .pn-home-pillolons-pill--circle {
    width: 88px;
  }
  .pn-home-pillolons-pill--wide-blue {
    width: 260px;
  }
  .pn-home-pillolons-pill--short-blue {
    width: 150px;
  }
  .pn-home-pillolons-pill--medium-green {
    width: 190px;
  }
  .pn-home-pillolons-pill--long-magenta {
    width: 240px;
  }
  .pn-home-pillolons-pill--small-magenta {
    width: 120px;
  }
  .pn-home-pillolons-pill--long-blue {
    width: 220px;
  }
  .pn-home-pillolons-pill--small-green {
    width: 150px;
  }
  .pn-news-page-hero,
  .pn-news-archive {
    padding-left: 40px;
    padding-right: 40px;
  }
  .pn-news-featured-panel {
    grid-template-columns: 1fr;
  }
  .pn-news-featured-media {
    min-height: 320px;
  }
  .pn-news-archive-toolbar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 48px;
  }
  .pn-news-archive-filters,
  .pn-eventi-archive-filters,
  .pn-partner-archive-filters {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pn-news-archive-filters::-webkit-scrollbar,
  .pn-eventi-archive-filters::-webkit-scrollbar,
  .pn-partner-archive-filters::-webkit-scrollbar {
    display: none;
  }
  .pn-news-search {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .pn-news-search-field {
    width: 100%;
  }
  .pn-news-search-input {
    width: 100%;
  }
  .pn-eventi-archive-toolbar,
  .pn-partner-archive-toolbar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 48px;
  }
  .pn-eventi-archive-search,
  .pn-partner-archive-search {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .pn-news-active-filters,
  .pn-eventi-active-filters,
  .pn-partner-active-filters {
    border-radius: 32px;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .pn-news,
  .pn-eventi {
    padding: 40px 20px;
  }
  .pn-news-header,
  .pn-eventi-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    margin-bottom: 32px;
  }
  .pn-news-nav,
  .pn-eventi-nav {
    flex: 0 0 auto;
  }
  .pn-eventi-actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .pn-news-titolo,
  .pn-eventi-titolo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 28px;
    line-height: 1.08;
  }
  .pn-news-grid,
  .pn-news-track,
  .pn-news-archive-grid {
    grid-template-columns: 1fr;
  }
  .pn-eventi-track {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    width: max-content;
    overflow: visible;
  }
  .pn-eventi-track > .pn-evento-card {
    flex: 0 0 calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }
  .pn-news-card {
    border-radius: 32px;
    gap: 12px;
    padding: 20px;
  }
  .pn-news-card-media {
    border-radius: 28px;
  }
  .pn-news-card-titolo,
  .pn-evento-card-titolo {
    font-size: 18px;
    line-height: 1.22;
  }
  /* Mobile: riallinea l'altezza fissa a 3 righe del font ridotto (3 x 18 x 1.22 + padding). */
  .pn-news-card-titolo {
    height: calc(18px * 1.22 * 3 + 4px);
  }
  .pn-news-card-excerpt,
  .pn-evento-card-excerpt {
    font-size: 15px;
    line-height: 1.45;
  }
  .pn-evento-card {
    border-radius: 32px;
    padding: 22px;
  }
  .pn-evento-card-link {
    grid-template-columns: 1fr;
    gap: 14px;
    justify-items: stretch;
    text-align: left;
  }
  .pn-evento-card-media {
    width: 100%;
    height: 150px;
    border-radius: 24px;
  }
  .pn-evento-card-body {
    align-items: flex-start;
    gap: 10px;
  }
  .single-evento .pn-evento-article,
  .archive-eventi .pn-eventi-archive-article {
    padding: 0 20px 40px;
  }
  .pn-eventi-featured {
    margin: 32px 0;
    padding: 28px 22px;
    border-radius: 36px;
  }
  .pn-eventi-featured-title {
    font-size: 32px;
    line-height: 36px;
  }
  .pn-eventi-featured-meta {
    gap: 10px 18px;
  }
  .pn-eventi-featured-media {
    min-height: 220px;
    border-radius: 28px;
  }
  .pn-eventi-archive-toolbar,
  .pn-partner-archive-toolbar {
    padding: 18px;
    border-radius: 28px;
  }
  .pn-eventi-archive-panel {
    padding: 28px 18px;
    border-radius: 36px;
  }
  .pn-eventi-archive-title {
    font-size: 26px;
    line-height: 32px;
    text-align: center;
  }
  .pn-eventi-archive-row {
    min-height: 0;
    border-radius: 32px;
  }
  .pn-eventi-archive-row-link {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
    padding: 28px 18px 24px;
    text-align: center;
  }
  .pn-eventi-archive-date {
    align-self: center;
    width: 100%;
    height: 58px;
    padding: 0 22px;
    border-radius: 1000px;
    flex-direction: row;
    gap: 10px;
  }
  .pn-eventi-archive-date-day {
    font-size: 45px;
    line-height: 45px;
  }
  .pn-eventi-archive-date-month {
    font-size: 28px;
    line-height: 28px;
  }
  .pn-eventi-archive-date-year {
    font-size: 18px;
    line-height: 22px;
  }
  .pn-eventi-archive-row-body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .pn-eventi-archive-row-title {
    font-size: 22px;
    line-height: 28px;
  }
  .pn-eventi-archive-row-meta {
    justify-content: center;
  }
  .pn-eventi-archive-row-location {
    justify-content: center;
  }
  .pn-eventi-archive-row-excerpt {
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }
  .pn-evento-titolo {
    font-size: 30px;
    line-height: 36px;
    order: 1; /* 1. Il Titolo resta saldamente in cima */
    text-align: left;
    width: 100%;
  }
  .pn-evento-programma-ora {
    font-size: 26px;
    text-align: left;
  }
  /* HERO MOBILE: Centratura e Incolonnamento Reale */
  .pn-evento-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 16px 0 40px;
    width: 100%;
  }

  .pn-evento-hero-text {
    display: contents;
  }
  .pn-evento-sommario {
    font-size: 17px;
    line-height: 26px;
    order: 3; /* 3. Il sommario scala al terzo posto, sotto l'immagine */
    text-align: left;
    width: 100%;
    margin: 0;
  }
  /* Aggiungiamo questa per allineare al centro i figli del body */
  .pn-evento-programma-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
  }
  .pn-evento-programma-item-titolo {
    width: 100%;
    text-align: center;
  }
  .pn-evento-hero-media {
    border-width: 8px;
    border-radius: 28px;
    order: 2; /* 2. L'immagine scala al secondo posto, sotto il titolo! */
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0px;
  }

  .pn-evento-meta {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    order: 4; /* 4. Il box azzurro chiude la sequenza in fondo */
    width: 100%;
  }
  .pn-evento-meta-row {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
  }
  .pn-evento-meta-icon {
    width: 36px;
    height: 36px;
  }
  .pn-evento-meta-label {
    font-size: 13px;
    line-height: 18px;
  }
  .pn-evento-meta-value {
    font-size: 15px;
    line-height: 20px;
  }
  .pn-evento-programma-titolo {
    font-size: 28px;
    line-height: 36px;
    text-align: center;
  }
  .pn-evento-programma-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 20px;
    justify-items: center; /* Centra l'orario e il blocco testi nella griglia */
    text-align: center;
  }
  .pn-news-page-hero {
    padding: 120px 20px 0;
  }
  .pn-news-page-title-wrap {
    min-height: 96px;
    margin-bottom: 32px;
  }
  .pn-news-page-title,
  .pn-news-featured-title {
    font-size: 36px;
    line-height: 40px;
  }
  .pn-news-featured-panel {
    padding: 20px;
    border-radius: 36px;
    gap: 24px;
  }
  .pn-news-featured-copy {
    padding: 16px 0;
  }
  .pn-news-featured-media {
    min-height: 220px;
    border-radius: 32px;
  }
  .pn-news-archive {
    padding: 56px 20px;
  }
  .pn-news-archive-filters,
  .pn-news-search {
    padding: 16px;
    border-radius: 32px;
  }
  .pn-home-pillolons {
    gap: 16px;
    padding: 40px 0;
  }
  .pn-home-pillolons-row {
    gap: 16px;
  }
  .pn-home-pillolons-pill {
    height: 58px;
  }
  .pn-home-pillolons-pill--green-left {
    width: 72px;
  }
  .pn-home-pillolons-pill--blue-left {
    width: 96px;
  }
  .pn-home-pillolons-pill--circle {
    width: 58px;
  }
  .pn-home-pillolons-pill--wide-blue {
    width: 168px;
  }
  .pn-home-pillolons-pill--short-blue,
  .pn-home-pillolons-pill--medium-green,
  .pn-home-pillolons-pill--small-green {
    display: none;
  }
  .pn-home-pillolons-pill--long-magenta {
    width: 168px;
  }
  .pn-home-pillolons-pill--small-magenta {
    width: 80px;
  }
  .pn-home-pillolons-pill--long-blue {
    width: 160px;
  }
  .pn-home-pillolons-pill--magenta-right {
    min-width: 64px;
  }
  /* --------------------------------------------------------------------------
     Ottimizzazione Mobile: Toolbar Ricerca + Filtri (App-like UX)
     -------------------------------------------------------------------------- */
  .pn-news-archive-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
  }

  /* 1. Barra di ricerca in cima e a tutto schermo */
  .pn-news-search {
    order: 1; /* Forza la ricerca sopra i filtri */
    width: 100%;
    padding: 0;
    background: transparent;
  }

  .pn-news-search-field {
    width: 100%;
    height: 48px; /* Più alta per il tocco del pollice */
    padding: 4px 16px 4px 8px;
    border-radius: 999px;
    box-sizing: border-box;
  }

  /* Centratura perfetta della lente */
  .pn-news-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: transparent;
    color: rgb(var(--variant-primary, 0 91 132));
    --mds-icon-color: rgb(var(--variant-primary, 0 91 132));
    --mds-icon-size: 22px;
    margin: 0;
    flex-shrink: 0;
  }

  .pn-news-search-input {
    width: 100%;
    height: 100%;
    padding: 0 8px;
    font-size: 16px; /* 16px previene lo zoom automatico fastidioso di iOS! */
  }

  /* 2. Filtri a scorrimento orizzontale (swipe nativo) */
  .pn-news-filtri,
  .pn-news-archive-filters,
  .pn-eventi-archive-filters,
  .pn-partner-archive-filters {
    order: 2; /* Sotto la ricerca */
    width: 100%;
    padding: 12px 16px;
    margin: 0;
    border-radius: 24px;
    justify-content: flex-start;
    flex-wrap: nowrap; /* Fondamentale: impedisce alle pillole di andare a capo */
    overflow-x: auto; /* Abilita lo scorrimento col dito */
    -webkit-overflow-scrolling: touch; /* Scorrimento fluido su iPhone */
    scrollbar-width: none;
  }

  /* Nasconde la antiestetica barra di scorrimento sotto i filtri */
  .pn-news-filtri::-webkit-scrollbar,
  .pn-news-archive-filters::-webkit-scrollbar,
  .pn-eventi-archive-filters::-webkit-scrollbar,
  .pn-partner-archive-filters::-webkit-scrollbar {
    display: none;
  }

  /* Evita che le pillole si schiaccino stringendo lo schermo */
  .pn-news-chip,
  .pn-eventi-archive-filter,
  .pn-partner-archive-filter {
    flex-shrink: 0;
  }

  .pn-news-active-filters,
  .pn-eventi-active-filters,
  .pn-partner-active-filters {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 16px;
    text-align: center;
  }

  .pn-news-active-label,
  .pn-partner-active-label,
  .pn-eventi-active-label {
    width: 100%;
    text-align: center;
  }

  .pn-news-active-list,
  .pn-eventi-active-list,
  .pn-partner-active-list {
    width: 100%;
    justify-content: center;
  }

  .pn-news-active-reset,
  .pn-eventi-active-reset,
  .pn-partner-active-reset {
    margin-left: 0;
  }
}

/* ==========================================================================
   SEZIONE SERVIZI - accordion orizzontale (Figma 191:5128)
   ========================================================================== */
.pn-servizi {
  padding-left: 80px;
  padding-right: 80px;
  background: transparent;
  position: relative;
  z-index: 1;
}
.pn-servizi-inner {
  max-width: var(--pn-max-width);
  margin: 0 auto;
  padding: 0;
}
.pn-servizi-header {
  margin-bottom: 48px;
  text-align: center;
}
/* Titolo SERVIZI - Figma 191:5127: Montserrat ExtraBold 48/72, color #005b84, text-center */
.pn-servizi-title {
  font-family: "Montserrat", var(--pn-font-heading);
  font-weight: 800;
  font-size: 48px;
  line-height: 72px;
  color: #005b84;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0;
  text-align: center;
}

.pn-servizi-accordion {
  display: flex;
  gap: 24px;
  align-items: stretch;
  height: 614px;
}

.pn-servizio-card {
  position: relative;
  flex: 0 0 176px;
  height: 614px;
  padding: 48px;
  border: none;
  cursor: pointer;
  background: var(--card-bg);
  color: var(--card-text);
  border-radius: 99px;
  transition:
    flex-basis 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  text-align: left;
  font-family: var(--pn-font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}

/* Card APERTA */
.pn-servizio-card--open {
  flex: 1 1 680px;
  border-radius: 48px;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Icona dentro pillola tonda */
.pn-servizio-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: var(--pn-tertiary-10);
  border: 4px solid var(--card-border);
  border-radius: 99px;
  color: var(--card-bg);
}
.pn-servizio-card--open .pn-servizio-icon-wrap {
  width: auto;
  min-width: 80px;
  height: 80px;
  padding: 0 24px;
  align-self: stretch;
  justify-content: space-between;
  gap: 10px;
}
.pn-servizio-icon-wrap mds-icon {
  width: 48px;
  height: 48px;
}
/* Material Symbols Outlined (Google Fonts) - usato nelle card servizi (icone Figma).
   Pesanza/grade configurati a livello classe; size override per uso nei servizi. */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}
.pn-servizio-icon-wrap .material-symbols-outlined {
  font-size: 48px;
  width: 48px;
  height: 48px;
  color: #005b84;
}

/* Label aperta - Figma 100:4407: Montserrat Black 36/40, color primary #005b84.
   Sta DENTRO la pillola titolo, affiancata all'icona via flex space-between. */
.pn-servizio-label-open {
  display: none;
}
.pn-servizio-card--open .pn-servizio-icon-wrap .pn-servizio-label-open {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Montserrat", var(--pn-font-heading) !important;
  font-weight: 900 !important;
  /* font-size adattivo: scende per label lunghe (ACCELERATORE, BUSINESS MATCHING) */
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.1;
  color: #005b84;
  text-transform: uppercase;
  letter-spacing: 0;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Label chiusa - testo verticale ruotato. Figma: Montserrat Black 36/40 */
.pn-servizio-label-closed {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  overflow: hidden;
}
.pn-servizio-label-closed span {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: "Montserrat", var(--pn-font-heading) !important;
  font-weight: 900 !important;
  font-size: 36px;
  line-height: 40px;
  color: var(--card-closed-text, var(--card-text));
  text-transform: uppercase;
  letter-spacing: 0;
}
.pn-servizio-card--open .pn-servizio-label-closed {
  display: none;
}

/* Contenuto card aperta - descrizione + cta.
   flex:1 occupa tutto lo spazio rimanente sotto la pillola titolo,
   descrizione cresce e va in clamp se troppo lunga, bottone fissato in fondo. */
.pn-servizio-content {
  display: none;
  width: 100%;
}
.pn-servizio-card--open .pn-servizio-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* Descrizione card - Figma: Montserrat Medium 24/32. Clamp con puntini se sfora. */
.pn-servizio-descrizione {
  font-family: "Montserrat", var(--pn-font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--card-text);
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  text-overflow: ellipsis;
}
/* CTA Scopri di più - Figma 100:4410: Roboto Bold 16/24, height 48, padding 10x26, radius 1000.
   <mds-button> Magma con override custom properties per matchare Figma. */
.pn-servizio-cta {
  align-self: flex-start;
  flex-shrink: 0;
  --mds-button-background: var(--card-cta-bg);
  --mds-button-background-hover: var(--card-cta-bg);
  --mds-button-border-color: var(--card-cta-bg);
  --mds-button-color: var(--card-cta-text);
  --mds-button-font-size: 16px;
  --mds-button-line-height: 24px;
  --mds-button-font-weight: 700;
  --mds-button-height: 48px;
  --mds-button-padding-x: 26px;
  --mds-button-radius: 1000px;
}

/* Adattamento responsive */
@media (max-width: 1279px) {
  .pn-servizi-inner {
    padding: 0;
  }
  .pn-servizi-accordion {
    flex-direction: column;
    gap: 16px;
    height: auto;
  }
  .pn-servizio-card {
    width: 100%;
    flex: 0 0 auto;
    height: auto;
    min-height: 96px;
    padding: 24px 28px;
    border-radius: 48px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
  }
  .pn-servizio-card--open {
    min-height: 360px;
    border-radius: 40px;
    flex-direction: column;
    align-items: flex-start;
  }
  .pn-servizio-card .pn-servizio-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0;
  }
  .pn-servizio-card--open .pn-servizio-icon-wrap {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 72px;
    padding: 12px 20px;
    justify-content: space-between;
  }
  .pn-servizio-icon-wrap .material-symbols-outlined {
    width: 40px;
    height: 40px;
    font-size: 40px;
  }
  .pn-servizio-card--open .pn-servizio-label-open {
    font-size: clamp(22px, 3.4vw, 32px);
    line-height: 1.1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .pn-servizio-label-closed {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    overflow: visible;
  }
  .pn-servizio-label-closed span {
    transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(22px, 3.2vw, 30px);
    line-height: 1.12;
  }
  .pn-servizio-card--open .pn-servizio-content {
    gap: 18px;
    overflow: visible;
  }
  .pn-servizio-descrizione {
    font-size: 20px;
    line-height: 1.45;
    -webkit-line-clamp: none;
    line-clamp: none;
  }
  .pn-servizi-title {
    font-size: 40px;
  }
}
@media (max-width: 1023px) {
  .pn-servizi {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 767px) {
  .pn-servizi {
    padding: 50px 20px;
  }
  .pn-servizi-inner {
    padding: 0;
  }
  .pn-servizi-header {
    position: relative;
    z-index: 3;
    margin-bottom: 30px;
  }
  .pn-servizi-title {
    font-size: 34px;
    line-height: 1.12;
  }

  .pn-servizi-accordion {
    gap: 14px;
  }

  .pn-servizio-card {
    min-height: 82px;
    padding: 18px;
    border-radius: 32px;
  }
  .pn-servizio-card--open {
    min-height: 0;
    border-radius: 32px;
  }
  .pn-servizio-card .pn-servizio-icon-wrap {
    width: 54px;
    height: 54px;
    border-width: 3px;
  }
  .pn-servizio-card--open .pn-servizio-icon-wrap {
    min-height: 62px;
    width: 100%;
    height: auto;
    padding: 10px 16px;
    border-radius: 32px;
  }
  .pn-servizio-icon-wrap .material-symbols-outlined {
    width: 34px;
    height: 34px;
    font-size: 34px;
  }
  .pn-servizio-card--open .pn-servizio-label-open {
    display: inline-flex;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(18px, 6vw, 24px);
  }
  .pn-servizio-label-closed span {
    font-size: clamp(18px, 5.4vw, 23px);
  }

  .pn-servizio-descrizione {
    font-size: 15px;
    line-height: 1.45;
    margin: 0;
  }
}

/* ==========================================================================
   FIX MOBILE TRASVERSALI (admin bar, header switcher lingua)
   ========================================================================== */

/* WordPress admin bar: nessun offset top sull'header.
 * La admin bar e' position:fixed top:0 con z-index alto: si sovrappone all'header
 * pillola galleggiante senza spostarlo. Aggiungere margin-top creava uno spazio
 * vuoto bianco fastidioso quando l'utente e' loggato. */

/* Header mobile: la pillola lingua sta accanto all'hamburger.
 * Padding wrapper bianco ridotto per non rubare spazio (su desktop e' 16px 24px).
 * Vedi `.pn-lang-switcher-wrap` per la regola base. */
@media (max-width: 767px) {
  .pn-lang-switcher-wrap {
    margin-left: 4px;
    padding: 8px 12px;
  }
}

/* ==========================================================================
   PAGINA DETTAGLIO SERVIZIO (CPT pn_servizio) — single-pn_servizio.php

   La pagina e' uguale per struttura a page.php / single.php:
     - get_header() -> menu pillola
     - <main class="site-main single-servizio">
     - get_template_part('template-parts/header/page-title') -> banner pillola
     - <article> con contenuti specifici (intro + opzionale blocco network)
     - get_footer() -> pillolons + footer

   L'unica differenza rispetto alle altre pagine interne e' il COLORE del banner:
   la palette si passa via `$args['palette']` a page-title.php, che aggiunge le
   classi pn-page-title--<palette> + attributo data-palette. Il CSS sotto
   intercetta solo questo per sostituire i colori del banner. Larghezza, decori,
   container 1280px, footer, ecc. restano IDENTICI alle altre pagine interne.
   ========================================================================== */
/* Per ogni palette servizio:
 *   --srv-bg / --srv-text   → pillola sfondo titolo + testo
 *   --pt-decor-green        → fill SVG decoro a foglia (sopra-sinistra)
 *   --pt-decor-blue         → cerchio (sopra-destra)
 *   --pt-decor-magenta      → pillola (a destra del titolo)
 *
 * Accoppiamenti reali dal Figma "Servizi_*". Il colore della pillola sfondo
 * NON compare mai nei decori (evita match col background). Il blu #005b84
 * appare nella pillola decoro per 3 servizi su 4 (tutti tranne quello blu). */
.pn-page-title--rosa {
  --srv-bg: #ad4693;
  --srv-text: #ecf68c;
  --pt-decor-green: #d0db71;
  --pt-decor-blue: #0fa7cd;
  --pt-decor-magenta: #005b84;
}
.pn-page-title--verde {
  --srv-bg: #d0db71;
  --srv-text: #004565;
  --pt-decor-green: #ad4693;
  --pt-decor-blue: #0fa7cd;
  --pt-decor-magenta: #005b84;
}
.pn-page-title--azzurro {
  --srv-bg: #0fa7cd;
  --srv-text: #ecf68c;
  --pt-decor-green: #d0db71;
  --pt-decor-blue: #ad4693;
  --pt-decor-magenta: #005b84;
}
.pn-page-title--blu {
  --srv-bg: #005b84;
  --srv-text: #ecf68c;
  --pt-decor-green: #d0db71;
  --pt-decor-blue: #0fa7cd;
  --pt-decor-magenta: #ad4693;
}
.pn-page-title--aqua {
  --srv-bg: #107267;
  --srv-text: #ecf68c;
  --pt-decor-green: #d0db71;
  --pt-decor-blue: #0fa7cd;
  --pt-decor-magenta: #ad4693;
}

.pn-page-title[data-palette] .pn-page-title-pill {
  background: var(--srv-bg, #005b84);
}
.pn-page-title[data-palette] .pn-page-title-text {
  color: var(--srv-text, #ecf68c);
}

/* Intro: testo a sinistra + immagine tonda a destra */
/* Abstract sotto il banner-titolo: frase ad effetto blu (Figma Formazione).
 * Campo ACF `intro_abstract` (WYSIWYG), opzionale. Sta tra page-title e intro.
 * Token Figma: Montserrat Bold 32/48, color variant-primary-seed (#005B84). */
.pn-servizio-abstract {
  align-self: stretch;
  margin: 24px 0 16px;
  padding: 80px;
  font-family: "Montserrat", var(--pn-font-body);
  font-size: 32px;
  line-height: 48px;
  font-weight: 700;
  color: var(--pn-brand-blu);
}
/* Pulsanti CTA sotto l'abstract (max 2), allineati al padding dell'abstract. */
.pn-servizio-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 80px;
  margin: -32px 0 32px;
}
.pn-servizio-blocco .pn-servizio-cta-wrap {
  justify-content: center;
  padding: 0;
  margin: 0;
}
.pn-servizio-cta-button {
  border-radius: 1000px;
}
@media (max-width: 767px) {
  .pn-servizio-cta-wrap {
    padding: 0 20px;
    margin: 0 0 24px;
  }
}
.pn-servizio-abstract p {
  margin: 0 0 16px;
}
.pn-servizio-abstract p:last-child {
  margin-bottom: 0;
}
.pn-servizio-abstract strong {
  color: var(--pn-brand-rosa);
  font-weight: 700;
}
.pn-servizio-abstract a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pn-bando-detail {
  max-width: 1280px;
  margin: 24px auto 80px;
  padding: 0 24px;
}
.pn-bando-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}
.pn-bando-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pn-bando-detail__abstract {
  padding: 32px;
  background: var(--pn-brand-blu-light);
  border-radius: 32px;
  font-family: "Montserrat", var(--pn-font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--pn-text);
}
.pn-bando-detail__content {
  margin-bottom: 40px;
  color: var(--pn-grey-27);
  font-size: 1rem;
  line-height: 1.8;
}
.pn-bando-detail__content p {
  margin: 0 0 1.75rem;
}
.pn-bando-detail__content p:last-child {
  margin-bottom: 0;
}
.pn-bando-detail__footer {
  display: flex;
  justify-content: flex-start;
  padding: 0 24px;
}

/* ==========================================================================
   BLOCCHI FLEXIBLE CONTENT (pagina dettaglio servizio)
   3 layout: testo+immagine (con direzione + decori opzionali), pillole numeri,
   mappa+testo. L'admin li ripete liberamente da ACF.
   ========================================================================== */

.pn-servizio-blocco {
  width: 100%;
  margin: 48px 0;
}
.pn-servizio-blocco-inner {
  display: grid;
  gap: 48px;
  align-items: center;
  padding: 0 80px;
  justify-content: center;
}

/* ---- Layout: Testo + Immagine ---- */

.pn-servizio-blocco--testo-immagine .pn-servizio-blocco-inner {
  grid-template-columns: minmax(300px, 50%) minmax(0, 50%);
  gap: clamp(32px, 5vw, 72px);
}
.pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-sx
  .pn-servizio-blocco-inner {
  grid-template-columns: minmax(300px, 50%) minmax(0, 50%);
}
.pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-sx
  .pn-servizio-blocco-media {
  order: 1;
}
.pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-sx
  .pn-servizio-blocco-testo {
  order: 2;
}
.pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-dx
  .pn-servizio-blocco-media {
  order: 2;
}
.pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-dx
  .pn-servizio-blocco-testo {
  order: 1;
}

.pn-servizio-blocco-testo {
  font-family: "Plus Jakarta Sans", var(--pn-font-body);
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--variant-primary, 0 91 132));
  max-width: 520px;
}
.pn-servizio-blocco-testo p {
  margin: 0 0 16px;
}
.pn-servizio-blocco-testo p:last-child {
  margin-bottom: 0;
}
.pn-servizio-blocco-testo strong {
  color: var(--pn-primary-03, #005278);
  font-weight: 700;
}

.pn-servizio-blocco-media {
  position: relative;
  width: min(400px, 100%);
  aspect-ratio: 1;
  /* No overflow:hidden: i decori devono poter sbordare oltre il bordo media. */
}
.pn-servizio-blocco-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 24px;
  background: #f3f3f3;
}

/* Variante con decori: immagine cerchio + 3 forme galleggianti.
 * I colori dei decori derivano dalla palette del servizio
 * (le variabili --decor-* sono definite su .pn-page-title--<palette> e
 * scendono per cascade fino qui dentro). */
.pn-servizio-blocco--decori .pn-servizio-blocco-img {
  border-radius: 50%;
}
.pn-servizio-blocco-decor {
  position: absolute;
  pointer-events: none;
}
.pn-servizio-blocco-decor--circle-top {
  top: -12px;
  left: 20px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--decor-top, var(--pn-brand-blu));
  z-index: 2;
}
.pn-servizio-blocco-decor--circle-left {
  top: 70px;
  left: -32px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--decor-left, var(--pn-brand-verde));
  z-index: 2;
}
.pn-servizio-blocco-decor--pill-bottom {
  bottom: 24px;
  right: -40px;
  width: 120px;
  height: 72px;
  border-radius: 999px;
  background: var(--decor-bottom, var(--pn-brand-rosa));
  z-index: 0;
}

/* Mappa palette → colori dei decori (override delle var per ogni servizio).
 * Stessa mappa che gia' usavamo per l'intro tonda. */
.pn-servizio-blocco--palette-rosa {
  --decor-top: var(--pn-brand-blu);
  --decor-left: var(--pn-brand-verde);
  --decor-bottom: var(--pn-brand-rosa);
}
.pn-servizio-blocco--palette-verde {
  --decor-top: var(--pn-brand-blu);
  --decor-left: var(--pn-brand-rosa);
  --decor-bottom: var(--pn-brand-verde);
}
.pn-servizio-blocco--palette-azzurro {
  --decor-top: var(--pn-brand-blu);
  --decor-left: var(--pn-brand-verde);
  --decor-bottom: var(--pn-brand-azzurro);
}
.pn-servizio-blocco--palette-blu {
  --decor-top: var(--pn-brand-azzurro);
  --decor-left: var(--pn-brand-verde);
  --decor-bottom: var(--pn-brand-rosa);
}

/* ---- Layout: Pillole numeri (3 fisse, disposizione Figma "Servizi_Il Network")
 *
 * Stage: 2 righe.
 *   Row 1: pillola blu (1) | spacer | pillola magenta (2)
 *   Row 2:       spacer    | pillola verde (3)   | spacer
 *
 * Decori CSS di sfondo (cerchio verde TL, cerchio blu TR, pillola magenta BL,
 * cerchio blu BR) sempre nelle stesse posizioni del Figma, ancorati allo stage.
 *
 * Le pillole hanno colore fisso 1=blu, 2=magenta, 3=verde. Se vuote, restano
 * solo come elemento grafico colorato (no contenuto). ---- */

.pn-servizio-blocco--pillole {
  margin: 64px 0;
}

/* Carosello pillole: slide a tutta larghezza, auto-scroll via JS (translateX).
   Senza JS o con reduced-motion resta visibile la prima slide. */
.pn-pillole-carousel {
  width: 100%;
  overflow: hidden;
}
.pn-pillole-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 0.6s ease;
  will-change: transform;
}
.pn-pillole-slide {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Stage: container 1280px centrato, 2 righe da 120 con gap 24px (Figma 217:16415) */
.pn-pillole-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* Righe orizzontali: flex senza gap, larghezza piena, items center/end
 * (l'ultimo decoro di ogni riga ha flex:1 e riempie lo spazio residuo) */
.pn-pillole-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 120px;
}
.pn-pillole-row--bottom {
  align-items: flex-end;
}

/* Decori (pillole vuote) inline, NON absolute. Sono span flex items. */
.pn-pillole-decor {
  display: block;
  flex-shrink: 0;
  height: 120px;
  border-radius: 999px;
}
.pn-pillole-decor--circle {
  width: 120px;
}
.pn-pillole-decor--pill,
.pn-pillole-decor--pill-mid {
  width: 250px;
}
.pn-pillole-decor--pill-fill {
  flex: 1 0 0;
  min-width: 1px;
}

.pn-pillole-decor--blu {
  background: var(--pn-brand-blu);
}
.pn-pillole-decor--magenta {
  background: var(--pn-brand-rosa);
}
.pn-pillole-decor--verde {
  background: var(--pn-brand-verde);
}

/* Pillole piene: height 120, padding 12px 24px 12px 12px, gap 16px, radius 999 */
.pn-pillola {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 120px;
  padding: 12px 24px 12px 12px;
  border-radius: 999px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.pn-pillola--blu {
  background: var(--pn-brand-blu);
  color: #e7f8ff;
}
.pn-pillola--magenta {
  background: var(--pn-brand-rosa);
  color: #faf3f8;
}
.pn-pillola--verde {
  background: var(--pn-brand-verde);
  color: #4b5114;
}

/* Cerchio icona 96x96 con padding 12px (icona 48 dentro) */
.pn-pillola-icona-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  padding: 12px;
  border-radius: 50%;
  box-sizing: border-box;
}
.pn-pillola--blu .pn-pillola-icona-wrap {
  background: #e7f8ff;
}
.pn-pillola--magenta .pn-pillola-icona-wrap {
  background: #faf3f8;
}
.pn-pillola--verde .pn-pillola-icona-wrap {
  background: #f5f7df;
}

.pn-pillola-icona {
  font-size: 48px !important;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pn-pillola--blu .pn-pillola-icona {
  color: var(--pn-brand-blu);
}
.pn-pillola--magenta .pn-pillola-icona {
  color: var(--pn-brand-rosa);
}
.pn-pillola--verde .pn-pillola-icona {
  color: #4b5114;
}

.pn-pillole-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.pn-pillole-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--mds-color-neutral-300, #ccc);
  transition: background-color 0.3s ease;
}

.pn-pillole-dot--active {
  background-color: var(
    --mds-color-brand-blu,
    #0055cc
  ); /* adatta al tuo token blu */
}

/* Numero: Montserrat ExtraBold 64/60, label: Montserrat SemiBold 20/20 */
.pn-pillola-numero {
  font-family: "Montserrat", var(--pn-font-heading);
  font-weight: 800;
  font-size: 64px;
  line-height: 60px;
  white-space: nowrap;
}
.pn-pillola-label {
  font-family: "Montserrat", var(--pn-font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .pn-servizio-blocco--pillole .pn-pillole-stage {
    box-sizing: border-box;
    max-width: min(100%, calc(100vw - 64px));
    padding: 0 32px;
  }

  .pn-servizio-blocco--pillole .pn-pillole-row {
    height: 104px;
  }

  .pn-servizio-blocco--pillole .pn-pillole-row--top {
    align-items: center;
  }

  .pn-servizio-blocco--pillole .pn-pillole-decor {
    height: 104px;
  }

  .pn-servizio-blocco--pillole .pn-pillole-decor--circle {
    width: 104px;
  }

  .pn-servizio-blocco--pillole .pn-pillole-decor--pill,
  .pn-servizio-blocco--pillole .pn-pillole-decor--pill-mid {
    width: 190px;
  }

  .pn-servizio-blocco--pillole .pn-pillola {
    height: 104px;
    min-width: 0;
    padding: 10px 20px 10px 10px;
    gap: 12px;
  }

  .pn-servizio-blocco--pillole .pn-pillole-row--top .pn-pillola--magenta {
    flex-shrink: 1;
    overflow: hidden;
  }

  .pn-servizio-blocco--pillole .pn-pillola-icona-wrap {
    width: 84px;
    height: 84px;
    padding: 10px;
  }

  .pn-servizio-blocco--pillole .pn-pillola-icona {
    font-size: 40px !important;
    width: 40px;
    height: 40px;
  }

  .pn-servizio-blocco--pillole .pn-pillola-numero {
    font-size: 56px;
    line-height: 56px;
  }

  .pn-servizio-blocco--pillole
    .pn-pillole-row--top
    .pn-pillola--magenta
    .pn-pillola-label {
    flex: 1 1 170px;
    min-width: 0;
    max-width: 190px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* ---- Layout: Mappa + Testo ---- */

.pn-servizio-blocco--mappa-testo .pn-servizio-blocco-inner {
  grid-template-columns: 400px minmax(0, 1fr);
}
.pn-servizio-blocco--mappa-testo.pn-servizio-blocco--mappa-dx
  .pn-servizio-blocco-inner {
  grid-template-columns: minmax(0, 1fr) 400px;
}
.pn-servizio-blocco--mappa-testo.pn-servizio-blocco--mappa-dx
  .pn-servizio-blocco-mappa {
  order: 2;
}
.pn-servizio-blocco--mappa-testo.pn-servizio-blocco--mappa-dx
  .pn-servizio-blocco-testo {
  order: 1;
}
.pn-servizio-blocco-mappa {
  width: 100%;
  max-width: 400px;
}
.pn-servizio-blocco-mappa-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Responsive pagina servizio ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .pn-servizio-blocco-testo {
    font-size: 20px;
    line-height: 32px;
  }
}
@media (min-width: 1024px) {
  .pn-servizio-blocco-testo {
    font-size: 24px;
    line-height: 36px;
  }
}
@media (max-width: 1023px) {
  .pn-servizio-abstract {
    padding: 48px 40px;
    font-size: 28px;
    line-height: 40px;
  }
  .pn-servizio-blocco-inner,
  .pn-servizio-blocco--testo-immagine .pn-servizio-blocco-inner,
  .pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-sx
    .pn-servizio-blocco-inner,
  .pn-servizio-blocco--mappa-testo .pn-servizio-blocco-inner,
  .pn-servizio-blocco--mappa-testo.pn-servizio-blocco--mappa-dx
    .pn-servizio-blocco-inner {
    grid-template-columns: 1fr;
  }
  .pn-servizio-blocco-media {
    width: min(320px, 70vw);
    margin: 0 auto;
  }
  .pn-servizio-blocco-mappa {
    margin: 0 auto;
  }
  .pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-dx
    .pn-servizio-blocco-media {
    order: 1;
  }
  .pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-dx
    .pn-servizio-blocco-testo {
    order: 2;
  }
}
@media (max-width: 1279px) {
  .pn-servizio-blocco--testo-immagine .pn-servizio-blocco-inner,
  .pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-sx
    .pn-servizio-blocco-inner {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .pn-servizio-blocco--testo-immagine .pn-servizio-blocco-testo,
  .pn-servizio-blocco--testo-immagine.pn-servizio-blocco--img-sx
    .pn-servizio-blocco-testo {
    width: 100%;
    max-width: 680px;
  }
  .pn-servizio-blocco-media {
    width: min(360px, 64vw);
    margin: 0 auto;
  }
}
@media (max-width: 1023px) {
  .pn-servizio-blocco-media {
    width: min(320px, 70vw);
  }
}
/* ---- Anticipo layout a colonna per Pillole Statistiche (Laptop e Tablet) ---- */
@media (max-width: 1279px) {
  .pn-pillole-stage {
    gap: 16px;
  }
  .pn-pillole-row {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 16px;
  }
  .pn-pillole-decor {
    display: none; /* Nascondiamo le forme vuote per recuperare spazio */
  }
  .pn-pillola {
    width: 100%;
    height: auto;
    min-height: 96px;
    padding: 16px 20px;
    gap: 16px;
  }
  .pn-pillola-icona-wrap {
    width: 76px;
    height: 76px;
    padding: 10px;
  }
  .pn-pillola-icona {
    font-size: 40px !important;
    width: 40px;
    height: 40px;
  }
  .pn-pillola-numero {
    font-size: 48px;
    line-height: 48px;
  }
  .pn-pillola-label {
    font-size: 16px;
    line-height: 18px;
    white-space: normal; /* Fondamentale: permette ai testi di andare a capo */
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .page-network .pn-pillole-stage {
    max-width: 100%;
    gap: 18px;
    overflow: visible;
  }

  .page-network .pn-pillole-row--top {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .page-network .pn-pillole-row--bottom {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
  }

  .page-network
    .pn-pillole-row--top
    .pn-pillole-decor--circle.pn-pillole-decor--verde {
    display: block;
    flex: 0 0 130px;
    width: 130px;
    height: 104px;
    border-radius: 999px;
  }

  .page-network .pn-pillole-row--top .pn-pillola--blu {
    width: calc(100% - 146px);
  }

  .page-network .pn-pillole-row--top .pn-pillola--magenta {
    width: calc(100% - 104px);
  }

  .page-network
    .pn-pillole-row--top
    .pn-pillole-decor--pill-fill.pn-pillole-decor--blu {
    display: block;
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    min-width: 0;
    border-radius: 50%;
  }

  .page-network .pn-pillola {
    height: auto;
    min-height: 104px;
  }

  .page-network .pn-pillola--verde {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .pn-servizio-abstract {
    margin: 16px 0 8px;
    padding: 24px 12px;
    font-size: 22px;
    line-height: 32px;
  }
  .pn-servizio-blocco {
    margin: 32px 0;
  }
  .pn-servizio-blocco-inner {
    gap: 24px;
    padding: 0px;
  }
  .pn-servizio-blocco-titolo {
    font-size: 24px;
    line-height: 32px;
  }
  .pn-servizio-blocco-media {
    width: 220px;
  }
  /* Decori testo+immagine meno ingombranti su mobile */
  .pn-servizio-blocco-decor--circle-top {
    width: 56px;
    height: 56px;
    top: -8px;
    left: 12px;
  }
  .pn-servizio-blocco-decor--circle-left {
    width: 48px;
    height: 48px;
    top: 40px;
    left: -20px;
  }
  .pn-servizio-blocco-decor--pill-bottom {
    width: 88px;
    height: 56px;
    bottom: 12px;
    right: -24px;
  }
  /* Pillole mobile: la composizione Figma sarebbe troppo stretta per 5 elementi
   * affiancati -> stack verticale, niente decori (sono pura decorazione visiva). */
  .pn-pillole-stage {
    gap: 16px;
  }
  .pn-pillole-row {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 12px;
  }
  .pn-pillole-decor {
    display: none;
  }
  .pn-pillola {
    width: 100%;
    height: auto;
    min-height: 80px;
    padding: 12px 16px 12px 12px;
    gap: 12px;
  }
  .pn-pillola-icona-wrap {
    width: 56px;
    height: 56px;
    padding: 8px;
  }
  .pn-pillola-icona {
    font-size: 32px !important;
    width: 32px;
    height: 32px;
  }
  .pn-pillola-numero {
    font-size: 36px;
    line-height: 40px;
  }
  .pn-pillola-label {
    font-size: 14px;
    line-height: 18px;
  }

  .page-network .pn-pillole-stage {
    max-width: 360px;
    gap: 14px;
    overflow: visible;
  }
  .page-network .pn-pillole-row--top {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .page-network .pn-pillole-row--bottom {
    align-items: stretch;
  }
  .page-network
    .pn-pillole-row--top
    .pn-pillole-decor--circle.pn-pillole-decor--verde {
    display: block;
    order: 1;
    width: 98px;
    height: 80px;
    border-radius: 999px;
  }
  .page-network .pn-pillole-row--top .pn-pillola--blu {
    order: 2;
    width: calc(100% - 110px);
  }
  .page-network .pn-pillole-row--top .pn-pillola--magenta {
    order: 3;
    width: 100%;
  }
  .page-network
    .pn-pillole-row--top
    .pn-pillole-decor--pill-fill.pn-pillole-decor--blu {
    display: none;
    order: 4;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    min-width: 0;
    border-radius: 50%;
  }
  .page-network .pn-pillola--verde {
    min-height: 82px;
  }
  .page-network .pn-pillola--verde .pn-pillola-label {
    max-width: 110px;
  }
}

.bg-label-amaranth-06 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(
    var(--label-amaranth-06) / var(--tw-bg-opacity, 1)
  ) !important;
}

.pn-call-list-container {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  /* align-items: center;  */
  gap: 32px;
}

.pn-call-list-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.pa-call-list__title {
  margin-bottom: 0;
}

.pn-call-list-header-filter {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
}

.pn-call-list-header-filter-input-group {
  display: flex;
  gap: 24px;
}

.pn-call-list-header-filter-input {
  display: flex;
  width: var(--Spacing-6000, 240px);
  height: 48px;
  align-items: flex-start;
  border-radius: 99px;
  background: var(--Tone-Neutral-seed, #fff);

  /* mds-input-blur-default */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06),
    0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.pn-call-list-header-filter-select {
  display: flex;
  width: var(--Spacing-6000, 240px);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.pn-call-list-button {
  border-radius: 100px;
}

.pn-call-list-table {
  display: flex;
  /* height: 336px; */
  min-width: 320px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-radius: 16px;
  border: 2px solid var(--Tone-Neutral-09, #f3f3f3);
  background: var(--Tone-Neutral-09, #f3f3f3);
}

/* ==========================================================================
   SEZIONE PARTNER (riusabile) — Figma 217:17610
   template-parts/partner/partner-section.php + partner-card.php

   Banner "PARTNER" (pillola blu) + gruppi per livello spoke + griglia card.
   Colore card = 3 brand Magma (primary/secondary/tertiary) assegnate in
   PHP con regola anti-ripetizione. Qui ogni brand mappa i token --variant-*:
     bordo card   → --variant-<brand>-seed
     sfondo logo  → --variant-<brand>-10 (tinta chiara)
   Chip e button prendono il colore brand via attributo variant Magma; gli
   override --mds-* qui sotto allineano lo stile pieno del Figma. Zero hex. */

.pn-partner-section {
  display: flex;
  flex-direction: column;
  gap: 72px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 0;
}

/* Banner pillola "PARTNER" (HTML custom, come page-title). */
.pn-partner-banner {
  display: flex;
  align-items: center;
  padding: 24px 48px;
  border-radius: 999px;
  background: var(--variant-primary-seed);
}
.pn-partner-banner__titolo {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 48px;
  color: var(--secondary-light, #ecf68c);
}

/* Gruppo per livello (Spoke I, Spoke II, ...). */
.pn-partner-group {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}
.pn-partner-group__head {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 4px solid var(--variant-primary-seed);
}
.pn-partner-group__titolo {
  margin: 0;
  flex: 1 0 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 1.5;
  color: var(--variant-primary-seed);
}

/* Griglia card: 3 per riga (desktop). */
.pn-partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

/* Card partner. */
.pn-partner-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 351px;
  padding: 24px;
  border: 4px solid var(--pn-card-brand, var(--variant-primary-seed));
  border-radius: 48px;
  background: var(--pn-white, #fff);
}

.pn-partner-group[hidden],
.pn-partner-card[hidden] {
  display: none !important;
}

.pn-partner-card--primary {
  --pn-card-brand: var(--variant-primary-seed);
  --pn-card-brand-light: rgb(var(--variant-primary-10, 231 248 255));
}
.pn-partner-card--secondary {
  --pn-card-brand: rgb(var(--variant-secondary-04, 89 97 24));
  --pn-card-brand-light: rgb(var(--variant-secondary-10, 245 247 223));
}
.pn-partner-card--tertiary {
  --pn-card-brand: var(--variant-tertiary-seed);
  --pn-card-brand-light: rgb(var(--variant-tertiary-10, 250 243 248));
}

.pn-partner-card__logo {
  position: relative;
  height: 139px;
  border-radius: 48px;
  background: var(--pn-card-brand-light, #e7f8ff);
  overflow: hidden;
}
.pn-partner-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-partner-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* Chip regione: sfondo bianco, bordo/testo brand, pallino icona pieno brand
   (stesso pattern del chip data della card news/eventi). Il colore arriva da
   --pn-card-brand: niente attributo variant Magma (mds-chip non ha 'tertiary'). */
.pn-partner-card__regione {
  --mds-chip-background: #ffffff;
  --mds-chip-border: var(--pn-card-brand);
  --mds-chip-color: var(--pn-card-brand);
  --mds-chip-icon-background: var(--pn-card-brand);
  --mds-chip-icon-color: #fff;
}
/* Bottone link esterno: tondo, pieno brand. */
.pn-partner-card__link {
  --mds-button-background: var(--pn-card-brand);
  --mds-button-background-hover: var(--pn-card-brand);
  --mds-button-border-color: var(--pn-card-brand);
  --mds-button-color: #fff;
  --mds-button-icon-color: #fff;
  border-radius: 100%;
}

.pn-partner-card__nome {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  width: 100%;
  color: var(--pn-card-brand);
}
.pn-partner-card__nome mds-text {
  color: var(--pn-card-brand);
}

/* Responsive sezione partner: 3 → 2 → 1 colonne. */
@media (min-width: 768px) and (max-width: 1279px) {
  .pn-partner-banner {
    padding: 24px 48px;
  }

  .pn-partner-banner__titolo {
    font-size: 48px;
    line-height: 48px;
  }
}

@media (max-width: 1023px) {
  .pn-partner-section {
    gap: 48px;
    padding: 48px 0;
  }
  .pn-partner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pn-partner-banner__titolo,
  .pn-partner-group__titolo {
    font-size: 36px;
  }
  .pn-partner-banner {
    padding: 22px 40px;
  }
  .pn-partner-banner__titolo {
    font-size: 40px;
    line-height: 44px;
  }
}
@media (max-width: 767px) {
  .pn-partner-section {
    padding: 40px 0; /* Azzeriamo il padding laterale per far scorrere le card a filo schermo */
    gap: 56px;
  }

  .pn-partner-group__head {
    border-bottom: 3px solid var(--variant-primary-seed);
  }

  .pn-partner-group__titolo {
    font-size: 26px;
  }

  .pn-partner-banner {
    justify-content: center;
    padding: 18px 28px;
  }

  .pn-partner-banner__titolo {
    font-size: 28px;
    line-height: 32px;
  }

  /* Trasformiamo la griglia in un binario orizzontale scorrevole */
  .pn-partner-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 10px 20px 20px; /* Padding destro e sinistro per non far tagliare la prima e l'ultima card */
    scrollbar-width: none; /* Nasconde la barra su Firefox */
  }

  .pn-partner-grid::-webkit-scrollbar {
    display: none; /* Nasconde la barra su Chrome/Safari */
  }

  /* Forziamo le card a mantenere una larghezza fissa nel binario */
  .pn-partner-card {
    flex: 0 0 280px; /* Ogni quadratone sarà largo 280px sullo schermo del telefono */
    scroll-snap-align: start;
    min-height: auto;
  }
}

/* ==========================================================================
   SEZIONE CALL E CALL-BG (Home e Lista)
   ========================================================================== */

/* Contenitore unificato */
.pn-call,
.pn-call-bg {
  display: flex;
  padding: 80px 0px;
  flex-direction: column;
  gap: 48px;
  align-self: stretch;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.pn-call-bg {
  overflow-x: hidden;
}

/* Header unificato */
.pn-call-header,
.pn-call-header-bg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* Titolo "Clear" (Senza sfondo, in Home) */
.pn-call-title {
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 48px;
  color: rgb(var(--variant-primary, 0 91 132));
  text-transform: uppercase;
  margin: 0;
}

/* Titolo "BG" (Con sfondo, in Archivio) */
.pn-call-title-bg {
  background: rgb(var(--variant-primary, 0 91 132));
  color: var(--secondary-light, #ecf68c);
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0;
  padding: 24px 48px;
  border-radius: 999px;
  box-sizing: border-box;
  white-space: normal;
  width: 100%;
}

/* Fix per layout container card */
.pn-call > div[role="tablist"],
.pn-call-bg > div[role="tablist"] {
  width: 100%;
}

.pn-call-cta-button {
  border-radius: 1000px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Struttura Card Call (Stile Figma)
   -------------------------------------------------------------------------- */
.pn-call-card {
  /* Accento variant (bordo, titolo, chip, bottone) dal registro design.
     Default primary (blu). Override per [data-variant] sotto. Il logo resta
     blu/lime fisso: e' parte dell'identita' della card, non dell'accento. */
  --pn-call-accent: rgb(var(--variant-primary, 0 91 132));

  display: flex;
  padding: 40px 48px;
  align-items: center;
  gap: 48px;
  border-radius: 999px;
  border: 6px solid var(--pn-call-accent);
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
}
.pn-call-card[data-variant="secondary"] {
  --pn-call-accent: var(--variant-secondary-seed, #d0db71);
}
.pn-call-card[data-variant="violet"] {
  --pn-call-accent: var(--variant-tertiary-seed, #ad4693);
}
.pn-call-card[data-variant="info"] {
  --pn-call-accent: var(--variant-info-seed, #0fa7cd);
}
.pn-call-card[data-variant="aqua"] {
  --pn-call-accent: var(--aqua-dark, #107267);
}

.pn-call-card-logo {
  display: flex;
  width: 292px;
  height: 292px;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgb(var(--variant-primary, 0 91 132));
  box-sizing: border-box;
}

.pn-call-card-logo > .pn-call-card-logo-text {
  display: block;
  color: var(--secondary-light, #ecf68c);
  text-align: center;
  font-family: "Roboto", var(--pn-font-heading);
  font-size: 45px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  word-wrap: break-word;
}

.pn-call-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.pn-call-card-content-title {
  display: flex;
  width: 100%;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--pn-call-accent, #ad4693);
}

.pn-call-card-content-title > h4 {
  color: var(--pn-call-accent, #ad4693);
  font-family: "Roboto", var(--pn-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.pn-call-card-content-expiry-date {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pn-call-card-content-expiry-date-title {
  color: var(--pn-call-accent, #ad4693);
  font-family: "Montserrat", var(--pn-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.pn-call-card-content-expiry-date-chip {
  --mds-chip-background: #ffffff;
  --mds-chip-color: var(--pn-call-accent, #ad4693);
  --mds-chip-border: var(--pn-call-accent, #ad4693);
  --mds-chip-icon-background: var(--pn-call-accent, #ad4693);
  --mds-chip-icon-color: #ffffff;
}

.pn-call-card-content-description {
  color: var(--variant-primary-02, #005278);
  font-family: "Montserrat", var(--pn-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  /* Teaser: max 4 righe con ellissi (Figma). Testo pieno resta nel DOM. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pn-call-card-content-button {
  margin-top: 8px;
  --mds-button-background: var(--pn-call-accent, #ad4693);
  --mds-button-border-color: var(--pn-call-accent, #ad4693);
  --mds-button-color: #ffffff;
  border-radius: 1000px;
}

/* --------------------------------------------------------------------------
   Carousel Call in home (pattern Eventi): header + frecce + CTA sotto
   -------------------------------------------------------------------------- */
/* Sezione home allineata a .pn-eventi: padding laterale, niente max-width sulla
   sezione (la gestisce .pn-call-inner a 1280, come eventi-inner). Sovrascrive la
   regola condivisa .pn-call,.pn-call-bg sopra (stesso peso, ordine successivo). */
.pn-call {
  display: block;
  padding: 80px 80px 0;
  max-width: none;
  gap: 0;
}
.pn-call-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* Header allineato a .pn-eventi-header: linea sotto + altezza + spaziatura. */
.pn-call .pn-call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  margin-bottom: 48px;
  border-bottom: 2px solid rgb(var(--variant-primary, 0 91 132));
  padding-bottom: 16px;
}

/* Frecce nell'header: nascoste senza JS, visibili a carousel inizializzato. */
.pn-call-nav {
  display: none;
  gap: 8px;
}
.pn-call[data-call-carousel-init="1"] .pn-call-nav {
  display: flex;
}
.pn-call-bg[data-call-carousel-init="1"] .pn-call-nav {
  display: flex;
  justify-content: flex-end;
}
.pn-call-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 10px;
  background: rgb(var(--variant-primary, 0 91 132));
  border: 2px solid rgb(var(--variant-primary, 0 91 132));
  border-radius: 1000px;
  color: var(--pn-white);
  cursor: pointer;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.pn-call-nav-btn:not(:disabled):hover {
  background: rgb(var(--variant-primary-04, 0 82 120));
  border-color: rgb(var(--variant-primary-04, 0 82 120));
  box-shadow: 0 8px 18px rgba(0, 82, 120, 0.14);
  transform: translateY(-1px);
}
.pn-call-nav-btn:not(:disabled):active {
  box-shadow: 0 2px 6px rgba(0, 82, 120, 0.12);
  transform: translateY(0);
}
.pn-call-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.pn-call-nav-btn:focus-visible {
  outline: 3px solid rgb(var(--variant-secondary, 208 219 113));
  outline-offset: 3px;
}
.pn-call-nav-btn mds-icon {
  width: 24px;
  height: 24px;
  --mds-icon-color: #ffffff;
}
.pn-call-nav-btn mds-icon::part(svg) {
  fill: #ffffff;
}

/* Track ancorato alla larghezza dell'inner (NON max-content): cosi' i
   flex-basis percentuali delle card si calcolano sull'inner e non sbordano. */
.pn-call-track-viewport {
  width: 100%;
  overflow: hidden;
}

.pn-call .pn-call-track,
.pn-call-bg .pn-call-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  width: 100%;
  margin: 0;
  transition: transform 0.32s ease;
  will-change: transform;
  overflow: visible;
}
.pn-call .pn-call-track > .pn-call-card,
.pn-call-bg .pn-call-track > .pn-call-card {
  flex: 0 0 calc(92% - 12px);
  max-width: calc(92% - 12px);
  margin-bottom: 0;
}
.pn-call .pn-call-track > .pn-call-card:only-child,
.pn-call-bg .pn-call-track > .pn-call-card:only-child {
  flex: 0 0 100%;
  max-width: 100%;
}
.pn-call-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Empty State Call
   -------------------------------------------------------------------------- */
.pn-call-empty {
  display: flex;
  padding: 80px;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.pn-call-empty-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.pn-call-empty-title {
  color: #1e1b39;
  text-align: center;
  font-family: "Roboto", var(--pn-font-heading);
  font-size: 30px;
  font-weight: 900;
  margin: 0;
}

.pn-call-empty-paragraph {
  color: #1e1b39;
  text-align: center;
  font-family: "Karla", var(--pn-font-body);
  font-size: 20px;
  margin: 0;
}

.pn-call-cta-empty-button {
  border-radius: 1000px;
}

/* --------------------------------------------------------------------------
   Responsive Layout Call e Call-bg
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .pn-call,
  .pn-call-empty {
    padding: 60px 80px;
  }
  .pn-call-bg {
    padding: 60px 0px;
  }
  .pn-call-title,
  .pn-call-title-bg {
    font-size: 36px;
  }

  /* FIX TABLET (Fig. 1): Impiliamo la card per evitare che i testi si schiaccino */
  .pn-call-card {
    flex-direction: column;
    padding: 40px 32px;
    border-radius: 64px;
    gap: 32px;
  }
  .pn-call-card-logo {
    width: 200px;
    height: 200px;
  }
  .pn-call-card-logo > .pn-call-card-logo-text {
    font-size: 32px;
  }

  /* Carousel home: padding eventi-like (niente padding sotto sulla sezione)
     e header compatto. */
  .pn-call {
    padding: 60px 48px 0;
  }
  .pn-call .pn-call-header {
    height: auto;
    margin-bottom: 40px;
  }
}

@media (max-width: 1023px) {
  .pn-call-card {
    border-radius: 48px;
  }

  .pn-call {
    padding: 48px 32px 0;
  }
}

@media (max-width: 767px) {
  .pn-call,
  .pn-call-empty {
    padding: 40px 20px;
  }

  .pn-call-bg {
    padding: 40px 0px;
  }
  /* Smonta l'header per riordinare titolo e bottone (solo ramo archivio -bg).
     Il carousel home (.pn-call .pn-call-header) mantiene il layout flex. */
  .pn-call-header-bg {
    display: contents;
  }
  /* Carousel home: padding eventi-like (niente sotto), header compatto. */
  .pn-call {
    padding: 40px 20px 0;
  }
  .pn-call .pn-call-header {
    height: auto;
    margin-bottom: 32px;
    padding-bottom: 12px;
  }
  .pn-call .pn-call-title {
    font-size: 28px;
  }
  /* In mobile la card resta piena come desktop. */
  .pn-call .pn-call-track > .pn-call-card,
  .pn-call-bg .pn-call-track > .pn-call-card,
  .pn-call .pn-call-track > .pn-call-card:only-child,
  .pn-call-bg .pn-call-track > .pn-call-card:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Titoli in cima */
  .pn-call-title,
  .pn-call-title-bg {
    font-size: 28px;
    order: -1;
  }

  /* FIX TITOLO BLU MOBILE (Fig. 2): Evitiamo l'effetto "cerchio deformato" */
  .pn-call-title-bg {
    padding: 16px 24px;
    border-radius: 32px; /* Diventa un bel rettangolo arrotondato */
    text-align: center;
  }

  /* Le card vanno in mezzo */
  .pn-call > div[role="tablist"],
  .pn-call-bg > div[role="tablist"] {
    order: 2;
  }

  /* Bottone in fondo */
  .pn-call-cta-button {
    order: 99;
    align-self: center;
    margin-top: 16px;
  }

  /* FIX CARD MOBILE (Fig. 2): Rimuoviamo la forma a capsula gigante */
  .pn-call-card {
    padding: 32px 20px;
    border-radius: 24px; /* SMUSSA gli angoli, niente più ovale impazzito */
    border-width: 4px;
    gap: 24px;
  }

  /* Ridimensiona il logo in modo che respiri dentro la card */
  .pn-call-card-logo {
    width: 160px;
    height: 160px;
    padding: 16px;
  }

  .pn-call-card-logo > .pn-call-card-logo-text {
    font-size: 25px;
  }

  .pn-call-card-content-title > h4 {
    font-size: 22px;
  }

  .pn-call-card-content-button {
    align-self: center;
    margin-top: 16px;
  }
}
/* ==========================================================================
   ARCHIVIO CALL (Lista) - Stile Griglia pulito
   ========================================================================== */
.pn-call-archiviate-main {
  display: flex;
  padding: 0 80px;
  flex-direction: column;
  gap: 96px;
}

.pn-call-archivio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  max-width: var(--pn-max-width, 1280px);
  margin: 0 auto;
  width: 100%;
}

.pn-call-archivio-header {
  display: flex;
  width: 100%;
  padding: 24px 48px;
  align-items: center;
  border-radius: 999px;
  background: rgb(var(--variant-primary, 0 91 132));
  box-sizing: border-box;
}

.pn-call-archivio-title {
  color: var(--secondary-light, #ecf68c);
  font-family: "Montserrat", var(--pn-font-heading);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.pn-call-archivio-container {
  width: 100%;
  padding-bottom: 96px;
}

.pn-call-archivio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 100%;
}

.pn-call-archivio-col {
  display: flex;
}

.pn-call-archivio-col-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 48px;
  border-radius: 60px;
  border: 8px solid rgb(var(--variant-primary, 0 91 132));
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  flex: 1 0 auto;
}

.pn-call-archivio-col-title {
  display: flex;
  width: 100%;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid rgb(var(--variant-primary, 0 91 132));
}

.pn-call-archivio-col-title h4 {
  color: rgb(var(--variant-primary, 0 91 132));
  font-family: "Roboto", var(--pn-font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-align: left; /* Assicura che sia sempre a sinistra */
}

.pn-call-archivio-card-content-expiry-date {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pn-call-archivio-content-expiry-date-title {
  color: rgb(var(--variant-primary, 0 91 132));
  font-family: "Montserrat", var(--pn-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.pn-call-archivio-content-expiry-date-chip {
  --mds-chip-background: #ffffff;
  --mds-chip-color: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-border: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-icon-background: rgb(var(--variant-primary, 0 91 132));
  --mds-chip-icon-color: #ffffff;
}

.pn-call-card-archivio-content-description {
  color: var(--variant-primary-02, #005278);
  font-family: "Montserrat", var(--pn-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1; /* Trucco: spinge il bottone sempre sul fondo! */
  /* Teaser: max 4 righe con ellissi (Figma). Testo pieno resta nel DOM. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pn-call-card-archivio-content-button {
  margin-top: 16px;
  --mds-button-background: rgb(var(--variant-primary, 0 91 132));
  --mds-button-border-color: rgb(var(--variant-primary, 0 91 132));
  --mds-button-color: #ffffff;
  border-radius: 1000px;
}

/* --- Responsive per l'archivio --- */
@media (max-width: 1023px) {
  .pn-call-archivio-grid {
    grid-template-columns: 1fr; /* Sotto i tablet passa a 1 colonna */
  }
}

@media (max-width: 767px) {
  .pn-call-archiviate-main {
    padding: 0 20px;
  }
  .pn-call-archivio-col-inner {
    padding: 24px;
    border-radius: 32px;
    border-width: 4px;
  }
  .pn-call-archivio-header {
    padding: 24px;
    border-radius: 32px;
    justify-content: center; /* Centra il contenitore del titolo */
  }
  /* Centriamo il titolo principale "ARCHIVIO CALL" */
  .pn-call-archivio-title {
    font-size: 28px;
    text-align: center;
    width: 100%;
  }

  /* Centriamo il bottone della card */
  .pn-call-card-archivio-content-button {
    align-self: center;
    margin-top: 16px;
  }
}

/* ==========================================================================
   PIANI — shortcode [pn_piani] (vetrina prezzi, Figma 1579-33009)
   3 card affiancate. Provvisorio: diventerà WooCommerce.
   Palette per card via custom property (--piano-bg / --piano-cta).
   ========================================================================== */
.pn-piani {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: 104px;
}
.pn-piani-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: stretch;
}
.pn-piano {
  /* default = azzurro; i modifier sotto sovrascrivono. */
  --piano-bg: rgb(var(--primary-light-01-rgb, 15 167 205) / 0.1);
  --piano-cta: var(--primary-light-01, #0fa7cd);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background: var(--piano-bg);
}
.pn-piano--azzurro {
  --piano-bg: rgb(var(--primary-light-01-rgb, 15 167 205) / 0.1);
  --piano-cta: var(--primary-light-01, #0fa7cd);
}
.pn-piano--verde {
  --piano-bg: rgb(var(--variant-secondary, 208 219 113) / 0.18);
  --piano-cta: var(--variant-secondary-seed, #d0db71);
}
.pn-piano--rosa {
  --piano-bg: rgb(var(--variant-tertiary, 173 70 147) / 0.1);
  --piano-cta: var(--variant-tertiary-seed, #ad4693);
}
.pn-piano--blu {
  --piano-bg: rgb(var(--variant-primary, 0 91 132) / 0.1);
  --piano-cta: rgb(var(--variant-primary, 0 91 132));
}
.pn-piano-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pn-piano-titolo {
  margin: 0;
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: rgb(var(--tone-neutral-01, 33 33 33));
}
.pn-piano-descr {
  margin: 0;
  font-family: "Karla", var(--pn-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--tone-neutral-01, 33 33 33));
}
.pn-piano-hr {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: #404040;
  border-radius: 16px;
}
.pn-piano-feature {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 0 auto;
}
.pn-piano-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}
.pn-piano-feature-icon {
  flex-shrink: 0;
  /* Check verde "success" come da Figma (icona monocromatica colorata via CSS). */
  color: #1a9d4f;
  margin-top: 2px;
}
.pn-piano-feature-label {
  font-family: "Karla", var(--pn-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--tone-neutral-01, 33 33 33));
}
.pn-piano-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pn-piano-footer-default {
  display: flex;
  justify-content: center;
  margin-top: 2em;
}
.pn-piano-prezzo {
  margin: 0;
  font-family: "Roboto", var(--pn-font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 48px;
  color: rgb(var(--tone-neutral-01, 33 33 33));
}
/* CTA: colore pieno della palette del piano. Override col pattern Magma usato
   nel tema (--mds-button-background / -hover), non property inventate. */
.pn-piano-cta {
  width: 100%;
  --mds-button-background: var(--piano-cta);
  --mds-button-background-hover: var(--piano-cta);
  --mds-button-radius: 1000px;
  border-radius: 1000px;
}

@media (min-width: 900px) and (max-width: 1279px) {
  .pn-piani {
    margin-top: 72px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
  }

  .pn-piani-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .pn-piano {
    padding: 20px;
    gap: 18px;
  }

  .pn-piano-descr,
  .pn-piano-feature-label {
    font-size: 14px;
    line-height: 21px;
  }

  .pn-piano-prezzo {
    font-size: 40px;
    line-height: 42px;
  }
}

@media (max-width: 899px) {
  .pn-piani {
    margin-top: 72px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
  }

  .pn-piani-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 680px) {
  .pn-piani {
    margin-top: 32px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .pn-piani-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pn-piano-header,
  .pn-piano-footer {
    align-items: center;
    text-align: center;
  }

  .pn-piano-prezzo {
    text-align: center;
  }
}

/* PAGINA GOVERNANCE */
/* ── Variabili colore (coerenti con lo screenshot) ── */
/* ── Layout generale ── */
.gov-page {
  display: flex;
  max-width: var(--pn-max-width); /* allinea al container del sito (1280px) */
  margin: 0 auto;
  width: 100%;
  padding: 0 80px;
  flex-direction: column;
  /* gap: 96px; */
}

.gov-page > .pn-page-title {
  width: auto;
  margin-left: -80px;
  margin-right: -80px;
}

/* ── Header sezioni ── */
.gov-header,
.wp-header {
  background: rgb(var(--variant-primary, 0 91 132));
  border-radius: 999px;
  display: flex;
  padding: 24px 48px;
  align-items: center;
  gap: 10px;
  margin-bottom: 2rem;
}
.gov-header h2,
.wp-header h2 {
  color: var(--secondary-light, #ecf68c);
  font-family: Montserrat;
  font-size: 48px;
  font-style: normal;
  font-weight: 800;
  line-height: 48px; /* 100% */
  margin: 0;
  /* width: 658px; */
  /* flex-shrink: 0; */
}

/* ── Organigramma ── */
.gov-org-chart {
  --gov-connector-color: rgb(var(--variant-secondary, 208 219 113));
  --gov-node-height: 76px;
  --gov-side-node-width: 42%;
  --gov-assembly-offset: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  position: relative;
}

/* Linea verticale centrale */
.gov-org-chart::before {
  content: "";
  position: absolute;
  top: 60px;
  bottom: 60px;
  left: 50%;
  width: 2px;
  background: var(--gov-connector-color);
  transform: translateX(-50%);
  z-index: 0;
}

.gov-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  text-align: center;
  min-height: var(--gov-node-height);
  min-width: 260px;
  box-sizing: border-box;
}
.gov-node strong {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}
.gov-node span {
  font-size: 0.78rem;
}

.gov-node--wide {
  width: 100%;
  max-width: none;
}
.gov-node--filled {
  background: var(--gov-connector-color);
  color: rgb(var(--variant-primary, 0 91 132));
  border: 2px solid var(--gov-connector-color);
}
.gov-node--outline {
  background: white;
  color: rgb(var(--variant-primary, 0 91 132));
  border: 2px solid var(--gov-connector-color);
}

.gov-org-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.gov-org-row::before,
.gov-org-row::after {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--gov-connector-color);
  z-index: 0;
}
.gov-org-row::before {
  top: calc(var(--gov-node-height) / 2);
  left: var(--gov-side-node-width);
  width: calc(50% - var(--gov-side-node-width));
}
.gov-org-row::after {
  top: calc(var(--gov-assembly-offset) + (var(--gov-node-height) / 2));
  right: var(--gov-side-node-width);
  width: calc(50% - var(--gov-side-node-width));
}
.gov-org-row .gov-node {
  flex: 0 1 var(--gov-side-node-width);
}
.gov-org-row .gov-node:nth-child(2) {
  margin-top: var(--gov-assembly-offset);
}

@media (min-width: 768px) and (max-width: 1279px) {
  .gov-page {
    padding: 0 40px;
  }

  .gov-page > .pn-page-title {
    margin-top: 0;
    margin-left: -40px;
    margin-right: -40px;
  }
}

@media (max-width: 767px) {
  .gov-page {
    padding: 0 20px;
  }

  .gov-page > .pn-page-title {
    width: calc(100% + 40px);
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0;
    margin-left: -20px;
    margin-right: -20px;
  }

  .gov-page .gov-header,
  .gov-page .wp-header {
    padding: 18px 24px;
    margin-bottom: 1.5rem;
  }

  .gov-page .gov-header h2,
  .gov-page .wp-header h2 {
    font-size: 30px;
    line-height: 34px;
  }

  .gov-org-chart {
    gap: 1rem;
  }

  .gov-org-chart::before {
    top: 38px;
    bottom: 38px;
  }

  .gov-node,
  .gov-node--wide {
    width: 100%;
    min-width: 0;
    min-height: 68px;
    padding: 0.75rem 1.25rem;
  }

  .gov-node strong {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .gov-node span {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .gov-org-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
  }

  .gov-org-row::before,
  .gov-org-row::after {
    display: none;
  }

  .gov-org-row .gov-node,
  .gov-org-row .gov-node:nth-child(2) {
    flex: 1 1 auto;
    margin-top: 0;
  }
}

/* ── Work Package accordion ── */
.wp-section {
  margin-top: 3rem;
}

.wp-item {
  /* border: 1.5px solid var(--variant-seconday, #d0db71); */
  /* border-radius: 999px; */
  margin-bottom: 0.6rem;
  overflow: hidden;
  /* background: white; */
}

.wp-item__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.4rem;
  background: var(--variant-seconday, #d0db71);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(var(--variant-primary, 0 91 132));
  border-radius: 999px;
  transition: background 0.2s;
}
.wp-item__toggle:hover {
  background: #b8cc55;
}

.wp-item__icon {
  font-size: 1.2rem;
  transition: transform 0.3s;
  display: inline-block;
}
.wp-item--open .wp-item__icon {
  transform: rotate(180deg);
}

.wp-item__body {
  display: none;
  padding: 1rem 1.4rem 1.2rem;
  color: #444;
  font-size: 0.88rem;
  line-height: 1.6;
}
.wp-item--open .wp-item__body {
  display: block;
}

/* PAGINA "LAVORA CON NOI" */
.lcn-page {
  display: flex;
  max-width: var(--pn-max-width); /* allinea al container del sito (1280px) */
  margin: 0 auto;
  width: 100%;
  padding: 0 80px;
  flex-direction: column;
  /* gap: 96px; */
}

.lcn-page > .pn-page-title {
  width: auto;
  margin-left: -80px;
  margin-right: -80px;
}

@media (min-width: 1280px) {
  .gov-page,
  .lcn-page {
    padding-right: 0;
    padding-left: 0;
  }

  .gov-page > .pn-page-title,
  .lcn-page > .pn-page-title {
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
  }
}

.lcn-section {
  width: 100%;
}

/* ── Header sezioni ── */
.lcn-header,
.wp-header {
  background: rgb(var(--variant-primary, 0 91 132));
  border-radius: 999px;
  display: flex;
  padding: 24px 48px;
  align-items: center;
  gap: 10px;
  margin-bottom: 2rem;
}
.lcn-header h2,
.wp-header h2 {
  color: var(--secondary-light, #ecf68c);
  font-family: Montserrat;
  font-size: 48px;
  font-style: normal;
  font-weight: 800;
  line-height: 48px; /* 100% */
  margin: 0;
  /* width: 658px; */
  /* flex-shrink: 0; */
}
.lcn-body {
  display: flex;
  padding: 80px;
  justify-content: space-between;
  align-items: center;
}
.lcn-body-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  flex: 1 0 0;
}
.lcn-body-text p {
  align-self: stretch;
  color: rgb(var(--variant-primary, 0 91 132));
  font-family: Montserrat;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px; /* 150% */
}
.lcn-grid-bandi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.lcn-row-bandi {
  display: flex;
  align-items: stretch;
  gap: 24px;
  align-self: stretch;
  flex-wrap: wrap;
}
.lcn-bando {
  border-radius: var(--Spacing-1500, 60px);
  border: var(--stroke-weight-8, 8px) solid
    rgb(var(--variant-primary, 0 91 132));
  padding: var(--Spacing-1200, 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-400, 4px);
  flex: 1 1 calc(50% - 24px);
  max-width: 50%;
  box-sizing: border-box;
}
.lcn-bando h4 {
  border-bottom: 2px solid rgb(var(--variant-primary, 0 91 132));
  color: rgb(var(--variant-primary-02, 0 69 101));
  align-self: stretch;
  /* Title/H4 */
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 133.333% */
}
.lcn-bando p {
  align-self: stretch;
  color: rgb(var(--variant-primary-02, 0 69 101));
  font-family: Montserrat;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 160% */
}
.lcn-bando-button {
  margin-top: 8px;
  --mds-button-background: rgb(var(--variant-primary, 0 91 132));
  --mds-button-border-color: rgb(var(--variant-primary, 0 91 132));
  --mds-button-color: #ffffff;
  border-radius: 1000px;
}

.lcn-chips mds-chip {
  border-radius: 100px;
  border: 2px solid rgb(var(--variant-primary, 0 91 132));
  background: var(--Tone-Neutral-seed, #fff);

  /* Tailwind/Shadow/default-sharp */
  box-shadow:
    0 0 2px 0 rgba(0, 0, 0, 0.1),
    0 1px 3px 0 rgba(0, 0, 0, 0.15);
}

.lcn-chips {
  display: flex;
  align-items: center;
  gap: var(--Spacing-200, 8px);
}
.lcn-chips mds-icon {
  border-radius: 100px;
  background: rgb(var(--variant-primary, 0 91 132));
}
.lcn-chips mds-icon::part(svg) {
  fill: #ffffff;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .lcn-page {
    padding: 0 40px;
  }

  .lcn-page > .pn-page-title {
    margin-top: 0;
    margin-left: -40px;
    margin-right: -40px;
  }

  .lcn-body {
    padding: 64px 0;
  }

  .lcn-body-text p {
    margin: 0;
    font-size: 28px;
    line-height: 40px;
  }

  .lcn-row-bandi {
    gap: 20px;
  }

  .lcn-bando {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
    padding: 28px;
    border-width: 6px;
    border-radius: 48px;
  }

  .lcn-bando h4 {
    font-size: 22px;
    line-height: 30px;
  }

  .lcn-bando p {
    font-size: 18px;
    line-height: 30px;
  }

  .lcn-chips {
    flex-wrap: wrap;
  }
}

@media (max-width: 1023px) {
  .lcn-page {
    padding: 0 40px;
  }

  .lcn-page > .pn-page-title {
    margin-top: 0;
    margin-left: -40px;
    margin-right: -40px;
  }

  .lcn-body {
    padding: 56px 0;
  }

  .lcn-body-text {
    align-items: center;
  }

  .lcn-body-text p {
    max-width: 760px;
    margin: 0 auto;
    font-size: 26px;
    line-height: 38px;
    text-align: center;
  }

  .lcn-header {
    padding: 22px 40px;
    margin-bottom: 32px;
  }

  .lcn-header h2 {
    font-size: 40px;
    line-height: 44px;
  }

  .lcn-row-bandi {
    flex-direction: column;
    gap: 24px;
  }

  .lcn-bando {
    width: 100%;
    max-width: none;
    flex-basis: auto;
    padding: 32px;
    border-width: 6px;
  }

  .lcn-chips {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .lcn-page {
    padding: 0 20px;
  }

  .lcn-page > .pn-page-title {
    width: calc(100% + 40px);
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0;
    margin-left: -20px;
    margin-right: -20px;
  }

  .lcn-body {
    padding: 36px 0 48px;
  }

  .lcn-body-text p {
    max-width: 100%;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
  }

  .lcn-header {
    justify-content: center;
    padding: 18px 28px;
    margin-bottom: 24px;
  }

  .lcn-header h2 {
    font-size: 28px;
    line-height: 32px;
    text-align: center;
  }

  .lcn-bando {
    align-items: stretch;
    padding: 24px;
    border-width: 5px;
    border-radius: 36px;
  }

  .lcn-bando h4,
  .lcn-bando p {
    text-align: center;
  }

  .lcn-bando h4 {
    font-size: 22px;
    line-height: 30px;
  }

  .lcn-bando p {
    font-size: 17px;
    line-height: 28px;
  }

  .lcn-chips {
    justify-content: center;
  }

  .lcn-bando-button {
    align-self: center;
  }
}

.pn-partner-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 16px 16px 0 0;
  padding: 0 4px 8px 0;
  cursor: pointer;
  text-align: left;
  color: var(--variant-primary-seed);
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.pn-partner-group__toggle:hover {
  background-color: rgb(var(--variant-primary-10, 231 248 255) / 0.55);
}

.pn-partner-group__toggle:focus-visible {
  outline: 3px solid
    var(--magma-outline-focus, rgb(var(--variant-primary-04, 0 91 132)));
  outline-offset: 4px;
}

.pn-partner-group__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(var(--variant-primary-08, 178 224 240));
  border-radius: 999px;
  background-color: rgb(var(--variant-primary-10, 231 248 255));
  color: var(--variant-primary-seed);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  flex-shrink: 0;
}

.pn-partner-group__toggle:hover .pn-partner-group__chevron,
.pn-partner-group__toggle:focus-visible .pn-partner-group__chevron {
  border-color: var(--variant-primary-seed);
  box-shadow: 0 8px 18px rgb(var(--variant-primary-04, 0 91 132) / 0.12);
}

.pn-partner-group--collapsed .pn-partner-group__chevron {
  transform: rotate(-90deg);
}

.pn-partner-grid {
  transition:
    max-height 0.25s ease,
    opacity 0.2s ease;
}

.pn-partner-group--collapsed .pn-partner-grid {
  overflow: hidden;
  max-height: 0 !important;
  opacity: 0;
  margin: 0;
  padding: 0;
}