/* ==========================================================================
   Albenga 5 — foglio di stile pubblico
   Colori: immagine coordinata AGESCI (viola associativo + colori di branca)
   Caratteri: Schibsted Grotesk per i titoli, Noto Sans per i testi (entrambi SIL OFL, ospitati in locale)
   ========================================================================== */

/* Noto Sans, ospitato in locale (nessuna chiamata a server esterni) */
@font-face { font-family: "Noto Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/noto-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/noto-sans-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/noto-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/noto-sans-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 400; font-display: swap; src: url(../fonts/noto-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-display: swap; src: url(../fonts/noto-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-weight: 800; font-display: swap; src: url(../fonts/noto-sans-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/noto-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/noto-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 500; font-display: swap; src: url(../fonts/noto-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-display: swap; src: url(../fonts/noto-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Schibsted Grotesk è il carattere di titoli, etichette di sezione, menu e numeri; Noto Sans quello dei testi.
   Ha preso il posto di GT Planar (proprietario: la versione Trial non ha le lettere accentate e non si può pubblicare).
   Licenza SIL OFL 1.1 in assets/fonts/schibsted-grotesk-OFL.txt; file dal pacchetto @fontsource/schibsted-grotesk 5.3.0.
   Pesi 700 e 800: i pesi intermedi (500, 600) usano il 700, il 900 usa l'800. */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Newsreader corsivo, solo per le citazioni: un serif sobrio da libro che le distingue da testi (Noto Sans) e titoli (Schibsted Grotesk).
   Licenza SIL OFL 1.1 in assets/fonts/newsreader-OFL.txt; file dal pacchetto @fontsource/newsreader 5.3.0. Pesi 400 e 500, solo corsivo */
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/newsreader-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/newsreader-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: italic; font-display: swap; src: url(../fonts/newsreader-latin-500-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: italic; font-display: swap; src: url(../fonts/newsreader-latin-ext-500-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Viola e giallo AGESCI: Manuale Immagine Coordinata 2016 (#462678 / #FDC50D) */
  --viola: #462678;
  --viola-900: #24133F;
  --viola-800: #341C5B;
  --viola-600: #6B4E9A;
  --viola-300: #B4A0D8; --viola-100: #E9E3F3;
  --viola-50: #F5F2FA;
  /* Colori di branca */
  --giallo: #FDC50D;      --giallo-ink: #6E4F00;  --giallo-100: #FFF3CC;
  --verde: #2E8540;       --verde-ink: #1E5C2B;   --verde-100: #E1F1E4;
  --rosso: #C8322F;       --rosso-ink: #8F1F1D;   --rosso-100: #FBE4E3;
  /* Castorini: blu dell'Associazione Italiana Castorini */
  --blu: #1C75BC;         --blu-ink: #12507F;     --blu-100: #E0EEF9;
  /* Fazzolettone Albenga 5: verde con bordo giallo */
  --scarf-green: #2F7D3A;
  --scarf-border: #F4C21B;
  /* Neutri */
  --ink: #1F1A28;
  --text: #3A3445;
  --muted: #6A6375;
  --line: #E5E0EB;
  --paper: #FFFFFF;
  --tint: #F7F5F1;

  --f-head: "Schibsted Grotesk", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-quote: "Newsreader", Georgia, "Times New Roman", serif;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(36,19,63, .06), 0 8px 24px rgba(36,19,63, .08);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

.unit-giallo { --u: var(--giallo); --u-ink: var(--giallo-ink); --u-100: var(--giallo-100); }
.unit-verde  { --u: var(--verde);  --u-ink: var(--verde-ink);  --u-100: var(--verde-100); }
.unit-rosso  { --u: var(--rosso);  --u-ink: var(--rosso-ink);  --u-100: var(--rosso-100); }
.unit-blu    { --u: var(--blu);    --u-ink: var(--blu-ink);    --u-100: var(--blu-100); }
.unit-viola  { --u: var(--viola);  --u-ink: var(--viola-800);  --u-100: var(--viola-100); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 1.0625rem/1.65 var(--f-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--viola); text-underline-offset: .18em; }
a:hover { color: var(--viola-800); }
h1, h2, h3 { font-family: var(--f-head); color: var(--ink); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
/* Fuoco da tastiera: anello doppio, scuro attaccato all'elemento e giallo fuori, così si vede sia sul bianco sia sul viola (WCAG 1.4.11) */
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 2px var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kicker {
  font: 700 .8rem/1.2 var(--f-head);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--viola); margin: 0 0 .9em;
  display: inline-flex; align-items: center; gap: .6em;
}
.kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--muted); }

/* --- Bottoni --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 1rem/1 var(--f-body); text-decoration: none;
  padding: .95em 1.5em; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--viola); color: #fff; }
.btn-primary:hover { background: var(--viola-800); color: #fff; }
.btn-cta { background: var(--giallo); color: var(--ink); padding: .7em 1.3em; }
.btn-cta:hover { background: #FFC930; color: var(--ink); }
.btn-light { background: #fff; color: var(--viola-900); }
.btn-light:hover { background: var(--giallo); color: var(--ink); }
.btn-outline-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--viola-900); }
.btn-ghost { border-color: var(--line); color: var(--viola); background: #fff; }
.btn-ghost:hover { border-color: var(--viola); color: var(--viola); }
.btn-block { width: 100%; }

/* --- Barra branche + intestazione --- */
.branche-bar { display: grid; grid-template-columns: repeat(4, 1fr); height: 5px; }
.branche-bar span:nth-child(1) { background: var(--giallo); }
.branche-bar span:nth-child(2) { background: var(--verde); }
.branche-bar span:nth-child(3) { background: var(--rosso); }
.branche-bar span:nth-child(4) { background: var(--viola); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand img { width: 46px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text small { font: 600 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--viola); margin-bottom: 5px; }
.brand-text strong { font: 800 1.55rem/1 var(--f-head); letter-spacing: -.03em; color: var(--ink); }

.main-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; position: relative; }
.nav-toggle span:first-child, .nav-toggle span:first-child::before, .nav-toggle span:first-child::after {
  position: absolute; left: 12px; width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink); content: ""; transition: transform .2s ease, opacity .2s;
}
.nav-toggle span:first-child { top: 22px; }
.nav-toggle span:first-child::before { left: 0; top: -7px; }
.nav-toggle span:first-child::after { left: 0; top: 7px; }
.nav-open .nav-toggle span:first-child { background: transparent; }
.nav-open .nav-toggle span:first-child::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:first-child::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: 81px 0 auto 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 16px;
    background: #fff; padding: 16px var(--gutter) 28px;
    border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(36,19,63,.12);
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all .2s ease;
    max-height: calc(100dvh - 81px); overflow-y: auto;
  }
  .nav-open .main-nav { transform: none; opacity: 1; visibility: visible; }
}

/* --- Hero home --- */
.hero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: -2; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(36,19,63,.88) 0%, rgba(36,19,63,.55) 45%, rgba(36,19,63,.05) 80%),
    linear-gradient(0deg, rgba(36,19,63,.55) 0%, transparent 40%);
}
.hero-inner { padding-top: 120px; padding-bottom: clamp(56px, 9vw, 110px); }
.hero .kicker { color: var(--giallo); }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .98; letter-spacing: -.035em; max-width: 12ch; }
.hero h1 span { color: var(--giallo); }
.hero .lead { color: rgba(255,255,255,.88); max-width: 34rem; margin-bottom: 1.8em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Il fazzolettone: triangolo verde con bordo giallo */
.scarf {
  position: absolute; right: clamp(-60px, -3vw, -20px); bottom: clamp(-70px, -4vw, -30px);
  width: clamp(160px, 22vw, 300px); aspect-ratio: 1; transform: rotate(-12deg);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.25));
}
.scarf::before, .scarf::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.scarf::before { background: var(--scarf-border); }
.scarf::after { inset: 9% 10% 12% 10%; background: var(--scarf-green); }

/* --- Sezioni --- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-tint { background: var(--tint); }
.section-head { margin-bottom: clamp(24px, 4vw, 44px); }
.section-head h2 { margin: 0; }
.section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.link-more { font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-more::after { content: " →"; }
.empty { color: var(--muted); padding: 24px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }

/* --- Carte unità --- */
.unit-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.unit-card {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border-top: 6px solid var(--u); transition: transform .2s ease, box-shadow .2s ease;
}
.unit-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(36,19,63,.16); color: var(--text); }
.unit-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.unit-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.unit-age { font: 600 .78rem/1.3 var(--f-body); letter-spacing: .04em; color: var(--u-ink); background: var(--u-100); align-self: flex-start; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.unit-card h3 { font-size: 1.45rem; margin-bottom: .35em; }
.unit-card p { color: var(--muted); font-size: .97rem; margin: 0 0 1em; }
.unit-card .arrow { margin-top: auto; font-size: 1.4rem; color: var(--u); font-weight: 800; transition: transform .2s; }
.unit-card:hover .arrow { transform: translateX(6px); }

/* --- Due colonne --- */
.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); }
.two-col-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }

/* --- Eventi --- */
.event-list { display: flex; flex-direction: column; gap: 12px; }
.event-row {
  display: flex; gap: 18px; align-items: center;
  background: #fff; border-radius: var(--radius); padding: 14px 18px 14px 14px;
  border: 1px solid var(--line); position: relative; transition: border-color .15s, box-shadow .15s;
}
.event-row:hover { border-color: var(--u); box-shadow: var(--shadow); }
.event-date {
  flex-shrink: 0; width: 64px; height: 68px; border-radius: 10px;
  background: var(--u); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.unit-giallo .event-date { color: var(--ink); }
.event-date .d { font: 800 1.7rem/1 var(--f-head); }
.event-date .m { font: 600 .75rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
.event-info h3 { font-size: 1.08rem; margin: 4px 0 2px; }
.event-info h3 a { color: var(--ink); text-decoration: none; }
.event-info h3 a::after { content: ""; position: absolute; inset: 0; }
.event-when { margin: 0; color: var(--muted); font-size: .9rem; }
.event-row.is-past { opacity: .7; }
.event-row.is-past .event-date { background: var(--line); color: var(--muted); }

/* --- Tag e meta --- */
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); }
.tag { display: inline-block; font: 600 .75rem/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; }
.tag-giallo { background: var(--giallo-100); color: var(--giallo-ink); }
.tag-verde { background: var(--verde-100); color: var(--verde-ink); }
.tag-rosso { background: var(--rosso-100); color: var(--rosso-ink); }
.tag-blu { background: var(--blu-100); color: var(--blu-ink); }
.tag-viola { background: var(--viola-100); color: var(--viola-800); }
.tag-muted { background: var(--line); color: var(--muted); }

/* --- News --- */
.card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; position: relative; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-media { display: block; aspect-ratio: 16 / 10; background: var(--viola-100); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.03); }
.card-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--u-100), #fff); }
.card-body { padding: 18px 20px 22px; }
.card-body h3 { margin: 10px 0 8px; font-size: 1.2rem; }
.card-body h3 a { color: var(--ink); text-decoration: none; }
.card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.card-body p { color: var(--muted); font-size: .97rem; margin: 0; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-stack { display: grid; gap: 16px; }
.news-card.is-compact { flex-direction: row; }
.news-card.is-compact .card-media { flex: 0 0 34%; aspect-ratio: auto; }
.news-card.is-compact .card-body { padding: 14px 18px; }
.news-card.is-compact .card-body h3 { font-size: 1.05rem; margin-bottom: 0; }
.news-card.is-compact .card-body p { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
/* Argomenti (tag delle news) */
.topic-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--viola); font-weight: 600; font-size: .88rem; text-decoration: none; }
.topic::before { content: "#"; opacity: .55; }
.topic:hover { border-color: var(--viola); background: var(--viola-100); color: var(--viola); }
.topic small { font-weight: 500; color: var(--muted); font-size: .78rem; }
.article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.article-tags-label { margin-right: 4px; font: 600 .78rem/1.8 var(--f-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
/* «Articoli simili» e «Ultime news» in fondo alle news: sfondo viola chiaro */
.section-tint.related-band { background: var(--viola-100); }
/* il bordo alto a carta strappata, come le altre fasce del sito: la fascia sale di --torn sopra la fine dell'articolo */
.related-band { --torn: 24px; position: relative; z-index: 1; margin-top: calc(var(--torn) * -1);
  -webkit-mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat;
  mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.related-grid.is-single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.related-title { display: grid; gap: 2px; margin: 0 0 16px; font-size: 1.45rem; }
.related-title span { font: 600 .76rem/1.5 var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--viola); }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mini-news { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.mini-news:hover { border-color: var(--viola); transform: translateX(3px); color: var(--ink); }
.mini-thumb { display: grid; place-items: center; width: 96px; height: 72px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--u-100, var(--viola-100)); }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-thumb .unit-icon { width: 40px; height: 40px; }
.mini-body { display: grid; gap: 4px; min-width: 0; }
.mini-body strong { font: 700 1rem/1.3 var(--f-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-body time { font-size: .84rem; color: var(--muted); }
.related-col .link-more { display: inline-block; margin-top: 14px; }
/* Le due colonne sono riquadri con un elenco a righe: «Articoli simili» bianco, «Ultime news» viola scuro */
.related-col { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
/* Le righe si dividono l'altezza del riquadro in parti uguali: niente spazio vuoto in fondo */
.related-col { display: flex; flex-direction: column; }
.related-col .mini-list { flex: 1; display: flex; flex-direction: column; gap: 0; }
.related-col .mini-list li { flex: 1; display: flex; }
.related-col .mini-list li .mini-news { flex: 1; }
.related-col .mini-list li + li { border-top: 1px solid var(--line); }
.related-col .mini-news { padding: 12px 0; border: 0; border-radius: 0; background: none; }
.related-col .mini-news:hover { color: var(--viola); }
.related-col .mini-thumb { width: 64px; height: 64px; border-radius: 50%; }
/* «Articoli simili»: anello del colore dell'unità attorno alla foto */
.related-col:not(.related-latest) .mini-thumb { margin-left: 4px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--u, var(--viola)); }
.related-latest { background: var(--viola-800); color: #fff; }
.related-latest .related-title { color: #fff; }
.related-latest .related-title span { color: var(--giallo); }
.related-latest .mini-list li + li { border-top-color: rgba(255,255,255,.14); }
.related-latest .mini-news { color: #fff; }
.related-latest .mini-news:hover { color: var(--giallo); }
.related-latest .mini-thumb { background: var(--viola-600); }
.related-latest .mini-body time { color: var(--viola-300); }
/* «Tutte le news» in alto a destra, sulla riga del titolo */
.related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 16px; margin: 0 0 16px; }
.related-head .related-title { margin: 0; }
.related-head .link-more { margin: 0; font-size: .92rem; }
.related-latest .link-more { color: var(--giallo); }
.related-latest .link-more:hover { color: #fff; }
@media (max-width: 820px) { .related-grid { grid-template-columns: 1fr; } }
.tag-back { margin: 0 0 20px; }
.filters a { text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--text); padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; }
.filters a:hover { border-color: var(--viola); color: var(--viola); }
.filters a[aria-current] { background: var(--viola); border-color: var(--viola); color: #fff; }
.filters a.f-giallo[aria-current] { background: var(--giallo); border-color: var(--giallo); color: var(--ink); }
.filters a.f-blu[aria-current] { background: var(--blu); border-color: var(--blu); }
.filters a.f-verde[aria-current] { background: var(--verde); border-color: var(--verde); }
.filters a.f-rosso[aria-current] { background: var(--rosso); border-color: var(--rosso); }
.events-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.list-title { font-size: 1.3rem; margin: 12px 0 18px; }
.list-title + .event-list + .list-title { margin-top: 48px; }
.event-list-wide { margin-bottom: 40px; }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.pager a { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.pager a[aria-current] { background: var(--viola); color: #fff; border-color: var(--viola); }

/* --- Storia --- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.story-media { margin: 0; position: relative; isolation: isolate; }
.story-media img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.story-media::after {
  content: ""; position: absolute; left: -16px; bottom: -16px; width: 40%; height: 40%; z-index: -1;
  border-radius: var(--radius);
  background: repeating-linear-gradient(-45deg, var(--viola-100) 0 8px, transparent 8px 16px);
}
.story-text p { color: var(--text); }
.story-text .btn { margin-top: .6em; }

/* --- Banda iscrizioni --- */
.cta-band { position: relative; color: #fff; overflow: hidden; isolation: isolate; padding: clamp(64px, 10vw, 120px) 0; }
.cta-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(70,38,120,.95), rgba(70,38,120,.72) 60%, rgba(70,38,120,.35)); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-inner h2 { color: #fff; }
.cta-inner p { max-width: 36rem; color: rgba(255,255,255,.9); margin: 0; }

/* --- Hero di pagina --- */
.page-hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; padding: clamp(80px, 12vw, 150px) 0 clamp(44px, 6vw, 72px); }
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(36,19,63,.9), rgba(36,19,63,.45)); }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--verde) 0 42px, var(--giallo) 42px 56px); } /* verde e giallo alternati, come il fazzolettone */
.page-hero.hero-unit::after { height: 8px; background: var(--hero-accent); } /* pagine delle unità: colore di branca */
.hero-unit.hero-viola { --hero-accent: var(--viola-300); }
.hero-giallo { --hero-accent: var(--giallo); }
.hero-blu { --hero-accent: #6FB4EA; }
.hero-verde { --hero-accent: var(--verde); }
.hero-rosso { --hero-accent: var(--rosso); }
.hero-viola { --hero-accent: var(--giallo); }
.page-hero h1 { color: #fff; margin-bottom: .25em; }
.page-hero .kicker { color: var(--hero-accent); }
/* pagine delle unità: l'età in una pastiglia piena nel colore della branca, scritta bianca (sul giallo scura, per leggerla) */
.page-hero .kicker.hero-badge { padding: 7px 16px 6px; border-radius: 999px; background: var(--u); color: #fff; font-size: .9rem; letter-spacing: .1em; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.page-hero .kicker.hero-badge::before { content: none; }
.page-hero .kicker.hero-badge.unit-giallo { color: var(--ink); }
@media (max-width: 380px) { .page-hero .kicker.hero-badge { padding-inline: 12px; font-size: .78rem; letter-spacing: .05em; } } /* «5-7 anni: Castorini e Castorine» su una riga */
.page-hero .lead { color: rgba(255,255,255,.88); max-width: 40rem; margin: 0; }
/* pagine delle unità: il testo in apertura (più lungo) un po' più piccolo e più largo, su meno righe */
.page-hero.hero-unit .lead { font-size: clamp(1.02rem, 1.35vw, 1.16rem); max-width: 54rem; }

/* --- Pagine unità --- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: relative; }
.pillar-n { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--u); color: #fff; font: 800 1.1rem/1 var(--f-head); margin-bottom: 18px; }
.unit-giallo .pillar-n { color: var(--ink); }
.pillar h2 { font-size: 1.3rem; }
.pillar p { color: var(--muted); margin: 0; }
.motto-band { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 48px; padding: 26px 32px; border-radius: var(--radius); background: var(--u-100); }
.motto-band span { display: block; font: 600 .75rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--u-ink); margin-bottom: 6px; }
.motto-band strong { font: 800 1.45rem/1.2 var(--f-head); color: var(--ink); }


/* --- Articolo --- */
.article { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.article-head { margin-bottom: 32px; }
.article-head h1 { margin: 14px 0 .4em; font-size: clamp(2rem, 4.5vw, 3rem); }
.back { display: inline-block; font-weight: 600; text-decoration: none; margin-bottom: 18px; font-size: .95rem; }
.article-figure { margin: 0 auto 40px; max-width: 1000px; }
.article-figure img { display: block; margin: 0 auto; border-radius: var(--radius); width: auto; max-width: 100%; height: auto; max-height: 80vh; }
.prose { font-size: 1.1rem; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 1.6em 0; padding: 18px 24px; border-left: 4px solid var(--u, var(--viola)); background: var(--u-100, var(--viola-50)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--ink); }
.event-facts { display: grid; gap: 12px; margin: 20px 0 28px; padding: 22px 24px; border-radius: var(--radius); background: var(--tint); }
.event-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.event-facts dt { font: 600 .78rem/1.8 var(--f-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.event-facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.event-map { margin-top: clamp(32px, 5vw, 48px); }
.event-map h2 { font-size: 1.6rem; margin: 0 0 .7em; }
.event-map-frame { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--tint); box-shadow: var(--shadow); }
.event-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.event-map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; }
.event-map-foot > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.event-map-foot .icon { width: 20px; height: 20px; color: var(--viola); flex-shrink: 0; }
@media (max-width: 600px) { .event-map-frame { aspect-ratio: 4 / 3; } }
.event-files { margin-top: clamp(32px, 5vw, 48px); }
.event-files h2 { font-size: 1.6rem; margin: 0 0 .7em; }
.event-docs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.event-pay { margin-top: clamp(32px, 5vw, 48px); scroll-margin-top: 96px; }
.event-pay h2 { font-size: 1.6rem; margin: 0 0 .5em; }
.event-pay > p { margin: 0 0 20px; }
.event-pay .census-pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }

/* --- Iscrizioni e contatti --- */
.steps { counter-reset: s; list-style: none; padding: 0 !important; }
.steps li { counter-increment: s; position: relative; padding-left: 52px; margin-bottom: 18px; min-height: 36px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--viola); color: #fff; display: grid; place-items: center; font: 800 1rem/1 var(--f-head); }
.signup-box { background: var(--viola); color: #fff; border-radius: var(--radius); padding: 32px; position: sticky; top: 110px; }
.signup-box h2 { color: #fff; font-size: 1.5rem; }
.signup-box p { color: rgba(255,255,255,.88); }
.signup-box .btn-primary { background: var(--giallo); color: var(--ink); }
.signup-box .btn-primary:hover { background: #fff; }
.signup-box .small { font-size: .9rem; margin: 16px 0 0; }
.signup-box a:not(.btn) { color: #fff; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-card { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.contact-card h2 { font-size: .8rem; font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--viola); margin-bottom: .6em; }
.big-link { font: 800 1.2rem/1.3 var(--f-head); word-break: break-word; }
.muted { color: var(--muted); }
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-weight: 600; }
.notfound { text-align: center; min-height: 50vh; display: grid; place-items: center; }

/* --- Footer --- */
.site-footer { background: var(--viola-900); color: rgba(255,255,255,.78); font-size: .95rem; position: relative; }
.rope { height: 10px; background: repeating-linear-gradient(-55deg, var(--viola) 0 7px, var(--viola-600) 7px 9px, var(--viola) 9px 14px); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
.site-footer h2 { font: 600 .78rem/1 var(--f-body); color: var(--giallo); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--giallo); text-decoration: underline; }
.footer-brand img { width: 62px; margin-bottom: 18px; }
.footer-brand strong { color: #fff; }
.footer-brand blockquote { margin: 22px 0 0; padding-left: 16px; border-left: 3px solid var(--giallo); font-style: italic; color: rgba(255,255,255,.85); }
.footer-brand cite { display: block; font-style: normal; font-size: .85rem; margin-top: 6px; color: rgba(255,255,255,.6); }
.footer-5x1000 .cf { font: 800 1.5rem/1.2 var(--f-head); color: #fff; letter-spacing: .04em; background: rgba(255,255,255,.08); padding: 12px 16px; border-radius: 10px; display: inline-block; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 4px; padding-bottom: 26px; font-size: .85rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: rgba(255,255,255,.75); }
/* Icone accanto ai link (Accessibilità, Privacy, Cookie, Area riservata): piccole e dello stesso colore del testo */
.footer-links a:has(> .icon) { display: inline-flex; align-items: center; gap: 6px; }
.footer-links .icon { width: 15px; height: 15px; }

/* --- Responsive --- */
@media (max-width: 1000px) {
  .unit-grid { grid-template-columns: repeat(2, 1fr); }
  .unit-grid > :first-child { grid-column: 1 / -1; }
  .unit-grid > :first-child img { aspect-ratio: 21 / 9; }
  .two-col, .two-col-wide, .story { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pillars, .contact-grid { grid-template-columns: 1fr; }
  .signup-box { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .header-inner { min-height: 66px; }
  .main-nav { inset: 71px 0 auto 0; max-height: calc(100dvh - 71px); }
  .brand img { width: 38px; }
  .brand-text strong { font-size: 1.3rem; }
  .unit-grid, .news-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 640px; }
  .hero::before { background: linear-gradient(0deg, rgba(36,19,63,.92) 0%, rgba(36,19,63,.55) 60%, rgba(36,19,63,.25) 100%); }
  .scarf { width: 130px; right: -40px; bottom: auto; top: 60px; }
  .news-card.is-compact .card-media { flex-basis: 38%; }
  .event-row { gap: 14px; }
  .event-date { width: 56px; height: 60px; }
  .motto-band { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
.two-col .section-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.pager .gap { align-self: center; color: var(--muted); padding: 0 2px; }
.pager { flex-wrap: wrap; }

/* Colonia: fatti, citazione e mascotte nella banda */
.motto-band { align-items: center; position: relative; }
.motto-band blockquote { margin: 0; font-style: italic; color: var(--u-ink); font-size: 1.05rem; }
.motto-band blockquote cite { display: block; font-style: normal; font-size: .8rem; margin-top: 4px; }
.motto-band.has-mascot { padding-right: 220px; min-height: 150px; }
.motto-band .mascot { position: absolute; right: 18px; bottom: 0; width: 190px; height: auto; mix-blend-mode: multiply; }
.unit-note { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; color: var(--muted); font-size: .92rem; }
@media (min-width: 1001px) and (max-width: 1240px) { .unit-grid { grid-template-columns: repeat(3, 1fr); } .unit-grid > :nth-child(-n+2) { grid-column: span 1; } }
@media (max-width: 640px) {
  .motto-band.has-mascot { padding-right: 22px; padding-bottom: 170px; }
  .motto-band .mascot { width: 150px; right: 50%; transform: translateX(50%); }
  .unit-grid > :first-child img { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   UX ispirata a scout.org: barra utility, mega-menu, numeri, blocchi, tessere
   ========================================================================== */
.branche-bar { grid-template-columns: repeat(5, 1fr); }
.branche-bar span:nth-child(1) { background: var(--blu); }
.branche-bar span:nth-child(2) { background: var(--giallo); }
.branche-bar span:nth-child(3) { background: var(--verde); }
.branche-bar span:nth-child(4) { background: var(--rosso); }
.branche-bar span:nth-child(5) { background: var(--viola); }
.icon { flex-shrink: 0; vertical-align: middle; }

.utility-bar { background: var(--viola-900); color: rgba(255,255,255,.75); font-size: .82rem; }
.utility-inner { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 36px; }
.utility-links { display: flex; align-items: center; gap: 18px; }
.utility-links a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; }
.utility-links a:hover { color: var(--giallo); }
.utility-links .icon-link { display: inline-flex; }
.utility-links .icon { width: 16px; height: 16px; }

.site-header { position: sticky; top: 0; }
.header-inner { gap: 20px; }
.main-nav { margin-left: auto; align-self: stretch; }
.mega-nav { display: flex; align-items: stretch; gap: 4px; list-style: none; margin: 0; padding: 0; height: 100%; }
.has-mega { display: flex; align-items: center; }
.mega-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: 700 1rem/1 var(--f-body); cursor: pointer; position: relative;
}
.mega-toggle .icon { width: 16px; height: 16px; transition: transform .2s; }
.mega-toggle:hover, .has-mega.is-open .mega-toggle { background: var(--viola-50); color: var(--viola); }
.has-mega.is-open .mega-toggle .icon { transform: rotate(180deg); }
.has-mega.is-active > .mega-toggle::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--viola); }
.mega {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 24px 48px rgba(36,19,63,.14);
}
.has-mega.is-open .mega { display: block; animation: megaIn .18s ease; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega-inner { display: grid; grid-template-columns: 1fr 2.4fr; gap: 48px; padding-top: 36px; padding-bottom: 40px; }
.mega-intro { border-right: 1px solid var(--line); padding-right: 40px; }
.mega-title { font: 800 1.6rem/1.15 var(--f-head); color: var(--ink); margin-bottom: .4em; }
.mega-intro p { color: var(--muted); }
.mega-links, .mega-units { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; align-content: start; }
.mega-links a, .mega-unit { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background .15s; }
.mega-links a:hover { background: var(--viola-50); }
.mega-links strong, .mega-unit strong { font-size: 1.05rem; }
.mega-links strong::after { content: " →"; color: var(--viola); opacity: 0; transition: opacity .15s; }
.mega-links a:hover strong::after { opacity: 1; }
.mega-links small, .mega-unit small { color: var(--muted); font-size: .88rem; }
.mega-unit { flex-direction: row; align-items: center; gap: 14px; border-left: 4px solid var(--u); background: var(--u-100); }
.mega-unit:hover { filter: brightness(.97); color: var(--ink); }
.mega-unit span { display: flex; flex-direction: column; }
.mobile-extra { display: none; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.search-toggle { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--viola-50); color: var(--viola); }
.search-panel { border-top: 1px solid var(--line); background: var(--viola-50); }
.search-form { display: flex; gap: 10px; padding-top: 16px; padding-bottom: 16px; }
.search-form input, .news-search input {
  flex: 1; min-width: 0; font: 400 1.05rem/1.2 var(--f-body); padding: 13px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink);
}
.search-form input:focus, .news-search input:focus { outline: none; border-color: var(--viola); box-shadow: 0 0 0 3px var(--viola-100); }
.news-search { display: flex; gap: 10px; margin-bottom: 18px; max-width: 640px; }
.search-info { color: var(--muted); margin: -8px 0 24px; }

@media (max-width: 1180px) {
  .main-nav {
    position: absolute; inset: 100% 0 auto 0; z-index: 49; display: block;
    background: #fff; padding: 8px var(--gutter) 24px; border-top: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(36,19,63,.12); max-height: calc(100dvh - 90px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .2s ease;
  }
  .nav-open .main-nav { transform: none; opacity: 1; visibility: visible; }
  .mega-nav { flex-direction: column; gap: 0; height: auto; }
  .has-mega { display: block; border-bottom: 1px solid var(--line); }
  .mega-toggle { width: 100%; justify-content: space-between; height: 58px; padding: 0 4px; font-size: 1.15rem; border-radius: 0; }
  .mega-toggle:hover, .has-mega.is-open .mega-toggle { background: transparent; }
  .has-mega.is-active > .mega-toggle::after { left: -12px; right: auto; top: 18px; bottom: 18px; width: 3px; height: auto; }
  .mega { position: static; box-shadow: none; border: 0; animation: none !important; }
  .mega-inner { display: block; padding: 0 0 14px; }
  .mega-intro { display: none; }
  .mega-links, .mega-units { grid-template-columns: 1fr; gap: 6px; }
  .mega-links a { padding: 10px 12px; background: var(--tint); }
  .mobile-extra { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
  .mobile-extra a { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-weight: 600; color: var(--text); }
  .header-actions .btn-cta { padding: .6em 1em; }
}
@media (max-width: 760px) {
  .utility-bar { display: none; }
  .header-actions .btn-cta { display: none; }
}

/* --- Unità: pittogramma colorato --- */
.unit-icon { display: inline-block; width: 48px; height: 48px; flex-shrink: 0; background: var(--u, var(--viola));
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.unit-icon-img { background: none; -webkit-mask: none; mask: none; border-radius: 50%; object-fit: contain; }

/* --- Numeri --- */
.stats { background: var(--viola); color: #fff; position: relative; }
.stats::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--blu) 0 20%, var(--giallo) 20% 40%, var(--verde) 40% 60%, var(--rosso) 60% 80%, var(--viola-300) 80%); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; padding-top: 44px; padding-bottom: 48px; }
.stats .stat { display: flex; flex-direction: column; gap: 6px; border-left: 3px solid rgba(255,255,255,.25); padding-left: 18px; }
.stats .stat strong { font: 800 clamp(2.2rem, 4.4vw, 3.4rem)/1 var(--f-head); letter-spacing: -.03em; color: #fff; }
.stats .stat span { color: rgba(255,255,255,.85); font-size: .98rem; }

/* --- Blocchi alternati --- */
.features .wrap { display: grid; gap: clamp(48px, 8vw, 96px); }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.feature.is-reversed .feature-media { order: 2; }
.feature-media { margin: 0; }
.feature-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.feature-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.feature-text p:not(.kicker) { font-size: 1.1rem; color: var(--text); }

/* --- Storie --- */
.card-foot { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: .85rem !important; color: var(--muted); }
.read-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--viola); }
.read-more .icon { width: 16px; height: 16px; transition: transform .15s; }
.card:hover .read-more .icon { transform: translateX(3px); }
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-body .card-foot { margin-top: auto !important; }
.news-card { height: 100%; }
.events-head { margin-top: clamp(48px, 7vw, 80px); }
.event-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* --- Tessere unità + fisarmonica mobile --- */
.unit-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.unit-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 22px; text-decoration: none; color: var(--text);
  background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--u); border-radius: var(--radius); transition: transform .2s, box-shadow .2s;
}
.unit-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--text); }
.unit-tile h3 { margin: 6px 0 0; font-size: 1.35rem; }
.unit-tile .unit-age { margin: 0; }
.unit-tile p { color: var(--muted); font-size: .95rem; margin: 0; flex: 1; }
.unit-tile .link-more { color: var(--u-ink); }
.unit-accordion { display: none; }
.unit-accordion details { border: 1px solid var(--line); border-left: 5px solid var(--u); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.unit-accordion summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.unit-accordion summary::-webkit-details-marker { display: none; }
.unit-accordion summary::after { content: "+"; margin-left: auto; font: 700 1.5rem/1 var(--f-body); color: var(--u-ink); }
.unit-accordion details[open] summary::after { content: "−"; }
.unit-accordion summary span { display: flex; flex-direction: column; }
.unit-accordion summary strong { font: 800 1.15rem/1.2 var(--f-head); color: var(--ink); }
.unit-accordion summary small { color: var(--muted); }
.unit-accordion .unit-icon { width: 40px; height: 40px; }
.unit-accordion details p, .unit-accordion details .link-more { margin: 0 16px 14px 70px; display: block; }
.unit-accordion details .link-more { margin-bottom: 18px; color: var(--u-ink); }

/* --- Sostienici --- */
.support { position: relative; color: #fff; isolation: isolate; overflow: hidden; padding: clamp(64px, 9vw, 112px) 0; }
.support > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.support::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(36,19,63,.95) 30%, rgba(70,38,120,.75)); }
.support-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.support h2 { color: #fff; }
.support .kicker { color: var(--giallo); }
.support p { color: rgba(255,255,255,.88); max-width: 34rem; }
.support-cf { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 26px 30px; text-align: center; border-bottom: 6px solid var(--giallo); }
.support-cf span { display: block; font: 600 .78rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--viola); margin-bottom: 10px; }
.support-cf strong { font: 800 clamp(1.8rem, 3.6vw, 2.6rem)/1 var(--f-head); letter-spacing: .03em; }

/* --- Social --- */
.social .section-head .lead { margin: .4em 0 0; }
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.social-tile { display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: var(--radius); background: var(--viola-50); color: var(--ink); text-decoration: none; transition: background .2s, color .2s; }
.social-tile .icon { width: 30px; height: 30px; color: var(--viola); margin-bottom: 8px; }
.social-tile strong { font: 800 1.3rem/1.2 var(--f-head); }
.social-tile span { color: var(--muted); }
.social-tile:hover { background: var(--viola); color: #fff; }
.social-tile:hover .icon, .social-tile:hover span { color: #fff; }

/* --- Link rapidi --- */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.quick-tile { display: flex; flex-direction: column; gap: 4px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.quick-tile:hover { border-color: var(--viola); transform: translateY(-2px); color: var(--ink); }
.quick-tile .icon { width: 28px; height: 28px; color: var(--viola); margin-bottom: 10px; }
.quick-tile strong { font: 800 1.15rem/1.2 var(--f-head); }
.quick-tile strong::after { content: " →"; color: var(--viola); }
.quick-tile span { color: var(--muted); font-size: .92rem; }

/* --- Co.Ca. --- */
.become { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--viola-50); border: 1px solid var(--viola-100); }
.become h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); max-width: 28ch; }
.become p:not(.kicker) { max-width: 46rem; margin: 0; }

/* --- Footer --- */
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-top h2 { font: 800 1.6rem/1.2 var(--f-head); color: #fff; text-transform: none; letter-spacing: -.01em; margin-bottom: .3em; }
.footer-top p { margin: 0; }
.newsletter-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); }
.footer-social a:hover { background: var(--giallo); color: var(--ink); text-decoration: none; }

@media (max-width: 1100px) {
  .unit-tiles { grid-template-columns: repeat(3, 1fr); }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .feature, .support-inner { grid-template-columns: 1fr; }
  .feature.is-reversed .feature-media { order: 0; }
  .event-strip { grid-template-columns: 1fr; }
  .mega-inner { grid-template-columns: 1fr; }
  .become { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .unit-tiles { display: none; }
  .unit-accordion { display: block; }
  .quick-grid { grid-template-columns: 1fr; }
  .stats .stat { padding-left: 14px; }
  .news-search { flex-direction: column; }
}

.card-body, .prose, .event-info { overflow-wrap: anywhere; }
.card-placeholder { display: grid !important; place-items: center; background: var(--u-100) !important; }
.card-placeholder .unit-icon { width: 30%; height: auto; aspect-ratio: 1; max-width: 96px; opacity: .55; }
.news-card.is-compact .card-placeholder .unit-icon { width: 44%; }

/* ==========================================================================
   Header viola, slider in apertura, tappe con foto, news su sfondo colorato
   "Cuciture" (stitches) e forme a distintivo ispirate al brand World Scouting,
   con il viola AGESCI al posto del viola WOSM
   ========================================================================== */
.site-header { background: var(--viola); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand-text small { color: var(--giallo); }
.brand-text strong { color: #fff; }
.nav-single { display: flex; align-items: center; }
.nav-link, .mega-toggle { color: #fff; }
.nav-link {
  display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 10px;
  font: 700 1rem/1 var(--f-head); text-decoration: none; position: relative;
}
.nav-link:hover, .mega-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.has-mega.is-open .mega-toggle { background: #fff; color: var(--viola); }
.nav-link[aria-current="page"]::after, .has-mega.is-active > .mega-toggle::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--verde) 0 7px, transparent 7px 11px, var(--giallo) 11px 18px, transparent 18px 22px);
}
.search-toggle { color: #fff; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: rgba(255,255,255,.14); color: #fff; }
.nav-toggle span:first-child, .nav-toggle span:first-child::before, .nav-toggle span:first-child::after { background: #fff; }
.nav-open .nav-toggle span:first-child { background: transparent; }
@media (max-width: 1180px) {
  .nav-single { display: block; border-bottom: 1px solid var(--line); }
  .nav-link, .mega-toggle { color: var(--ink); }
  .nav-link { width: 100%; height: 58px; padding: 0 4px; font-size: 1.15rem; border-radius: 0; }
  .nav-link:hover, .mega-toggle:hover, .has-mega.is-open .mega-toggle { background: transparent; color: var(--viola); }
  .nav-link[aria-current="page"]::after { left: -12px; right: auto; top: 18px; bottom: 18px; width: 3px; height: auto; background: var(--viola); }
}

/* --- Cuciture --- */
.stitched { position: relative; padding-bottom: 14px; }
.stitched::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--giallo) 0 12px, transparent 12px 19px); }

/* --- Slider in apertura --- */
.hero-slider { position: relative; height: min(82vh, 720px); min-height: 540px; overflow: hidden; color: #fff; background: var(--viola-900); }
.slide { position: absolute; inset: 0; display: flex; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 8s ease-out; }
.slide.is-active .slide-img { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(36,19,63,.9) 0%, rgba(36,19,63,.55) 45%, rgba(36,19,63,.1) 80%), linear-gradient(0deg, rgba(36,19,63,.75) 0%, transparent 45%); }
.slide-inner { position: relative; z-index: 2; padding-bottom: 120px; }
.slide .kicker { color: var(--giallo); }
.slide-title { color: #fff; font: 800 clamp(2.4rem, 6vw, 4.6rem)/1 var(--f-head); letter-spacing: -.035em; max-width: 15ch; margin-bottom: .35em; }
.slide-title span { color: var(--giallo); }
.slide .lead { color: rgba(255,255,255,.9); max-width: 36rem; margin-bottom: 1.6em; }
.slider-controls { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.slider-dots { display: flex; gap: 8px; }
/* Trattini dello slider: area cliccabile alta 24 px (WCAG 2.5.8), il trattino resta sottile */
.slider-dots .dot { width: 28px; height: 24px; padding: 0; border: 0; cursor: pointer; background: transparent; position: relative; }
.slider-dots .dot::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.45); transition: background .2s; }
.slider-dots .dot.is-active { width: 62px; }
/* la slide attiva: trattini verdi e gialli alternati, come sotto la voce del menu. 62 px = due motivi da 22 più un trattino verde e uno giallo: finisce su un trattino */
.slider-dots .dot.is-active::before { border-radius: 0; background: repeating-linear-gradient(90deg, var(--verde-logo) 0 7px, transparent 7px 11px, var(--giallo-logo) 11px 18px, transparent 18px 22px); }
.slider-arrows { display: flex; gap: 8px; }
.slider-arrows button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(36,19,63,.25); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.slider-arrows button:hover { background: #fff; color: var(--viola); }
.slider-prev .icon { transform: rotate(180deg); }
.slider-pause span { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.slider-pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }

/* --- Il cammino: quattro tappe con foto --- */
.path-intro { max-width: 30rem; color: var(--muted); margin: 0; }
.path-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.path-card {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
  border-radius: 26px 26px 26px 6px; color: #fff; text-decoration: none; box-shadow: var(--shadow);
}
.path-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; z-index: -1; }
.path-card:hover img { transform: scale(1.05); }
.path-card::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(0deg, rgba(25,15,38,.9) 0%, rgba(25,15,38,.45) 45%, rgba(25,15,38,0) 75%); }
.path-card::before { content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 2px dashed rgba(255,255,255,.55); border-radius: 18px 18px 18px 2px; }
.path-card { border-bottom: 6px solid var(--u); }
.path-step { position: absolute; top: 24px; left: 24px; z-index: 3; background: var(--u); color: #fff; font: 700 .76rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.unit-giallo .path-step { color: var(--ink); }
.path-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; gap: 16px; padding: 26px 30px 28px; }
.path-body .unit-icon { width: 54px; height: 54px; background: #fff; }
.path-body .unit-icon-img { background: #fff; padding: 2px; }
.path-body h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 4px; }
.path-age { display: block; font-weight: 600; font-size: .92rem; color: rgba(255,255,255,.9); }
.path-body p { color: rgba(255,255,255,.82); margin: .5em 0 0; max-width: 38ch; font-size: .98rem; }
.path-go { margin-left: auto; flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; background: var(--u); color: #fff; display: grid; place-items: center; transition: transform .2s; }
.unit-giallo .path-go { color: var(--ink); }
.path-card:hover .path-go { transform: translateX(4px); }

.coca-card {
  position: relative; margin-top: 24px; display: grid; grid-template-columns: 2fr 3fr; overflow: hidden;
  border-radius: 6px 26px 26px 26px; background: var(--viola-50); color: var(--ink); text-decoration: none; border: 1px solid var(--viola-100);
}
.coca-card::before { content: ""; position: absolute; inset: 10px; border: 2px dashed var(--viola-100); border-radius: 2px 18px 18px 18px; pointer-events: none; }
.coca-card img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.coca-body { padding: clamp(28px, 4vw, 48px); align-self: center; }
.coca-body h3 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: .35em; }
.coca-body p:not(.kicker) { color: var(--text); max-width: 46ch; }
.coca-card:hover { color: var(--ink); border-color: var(--viola); }

/* --- Numeri: chiari, separati da cuciture --- */
.stats { background: var(--viola-50); color: var(--ink); }
.stats .stat { border-left: 2px dashed var(--viola-100); }
.stats .stat strong { color: var(--viola); }
.stats .stat span { color: var(--muted); }

/* --- News su sfondo viola --- */
.news-band { background: var(--viola); position: relative; }
.news-band::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 12px, transparent 12px 20px); }
.news-band .section-head h2 { color: #fff; }
.news-band .kicker { color: var(--giallo); }
.news-band .link-more { color: #fff; }
.news-band .link-more:hover { color: var(--giallo); }
.news-band .card { border: 0; box-shadow: 0 10px 30px rgba(20,10,35,.25); }
.news-band .event-row { border: 0; }
.news-band .empty { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.support-cf { position: relative; }
.support-cf::before { content: ""; position: absolute; inset: 7px; border: 2px dashed var(--viola-100); border-radius: 10px; pointer-events: none; }

@media (max-width: 860px) {
  .path-grid { grid-template-columns: 1fr; }
  .coca-card { grid-template-columns: 1fr; }
  .coca-card img { min-height: 200px; max-height: 260px; }
  .slide-inner { padding-bottom: 110px; }
}
@media (max-width: 640px) {
  .hero-slider { height: 640px; min-height: 0; }
  .slide::after { background: linear-gradient(0deg, rgba(36,19,63,.95) 0%, rgba(36,19,63,.6) 55%, rgba(36,19,63,.25) 100%); }
  .slider-controls { bottom: 22px; }
  .slider-arrows button { width: 40px; height: 40px; }
  .path-card { aspect-ratio: 4 / 5; }
  .path-body { padding: 22px; flex-wrap: wrap; }
  .path-body .unit-icon { width: 44px; height: 44px; }
  .path-go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide-img { transition: none !important; transform: none !important; }
}

.nav-link, .mega-toggle { white-space: nowrap; }
@media (min-width: 1181px) and (max-width: 1360px) {
  .nav-link, .mega-toggle { padding: 0 10px; font-size: .95rem; }
  .header-inner { gap: 12px; }
  /* «Gruppo Scout» resta: sta sopra «Albenga 5» e non toglie spazio al menu; solo un po' più compatto */
  .brand-text small { letter-spacing: .1em; }
}
@media (max-width: 640px) { .path-body .unit-icon { display: none; } }

/* --- Tappe su 4 colonne + banner Co.Ca. senza foto --- */
.path-card img { position: static; }
.path-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.path-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.path-card { aspect-ratio: 3 / 4.2; }
.path-body { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 22px 24px; }
.path-body h3 { font-size: 1.6rem; }
.path-body p { font-size: .92rem; }
.path-body .unit-icon { width: 46px; height: 46px; }
.path-go { position: absolute; right: 20px; top: 20px; width: 42px; height: 42px; margin: 0; }
.path-step { top: 22px; left: 22px; }

.coca-banner {
  position: relative; margin-top: 24px; display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
  padding: clamp(26px, 3.5vw, 40px) clamp(26px, 4vw, 52px); border-radius: 6px 26px 26px 26px;
  background: var(--viola-100); border: 2px solid var(--viola); color: var(--ink); text-decoration: none; transition: box-shadow .2s;
}
.coca-banner::before { content: ""; position: absolute; inset: 9px; border: 2px dashed rgba(70,38,120,.28); border-radius: 2px 18px 18px 18px; pointer-events: none; }
.coca-banner:hover { box-shadow: var(--shadow); color: var(--ink); }
.coca-banner .unit-icon { width: 72px; height: 72px; }
.coca-banner .coca-body { flex: 1; padding: 0; }
.coca-banner h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 .3em; }
.coca-banner .coca-body p:not(.kicker) { margin: 0; color: var(--text); max-width: 62ch; }
.coca-banner .btn { flex-shrink: 0; }

@media (max-width: 1100px) {
  .path-grid { grid-template-columns: repeat(2, 1fr); }
  .path-card { aspect-ratio: 4 / 4.2; }
}
@media (max-width: 760px) {
  .coca-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .path-grid { grid-template-columns: 1fr; }
  .path-card { aspect-ratio: 4 / 4.4; }
  .path-body .unit-icon { display: inline-block; }
  .path-go { display: grid; }
}

/* --- Eventi in sezione propria --- */
.events-band { background: var(--tint); position: relative; }
.events-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--blu) 0 25%, var(--giallo) 25% 50%, var(--verde) 50% 75%, var(--rosso) 75%); }
.events-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.events-intro h2 { margin-bottom: .5em; }
.events-intro p:not(.kicker) { color: var(--muted); max-width: 34rem; }
.events-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.events-actions .icon { width: 18px; height: 18px; }
.events-band .event-row { padding: 18px 22px 18px 18px; }
.events-band .event-date { width: 70px; height: 74px; }
@media (max-width: 860px) { .events-layout { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pittogrammi dell'immagine coordinata AGESCI come elementi grafici
   ========================================================================== */
.tag { display: inline-flex; align-items: center; gap: 5px; }
.tag .unit-icon { width: 13px; height: 13px; background: currentColor; }

.footer-rule { height: 2px; margin: 12px 0 30px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 12px, transparent 12px 20px); }

/* Filigrana del giglio nella sezione news */
.news-band { overflow: hidden; isolation: isolate; }
.news-band::after { content: ""; position: absolute; z-index: -1; right: -90px; top: 40px; width: 460px; height: 520px; opacity: .07;
  background: url(../img/varianti/agesci-bianco-400.webp) center / contain no-repeat; transform: rotate(-12deg); pointer-events: none; }

/* Pittogramma grande nell'hero delle pagine unità */
/* Simbolo della branca nell'angolo in basso a destra, tagliato di poco dal bordo inferiore (sotto la riga colorata) */
.hero-mark { position: absolute; right: clamp(8px, 3vw, 56px); bottom: calc(-1 * clamp(26px, 3.4vw, 50px)); transform: rotate(-8deg); z-index: 0; opacity: .9; pointer-events: none; }
.hero-mark .unit-icon { width: clamp(150px, 22vw, 290px); height: clamp(150px, 22vw, 290px); background: var(--hero-accent, #fff); opacity: .55; }
.page-hero-inner { position: relative; z-index: 1; }

/* Filigrana nel banner Co.Ca. e nella banda 5×1000 */
.coca-banner { overflow: hidden; }
.coca-banner::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 200px; height: 200px; opacity: .06;
  background: var(--viola); -webkit-mask: url(../img/varianti/agesci-viola-400.webp) center / contain no-repeat; mask: url(../img/varianti/agesci-viola-400.webp) center / contain no-repeat; pointer-events: none; }
.coca-banner .btn { position: relative; z-index: 1; }
.support-inner { position: relative; }
.support::after { content: ""; position: absolute; left: -60px; bottom: -80px; width: 340px; height: 380px; opacity: .08; z-index: -1;
  background: url(../img/varianti/agesci-bianco-400.webp) center / contain no-repeat; transform: rotate(10deg); }

@media (max-width: 640px) {
  .hero-mark { display: none; }
  .news-band::after { width: 280px; right: -110px; }
}

/* ==========================================================================
   Intestazione: trasparente sopra la foto, bianca quando si scorre
   ========================================================================== */
:root { --header-h: 76px; }
.site-header { background: #fff; box-shadow: 0 1px 0 var(--line); transition: background .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(36,19,63,.12); }
.brand .logo-light { display: none; }
.brand-text small { color: var(--viola); }
.brand-text strong { color: var(--ink); }
.nav-link, .mega-toggle, .search-toggle { color: var(--ink); transition: color .3s, background .2s; }
.nav-link:hover, .mega-toggle:hover, .has-mega.is-open .mega-toggle, .search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--viola-50); color: var(--viola); }
.nav-link[aria-current="page"]::after, .has-mega.is-active > .mega-toggle::after { background: repeating-linear-gradient(90deg, var(--verde) 0 7px, transparent 7px 11px, var(--giallo) 11px 18px, transparent 18px 22px); }
.nav-toggle span:first-child, .nav-toggle span:first-child::before, .nav-toggle span:first-child::after { background: var(--ink); }
.nav-open .nav-toggle span:first-child { background: transparent; }

/* Stato trasparente: solo sulle pagine che si aprono con una foto, in cima, a menu chiusi */
body.header-overlay .site-header { margin-bottom: calc(var(--header-h) * -1); }
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) {
  background: linear-gradient(180deg, rgba(25,15,38,.62) 0%, rgba(25,15,38,.25) 70%, rgba(25,15,38,0) 100%);
  box-shadow: none;
}
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) {
  & .logo-light { display: block; }
  & .logo-dark { display: none; }
  & .brand-text small { color: var(--giallo); }
  & .brand-text strong { color: #fff; }
  & .nav-link, & .mega-toggle, & .search-toggle { color: #fff; }
  & .nav-link:hover, & .mega-toggle:hover, & .search-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }
  & .nav-link[aria-current="page"]::after, & .has-mega.is-active > .mega-toggle::after { background: repeating-linear-gradient(90deg, var(--verde) 0 7px, transparent 7px 11px, var(--giallo) 11px 18px, transparent 18px 22px); }
  & .nav-toggle span:first-child, & .nav-toggle span:first-child::before, & .nav-toggle span:first-child::after { background: #fff; }
}
/* Spazio per l'intestazione sopra i testi delle foto */
body.header-overlay .page-hero { padding-top: calc(var(--header-h) + clamp(60px, 9vw, 120px)); }
body.header-overlay .hero-slider { height: calc(min(82vh, 720px) + 30px); }

@media (max-width: 1180px) {
  .nav-link, .mega-toggle { color: var(--ink) !important; background: transparent !important; }
}
@media (max-width: 640px) {
  :root { --header-h: 66px; }
  body.header-overlay .hero-slider { height: 680px; }
}

/* Pittogrammi delle tappe nel colore di branca, su distintivo bianco */
.path-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); position: relative; }
.path-icon::after { content: ""; position: absolute; inset: 4px; border: 1.5px dashed var(--u-100); border-radius: 12px 12px 12px 2px; pointer-events: none; }
.path-body .path-icon .unit-icon { width: 40px; height: 40px; background: var(--u); display: inline-block; }
.path-body .path-icon .unit-icon-img { width: 46px; height: 46px; background: none; padding: 0; }
@media (max-width: 640px) { .path-icon { width: 50px; height: 50px; } .path-body .path-icon .unit-icon { width: 34px; height: 34px; } }
.path-icon { isolation: isolate; }
.path-icon img { z-index: auto; transform: none !important; }

/* Numeri in apertura, subito sotto lo slider (come scout.org) */
.stats { background: var(--viola); color: #fff; }
.stats::after { height: 5px; }
.stats-grid { padding-top: 38px; padding-bottom: 42px; }
.stats .stat { border-left: 2px dashed rgba(255,255,255,.3); }
.stats .stat strong { color: #fff; }
.stats .stat span { color: rgba(255,255,255,.85); }
.stats .stat:first-child strong { color: var(--giallo); }

/* Tappe: blocchi di testo tutti della stessa altezza, icone e frecce allineate */
.path-body h3, .path-age { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.path-body > div { width: 100%; }
.path-body p {
  line-height: 1.6; height: calc(1.6em * 3); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* Logo ufficiale Albenga 5: bianco sopra le foto, a colori su sfondo bianco */
.brand img { width: auto; height: 56px; }
.footer-brand .footer-logo { width: auto; height: 120px; margin-bottom: 20px; }
@media (max-width: 640px) { .brand img { height: 46px; } }

/* --- Foto, gallerie e video dentro gli articoli --- */
.prose .md-figure, .prose .md-gallery, .prose .md-video { margin: 1.8em 0; }
.prose figure { margin: 0; }
.prose figure img { width: 100%; border-radius: var(--radius-sm); }
.prose figcaption { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.prose .md-figure img { max-height: 620px; object-fit: contain; background: var(--tint); }
/* Logo in apertura (L'AGESCI): piccolo a destra, il testo gli scorre accanto */
.prose .md-side-logo { float: right; width: clamp(92px, 22vw, 176px); height: auto; margin: .25em 0 .8em clamp(16px, 3vw, 36px); }
.prose:has(> .md-side-logo) { display: flow-root; }
.md-gallery { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.md-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.md-gallery-4 { grid-template-columns: repeat(4, 1fr); }
.md-gallery figure img { aspect-ratio: 1; object-fit: cover; transition: transform .3s, opacity .2s; }
.md-gallery a:hover img { opacity: .9; }
.md-zoom { display: block; overflow: hidden; border-radius: var(--radius-sm); cursor: zoom-in; }
.md-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.md-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .md-gallery, .md-gallery-4 { grid-template-columns: repeat(2, 1fr); } }

/* Visualizzatore foto a schermo intero */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,10,30,.94); display: grid; place-items: center; padding: 56px 16px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 112px); border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: rgba(0,0,0,.3); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lightbox .lb-close { top: 14px; right: 14px; }
.lightbox .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8); font-size: .9rem; }

/* --- News: filtri per unità, anno e mese --- */
.news-filters { background: var(--viola-50); border: 1px solid var(--viola-100); border-radius: 6px 22px 22px 22px; padding: clamp(18px, 3vw, 28px); margin-bottom: 22px; position: relative; }
.news-filters::before { content: ""; position: absolute; inset: 8px; border: 2px dashed var(--viola-100); border-radius: 2px 16px 16px 16px; pointer-events: none; }
.news-filters .news-search { max-width: none; margin-bottom: 18px; position: relative; }
.filter-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px dashed var(--viola-100); position: relative; }
.filter-label { display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem/2.6 var(--f-body); text-transform: uppercase; letter-spacing: .1em; color: var(--viola); }
.filter-label .icon { width: 16px; height: 16px; }
.news-filters .filters { margin: 0; }
.year-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.year-strip a, .month-grid a, .month-grid span {
  flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 12px; border-radius: 10px;
  background: #fff; border: 1.5px solid var(--line); text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--ink);
}
.year-strip small, .month-grid small { font-weight: 600; font-size: .75rem; color: var(--muted); }
.year-strip a:hover, .month-grid a:hover { border-color: var(--viola); color: var(--viola); }
.year-strip a[aria-current], .month-grid a[aria-current] { background: var(--viola); border-color: var(--viola); color: #fff; }
.year-strip a[aria-current] small, .month-grid a[aria-current] small { color: rgba(255,255,255,.8); }
.month-grid { display: grid; grid-template-columns: repeat(13, auto); gap: 6px; justify-content: start; }
.month-grid a, .month-grid span { justify-content: center; }
.month-grid .is-empty { color: #B9B3C2; background: transparent; border-style: dashed; font-weight: 600; }
.search-info a { font-weight: 600; }
@media (max-width: 900px) { .month-grid { grid-template-columns: repeat(7, 1fr); } .month-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .filter-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .month-grid { grid-template-columns: repeat(4, 1fr); }
}
.year-strip { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }

/* ==========================================================================
   Home: distribuzione ispirata al vecchio sito
   ========================================================================== */

/* --- Benvenuti: citazione, testo e illustrazione --- */
.welcome-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.bp-quote { margin: 0 0 clamp(28px, 4vw, 44px); padding: 2px 0 2px 22px; border-left: 4px solid var(--giallo); }
.bp-quote p { font: italic 500 clamp(1.05rem, 1.6vw, 1.2rem)/1.5 var(--f-body); color: var(--text); margin: 0 0 .5em; }
.bp-quote cite { font: 700 .76rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--viola); font-style: normal; }
.welcome .lead { font-size: 1.15rem; color: var(--text); }
/* Riga con media e numero delle recensioni Google (home, sotto i social; app/recensioni.php, reviews_badge) */
.social-rating { text-align: center; margin: 8px 0 0; }
.g-rating { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: var(--text); font-size: .92rem; line-height: 1.3; transition: border-color .2s, transform .2s; }
.g-rating:hover { border-color: var(--viola); transform: translateY(-1px); }
.g-rating-g { display: flex; width: 22px; height: 22px; flex-shrink: 0; }
.g-rating-g svg { width: 100%; height: 100%; }
.g-rating-stars { display: inline-flex; gap: 1px; color: #FBBC04; }
.g-rating-stars svg { width: 15px; height: 15px; fill: currentColor; }
.g-rating-text strong { color: var(--ink); }
.welcome-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.welcome-links a { padding: .5em 1.1em; border-radius: 999px; border: 2px dashed var(--viola-100); text-decoration: none; font-weight: 600; transition: border-color .15s, background .15s; }
.welcome-links a:hover { border-color: var(--viola); background: var(--viola-50); }
.welcome-art { margin: 0; }
.welcome-art img { width: 100%; mix-blend-mode: multiply; }
@media (max-width: 860px) {
  .welcome-grid { grid-template-columns: 1fr; }
  .welcome-art { max-width: 440px; margin: 0 auto; }
}

/* --- Contatti + In programma, con foto ai lati come sul vecchio sito --- */
.meet { position: relative; background: var(--tint); display: grid; grid-template-columns: 1fr min(var(--wrap), 100%) 1fr; padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 8vw, 104px); }
.meet-grid { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; padding: 0 var(--gutter); }
.meet-card { position: relative; padding: clamp(28px, 4vw, 52px); }
.meet-contact { background: #fff; border-radius: var(--radius) 0 0 var(--radius); box-shadow: var(--shadow); }
.meet-contact > p:not(.kicker) { color: var(--muted); }
.meet-info { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.meet-info li { display: flex; gap: 12px; align-items: center; }
.meet-info .icon { flex-shrink: 0; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--viola-50); color: var(--viola); }
.meet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.meet-events { background: var(--viola-900); color: rgba(255,255,255,.85); border-radius: 0 var(--radius) var(--radius) 0; isolation: isolate; }
.meet-events::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255,255,255,.14); border-radius: 2px 10px 10px 2px; pointer-events: none; z-index: -1; }
.meet-events h2 { color: #fff; }
.meet-events .kicker { color: var(--giallo); }
.meet-events .event-row { border: 0; }
.meet-events .empty { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }
.meet-events .stitched::after { background: repeating-linear-gradient(90deg, var(--verde) 0 12px, transparent 12px 19px, var(--giallo) 19px 31px, transparent 31px 38px); }

/* Foglio di calendario a strappo con il prossimo appuntamento */
.meet-events:has(.cal-page) > .kicker, .meet-events:has(.cal-page) > h2 { padding-right: 140px; }
.cal-page { position: absolute; top: -30px; right: clamp(20px, 3vw, 40px); z-index: 2; width: 120px; padding-bottom: 14px; text-align: center; background: #fff; border-radius: 12px; color: var(--ink); text-decoration: none; box-shadow: 0 18px 40px rgba(20,10,35,.4); transform: rotate(4deg); transition: transform .2s; }
.cal-page:hover { transform: rotate(0) translateY(-4px); color: var(--ink); }
.cal-page::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; border-bottom: 2px dashed var(--line); }
.cal-month { display: block; padding: 20px 6px 9px; border-radius: 12px 12px 0 0; background: var(--u); color: #fff; font: 700 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.unit-giallo .cal-month { color: var(--ink); }
.cal-day { display: block; margin-top: 10px; font: 800 3.2rem/1 var(--f-head); letter-spacing: -.03em; }
.cal-week { display: block; margin: 4px 0 8px; font-size: .78rem; color: var(--muted); }
.cal-rings { position: absolute; top: -10px; left: 26px; right: 26px; height: 22px; }
.cal-rings::before, .cal-rings::after { content: ""; position: absolute; top: 0; width: 9px; height: 22px; border-radius: 5px; background: linear-gradient(90deg, #8E85A0, #E9E3F3 50%, #8E85A0); box-shadow: 0 2px 3px rgba(0,0,0,.3); }
.cal-rings::before { left: 0; }
.cal-rings::after { right: 0; }

.meet-photos { display: none; }
@media (min-width: 1360px) {
  .meet-photos { display: grid; grid-row: 1; gap: 16px; align-content: center; }
  .meet-photos-l { grid-column: 1; }
  .meet-photos-r { grid-column: 3; }
  .meet-photos img { width: 100%; height: 230px; object-fit: cover; }
  .meet-photos-l img { border-radius: 0 var(--radius) var(--radius) 0; }
  .meet-photos-r img { border-radius: var(--radius) 0 0 var(--radius); }
  .meet-photos img:nth-child(2) { height: 170px; }
}
@media (max-width: 860px) {
  .meet-grid { grid-template-columns: 1fr; gap: 0; }
  .meet-contact { border-radius: var(--radius) var(--radius) 0 0; }
  .meet-events { border-radius: 0 0 var(--radius) var(--radius); margin-top: 0; }
}
@media (max-width: 860px) {
  .meet-events { padding-top: 64px; }
  .cal-page { top: -34px; }
}
@media (max-width: 480px) {
  .cal-page { width: 96px; }
  .cal-day { font-size: 2.5rem; }
  .meet-events:has(.cal-page) > .kicker, .meet-events:has(.cal-page) > h2 { padding-right: 104px; }
}

/* --- Partner --- */
.partners { padding: clamp(44px, 6vw, 72px) 0; }
.partners-title { text-align: center; font: 700 .8rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; }
.partner-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.partner-row a { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 10px; border-radius: var(--radius); text-align: center; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .92rem; line-height: 1.3; transition: background .2s, transform .2s; }
.partner-row a:hover { background: var(--tint); transform: translateY(-3px); color: var(--viola); }
.partner-row img { height: 84px; width: auto; max-width: 120px; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 760px) { .partner-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .partner-row { grid-template-columns: repeat(2, 1fr); } .partner-row img { height: 64px; } }

/* --- Citazione su foto prima del piè di pagina --- */
.quote-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 10vw, 128px) 0; text-align: center; color: #fff; }
.quote-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.quote-band > img[src*="chi-siamo-mani-insieme-al-campo"] { object-position: center 12%; } /* Chi siamo: la foto scende nel riquadro, si vedono i visi in alto */
.quote-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(36,19,63,.72), rgba(36,19,63,.9)); }
.quote-band blockquote { margin: 0 auto; max-width: 52rem; }
.quote-band blockquote::before { content: "\201C"; display: block; height: .5em; margin-bottom: 14px; font: 800 6rem/1 Georgia, serif; color: var(--giallo); }
.quote-band p { font: italic 500 clamp(1.15rem, 2.2vw, 1.55rem)/1.55 var(--f-body); color: #fff; margin: 0 0 1em; }
.quote-band cite { font: 700 .82rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--giallo); font-style: normal; }

/* --- Feed Instagram (o ultime foto dagli articoli) --- */
.insta { background: var(--tint); }
/* Feed Instagram: fascia bianca a tutta larghezza, fuori da .wrap, con la riga di polaroid che scorre (carosello con le frecce di main.js).
   Polaroid color crema, più scure di --tint e con un filo di bordo perché sul bianco si vedano; stessa inclinazione di quelle delle news */
.insta-feed { --pad: clamp(16px, 3vw, 40px); position: relative; background: #fff; margin-bottom: clamp(28px, 4vw, 44px); }
.insta-avatar { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; padding: 3px; color: #fff; background: linear-gradient(45deg, #F77737, #E1306C 50%, #833AB4); flex-shrink: 0; }
.insta-avatar img { width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 3px solid #fff; object-fit: cover; }
/* Titolo della sezione con il feed attivo: avatar accanto, e sopra il nome utente così com'è, senza maiuscole */
.insta-title { display: flex; align-items: center; gap: clamp(12px, 2vw, 18px); }
.insta-title > div { min-width: 0; }
.insta-title .kicker { text-transform: none; letter-spacing: .02em; font-size: .95rem; }
/* Il riquadro che scorre taglia ciò che sporge: lo spazio intorno lascia intere le foto inclinate e le loro ombre */
.insta-track { gap: clamp(18px, 2.4vw, 34px); }
.insta-feed .insta-track { padding: 28px var(--pad) 40px; scroll-padding-inline: var(--pad); }
.insta-track > li { display: flex; width: clamp(200px, 19vw, 320px); }
.insta-polaroid { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #F5ECD7; border: 1px solid #DCCDAE; color: var(--ink); text-decoration: none; padding: 10px 10px 12px; border-radius: 3px;
  box-shadow: 0 8px 18px rgba(36,19,63,.26); transform: rotate(var(--tilt, 0deg)); transition: transform .45s cubic-bezier(.3, 1.7, .5, 1), box-shadow .3s; }
.insta-polaroid:hover, .insta-polaroid:focus-visible { transform: rotate(0deg) translateY(-4px); box-shadow: 0 16px 30px rgba(36,19,63,.32); color: var(--ink); }
/* Puntina in cima a ogni polaroid, come su una bacheca di sughero: testa tonda con la luce in alto a sinistra e la sua ombra sulla foto;
   il colore cambia da una foto all'altra. La puntina gira insieme alla polaroid (--tilt) */
.insta-polaroid { position: relative; }
.insta-polaroid::before { content: ""; position: absolute; z-index: 2; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75) 0 2px, transparent 7px), radial-gradient(circle at 50% 50%, var(--pin, var(--rosso)) 0 62%, color-mix(in srgb, var(--pin, var(--rosso)) 65%, #000) 63% 100%);
  box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.insta-polaroid::after { content: ""; position: absolute; z-index: 1; top: 7px; left: 50%; width: 14px; height: 8px; margin-left: -4px; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(2px); transform: skewX(-25deg); }
.insta-track > li:nth-child(6n+2) .insta-polaroid { --pin: var(--giallo); }
.insta-track > li:nth-child(6n+3) .insta-polaroid { --pin: var(--verde); }
.insta-track > li:nth-child(6n+4) .insta-polaroid { --pin: var(--blu); }
.insta-track > li:nth-child(6n+5) .insta-polaroid { --pin: var(--viola-600); }
.insta-track > li:nth-child(6n) .insta-polaroid { --pin: #E8731E; }
.insta-photo { position: relative; display: block; overflow: hidden; background: var(--viola-100); }
.insta-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.insta-note { min-height: calc(2 * 1.35em); margin-top: 10px; font: italic 400 .84rem/1.35 var(--f-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.insta-feed .carousel-arrow { position: absolute; z-index: 2; top: 50%; margin-top: -22px; background: #fff; border-color: transparent; color: var(--viola); box-shadow: var(--shadow); }
.insta-feed .carousel-prev { left: 12px; }
.insta-feed .carousel-next { right: 12px; }
.insta-feed .carousel-arrow:hover:not(:disabled) { background: var(--viola); color: #fff; }
.insta-feed .carousel-arrow:disabled { display: none; }
.insta-ping { position: absolute; opacity: 0; pointer-events: none; }
.insta-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.insta-grid a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--viola-100); }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.insta-grid a:hover img { transform: scale(1.06); }
.insta-cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; color: #fff; font-size: .86rem; line-height: 1.35;
  background: linear-gradient(0deg, rgba(36,19,63,.9), rgba(36,19,63,0) 70%); opacity: 0; transition: opacity .25s; }
.insta-cap span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.insta-grid a:hover .insta-cap, .insta-grid a:focus-visible .insta-cap { opacity: 1; }
.insta-kind { position: absolute; top: 10px; right: 10px; display: flex; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
@media (max-width: 760px) {
  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .insta-grid li:nth-child(n+4) { display: none; } .insta-cap { display: none; }
  .insta-title .insta-avatar { width: 60px; height: 60px; }
  .insta-feed .carousel-arrow { width: 38px; height: 38px; margin-top: -19px; }
}
@media (prefers-reduced-motion: reduce) { .insta-polaroid { transition: none; } }

/* --- Striscia di foto che scorre in orizzontale --- */
.photo-strip { overflow: hidden; padding: clamp(32px, 4vw, 48px) 0; background: var(--viola); position: relative; }
.photo-strip::before, .photo-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 12px, transparent 12px 20px); }
.photo-strip::before { top: 12px; }
.photo-strip::after { bottom: 12px; }
.strip-track { display: flex; gap: 14px; width: max-content; will-change: transform; }
.strip-track img { height: clamp(160px, 18vw, 230px); width: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px 22px 22px 22px; box-shadow: 0 10px 30px rgba(20,10,35,.35); }
.strip-arrow { position: absolute; top: 50%; z-index: 2; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; border: 2px solid #fff; background: rgba(36,19,63,.55); color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .2s, color .2s; }
.strip-arrow:hover { background: #fff; color: var(--viola); }
.strip-prev { left: clamp(10px, 3vw, 40px); }
.strip-next { right: clamp(10px, 3vw, 40px); }
.strip-prev .icon { transform: rotate(180deg); }
@media (max-width: 640px) { .strip-arrow { width: 42px; height: 42px; margin-top: -21px; } }

/* --- Carattere dei titoli anche su etichette di sezione, menu e numeri --- */
.mega-toggle, .mega-links strong, .brand-text small, .footer-grid h2, .partners-title, .path-step, .cal-month, .stats .stat strong, .card h3, .polaroid-title { font-family: var(--f-head); }

/* Le unità su fondo viola chiaro */
.section.path { background: var(--viola-50); }

/* ==========================================================================
   Contatti: dati del Gruppo, mappa e modulo
   ========================================================================== */
.contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.contact-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list li > .icon { flex-shrink: 0; width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--viola-50); color: var(--viola); }
.contact-list strong { display: block; font: 700 .76rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .12em; color: var(--viola); margin-bottom: 4px; }
.contact-list a { font-weight: 600; }
.contact-list span { color: var(--muted); }
.contact-legal { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius); background: var(--tint); border: 2px dashed var(--line); margin-bottom: 24px; }
.contact-legal .icon { flex-shrink: 0; color: var(--verde); width: 24px; height: 24px; margin-top: 2px; }
.contact-legal p { margin: 0; font-size: .92rem; color: var(--text); }
.contact-social { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-social a { display: inline-flex; align-items: center; gap: 8px; padding: .55em 1em; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; transition: filter .15s, transform .15s; }
.contact-social a:hover { color: #fff; filter: brightness(1.1); transform: translateY(-2px); }
.contact-social .icon { width: 18px; height: 18px; }
.contact-social .social-facebook { background: #1877F2; }
.contact-social .social-instagram { background: linear-gradient(90deg, #833AB4, #E1306C 60%, #F77737); }
.contact-social .social-youtube { background: #E62117; }
.contact-social .social-linkedin { background: #0A66C2; }
.contact-map { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-map iframe { flex: 1; width: 100%; min-height: 420px; border: 0; border-radius: 6px 22px 22px 22px; box-shadow: var(--shadow); background: var(--tint); }

.contact-form-band { background: var(--viola-50); }
.contact-form-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-form-intro img { width: 120px; height: auto; margin-bottom: 20px; }
.contact-form-intro p:not(.kicker) { color: var(--muted); }
.contact-form-card { background: #fff; border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); border-top: 6px solid var(--viola); }
.contact-form { display: grid; gap: 18px; }
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--ink); }
.contact-form label b { color: var(--rosso); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="date"], .contact-form select, .contact-form textarea {
  font: inherit; font-weight: 400; color: var(--ink); padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
/* Data su iPhone/iPad: senza l'aspetto nativo il campo non esce più dal bordo destro */
.contact-form input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 49px; }
.contact-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--viola); box-shadow: 0 0 0 3px var(--viola-100); }
.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .9rem; color: var(--text); }
.contact-form .check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--viola); flex-shrink: 0; }
.contact-form .btn { justify-self: start; }
.form-note { margin: 0; font-size: .82rem; color: var(--muted); }
/* Riquadro fluttuante di reCAPTCHA: coprirebbe i pulsanti in basso a destra. Google lo permette se nel modulo c'è l'avviso (recaptcha_note) */
.grecaptcha-badge { visibility: hidden; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-errors { background: #FDECEC; border: 1px solid #F3B8B6; color: #7A1D1A; border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: .92rem; }
.form-errors ul { margin: 6px 0 0; padding-left: 18px; }
.form-ok { text-align: center; padding: 20px 0; }
.form-ok strong { display: block; font: 800 1.5rem/1.2 var(--f-head); color: var(--verde); margin-bottom: 8px; }
@media (max-width: 860px) {
  .contact-layout, .contact-form-layout { grid-template-columns: 1fr; }
  .contact-map iframe { min-height: 320px; }
}
@media (max-width: 560px) { .contact-form .field-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Punti di cucitura del brand World Scouting (assets/img/punti, dalla collezione
   «Single line stitches for artwork»): usati come maschere, prendono qualsiasi colore
   ========================================================================== */
:root {
  --punto-frecce: url(../img/punti/frecce.svg);
  --punto-obliqui: url(../img/punti/obliqui.svg);
  --punto-zigzag: url(../img/punti/zigzag.svg);
  --punto-doppio: url(../img/punti/doppio.svg);
  --punto-croce: url(../img/punti/croce.svg);
  --punto-spina: url(../img/punti/spina.svg);
}
.stitched::after, .news-band::before, .footer-rule, .photo-strip::before, .photo-strip::after,
.quote-band cite::before, .contact-form-band::before, .stitch-divider {
  -webkit-mask: var(--punto) left center / auto 100% repeat-x; mask: var(--punto) left center / auto 100% repeat-x;
}

/* Sottolineatura dei titoli: frecce gialle */
.stitched { padding-bottom: 18px; }
.stitched::after, .meet-events .stitched::after { --punto: var(--punto-frecce); width: 118px; height: 10px; border-radius: 0; background: var(--giallo); }

/* Fascia news: zigzag in alto */
.news-band::before { --punto: var(--punto-zigzag); top: 16px; height: 10px; background: rgba(255,255,255,.28); }

/* Striscia di foto: punti obliqui sopra e sotto */
.photo-strip::before, .photo-strip::after { --punto: var(--punto-obliqui); height: 9px; background: rgba(255,255,255,.4); }
.photo-strip::before { top: 10px; }
.photo-strip::after { bottom: 10px; }

/* Piè di pagina: punto croce */
.footer-rule { --punto: var(--punto-croce); height: 10px; background: rgba(255,255,255,.22); }

/* Citazione finale: spina di pesce gialla sopra l'autore */
.quote-band cite::before { --punto: var(--punto-spina); content: ""; display: block; width: 150px; height: 16px; margin: 0 auto 16px; background: var(--giallo); }

/* Divisore libero: <div class="stitch-divider" data-punto="doppio"> */
.stitch-divider { --punto: var(--punto-spina); height: 14px; background: var(--viola-100); }

/* Contatti: due fondi distinti, separati da una cucitura */
.contact-main { background: var(--tint); }
.contact-form-band { background: var(--viola-100); position: relative; }
.contact-form-band::before { --punto: var(--punto-doppio); content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 12px; background: rgba(70,38,120,.3); }
.contact-legal { background: #fff; }

/* ==========================================================================
   News appese alla corda: polaroid con mollette, scorrono lungo la corda
   ========================================================================== */
.news-band { padding-bottom: clamp(48px, 7vw, 88px); }
.line-controls { display: flex; align-items: center; gap: 10px; }
.line-controls .link-more { margin-right: 10px; }
.line-arrow { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, opacity .2s; }
.line-arrow:hover:not(:disabled) { background: #fff; color: var(--viola); }
.line-arrow:disabled { opacity: .3; cursor: default; }
.line-prev .icon { transform: rotate(180deg); }

.news-line { position: relative; padding-top: 26px; }
/* corda intrecciata da campo */
.rope-line { position: absolute; left: 0; right: 0; top: 40px; height: 11px; z-index: 2; border-radius: 6px;
  background: repeating-linear-gradient(-58deg, #E2C189 0 5px, #B98C50 5px 9px, #D4AD72 9px 12px);
  box-shadow: 0 4px 8px rgba(10,5,25,.45), inset 0 -2px 0 rgba(0,0,0,.15); }
.line-track {
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  list-style: none; margin: 0; display: flex; gap: 34px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--edge); padding: 0 var(--edge) 34px; scrollbar-width: none; }
.line-track::-webkit-scrollbar { display: none; }
.polaroid { flex: 0 0 clamp(236px, 23vw, 282px); scroll-snap-align: start; position: relative; padding-top: 26px; display: flex; }
/* molletta di legno sulla corda */
.peg { position: absolute; top: 0; left: 50%; z-index: 3; width: 16px; height: 50px; margin-left: -8px; border-radius: 3px 3px 5px 5px;
  background: linear-gradient(90deg, #B98A52, #E8C691 45%, #C99A60 55%, #A97A44); box-shadow: 0 3px 5px rgba(10,5,25,.4); }
.peg::before { content: ""; position: absolute; left: -2px; right: -2px; top: 18px; height: 5px; border-radius: 2px; background: linear-gradient(#D7D7D7, #8E8E8E); }
.peg::after { content: ""; position: absolute; left: 50%; top: 26px; bottom: 4px; width: 1px; background: rgba(90,55,20,.5); }
.polaroid-card { position: relative; flex: 1; display: flex; flex-direction: column; background: #FFFDF8; color: var(--ink); text-decoration: none;
  padding: 12px 12px 18px; border-radius: 3px; border-bottom: 5px solid var(--u, var(--viola));
  box-shadow: 0 16px 30px rgba(12,6,28,.42); transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 0;
  transition: transform .45s cubic-bezier(.3, 1.7, .5, 1), box-shadow .3s; }
.polaroid-card:hover, .polaroid-card:focus-visible { transform: rotate(0deg) translateY(6px); box-shadow: 0 22px 40px rgba(12,6,28,.5); color: var(--ink); }
.polaroid-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--u-100, var(--viola-50)); display: grid; place-items: center; }
.polaroid-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* height: 100% qui non varrebbe: la foto verticale resterebbe intera e se ne vedrebbe solo il centro */
.polaroid-photo .unit-icon { width: 64px; height: 64px; }
.polaroid-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 6px; font-size: .78rem; color: var(--muted); }
.polaroid-title { font: 800 1.08rem/1.25 var(--f-head); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.polaroid-text { margin-top: 6px; font-size: .86rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.polaroid-more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--viola); }
.polaroid-more .icon { width: 16px; height: 16px; transition: transform .2s; }
.polaroid-card:hover .polaroid-more .icon { transform: translateX(4px); }
.polaroid-all { --u: var(--viola); --u-100: rgba(255,255,255,.55); }
.polaroid-all .polaroid-card { background: var(--giallo); border-bottom-color: var(--viola); }
.polaroid-all .polaroid-text { color: var(--ink); }
@media (max-width: 640px) {
  .line-controls .link-more { display: none; }
  .polaroid { flex-basis: 74vw; }
}
@media (prefers-reduced-motion: reduce) { .polaroid-card { transition: none; } }

/* Sedi delle riunioni */
.places { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.places li { position: relative; padding-left: 18px; color: var(--text); font-weight: 600; font-size: .95rem; line-height: 1.4; }
.places li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--giallo); box-shadow: 0 0 0 2px var(--verde); }
.contact-list .places li { display: block; }
.meet-contact .places { margin-bottom: 24px; }

/* Contatti: social come icone rotonde */
.contact-social { gap: 12px; }
.contact-social a { width: 52px; height: 52px; padding: 0; border-radius: 50%; justify-content: center; box-shadow: 0 6px 14px rgba(36,19,63,.18); }
.contact-social .icon { width: 22px; height: 22px; }
/* Sedi: icona posizione al posto del punto */
.places li { padding-left: 26px; }
.places li::before { width: 18px; height: 18px; top: .12em; border-radius: 0; box-shadow: none; background: var(--viola);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Contatti: modulo a sinistra, presentazione a destra (su telefono prima il testo) */
@media (min-width: 861px) {
  .contact-form-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .contact-form-card { order: -1; }
  .contact-form-intro { padding-top: 12px; }
}

/* Home, blocco Contattaci: fondo viola chiaro accanto al calendario scuro */
.meet-contact { background: var(--viola-100); box-shadow: none; }
.meet-contact::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(70,38,120,.25); border-radius: 10px 2px 2px 10px; pointer-events: none; }
.meet-contact > p:not(.kicker) { color: var(--text); }
.meet-contact .meet-info .icon { background: #fff; }
.meet-contact .stitched::after { background: var(--viola); }
@media (max-width: 860px) { .meet-contact::before { border-radius: 10px 10px 2px 2px; } }
/* Home, blocco In programma: viola scout (AGESCI #462678) */
.meet-events { background: var(--viola); }
.meet-events::before { border-color: rgba(255,255,255,.22); }
/* Codice fiscale 5×1000 senza spazi tra le cifre */
.support-cf strong, .footer-5x1000 .cf { letter-spacing: 0; }

/* Citazione finale: velo più leggero, la foto resta visibile; ombra sul testo per la leggibilità */
.quote-band::before { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(36,19,63,.62), rgba(36,19,63,.28) 75%), linear-gradient(180deg, rgba(36,19,63,.15), rgba(36,19,63,.35)); }
.quote-band p, .quote-band cite { text-shadow: 0 2px 12px rgba(20,10,35,.75), 0 1px 3px rgba(20,10,35,.6); }

/* Corda morbida: tra una molletta e l'altra si abbassa ad arco e scorre con le foto */
.rope-line { display: none; }
.polaroid { padding-top: 36px; }
.polaroid::before, .polaroid:first-child::after {
  content: ""; position: absolute; top: 9px; height: 30px; z-index: 2; pointer-events: none;
  background: url(../img/corda.svg) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 3px 3px rgba(10,5,25,.35)); }
.polaroid::before { left: 50%; width: calc(100% + 34px); }
.polaroid:first-child::after { right: 50%; width: calc(50% + var(--edge, 40px)); }

/* Striscia di foto: viola molto più chiaro */
.photo-strip { background: #D4C8EA; }
.photo-strip::before, .photo-strip::after { background: rgba(70,38,120,.35); }
.strip-track img { box-shadow: 0 8px 20px rgba(36,19,63,.22); }

/* Eventi: «Già vissuti» chiusi e compatti, calendario Google del Gruppo */
.past-events { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }
.past-events summary { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font: 800 1.15rem/1.2 var(--f-head); color: var(--ink); }
.past-events summary::-webkit-details-marker { display: none; }
.past-events summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--viola); }
.past-events[open] summary::after { content: "−"; }
.past-events summary small { font: 400 .88rem/1 var(--f-body); color: var(--muted); }
.past-track { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px 20px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.past-track .event-row { flex: 0 0 min(340px, 82vw); scroll-snap-align: start; padding: 10px 14px 10px 10px; }
.past-track .event-date { width: 50px; height: 54px; }
.past-track .event-date .d { font-size: 1.3rem; }
.past-track .event-info h3 { font-size: .98rem; }
.past-track .event-when { font-size: .8rem; }
.gcal-band { background: var(--viola-50); }
.gcal-frame { background: #fff; border-radius: var(--radius); padding: clamp(8px, 2vw, 16px); box-shadow: var(--shadow); border-top: 6px solid var(--viola); }
.gcal-frame iframe { display: block; width: 100%; height: 700px; border: 0; }
@media (max-width: 640px) { .gcal-frame iframe { height: 560px; } }
/* Banner Co.Ca.: senza giglio di sfondo */
.coca-banner::after { content: none; }
/* Sedi: stesso carattere del testo accanto (indirizzo) */
.places li { font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--text); }

/* News: anno a tendina */
.year-select { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.year-select select { min-width: 0; max-width: 100%; }
.year-select select { font: 600 .95rem/1.2 var(--f-body); color: var(--ink); padding: 10px 40px 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23462678' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; -webkit-appearance: none; appearance: none; cursor: pointer; min-width: 220px; }
.year-select select:focus { outline: none; border-color: var(--viola); box-shadow: 0 0 0 3px var(--viola-100); }
/* «Mostra» accanto alla tendina, alto quanto la tendina: serve a chi sceglie l'anno con la tastiera */
.year-select .btn { padding: 9px 18px; font-size: .95rem; }

/* Eventi: elenco su fondo crema, staccato dal calendario con le cuciture */
.events-list-section { position: relative; background: var(--tint); isolation: isolate; overflow: hidden; }
.events-list-section::before, .events-list-section::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: rgba(70,38,120,.3);
  -webkit-mask: var(--punto-doppio) left center / auto 100% repeat-x; mask: var(--punto-doppio) left center / auto 100% repeat-x; }
.events-list-section::before { top: 18px; }
.events-list-section::after { bottom: 18px; }
.events-list-section .wrap::after { content: ""; position: absolute; right: -80px; top: 60px; z-index: -1; width: 360px; height: 400px; opacity: .06; pointer-events: none;
  background: var(--viola); -webkit-mask: url(../img/varianti/agesci-viola-400.webp) center / contain no-repeat; mask: url(../img/varianti/agesci-viola-400.webp) center / contain no-repeat; transform: rotate(-10deg); }
.events-list-section .wrap { position: relative; }
.events-list-section .event-row, .events-list-section .past-events { background: #fff; }
.events-list-section .past-events summary { background: #fff; border-radius: var(--radius); }
.events-list-section .list-title { display: flex; align-items: center; gap: 10px; }
.events-list-section .list-title::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--giallo); box-shadow: 0 0 0 3px var(--verde); }

/* «Già vissuti»: frecce per scorrere */
.past-wrap { position: relative; }
.past-track { scrollbar-width: none; padding-left: 64px; padding-right: 64px; scroll-padding-left: 64px; }
.past-track::-webkit-scrollbar { display: none; }
.past-arrow { position: absolute; top: calc(50% - 10px); z-index: 2; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; border: 2px solid var(--viola); background: #fff; color: var(--viola); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow); transition: background .2s, color .2s, opacity .2s; }
.past-arrow:hover:not(:disabled) { background: var(--viola); color: #fff; }
.past-arrow:disabled { opacity: .3; cursor: default; }
.past-prev { left: 14px; }
.past-next { right: 14px; }
.past-prev .icon { transform: rotate(180deg); }
@media (max-width: 640px) { .past-track { padding-left: 20px; padding-right: 20px; } .past-arrow { display: none; } }

/* ==========================================================================
   Sezioni morbide: sfondi sfumati e riquadri interni arrotondati
   ========================================================================== */

/* Sfumature al posto dei colori pieni */
.news-band { background: radial-gradient(120% 90% at 85% 0%, #5B3A92 0%, transparent 60%), linear-gradient(160deg, #4E2B85 0%, var(--viola) 45%, #36195F 100%); }
.photo-strip { background: linear-gradient(100deg, #E6DEF3 0%, #CFC2E8 50%, #E6DEF3 100%); }
.section.path { background: radial-gradient(70% 60% at 10% 0%, #FFFFFF 0%, transparent 70%), linear-gradient(180deg, var(--viola-50) 0%, #EEE8F7 100%); }
.meet { background: radial-gradient(60% 80% at 100% 100%, #EDE6F6 0%, transparent 70%), linear-gradient(180deg, #F9F7F3 0%, var(--tint) 100%); }
.insta { background: radial-gradient(60% 90% at 0% 0%, #FCEFF4 0%, transparent 65%), linear-gradient(180deg, #F9F7F3, var(--tint)); }
.support::before { background: linear-gradient(100deg, rgba(36,19,63,.92) 25%, rgba(70,38,120,.55) 100%); }


/* Riquadri interni più morbidi */
.meet-contact { border-radius: 28px 0 0 28px; }
.meet-events { border-radius: 0 28px 28px 0; }
.coca-banner { border-radius: 28px; }
.coca-banner::before { border-radius: 20px; }
.contact-form-card, .gcal-frame, .past-events, .contact-map iframe { border-radius: 24px; }
.past-events summary { border-radius: 24px; }
.event-row, .news-card, .card { border-radius: 18px; }
.btn { border-radius: 999px; }


@media (max-width: 860px) {
  .meet-contact { border-radius: 24px 24px 0 0; }
  .meet-events { border-radius: 0 0 24px 24px; }
}
/* Benvenuti: pulsanti con bordo più evidente */
.welcome-links a { border: 2px solid var(--viola); background: #fff; box-shadow: 0 3px 0 var(--viola-100); }
.welcome-links a:hover { background: var(--viola); color: #fff; border-color: var(--viola); }
.welcome-links a.is-primary { background: var(--viola); color: #fff; }
.welcome-links a.is-primary:hover { background: var(--viola-900); border-color: var(--viola-900); }

/* Banda dei numeri: angoli inferiori arrotondati (la striscia dei colori di branca segue la curva) */
.stats { border-radius: 0 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); overflow: hidden; z-index: 1; }

/* Citazione finale: a tutta larghezza con gli angoli superiori arrotondati */
.quote-band { border-radius: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0 0; overflow: hidden; }
.welcome-links a { transition: background .2s, color .2s, border-color .2s; }

/* Le unità: fondo viola più deciso (il banner Co.Ca. diventa bianco per staccarsi) */
.section.path { background: radial-gradient(70% 60% at 0% 0%, #E9E1F5 0%, transparent 70%), linear-gradient(180deg, #DCD1EE 0%, #CBBCE5 100%); }
.section.path .coca-banner { background: #fff; }
.section.path .path-intro { color: var(--text); }
/* Citazione finale: decorazione sopra la firma più semplice e discreta */
.quote-band cite::before { --punto: var(--punto-obliqui); width: 64px; height: 7px; margin-bottom: 14px; opacity: .8; }

/* Intestazione: un po' di spazio in più, metà sopra e metà sotto, così logo e menu stanno al centro */
:root { --header-pad: 12px; }
.site-header .header-inner { padding-block: calc(var(--header-pad) / 2); min-height: var(--header-h); }
:root { --header-h: calc(76px + var(--header-pad)); }
@media (max-width: 640px) { :root { --header-pad: 6px; --header-h: calc(66px + var(--header-pad)); } }

/* Benvenuti: foto ai lati sugli schermi larghi (come nel blocco Contattaci / In programma) */
.welcome { display: grid; grid-template-columns: 1fr min(var(--wrap), 100%) 1fr; }
.welcome > .wrap { grid-column: 2; grid-row: 1; }
.side-photos { display: none; }
@media (min-width: 1360px) {
  .side-photos { display: grid; grid-row: 1; gap: 16px; align-content: center; }
  .side-photos-l { grid-column: 1; }
  .side-photos-r { grid-column: 3; }
  .side-photos img { width: 100%; height: 230px; object-fit: cover; }
  .side-photos img:nth-child(2) { height: 170px; }
  .side-photos-l img { border-radius: 0 var(--radius) var(--radius) 0; }
  .side-photos-r img { border-radius: var(--radius) 0 0 var(--radius); }
}

/* Sotto lo slider: solo la striscia con i colori delle branche */
.branche-stripe { height: 6px; background: linear-gradient(90deg, var(--blu) 0 20%, var(--giallo) 20% 40%, var(--verde) 40% 60%, var(--rosso) 60% 80%, var(--viola-300) 80%); position: relative; z-index: 1; }

/* Slider: angoli inferiori arrotondati. La striscia con i colori di branca sotto lo slider è stata tolta (novembre 2026): la foto finisce pulita */
.hero-slider { border-radius: 0 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); isolation: isolate; }

/* Citazione di benvenuto: barra verde con brevi tratti gialli (come le fasce delle pagine) */
.bp-quote { border-left: 5px solid var(--verde); border-image: repeating-linear-gradient(180deg, var(--verde) 0 15px, var(--giallo) 15px 20px) 1; }

/* Sottolineatura dei titoli: una freccia gialla ogni tre verdi (il modulo «frecce» è largo altezza × 66.1/130) */
.stitched::after, .meet-events .stitched::after {
  --f: calc(10px * 66.1 / 130);
  background: repeating-linear-gradient(90deg, var(--giallo) 0 var(--f), var(--verde) var(--f) calc(var(--f) * 4)); }
/* Citazione di benvenuto: riga viola */
.bp-quote { border-image: none; border-left: 5px solid var(--viola); }
/* le virgolette in un cerchio viola, appoggiate in cima alla barra della citazione */
.bp-quote { position: relative; }
.bp-quote-icon { position: absolute; left: -18px; top: -24px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--viola); color: #fff; box-shadow: 0 0 0 4px #fff; }
.bp-quote-icon svg { display: block; width: 14px; height: 14px; }

/* Foto ai lati più alte dei riquadri centrali: occupano quasi tutta l'altezza della sezione */
@media (min-width: 1360px) {
  .meet-photos, .side-photos { display: flex; flex-direction: column; gap: 16px; align-self: stretch; margin: -72px 0; }
  .meet-photos img, .side-photos img, .meet-photos img:nth-child(2), .side-photos img:nth-child(2) { height: auto; flex: 1 1 0; min-height: 0; }
  .meet-photos img:first-child, .side-photos img:first-child { flex-grow: 1.4; }
}

/* ==========================================================================
   Carta strappata: le sezioni si sovrappongono alla precedente con un bordo irregolare
   ========================================================================== */
.section.path, .news-band, .meet, .support, .insta, .site-footer,
.contact-form-band, .events-list-section {
  --torn: 24px;
  position: relative; z-index: 1; margin-top: calc(var(--torn) * -1);
  -webkit-mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat;
  mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat;
}
.site-footer .rope { display: none; }
.site-footer { padding-top: var(--torn); }
/* le cuciture in alto scendono sotto lo strappo */
.news-band::before { top: 34px; }
.contact-form-band::before, .events-list-section::before { top: 34px; }

/* Contattaci / In programma: più aria sopra, sotto e tra foto e riquadri */
.meet { padding: clamp(110px, 12vw, 170px) 0 clamp(100px, 11vw, 160px); column-gap: clamp(16px, 2vw, 32px); }

/* Fascia news: niente carta strappata né sopra (inizio news) né sotto (inizio Contattaci) */
.news-band, .meet { margin-top: 0; -webkit-mask: none; mask: none; }
.meet { padding-top: clamp(86px, 10vw, 146px); }
/* Benvenuti: più spazio sopra e sotto */
.section.welcome { padding: clamp(110px, 12vw, 170px) 0 clamp(110px, 12vw, 170px); }

/* foto delle due guide: inquadra i volti nella colonna stretta */
.meet-photos img[src*="guide-albenga5"] { object-position: 47% 30%; }
/* foto di gruppo con la bandiera della pace: inquadra la bandiera e il centro del gruppo */
.meet-photos img[src*="gruppo-pace"] { object-position: 52% center; }

/* In programma: sempre spazio per i due prossimi appuntamenti */
.meet-events .event-list { gap: 12px; }
.meet-events .event-row { min-height: 88px; }
.event-slot { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 14px 18px; border-radius: 18px; border: 2px dashed rgba(255,255,255,.35); color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background .2s, border-color .2s; }
.event-slot:hover { background: rgba(255,255,255,.08); border-color: var(--giallo); color: #fff; }
.event-slot .icon { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: rgba(255,255,255,.12); color: var(--giallo); flex-shrink: 0; }
.meet-events .meet-actions { margin-top: 24px; }
/* Fascia 5×1000: bordi dritti sopra (inizio fascia) e sotto (inizio Instagram) */
.support, .insta { margin-top: 0; -webkit-mask: none; mask: none; }
/* Le unità: bordo superiore dritto */
.section.path { margin-top: 0; -webkit-mask: none; mask: none; }
/* foto dal drone: il cerchio di scout resta al centro */
.quote-band > img { object-position: 50% 62%; }

/* Intestazione su telefono e tablet: logo a sinistra, ricerca e menu allineati a destra e centrati */
@media (max-width: 1180px) {
  .header-inner { justify-content: space-between; }
  .header-actions { margin-left: auto; gap: 4px; }
  .header-actions .search-toggle { width: 44px; height: 44px; }
  .header-actions .nav-toggle { margin: 0; }
}
@media (max-width: 640px) {
  .header-inner { padding-left: 16px; padding-right: 4px; }
  .brand { gap: 10px; min-width: 0; }
  .brand img { width: 42px; height: auto; }
  .brand-text small { font-size: .6rem; letter-spacing: .1em; margin-bottom: 3px; }
  .brand-text strong { font-size: 1.25rem; }
}

/* Sotto i 1360px le foto laterali spariscono: i blocchi centrali restano centrati con lo stesso margine ai lati */
@media (max-width: 1359px) {
  .meet, .welcome { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .meet-grid, .welcome > .wrap { grid-column: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; }
}

/* Pulsante «Torna su» in basso a destra */
.to-top { position: fixed; right: clamp(14px, 2.5vw, 28px); bottom: clamp(14px, 2.5vw, 28px); z-index: 60; width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid #fff; background: var(--viola); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 20px rgba(36,19,63,.3); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility .25s, background .2s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--giallo); color: var(--ink); }
.to-top .icon { transform: rotate(-90deg); }

/* Riga finale del piè di pagina: lascia libero lo spazio del pulsante «Torna su» */
@media (max-width: 1400px) { .footer-bottom { padding-right: calc(var(--gutter) + 70px); } }
@media (max-width: 760px) { .footer-bottom { padding-right: var(--gutter); padding-bottom: 92px; } }

/* Sotto il feed: i social del Gruppo con freccia per aprirli */
.social-row { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.social-row a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border-radius: 18px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.social-row a:hover { transform: translateY(-3px); border-color: var(--viola); color: var(--ink); }
.social-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.social-ico .icon { width: 22px; height: 22px; }
.social-facebook .social-ico { background: #1877F2; }
.social-instagram .social-ico { background: linear-gradient(45deg, #F77737, #E1306C 50%, #833AB4); }
.social-youtube .social-ico { background: #E62117; }
.social-linkedin .social-ico { background: #0A66C2; }
.social-txt { flex: 1; min-width: 0; display: grid; }
.social-txt strong { font: 800 1rem/1.2 var(--f-head); }
.social-txt small { color: var(--muted); font-size: .82rem; }
.social-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--viola-50); color: var(--viola); flex-shrink: 0; transition: background .2s, color .2s, transform .2s; }
.social-go .icon { width: 16px; height: 16px; transform: rotate(-45deg); }
.social-row a:hover .social-go { background: var(--viola); color: #fff; transform: translateX(3px); }
.social-row { align-items: stretch; }
.social-row a { height: 100%; }
/* Telefono: due social per riga; la freccia sparisce per lasciare spazio al nome */
@media (max-width: 560px) {
  .social-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .social-row a { gap: 10px; padding: 12px; border-radius: 16px; }
  .social-row .social-ico { width: 38px; height: 38px; }
  .social-row .social-ico .icon { width: 19px; height: 19px; }
  .social-row .social-txt strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .social-row .social-go { display: none; }
}

/* In programma: i due pulsanti su una sola riga */
.meet-events .meet-actions { flex-wrap: nowrap; gap: 10px; }
.meet-events .meet-actions .btn { font-size: .9rem; padding: .75em 1.05em; white-space: nowrap; }
.meet-events .meet-actions .btn .icon { width: 18px; height: 18px; }
@media (max-width: 480px) { .meet-events .meet-actions { flex-wrap: wrap; } }
/* Sottolineatura dei titoli: lunghezza pari a 23 frecce intere (niente freccia tagliata in fondo) */
.stitched::after, .meet-events .stitched::after { width: calc(var(--f) * 23); }

/* Chat WhatsApp: sopra il pulsante «Torna su», sempre visibile */
.wa-chat { position: fixed; right: clamp(14px, 2.5vw, 28px); bottom: calc(clamp(14px, 2.5vw, 28px) + 62px); z-index: 60; width: 54px; height: 54px; margin-right: -2px;
  border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.22); transition: transform .2s, background .2s; }
.wa-chat:hover { transform: scale(1.06); background: #1EBE5A; color: #fff; }
.wa-chat .icon { width: 28px; height: 28px; }
@media (max-width: 760px) { .footer-bottom { padding-bottom: 156px; } }

/* Fascia verde e gialla sotto la foto di apertura: solo nelle pagine delle unità e della Co.Ca. (che hanno il loro colore) */
.page-hero:not(.hero-unit)::after { content: none; }

/* Foto di apertura delle pagine: angoli inferiori arrotondati come lo slider della home */
.page-hero { border-radius: 0 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); overflow: hidden; isolation: isolate; }

/* Arrotondamenti più leggeri: foto di apertura (slider e pagine) e foto della citazione prima del piè di pagina */
:root { --soft-r: clamp(12px, 1.6vw, 22px); }
.hero-slider, .page-hero { border-radius: 0 0 var(--soft-r) var(--soft-r); }
.quote-band { border-radius: var(--soft-r) var(--soft-r) 0 0; }

/* Eventi, elenco appuntamenti: bordo dritto e fondo viola chiaro, a tinta piena */
.events-list-section { margin-top: 0; -webkit-mask: none; mask: none; background: var(--viola-100); }
.events-list-section::before { top: 18px; }
/* Contatti: niente tratteggio sopra il modulo */
.contact-form-band::before { content: none; }
/* Eventi, elenco appuntamenti: niente tratteggi sopra e sotto */
.events-list-section::before, .events-list-section::after { content: none; }
/* Eventi, elenco appuntamenti: di nuovo il bordo a carta strappata in alto (come in Contatti) */
.events-list-section { --torn: 24px; margin-top: calc(var(--torn) * -1);
  -webkit-mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat;
  mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat; }

/* Benvenuti: illustrazione più piccola, a sinistra del testo */
@media (min-width: 861px) {
  .welcome-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .welcome-art { order: -1; max-width: 380px; justify-self: center; }
}
/* togli il pezzetto della freccia successiva in fondo alla sottolineatura */
.stitched::after, .meet-events .stitched::after { width: calc(var(--f) * 23 - 3px); }
/* WhatsApp: bordo bianco e stessa misura del «Torna su» */
.wa-chat { width: 50px; height: 50px; margin-right: 0; border: 2px solid #fff; }
.wa-chat .icon { width: 24px; height: 24px; }

/* ==========================================================================
   Benvenuti: illustrazione · testo · slider obliquo di foto delle attività
   ========================================================================== */
.section.welcome { display: block; overflow: hidden; padding: clamp(90px, 10vw, 140px) 0; }
.welcome > .wrap { grid-column: auto; }
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 1000px) {
  .welcome-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 5.2fr) minmax(0, 3.6fr); gap: clamp(28px, 3.5vw, 56px); }
  .welcome-art { order: -1; max-width: 320px; }
}
@media (min-width: 861px) and (max-width: 999px) {
  .welcome-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .welcome-art { display: none; }
}

.welcome-reel { position: relative; height: clamp(420px, 44vw, 560px); margin: -40px 0;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.reel-tilt { position: absolute; inset: -12% -8%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; transform: rotate(-9deg); }
.reel-col { overflow: hidden; }
.reel-track { display: flex; flex-direction: column; gap: 16px; animation: reel-up 46s linear infinite; }
.reel-col-2 .reel-track { animation-name: reel-down; animation-duration: 54s; }
.reel-col-2 { margin-top: 60px; }
/* Foto intere, con le proporzioni prese da width e height del tag: la colonna ha l'altezza giusta anche prima che le foto arrivino */
.reel-track img { width: 100%; height: auto; border-radius: 14px; border: 5px solid #fff; box-shadow: 0 10px 24px rgba(36,19,63,.22); background: var(--viola-50); }
/* Ogni colonna su un livello proprio della scheda grafica: lo scorrimento non ridisegna foto e ombre a ogni fotogramma */
.reel-track { will-change: transform; backface-visibility: hidden; }
/* Pausa al passaggio del mouse solo dove c'è un mouse: sul telefono un tocco lasciava l'animazione ferma («inceppata») */
@media (hover: hover) and (pointer: fine) { .welcome-reel:hover .reel-track { animation-play-state: paused; } }
@keyframes reel-up { to { transform: translateY(calc(-50% - 8px)); } }
@keyframes reel-down { from { transform: translateY(calc(-50% - 8px)); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .reel-track { animation: none; } }
/* Con lo script attivo le colonne le muove assets/js/main.js: l'animazione CSS resta solo per chi non ha JavaScript */
.welcome-reel.is-js .reel-track { animation: none; }
@media (max-width: 860px) {
  .welcome-reel { height: 360px; margin: 0 -16px; }
  .reel-tilt { inset: -20% -4%; }
}

/* Benvenuti: citazione in alto, sopra illustrazione e testo; lo slider occupa tutta l'altezza a destra */
.welcome-grid { grid-template-areas: "quote" "text" "art" "reel"; }
.welcome-grid > .bp-quote { grid-area: quote; margin: 0; align-self: end; }
.welcome-text { grid-area: text; }
.welcome-art { grid-area: art; }
.welcome-reel { grid-area: reel; }
@media (min-width: 1000px) {
  .welcome-grid { grid-template-areas: "quote quote reel" "art text reel"; row-gap: 36px; }
  .welcome-art { order: 0; }
}
@media (min-width: 861px) and (max-width: 999px) {
  .welcome-grid { grid-template-areas: "quote reel" "text reel"; }
}

/* Slider obliquo: più largo e con le foto intere (proporzioni originali, niente tagli ai lati) */
@media (min-width: 1000px) {
  .welcome-grid { grid-template-columns: minmax(0, 2.6fr) minmax(0, 4.6fr) minmax(0, 5fr); }
}
.welcome-reel { height: clamp(460px, 46vw, 620px); }
.reel-tilt { inset: -14% 5%; transform: rotate(-7deg); gap: 18px; }
@media (max-width: 860px) { .reel-tilt { inset: -16% 6%; } }

/* Benvenuti: pulsanti sotto illustrazione e testo, su una riga */
.welcome-grid > .welcome-links { grid-area: links; margin: 0; flex-wrap: wrap; }
.welcome-grid { grid-template-areas: "quote" "text" "links" "art" "reel"; }
@media (min-width: 1000px) {
  .welcome-grid { grid-template-areas: "quote quote reel" "art text reel" "links links reel"; }
  .welcome-grid > .welcome-links { flex-wrap: nowrap; }
}
@media (min-width: 861px) and (max-width: 999px) {
  .welcome-grid { grid-template-areas: "quote reel" "text reel" "links reel"; }
}
/* Telefono: i tre pulsanti su una sola riga, stessa larghezza, testo più piccolo */
@media (max-width: 560px) {
  .welcome-grid > .welcome-links { flex-wrap: nowrap; gap: 6px; }
  .welcome-grid > .welcome-links a { flex: 1 1 auto; min-width: 0; padding: .6em .55em; font-size: clamp(.75rem, 3.5vw, .9rem); text-align: center; white-space: nowrap; }
}

/* Benvenuti: l'illustrazione diventa lo sfondo della sezione, a sinistra e sfumata */
.section.welcome { position: relative; isolation: isolate; }
.section.welcome::before { content: ""; position: absolute; z-index: -1; left: max(0px, calc(50% - 760px)); bottom: 0; width: min(620px, 52vw); aspect-ratio: 1000 / 836;
  background: url(../img/varianti/benvenuti-800.webp) left bottom / contain no-repeat; mix-blend-mode: multiply; opacity: .16; pointer-events: none; }
@media (max-width: 860px) { .section.welcome::before { background-image: url(../img/varianti/benvenuti-480.webp); } }
.welcome-grid { grid-template-areas: "quote" "text" "links" "reel"; }
@media (min-width: 1000px) {
  .welcome-grid { grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr); grid-template-areas: "quote reel" "text reel" "links reel"; }
}
@media (max-width: 860px) { .section.welcome::before { width: 90vw; opacity: .1; } }
/* Benvenuti: niente illustrazione di sfondo */
.section.welcome::before { content: none; }
/* Benvenuti su computer e tablet: le colonne di foto vanno da sotto lo slider fino a sotto la fascia viola delle unità, senza sfumature,
   così sembrano uscire da quei due bordi. Meno spazio sopra e sotto il testo. Slider e fascia stanno sopra (z-index) e coprono le foto */
@media (min-width: 861px) {
  .hero-slider { position: relative; z-index: 2; }
  .section.welcome { padding: clamp(48px, 5vw, 72px) 0; overflow: visible; overflow-x: clip; }
  .welcome-reel { align-self: stretch; height: auto; min-height: 460px; margin: calc(-1 * clamp(48px, 5vw, 72px) - 40px) 0 calc(-1 * clamp(48px, 5vw, 72px) - 44px);
    -webkit-mask: none; mask: none; }
  .reel-tilt { inset: -6% 5%; }
  /* una velatura bianca dove le foto entrano sotto lo slider e sotto la fascia: il passaggio è più morbido */
  .welcome-reel::before, .welcome-reel::after { content: ""; position: absolute; left: -8%; right: -8%; z-index: 1; height: 150px; pointer-events: none; }
  .welcome-reel::before { top: 0; background: linear-gradient(180deg, #fff 25%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.4) 75%, rgba(255,255,255,0)); }
  .welcome-reel::after { bottom: 0; background: linear-gradient(0deg, #fff 25%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.4) 75%, rgba(255,255,255,0)); }
}

/* Contattaci / In programma su schermi larghi: le foto ai lati crescono con lo schermo invece di restare strisce strette */
@media (min-width: 1360px) {
  .meet { grid-template-columns: clamp(240px, 20vw, 420px) minmax(0, 1fr) clamp(240px, 20vw, 420px); column-gap: clamp(20px, 2vw, 40px); }
  .meet-grid { max-width: 1240px; width: 100%; justify-self: center; padding: 0; }
}

/* Sottolineatura dei titoli: 23 frecce intere disegnate (una gialla ogni tre verdi), niente pezzi tagliati */
.stitched::after, .meet-events .stitched::after {
  -webkit-mask: none; mask: none; width: 120px; height: 10px; border-radius: 0;
  background: url(../img/frecce-titolo.svg) left center / auto 100% no-repeat; }
.meet-contact .stitched::after { background-image: url(../img/frecce-viola.svg); }

/* «Contattaci»: frecce viola (non barra piena) */
.meet-contact .stitched::after { background: url(../img/frecce-viola.svg) left center / auto 100% no-repeat; }

/* Contatti: mappa + pulsante alti quanto la colonna di testo a sinistra */
@media (min-width: 861px) {
  .contact-layout { align-items: stretch; }
  .contact-map { height: 100%; }
  .contact-map iframe { flex: 1 1 auto; min-height: 260px; height: auto; }
  .contact-map figcaption { flex: none; }
}
.contact-info > :last-child { margin-bottom: 0; }
/* Eventi, calendario Google: sfumatura invertita (più scura in alto, più chiara in basso) */
.gcal-band { background: #fff; }
.meet-photos img[src*="clan-treno"] { object-position: 30% center; }
.meet-photos img[src*="coca-rn24"] { object-position: 52% 45%; }

/* Banner Comunità Capi: foto «50 anni AGESCI» sullo sfondo, testo leggibile a sinistra */
.section.path .coca-banner {
  background: linear-gradient(90deg, #fff 0%, #fff 38%, rgba(255,255,255,.88) 52%, rgba(255,255,255,.15) 78%, rgba(255,255,255,0) 100%),
              url(../img/varianti/foto/coca-50anni-1280.webp) 85% 58% / 62% auto no-repeat, #fff; }
.section.path .coca-banner .btn { box-shadow: 0 6px 16px rgba(36,19,63,.3); }
@media (max-width: 860px) {
  .section.path .coca-banner { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.92) 55%, rgba(255,255,255,.4) 100%), url(../img/varianti/foto/coca-50anni-1280.webp) center bottom / cover no-repeat; }
}
@media (min-width: 861px) {
  .section.path .coca-banner {
    background: linear-gradient(90deg, #fff 0%, #fff 46%, rgba(255,255,255,.85) 56%, rgba(255,255,255,.1) 76%, rgba(255,255,255,0) 100%),
                url(../img/varianti/foto/coca-50anni-1280.webp) right 42% / 56% auto no-repeat, #fff; }
}
/* Banner Co.Ca.: età nello stesso badge delle card delle unità */
.coca-banner .path-step.coca-age { position: static; display: inline-block; margin-bottom: 12px; background: var(--viola); color: #fff; }
/* Banner Co.Ca.: tratteggio interno più evidente */
.coca-banner::before { border: 2px dashed rgba(70,38,120,.55); z-index: 1; }
/* Pagina Comunità Capi: inquadra i volti dei capi */
.page-hero-img[src*="coca-rn24-capi"] { object-position: center 38%; }
.page-hero-img[src*="reparto-cerchio"] { object-position: center 55%; }
/* News: griglia su crema, filtri in viola chiaro */
.news-list-band { background: var(--tint); }
.news-list-band .news-filters { background: var(--viola-100); }
.news-list-band .news-filters::before { border-color: rgba(70,38,120,.22); }

/* Contattaci / In programma: le foto ai lati, una sopra l'altra, hanno sempre almeno 150 px di larghezza
   (è il blocco centrale a stringersi, fino a 1120 px di massimo); sotto i 1240 px spariscono */
@media (min-width: 1240px) {
  .meet { grid-template-columns: minmax(150px, 1fr) minmax(0, 1120px) minmax(150px, 1fr); column-gap: clamp(16px, 2vw, 40px); }
  .meet-grid { grid-column: 2; max-width: none; width: 100%; padding: 0; justify-self: stretch; }
  .meet-photos { display: flex; flex-direction: column; gap: 16px; align-self: stretch; grid-row: 1; min-width: 0; margin: -72px 0; }
  .meet-photos-l { grid-column: 1; }
  .meet-photos-r { grid-column: 3; }
  .meet-photos img, .meet-photos img:nth-child(2) { width: 100%; height: auto; min-width: 0; min-height: 0; flex: 1 1 0; object-fit: cover; }
  .meet-photos img:first-child { flex-grow: 1.4; }
  .meet-photos-l img { border-radius: 0 var(--radius) var(--radius) 0; }
  .meet-photos-r img { border-radius: var(--radius) 0 0 var(--radius); }
}
@media (max-width: 1239px) {
  .meet-photos { display: none; }
  .meet { grid-template-columns: minmax(0, 1fr); }
  .meet-grid { grid-column: 1; max-width: var(--wrap); margin: 0 auto; width: 100%; }
}

/* ==========================================================================
   Pagine di approfondimento (storia, branche, Co.Ca.…)
   ========================================================================== */
.page-band { background: radial-gradient(70% 70% at 100% 100%, #FFFFFF 0%, transparent 70%), linear-gradient(0deg, var(--viola-50), #F1ECF8); }
.page-band.page-chi-siamo-agesci { background: #fff; }
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 960px) { .page-layout { grid-template-columns: minmax(0, 7.4fr) minmax(0, 3.2fr); gap: clamp(40px, 5vw, 72px); } }
.page-article { background: #fff; border-radius: 24px; padding: clamp(24px, 4vw, 52px); box-shadow: var(--shadow); border-top: 6px solid var(--u, var(--viola)); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: .85rem; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--viola); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.page-article .prose { max-width: 70ch; }
.page-aside { position: sticky; top: calc(var(--header-h) + 24px); background: #fff; border-radius: 20px; padding: 24px; box-shadow: var(--shadow); }
.page-aside .kicker { color: var(--u-ink, var(--viola)); }
.page-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.page-menu a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.3; transition: background .15s, color .15s; }
.page-menu a:hover { background: var(--viola-50); color: var(--viola); }
.page-menu a[aria-current="page"] { background: var(--u, var(--viola)); color: #fff; }
.unit-giallo .page-menu a[aria-current="page"] { color: var(--ink); }
.page-menu li.sub a { padding-left: 26px; font-weight: 400; font-size: .9rem; }

/* Approfondimenti nelle pagine delle unità e in Chi siamo */
.deep-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.deep-links a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px 18px; background: #fff; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; line-height: 1.3; box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.deep-links a:hover { transform: translateY(-2px); border-color: var(--u, var(--viola)); color: var(--ink); }
.deep-links a span { flex: 1; }
.deep-links .icon { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--u-100, var(--viola-50)); color: var(--u-ink, var(--viola)); flex-shrink: 0; }
.deep-band { background: #fff; }

/* Home, Contattaci come sul vecchio sito: due colonne uguali, modulo a sinistra e «In programma» a destra */
.meet-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.meet-contact { background: var(--viola-50); }
.meet-contact h2 { margin-bottom: .4em; }
.meet-form { gap: 14px; margin-top: 8px; }
.meet-form input[type="text"], .meet-form input[type="email"], .meet-form textarea { background: #fff; padding: 10px 12px; }
.meet-form textarea { min-height: 96px; }
.meet-form .btn { padding: .7em 1.6em; }
.meet-contact .form-note { margin: 0; }
@media (max-width: 860px) { .meet-grid { grid-template-columns: minmax(0, 1fr); } }

/* WhatsApp in basso, «Torna su» sopra */
.wa-chat { bottom: clamp(14px, 2.5vw, 28px); }
.to-top { bottom: calc(clamp(14px, 2.5vw, 28px) + 62px); }

/* News: anteprime a mosaico (masonry), la copertina mantiene le sue proporzioni */
.news-masonry { grid-auto-rows: 8px; gap: 0 24px; align-items: start; }
.news-masonry .news-card { height: auto; margin-bottom: 24px; }
.news-masonry .card-media { aspect-ratio: auto; }
.news-masonry .card-media img { height: auto; }
.news-masonry .card-placeholder { aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .news-masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .news-masonry { grid-template-columns: 1fr; } }

/* Intestazione di nuovo trasparente sopra la foto; hero un po' più alte */
body.header-overlay .page-hero { padding-top: calc(var(--header-h) + clamp(84px, 11vw, 150px)); padding-bottom: clamp(56px, 7vw, 92px); }
body.header-overlay .hero-slider { height: calc(min(86vh, 780px) + 30px); }
@media (max-width: 640px) { body.header-overlay .hero-slider { height: 720px; } }

/* Ultime news: meno spazio sopra il titolo */
.news-band { padding-top: clamp(40px, 5vw, 64px); }
/* 5x1000: bordino sotto il codice fiscale viola */
.support-cf { border-bottom-color: var(--viola); }
/* Social: stesso sfondo lilla delle pagine Eventi e News */
.section.insta { background: #fff; }

/* ==========================================================================
   Pagine delle branche: impostazione come sul vecchio sito
   ========================================================================== */
.unit-intro { background: #fff; }
.unit-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(32px, 6vw, 80px); align-items: start; }
.unit-name { margin: -6px 0 22px; font: 700 1.25rem/1.35 var(--f-head); color: var(--u-ink); }
.unit-text .prose { max-width: 44rem; }
.unit-text .prose ul { padding-left: 1.2em; }
.unit-text .prose li { margin-bottom: .45em; }
.unit-text .prose li::marker { color: var(--u); }
.unit-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; }
.unit-side-photo { position: relative; margin: 0 0 22px; }
.unit-side-photo > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); }
.unit-badge { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 4px solid var(--u); box-shadow: 0 8px 20px rgba(36,19,63,.18); }
.unit-badge .unit-icon { width: 54px; height: 54px; }
.unit-badge img { width: 64px; height: 64px; object-fit: contain; }
.unit-side-links { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.unit-side-links a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: var(--u-100); color: var(--ink); font-weight: 700; line-height: 1.3; text-decoration: none; border: 2px solid transparent; transition: border-color .2s, background .2s, transform .2s; }
.unit-side-links a span { flex: 1; }
.unit-side-links a .icon { width: 18px; height: 18px; color: var(--u-ink); flex-shrink: 0; transition: transform .2s; }
.unit-side-links a:hover { background: #fff; border-color: var(--u); transform: translateX(3px); color: var(--ink); }
.unit-side-links a:hover .icon { transform: translateX(3px); }
.unit-side .unit-note { margin: 0; }

.unit-life { background: radial-gradient(70% 70% at 100% 0%, #FFFFFF 0%, transparent 70%), linear-gradient(180deg, var(--u-100), #fff); }
.unit-life-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.unit-life-grid p { max-width: 42rem; }
.unit-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 26px 0 0; }
.unit-facts dt { font: 600 .75rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--u-ink); margin-bottom: 6px; }
.unit-facts dd { margin: 0; font: 800 1.25rem/1.2 var(--f-head); color: var(--ink); }
.unit-when { position: relative; background: #fff; border-radius: 24px; padding: 30px 30px 26px; box-shadow: var(--shadow); border-top: 8px solid var(--u); }
.unit-when .kicker { margin-bottom: 10px; }
.unit-when > strong { display: block; font: 800 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--f-head); color: var(--ink); text-transform: uppercase; }
.unit-when-time { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 18px; padding: 6px 12px; border-radius: 999px; background: var(--u-100); color: var(--u-ink); font-weight: 700; font-size: .95rem; }
.unit-when-time .icon { width: 18px; height: 18px; }
.unit-when p.unit-when-where { display: flex; gap: 10px; margin: 0; padding-top: 16px; border-top: 2px dashed var(--line); color: var(--muted); }
.unit-when-where .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; color: var(--u-ink); }
.unit-quote { margin: clamp(48px, 7vw, 80px) auto 0; max-width: 46rem; text-align: center; }
.unit-quote::before { content: "\201C"; display: block; height: .5em; margin-bottom: 14px; font: 800 5rem/1 Georgia, serif; color: var(--u); }
.unit-quote p { margin: 0; font: 700 clamp(1.3rem, 2.4vw, 1.75rem)/1.35 var(--f-head); color: var(--ink); }
.unit-quote cite { display: block; margin-top: 14px; font-style: normal; font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--u-ink); }
@media (max-width: 900px) {
  .unit-intro-grid, .unit-life-grid { grid-template-columns: minmax(0, 1fr); }
  .unit-side { position: static; max-width: 460px; }
}
/* Pagine delle branche: età nel distintivo colorato, come nelle card della home */
.unit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.unit-meta .kicker { margin: 0; }
.path-step.unit-age { position: static; }

/* Caroselli con frecce (foto dell'unità, news nelle pagine delle unità) */
.carousel-arrows { display: flex; align-items: center; gap: 10px; }
.carousel-arrows .link-more { margin-right: 6px; }
.carousel-arrow { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, opacity .2s; }
.carousel-arrow .icon { width: 20px; height: 20px; }
.carousel-prev .icon { transform: rotate(180deg); }
.carousel-arrow:hover:not(:disabled) { background: var(--ink); color: #fff; }
.carousel-arrow:disabled { opacity: .3; cursor: default; }
.carousel-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > li { scroll-snap-align: start; flex-shrink: 0; }

/* Foto dell'unità su fondo colorato */
.unit-gallery { background: var(--u); padding: clamp(48px, 7vw, 80px) 0; }
.unit-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.unit-gallery-head h2 { margin: 0; color: var(--ink); }
.unit-rosso .unit-gallery-head h2, .unit-verde .unit-gallery-head h2, .unit-blu .unit-gallery-head h2 { color: #fff; }
.unit-rosso .carousel-arrow, .unit-verde .carousel-arrow, .unit-blu .carousel-arrow { border-color: #fff; color: #fff; }
.unit-rosso .carousel-arrow:hover:not(:disabled), .unit-verde .carousel-arrow:hover:not(:disabled), .unit-blu .carousel-arrow:hover:not(:disabled) { background: #fff; color: var(--ink); }
.unit-gallery-track { gap: 16px; padding: 0 max(16px, calc((100vw - 1120px) / 2)); scroll-padding: 0 max(16px, calc((100vw - 1120px) / 2)); }
.unit-gallery-track > li { width: clamp(260px, 34vw, 460px); }
.unit-gallery-track img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; border: 5px solid #fff; box-shadow: 0 10px 24px rgba(36,19,63,.18); }
/* Galleria in fondo alle pagine (L'AGESCI): didascalia e autore sotto ogni foto */
.page-gallery .unit-gallery-track figure { margin: 0; }
.page-gallery .unit-gallery-track figcaption { margin-top: 12px; color: #fff; font-size: .9rem; line-height: 1.4; }
.page-gallery .gallery-credit { display: block; margin-top: 3px; font-size: .78rem; opacity: .75; }

/* News nelle pagine delle unità: una alla volta */
.unit-news-track { gap: 16px; }
.unit-news-track > li { width: 100%; }
.unit-news-track .news-card { height: 100%; }
.unit-news-track .card-media { aspect-ratio: 16 / 9; }

/* Foto con citazione prima del footer: angoli alti arrotondati come in home */
.unit-quote-band { border-radius: var(--soft-r) var(--soft-r) 0 0; }
.unit-title-name { color: var(--u-ink); }
.two-col > div, [data-carousel] { min-width: 0; }
.unit-title-name { color: var(--u); }

/* Vita di unità: testo sopra, poi orari, appuntamenti e news su tre colonne */
.unit-life-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: end; }
.unit-life-cols p { max-width: 44rem; }
.unit-life-cols .unit-facts { margin: 0 0 1em; flex-direction: column; gap: 18px; }
.unit-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); align-items: start; margin-top: clamp(32px, 5vw, 56px); }
.unit-trio > div { min-width: 0; }
.unit-trio .section-head { margin-bottom: 18px; }
.unit-trio .section-head h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 0; }
.unit-trio .section-head-row { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.unit-trio .carousel-arrow { width: 38px; height: 38px; }
.unit-trio .event-row { padding: 14px; gap: 14px; }
@media (max-width: 1000px) { .unit-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } .unit-trio > :last-child { grid-column: 1 / -1; } }
@media (max-width: 680px) { .unit-trio, .unit-life-cols { grid-template-columns: minmax(0, 1fr); } .unit-trio > :last-child { grid-column: auto; } }
.unit-meta .kicker { color: var(--u); }
.unit-meta .kicker::before { background: var(--u); }
/* Pagine delle unità: sopra lo stesso spazio delle sottopagine; il titolo respira rispetto alla linea e la linea rispetto al testo */
.unit-intro { padding-top: clamp(40px, 6vw, 72px); }
.unit-text > h2.stitched { color: var(--u); padding-bottom: 24px; margin-bottom: 28px; }
.unit-life { background: #fff; }
/* «Vita di …»: i testi sull'anno stanno nel box «Quando ci si ritrova?» */
.unit-life-cols { display: block; }
.unit-life-cols .unit-facts { flex-direction: row; gap: 12px 48px; margin: 0; }
.unit-when-life { margin: 0 0 16px; }
.unit-when-life p { margin: 0 0 .7em; font-size: .95rem; color: var(--text); }
.unit-when-life p:last-child { margin-bottom: 0; }
.unit-gallery-head h2 { color: #fff; }
.unit-life .unit-trio { margin-top: 12px; }
/* Tre colonne come box uguali, con il bordo di branca sopra e sotto */
.unit-trio { align-items: stretch; }
.unit-trio > div { background: #fff; border-radius: 24px; padding: 28px 26px 24px; box-shadow: var(--shadow); border-top: 8px solid var(--u); border-bottom: 8px solid var(--u); }
.unit-trio .event-row { box-shadow: none; }
.unit-trio .news-card { box-shadow: none; }
/* Fascia foto: frecce bianche su ogni colore di branca */
.unit-gallery .carousel-arrow { border-color: #fff; color: #fff; }
.unit-gallery .carousel-arrow:hover:not(:disabled) { background: #fff; color: var(--ink); }
/* Tre colonne: (orari + appuntamenti), dove ci troviamo con mappa, news */
.unit-trio > div { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.unit-trio .trio-card { background: #fff; border-radius: 24px; padding: 28px 26px 24px; box-shadow: var(--shadow); border-top: 8px solid var(--u); border-bottom: 8px solid var(--u); }
.trio-stack { display: grid; gap: clamp(20px, 3vw, 32px); align-content: start; }
.unit-trio > .trio-card { align-self: start; }
.unit-where { display: flex; flex-direction: column; gap: 16px; }
.unit-where .kicker { margin: 0; }
.unit-where .unit-when-where { border-top: 0; padding-top: 0; color: var(--text); }
.unit-where iframe { width: 100%; height: 340px; border: 0; border-radius: 16px; background: var(--tint); }
.unit-where .btn { align-self: flex-start; }
.unit-where .btn .icon { width: 18px; height: 18px; }
.unit-when-life { margin-bottom: 0; }
.unit-where .unit-when-where { display: flex; gap: 10px; margin: 0; }
.unit-where .unit-when-where .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; color: var(--u-ink); }

/* ==========================================================================
   Vita di unità: tre colonne della stessa altezza, box con intestazione e piè uguali
   ========================================================================== */
.unit-trio { align-items: stretch; }
.trio-stack { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); }
.trio-stack > .unit-events { flex: 1; }
.unit-trio .trio-card { display: flex; flex-direction: column; padding: 24px 24px 20px; }
.unit-trio > .trio-card { align-self: stretch; }
.trio-head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 2px dashed var(--line); }
.trio-head h3 { margin: 0; font: 800 1.12rem/1.25 var(--f-head); color: var(--ink); }
.trio-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--u-100); color: var(--u-ink); flex-shrink: 0; }
.trio-icon .icon { width: 20px; height: 20px; }
.trio-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.trio-foot .carousel-arrows { gap: 8px; }
.unit-trio .carousel-arrow { width: 38px; height: 38px; }
/* Quando */
.unit-when-day { display: block; font: 800 1.6rem/1.1 var(--f-head); color: var(--ink); text-transform: uppercase; }
.unit-when .unit-when-time { display: inline-flex; align-self: flex-start; margin: 10px 0 14px; padding: 5px 12px; border-radius: 999px; background: var(--u-100); color: var(--u-ink); font-weight: 700; font-size: .92rem; }
.unit-when .unit-when-life p { font-size: .95rem; }
/* Dove */
.unit-where-text { margin: 0 0 16px; color: var(--text); }
.unit-where iframe { flex: 1; width: 100%; min-height: 280px; height: auto; border: 0; border-radius: 16px; background: var(--tint); }
/* Appuntamenti e news */
.unit-events .event-list { gap: 12px; }
.unit-events .empty { margin: 0; }
.unit-news .carousel-track { flex: 1; }
.unit-news .unit-news-track > li { display: flex; }
.unit-news .news-card { flex: 1; border-radius: 16px; }
@media (max-width: 1000px) { .trio-stack { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .unit-trio > :last-child { grid-column: auto; } }
@media (max-width: 680px) { .trio-stack { grid-template-columns: minmax(0, 1fr); } }
/* Vita di unità: di nuovo lo sfumato chiaro nel colore di branca */
.unit-life { background: radial-gradient(70% 70% at 100% 0%, #FFFFFF 0%, transparent 70%), linear-gradient(180deg, var(--u-100), #fff); }
.unit-life.unit-viola { background: var(--tint); } /* Comunità Capi: crema a tinta piena, le unità restano per ora con la sfumatura del loro colore */
/* Box della vita di unità: bordo di branca tutto intorno */
.unit-trio .trio-card { border: 4px solid var(--u); }
/* Vita di unità: un unico box bianco con bordo di branca sopra e sotto; dentro, colonne separate da tratteggi */
.unit-trio { background: #fff; border-radius: 24px; border-top: 8px solid var(--u); border-bottom: 8px solid var(--u); box-shadow: var(--shadow); padding: clamp(20px, 2.5vw, 32px) 0; gap: 0; }
.unit-trio .trio-card { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 4px clamp(18px, 2.2vw, 30px); }
.unit-trio > * + * { border-left: 2px dashed var(--line); }
.trio-stack { gap: 0; }
.trio-stack > .trio-card + .trio-card { margin-top: 22px; padding-top: 22px; border-top: 2px dashed var(--line); }
@media (max-width: 1000px) {
  .unit-trio > * + * { border-left: 0; }
  .unit-trio > .trio-card { margin-top: 22px; padding-top: 22px; border-top: 2px dashed var(--line); }
  .trio-stack > .trio-card + .trio-card { margin-top: 0; padding-top: 4px; border-top: 0; border-left: 2px dashed var(--line); }
}
@media (max-width: 680px) {
  .trio-stack > .trio-card + .trio-card { margin-top: 22px; padding-top: 22px; border-top: 2px dashed var(--line); border-left: 0; }
}
.unit-life .unit-trio > div + div { border-left: 2px dashed var(--line); }
@media (max-width: 1000px) { .unit-life .unit-trio > div + div { border-left: 0; } }
/* Pulsanti in fondo ai riquadri della vita di unità */
.trio-btn { padding: .55em 1.1em; font-size: .92rem; gap: 8px; border: 2px solid var(--u); color: var(--ink); }
.trio-btn .icon { width: 18px; height: 18px; color: var(--u-ink); }
.trio-btn:hover { background: var(--u); border-color: var(--u); color: var(--ink); }
/* La data prende il colore dell'evento, non della pagina (es. evento di Gruppo nella pagina del Branco) */
.event-row:not(.is-past):not(.unit-giallo) .event-date { color: #fff; }
.event-row.unit-giallo:not(.is-past) .event-date { color: var(--ink); }
/* Titoli dei riquadri nel colore di branca, icona su fondo bianco */
.trio-head h3 { color: var(--u); }
.trio-icon { background: #fff; color: var(--u); border: 2px solid var(--u); }
/* News nelle pagine delle unità: due alla volta, una sopra l'altra */
.unit-news .unit-news-track > li { flex-direction: column; gap: 14px; }
.unit-news .news-card { flex: 1; display: flex; flex-direction: column; }
.unit-news .card-media { aspect-ratio: 2 / 1; }
.unit-news .card-body { padding: 14px 16px 16px; }
.unit-news .card-body > p:not(.card-foot) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; margin-bottom: 0; }
.unit-news .card-foot { display: none; }
.unit-news .news-card h3 { font-size: 1rem; margin: 6px 0; }
/* Pulsante stop / riprendi dello scorrimento automatico */
.carousel-pause span { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.carousel-pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.carousel-pause { margin-right: 6px; }
.unit-side-photo > img[src*="branco-gallinara"] { object-position: 27% center; }
/* Credito di una foto con licenza libera: piccolo, in alto a sinistra sulla foto (in basso c'è il distintivo) */
.photo-credit { position: absolute; top: 10px; left: 12px; z-index: 2; margin: 0; }
.photo-credit a { display: inline-block; padding: 3px 8px; border-radius: 999px; background: rgba(20,14,30,.45); color: #fff; font-size: .75rem; line-height: 1.3; text-decoration: none; }
.photo-credit a:hover { background: rgba(20,14,30,.7); color: #fff; }
/* Titoli dei riquadri evidenziati in fascia chiara di branca */
.trio-head { background: var(--u-100); border-bottom: 0; border-radius: 999px; padding: 6px 16px 6px 6px; }
.trio-head h3 { color: var(--u-ink); }
.trio-head h3 { font-size: .98rem; }
.trio-head { min-height: 56px; }
/* Collegamenti accanto alla foto: icona dell'argomento a sinistra */
.unit-side-links a { padding: 10px 16px 10px 10px; }
.unit-side-links a span.side-link-icon { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--u); }
.unit-side-links a .side-link-icon .icon { width: 18px; height: 18px; color: var(--u-ink); transition: none; }
.unit-side-links a:hover .side-link-icon .icon { transform: none; }
/* Icone dei collegamenti come sul vecchio sito: piene, nel colore di branca, senza cerchio */
.unit-side-links a { padding: 12px 16px; gap: 14px; }
.unit-side-links a span.side-link-icon { width: 24px; height: 22px; border: 0; border-radius: 0; background: none; color: var(--u-ink); }
.unit-giallo .unit-side-links a span.side-link-icon { color: #E3A900; }
.side-link-icon svg { width: 22px; height: 20px; display: block; margin: auto; }
/* Disegno a lato del testo (es. il lupo del Branco) */
.unit-drawing { float: right; width: 150px; height: auto; margin: 0 0 12px 28px; mix-blend-mode: multiply; }
@media (max-width: 560px) { .unit-drawing { width: 110px; margin-left: 16px; } }
.unit-quote-band > img[src*="branco-gioco"] { object-position: center 30%; }

/* Pagine di approfondimento: sottomenu della sezione sotto la hero (al posto del menu laterale) */
.page-layout { grid-template-columns: minmax(0, 1fr) !important; }
.section-subnav { position: relative; z-index: 2; margin-top: -28px; }
.section-subnav ul { list-style: none; margin: 0; padding: 8px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; background: #fff; border-radius: 999px; box-shadow: var(--shadow); border: 2px solid var(--u); }
.section-subnav ul::-webkit-scrollbar { display: none; }
.section-subnav li { flex-shrink: 0; }
.section-subnav a { display: block; padding: 9px 16px; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .92rem; white-space: nowrap; text-decoration: none; transition: background .15s; }
.section-subnav a:hover { background: var(--u-100); color: var(--ink); }
.section-subnav a[aria-current="page"] { background: var(--u); color: #fff; }
.section-subnav.unit-giallo a[aria-current="page"] { color: var(--ink); }
.section-subnav + .section { padding-top: clamp(40px, 6vw, 72px); }
@media (min-width: 760px) { .section-subnav ul { flex-wrap: wrap; justify-content: center; border-radius: 28px; overflow: visible; } }
/* Sottomenu di sezione: su due righe se serve, con le icone degli argomenti */
.section-subnav ul { flex-wrap: wrap; justify-content: center; border-radius: 28px; overflow: visible; }
.section-subnav a { display: inline-flex; align-items: center; gap: 8px; }
.subnav-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--u-ink); }
.section-subnav.unit-giallo .subnav-icon { color: #E3A900; }
.section-subnav a[aria-current="page"] .subnav-icon { color: currentColor; }
.subnav-icon svg { width: 18px; height: 16px; display: block; }
@media (max-width: 759px) { .section-subnav ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; border-radius: 999px; } }
/* Sottomenu su due righe con le voci distribuite in modo uniforme (metà per riga, stessa larghezza) */
@media (min-width: 760px) {
  .section-subnav.is-two-rows ul { justify-content: center; row-gap: 4px; }
  .section-subnav.is-two-rows li { flex: 0 0 calc((100% - (var(--cols) - 1) * 6px) / var(--cols)); }
  .section-subnav.is-two-rows a { justify-content: center; text-align: center; height: 100%; white-space: normal; }
}
@media (min-width: 760px) { .section-subnav.is-two-rows a { display: flex; width: 100%; } }
.subnav-unit { width: 24px; height: 24px; }
.subnav-unit .unit-icon { width: 24px; height: 24px; margin: 0; }

/* Pagine di approfondimento: larghezza normale e foto in fondo con angoli alti arrotondati */
.page-article .prose { max-width: none; }
.page-photo-band { height: clamp(240px, 32vw, 420px); overflow: hidden; border-radius: var(--soft-r) var(--soft-r) 0 0; background: var(--viola-900); }
.page-photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Tabelle nel testo */
.md-table { overflow-x: auto; margin: 1.2em 0 1.6em; border-radius: 16px; border: 1px solid var(--line); }
.md-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.md-table th { background: var(--u, var(--viola)); color: #fff; text-align: left; font-weight: 700; padding: 10px 14px; white-space: nowrap; }
.unit-giallo .md-table th { color: var(--ink); }
.md-table td { padding: 9px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.md-table tbody tr:nth-child(even) td { background: var(--u-100, var(--viola-50)); }
.md-table td:first-child { font-weight: 700; white-space: nowrap; }
/* Menu «Chi siamo»: tre box colorati con icona */
.mega-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-cards .mega-unit { flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; padding: 18px; }
.mega-card-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--u); flex-shrink: 0; }
.unit-giallo .mega-card-icon { color: #E3A900; }
.mega-card-icon svg { width: 26px; height: 24px; }
.mega-card-icon .unit-icon { width: 30px; height: 30px; }
@media (max-width: 1180px) { .mega-cards { grid-template-columns: 1fr; } .mega-cards .mega-unit { flex-direction: row; align-items: center; } }
/* Le unità: la Comunità Capi su una terza riga a tutta larghezza */
.mega-units:not(.mega-cards) > li:nth-child(5) { grid-column: 1 / -1; }

/* Schede affiancate per preghiere, canti e testi titolati (disposte a mosaico, su tutta la larghezza) */
.md-cards { columns: 3 280px; column-gap: 20px; margin: 1.4em 0; }
.md-card { break-inside: avoid; margin: 0 0 20px; background: var(--u-100, var(--viola-50)); border-radius: 18px; padding: 22px 24px; border-top: 5px solid var(--u, var(--viola)); }
.md-card h3 { margin: 0 0 10px; font-size: 1.12rem; color: var(--ink); }
.md-card p { margin: 0; font-size: .98rem; line-height: 1.65; }
.md-card-img { padding: 14px; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--u, var(--viola)); text-align: center; }
.md-card-img img { display: block; width: 100%; max-height: 320px; object-fit: contain; margin: 0 auto; mix-blend-mode: multiply; border-radius: 0; }
.md-card-img a { display: block; }
/* Pulsante stampa in fondo alle pagine di approfondimento */
.page-actions { display: flex; justify-content: flex-end; margin-top: 28px; padding-top: 20px; border-top: 2px dashed var(--line); }
.page-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.page-actions .icon { width: 18px; height: 18px; }
/* Stampa: solo il testo della pagina */
@media print {
  .site-header, .site-footer, .section-subnav, .page-photo-band, .page-actions, .crumbs, .to-top, .wa-chat, .skip { display: none !important; }
  .page-hero { padding: 0 0 12px !important; color: #000; background: none; }
  .page-hero::before, .page-hero::after, .page-hero-img, .hero-mark { display: none !important; }
  .page-hero h1, .page-hero .kicker { color: #000 !important; }
  .page-band, .section { background: none !important; padding: 0 !important; }
  .page-article { box-shadow: none; border: 0; padding: 0; }
  .md-cards { columns: 2; }
  .md-card { background: none; border: 1px solid #999; }
  .md-card-img img { max-height: 220px; }
}
.page-actions { justify-content: center; }
.unit-gallery-track img[src*="reparto/03-"] { object-position: center 55%; }
.unit-gallery-track img[src*="clan/02-"] { object-position: center 98%; } /* foto verticale: il gruppo in basso, davanti alla cattedrale */

/* Testo introduttivo con slider di foto a destra (una foto alla volta, puntini sotto) */
.page-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: 1.6em; }
.intro-slider { position: relative; min-width: 0; }
.intro-slider .carousel-track { border-radius: 22px; box-shadow: var(--shadow); }
.intro-slider .carousel-track > li { width: 100%; }
.intro-slider img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Pallini dei caroselli: il pulsante è 24×24 (WCAG 2.5.8), il pallino disegnato dentro resta di 10 px */
.carousel-dots { display: flex; justify-content: center; gap: 0; margin-top: 7px; }
.carousel-dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: width .2s; }
.carousel-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 999px; background: var(--line); transition: width .2s, background .2s; }
.carousel-dots button[aria-current="true"] { width: 40px; }
.carousel-dots button[aria-current="true"]::before { width: 26px; background: var(--u, var(--viola)); }
@media (max-width: 860px) { .page-intro { grid-template-columns: minmax(0, 1fr); } }
/* Foto sola accanto all'apertura (Carta di Clan: il raccoglitore, che porta allo sfogliatore): colonna fissa a destra e la stessa
   cornice nel colore della branca delle foto nelle Preghiere del Clan (.prayer-page .lpm-art) */
.page-intro-photo { grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.intro-photo { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: var(--muted); font-size: .9rem; font-weight: 600; }
.intro-photo-frame { position: relative; isolation: isolate; width: 100%; padding: 0 14px 14px 0; }
.intro-photo-frame::before { content: ""; position: absolute; inset: 14px 0 0 14px; z-index: -1; border-radius: 22px; background: var(--u, var(--viola)); }
.intro-photo img { display: block; width: 100%; height: auto; border-radius: 20px; background: #fff; box-shadow: var(--shadow); transition: transform .2s; }
.intro-photo:hover img { transform: translate(-3px, -3px); }
.intro-photo:hover { color: var(--u-ink, var(--viola)); }
.intro-photo span { display: inline-flex; align-items: center; gap: 4px; }
.intro-photo span .icon { width: 16px; height: 16px; }
/* Su tablet e telefono una colonna sola: prima il testo, poi la foto al centro con il link allo sfogliatore che sta subito sotto */
@media (max-width: 860px) {
  .page-intro-photo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .intro-photo-frame { max-width: 300px; }
}
/* La tabella resta nella larghezza normale del sito, centrata */
.page-article .md-table { max-width: 1120px; margin-inline: auto; }
.page-article .prose h2:has(+ .md-table) { max-width: 1120px; margin-inline: auto; }
/* Pagine di approfondimento: riquadro senza bordo colorato */
.page-article { border-top: 0; border-bottom: 0; }

/* Pagine di approfondimento: niente riquadro bianco, il contenuto sta nella larghezza normale del sito */
.page-article { background: none; box-shadow: none; border-radius: 0; padding: 0; }
.page-article .md-table, .page-article .prose h2:has(+ .md-table) { max-width: none; }
.page-actions { border-top: 0; padding-top: 0; }
/* Tabella per decenni: pulsanti sopra la tabella */
.table-decades { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.table-decades button { padding: 8px 16px; border-radius: 999px; border: 2px solid var(--u, var(--viola)); background: #fff; color: var(--ink); font: 700 .92rem/1 var(--f-body); cursor: pointer; transition: background .15s; }
.table-decades button:hover { background: var(--u-100, var(--viola-50)); }
.table-decades button[aria-pressed="true"] { background: var(--u, var(--viola)); color: #fff; }
.unit-giallo .table-decades button[aria-pressed="true"] { color: var(--ink); }
@media print { .table-decades { display: none; } .md-table tr[hidden] { display: table-row !important; } }

/* Mappa dei luoghi delle Vacanze di Branco */
.vdb-map-block { margin-top: clamp(40px, 6vw, 64px); }
.vdb-map-block h2 { margin-bottom: .2em; }
.vdb-map { height: clamp(360px, 45vw, 520px); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 3px solid var(--u, var(--viola)); background: var(--tint); z-index: 0; }
.vdb-pin { display: grid; place-items: center; }
.vdb-pin span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--u, var(--viola)); color: var(--ink); font: 800 .9rem/1 var(--f-head); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(36,19,63,.35); }
.vdb-map .leaflet-popup-content { font: .9rem/1.45 var(--f-body); margin: 12px 16px; }
.vdb-map .leaflet-popup-content strong { font-family: var(--f-head); font-size: 1rem; }
.vdb-map .leaflet-popup-content ul { max-height: 170px; margin: 6px 0 0; padding-left: 1.1em; overflow-y: auto; }
.vdb-map .leaflet-popup-content a { display: block; margin-top: 8px; font-weight: 700; }
.sp-map .leaflet-tooltip.sede-label { padding: 2px 8px; font-size: .75rem; }
@media print { .vdb-map-block { display: none; } }
/* Contatti: mappa di tutte le sedi, al posto del riquadro OpenStreetMap con un solo segnaposto */
.sedi-map { flex: 1; width: 100%; min-height: 420px; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); background: var(--tint); isolation: isolate; position: relative; z-index: 0; }
@media (max-width: 860px) { .sedi-map { min-height: 340px; } }
/* Da computer la mappa (senza più il pulsante sotto) è alta esattamente quanto il box dei contatti a sinistra */
@media (min-width: 861px) { .contact-map .sedi-map { flex: 1 1 auto; min-height: 320px; height: auto; } }
.sede-pin span { position: absolute; left: 3px; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); transform-origin: 50% 50%; background: var(--pin, var(--viola)); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(36,19,63,.35); top: 6px; }
.sede-pin span::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
/* Tutti i segnaposto come il fazzolettone del Gruppo: verde con il bordo giallo */
.sede-pin span { background: var(--verde); border-color: var(--giallo); }
.sedi-map .leaflet-popup-content { display: grid; gap: 2px; margin: 12px 16px; font: .9rem/1.45 var(--f-body); }
.sedi-map .leaflet-popup-content strong { font: 800 1rem/1.25 var(--f-head); color: var(--ink); }
.sedi-map .leaflet-popup-content em { font-style: normal; color: var(--muted); font-size: .84rem; }
.sedi-map .leaflet-popup-content a { margin-top: 4px; font-weight: 700; }
/* Luoghi delle riunioni collegati alla mappa: si capisce che reagiscono al passaggio */
.places [data-sede] { cursor: pointer; border-radius: 6px; transition: color .15s; }
.places [data-sede]:is(:hover, :focus-visible, .is-on) { color: var(--viola); text-decoration: underline; text-decoration-color: var(--viola-100); text-underline-offset: 3px; }
.places [data-sede]:focus-visible { outline: 2px solid var(--viola); outline-offset: 2px; }
.vdb-map { isolation: isolate; position: relative; }
/* Icone dei box «Chi siamo» centrate nel cerchio (la regola generale degli span del menu le spostava) */
.mega-unit .mega-card-icon { display: grid; place-items: center; flex-direction: initial; }
.mega-unit .mega-card-icon .unit-icon { display: block; }
/* Distintivo rotondo con il pittogramma nella versione rotonda (niente quadrato nel cerchio) */
.unit-badge:has(.unit-icon) { border: 0; padding: 4px; }
.unit-badge .unit-icon { width: 100%; height: 100%; }
/* Colonia: nel distintivo il logo rotondo dei Castorini */
.unit-badge:has(.badge-logo) { border: 0; padding: 3px; }
.unit-badge img.badge-logo { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
/* Luoghi in tabella: link alla mappa online con l'icona della posizione */
.md-table a.map-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--u, var(--viola)); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.md-table a.map-link::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-right: 6px; vertical-align: -1px; background: var(--u-ink, var(--viola));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.md-table a.map-link:hover { color: var(--u-ink, var(--viola)); }
/* Icone nelle celle della tabella (anno, unità) */
.cell-icon { display: inline-block; width: 1em; height: 1em; margin-right: 7px; vertical-align: -2px; color: var(--u-ink, var(--viola)); }
.unit-giallo .cell-icon, .unit-giallo .md-table a.map-link::before { color: #E3A900; }
.cell-icon svg { width: 100%; height: 100%; display: block; }
.unit-giallo .md-table a.map-link::before { background: #E3A900; }
.table-decades button { display: inline-flex; align-items: center; gap: 7px; }
.table-decades button svg { flex-shrink: 0; }
.page-photo-band img[src*="vdb-vara-2026"] { object-position: center 38%; }
.page-photo-band img[src*="lib-bp-primo-piano"] { object-position: center 42%; } /* il volto di B.-P. resta dentro la fascia */
.page-photo-band img[src*="censimento-fondo"] { object-position: center 72%; }
/* Disegni tra le preghiere: niente bordo colorato attorno */
.md-card-img { border: 0; box-shadow: none; }

/* Preghiere: righe allineate a due colonne, testo e disegno alternati (stessa altezza per riga) */
.md-cards { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.md-cards > .md-card { margin: 0; }
.md-card-img { display: flex; align-items: center; justify-content: center; padding: 18px; }
.md-card-img a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.md-card-img img { max-height: 380px; width: auto; max-width: 100%; }
@media (max-width: 760px) { .md-cards { grid-template-columns: minmax(0, 1fr); } }

/* Preghiere a righe: il testo occupa più spazio, il disegno meno; lati alternati riga per riga */
.md-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.md-row { display: grid; gap: 22px; align-items: stretch; }
.md-row-pair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.md-row-pair.is-flipped { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.md-row-pair.is-flipped > .md-card-img { order: -1; }
.md-row-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* schede con l'icona (dizionario e personaggi della Colonia, $cardIcons in page.php): fondo bianco, bordo pieno nel colore dell'unità, icona tonda a sinistra */
.md-card.has-icon { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-content: start; background: #fff; border: 2px solid color-mix(in srgb, var(--u, var(--viola)) 35%, #fff); box-shadow: 0 1px 2px rgba(36, 19, 63, .05); }
.md-card.has-icon > * { grid-column: 2; }
.md-card.has-icon > .md-card-icon { grid-column: 1; grid-row: 1 / span 6; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--u-100, var(--viola-50)); color: var(--u-ink, var(--viola)); box-shadow: inset 0 0 0 2px var(--u, var(--viola)); }
.md-card-icon svg { display: block; width: 21px; height: 21px; }
.md-card.has-icon h3 { margin-top: 2px; color: var(--u-ink, var(--ink)); }
/* con la foto (i personaggi de Gli Amici del Bosco): cerchio più grande, la foto lo riempie */
.md-card.has-photo { grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px; }
.md-card.has-icon > .md-card-photo { width: 76px; height: 76px; overflow: hidden; background: var(--u-100, var(--viola-50)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--u, var(--viola)); margin: 4px 0 0 4px; }
.prose .md-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.md-card.has-photo h3 { margin-top: 10px; }
/* Gli Amici del Bosco: la foto del Grande Castoro Bruno sotto i personaggi, in un riquadro con la didascalia accanto */
.page-colonia-gli-amici-del-bosco .md-row-one > .md-card-img { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: center; gap: 24px; padding: 18px 26px 18px 18px; background: var(--u-100); border: 0; border-radius: 20px; text-align: left; }
.page-colonia-gli-amici-del-bosco .md-row-one > .md-card-img a { width: auto; height: auto; }
.page-colonia-gli-amici-del-bosco .md-row-one > .md-card-img img { max-height: 320px; border-radius: 14px; mix-blend-mode: normal; }
.page-colonia-gli-amici-del-bosco .md-row-one > .md-card-img figcaption { margin: 0; font: 700 1.1rem/1.45 var(--f-head); color: var(--u-ink); }
@media (max-width: 640px) { .page-colonia-gli-amici-del-bosco .md-row-one > .md-card-img { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 18px; } }
.md-row .md-card { margin: 0; }
.md-row-pair .md-card:not(.md-card-img) { display: flex; flex-direction: column; justify-content: center; padding: 28px 32px; }
.md-row .md-card-img img { max-height: 340px; }
@media (max-width: 760px) {
  .md-row-pair, .md-row-pair.is-flipped, .md-row-two { grid-template-columns: minmax(0, 1fr); }
  .md-row-pair.is-flipped > .md-card-img { order: 0; }
}
/* Pulsante «Iscriviti» nell'intestazione: verde con scritta bianca */
.header-actions .btn-cta { background: var(--verde); color: #fff; }
.header-actions .btn-cta:hover { background: var(--verde-ink); color: #fff; }
/* Slider della home: pulsante principale viola con scritta bianca */
.hero-actions .btn-cta { background: var(--viola); color: #fff; border-color: var(--viola); }
.hero-actions .btn-cta:hover { background: #5B3596; border-color: #5B3596; color: #fff; }
/* Fascia foto del Branco: trama gialla con le foglie della Giungla */
.unit-gallery.unit-giallo { background: url(../img/trama-giungla.svg) 0 0 / 320px 320px repeat, radial-gradient(80% 120% at 50% 0%, #FFD84A 0%, transparent 70%), var(--giallo); }
/* Branco: sezione introduttiva come una pagina del Libro della Giungla (carta antica e fronde negli angoli) */
.unit-intro.unit-giallo { position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.65) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,90,30,.025) 0 2px, transparent 2px 5px),
    #FBF4E2; }
.unit-intro.unit-giallo::before, .unit-intro.unit-giallo::after { content: ""; position: absolute; z-index: -1; width: clamp(260px, 28vw, 440px); aspect-ratio: 1;
  background: url(../img/giungla-angolo.svg) center / contain no-repeat; opacity: .14; pointer-events: none; }
.unit-intro.unit-giallo::before { left: -40px; bottom: -30px; }
.unit-intro.unit-giallo::after { right: -40px; top: -30px; transform: rotate(180deg); }
.unit-intro.unit-giallo .unit-drawing { mix-blend-mode: multiply; }
.unit-intro.unit-giallo { background: #fff; }
.unit-gallery.unit-giallo { background: url(../img/trama-giungla.svg) 0 0 / 280px 280px repeat, var(--giallo); }
.page-hero-img[src*="contatti-bivacco-2026"] { object-position: center 45%; }
.hero-actions .btn-cta, .hero-actions .btn-cta:hover { border-color: #fff; }
/* «Iscriviti» nell'intestazione: viola con bordo bianco */
.header-actions .btn-cta { background: var(--viola); color: #fff; border-color: #fff; }
.header-actions .btn-cta:hover { background: #5B3596; color: #fff; border-color: #fff; }
/* Icone di branca rotonde ovunque: distintivo bianco tondo con il pittogramma rotondo (come nelle pagine delle unità) */
.path-icon { border-radius: 50%; }
.path-icon::after { content: none; }
.path-body .path-icon .unit-icon { width: 50px; height: 50px; }
.path-body .path-icon .unit-icon-img { width: 54px; height: 54px; border-radius: 50%; }
@media (max-width: 640px) { .path-body .path-icon .unit-icon { width: 42px; height: 42px; } }
/* Box delle unità in home: freccia piccola nell'angolo in basso a destra, dopo il testo */
.path-card .path-go { display: grid; position: absolute; top: auto; right: 18px; bottom: 18px; width: 30px; height: 30px; margin: 0; }
.path-card .path-go .icon { width: 16px; height: 16px; }
.path-card .path-body > div { padding-right: 34px; }
/* Home, box «Contattaci»: sfondo viola chiaro */
.meet-card.meet-contact { background: #E6DDF3; }
/* Sottomenu su due righe: icone e testi allineati a sinistra in colonne (icone della stessa larghezza) */
@media (min-width: 760px) {
  .section-subnav.is-two-rows a { justify-content: flex-start; text-align: left; padding-left: 22px; }
}
.section-subnav .subnav-icon { width: 24px; height: 24px; flex-shrink: 0; }
.section-subnav .subnav-icon svg { width: 20px; height: 18px; margin: auto; }
/* Giglio AGESCI come icona di una voce: prende il colore delle altre icone (bianco sulla voce aperta) */
.subnav-icon .unit-icon { width: 22px; height: 22px; margin: 0; background: currentColor; }
.subnav-icon .unit-icon-img { background: none; border-radius: 0; }
.section-subnav .subnav-unit .unit-icon { width: 24px; height: 24px; }
/* Slider delle VdB: didascalia con anno e luogo sulla foto */
.intro-slider figure { position: relative; margin: 0; }
.intro-slider figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(31,26,40,.72); color: #fff; font: 700 .85rem/1.2 var(--f-body); backdrop-filter: blur(4px); }
.page-hero-img[src*="vdb-cerchio-finestra"] { object-position: center 62%; }
/* Slider accanto al testo: stop a sinistra, puntini al centro, frecce a destra */
.intro-slider-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.intro-slider-bar .carousel-dots { margin: 0; flex: 1; flex-wrap: wrap; }
.intro-slider-bar .carousel-arrows { gap: 8px; }
.intro-slider .carousel-arrow { width: 38px; height: 38px; border-color: var(--u-ink, var(--viola)); color: var(--u-ink, var(--viola)); }
.intro-slider .carousel-arrow:hover:not(:disabled) { background: var(--u, var(--viola)); border-color: var(--u, var(--viola)); color: var(--ink); }
.intro-slider .carousel-pause { margin: 0; }
/* Ogni foto occupa esattamente il riquadro (niente pezzi della foto successiva) */
.intro-slider .carousel-track { scroll-snap-type: x mandatory; }
.intro-slider .carousel-track > li { flex: 0 0 100%; scroll-snap-align: start; }
/* Hero un po' più alte */
body.header-overlay .page-hero { padding-top: calc(var(--header-h) + clamp(100px, 13vw, 180px)); padding-bottom: clamp(68px, 8.5vw, 112px); }
/* Pagine delle unità (solo etichetta e titolo, senza sottotitolo): testo un po' più in basso sulla foto */
body.header-overlay .page-hero.hero-unit { padding-top: calc(var(--header-h) + clamp(130px, 16vw, 220px)); padding-bottom: clamp(52px, 6.5vw, 84px); }
body.header-overlay .hero-slider { height: calc(min(90vh, 820px) + 30px); }
@media (max-width: 640px) { body.header-overlay .hero-slider { height: 750px; } }
/* Slider accanto al testo: puntini a sinistra, poi freccia · stop · freccia, tutti gialli */
.intro-slider-bar .carousel-dots { justify-content: flex-start; }
.intro-slider .carousel-arrow { border-color: var(--giallo); color: #B98A00; }
.intro-slider .carousel-arrow:hover:not(:disabled) { background: var(--giallo); border-color: var(--giallo); color: var(--ink); }
.intro-slider .carousel-arrow:disabled { opacity: .4; }
/* Foto delle intestazioni: velo viola un po' più leggero */
.page-hero::before { background: linear-gradient(0deg, rgba(36,19,63,.78), rgba(36,19,63,.3)); }
.slide::after { background: linear-gradient(90deg, rgba(36,19,63,.78) 0%, rgba(36,19,63,.45) 45%, rgba(36,19,63,.06) 80%), linear-gradient(0deg, rgba(36,19,63,.6) 0%, transparent 45%); }
@media (max-width: 760px) { .slide::after { background: linear-gradient(0deg, rgba(36,19,63,.85) 0%, rgba(36,19,63,.5) 55%, rgba(36,19,63,.18) 100%); } }
.intro-slider img[src*="2009-viola-st-gree"] { object-position: center; }
.unit-gallery .carousel-pause { margin: 0; }
.unit-quote-band > img[src*="reparto-fuoco"] { object-position: center 55%; }
@media (min-width: 760px) { .section-subnav.is-two-rows a { white-space: nowrap; } }
/* Griglia a colonne uguali; con un numero dispari di voci (Clan, Colonia) la pagina principale occupa entrambe le righe, così le altre restano allineate e senza buchi */
@media (min-width: 760px) {
  .section-subnav.is-two-rows ul { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px 6px; }
  .section-subnav.is-two-rows li:first-child:nth-last-child(odd) { grid-row: span 2; }
}
/* Su tablet le colonne sono strette: i titoli lunghi vanno a capo invece di uscire dalla casella */
@media (min-width: 760px) and (max-width: 1180px) {
  .section-subnav.is-two-rows a { white-space: normal; padding-inline: 12px 8px; line-height: 1.25; }
}
/* Squadriglie: animale di squadriglia accanto al nome */
.md-card:has(.sq-emblem) { display: grid; grid-template-columns: 72px 1fr; column-gap: 18px; align-items: center; }
.md-card .sq-emblem { grid-row: span 2; width: 72px; height: 72px; object-fit: contain; }
.md-card:has(.sq-emblem) h3 { margin: 0 0 4px; align-self: end; }
.md-card:has(.sq-emblem) p { align-self: start; }
/* Medaglie nelle intestazioni dell'albo d'oro */
.medal { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.25); }
.medal::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.65); }
.medal-oro { background: radial-gradient(circle at 35% 30%, #FFF3B0, #F5C518 45%, #B8860B); }
.medal-argento { background: radial-gradient(circle at 35% 30%, #FFFFFF, #C9CDD2 45%, #8A9097); }
.medal-bronzo { background: radial-gradient(circle at 35% 30%, #F6D2B0, #CD7F32 45%, #8B5A2B); }
/* Squadriglie: tre per riga, bordo nei colori della squadriglia */
.md-cards.sq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.md-card.sq-card { border: 4px solid transparent; border-top-width: 4px; background: linear-gradient(var(--u-100, #fff), var(--u-100, #fff)) padding-box, linear-gradient(90deg, var(--sq1) 0 50%, var(--sq2) 50% 100%) border-box; }
@media (max-width: 900px) { .md-cards.sq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .md-cards.sq-grid { grid-template-columns: minmax(0, 1fr); } }
/* Slider accanto al testo: pulsanti nel colore della branca (giallo nel Branco, verde nel Reparto…) */
.intro-slider .carousel-arrow { border-color: var(--u, var(--giallo)); color: var(--u-ink, #B98A00); }
.unit-giallo .intro-slider .carousel-arrow { color: #B98A00; }
.intro-slider .carousel-arrow:hover:not(:disabled) { background: var(--u, var(--giallo)); border-color: var(--u, var(--giallo)); color: #fff; }
.unit-giallo .intro-slider .carousel-arrow:hover:not(:disabled) { color: var(--ink); }
.page-hero-img[src*="campi-hike-valle"] { object-position: center 40%; }
.page-hero-img[src*="campi-cerchio-tramonto"] { object-position: center 45%; }
/* Etichetta accanto al luogo (es. «Campo nazionale») */
.cell-tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--u, var(--viola)); color: #fff; font-size: .75rem; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.unit-quote-band > img[src*="reparto-fuoco"] { object-position: center 52%; }
.page-hero-img[src*="campi-fuoco-notte"] { object-position: center 52%; }
.page-hero-img[src*="campi-croce-vetta"] { object-position: center 62%; }
.page-photo-band img[src*="campi-lago-alzabandiera"] { object-position: center 62%; }
.page-hero-img[src*="squadriglie-palla"] { object-position: center 45%; }
.page-photo-band img[src*="squadriglie-guidone-bosco"] { object-position: center 55%; }
/* Squadriglie: due per riga */
.md-cards.sq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .md-cards.sq-grid { grid-template-columns: minmax(0, 1fr); } }

/* Le squadriglie di Baden-Powell: griglia di schede piccole con sagoma, colori e richiamo */
.bp-sq { margin-top: clamp(40px, 6vw, 64px); }
.bp-sq h2 { margin-bottom: .2em; }
.bp-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.bp-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 10px 14px; background: #fff; border-radius: 16px;
  border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--sq1) 0 50%, var(--sq2) 50% 100%) border-box; }
.bp-img { display: grid; place-items: center; width: 64px; height: 56px; margin-bottom: 4px; }
.bp-img img { max-width: 64px; max-height: 56px; object-fit: contain; }
.bp-initial { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--u-100, var(--viola-50)); color: var(--u-ink, var(--viola)); font: 800 1.3rem/1 var(--f-head); }
.bp-item strong { font: 800 .98rem/1.2 var(--f-head); color: var(--ink); }
.bp-colors { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.bp-swatch { width: 22px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--sq1) 0 50%, var(--sq2) 50% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex-shrink: 0; }
.bp-call { font-size: .78rem; font-style: italic; color: var(--muted); }
@media print { .bp-grid { grid-template-columns: repeat(4, 1fr); } }

/* Box che porta alle squadriglie di B.-P. */
.bp-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; margin: clamp(36px, 5vw, 56px) 0 8px; border-radius: 24px; overflow: hidden; background: var(--viola); color: #fff; text-decoration: none; box-shadow: var(--shadow); transition: transform .2s; }
.bp-promo:hover { transform: translateY(-3px); color: #fff; }
.bp-promo img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; filter: sepia(.25); }
.bp-promo-text { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(24px, 4vw, 44px); }
.bp-promo .kicker { color: var(--giallo); margin: 0; }
.bp-promo strong { font: 800 clamp(1.3rem, 2.4vw, 1.8rem)/1.25 var(--f-head); }
.bp-promo-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 18px; border-radius: 999px; background: var(--giallo); color: var(--ink); font-weight: 700; }
.bp-promo-go .icon { width: 18px; height: 18px; }
@media (max-width: 700px) { .bp-promo { grid-template-columns: minmax(0, 1fr); } .bp-promo img { min-height: 200px; } }

/* Significato dei colori: tessere piene, grandi */
.color-meanings { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.color-meanings li { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 140px; margin: 0; padding: 18px 20px; border-radius: 20px; background: var(--c); color: var(--f);
  box-shadow: 0 8px 20px rgba(36,19,63,.12), inset 0 0 0 1px rgba(0,0,0,.08); position: relative; overflow: hidden; }
.color-meanings li::before { content: ""; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.14); }
.color-meanings strong { font: 800 1.35rem/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.color-meanings span { font-size: .98rem; line-height: 1.35; opacity: .92; }
@media print { .color-meanings li { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Squadriglie con il bianco: il tratto bianco della cornice viene contornato da un filo scuro su entrambi i lati */
.sq-card.has-white, .bp-item.has-white { box-shadow: 0 0 0 1.5px rgba(31,26,40,.35), inset 0 0 0 1.5px rgba(31,26,40,.35); }
.color-meanings li[style*="#FFFFFF"] { box-shadow: 0 8px 20px rgba(36,19,63,.12), inset 0 0 0 2px rgba(31,26,40,.25); }
.page-photo-band img[src*="squadriglie-bp-prato"] { object-position: center 55%; }
.page-hero-img[src*="sq-antilopi"] { object-position: center 38%; }
/* Le squadriglie di B.-P.: due sezioni ben separate (gli animali, poi i colori) */
.prose .bp-block { margin: clamp(36px, 5vw, 56px) 0 0; padding: clamp(24px, 3.5vw, 40px); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.prose .bp-colors-block { background: linear-gradient(180deg, #fff, var(--u-100, var(--viola-50))); }
.bp-block-head { margin-bottom: 22px; }
.bp-block-head .kicker { margin: 0 0 6px; }
.bp-block-head h2 { margin: 0 0 10px; }
.bp-block-head p { margin: 0; color: var(--muted); max-width: 52rem; }
.prose .bp-grid, .prose .color-meanings { padding-left: 0; margin-top: 0; }
.prose .bp-grid > li, .prose .color-meanings > li { margin: 0; }
.bp-block .bp-item { box-shadow: 0 4px 12px rgba(36,19,63,.06); }
.page-hero-img[src*="squadriglie-bp-prato"] { object-position: center 55%; }
.page-photo-band img[src*="sq-antilopi"] { object-position: center 38%; }

/* Foto in fondo alle pagine: velo viola come nelle intestazioni; con citazione al centro dove prevista */
.page-photo-band { position: relative; isolation: isolate; }
.page-photo-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(36,19,63,.7), rgba(36,19,63,.3)); pointer-events: none; }
.page-photo-band > img { position: relative; z-index: 0; }
.page-photo-band.has-quote { display: grid; }
.page-photo-band.has-quote > img, .page-photo-band.has-quote > .wrap { grid-area: 1 / 1; }
.page-photo-band.has-quote::after { background: linear-gradient(0deg, rgba(36,19,63,.85), rgba(36,19,63,.55)); }
.page-photo-band.has-quote > .wrap { position: relative; z-index: 2; display: grid; place-items: center; text-align: center; color: #fff; }
.page-photo-band blockquote { margin: 0 auto; max-width: 50rem; }
.page-photo-band blockquote::before { content: "\201C"; display: block; height: .5em; margin-bottom: 14px; font: 800 5rem/1 Georgia, serif; color: var(--giallo); }
.page-photo-band blockquote p { margin: 0; font: italic 500 clamp(1.15rem, 2.2vw, 1.55rem)/1.45 var(--f-body); color: #fff; }
.page-photo-band blockquote cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--giallo); }

/* Fascia foto del Reparto: trama verde con oggetti del campo (tenda, bussola, fuoco, zaino, pino) */
.unit-gallery.unit-verde { background: url(../img/trama-campo.svg?v=2) 0 0 / 420px 420px repeat, var(--verde); }
.page-photo-band.has-quote { display: block; min-height: clamp(280px, 34vw, 440px); }
.page-photo-band.has-quote > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-photo-band.has-quote > .wrap { min-height: inherit; padding-block: clamp(48px, 7vw, 88px); }
/* Cornici delle squadriglie: ogni metà è uno strato a sé; il bianco diventa un tratteggio bianco/grigio ben visibile */
.prose .md-card.sq-card, .prose .bp-grid .bp-item {
  --sq1-img: linear-gradient(var(--sq1), var(--sq1)); --sq2-img: linear-gradient(var(--sq2), var(--sq2));
  background: linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)) padding-box, var(--sq1-img) left / 50% 100% no-repeat border-box, var(--sq2-img) right / 50% 100% no-repeat border-box;
}
.sq-card { --card-bg: var(--u-100, #fff); }
.prose .md-card.sq-card[style*="--sq1:#FFFFFF"], .prose .bp-grid .bp-item[style*="--sq1:#FFFFFF"] { --sq1-img: repeating-linear-gradient(135deg, #fff 0 5px, #bdb6ca 5px 8px); }
.prose .md-card.sq-card[style*="--sq2:#FFFFFF"], .prose .bp-grid .bp-item[style*="--sq2:#FFFFFF"] { --sq2-img: repeating-linear-gradient(135deg, #fff 0 5px, #bdb6ca 5px 8px); }
.prose .sq-card.has-white, .prose .bp-item.has-white { box-shadow: none; }
.bp-item[style*="#FFFFFF"] .bp-swatch { background: linear-gradient(90deg, var(--sq1) 0 50%, var(--sq2) 50% 100%); box-shadow: inset 0 0 0 1px rgba(31,26,40,.35); }
/* Banner Co.Ca.: pulsante in basso a destra */
.coca-banner .btn { align-self: flex-end; }
/* Legge, Promessa e Motto: blocchi con disegni di Pierre Joubert */
.prose .lpm-lead { font-size: 1.2rem; line-height: 1.6; color: var(--ink); max-width: 64ch; }
.lpm-nav ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.prose .lpm-nav li { margin: 0; }
.lpm-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--u-100); color: var(--u-ink); font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: border-color .2s; }
.lpm-nav a:hover { border-color: var(--u); color: var(--u-ink); }
.lpm-nav .subnav-icon svg { width: 18px; height: 18px; display: block; }
.lpm-block { margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(36px, 5vw, 56px); border-top: 2px dashed color-mix(in srgb, var(--u) 45%, transparent); scroll-margin-top: 110px; }
.lpm-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: clamp(24px, 4vw, 56px); align-items: center; }
.lpm-flip .lpm-head { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); }
.lpm-flip .lpm-art { order: -1; }
.prose .lpm-text h2 { margin: .15em 0 .6em; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.lpm-text .kicker { color: var(--u-ink); }
.prose .lpm-art { margin: 0; }
.lpm-art img { display: block; width: 100%; height: auto; border-radius: 0; }
/* i dieci articoli della Legge */
.prose ol.law-grid { list-style: none; counter-reset: law; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prose ol.law-grid li { counter-increment: law; position: relative; margin: 0; padding: 18px 18px 18px 66px; min-height: 76px; display: flex; align-items: center; background: var(--u-100); border-radius: 18px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.prose ol.law-grid li::before { content: counter(law); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--u); color: #fff; font-weight: 800; font-size: 1.05rem; }
.lpm-legge .md-figure { max-width: 380px; margin: 32px auto 0; }
/* la formula della Promessa */
.prose .lpm-promessa .lpm-text > p:not(.kicker), .prose .lpm-preghiera .lpm-text > p:not(.kicker) { position: relative; padding: 24px 26px 24px 30px; background: #fff; border: 2px solid var(--u); border-radius: 6px 22px 22px 22px; font-size: 1.12rem; line-height: 1.75; font-style: italic; color: var(--ink); box-shadow: var(--shadow); }
.prose .lpm-promessa .lpm-text > p:not(.kicker)::before, .prose .lpm-preghiera .lpm-text > p:not(.kicker)::before { content: ""; position: absolute; inset: 7px; border: 2px dashed color-mix(in srgb, var(--u) 40%, transparent); border-radius: 2px 16px 16px 16px; pointer-events: none; }
/* il Motto in grande */
/* Clan: prima della formula ci sono due paragrafi di spiegazione, solo la Promessa va nel riquadro */
.page-clan-legge-promessa-motto-del-clan .prose .lpm-promessa .lpm-text > p:not(.kicker):not(:last-child), .page-branco-legge-promessa-motto-del-branco .prose .lpm-promessa .lpm-text > p:not(.kicker):not(:last-child) { margin-bottom: .8em; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; font-size: inherit; font-style: normal; color: inherit; }
.page-clan-legge-promessa-motto-del-clan .prose .lpm-promessa .lpm-text > p:not(.kicker):not(:last-child)::before, .page-branco-legge-promessa-motto-del-branco .prose .lpm-promessa .lpm-text > p:not(.kicker):not(:last-child)::before { content: none; }
.prose .lpm-motto .lpm-text > p:first-of-type strong { display: block; margin: 0 0 .25em; font-family: var(--font-display, inherit); font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.1; color: var(--u-ink); letter-spacing: -.01em; }
/* l'ultimo messaggio di B.-P. come una lettera */
.prose .lpm-messaggio blockquote { margin: 0 0 .8em; padding: 26px 28px; background: #fffdf5; border: 0; border-left: 4px solid var(--u); border-radius: 4px 20px 20px 4px; box-shadow: var(--shadow); font-size: 1.05rem; line-height: 1.75; }
.prose .lpm-messaggio .lpm-text > p:last-child { text-align: right; font-family: var(--font-display, inherit); color: var(--u-ink); }
.prose .lpm-motto .lpm-text > p:first-of-type em { display: block; font-family: var(--font-display, inherit); font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 600; line-height: 1.2; color: var(--u); }
@media (max-width: 860px) {
  .lpm-head, .lpm-flip .lpm-head { grid-template-columns: 1fr; }
  .lpm-art, .lpm-flip .lpm-art, .prose .lpm-art { order: -1; max-width: 340px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) { .prose ol.law-grid { grid-template-columns: 1fr; } }
.prose .lpm-messaggio blockquote p { margin: 0 0 .9em; }
.prose .lpm-messaggio blockquote p:last-child { margin-bottom: 0; }
.page-photo-band img[src*="promessa-reparto"] { object-position: center 70%; }
.lpm-legge .md-figure img, .lpm-legge .md-zoom { background: none; border-radius: 0; }
/* ritratto di B.-P. alto quanto la colonna del messaggio */
.lpm-messaggio .lpm-head { align-items: stretch; }
.lpm-messaggio .lpm-art { position: relative; min-height: 360px; }
.lpm-messaggio .lpm-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
@media (max-width: 860px) { .lpm-messaggio .lpm-art { min-height: 0; aspect-ratio: 4 / 5; } }
.unit-drawing[src*="reparto-bussola"] { width: 240px; margin-top: 6px; }
@media (max-width: 560px) { .unit-drawing[src*="reparto-bussola"] { width: 150px; } }
/* Colonia: i due castori alla diga (disegno di castorini.it), più largo che alto */
.unit-drawing[src*="castorini-diga"] { width: 300px; margin-top: 4px; }
.unit-drawing[src*="clan-rover"] { width: 210px; margin-top: 4px; }
@media (max-width: 560px) { .unit-drawing[src*="clan-rover"] { width: 130px; } }
@media (max-width: 560px) { .unit-drawing[src*="castorini-diga"] { width: 170px; } }
/* Albo d'oro dei campi: numeri delle ultime tre colonne al centro */
.md-table table:has(.medal) :is(td, th):nth-last-child(-n+3) { text-align: center; }
.page-hero-img[src*="preghiere-eg-messa"] { object-position: center 30%; }
.page-hero-img[src*="colonia-prato-cappellini"] { object-position: center 62%; }
.page-photo-band img[src*="preghiere-eg-fazzolettoni"] { object-position: center 45%; }
/* blocchi senza immagine (la preghiera a San Giorgio) */
.lpm-noart .lpm-head { grid-template-columns: 1fr; }
.lpm-noart .lpm-text { max-width: 640px; margin-inline: auto; text-align: center; }
.prose .lpm-preghiera .lpm-text > p:not(.kicker) { text-align: center; margin-top: 8px; }
.lpm-noart .lpm-text h2.stitched::after { left: 50%; transform: translateX(-50%); }
/* citazione e fonte nel blocco «San Giorgio oggi» */
.prose .lpm-oggi blockquote { font-size: 1.2rem; }
.prose .lpm-oggi blockquote + p { margin-top: -.6em; font-size: .88rem; color: var(--muted, #6b6478); }

/* Domande frequenti (Iscrizioni): risposte chiare, citabili anche da motori di ricerca e assistenti AI */
.faq-list { max-width: 880px; }
.faq-list details { border: 1px solid var(--line); border-left: 5px solid var(--viola); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.faq-list summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { margin: 0; font: 800 1.1rem/1.3 var(--f-head); color: var(--ink); }
.faq-list summary::after { content: "+"; margin-left: auto; font: 700 1.5rem/1 var(--f-body); color: var(--viola); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0 20px 18px; }
/* Pagine delle unità: parole chiave del testo di presentazione (e voci in grassetto degli elenchi) nel colore della branca,
   con una sottolineatura da evidenziatore; sul giallo il colore scuro della branca, per leggerle */
.unit-intro .prose .unit-kw, .unit-intro .prose li > strong { color: var(--u); font-weight: 700; background: linear-gradient(transparent 62%, var(--u-100) 62%); padding: 0 .06em; }
.unit-intro.unit-giallo .prose .unit-kw, .unit-intro.unit-giallo .prose li > strong { color: var(--u-ink); background: linear-gradient(transparent 62%, var(--giallo-100) 62%); }
/* Pagine delle unità: domande frequenti con il bordo nel colore della branca (giallo: segno «+» più scuro, leggibile).
   Sfondo bianco come la fine di «Vita di …», che sopra le domande non aggiunge il suo spazio: stesso spazio sopra e sotto */
.unit-faq { background: #fff; }
.unit-life:has(+ .unit-faq) { padding-bottom: 0; }
.unit-faq .faq-list details { border-left-color: var(--u); }
.unit-faq .faq-list summary::after { color: var(--u-ink); }
.unit-faq-more { max-width: 880px; margin: 18px 0 0; color: var(--muted); }
.unit-faq-more a { color: var(--viola); font-weight: 600; }
/* Foto a sinistra delle domande (faq_img in app/data/unita.php): riquadro nel colore della branca spostato in basso
   a destra e distintivo dell'unità; sul telefono e sul tablet la foto sta sopra le domande, più bassa */
.unit-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; }
.unit-faq-photo { position: relative; isolation: isolate; margin: 0; padding: 0 16px 16px 0; }
.unit-faq-photo::before { content: ""; position: absolute; inset: 16px 0 0 16px; z-index: -1; border-radius: 24px; background: var(--u); }
.unit-faq-photo > img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); }
.unit-faq-photo .unit-badge { left: calc(50% - 8px); bottom: -26px; }
.unit-faq-body .section-head { margin-top: 0; }
@media (min-width: 960px) {
  .unit-faq-grid { grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 88px); }
  .unit-faq-photo { position: sticky; top: calc(var(--header-h) + 32px); }
  .unit-faq-photo > img { aspect-ratio: 1; }
}
/* Sottomenu di sezione sul telefono: tendina con la pagina aperta come pulsante */
.subnav-toggle { display: none; }
@media (max-width: 759px) {
  .section-subnav .wrap { position: relative; }
  .subnav-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 18px; background: #fff; border: 2px solid var(--u); border-radius: 999px; box-shadow: var(--shadow); font: inherit; font-weight: 700; font-size: .95rem; color: var(--ink); text-align: left; cursor: pointer; }
  .subnav-toggle-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .subnav-toggle .icon-chevron { flex-shrink: 0; color: var(--u-ink); transition: transform .2s; }
  .section-subnav.is-open .subnav-toggle .icon-chevron { transform: rotate(180deg); }
  .section-subnav ul { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); flex-direction: column; flex-wrap: nowrap; gap: 2px; max-height: 70vh; overflow-x: hidden; overflow-y: auto; border-radius: 22px; }
  .section-subnav.is-open ul { display: flex; }
  .section-subnav li, .section-subnav.is-two-rows li { flex: none; }
  .section-subnav a { display: flex; white-space: normal; padding: 11px 14px; border-radius: 14px; }
}
/* Banner Co.Ca.: freccia tonda in basso a destra come nelle card delle unità */
.coca-banner .path-go { display: grid; position: absolute; top: auto; right: 22px; bottom: 22px; width: 30px; height: 30px; margin: 0; z-index: 2; }
.coca-banner .path-go .icon { width: 16px; height: 16px; }
.coca-banner:hover .path-go { transform: translateX(4px); }
/* Pulsante «Torna su»: giallo, verde scuro al passaggio */
.to-top { background: var(--giallo); color: var(--ink); }
.to-top:hover, .to-top:focus-visible { background: var(--verde-ink); color: #fff; }

/* --- Iscrizioni: link di approfondimento, età delle unità, domanda di iscrizione --- */
.signup-lead { font-size: 1.25rem; font-weight: 600; color: var(--ink) !important; }
.story-reverse .story-media { order: -1; }
.signup-scout { background: var(--viola); color: #fff; }
.signup-scout .kicker { color: var(--giallo); }
.signup-scout h2 { color: #fff; }
.signup-scout .story-text p { color: rgba(255,255,255,.9); }
.signup-scout .story-media::after { background: repeating-linear-gradient(-45deg, var(--giallo) 0 8px, transparent 8px 16px); opacity: .7; }
.signup-scout .deep-links a { border-color: transparent; }
.signup-scout .deep-links a { transition: transform .2s, background-color .2s, color .2s; }
.signup-scout .deep-links a:hover, .signup-scout .deep-links a:focus-visible { background: var(--giallo); border-color: var(--giallo); color: var(--ink); }
.signup-scout .deep-links a:hover .icon, .signup-scout .deep-links a:focus-visible .icon { background: var(--viola); color: #fff; }
/* Fascia viola «Cos'è lo scautismo»: bordo a strappo sopra e sotto; si sovrappone alle sezioni vicine e il contenuto scende oltre lo strappo */
.section.signup-scout { --torn: 24px; position: relative; z-index: 1; margin-block: calc(var(--torn) * -1);
  -webkit-mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - 2 * var(--torn) + 2px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat;
  mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - 2 * var(--torn) + 2px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat; }
.signup-scout > .wrap { padding-block: var(--torn); }
@media (max-width: 1000px) { .story-reverse .story-media { order: 0; } }
.signup-links { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
@media (max-width: 1000px) { .signup-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 0; } }
.age-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.age-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 24px 24px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); border-top: 6px solid var(--u); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .2s; }
.age-card:hover { transform: translateY(-3px); color: var(--ink); }
.age-photo { position: relative; display: block; align-self: stretch; margin: 0 -24px 40px; aspect-ratio: 4 / 3; background: var(--u-100); }
.age-photo img:not(.unit-icon) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.age-photo .unit-icon { position: absolute; left: 20px; bottom: -32px; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 5px #fff, var(--shadow); background-color: #fff; -webkit-mask: none; mask: none; background-image: none; }
.age-photo .unit-icon::after { content: ""; position: absolute; inset: 0; background: var(--u); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.age-photo .unit-icon-img { object-fit: contain; }
.age-years { font: 800 1.9rem/1.1 var(--f-head); color: var(--u); }
.age-card h3 { margin: 0; font-size: 1.1rem; }
.age-more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; color: var(--u); }
.age-more .icon { width: 16px; height: 16px; transition: transform .2s; }
.age-card:hover .age-more .icon { transform: translateX(3px); }
.age-coca { margin: 28px 0 0; color: var(--muted); }
.info-point { display: grid; gap: 14px; margin-top: 24px; padding: 16px 18px 18px; background: #fff; border-radius: 12px; border: 1px solid var(--line); font-size: .95rem; }
.info-point h3 { margin: 2px 0 0; font-size: 1.15rem; color: var(--viola); }
.info-point p { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.info-point p .icon { color: var(--viola); flex-shrink: 0; margin-top: 3px; }
.info-point iframe { width: 100%; height: 200px; border: 0; border-radius: 8px; background: var(--tint); }
.info-point .btn { justify-self: start; }
.info-point .btn .icon { width: 18px; height: 18px; }
.contact-form fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
/* I menu a tendina con voci lunghe (es. «Responsabilità genitoriale» nel censimento) non devono allargare il modulo oltre lo schermo */
.contact-form fieldset > *, .contact-form label { min-width: 0; }
.contact-form select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.contact-form legend { padding: 0; margin-bottom: 4px; font: 800 1.05rem/1.3 var(--f-head); color: var(--viola); }
.contact-form fieldset + fieldset { padding-top: 22px; border-top: 1px solid var(--line); }
.contact-form select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23462678' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.form-closed { text-align: center; padding: 12px 0; }
.form-closed h3 { font-size: 1.5rem; margin-top: 0; }
.form-closed .btn .icon { width: 16px; height: 16px; }
.form-help { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
@media (max-width: 1000px) { .age-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .signup-links { grid-template-columns: 1fr; }
  .age-grid { gap: 12px; }
  .age-card { padding: 0 16px 18px; }
  .age-photo { margin: 0 -16px 32px; }
  .age-photo .unit-icon { left: 14px; bottom: -24px; width: 48px; height: 48px; box-shadow: 0 0 0 4px #fff, var(--shadow); }
  .age-years { font-size: 1.5rem; }
  .age-card h3 { font-size: 1rem; }
}

/* Iscrizioni: le domande frequenti si sovrappongono al modulo con il bordo a carta strappata */
.signup-faq { --torn: 24px; position: relative; z-index: 1; margin-top: calc(var(--torn) * -1);
  -webkit-mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat;
  mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat; }

/* Iscrizioni: slider di foto in «Cos'è lo scautismo» (assets/js/main.js) */
.photo-slider { aspect-ratio: 4 / 3; }
.photo-slider .ps-slide { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: var(--radius); opacity: 0; transition: opacity .8s ease; }
.photo-slider .ps-slide.is-active { opacity: 1; }
.ps-arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--viola); cursor: pointer; box-shadow: var(--shadow); transition: background-color .2s, color .2s; }
.ps-arrow:hover, .ps-arrow:focus-visible { background: var(--giallo); color: var(--ink); }
.ps-prev { left: 14px; }
.ps-prev .icon { transform: rotate(180deg); }
.ps-next { right: 14px; }
/* Pallini dello slider di foto: pulsanti 24×24 (WCAG 2.5.8), pallino disegnato di 10 px */
.ps-dots { position: absolute; left: 0; right: 0; bottom: 7px; z-index: 2; display: flex; justify-content: center; gap: 0; }
.ps-dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: width .2s; }
.ps-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.6); transition: width .2s, background-color .2s; }
.ps-dots button[aria-current] { width: 40px; }
.ps-dots button[aria-current]::before { width: 26px; border-radius: 5px; background: var(--giallo); }
@media (prefers-reduced-motion: reduce) { .photo-slider .ps-slide { transition: none; } }

/* Iscrizioni, domande frequenti: foto ai lati disposte come in home attorno a Contattaci / In programma
   (strisce attaccate ai bordi, alte quanto la sezione, che si restringono con lo schermo fino a sparire) */
.faq-band { display: grid; grid-template-columns: minmax(0, 1fr); }
.faq-band > .wrap { grid-column: 1; grid-row: 1; width: 100%; }
@media (min-width: 1240px) {
  .faq-band { grid-template-columns: minmax(0, 1fr) min(1120px, calc(100% - 2 * var(--gutter))) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 40px); padding-block: clamp(120px, 10vw, 160px); }
  .faq-band > .wrap { grid-column: 2; max-width: none; padding: 0; }
  .faq-band .faq-list { max-width: none; }
  .faq-band .side-photos { display: flex; flex-direction: column; gap: 16px; grid-row: 1; min-width: 0; align-self: stretch; margin: -32px 0; padding: 0; }
  .faq-band .side-photos-l { grid-column: 1; }
  .faq-band .side-photos-r { grid-column: 3; }
  .faq-band .side-photos img { width: 100%; min-width: 0; height: auto; min-height: 0; flex: 1 1 0; object-fit: cover; }
  .faq-band .side-photos img:first-child { flex-grow: 1.4; }
  .faq-band .side-photos-l img { border-radius: 0 var(--radius) var(--radius) 0; }
  .faq-band .side-photos-r img { border-radius: var(--radius) 0 0 var(--radius); }
}

/* Iscrizioni: il modulo e la colonna accanto finiscono alla stessa altezza (la mappa si allunga) */
@media (min-width: 861px) {
  .signup-form-layout { align-items: stretch; }
  .signup-form-layout .contact-form-intro { display: flex; flex-direction: column; }
  .signup-form-layout .info-point { flex: 1; grid-template-rows: auto auto minmax(200px, 1fr) auto; margin-bottom: 0; }
  .signup-form-layout .info-point iframe { height: 100%; }
}

/* News in home: «Leggi» e la freccia in basso a destra della polaroid */
.polaroid-more { align-self: flex-end; justify-content: flex-end; }
/* Iscrizioni: la foto della route è verticale, nel box si inquadra il ponte con il Clan */
.age-photo img[src*="iscrizioni-clan-route-val-codera-2025"] { object-position: center 72%; }

/* Pagine delle unità: angoli decorativi come le fronde del Branco, ognuno col tema della sua branca
   (Colonia: diga e acqua dei castori · Reparto: bosco e tenda del campo · Clan: montagne, strada e rosa del deserto · Co.Ca.: fuoco di bivacco e stelle) */
.unit-intro.unit-blu { --corner: url(../img/colonia-angolo.svg); }
.unit-intro.unit-verde { --corner: url(../img/campo-angolo.svg); }
.unit-intro.unit-rosso { --corner: url(../img/strada-angolo.svg); }
.unit-intro.unit-viola { --corner: url(../img/coca-angolo.svg); }
.unit-intro.unit-blu, .unit-intro.unit-verde, .unit-intro.unit-rosso, .unit-intro.unit-viola { position: relative; isolation: isolate; overflow: hidden; }
.unit-intro.unit-blu::before, .unit-intro.unit-blu::after, .unit-intro.unit-verde::before, .unit-intro.unit-verde::after,
.unit-intro.unit-rosso::before, .unit-intro.unit-rosso::after, .unit-intro.unit-viola::before, .unit-intro.unit-viola::after {
  content: ""; position: absolute; z-index: -1; width: clamp(260px, 28vw, 440px); aspect-ratio: 1;
  background: var(--corner) center / contain no-repeat; opacity: .12; pointer-events: none; }
.unit-intro.unit-blu::before, .unit-intro.unit-verde::before, .unit-intro.unit-rosso::before, .unit-intro.unit-viola::before { left: -40px; bottom: -30px; }
.unit-intro.unit-blu::after, .unit-intro.unit-verde::after, .unit-intro.unit-rosso::after, .unit-intro.unit-viola::after { right: -40px; top: -30px; transform: rotate(180deg); }

/* Foto accanto al testo delle unità: righe oblique nel colore della branca in alto a destra (come la foto di Iscrizioni) */
.unit-side-photo { isolation: isolate; }
.unit-side-photo::before { content: ""; position: absolute; right: -16px; top: -16px; width: 40%; height: 40%; z-index: -1; border-radius: var(--radius);
  background: repeating-linear-gradient(-45deg, var(--u, var(--viola)) 0 8px, transparent 8px 16px); opacity: .45; }

/* Pagine delle unità: solo una fascia disegnata in fondo alla sezione introduttiva, niente in alto.
   Lo spazio sotto il testo è riservato alla fascia, così il disegno non va mai sopra le scritte. */
.unit-intro.unit-blu { --frieze: url(../img/fascia-colonia.svg); }
.unit-intro.unit-giallo { --frieze: url(../img/fascia-branco.svg); }
.unit-intro.unit-verde { --frieze: url(../img/fascia-reparto.svg); }
.unit-intro.unit-rosso { --frieze: url(../img/fascia-clan.svg); }
.unit-intro.unit-blu, .unit-intro.unit-giallo, .unit-intro.unit-verde, .unit-intro.unit-rosso {
  --frieze-h: clamp(70px, 9vw, 130px); position: relative; isolation: isolate; overflow: hidden;
  padding-bottom: calc(var(--frieze-h) + clamp(32px, 4vw, 56px)); }
.unit-intro.unit-blu::after, .unit-intro.unit-giallo::after, .unit-intro.unit-verde::after, .unit-intro.unit-rosso::after { content: none; }
.unit-intro.unit-blu::before, .unit-intro.unit-giallo::before, .unit-intro.unit-verde::before, .unit-intro.unit-rosso::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: var(--frieze-h); aspect-ratio: auto; transform: none;
  background: var(--frieze) left bottom / auto 100% repeat-x; opacity: .16; pointer-events: none; }

/* Clan, fascia «Foto del clan»: rosso di branca con la trama della strada (montagne, scarponcini, forcola, zaino…) */
.unit-gallery.unit-rosso { background: url(../img/trama-strada.svg) 0 0 / 420px 420px repeat, var(--rosso); }

/* Le fasce sono larghe il doppio (2400×160) e non si ripetono mai: ogni figura compare una volta sola.
   Sono alte abbastanza da coprire tutta la larghezza dello schermo; sugli schermi stretti si vede la parte centrale.
   I disegni si rigenerano con app/tools/genera-fascia-branco.py e app/tools/genera-fasce.py. */
.unit-intro.unit-blu, .unit-intro.unit-giallo, .unit-intro.unit-verde, .unit-intro.unit-rosso { --frieze-h: max(clamp(70px, 9vw, 130px), calc(100vw / 15)); }
.unit-intro.unit-blu::before, .unit-intro.unit-giallo::before, .unit-intro.unit-verde::before, .unit-intro.unit-rosso::before { background: var(--frieze) center bottom / auto 100% no-repeat; }
/* Colonia, fascia «Foto della colonia»: azzurro di branca con la trama di foglie, rametti, palloni, cappellino dei castori, cuori, stelle e ghiande */
.unit-gallery.unit-blu { background: url(../img/trama-colonia.svg) 0 0 / 420px 420px repeat, var(--blu); }

/* Sottopagine di Colonia, Branco, Reparto e Clan: sfondo bianco al posto del viola */
.page-band.unit-blu, .page-band.unit-giallo, .page-band.unit-verde, .page-band.unit-rosso { background: #fff; }
@media print { .page-band.unit-blu, .page-band.unit-giallo { background: none !important; } }

/* «Vita di …»: un disegno della branca a sinistra del titolo (Branco: i due berretti da lupetto).
   Il file si indica con life_art in app/data/unita.php; la pagina imposta --life-art e --life-ratio (larghezza / altezza). */
.unit-life.has-art .unit-life-text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(14px, 2vw, 24px); align-items: end; }
.unit-life.has-art .unit-life-text > * { grid-column: 2; }
.unit-life.has-art .unit-life-text::before { content: ""; grid-column: 1; grid-row: 1 / span 2; align-self: center;
  height: clamp(58px, 6vw, 84px); width: auto; aspect-ratio: var(--life-ratio); transform: rotate(-8deg);
  background: var(--life-art) center / contain no-repeat; }
@media (max-width: 640px) { .unit-life.has-art .unit-life-text::before { height: 50px; } }

/* Frecce delle news nel riquadro «Vita di …»: nel colore di branca (gialle nel Branco), piene al passaggio del mouse */
.unit-trio .carousel-arrow { border-color: var(--u); color: var(--u-ink); }
.unit-trio .carousel-arrow:hover:not(:disabled), .unit-trio .carousel-arrow:focus-visible { background: var(--u); color: #fff; }
.unit-giallo .unit-trio .carousel-arrow:hover:not(:disabled), .unit-giallo .unit-trio .carousel-arrow:focus-visible { color: var(--ink); }
.unit-trio .carousel-arrow:disabled { border-color: var(--u); color: var(--u-ink); opacity: .35; }
/* Collegamenti in fondo ai riquadri di «Vita di …» (Calendario, Indicazioni stradali, Archivio): stessa grandezza dei titoli dei riquadri */
.unit-trio .trio-foot .link-more { font-size: .98rem; }

/* Slider nella foto accanto al testo (Co.Ca.): stesse proporzioni e angoli della foto delle branche,
   le righe viola in alto a destra restano dietro, i pallini in alto per non finire sotto il simbolo */
.unit-side-photo.photo-slider { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.unit-side-photo .ps-slide { border-radius: 22px; box-shadow: var(--shadow); }
.unit-side-photo .unit-badge { z-index: 3; }
.unit-side-photo .ps-dots { top: 7px; bottom: auto; }
.unit-side-photo .ps-arrow { width: 38px; height: 38px; margin-top: -19px; }
/* Co.Ca.: niente angoli disegnati nella sezione di apertura */
.unit-intro.unit-viola::before, .unit-intro.unit-viola::after { content: none; }

/* Collegamenti utili sotto «Indicazioni stradali» (Co.Ca.: BuonaCaccia, webmail del Gruppo), nello stile dei collegamenti laterali */
.where-links { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.where-links a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--u-100); color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; transition: background-color .2s; }
.where-links a:hover, .where-links a:focus-visible { background: var(--u); color: #fff; }
.where-links a > span:nth-child(2) { flex: 1; }
.where-link-icon { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; color: var(--u-ink); }
.where-links a:hover .where-link-icon, .where-links a:focus-visible .where-link-icon { color: #fff; }
.where-link-icon img { width: 28px; height: 28px; object-fit: contain; }
.where-links .icon-external { width: 16px; height: 16px; }
.where-link-logo { display: grid; place-items: center; flex-shrink: 0; padding: 4px 8px; background: #fff; border-radius: 8px; }
.where-link-logo img { display: block; height: 22px; width: auto; }

/* Co.Ca., fascia «Foto della Co.Ca.»: viola con la trama di cappellone, fazzolettone, libri, cuori, lampadine e saluto scout */
.unit-gallery.unit-viola { background: url(../img/trama-coca.svg) 0 0 / 420px 420px repeat, var(--viola); }
/* Galleria in fondo alle pagine (L'AGESCI): viola pieno, senza la trama della Co.Ca. */
.unit-gallery.page-gallery { background: var(--u); }

/* Sottopagine delle unità: la fascia disegnata della branca chiude la sezione del testo e poggia sulla foto finale; in larghezza finisce
   prima degli angoli arrotondati della foto, che restano liberi. La foto qui non sale, se no coprirebbe la base del disegno.
   I due lati scendono in diagonale fino a terra: nessun disegno tagliato in verticale, neanche sul telefono, dove si vede solo il centro della fascia.
   Altezza calcolata e non aspect-ratio con min-height: insieme diventano una larghezza minima di 840 px, che sul telefono fa scorrere la pagina di lato. */
.page-band:has(> .page-frieze) { padding-bottom: 0; }
.page-frieze { height: max(56px, calc((100vw - 2 * var(--soft-r)) / 15)); margin: clamp(40px, 6vw, 72px) var(--soft-r) 0;
  background: var(--frieze) center bottom / cover no-repeat; opacity: .16; pointer-events: none;
  clip-path: polygon(0 100%, 36px 0, calc(100% - 36px) 0, 100% 100%); }
.page-band:has(> .page-frieze) + .page-photo-band { margin-top: 0; }
@media print { .page-frieze { display: none; } }

/* Co.Ca.: fascia viola con tre box su una riga (Patto Associativo, Progetto Educativo, Diventa capo) */
.coca-cards { background: url(../img/trama-coca-chiara.svg) 0 0 / 420px 420px repeat, var(--viola-100); }
.coca-card-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.coca-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 2.6vw, 32px); background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.coca-card-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--viola-100); color: var(--viola); margin-bottom: 4px; }
.coca-card-icon svg { width: 28px; height: 28px; fill: currentColor; }
.coca-card h2 { margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.4rem); color: var(--ink); }
.coca-card p { margin: 0; color: var(--text); flex: 1; }
.coca-card .btn { margin-top: 10px; }
.coca-card .btn .icon { width: 18px; height: 18px; }
.coca-card .btn small { font-size: .75rem; font-weight: 700; letter-spacing: .06em; opacity: .7; }
@media (max-width: 900px) { .coca-card-row { grid-template-columns: minmax(0, 1fr); } }

/* Co.Ca.: i capi in servizio, divisi per unità (app/data/staff.php, foto in assets/img/capi) */
.staff-unit + .staff-unit { margin-top: clamp(28px, 4vw, 44px); }
.staff-unit h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 1.2rem; color: var(--u-ink); }
.staff-unit h3 .unit-icon { width: 34px; height: 34px; }
.staff-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.staff-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 14px; background: #fff; border-radius: 18px; border-top: 5px solid var(--u); box-shadow: var(--shadow); }
.staff-card img, .staff-initials { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.staff-initials { display: grid; place-items: center; background: var(--u-100); color: var(--u-ink); font: 800 2rem/1 var(--f-head); }
.staff-card strong { color: var(--ink); }
.staff-card span { font-size: .88rem; color: var(--muted); }
/* Co.Ca.: «I capi in servizio» sotto la fascia viola, su sfondo bianco */
.staff-band { background: #fff; }
/* «I capi in servizio» senza nomi: un riquadro per unità con la scritta «In aggiornamento» */
.staff-band .wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.staff-band .section-head { grid-column: 1 / -1; margin-bottom: 0; }
.staff-band .staff-unit { margin: 0; padding: 20px 22px; background: var(--u-100); border-radius: 18px; border-top: 5px solid var(--u); }
.staff-band .staff-unit:has(.staff-card) { grid-column: 1 / -1; background: none; padding: 0; border: 0; }
.staff-empty { margin: 0; font-size: .92rem; color: var(--muted); }
.staff-band .staff-list:empty { display: none; }
@media (max-width: 1000px) { .staff-band .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .staff-band .wrap { grid-template-columns: minmax(0, 1fr); } }
/* «I capi in servizio» con i nomi: Colonia e Branco affiancati sulla stessa riga, le altre unità a tutta larghezza;
   nella Co.Ca. i capi a disposizione su una riga loro */
.staff-band .wrap:has(.staff-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); row-gap: clamp(28px, 4vw, 44px); }
.staff-band .staff-unit-colonia:has(.staff-card), .staff-band .staff-unit-branco:has(.staff-card) { grid-column: auto; }
.staff-band .staff-unit + .staff-unit { margin-top: 0; }
.staff-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.staff-break { grid-column-start: 1; }
@media (max-width: 1000px) { .staff-band .staff-unit-colonia:has(.staff-card), .staff-band .staff-unit-branco:has(.staff-card) { grid-column: 1 / -1; } }

/* «I capi in servizio»: tutto centrato. Ogni unità ha il simbolo di branca in un cerchio colorato e sotto il nome;
   i capi sono schede bianche con la foto (o l'iniziale) in un anello del colore di branca e il ruolo in un'etichetta tonda */
.staff-band { text-align: center; background: radial-gradient(60% 50% at 50% 0%, var(--viola-50) 0%, #fff 70%); }
.staff-head { margin-left: auto; margin-right: auto; max-width: 40rem; }
.staff-head .stitched::after { left: 50%; transform: translateX(-50%); }
.staff-head p { margin: 16px 0 0; color: var(--muted); }
.staff-band .wrap:has(.staff-card) { justify-items: center; }
.staff-band .staff-unit:has(.staff-card) { width: 100%; }
.staff-unit h3 { flex-direction: column; justify-content: center; gap: 8px; margin: 0 0 20px; font-size: 1.15rem; letter-spacing: .01em; }
.staff-unit-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--u-100); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--u); }
.staff-unit h3 .staff-unit-badge .unit-icon { width: 32px; height: 32px; }
.staff-unit h3 .staff-unit-badge .unit-icon-img { width: 36px; height: 36px; }
.staff-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 16px; }
.staff-row-break { flex-basis: 100%; height: 0; padding: 0; margin: 0; }
.staff-card { width: 178px; padding: 20px 12px 18px; border-top: 0; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(36,19,63,.06), 0 10px 24px rgba(36,19,63,.08); transition: transform .2s, box-shadow .2s; }
.staff-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(36,19,63,.06), 0 16px 32px rgba(36,19,63,.12); }
.staff-card img, .staff-initials { width: 88px; height: 88px; margin-bottom: 12px; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--u); }
.staff-initials { font-size: 1.9rem; }
.staff-card strong { font: 800 1.02rem/1.25 var(--f-head); }
.staff-role { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--u-100); color: var(--u-ink) !important; font-size: .75rem !important; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.unit-giallo .staff-role { color: #6E4F00 !important; }
.staff-band .staff-unit-colonia, .staff-band .staff-unit-branco { position: relative; }
@media (max-width: 560px) { .staff-card { width: calc(50% - 8px); } }
/* simbolo di branca senza cerchio intorno, come prima */
.staff-unit-badge { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; }
.staff-unit h3 .staff-unit-badge .unit-icon { width: 44px; height: 44px; }
.staff-unit h3 .staff-unit-badge .unit-icon-img { width: 44px; height: 44px; }
/* Reparto e Noviziato e Clan affiancati come Colonia e Branco, con i capi su due righe da due */
.staff-band .staff-unit-reparto:has(.staff-card), .staff-band .staff-unit-clan:has(.staff-card) { grid-column: auto; }
.staff-unit-reparto .staff-list, .staff-unit-clan .staff-list { max-width: calc(2 * 178px + 16px); margin-left: auto; margin-right: auto; }
@media (max-width: 1000px) { .staff-band .staff-unit-reparto:has(.staff-card), .staff-band .staff-unit-clan:has(.staff-card) { grid-column: 1 / -1; } }
/* Colonia e Branco: le tre schede di ciascuno su una sola riga nella metà della sezione */
@media (min-width: 1001px) {
  .staff-unit-colonia .staff-list, .staff-unit-branco .staff-list { flex-wrap: nowrap; gap: 12px; }
  .staff-unit-colonia .staff-card, .staff-unit-branco .staff-card { width: auto; flex: 1 1 0; max-width: 178px; min-width: 0; }
}
/* «Gli staff 2026/2027» in maiuscoletto */
.staff-head p { font-variant: small-caps; font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 600; font-size: 1.1rem; }
/* Sottopagine delle unità: il disegno poggia sul bordo alto della foto finale e comincia e finisce
   dentro le curve dei suoi angoli (rientra di --soft-r per lato) */

/* Censimento (/censimento): presentazione, passi, modulo del socio, quota (ripartizione ed estremi del bonifico), documenti */
/* «Cos'è il censimento»: testo a sinistra, slider di foto a destra (assets/img/censimento) */
.census-intro-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .census-intro-wrap { grid-template-columns: minmax(0, 1fr); } }
/* filigrana del logo AGESCI dietro il testo, come nella sezione eventi */
.census-intro { position: relative; overflow: hidden; isolation: isolate; }
.census-intro::before { content: ""; position: absolute; z-index: -1; left: clamp(-120px, -6vw, -40px); top: 50%; width: clamp(280px, 34vw, 480px); aspect-ratio: 9 / 10;
  opacity: .06; pointer-events: none; transform: translateY(-50%) rotate(-10deg);
  background: var(--viola); -webkit-mask: url(../img/varianti/agesci-viola-400.webp) center / contain no-repeat; mask: url(../img/varianti/agesci-viola-400.webp) center / contain no-repeat; }
/* frecce e pallini dello slider in viola, come il resto della pagina (le pagine delle branche usano il colore di branca) */
.census-intro .intro-slider { --u: var(--viola); --u-ink: var(--viola); }
.census-intro .intro-slider .carousel-arrow:hover:not(:disabled), .census-intro .intro-slider .carousel-arrow:focus-visible { color: #fff; }
/* «Dati del socio»: foto AGESCI di sfondo velata di viola, presentazione sopra e modulo a tutta larghezza */
.contact-form-band.census-form-band { background: linear-gradient(rgba(46,24,82,.66), rgba(46,24,82,.78)), url(../img/foto/iscrizioni-fazzolettoni-al-vento.webp) center / cover no-repeat; }
.census-form-layout .contact-form-intro { max-width: 46rem; margin-bottom: clamp(24px, 3vw, 36px); }
.census-form-band .contact-form-intro .kicker, .census-form-band .contact-form-intro h2 { color: #fff; }
.census-form-band .contact-form-intro p:not(.kicker) { color: rgba(255,255,255,.88); }
/* «Quota annuale»: testo e ripartizione a sinistra, bonifico e PayPal a destra, colonne alte uguali */
.census-quota-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; }
.census-quota-col { display: flex; flex-direction: column; }
.census-quota-col .census-quota { flex: 1; margin-top: 8px; display: flex; flex-direction: column; }
/* le tre voci si distribuiscono nell'altezza disponibile, senza lasciare spazio vuoto in fondo al riquadro */
.census-quota-col .census-quota ul { flex: 1; align-content: space-evenly; }
.census-quota-col .census-quota li p { font-size: .96rem; }
.census-quota-band .census-pay { display: flex; flex-direction: column; gap: 18px; }
.census-quota-band .census-paypal { flex: 1; }
@media (max-width: 860px) { .census-quota-band { grid-template-columns: minmax(0, 1fr); } }
.census-quota { background: #fff; border-radius: 24px; box-shadow: var(--shadow); padding: clamp(22px, 3.5vw, 34px); border-top: 6px solid var(--giallo); }
.census-quota-head { display: grid; justify-items: center; gap: 2px; margin: 0 0 20px; padding-bottom: 18px; border-bottom: 2px dashed var(--line); text-align: center; }
.census-quota-head span { font: 600 .78rem/1.4 var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--viola); }
.census-quota-head strong { font: 800 clamp(2.4rem, 5vw, 3.2rem)/1.05 var(--f-head); color: var(--ink); }
.census-quota ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.census-quota li { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: start; }
.census-amount { display: block; padding: 6px 0; border-radius: 999px; background: var(--viola-100); color: var(--viola-800); font: 800 1rem/1.2 var(--f-head); text-align: center; white-space: nowrap; }
.census-quota li strong { font: 800 1.02rem/1.3 var(--f-head); color: var(--ink); }
.census-quota li p { margin: 2px 0 0; font-size: .92rem; color: var(--muted); }
/* «Dati del socio»: carta strappata anche in basso, sopra la sezione della quota */
.contact-form-band.census-form-band { margin-bottom: calc(var(--torn) * -1);
  -webkit-mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - 2 * var(--torn) + 2px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat;
  mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - 2 * var(--torn) + 2px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat; }
/* «Cosa serve per il censimento?»: sfondo viola chiaro */
.section-tint.census-steps-band { background: var(--viola-100); }
.census-steps .pillar { display: block; text-decoration: none; color: inherit; border-top: 4px solid var(--viola); transition: transform .2s, box-shadow .2s; }
.census-steps .pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.census-steps .pillar h3 { font: 800 1.25rem/1.25 var(--f-head); color: var(--ink); margin: 0 0 8px; }
/* Bonifico: intestazione con icona sopra gli estremi */
.census-bank-head { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.25); }
.census-bank-icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; background: var(--giallo); color: var(--viola-800); }
.census-bank-icon .icon { width: 26px; height: 26px; }
.census-bank-head > span:last-child { display: grid; gap: 2px; }
.census-bank-head span span { font: 600 .76rem/1.5 var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--giallo); }
.census-bank-head strong { font: 800 1.25rem/1.25 var(--f-head); color: #fff; }
.contact-form .field-row-zip { grid-template-columns: minmax(0, 1fr) 140px; }
.contact-form .field-row-zip > label { min-width: 0; }
.contact-form .field-row-zip input { width: 100%; min-width: 0; }
.contact-form .census-cf { text-transform: uppercase; letter-spacing: .06em; }
.census-note { margin: -6px 0 0; }
.census-parent { display: grid; gap: 14px; padding: 16px 18px 18px; border-radius: 14px; background: var(--viola-50); }
.census-parent h3 { margin: 0; font: 800 .95rem/1.3 var(--f-head); color: var(--viola-800); }
.census-parent[hidden] { display: none; }
.census-bank { display: grid; gap: 12px; margin: 0; padding: clamp(22px, 3.5vw, 32px); border-radius: 24px; background: var(--viola); color: #fff; box-shadow: var(--shadow); }
.census-bank dl { display: grid; gap: 12px; margin: 0; }
.census-bank dl > div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px dashed rgba(255,255,255,.25); }
.census-bank dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.census-bank dt { font: 600 .76rem/1.5 var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--giallo); }
.census-bank dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.census-bank .census-iban { font: 800 clamp(1rem, 1.9vw, 1.3rem)/1.3 var(--f-head); letter-spacing: 0; user-select: all; }
.census-docs-lead { max-width: 46rem; }
.census-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.census-docs a { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.census-docs a:hover { transform: translateY(-2px); border-color: var(--viola); color: var(--ink); }
.census-docs .icon { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--viola-100); color: var(--viola); flex-shrink: 0; }
.census-docs span { display: grid; gap: 2px; flex: 1; }
.census-docs .census-doc-body { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.census-doc-photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .3s; }
.census-docs a:hover .census-doc-photo { transform: scale(1.04); }
.census-docs strong { font: 800 1rem/1.3 var(--f-head); }
.census-docs small { color: var(--muted); font-size: .85rem; }
.census-docs em { font-style: normal; font: 700 .75rem/1 var(--f-body); letter-spacing: .08em; padding: 5px 8px; border-radius: 6px; background: var(--rosso-100); color: var(--rosso-ink); }
@media (max-width: 860px) { .census-steps { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .contact-form .field-row-zip { grid-template-columns: minmax(0, 1fr) 110px; } .census-quota li { grid-template-columns: 72px 1fr; } }
.census-pay { display: grid; gap: 18px; }
.census-paypal { padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: var(--viola-100); border: 2px solid var(--viola-100); box-shadow: var(--shadow); }
.census-paypal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 8px; }
.census-paypal-head > span { display: grid; gap: 2px; order: -1; }
.census-paypal-logo { width: 100px; height: auto; flex-shrink: 0; }
.census-paypal-head span span { font: 600 .76rem/1.5 var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--viola); }
.census-paypal-head strong { font: 800 1.25rem/1.25 var(--f-head); color: var(--ink); }
.census-paypal p:not(.census-paypal-head) { margin: 0 0 16px; font-size: .94rem; color: var(--muted); }
.census-paypal-button { max-width: 360px; min-height: 48px; color: var(--muted); font-size: .9rem; }
.census-paypal p strong { color: var(--ink); }
/* Pulsante del link di pagamento PayPal, con i colori e le misure del codice dato da PayPal */
.census-pp-form { display: grid; justify-items: center; align-content: start; gap: .5rem; margin: 0; text-align: center; }
.census-pp-btn { min-width: 11.625rem; height: 2.625rem; padding: 0 2rem; border: 0; border-radius: .25rem; background: #FFD140; color: #000;
  font: bold 1rem/1.25rem "Helvetica Neue", Arial, sans-serif; text-align: center; cursor: pointer; transition: filter .2s; }
.census-pp-btn:hover, .census-pp-btn:focus-visible { filter: brightness(.95); }
.census-pp-by { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.census-pp-by img { height: .875rem; vertical-align: middle; }
/* Pulsante e codice QR affiancati (su telefono il codice va sotto) */
.census-pp-row { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; }
.census-pp-qr { display: grid; justify-items: center; gap: 6px; margin: 0; max-width: 140px; text-align: center; }
.census-pp-qr img { width: 120px; height: 120px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); image-rendering: pixelated; }
.census-pp-qr figcaption { font-size: .75rem; line-height: 1.3; color: var(--muted); }

/* Il Grande Fiume e le Code: le tappe come un fiume da risalire, un castorino per tappa che cresce e cambia coda */
.code-river { --river: #CFE3F5; list-style: none; margin: 1.8em 0 2.2em; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; position: relative; counter-reset: none; }
.code-river::before { content: ""; position: absolute; left: -8px; right: -8px; top: 132px; height: 46px; border-radius: 999px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='46'%3E%3Cpath d='M0 16q15-8 30 0t30 0M0 30q15-8 30 0t30 0' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") repeat-x center / 60px 46px, linear-gradient(90deg, #DCEBFA, #B9D6F2); }
.code-river::after { content: ""; position: absolute; right: -8px; top: 147px; border: 8px solid transparent; border-left: 12px solid #B9D6F2; transform: translateX(100%); }
.code-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 4px; }
.code-art { display: block; width: 100%; max-width: 168px; aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center; }
.code-art svg { width: calc(100% * var(--s, 1)); height: auto; overflow: visible; filter: drop-shadow(0 6px 6px rgba(28, 50, 90, .14)); transition: transform .25s ease; }
.code-step:hover .code-art svg { transform: translateY(-4px) rotate(-2deg); }
.code-num { position: absolute; top: 2px; left: 6px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--u, var(--viola)); color: #fff; font-weight: 800; font-size: .9rem; box-shadow: 0 0 0 4px #fff; }
.code-step strong { margin-top: 10px; font-size: 1rem; line-height: 1.2; color: var(--ink); min-height: 2.4em; display: flex; align-items: center; }
.code-tail { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--muted, #5b5566); }
.code-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--tail); border: 2px solid var(--tail-line); flex: none; }
.is-cub .code-swatch { border-style: dashed; }
.code-word { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--u-100, var(--viola-50)); color: var(--u-ink, var(--u)); font-weight: 700; font-size: .88rem; }
.code-word svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 1000px) {
  .code-river { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .code-river::before, .code-river::after { display: none; }
  .code-art { background: radial-gradient(ellipse 44% 11% at 50% 89%, #CFE3F5 0 96%, transparent 100%); }
}
@media (max-width: 560px) {
  .code-river { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; }
}

/* Colonia: banner verso il sito nazionale dell'Associazione Italiana Castorini */
.unit-national { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 16px 20px 16px 16px; border-radius: 20px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #1C4FA0, #2F6CC4); border-bottom: 5px solid #F2C200; box-shadow: 0 10px 24px -12px rgba(28, 79, 160, .6); transition: transform .2s ease, box-shadow .2s ease; }
.unit-national:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(28, 79, 160, .7); }
.unit-national img { width: 64px; height: 64px; flex: none; border-radius: 50%; background: #fff; padding: 3px; box-shadow: 0 0 0 3px #F2C200; }
.unit-national-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.unit-national-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F2C200; }
.unit-national strong { font-size: 1.05rem; line-height: 1.25; }
.unit-national-url { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; opacity: .9; }
.unit-national-url svg { width: 14px; height: 14px; }

.unit-national-go { margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #F2C200; color: #1C4FA0; transition: transform .2s ease; }
.unit-national:hover .unit-national-go { transform: translateX(3px); }
.unit-national-go svg { width: 18px; height: 18px; }

/* Copertina «intera» (loghi, locandine): nelle anteprime non si ritaglia */
img.img-fit { object-fit: contain !important; background: #fff; }
.card:hover .card-media img.img-fit { transform: none; }
.prose .news-gallery { margin-top: 32px; }

/* News: foto in bianco e nero degli scout sulle rocce (dal vecchio sito) prima del footer */
.photo-band-news { height: clamp(200px, 26vw, 400px); }
.page-photo-band img[src*="news-scout-sulle-rocce"] { object-position: 32% 70%; }

/* Footer: i social stanno accanto a «Calendario degli eventi» */
.newsletter-actions { align-items: center; }
.newsletter-actions .footer-social { margin-top: 0; margin-left: 6px; }
@media (max-width: 600px) { .newsletter-actions .footer-social { margin-left: 0; width: 100%; } }

/* Pagina del Clan: mappa con le due sedi (Clan e Noviziato) al posto della mappa fissa */
.unit-where .sedi-map { flex: 1; min-height: 300px; border-radius: 16px; box-shadow: none; }
.leaflet-tooltip.sede-label { padding: 3px 10px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 800 .8rem/1.3 var(--f-head); box-shadow: 0 3px 8px rgba(36,19,63,.25); }
.leaflet-tooltip-top.sede-label::before { border-top-color: var(--ink); }
.where-directions { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* Galleria in mezzo al testo (L'AGESCI): fascia viola piena larga tutto lo schermo, che esce dalla colonna del testo;
   la fascia della pagina taglia i pochi pixel in più della barra di scorrimento (100vw), così non c'è scorrimento laterale */
.page-gallery { margin: 2.4em calc(50% - 50vw); padding: clamp(40px, 6vw, 72px) 0; }
.page-band:has(.page-gallery) { overflow-x: clip; }
.page-gallery .unit-gallery-head h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
/* Crediti delle foto con licenza libera, in fondo al testo */
.page-photo-credits { margin: 2em 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.page-photo-credits a { color: inherit; }
/* su telefono i crediti delle foto stanno in una riga chiusa «Crediti foto» (le licenze chiedono di citarli anche lì); su computer e tablet il paragrafo */
.page-photo-credits-mobile { display: none; }
@media (max-width: 640px) {
  .page-photo-credits { display: none; }
  .page-photo-credits-mobile { display: block; margin: 2em 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
  .page-photo-credits-mobile summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--muted); }
  .page-photo-credits-mobile p { margin: 4px 0 0; }
  .page-photo-credits-mobile a { color: inherit; }
}

/* Footer: «Collegamenti utili» porta ad altri siti, quindi sta in un riquadro a parte con la freccia ↗ accanto a ogni voce */
.footer-ext { align-self: start; margin-left: -18px; padding: 20px 18px 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.05); }
.footer-ext ul { gap: 9px; }
.footer-ext a { font-size: .92em; color: rgba(255,255,255,.82); }
.footer-ext a::after { content: "↗"; display: inline-block; margin-left: .35em; font-size: .85em; color: var(--giallo); opacity: .85; transition: transform .15s; }
.footer-ext a:hover::after { transform: translate(2px, -2px); }
@media (max-width: 760px) { .footer-ext { margin-left: 0; } }

/* Footer da computer: le quattro colonne alte uguali. Le voci si distribuiscono su tutta l'altezza, il riquadro dei
   collegamenti si allunga fino in fondo e il suo titolo resta in riga con gli altri (il margine negativo compensa lo spazio interno) */
@media (min-width: 1001px) {
  .footer-grid { align-items: stretch; }
  .footer-grid > div { display: flex; flex-direction: column; }
  .footer-grid > div > ul { flex: 1; align-content: space-between; }
  .footer-brand p { margin-bottom: 0; }
  .footer-brand img { align-self: flex-start; }
  .footer-ext { align-self: stretch; margin-top: -20px; margin-bottom: -22px; }
}

/* Menu «Chi siamo» con 5 voci: box in riga (icona a sinistra); sopra Il Gruppo e La nostra storia, sotto le altre tre affiancate */
@media (min-width: 1181px) {
  .mega-cards.is-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mega-cards.is-list > li { grid-column: span 2; }
  .mega-cards.is-list > li:nth-child(-n+2) { grid-column: span 3; }
  .mega-cards.is-list .mega-unit { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .mega-cards.is-list .mega-card-icon { width: 46px; height: 46px; }
  /* le tre affiancate sono più strette: icona e margini un po' più piccoli */
  .mega-cards.is-list > li:nth-child(n+3) .mega-unit { gap: 12px; padding: 14px 14px 14px 12px; }
  .mega-cards.is-list > li:nth-child(n+3) .mega-card-icon { width: 38px; height: 38px; }
  .mega-cards.is-list > li:nth-child(n+3) .mega-card-icon svg { width: 20px; height: 18px; }
  .mega-cards.is-list > li:nth-child(n+3) .mega-card-icon .unit-icon { width: 24px; height: 24px; }
  .mega-cards.is-list > li:nth-child(n+3) strong { font-size: 1rem; }
}
.mega-card-icon img { width: 30px; height: auto; display: block; }

/* Pagine delle unità: il segnaposto della sede prende il colore della branca (in Contatti restano verdi e gialli come il fazzolettone) */
.unit-where .sede-pin span { background: var(--u); border-color: #fff; }
.unit-giallo .unit-where .sede-pin span { border-color: var(--giallo-800, #8a6a00); }
.unit-giallo .unit-where .sede-pin span::after { background: #fff; }

/* Home: «Le nostre unità» con il bordo alto frastagliato, come carta strappata sopra «Benvenuti» */
.section.path { margin-top: calc(var(--torn) * -1); -webkit-mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat; mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - var(--torn) + 1px) no-repeat; }
/* «Ultime news»: bordo basso frastagliato, che si appoggia sopra «Contattaci» (il bordo alto resta dritto) */
.news-band { z-index: 2; margin-bottom: calc(var(--torn) * -1); -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--torn) + 1px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat; mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--torn) + 1px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat; }

/* Menu «Chi siamo»: box come le schede delle unità in home (foto, velatura scura, cornice tratteggiata, bordo del colore in basso,
   testo bianco), su computer, tablet e telefono. Cambia solo la disposizione, più sotto */
.mega-card-photo { display: none; }
.mega-cards.is-list .mega-unit.has-photo { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: row; align-items: flex-end; gap: 14px;
  min-height: 138px; height: 100%; padding: 18px 20px; border: 0; border-bottom: 5px solid var(--u); border-radius: 20px 20px 20px 5px;
  background: var(--viola-900); color: #fff; box-shadow: var(--shadow); }
.mega-cards.is-list .mega-unit.has-photo .mega-card-photo { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mega-cards.is-list .mega-unit.has-photo:hover .mega-card-photo { transform: scale(1.06); }
.mega-cards.is-list .mega-unit.has-photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(25,15,38,.92) 0%, rgba(25,15,38,.62) 50%, rgba(25,15,38,.18) 100%); }
.mega-cards.is-list .mega-unit.has-photo::before { content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 2px dashed rgba(255,255,255,.5); border-radius: 15px 15px 15px 2px; }
.mega-cards.is-list .mega-unit.has-photo:hover { filter: none; color: #fff; }
.mega-cards.is-list .mega-unit.has-photo strong { color: #fff; }
.mega-cards.is-list .mega-unit.has-photo small { color: rgba(255,255,255,.85); }
@media (min-width: 1181px) {
  .mega-cards.is-list { gap: 14px; }
  .mega-cards.is-list > li:nth-child(n+3) .mega-unit.has-photo { min-height: 150px; padding: 16px; }
}
/* Tablet (tendina del menu): come da computer, due schede sopra e tre sotto; in quelle strette l'icona sta sopra il titolo */
@media (min-width: 701px) and (max-width: 1180px) {
  .mega-cards.is-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .mega-cards.is-list > li { grid-column: span 2; }
  .mega-cards.is-list > li:nth-child(-n+2) { grid-column: span 3; }
  .mega-cards.is-list .mega-unit.has-photo { min-height: 122px; padding: 14px 16px; gap: 12px; }
  .mega-cards.is-list .mega-card-icon { width: 42px; height: 42px; }
  .mega-cards.is-list > li:nth-child(n+3) .mega-unit.has-photo { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; min-height: 150px; padding: 14px; }
  .mega-cards.is-list > li:nth-child(n+3) .mega-card-icon { width: 36px; height: 36px; }
  .mega-cards.is-list > li:nth-child(n+3) .mega-card-icon svg { width: 18px; height: 16px; }
  .mega-cards.is-list > li:nth-child(n+3) .mega-card-icon .unit-icon { width: 22px; height: 22px; }
  .mega-cards.is-list .mega-unit.has-photo small { font-size: .84rem; line-height: 1.35; }
}
/* Telefono: una scheda per riga, bassa, con l'icona a sinistra; la velatura scura parte da sinistra e la foto si vede sulla destra */
@media (max-width: 700px) {
  .mega-cards.is-list { grid-template-columns: 1fr; gap: 8px; }
  .mega-cards.is-list > li { grid-column: auto; }
  .mega-cards.is-list .mega-unit.has-photo { align-items: center; min-height: 84px; padding: 12px 16px 12px 14px; gap: 12px; border-bottom-width: 4px; border-radius: 16px 16px 16px 4px; }
  .mega-cards.is-list .mega-unit.has-photo::after { background: linear-gradient(90deg, rgba(25,15,38,.92) 0%, rgba(25,15,38,.72) 55%, rgba(25,15,38,.3) 100%); }
  .mega-cards.is-list .mega-unit.has-photo::before { inset: 5px; border-radius: 12px 12px 12px 2px; }
  .mega-cards.is-list .mega-card-icon { width: 40px; height: 40px; }
  .mega-cards.is-list .mega-card-icon svg { width: 20px; height: 18px; }
  .mega-cards.is-list .mega-card-icon .unit-icon { width: 24px; height: 24px; }
  .mega-cards.is-list .mega-card-icon img { width: 26px; }
  .mega-cards.is-list .mega-unit.has-photo strong { font-size: 1rem; }
  .mega-cards.is-list .mega-unit.has-photo small { font-size: .82rem; line-height: 1.35; }
}

/* L'AGESCI: foto in fondo un po' più in alto, così i ragazzi non finiscono sotto il bordo del footer */
.page-photo-band img[src*="jamboree-2019.webp"] { object-position: center 68%; }
/* Pulsante verso il sito AGESCI accanto a «Stampa la pagina»: giglio a sinistra, freccia di sito esterno a destra */
.page-actions { flex-wrap: wrap; gap: 12px; }
.btn-site .btn-giglio { width: 22px; height: 22px; margin: 0; background: currentColor; }
.btn-site .icon { width: 16px; height: 16px; opacity: .85; }

/* Lo Scoutismo: video a destra del testo, che gli scorre accanto; sul telefono sta sotto, a tutta larghezza */
.prose .md-side-video { float: right; width: min(46%, 540px); margin: .3em 0 1.2em clamp(20px, 3vw, 40px); }
.prose .md-side-video .md-video { margin: 0; }
.prose:has(> .md-side-video) { display: flow-root; }
@media (max-width: 760px) { .prose .md-side-video { float: none; width: 100%; margin: 0 0 1.6em; } }

/* Menu «Chi siamo»: tutte le schede con il bordo del fazzolettone del Gruppo, verde con il filo giallo sotto
   (in «Le unità» restano i colori delle branche) */
/* Menu «Le unità», da computer: le cinque unità su una fila sola, ogni scheda in verticale con icona sopra il testo */
@media (min-width: 1181px) {
  #mega-unita .mega-inner { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  #mega-unita .mega-cards.is-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  #mega-unita .mega-cards.is-list > li { grid-column: auto; }
  #mega-unita .mega-cards.is-list > li .mega-unit.has-photo { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; min-height: 250px; padding: 18px 16px; }
  #mega-unita .mega-cards.is-list > li .mega-card-icon { width: 44px; height: 44px; }
  #mega-unita .mega-cards.is-list > li .mega-card-icon svg { width: 22px; height: 20px; }
  #mega-unita .mega-cards.is-list > li .mega-card-icon .unit-icon { width: 26px; height: 26px; }
  #mega-unita .mega-cards.is-list > li strong { font-size: 1.05rem; }
  #mega-unita .mega-cards.is-list .mega-unit.has-photo small { font-size: .84rem; line-height: 1.35; }
}
#mega-chi .mega-cards.is-list .mega-unit.has-photo { border-bottom-color: var(--verde); box-shadow: 0 3px 0 var(--giallo), var(--shadow); }

/* --- Lo Scoutismo: pagina a blocchi (app/partials.php, scout_page_html) --- */
.scout-page { --gap-block: clamp(56px, 8vw, 96px); }
.scout-page .kicker { color: var(--viola); }
.scout-head { margin-bottom: 26px; }
.prose .scout-head h2 { margin: 8px 0 0; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.scout-block, .scout-value { margin-top: var(--gap-block); }
/* citazione in apertura */
.prose .scout-mission { position: relative; overflow: hidden; margin: 0 0 44px; padding: clamp(26px, 4vw, 44px) clamp(24px, 5vw, 60px); border: 0; border-radius: 26px 26px 26px 6px;
  background: var(--viola); color: #fff; font-style: normal; border-bottom: 6px solid var(--verde); box-shadow: 0 3px 0 var(--giallo), var(--shadow); }
.prose .scout-mission::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255,255,255,.35); border-radius: 18px 18px 18px 2px; pointer-events: none; }
.prose .scout-mission p { position: relative; margin: 0; max-width: 60ch; font: 600 clamp(1.1rem, 2.1vw, 1.45rem)/1.45 var(--f-head); font-style: italic; }
.prose .scout-mission cite { position: relative; display: block; margin-top: 16px; font-style: normal; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--giallo); }
/* apertura: testo e video */
.scout-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.scout-intro-text p:first-child { font-size: 1.15em; font-weight: 600; color: var(--ink); }
.prose .scout-intro-video { margin: 0; position: sticky; top: calc(var(--header-h, 90px) + 24px); }
.prose .scout-intro-video .md-video { margin: 0; }
/* i numeri */
.prose .scout-stats { list-style: none; margin: var(--gap-block) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.prose .scout-stats li { margin: 0; padding: 26px 26px 24px; border-radius: 22px 22px 22px 6px; background: #fff; border-bottom: 5px solid var(--verde); box-shadow: 0 3px 0 var(--giallo), var(--shadow); }
.scout-stats strong { display: block; font: 800 clamp(2rem, 4vw, 2.9rem)/1 var(--f-head); color: var(--viola); letter-spacing: -.02em; }
.scout-stats span { display: block; margin-top: 10px; color: var(--muted); font-size: .95rem; line-height: 1.45; }
/* un movimento mondiale */
.prose .scout-pillars { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.prose .scout-pillars li { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; border-radius: 20px 20px 20px 5px; background: var(--viola-100); }
.scout-pillars strong { font: 800 1.12rem/1.25 var(--f-head); color: var(--ink); }
.scout-pillar-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--viola); }
.scout-pillar-icon svg { width: 24px; height: 22px; }
@media (min-width: 900px) { .scout-movement > p { columns: 2; column-gap: 44px; } }
/* storia: titolo a sinistra, testo a destra */
.scout-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.scout-split .scout-head { position: sticky; top: calc(var(--header-h, 90px) + 24px); }
.prose .scout-highlight { margin-top: 1.4em; padding: 20px 24px; border-left: 5px solid var(--verde); border-radius: 0 18px 18px 0; background: var(--viola-100); font-weight: 600; color: var(--ink); }
/* valori */
.scout-values-head > p { max-width: 78ch; }
.scout-value-icon { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--viola-100); color: var(--viola); }
.scout-value-icon svg { width: 24px; height: 22px; }
.scout-value-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.prose .scout-value-head h3 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
/* la Promessa */
.scout-promise { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.scout-value-card { position: relative; padding: clamp(26px, 4vw, 40px); border-radius: 26px 26px 26px 6px; background: var(--viola); color: #fff;
  border-bottom: 6px solid var(--verde); box-shadow: 0 3px 0 var(--giallo), var(--shadow); }
.scout-value-card::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255,255,255,.35); border-radius: 18px 18px 18px 2px; pointer-events: none; }
.scout-value-card .scout-value-icon { background: #fff; }
.prose .scout-value-card h3 { color: #fff; margin: 16px 0 12px; font-size: 1.5rem; }
.prose .scout-value-card blockquote { position: relative; margin: 0; padding: 0; border: 0; background: none; color: #fff; font-size: 1.08rem; }
.prose .scout-value-card blockquote p { margin: 0 0 8px; }
.prose .scout-value-card ul { margin: 0; padding-left: 1.2em; }
.prose .scout-value-card li { margin: 4px 0; }
.scout-value-text p { margin: 0; }
/* la Legge */
.scout-law-lead { margin: 22px 0 0; font-weight: 700; color: var(--ink); }
.prose .scout-law ol.law-grid { margin-top: 14px; }
/* il Motto */
.prose .scout-mottos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.prose .scout-mottos li { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 22px; border-radius: 22px 22px 22px 6px; background: var(--u-100); border-bottom: 5px solid var(--u); }
.scout-mottos .unit-icon { width: 54px; height: 54px; margin-bottom: 6px; }
.scout-motto-who { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--u-ink, var(--u)); }
.scout-motto-word { font: 800 1.3rem/1.2 var(--f-head); color: var(--ink); }
.scout-motto-lat { font-size: .88rem; color: var(--muted); }
.prose .scout-mottos p { margin: 4px 0 0; font-size: .92rem; line-height: 1.5; }
/* le organizzazioni */
.prose .scout-orgs-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.prose .scout-orgs-grid li { margin: 0; }
.prose a.scout-org { display: flex; flex-direction: column; height: 100%; padding: 26px 24px 22px; border-radius: 22px 22px 22px 6px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.prose a.scout-org:hover { transform: translateY(-3px); color: var(--text); }
.scout-org-logo { display: block; margin-bottom: 20px; }
.prose .scout-org-logo img { display: block; width: 100%; height: 96px; object-fit: contain; object-position: left center; border-radius: 0; }
.scout-org-sigla { font-size: .76rem; font-weight: 700; letter-spacing: .14em; color: var(--viola); }
.scout-org strong { margin-top: 4px; font: 800 1.1rem/1.3 var(--f-head); color: var(--ink); }
.scout-org-text { margin-top: 8px; font-size: .93rem; line-height: 1.5; color: var(--muted); }
.scout-org-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-weight: 700; font-size: .92rem; color: var(--viola); }
.scout-org-go .icon { width: 15px; height: 15px; }
/* tablet */
@media (max-width: 960px) {
  .prose .scout-pillars, .prose .scout-mottos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scout-promise { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .scout-intro, .scout-split { grid-template-columns: minmax(0, 1fr); }
  .prose .scout-intro-video { order: -1; position: static; }
  .scout-split .scout-head { position: static; margin-bottom: 4px; }
  .prose .scout-orgs-grid { grid-template-columns: minmax(0, 1fr); }
  .prose .scout-org-logo img { height: 80px; }
}
/* telefono */
@media (max-width: 640px) {
  .prose .scout-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .prose .scout-stats li { padding: 20px 22px; }
  .prose .scout-pillars li { padding: 18px 16px; gap: 12px; }
  .prose .scout-mottos { grid-template-columns: minmax(0, 1fr); }
}
/* Lo Scoutismo, «Il Motto»: fascia viola larga tutto lo schermo (il contenuto resta nella colonna del testo), schede chiare sopra */
.prose .scout-motto { margin-inline: calc(50% - 50vw); padding: clamp(44px, 6vw, 72px) calc(50vw - 50%); background: var(--viola); color: rgba(255,255,255,.9); }
.page-band:has(.scout-motto) { overflow-x: clip; }
.prose .scout-motto .scout-value-head h3 { color: #fff; }
.scout-motto .scout-value-icon { background: #fff; }
.prose .scout-motto > p strong { color: #fff; }
.prose .scout-motto .scout-mottos li { box-shadow: 0 10px 24px rgba(20,10,35,.22); }
.prose .scout-motto .scout-mottos li { color: var(--text); }
.prose .scout-motto .scout-mottos p { color: var(--text); }
/* Lo Scoutismo: foto di accompagnamento (da scout.org) */
.prose .scout-photo { margin: 0; }
.prose .scout-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px 22px 22px 6px; box-shadow: var(--shadow); }
.prose .scout-photo figcaption { margin-top: 8px; font-size: .82rem; color: var(--muted); }
.scout-split .scout-head .scout-photo { margin-top: 28px; }
.scout-values-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.scout-values-head > div > p { margin-bottom: 0; }
@media (max-width: 860px) {
  .scout-values-head { grid-template-columns: minmax(0, 1fr); }
  .scout-split .scout-head .scout-photo { max-width: 520px; }
}
/* Lo Scoutismo: video in alto a destra (non più fisso), il terzo paragrafo dell'apertura sotto a tutta larghezza */
.prose .scout-intro-video { position: static; }
.prose .scout-intro-more { margin-top: 1.4em; }
.scout-intro-text > p:last-child { margin-bottom: 0; }
/* Titolo dei menu a tendina («Il Gruppo», «Le unità») in viola scuro */
.mega-intro .mega-title { color: var(--viola-800); }
/* News, «Argomenti»: sul telefono solo i primi 8 (i più seguiti) */
@media (max-width: 640px) { .topic-cloud .topic:nth-child(n+9) { display: none; } }
/* Lo Scoutismo: su una colonna sola la foto di Gilwell sta al centro, con la didascalia */
@media (max-width: 860px) {
  .scout-split .scout-head .scout-photo { margin-inline: auto; }
  .scout-split .scout-head .scout-photo figcaption { text-align: center; }
}
/* Lo Scoutismo, «Le organizzazioni» su tablet e telefono: box orizzontali, logo in un riquadro quadrato a sinistra e testo a destra */
.scout-org-logo picture { display: contents; }
@media (max-width: 860px) {
  .prose .scout-orgs-grid { gap: 12px; }
  .prose a.scout-org { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; align-items: start; padding: 18px 20px 18px 18px; }
  .scout-org-logo { grid-row: 1 / span 4; display: grid; place-items: center; width: 88px; height: 88px; margin: 0; padding: 12px; border-radius: 20px 20px 20px 5px; background: var(--viola-50); }
  .prose .scout-org-logo img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .scout-org-sigla, .scout-org strong, .scout-org-text, .scout-org-go { grid-column: 2; }
  .scout-org strong { margin-top: 2px; font-size: 1.02rem; }
  .scout-org-text { margin-top: 4px; font-size: .9rem; }
  .scout-org-go { margin-top: 0; padding-top: 10px; }
}
@media (max-width: 380px) {
  .prose a.scout-org { grid-template-columns: 68px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .scout-org-logo { width: 68px; height: 68px; padding: 9px; }
}
/* Lo Scoutismo, apertura da computer: il video è alto quanto il testo accanto (colonna un po' più larga, riquadro allungato
   fino in fondo; il lettore di YouTube adatta l'anteprima) e i due blocchi sono centrati tra loro in altezza */
@media (min-width: 861px) {
  .scout-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr); align-items: stretch; }
  .scout-intro-text { align-self: center; }
  .prose .scout-intro-video { display: flex; height: 100%; align-self: stretch; }
  .prose .scout-intro-video .md-video { flex: 1; aspect-ratio: auto; min-height: 280px; }
}
/* Lo Scoutismo: la foto di Brownsea (1907) è piccola, la si mostra al massimo alla sua misura e nelle sue proporzioni */
.prose .scout-photo-old { max-width: 360px; }
.prose .scout-photo-old img { aspect-ratio: auto; height: auto; filter: contrast(1.05); }

/* Lo Scoutismo: i tre numeri su viola chiaro (stesso colore delle schede del movimento) */
.prose .scout-stats li { background: var(--viola-100); }
.scout-stats span { color: var(--text); }


/* Marchio nell'header come il vecchio logo: «GRUPPO SCOUT» sopra e «ALBENGA 5» grande, tutto maiuscolo e in grassetto,
   largo quanto la scritta sotto (colori come prima: bianco e giallo sulle foto, scuro e viola sull'header bianco) */
.brand-text { width: max-content; }
.brand-text strong { font: 800 1.5rem/.95 var(--f-head); text-transform: uppercase; letter-spacing: .01em; }
.brand-text small { font: 800 .75rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .21em; margin-bottom: 4px; }
@media (max-width: 640px) {
  .brand-text strong { font-size: 1.22rem; }
  .brand-text small { font-size: .6rem; letter-spacing: .19em; margin-bottom: 3px; }
}
/* «GRUPPO SCOUT» largo quanto «ALBENGA 5» (la spaziatura dopo l'ultima lettera si compensa col margine) */
.brand-text small { letter-spacing: .345em; margin-right: -.345em; }
/* «GRUPPO SCOUT» in due colori pieni, verde e giallo come il fazzolettone (più chiari sulle foto, così si leggono sul fondo scuro) */
.brand-text .brand-g { color: var(--verde); }
.brand-text .brand-s { color: #D9A600; }
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) {
  & .brand-text .brand-g { color: #5CBF61; }
  & .brand-text .brand-s { color: var(--giallo); }
}

/* Lo Scoutismo: da «I valori dello scoutismo» alla Legge una fascia viola chiaro larga tutto lo schermo, con i bordi alto e
   basso a strappo (come le sezioni della home); quello basso si appoggia sulla fascia viola del Motto */
.prose .scout-values-band { --torn: 24px; position: relative; z-index: 1; margin: var(--gap-block) calc(50% - 50vw) calc(var(--torn) * -1);
  padding: calc(var(--torn) + clamp(44px, 6vw, 72px)) calc(50vw - 50%) calc(var(--torn) + clamp(44px, 6vw, 72px)); background: var(--viola-100);
  -webkit-mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - 2 * var(--torn) + 2px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat;
  mask: url(../img/strappo.svg) top / 100% var(--torn) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--torn) - 1px) / 100% calc(100% - 2 * var(--torn) + 2px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat; }
.prose .scout-values-band > :first-child { margin-top: 0; }
.prose .scout-values-band + .scout-motto { margin-top: 0; }
/* dentro la fascia chiara le schede e i cerchi delle icone diventano bianchi, così si staccano dal fondo */
.prose .scout-values-band ol.law-grid li { background: #fff; }
.scout-values-band .scout-value-head .scout-value-icon { background: #fff; }
/* Lo Scoutismo: anche la fascia viola del Motto ha il bordo basso a strappo */
.prose .scout-motto { --torn: 24px; padding-bottom: calc(clamp(44px, 6vw, 72px) + var(--torn));
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--torn) + 1px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--torn) + 1px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat; }
/* Marchio: «Albenga 5» nel carattere dei titoli del sito, maiuscole e minuscole come i titoli (non tutto maiuscolo) */
.brand-text strong { text-transform: none; letter-spacing: -.02em; font-size: 1.6rem; line-height: 1; }
@media (max-width: 640px) { .brand-text strong { font-size: 1.3rem; } }
.brand-text small { letter-spacing: .19em; margin-right: -.19em; }
/* PROVA: «ALBENGA 5» in maiuscolo nel carattere dei titoli */
.brand-text strong { text-transform: uppercase; letter-spacing: -.01em; font-size: 1.5rem; }
@media (max-width: 640px) { .brand-text strong { font-size: 1.22rem; } }
.brand-text small { letter-spacing: .31em; margin-right: -.31em; }
/* «GRUPPO SCOUT»: esattamente il verde e il giallo delle linee tratteggiate del menu, su ogni sfondo */
.brand-text .brand-g { color: var(--verde); }
.brand-text .brand-s { color: var(--giallo); }
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) {
  & .brand-text .brand-g { color: var(--verde); }
  & .brand-text .brand-s { color: var(--giallo); }
}
/* Verde del logo (anello dell'emblema di Albenga 5): «GRUPPO» nel marchio e i trattini sotto la voce di menu aperta */
:root { --verde-logo: #20A067; }
.brand-text .brand-g,
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) .brand-text .brand-g { color: var(--verde-logo); }
.nav-link[aria-current="page"]::after, .has-mega.is-active > .mega-toggle::after,
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) :is(.nav-link[aria-current="page"], .has-mega.is-active > .mega-toggle)::after {
  background: repeating-linear-gradient(90deg, var(--verde-logo) 0 7px, transparent 7px 11px, var(--giallo) 11px 18px, transparent 18px 22px); }

/* Header bianco con un filo e un'ombra sotto il bordo, ben visibili anche sulle pagine bianche mentre si scorre (sopra le foto resta trasparente) */
.site-header, .site-header.is-scrolled { background: #fff; box-shadow: 0 1px 0 rgba(36,19,63,.12), 0 6px 18px rgba(36,19,63,.26); }

/* Eventi: iscrizione al calendario di ogni unità (Google Calendar oppure iPhone, Mac e Outlook) */
.gcal-units { margin-top: clamp(28px, 4vw, 44px); }
.gcal-units h3 { margin: 0 0 4px; font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--ink); }
.gcal-units > p { margin: 0 0 18px; color: var(--muted); max-width: 70ch; }
.gcal-unit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.gcal-unit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; background: #fff; border-radius: 16px; border: 1px solid var(--line); border-left: 6px solid var(--u); box-shadow: 0 2px 10px rgba(52, 28, 91, .06); }
.gcal-unit-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gcal-unit-name .unit-icon { width: 34px; height: 34px; }
.gcal-unit-name strong { font-size: 1.02rem; color: var(--ink); }
.gcal-unit-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.gcal-unit-btns .btn { min-height: 38px; padding: 0 14px; font-size: .88rem; gap: 6px; }
.gcal-unit-btns .icon { width: 16px; height: 16px; }
.unit-giallo .gcal-unit-btns .btn-primary { background: var(--giallo); color: var(--ink); }
.gcal-unit-btns .btn-primary { background: var(--u-ink, var(--viola)); }
.gcal-unit-btns .btn-ghost { color: var(--u-ink, var(--viola)); }
/* Calendario del Gruppo: marrone, come il colore principale del vecchio albenga5.org; la Co.Ca. resta viola */
.gcal-unit.unit-marrone { --u: #452200; --u-ink: #452200; --u-100: #F1E7DD; }
.gcal-unit.unit-viola .gcal-unit-btns .btn-primary { background: var(--viola); }

/* Eventi: l'elenco viene prima, con il bordo a carta strappata in basso sopra il calendario di Gruppo (niente strappo in alto);
   elenco in viola chiaro, calendario su bianco */
.events-list-section { --torn: 24px; z-index: 2; margin-top: 0; margin-bottom: calc(var(--torn) * -1);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--torn) + 1px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--torn) + 1px) no-repeat, url(../img/strappo-sotto.svg) bottom / 100% var(--torn) no-repeat;
  background: var(--viola-100); }
.gcal-band { position: relative; z-index: 1; margin-top: 0; -webkit-mask: none; mask: none; background: #fff; }

/* Foto prima del footer nelle altre pagine: inquadrature */
.page-photo-band img[src*="gruppo-pace"] { object-position: center 60%; }
.page-photo-band img[src*="campi-lago-alzabandiera"] { object-position: center 62%; }
.page-photo-band img[src*="storia-cerimonia-scout-nel-bosco"] { object-position: center 55%; }
.page-photo-band img[src*="contatti-cerchio-in-valle-di-montagna"] { object-position: center 70%; } /* Cronistoria del Gruppo: il cerchio sul prato della valle, con le montagne */
.page-photo-band img[src*="reparto-in-cammino-nella-valle"] { object-position: center 62%; } /* Uniforme E/G: le guide in cammino e la fila nella valle */
.page-photo-band img[src*="eventi-gioco-sul-prato-in-alta-montagna"] { object-position: center 92%; } /* pagina di un evento: la foto sale nel riquadro, i ragazzi sul prato si vedono interi */
.page-hero-img[src*="privacy-cerchio-in-piazza"] { object-position: center 60%; } /* la cattedrale e il cerchio delle persone */
.page-photo-band img[src*="accessibilita-corsa-in-piazza"] { object-position: center 48%; } /* chi corre resta intero nella fascia */
.page-photo-band img[src*="privacy-cerchio-con-il-tricolore"] { object-position: center 65%; } /* il cerchio in rosso e l'inizio del tricolore */
.page-photo-band img[src*="cookie-cerchio-al-prato"] { object-position: center 58%; } /* tutto il cerchio dentro la fascia */
.page-photo-band img[src*="clan-route-codera"] { object-position: center 70%; }
.page-photo-band img[src*="clan-route-nazionale-2014"] { object-position: center 44%; } /* i volti al centro della fascia */
.page-photo-band img[src*="news-scout-in-cammino-sul-crinale"] { object-position: center 60%; }
/* Eventi: «Iscriviti ai calendari» scorre ai pulsanti delle unità, sotto la barra fissa in alto */
#calendari-unita { scroll-margin-top: 130px; }
.page-photo-band img[src*="eventi-uscita-sulla-neve"] { object-position: center 40%; }

/* «GRUPPO SCOUT» con il verde e il giallo esatti del logo a colori (albenga5-colore.png), in ogni stato della testata:
   sulle foto, su fondo chiaro, con il menu aperto. Lettere un po' più piene perché il colore si legga come nel logo. */
:root { --verde-logo: #20A067; --giallo-logo: #FDC400; }
.site-header .brand-text small { font-weight: 900; }
.site-header .brand-text .brand-g { color: var(--verde-logo) !important; }
.site-header .brand-text .brand-s { color: var(--giallo-logo) !important; }
.nav-link[aria-current="page"]::after, .has-mega.is-active > .mega-toggle::after,
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) :is(.nav-link[aria-current="page"], .has-mega.is-active > .mega-toggle)::after {
  background: repeating-linear-gradient(90deg, var(--verde-logo) 0 7px, transparent 7px 11px, var(--giallo-logo) 11px 18px, transparent 18px 22px); }

/* Foto prima del footer: sale di quanto è arrotondata, così negli angoli in alto si vede la sezione sopra e non il bianco della pagina
   (resta sotto il bordo strappato del footer: stesso z-index, il footer viene dopo) */
.page-photo-band { z-index: 1; margin-top: calc(var(--soft-r) * -1); }

/* Menu del telefono: «Iscriviti» come le altre voci (stesso carattere, stessa altezza di riga), ma in viola per distinguersi */
@media (max-width: 1180px) {
  .mobile-extra { display: block; padding-top: 12px; }
  .mobile-extra a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 16px; border: 0; border-radius: 14px;
    font: 700 1.15rem/1 var(--f-head, "Schibsted Grotesk"), var(--f-body); color: #fff; background: var(--viola); text-decoration: none; }
  .mobile-extra a::after { content: "→"; font-weight: 700; color: var(--giallo-logo, var(--giallo)); }
  .mobile-extra a:hover, .mobile-extra a:focus-visible { background: var(--viola-800); color: #fff; }
}

/* Home, su telefono e tablet: il riquadro Comunità Capi come quelli delle unità, con la foto ben visibile,
   la sfumatura scura dal basso, il testo bianco e il bordo viola in fondo */
@media (max-width: 860px) {
  .section.path .coca-banner { justify-content: flex-end; min-height: 460px; color: #fff; border: 0; border-bottom: 6px solid var(--viola); border-radius: 26px 26px 26px 6px; box-shadow: var(--shadow);
    background: linear-gradient(0deg, rgba(25,15,38,.92) 0%, rgba(25,15,38,.62) 42%, rgba(25,15,38,.12) 78%, rgba(25,15,38,0) 100%), url(../img/varianti/foto/coca-50anni-1280.webp) center 35% / cover no-repeat, var(--viola-900); }
  @media (max-width: 500px) { .section.path .coca-banner { background-image: linear-gradient(0deg, rgba(25,15,38,.92) 0%, rgba(25,15,38,.62) 42%, rgba(25,15,38,.12) 78%, rgba(25,15,38,0) 100%), url(../img/varianti/foto/coca-50anni-960.webp); } }
  .section.path .coca-banner::before { border-color: rgba(255,255,255,.55); border-radius: 18px 18px 18px 2px; }
  .section.path .coca-banner .unit-icon { background: #fff; width: 56px; height: 56px; }
  .section.path .coca-banner h3 { color: #fff; }
  .section.path .coca-banner .coca-body p:not(.kicker) { color: rgba(255,255,255,.85); }
  .section.path .coca-banner:hover { color: #fff; }
}

/* Home, «In programma»: due pulsanti brevi che stanno sempre nel riquadro */
.meet-events .meet-actions { flex-wrap: wrap; }
.meet-events .meet-actions .btn { font-size: .86rem; padding: .7em 1.1em; }
.meet-events .meet-actions .btn .icon { width: 17px; height: 17px; }

/* Footer su telefono: «Resta aggiornato», calendario e social centrati */
@media (max-width: 640px) {
  .footer-top { flex-direction: column; justify-content: center; text-align: center; }
  .newsletter-actions { justify-content: center; }
  .newsletter-actions .footer-social { justify-content: center; margin-left: 0; }
}

/* Footer su telefono: «Il gruppo» e «Utilità» affiancati; logo e collegamenti utili a tutta larghezza */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-grid > .footer-brand, .footer-grid > .footer-ext { grid-column: 1 / -1; }
}

/* Footer su telefono: tutto centrato, con lo stesso spazio a destra e a sinistra
   (logo e indirizzo, le due colonne affiancate e il riquadro dei collegamenti) */
@media (max-width: 640px) {
  .footer-grid { text-align: center; justify-items: center; }
  .footer-grid > div { width: 100%; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand img, .footer-brand .footer-logo { align-self: center; margin-left: auto; margin-right: auto; }
  .footer-grid ul { justify-items: center; }
  .footer-ext { box-sizing: border-box; }
  .footer-ext ul { justify-items: center; }
}

/* Home, su telefono e tablet: Comunità Capi disposta come i riquadri delle unità.
   Età in alto a sinistra sulla foto; in basso il simbolo nel cerchio bianco, il titolo, il testo e la freccia a destra */
@media (max-width: 860px) {
  .section.path .coca-banner { min-height: 400px; justify-content: flex-end; align-items: flex-start; gap: 12px; padding: 22px 22px 24px; }
  .section.path .coca-banner .coca-age { position: absolute; top: 22px; left: 22px; z-index: 3; margin: 0; }
  .section.path .coca-banner .coca-body { flex: none; position: static; }
  .section.path .coca-banner .coca-body p:not(.kicker) { padding-right: 44px; }
  .section.path .coca-banner .unit-icon { position: relative; z-index: 2; width: 50px; height: 50px; border-radius: 50%; background: #fff; -webkit-mask: none; mask: none; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
  .section.path .coca-banner .unit-icon::after { content: ""; position: absolute; inset: 4px; background: var(--viola); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
  .section.path .coca-banner .coca-body, .section.path .coca-banner .path-go { z-index: 2; }
  .section.path .coca-banner h3 { margin-bottom: .25em; }
}
@media (max-width: 640px) {
  .section.path .coca-banner { min-height: 0; aspect-ratio: 4 / 4.4; }
}

/* Footer: indirizzo della sede con il link a Google Maps; su telefono il codice fiscale va a capo intero */
.footer-brand .footer-address { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.footer-brand .footer-address:hover { color: var(--giallo); text-decoration-color: currentColor; }
.footer-brand .footer-address .icon { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; color: var(--giallo); }
@media (max-width: 760px) {
  .footer-cf { display: block; }
  .footer-cf .sep { display: none; }
}

/* Iscrizioni, «Cos'è lo scautismo» su telefono: spazio sopra e sotto più piccolo e uguale (il titolo ha già un po' d'aria in alto),
   i quattro collegamenti staccati dalla foto e divisi su due colonne */
@media (max-width: 640px) {
  .signup-scout { padding: 36px 0 46px; }
  .signup-scout .signup-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
  .signup-scout .signup-links a { padding: 12px; gap: 9px; font-size: .92rem; line-height: 1.2; border-radius: 14px; }
  .signup-scout .signup-links .icon { width: 26px; height: 26px; padding: 6px; }
}

/* Footer: «Calendario degli eventi» al passaggio del mouse diventa giallo con il testo scuro (prima il giallo dei link finiva sul bianco) */
.site-footer .btn-outline-light:hover, .site-footer .btn-outline-light:focus-visible { background: var(--giallo); border-color: var(--giallo); color: var(--ink); text-decoration: none; }

/* Iscrizioni, «Ulteriori info»: la mappa della libreria grande come prima, con gli angoli del riquadro */
.info-point .shop-map { min-height: 0; height: 220px; border-radius: 10px; box-shadow: none; }
@media (min-width: 861px) { .signup-form-layout .info-point .shop-map { height: 100%; min-height: 200px; } }

/* Banner dei cookie statistici (assets/js/consent.js): in basso a sinistra, lontano da WhatsApp e «Torna su»;
   su telefono a tutta larghezza. Non blocca la pagina: si può continuare a navigare senza scegliere (resta tutto spento) */
.cookie-banner { position: fixed; left: clamp(14px, 2.5vw, 28px); bottom: clamp(14px, 2.5vw, 28px); z-index: 70; width: min(440px, calc(100% - 2 * clamp(14px, 2.5vw, 28px)));
  background: var(--paper); color: var(--text); border-top: 5px solid var(--viola); border-radius: var(--radius); box-shadow: 0 2px 6px rgba(36,19,63,.12), 0 18px 48px rgba(36,19,63,.24);
  padding: 22px 24px 20px; font-size: .95rem; line-height: 1.5; }
.cookie-banner[hidden] { display: none; }
.cookie-banner:focus { outline: none; }
.cookie-banner:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }
.cookie-banner h2 { font-size: 1.15rem; margin: 0 32px .45em 0; letter-spacing: -.01em; }
.cookie-banner p { margin: 0 0 16px; }
.cookie-banner p a { color: var(--viola); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions .btn { flex: 1 1 0; padding: .8em 1em; }
/* La X ha la stessa evidenza dei due pulsanti, come chiede il Garante: stesso fondo viola e testo bianco */
.cookie-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--viola); color: #fff; cursor: pointer; }
.cookie-close:hover, .cookie-close:focus-visible { background: var(--viola-800); color: #fff; }
@media (max-width: 640px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 18px 18px 16px; font-size: .9rem; }
}
/* Cookie policy: la prima colonna dei servizi esterni ha testi lunghi e va a capo; su telefono ogni riga diventa una scheda
   (la prima cella fa da titolo, le altre hanno l'etichetta della colonna presa da data-label) */
.cookie-table td:first-child { white-space: normal; min-width: 8em; }
@media (max-width: 640px) {
  .cookie-table { overflow: visible; }
  .cookie-table table, .cookie-table tbody, .cookie-table tr, .cookie-table td { display: block; }
  .cookie-table thead { display: none; }
  .cookie-table tr + tr { border-top: 1px solid var(--line); }
  .cookie-table tbody tr:nth-child(even) td { background: none; }
  .cookie-table td { border-top: 0; padding: 4px 16px; }
  .cookie-table td:first-child { padding-top: 14px; min-width: 0; }
  .cookie-table td:last-child { padding-bottom: 14px; }
  .cookie-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink); }
}

/* Storia: linea del tempo dei periodi in cima a ogni pagina (app/data/storia.php), al posto del sottomenu della sezione.
   Sul telefono e sul tablet una colonna con gli anni a sinistra; sul computer una riga con i pallini su una linea */
.history-periods { margin: 0 0 36px; padding: 18px 20px 14px; border-radius: 18px; background: var(--viola-50); }
.history-periods-title { margin: 0 0 10px; font: 700 .76rem/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.history-periods ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.history-periods ol::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px; background: var(--viola-300); }
.history-periods a { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 7px 10px 7px 26px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.history-periods a::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--viola); box-sizing: border-box; }
.history-periods .hp-years { font: 800 .84rem/1.25 var(--f-head); color: var(--viola); }
.history-periods .hp-title { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.history-periods a:hover .hp-title { text-decoration: underline; text-underline-offset: 3px; }
/* pagina aperta: pallino giallo più grande con un alone e titolo viola sottolineato in giallo, senza sfondo (la linea resta visibile) */
.history-periods a[aria-current]::before { width: 18px; height: 18px; top: 9px; left: -3px; background: var(--giallo); border: 3px solid var(--viola); box-shadow: 0 0 0 4px rgba(253,197,13,.35); }
.history-periods a[aria-current] .hp-title { color: var(--viola); font-weight: 800; text-decoration: underline; text-decoration-color: var(--giallo); text-decoration-thickness: 3px; text-underline-offset: 4px; }
@media (min-width: 1100px) {
  .history-periods ol { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .history-periods ol::before { left: 6px; right: 6px; top: 16px; bottom: auto; width: auto; height: 2px; }
  .history-periods a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 30px 10px 10px; }
  .history-periods a::before { left: 10px; top: 11px; }
  .history-periods a[aria-current]::before { left: 7px; top: 8px; }
  .history-periods .hp-title { font-size: .88rem; }
}

/* La nostra storia: cronologia breve dopo la citazione di apertura (app/data/storia.php) */
.history-timeline { margin: 8px 0 40px; padding: clamp(22px, 3vw, 34px); border-radius: 20px; background: var(--tint); }
.prose .history-timeline-head { margin-bottom: 20px; }
.prose .history-timeline-head .kicker { margin: 0 0 6px; }
.prose .history-timeline-head h2 { margin: 0; }
.prose ol.history-timeline-list { position: relative; list-style: none; margin: 0; padding: 0; }
.prose ol.history-timeline-list::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 12px; width: 2px; background: var(--viola-300); }
.prose ol.history-timeline-list li { position: relative; display: grid; gap: 2px; margin: 0; padding: 0 0 18px 30px; }
.prose ol.history-timeline-list li:last-child { padding-bottom: 0; }
.prose ol.history-timeline-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--viola); box-sizing: border-box; }
.prose ol.history-timeline-list li.is-key::before { left: -3px; top: 2px; width: 18px; height: 18px; background: var(--giallo); border: 3px solid var(--viola); }
.history-timeline .ht-when { font: 800 .95rem/1.35 var(--f-head); color: var(--viola); }
.history-timeline li.is-key .ht-when { font-size: 1.05rem; }
.history-timeline li p { margin: 0; }
@media (min-width: 720px) {
  .prose ol.history-timeline-list li { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; }
}

/* Capitoli della storia (history_chapter_html() in partials.php): apertura più grande, foto d'archivio con didascalia che si
   alternano a destra e a sinistra, l'anno accanto ai paragrafi che lo aprono, citazioni come fogli d'archivio */
.prose .history-kicker { margin: 4px 0 10px; }
.prose .history-lead { font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.prose .history-lead::first-letter { float: left; margin: .08em .1em 0 0; font: 800 3.4em/.8 var(--f-head); color: var(--viola); }
.prose .history-photo { margin: 0 0 24px; }
.prose .history-photo a { display: block; }
/* riga foto + testo (history-pair): su telefono la foto sotto il testo, da 760 px affiancati, a zig-zag, centrati in altezza */
.history-pair { margin: clamp(8px, 2vw, 20px) 0 1.2em; }
.history-pair-text > :last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .history-pair { display: grid; grid-template-columns: minmax(0, 1fr) min(42%, 420px); gap: clamp(24px, 3.5vw, 44px); align-items: center; }
  .history-pair-left { grid-template-columns: min(42%, 420px) minmax(0, 1fr); }
  .history-pair-left .history-photo { grid-row: 1; grid-column: 1; transform: rotate(-.8deg); }
  .history-pair-left .history-pair-text { grid-column: 2; }
  .history-pair-right .history-photo { transform: rotate(.8deg); }
  .prose .history-pair .history-photo { margin: 0; }
}
.prose .history-photo img { display: block; width: 100%; border-radius: 14px; border: 5px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(36,19,63,.12); filter: sepia(.12); }
.prose .history-photo figcaption { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--giallo); font-size: .9rem; line-height: 1.4; color: var(--muted); }
.prose .history-dated { position: relative; }
.history-year { display: inline-block; margin-right: 10px; padding: 1px 10px; border-radius: 999px; background: var(--viola); color: var(--giallo); font: 800 .82rem/1.6 var(--f-head); letter-spacing: .04em; vertical-align: 2px; }
/* elenchi: testo normale, senza riquadro (accanto a una foto il riquadro le passerebbe sotto) */
.prose ul.history-list { display: flow-root; margin: 0 0 1.2em; }
.prose blockquote.history-letter { clear: both; position: relative; margin: 1.8em 0; padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px) clamp(18px, 2.5vw, 26px); border: 0; border-radius: 6px 20px 20px 20px; background: #FBF7EC; box-shadow: inset 0 0 0 1px #EDE3C8, 0 8px 20px rgba(36,19,63,.06); font-style: normal; }
.prose blockquote.history-letter::before { content: "“"; position: absolute; top: -18px; left: 18px; font: 800 4rem/1 var(--f-head); color: var(--giallo); }
.prose blockquote.history-letter p { margin: 0 0 .7em; font-style: italic; color: var(--ink); }
.prose blockquote.history-letter p:last-child { margin-bottom: 0; }
.prose blockquote.history-letter .history-letter-note { font-style: normal; font-size: .92rem; color: var(--muted); }

/* Cronistoria del Gruppo (views/page.php): un decennio per blocco, con il numero grande, la linea del tempo e poi lo slider
   a tutta pagina con le foto di quegli anni (app/data/storia.php, 'decenni') */
.chrono-decade { margin: clamp(28px, 4vw, 44px) 0; padding: clamp(22px, 3vw, 34px); border-radius: 20px; background: var(--tint); scroll-margin-top: calc(var(--header-h, 90px) + 16px); }
.chrono-decade:first-child { margin-top: 8px; }
.chrono-decade-head { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 24px); margin-bottom: 24px; }
.chrono-decade-num { flex: none; display: grid; place-items: center; width: clamp(72px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--viola); color: var(--giallo); font: 800 clamp(1.5rem, 3vw, 2.1rem)/1 var(--f-head); letter-spacing: -.02em; box-shadow: 0 0 0 4px var(--tint), 0 0 0 6px var(--giallo); }
.prose .chrono-decade-head .kicker { margin: 0 0 4px; }
.prose .chrono-decade-head h2 { margin: 0; }
.chrono-decade .ht-when { font: 800 .95rem/1.35 var(--f-head); color: var(--viola); }
.chrono-decade li p { margin: 0; }
.prose ol.chrono-list li.chrono-note { grid-template-columns: minmax(0, 1fr); }
.prose ol.chrono-list li.chrono-note::before { display: none; }
/* lo slider taglia la pagina tra un decennio e l'altro: nessun margine in più oltre a quello dei blocchi */
.chrono-gallery.page-gallery { margin-block: 0; }
.chrono-gallery-kicker { display: block; margin-bottom: 4px; font: 800 .78rem/1.3 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--giallo); }
.chrono-gallery + .prose:empty { display: none; }

/* Home: la fascia delle news è cucita alla sezione delle unità, non strappata. In alto una striscia lilla del colore con cui
   finisce la sezione sopra (#CBBCE5), poi il viola; lo zigzag giallo passa a cavallo dei due colori, come una cucitura */
.section.path + .news-band { margin-top: 0; background: linear-gradient(#CBBCE5 0 9px, var(--viola) 9px); } /* sotto resta il bordo frastagliato (.news-band, strappo-sotto.svg) */
.section.path + .news-band::before { top: 1px; height: 16px; background: var(--giallo); }

/* San Paolo (clan/san-paolo): pagina a blocchi, contenuti in app/data/san-paolo.php e app/views/san-paolo.php */
.page-hero-img[src*="clan-route-laguna-ombre"] { object-position: center 82%; } /* San Paolo: la laguna in alto, le ombre in basso a destra */
.page-hero-img[src*="clan-route-sentiero-zaino"] { object-position: 70% 44%; } /* il rover intero e le colline; su telefono resta nel riquadro */
.sp-intro { display: grid; gap: 20px clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 760px) { .sp-intro { grid-template-columns: minmax(0, 1fr) 240px; } }
.prose .sp-icon { display: block; width: 100%; max-width: 240px; height: auto; margin-inline: auto; border-radius: 0; }
.sp-facts { margin-top: 28px; border-radius: 20px; background: var(--u-100); }
.sp-facts dl { display: grid; gap: 2px 28px; margin: 0; padding: 12px 24px 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.sp-facts dl div { padding: 9px 0; }
.sp-facts dt { font: 800 .78rem/1.3 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink); }
.sp-facts dd { margin: 2px 0 0; font-size: .97rem; line-height: 1.45; color: var(--ink); }
.sp-head { margin-bottom: 18px; }
/* Baden-Powell: capitoli della vita con righe di lunghezza comoda */
.bp-chapter { margin-top: clamp(44px, 6vw, 72px); scroll-margin-top: calc(var(--header-h, 90px) + 16px); }
/* banner colorato di ogni capitolo, nello stile della fascia viola di Lo Scoutismo: testo su colore scuro, foto a fianco */
.bp-banner { display: grid; overflow: hidden; border-radius: 26px 26px 26px 6px; background: var(--u-ink); color: #fff; border-bottom: 6px solid var(--verde); box-shadow: 0 3px 0 var(--giallo), var(--shadow); }
.bp-banner-text { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(26px, 4vw, 44px); }
.bp-banner-text::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255,255,255,.35); border-radius: 18px 18px 18px 2px; pointer-events: none; }
.bp-banner-when { position: relative; font: 800 clamp(1.05rem, 1.8vw, 1.25rem)/1.2 var(--f-head); letter-spacing: .04em; color: var(--giallo); }
.prose .bp-banner h2 { position: relative; margin: 0; color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; }
.prose .bp-banner-photo { position: relative; margin: 0; min-height: 220px; }
.prose .bp-banner-photo img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; object-position: center 25%; }
.bp-banner-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px 10px; font-size: .82rem; line-height: 1.35; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
@media (min-width: 760px) { .bp-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 270px; } }
/* le tappe della vita: una pista tratteggiata con una fermata per tappa; chiusa è una riga, aperta ha un fondo chiaro nel suo colore */
.bp-vita-note { margin: -6px 0 0; color: var(--muted); }
.bp-trail { position: relative; margin-top: 14px; }
.bp-trail::before { content: ""; position: absolute; left: 22px; top: 30px; bottom: 30px; border-left: 2px dashed color-mix(in srgb, var(--viola) 35%, transparent); }
.bp-tappa { position: relative; border-radius: 18px; transition: background-color .2s; scroll-margin-top: calc(var(--header-h, 90px) + 12px); }
.bp-tappa[open] { background: color-mix(in srgb, var(--u-100) 50%, #fff); }
.bp-tappa summary { display: flex; align-items: center; gap: 16px; padding: 15px 18px 15px 12px; cursor: pointer; list-style: none; border-radius: 18px; }
.bp-tappa summary::-webkit-details-marker { display: none; }
.bp-tappa summary:hover h3 { color: var(--u-ink); }
.bp-tappa summary:focus-visible { outline: 3px solid var(--u-ink); outline-offset: 2px; }
.bp-tappa summary::after { content: "+"; margin-left: auto; font: 700 1.5rem/1 var(--f-body); color: var(--u-ink); }
.bp-tappa[open] summary::after { content: "−"; }
.bp-stop { position: relative; flex: none; width: 22px; height: 22px; border: 3px solid var(--u); border-radius: 50%; background: #fff; transition: background-color .2s; }
.bp-tappa[open] .bp-stop { background: var(--u); }
.bp-tappa.is-casa .bp-stop::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--u); }
.bp-tappa.is-casa[open] .bp-stop::after { background: #fff; }
.bp-tappa-name { display: grid; gap: 1px; min-width: 0; }
.bp-tappa-when { font: 700 .9rem/1.3 var(--f-head); color: var(--u-ink); }
.prose .bp-tappa h3 { margin: 0; font-size: clamp(1.12rem, 1.8vw, 1.32rem); line-height: 1.25; transition: color .15s; }
@media (min-width: 700px) { .bp-tappa-name { grid-template-columns: 7.2em minmax(0, 1fr); align-items: baseline; gap: 12px; } }
.bp-tappa-body { padding: 2px 24px 26px 50px; animation: bp-apri .22s ease-out; }
@keyframes bp-apri { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .bp-tappa, .bp-stop { transition: none; } .bp-tappa-body { animation: none; } }
.bp-tappa-grid { display: grid; gap: 20px clamp(24px, 4vw, 44px); align-items: start; }
@media (min-width: 900px) { .bp-tappa-grid { grid-template-columns: minmax(0, 1fr) 300px; } }
.bp-tappa-text p { max-width: 70ch; }
.bp-tappa-text p:last-child { margin-bottom: 0; }
.bp-note { display: grid; gap: 12px; }
.bp-nota { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--u) 28%, transparent); border-radius: 14px; background: #fff; }
.prose .bp-nota h4 { margin: 0 0 5px; font: 800 1rem/1.3 var(--f-head); color: var(--u-ink); }
.prose .bp-nota p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--text); }
.bp-tappa-photos { columns: 3 190px; column-gap: 14px; margin-top: 24px; }
.prose .bp-tappa-photos .bp-photo { break-inside: avoid; margin: 0 0 14px; }
@media (max-width: 559px) { .bp-tappa-body { padding: 0 16px 22px 16px; } }
/* il video accanto al suo titolo, su un fondo chiaro */
.bp-video-panel { display: grid; gap: 20px clamp(24px, 4vw, 48px); align-items: center; padding: clamp(20px, 3vw, 34px); border-radius: 24px; background: var(--viola-100); }
@media (min-width: 860px) { .bp-video-panel { grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); } }
.prose .bp-video-text p { margin: 0; }
.prose .bp-video-text .sp-head { margin-bottom: 12px; }
/* le date: il crema delle polaroid della home */
.history-timeline.bp-timeline { background: #F5ECD7; }
/* citazioni */
.prose .bp-quotes { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
@media (min-width: 640px) { .prose .bp-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .prose .bp-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prose .bp-quotes li { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; margin: 0; padding: 24px; border-radius: 22px 22px 22px 6px; border-bottom: 5px solid var(--u); background: var(--u-100); }
.prose .bp-quotes blockquote { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: italic 600 1.08rem/1.45 var(--f-head); color: var(--ink); }
.prose .bp-quotes blockquote::before, .prose .bp-quotes blockquote::after { content: none; }
.prose .bp-quotes cite { font-style: normal; font-size: .82rem; font-weight: 700; color: var(--u-ink); }
.unit-giallo .bp-box h3, .prose .unit-giallo cite { color: var(--ink); }
/* bibliografia: schede a forma di libro che scorrono */
.bp-books-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.bp-books-note { color: var(--muted); font-size: .95rem; }
.prose .bp-books-download { margin: 0 0 6px; }
.prose .bp-books-download .btn { text-decoration: none; }
.prose .bp-books-track { gap: 16px; margin: 18px 0 0; padding: 4px 4px 14px; }
.prose .bp-books-track:focus-visible { outline: 3px solid var(--viola); outline-offset: 2px; border-radius: 12px; }
.prose .bp-books-track > li { width: clamp(216px, 26vw, 250px); margin: 0; }
.bp-book { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 300px; padding: 22px 20px 20px 30px; border-radius: 6px 16px 16px 6px; background: var(--u-ink); color: #fff; box-shadow: var(--shadow); }
.bp-book::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; width: 3px; background: rgba(255,255,255,.35); }
/* la copertina sta in alto: dove non c'è una copertina d'epoca resta un riquadro vuoto più chiaro, così le schede restano allineate */
.bp-book-cover { display: grid; place-items: center; height: 196px; margin-bottom: 6px; border-radius: 6px; background: rgba(255,255,255,.1); }
.prose .bp-book-cover img { display: block; max-width: 100%; max-height: 196px; width: auto; height: auto; margin: 0; border-radius: 3px; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.bp-book-noicon { display: block; width: 52px; height: 52px; color: rgba(255,255,255,.55); }
.bp-book-noicon svg, .bp-book-noicon .unit-icon { display: block; width: 100%; height: 100%; }
.bp-book-year { font: 800 1.5rem/1 var(--f-head); color: var(--giallo); }
.prose .bp-book h3 { margin: 0; color: #fff; font-size: 1.12rem; line-height: 1.25; }
.prose .bp-book p { margin: 0; color: #fff; font-size: .92rem; line-height: 1.4; }
.prose .bp-book .bp-book-it { font-style: italic; font-weight: 700; }
.bp-book-type { margin-top: auto; padding-top: 10px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--giallo); }
.prose .scout-mission.bp-mission { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px clamp(18px, 3vw, 34px); align-items: center; margin-top: 30px; background: var(--verde-100); color: var(--ink); border-bottom: 0; box-shadow: none; }
.bp-mission-icon { grid-row: span 2; display: grid; place-items: center; width: clamp(60px, 8vw, 84px); aspect-ratio: 1; border-radius: 50%; background: #fff; }
.prose .bp-mission-icon img { width: 70%; height: auto; margin: 0; border-radius: 0; }
.prose .scout-mission.bp-mission cite { margin-top: 8px; }
.prose .scout-mission.bp-mission::before { content: none; }
.prose .scout-mission.bp-mission cite { color: var(--verde-ink); }
.bp-quotes-more { margin: 22px 0 0; }
/* La Partenza: la citazione nel colore del Clan */
.page-clan-la-partenza .prose .scout-mission.bp-mission { background: var(--u-100); }
.page-clan-la-partenza .prose .scout-mission.bp-mission p { font-size: clamp(1rem, 1.5vw, 1.15rem); }
.page-clan-la-partenza .prose .scout-mission.bp-mission cite { color: var(--u-ink); }
.bp-mission-icon { color: var(--u-ink, var(--viola)); }
.bp-mission-icon svg { display: block; width: 58%; height: 58%; }
/* la forcola, simbolo del cammino di rover e scolte, accanto al titolo */
.pa-title { display: flex; align-items: center; gap: 16px; margin-bottom: .6em; }
.pa-title .pa-icon { flex: none; width: 66px; height: 66px; background: var(--u-100); }
.pa-title .pa-icon svg { width: 38px; height: 38px; }
.prose .pa-title h2 { margin-bottom: 0; }
.prose .pa-scelte { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
@media (min-width: 860px) { .prose .pa-scelte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prose .pa-scelte li { margin: 0; padding: 24px; border-radius: 22px 22px 22px 6px; background: var(--u-100); }
.prose .pa-scelte h3 { margin: 14px 0 8px; font-size: 1.2rem; }
.prose .pa-scelte p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--ink); }
.pa-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--u-ink); }
.pa-icon svg { display: block; width: 24px; height: 24px; }
.prose .pa-fine { margin: 20px 0 0; max-width: 72ch; font-weight: 600; color: var(--ink); }
.prose .pa-fasi { counter-reset: fase; list-style: none; display: grid; gap: 12px; margin: 28px 0 0; padding: 0; }
@media (min-width: 640px) { .prose .pa-fasi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .prose .pa-fasi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prose .pa-fasi li { counter-increment: fase; display: grid; gap: 4px; margin: 0; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--u) 28%, transparent); border-radius: 14px; }
.prose .pa-fasi li strong::before { content: counter(fase) ". "; color: var(--u-ink); }
.prose .pa-fasi li strong { font: 800 1.08rem/1.25 var(--f-head); color: var(--ink); }
.pa-fasi span { font-size: .95rem; line-height: 1.45; }
.prose .pa-sub { margin: 34px 0 12px; font-size: 1.25rem; }
.prose .pa-scogli { list-style: none; margin: 0; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--u) 28%, transparent); }
.prose .pa-scogli li { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.prose .pa-scogli li + li { border-top: 1px solid color-mix(in srgb, var(--u) 20%, transparent); }
.pa-scogli li > span { padding: 13px 18px; }
.pa-scogli li > span + span { background: var(--u-100); color: var(--ink); font-weight: 600; }
.pa-scogli .pa-scogli-head span { font: 800 .95rem/1.2 var(--f-head); color: var(--u-ink); }
.prose .pa-fonte { margin: 16px 0 0; font-size: .88rem; color: var(--muted); }
.prose .pa-preghiera { margin: 18px 0; padding: 18px 22px; border: 0; border-left: 4px solid var(--u); border-radius: 0 14px 14px 0; background: var(--u-100); font-style: italic; color: var(--ink); }
/* scheda iniziale: un'icona accanto a ogni voce */
.bp-facts dl div { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; align-items: start; }
.bp-fact-icon { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--viola); }
.bp-fact-icon svg, .bp-fact-icon .unit-icon { display: block; width: 18px; height: 18px; }
.unit-faq.bp-faq { background: none; } /* resta il colore della pagina, senza un rettangolo bianco */
.prose + .unit-faq.bp-faq, .bp-faq { scroll-margin-top: calc(var(--header-h, 90px) + 16px); }
/* pagina delle frasi */
.prose .fr-quotes { margin-top: 20px; }
.prose .fr-quotes .fr-en { margin: 0; font-size: .86rem; line-height: 1.4; font-style: italic; color: var(--text); }
.prose .fr-sources { list-style: none; display: grid; gap: 12px; margin: 16px 0 0; padding: 0; }
@media (min-width: 640px) { .prose .fr-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prose .fr-sources li { display: grid; gap: 2px; margin: 0; padding: 14px 18px; border-left: 5px solid var(--u, var(--viola)); border-radius: 0 14px 14px 0; background: var(--u-100, var(--viola-100)); }
.fr-sources span { font-size: .92rem; color: var(--text); }
.bp-video { border-radius: 16px; overflow: hidden; background: #000; }
/* cover: il video è già 16:9, la copertina è più larga e così riempie il riquadro senza bande nere */
.bp-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.prose .bp-photo { margin: 0; }
.prose .bp-photo img { display: block; width: 100%; height: auto; margin: 0; border-radius: 14px; }
.bp-photo figcaption { margin-top: 8px; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.prose .bp-intro .sp-icon { border-radius: 18px; }
.prose .bp-links { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; margin: 32px 0 0; padding: 0; }
.prose .bp-links li { margin: 0; }
.prose .bp-links .btn { text-decoration: none; }
.prose .sp-head .kicker { color: var(--u-ink); margin: 0 0 6px; }
.prose .sp-head h2 { margin: 0; }
.sp-note { color: var(--muted); font-size: .95rem; }
.sp-ref { white-space: nowrap; font-size: .85rem; font-weight: 600; color: var(--muted); }

.sp-why { display: grid; gap: 28px clamp(28px, 4vw, 52px); align-items: center; }
.sp-why .unit-faq-photo { position: relative; top: auto; }
.prose .sp-why .unit-faq-photo > img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 22px; }
/* una colonna sola: la foto verticale resta intera ma non più larga di così, se no diventa altissima */
@media (max-width: 859px) { .sp-why > div:first-child { width: 100%; max-width: 440px; margin-inline: auto; } }
.sp-caption { margin: 8px 0 0; font-size: .88rem; line-height: 1.45; color: var(--muted); }
@media (min-width: 860px) { .sp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-pray { display: grid; gap: 28px; align-items: start; }
/* su computer foto e didascalia sono alte quanto la preghiera: è il riquadro della preghiera a dare l'altezza alla riga */
@media (min-width: 900px) {
  .sp-pray { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: stretch; }
  .sp-pray .sp-photo { display: flex; flex-direction: column; }
  .prose .sp-pray .sp-photo img { flex: 1 1 0; height: 0; min-height: 0; object-fit: cover; object-position: center 62%; }
}
/* sotto la preghiera la foto verticale sarebbe altissima: si ritaglia in orizzontale, su facciata e statua */
@media (max-width: 899px) { .prose .sp-pray .sp-photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 50%; } }
.prose figure.sp-photo { margin: 0; }
.prose .sp-photo img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: var(--shadow); }
.sp-photo figcaption { margin-top: 10px; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.prose .sp-why .sp-pope { margin-top: 22px; }
.sp-pope { margin: 0; padding: 26px 24px; border-radius: 20px; background: var(--u-ink); color: #fff; }
.prose .sp-pope blockquote { margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; font: italic 600 1.35rem/1.35 var(--f-body); }
.sp-pope figcaption { font-size: .88rem; line-height: 1.45; }
.prose .sp-pope figcaption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.sp-quote cite { font-style: normal; font-weight: 700; font-size: .85rem; color: var(--u-ink); white-space: nowrap; }

.history-timeline.sp-timeline { margin: 0; }
.sp-timeline .ht-when { color: var(--u-ink); }
.prose .sp-timeline ol.history-timeline-list::before { background: color-mix(in srgb, var(--u) 40%, transparent); }
.prose .sp-timeline ol.history-timeline-list li::before { border-color: var(--u); }
.prose .sp-timeline ol.history-timeline-list li.is-key::before { background: var(--u); border-color: var(--u-ink); }

.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.sp-chips[hidden] { display: none; }
.sp-chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 .9rem/1.2 var(--f-body); cursor: pointer; transition: border-color .15s, background .15s; }
.sp-chips button:hover { border-color: var(--u); }
.sp-chips button:focus-visible { outline: 3px solid var(--u); outline-offset: 2px; }
.sp-chips i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.sp-chips button[aria-pressed="true"] { background: var(--u-ink); border-color: var(--u-ink); color: #fff; }
.sp-chips button[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff; }
.sp-map { position: relative; z-index: 0; isolation: isolate; height: clamp(340px, 46vw, 540px); overflow: hidden; border: 3px solid var(--u); border-radius: 22px; background: var(--tint); box-shadow: var(--shadow); }
.sp-map .leaflet-popup-content { margin: 12px 16px; font: .9rem/1.45 var(--f-body); }
.sp-map .leaflet-popup-content strong { display: block; font: 800 1rem/1.25 var(--f-head); color: var(--ink); }
.sp-map .leaflet-popup-content p { margin: 6px 0 0; }
.sp-pop-trip { font-size: .76rem; font-weight: 700; }
.sp-trips { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.sp-trip { padding: 16px 18px; border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 14px; background: #fff; transition: box-shadow .15s; }
.sp-trip.is-on { box-shadow: 0 0 0 2px var(--c), var(--shadow); }
.prose .sp-trip h3 { margin: 0; font-size: 1.12rem; }
.prose .sp-trip p { margin: 8px 0 0; font-size: .96rem; line-height: 1.55; }
.prose .sp-trip .sp-trip-when { margin-top: 2px; font-size: .86rem; font-weight: 700; color: var(--muted); }
.prose .sp-trip .sp-trip-stops { font-size: .88rem; color: var(--muted); }
.sp-italy { margin-top: 20px; padding: 22px 24px; border-radius: 18px; background: var(--u-100); }
.prose .sp-italy h3 { margin: 0 0 6px; }
.prose .sp-italy p { margin: 0; color: var(--ink); }

.sp-quotes { display: grid; gap: 12px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.sp-quote { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px 18px; border-radius: 14px; background: var(--tint); }
.sp-quote figcaption { font: 800 .75rem/1.3 var(--f-head); letter-spacing: .07em; text-transform: uppercase; color: var(--u-ink); }
.prose .sp-quote blockquote { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-weight: 600; line-height: 1.45; }
.sp-quote cite { margin-top: auto; }

.sp-prayer { padding: clamp(28px, 5vw, 52px) clamp(20px, 6vw, 72px); border-radius: 22px; background: var(--u-ink); color: #fff; text-align: center; }
.sp-prayer-icon { display: block; width: 40px; height: 40px; margin: 0 auto 10px; color: var(--giallo); }
.sp-prayer-icon svg { display: block; width: 100%; height: 100%; }
.prose .sp-prayer h2 { margin: 0 0 16px; color: #fff; }
.prose .sp-prayer p { max-width: 44rem; margin: 0 auto 1em; color: #fff; font-style: italic; line-height: 1.7; }
.prose .sp-prayer p:last-child { margin-bottom: 0; font-weight: 700; }

@media print {
  .sp-chips, .sp-map, .lpm-nav { display: none !important; }
  .sp-prayer, .sp-pope { background: none; color: inherit; border: 1px solid #999; }
  .prose .sp-prayer p, .prose .sp-prayer h2, .prose .sp-pope blockquote, .prose .sp-pope figcaption a { color: #000; }
}

/* Tabella delle route: la comunità nella casella del luogo, quando Clan e Noviziato partono separati */
.camp-team { display: inline-block; margin-right: 4px; font: 800 .75rem/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--u-ink, var(--viola)); }
@media (max-width: 620px) { .camp-team { display: block; margin: 6px 0 1px; } } /* colonne strette: l'etichetta sopra il luogo, che così non va a capo dopo il segnaposto */

/* Route: foto verticale. Su schermi larghi il gruppo in cammino sopra il titolo; sul telefono, dove il riquadro è quasi quadrato, ci stanno anche il sole e le cime */
.page-hero-img[src*="clan-route-sentiero-alta-montagna"] { object-position: center 74%; }
@media (max-width: 620px) { .page-hero-img[src*="clan-route-sentiero-alta-montagna"] { object-position: center 90%; } }
.page-hero-img[src*="clan-partenza-nastro-di-sera"] { object-position: center 38%; } /* i volti restano nella fascia */
.page-hero-img[src*="clan-preghiere-croce-al-tramonto"] { object-position: center 37%; } /* la croce, il sole e il gruppo restano nella fascia */
.page-photo-band img[src*="clan-san-paolo-salita-sulla-neve"] { object-position: center 30%; } /* la vetta e chi sale restano nella fascia */
.page-hero-img[src*="branco-preghiere-candele"] { object-position: center 30%; } /* i due volti e le candele restano nella fascia */
.page-hero-img[src*="storia-cronistoria-gruppo"] { object-position: center 62%; } /* il Gruppo in posa e il leone */
.page-hero-img[src*="clan-gruppo-croce"] { object-position: center 78%; } /* la cappella e la croce in alto, il gruppo sopra il titolo */
.page-photo-band img[src*="clan-anfiteatro"] { object-position: center 45%; }
/* Preghiere del Clan: pagina a blocchi come San Giorgio ($blockPages in page.php), con i versi a strofe, la foto o il disegno
   nella cornice nel colore della branca, fermi accanto al testo lungo; una preghiera in evidenza, a tutta larghezza */
.prayer-page .lpm-text > p { margin: 0; padding: 0 0 1.1em 18px; border-left: 3px solid color-mix(in srgb, var(--u) 30%, transparent); font-size: 1.04rem; line-height: 1.7; color: var(--ink); }
.prayer-page .lpm-text > p:last-child { padding-bottom: 0; }
.prose.prayer-page .lpm-art { position: relative; isolation: isolate; padding: 0 14px 14px 0; }
.prayer-page .lpm-art::before { content: ""; position: absolute; inset: 14px 0 0 14px; z-index: -1; border-radius: 22px; background: var(--u); }
.prayer-page .lpm-art img { border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
@media (min-width: 861px) {
  .prayer-page .lpm-head { grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: start; }
  .prayer-page .lpm-flip .lpm-head { grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }
  .prose.prayer-page .lpm-art { position: sticky; top: calc(var(--header-h) + 24px); }
}
.prayer-page .lpm-noart .lpm-head { grid-template-columns: minmax(0, 1fr); padding: clamp(28px, 5vw, 52px) clamp(20px, 6vw, 72px); border-radius: 22px; background: var(--u-ink); }
.prayer-page .lpm-noart .lpm-text { max-width: 44rem; }
.prayer-page .lpm-noart .lpm-text > p { padding: 0 0 1em; border: 0; color: #fff; }
.prayer-page .lpm-noart .lpm-text > p:last-child { padding-bottom: 0; }
.prayer-page .lpm-noart .kicker { color: var(--giallo); }
.prose.prayer-page .lpm-noart h2 { color: #fff; }
@media print {
  .prayer-page .lpm-art { display: none; }
  .prayer-page .lpm-block { break-inside: avoid; }
  .prayer-page .lpm-noart .lpm-head { padding: 0; background: none; }
  .prayer-page .lpm-noart .lpm-text > p, .prose.prayer-page .lpm-noart h2 { color: inherit; }
}

/* Documento da sfogliare (app/views/flipbook.php, assets/js/flipbook.js): senza JavaScript le pagine restano in griglia */
.flipbook .section-head { margin-bottom: 20px; }
.fb-note { margin: 10px 0 0; color: var(--muted); }
.fb-list ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.prose.fb-list li { margin: 0; }
.prose.fb-list img { display: block; width: 100%; height: auto; box-shadow: var(--shadow); }
.flipbook.is-ready .fb-list, .fb-ui[hidden] { display: none; }
.fb-stage { display: flex; justify-content: center; padding: clamp(14px, 3vw, 32px); border-radius: 22px; background: var(--u-100); overflow: hidden; touch-action: pan-y; }
.fb-stage:focus-visible { outline: 3px solid var(--u); outline-offset: 3px; }
.fb-book { position: relative; width: min(100%, max(calc((100vh - 240px) * 1.4157), 520px)); aspect-ratio: 1.4157; perspective: 2600px; transition: transform .7s cubic-bezier(.35,.1,.25,1); }
.fb-book.is-cover { transform: translateX(-25%); }
.fb-book.is-end { transform: translateX(25%); }
.fb-stage.is-single .fb-book { width: min(100%, max(calc((100vh - 240px) * .7078), 300px), 560px); aspect-ratio: .7078; }
.fb-page { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(36,19,63,.18); cursor: zoom-in; }
.fb-left { left: 0; }
.fb-right { right: 0; }
.fb-stage.is-single .fb-right { width: 100%; }
.fb-page[hidden], .fb-face[hidden], .fb-leaf[hidden] { display: none; }
.fb-page img, .fb-face img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* la piega del libro */
.fb-left::after, .fb-stage:not(.is-single) .fb-right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; pointer-events: none; }
.fb-left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(36,19,63,.12)); }
.fb-stage:not(.is-single) .fb-right::after { left: 0; background: linear-gradient(270deg, transparent, rgba(36,19,63,.12)); }
.fb-leaf { position: absolute; top: 0; bottom: 0; z-index: 3; width: 50%; transform-style: preserve-3d; pointer-events: none; }
.fb-leaf.on-right { left: 50%; transform-origin: left center; }
.fb-leaf.on-left { left: 0; transform-origin: right center; }
.fb-leaf.on-single { left: 0; width: 100%; transform-origin: left center; }
.fb-face { position: absolute; inset: 0; overflow: hidden; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 18px rgba(36,19,63,.18); }
.fb-back { transform: rotateY(180deg); }
.fb-bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.fb-count { min-width: 12ch; text-align: center; font-weight: 700; color: var(--ink); }
.flipbook .carousel-arrow { border-color: var(--u-ink); color: var(--u-ink); }
.flipbook .carousel-arrow:hover:not(:disabled) { border-color: var(--u); background: var(--u); color: #fff; }
.fb-hint { margin: 8px 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
@media print { .flipbook { display: none; } }

/* La nostra storia: apertura con citazione, racconto e foto d'archivio; cronologia su due colonne; link tra i capitoli (views/page.php) */
.prose blockquote.history-quote { max-width: 46rem; margin: 4px auto 44px; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; font-style: normal; }
.history-quote::before { content: "\201C"; display: block; height: .5em; margin-bottom: 14px; font: 800 4.5rem/1 Georgia, serif; color: var(--giallo); }
.prose .history-quote p { margin: 0; font: italic 500 clamp(1.15rem, 2.1vw, 1.45rem)/1.45 var(--f-body); color: var(--ink); }
.history-quote cite { display: block; margin-top: 12px; font: 700 .8rem/1.2 var(--f-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--viola); }
.history-open { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; margin-bottom: clamp(36px, 5vw, 56px); }
.history-open-text > p { max-width: 62ch; }
.prose .history-open-text > p:first-child strong { display: block; margin-bottom: 12px; font: 800 clamp(1.5rem, 2.8vw, 2.05rem)/1.15 var(--f-head); color: var(--viola); }
/* La nostra storia: il link al primo capitolo in fondo alla pagina, al centro */
.history-continue { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 40px); }
.history-continue .history-link { width: min(100%, 26rem); }
.history-open-photo { margin: 0; }
.history-open-photo a { display: block; transform: rotate(1.2deg); }
.history-open-photo img { display: block; width: 100%; height: auto; border: 8px solid #fff; border-radius: 6px; box-shadow: var(--shadow); }
.history-open-photo figcaption { margin-top: 14px; text-align: center; font-size: .9rem; color: var(--muted); }
@media (min-width: 900px) { .history-open { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.prose .history-timeline-cols ol.history-timeline-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-bottom: 22px; }
.prose .history-timeline-cols ol.history-timeline-list li:last-child { padding-bottom: 0; }
.prose .history-timeline-cols ol.history-timeline-list li::before { top: 8px; }
.prose .history-timeline-cols ol.history-timeline-list li.is-key::before { top: 8px; }
.history-timeline-cols .ht-when { font-size: 1.2rem; }
.history-timeline-cols li.is-key .ht-when { font-size: 1.5rem; }
.history-timeline-cols li p { font-size: 1rem; line-height: 1.5; }
.history-timeline-cols ol:first-child { padding-bottom: 22px; }
.prose .history-timeline-cols ol.history-timeline-list:first-child::before { bottom: 0; }
.prose .history-timeline-cols ol.history-timeline-list:last-child::before { top: 0; }
@media (min-width: 980px) {
  .history-timeline-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); }
  .history-timeline-cols ol:first-child { padding-bottom: 0; }
  .prose .history-timeline-cols ol.history-timeline-list:first-child::before { bottom: 12px; }
  .prose .history-timeline-cols ol.history-timeline-list:last-child::before { top: 10px; }
}
.history-link, .prose a.history-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 14px 16px 14px 20px; border-radius: 16px; background: var(--viola-50); color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.history-link:hover, .prose a.history-link:hover { background: var(--viola-100); color: var(--ink); }
.history-link:focus-visible { outline: 3px solid var(--viola); outline-offset: 2px; }
.history-link-label, .history-link-years { grid-column: 1; font-size: .86rem; line-height: 1.35; color: var(--muted); }
.history-link strong { grid-column: 1; font: 800 1.12rem/1.25 var(--f-head); color: var(--viola); }
.history-link .icon { grid-column: 2; grid-row: 1 / span 3; box-sizing: border-box; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--viola); color: #fff; }
.history-link-prev .icon { transform: rotate(180deg); }
/* capitolo precedente: la freccia a sinistra, dalla parte in cui si torna, e il testo allineato a destra */
.history-link-prev, .prose a.history-link-prev { grid-template-columns: auto minmax(0, 1fr); padding: 14px 20px 14px 16px; text-align: right; }
.history-link-prev .icon { grid-column: 1; }
.history-link-prev :is(.history-link-label, .history-link-years, strong) { grid-column: 2; }
.history-pager { display: grid; gap: 12px; margin: 36px 0 12px; }
@media (min-width: 720px) { .history-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* un solo link (primo capitolo o Cronistoria, l'ultima pagina): al centro, largo come «Continua a leggere» */
@media (min-width: 720px) { .history-pager:has(> a:only-child) { grid-template-columns: min(100%, 26rem); justify-content: center; } }
@media print { .history-pager, .history-continue { display: none; } .history-open-photo a { transform: none; } }

/* Preghiere R/S: la foto panoramica del vecchio sito, con i ragazzi sul sentiero sopra il titolo */
.page-hero-img[src*="clan-route-sentiero-muretto"] { object-position: 46% center; }
/* San Paolo (novembre 2026): la salita sulla neve in apertura, il sentiero con il muretto in fondo */
.page-hero-img[src*="clan-san-paolo-salita-sulla-neve"] { object-position: center 30%; }
.page-photo-band img[src*="clan-route-sentiero-muretto"] { object-position: 46% center; }

/* San Giorgio (app/views/san-giorgio.php): riusa gli schemi di San Paolo; il segno forte è la bandiera del 23 aprile, una croce rossa tra quattro riquadri bianchi */
.prose .sg-emblem { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; border-radius: 0; }
@media (min-width: 760px) { .sg-intro { grid-template-columns: minmax(0, 1fr) 300px; } }
.sg-chi { display: grid; gap: 28px clamp(28px, 4vw, 52px); align-items: start; }
.sg-chi .unit-faq-photo { position: relative; top: auto; }
.prose .sg-chi .unit-faq-photo > img { height: auto; aspect-ratio: 520 / 808; }
@media (max-width: 859px) { .sg-chi > div:first-child { width: 100%; max-width: 340px; margin-inline: auto; } }
@media (min-width: 860px) { .sg-chi { grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); } }
.sg-two { display: grid; margin-top: 24px; border-radius: 20px; background: var(--u-100); }
.sg-two > div { padding: 20px 24px; }
.sg-two > div + div { border-top: 2px dashed color-mix(in srgb, var(--u) 45%, transparent); }
.prose .sg-two h3 { margin: 0 0 8px; font-size: 1.14rem; color: var(--u-ink); }
.prose .sg-two ul { margin: 0; padding-left: 1.1em; font-size: 1rem; line-height: 1.5; }
@media (min-width: 720px) { .sg-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sg-two > div + div { border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--u) 45%, transparent); } }
.sg-legend { display: grid; gap: 24px clamp(28px, 4vw, 52px); align-items: start; }
.prose figure.sg-painting { margin: 0; }
.prose .sg-painting img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow); }
.sg-painting figcaption { margin-top: 10px; font-size: .88rem; color: var(--muted); }
.prose ol.sg-story { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: sg; }
.prose ol.sg-story li { position: relative; margin: 0; padding-left: 52px; font-size: 1rem; line-height: 1.5; counter-increment: sg; }
.sg-story li::before { content: counter(sg); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 36px; height: 42px; padding-bottom: 7px; box-sizing: border-box; background: var(--u-ink); color: #fff; font: 800 1rem/1 var(--f-head); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.sg-story strong { display: block; font: 800 1.08rem/1.3 var(--f-head); color: var(--ink); }
@media (min-width: 900px) { .sg-legend { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.sg-legend-after { display: grid; gap: 20px clamp(28px, 4vw, 52px); margin-top: 26px; }
.prose .sg-legend-after p:last-child { margin-bottom: 0; }
.prose .sg-art h3 { margin: 0 0 8px; font-size: 1.14rem; }
.prose .sg-art ul { margin: 0; padding-left: 1.1em; font-size: 1rem; line-height: 1.5; }
@media (min-width: 900px) { .sg-legend-after { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-patron { display: grid; gap: 24px clamp(28px, 4vw, 52px); align-items: start; }
.prose figure.sg-trio { margin: 0 auto; max-width: 280px; }
.prose .sg-trio img { display: block; width: 100%; height: auto; border-radius: 0; clip-path: inset(0 0 4% 0); margin-bottom: -4%; }
.sg-trio figcaption { margin-top: 6px; text-align: center; font-size: .88rem; color: var(--muted); }
@media (min-width: 860px) { .sg-patron { grid-template-columns: minmax(0, 1fr) 280px; } }
.prose h3.sg-code-title { margin: 26px 0 10px; }
.prose table.sg-code { width: 100%; margin: 0 0 10px; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.sg-code th { padding: 8px 14px; text-align: left; font: 800 .92rem/1.3 var(--f-head); color: #fff; background: var(--u-ink); }
.sg-code th:first-child { border-radius: 12px 0 0 0; width: 50%; }
.sg-code th:last-child { border-radius: 0 12px 0 0; }
.sg-code td { padding: 11px 14px; vertical-align: top; border-bottom: 1px solid var(--line); background: #fff; }
.sg-code td + td { font-weight: 600; background: var(--u-100); border-bottom-color: #fff; }
.prose .sg-code .sp-ref { display: block; white-space: normal; }
.sg-flag { display: grid; gap: clamp(18px, 3vw, 34px); overflow: hidden; border: 2px solid var(--rosso); border-radius: 24px; background: var(--rosso); box-shadow: var(--shadow); }
.sg-flag > div { padding: clamp(22px, 3.4vw, 40px); background: #fff; }
@media (min-width: 820px) { .sg-flag { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-flag-date { display: flex; flex-direction: column; justify-content: center; }
.prose .sg-flag-date .kicker { margin: 0 0 8px; color: var(--rosso-ink); }
.prose .sg-flag-date h2 { margin: 0 0 12px; font: 800 clamp(3.1rem, 7.6vw, 5.4rem)/.95 var(--f-head); color: var(--rosso-ink); letter-spacing: -.02em; }
.prose .sg-flag-date p { margin: 0; font-size: 1.14rem; line-height: 1.4; max-width: 24rem; }
.prose .sg-flag h3 { margin: 0 0 10px; font-size: 1.22rem; color: var(--ink); }
.prose .sg-flag > div > p:last-child { margin-bottom: 0; }
.prose .sg-flag p, .prose .sg-flag li { font-size: 1.02rem; line-height: 1.55; }
.prose .sg-promise { margin: 0 0 6px; font-style: italic; }
.prose .sg-promise-list { margin: 0 0 12px; padding-left: 1.1em; font-style: italic; }
.prose .sg-promise-list li { margin-bottom: 2px; }
.sg-flag-link { font-weight: 700; }
.sg-measure { max-width: 66ch; }
.sg-dragons { display: grid; margin: 18px 0 22px; }
.sg-dragons > div { padding: 16px 0; }
.sg-dragons > div + div { border-top: 2px dashed color-mix(in srgb, var(--u) 45%, transparent); }
.prose .sg-dragons h3 { margin: 0 0 6px; font-size: 1.3rem; color: var(--u-ink); }
.prose .sg-dragons p { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; }
.prose .sg-dragons .sg-question { margin: 0; font-weight: 700; color: var(--ink); }
@media (min-width: 760px) { .sg-dragons { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sg-dragons > div { padding: 4px clamp(18px, 2.4vw, 30px); } .sg-dragons > div:first-child { padding-left: 0; } .sg-dragons > div:last-child { padding-right: 0; } .sg-dragons > div + div { border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--u) 45%, transparent); } }
.sg-games { display: grid; gap: 4px clamp(28px, 4vw, 52px); margin: 8px 0 26px; }
.prose .sg-games h3 { margin: 12px 0 4px; font-size: 1.16rem; }
.prose .sg-games p { margin: 0; font-size: 1rem; line-height: 1.5; }
@media (min-width: 760px) { .sg-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(28px, 4vw, 52px); } }
.sg-plan { padding: clamp(20px, 3vw, 30px); border-radius: 20px; background: var(--u-100); }
.prose .sg-plan h3 { margin: 0 0 14px; }
.prose .sg-plan h4 { margin: 0 0 10px; font: 800 1.02rem/1.3 var(--f-head); color: var(--u-ink); }
.sg-plan .history-timeline-cols > div + div { margin-top: 20px; }
.prose .sg-plan .history-timeline-cols ol.history-timeline-list li { padding-bottom: 12px; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.prose .sg-plan .history-timeline-cols ol.history-timeline-list li::before { top: 5px; }
.prose .sg-plan .history-timeline-cols ol.history-timeline-list::before { top: 10px; bottom: 12px; }
.sg-plan .history-timeline-cols .ht-when { font-size: .98rem; }
@media (min-width: 980px) { .sg-plan .history-timeline-cols > div + div { margin-top: 0; } }
#preparare .sp-italy, #albenga .sp-italy { margin-top: 18px; }
.prose .sp-italy h3 { margin-top: 0; }
.prose .sp-italy p:last-child { margin-bottom: 0; }
.sg-home .lpm-text h2 { margin-top: .15em; }
.prose .sg-home .unit-faq-photo > img { aspect-ratio: 3 / 2; }
@media (min-width: 860px) { .sg-home { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
@media (max-width: 859px) { .sg-home > div:first-child { max-width: none; } }
.prose ul.sg-past { margin: 14px 0 0; padding: 0; list-style: none; }
.prose ul.sg-past li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; margin: 0; padding: 8px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.4; }
.sg-past .ht-when { font: 800 1rem/1.4 var(--f-head); color: var(--u-ink); }
.prose .sg-prayer-art img { aspect-ratio: auto; object-fit: contain; object-position: center top; box-shadow: none; }
@media (min-width: 900px) { .prose .sp-pray .sg-prayer-art img { background: #fff; } }
.sg-sources { font-size: 1rem; }
.sg-sources h2 { margin: 0 0 12px; font-size: 1.4rem; }
.sg-sources ul { margin: 0 0 14px; padding-left: 1.1em; columns: 2 340px; column-gap: clamp(28px, 4vw, 52px); }
.sg-sources li { margin-bottom: 6px; break-inside: avoid; }
.page-photo-band img[src*="reparto-san-giorgio-2018-zona"] { object-position: center 70%; }
/* Branco: Legge, Promessa e Motto. I berretti disegnati non vanno ingranditi */
.prose .lpm-saluto .lpm-art img { max-width: 300px; margin-inline: auto; border-radius: 18px; box-shadow: var(--shadow); }
.prose .lpm-legge .lpm-art img { border-radius: 14px; }
.page-photo-band img[src*="branco-cerchio-sulla-neve"] { object-position: center 60%; }

/* San Francesco (branco/san-francesco-dassisi): contenuti in app/data/san-francesco.php e app/views/san-francesco.php, sugli schemi di San Giorgio */
.prose .sf-emblem { max-width: 240px; border-radius: 18px; }
.sf-chi { display: grid; gap: 28px clamp(28px, 4vw, 52px); align-items: stretch; }
/* colonna del testo: sotto i paragrafi il ritratto riempie lo spazio, così finisce alla stessa altezza della linea del tempo */
.sf-chi > .lpm-text { display: flex; flex-direction: column; }
.prose .sf-portrait { position: relative; flex: 1; min-height: 300px; margin: 8px 0 0; overflow: hidden; border-radius: 20px; box-shadow: var(--shadow); }
.prose .sf-portrait a, .prose .sf-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.prose .sf-portrait img { object-fit: cover; object-position: center 8%; }
.sf-portrait figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 10px; background: linear-gradient(transparent, rgba(20, 14, 30, .72)); color: #fff; font-size: .86rem; line-height: 1.4; pointer-events: none; }
@media (min-width: 900px) { .sf-chi { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.sf-life { padding: 22px 24px; border-radius: 20px; background: var(--u-100); }
.prose .sf-life h3 { margin: 0 0 14px; font-size: 1.14rem; color: var(--u-ink); }
.prose .sf-life ol.history-timeline-list li { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; }
.prose .sf-life ol.history-timeline-list li p { margin: 0; font-size: .98rem; line-height: 1.45; }
.sf-legend { align-items: center; }
@media (min-width: 900px) { .sf-legend { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); } }
.sf-wolf { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 26px 20px 20px; border-radius: 22px; background: var(--u-100); }
.prose .sf-wolf img { width: 160px; height: auto; border-radius: 0; mix-blend-mode: multiply; }
.sf-wolf figcaption { font: 700 1.1rem/1.3 var(--f-head); color: var(--u-ink); text-align: center; }
.sf-cantico-open { display: grid; gap: 18px clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 760px) { .sf-cantico-open { grid-template-columns: minmax(0, 1fr) 300px; } }
.prose .sf-cantico-open .sg-measure { margin: 0; font-size: 1.08rem; }
.prose .sf-creatures { display: grid; gap: 12px; margin: 22px 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.prose .sf-creatures li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 16px 18px; border-radius: 18px; background: #fff; border: 2px solid color-mix(in srgb, var(--u) 40%, #fff); box-shadow: 0 1px 2px rgba(36, 19, 63, .05); }
.sf-creature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--u-100); color: var(--u-ink); box-shadow: inset 0 0 0 2px var(--u); }
.sf-creature-icon svg { display: block; width: 20px; height: 20px; }
.sf-creatures li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sf-creature-what { font: 800 .72rem/1.3 var(--f-head); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sf-creatures strong { font: 800 1.1rem/1.25 var(--f-head); color: var(--u-ink); }
.sf-creatures li > div > span:last-child { font-size: .95rem; line-height: 1.45; }
.sf-patron .sp-photo { align-self: center; }
/* la foto accanto alla preghiera, tagliata in verticale: il crocifisso al centro */
.prose .sp-photo img.sf-pray-photo { object-fit: cover; object-position: 50% 40%; }
/* la specialità Amico di San Francesco: il distintivo accanto al testo */
.sf-spec { display: grid; gap: 16px 28px; align-items: center; padding: 22px 26px; border-radius: 20px; background: var(--u-100); }
@media (min-width: 640px) { .sf-spec { grid-template-columns: 150px minmax(0, 1fr); } }
.prose .sf-spec img { width: 150px; height: auto; border-radius: 0; mix-blend-mode: multiply; }
.prose .sf-spec p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
@media (min-width: 860px) { .sf-patron { grid-template-columns: minmax(0, 1fr) 360px; } }
/* il 4 ottobre: la foto di Assisi a tutta altezza e accanto la data, con le due voci divise da un tratteggio */
.sf-feast { display: grid; overflow: hidden; border: 2px solid var(--u); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
@media (min-width: 860px) { .sf-feast { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.prose .sf-feast-photo { position: relative; margin: 0; min-height: 260px; }
.prose .sf-feast-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; border-radius: 0; }
.sf-feast-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 18px 12px; background: linear-gradient(transparent, rgba(20, 14, 30, .72)); color: #fff; font-size: .86rem; line-height: 1.4; }
.sf-feast-body { padding: clamp(24px, 3.6vw, 44px); }
.prose .sf-feast-body .kicker { margin: 0 0 6px; color: var(--u-ink); }
.prose .sf-feast-body h2 { margin: 0 0 10px; font: 800 clamp(3rem, 7vw, 4.6rem)/.95 var(--f-head); color: var(--u-ink); letter-spacing: -.02em; }
.prose .sf-feast-lead { margin: 0 0 18px; font-size: 1.12rem; line-height: 1.45; }
.sf-feast-item { padding: 16px 0 2px; border-top: 2px dashed color-mix(in srgb, var(--u) 45%, transparent); }
.prose .sf-feast-item h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.12rem; }
.sf-feast-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--u); color: var(--ink); }
.sf-feast-icon svg { display: block; width: 16px; height: 16px; }
.prose .sf-feast-item p { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; }
.page-hero-img[src*="branco-gallinara"] { object-position: center 40%; }
.page-photo-band img[src*="branco-prato"] { object-position: center 50%; }

/* Uniforme e distintivi L/C (branco/uniforme-e-distintivi-lc): contenuti in app/data/uniforme-lc.php e app/views/uniforme-lc.php */
@media (min-width: 760px) { .uf-intro { grid-template-columns: minmax(0, 1fr) 260px; } }
.prose .uf-berretti { display: block; width: 100%; max-width: 260px; height: auto; margin-inline: auto; border-radius: 0; }
.prose blockquote.uf-bp { margin: 30px 0 0; padding: 22px 26px; border: 0; border-left: 5px solid var(--u); border-radius: 4px 20px 20px 4px; background: var(--u-100); }
.prose .uf-bp p { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.6; font-style: italic; }
.uf-bp cite { font-style: normal; font-weight: 800; font-size: .88rem; color: var(--u-ink); }
.uf-wear .sp-photo { align-self: center; }
@media (min-width: 860px) { .uf-wear { grid-template-columns: minmax(0, 1fr) 380px; } }
.prose .uf-pieces { display: grid; gap: 0; margin: 4px 0 16px; border-radius: 18px; background: var(--u-100); padding: 6px 20px; }
.uf-pieces div { display: grid; gap: 2px 16px; padding: 11px 0; }
.uf-pieces div + div { border-top: 2px dashed color-mix(in srgb, var(--u) 45%, transparent); }
@media (min-width: 560px) { .uf-pieces div { grid-template-columns: 120px minmax(0, 1fr); } }
.uf-pieces dt { font: 800 .98rem/1.4 var(--f-head); color: var(--u-ink); }
.uf-pieces dd { margin: 0; font-size: .98rem; line-height: 1.45; }
.uf-badges { display: grid; gap: 24px clamp(28px, 4vw, 52px); align-items: start; margin-top: 8px; }
@media (min-width: 900px) { .uf-badges { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } .uf-chart { position: sticky; top: 110px; } }
.prose .uf-chart { margin: 0; }
.prose .uf-chart img { display: block; width: 100%; height: auto; border-radius: 0; }
.uf-chart figcaption { margin-top: 8px; font-size: .88rem; color: var(--muted); }
/* i distintivi per zona: manica destra, petto, manica sinistra */
.uf-zones { display: grid; gap: 14px; }
.uf-zone { padding: 16px 18px 6px; border-radius: 18px; background: var(--u-100); }
.prose .uf-zone h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.12rem; color: var(--u-ink); }
.uf-zone-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--u-ink); }
.uf-zone-icon svg { width: 17px; height: 17px; display: block; }
.prose ul.uf-legend { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.prose ul.uf-legend li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 10px 0; }
.prose ul.uf-legend li + li { border-top: 2px dashed color-mix(in srgb, var(--u) 45%, transparent); }
.uf-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--u); color: var(--ink); font: 800 1rem/1 var(--f-head); }
.uf-legend li > div { display: flex; flex-direction: column; gap: 2px; font-size: .96rem; line-height: 1.45; }
.uf-legend strong { font: 800 1.04rem/1.3 var(--f-head); color: var(--ink); }
/* sul giallo del Branco il testo bianco non si legge: pulsanti dei documenti con il testo scuro */
.unit-giallo .doc-card-action { color: var(--ink); }
.unit-giallo .doc-card:hover .doc-card-action { color: #fff; }
.uf-docs .doc-card img { object-position: center top; }
/* note prima e dopo i documenti: staccate dai riquadri, più vicine a quello di cui parlano */
.prose .uf-badges + .sp-note { margin: 24px 0 0; }
.prose .doc-cards.uf-docs { margin-top: 18px; }
.prose .uf-docs + .sp-note { margin: 16px 0 0; }
/* Branco: i passi numerati (fazzolettone, lupo di Gubbio) in cerchi gialli come i distintivi, al posto delle bandierine di San Giorgio */
.prose .uf-steps li, .prose .sf-legend ol.sg-story li { padding-left: 50px; min-height: 34px; }
.uf-steps li::before, .sf-legend .sg-story li::before { top: -3px; width: 34px; height: 34px; padding: 0; border-radius: 50%; clip-path: none; background: var(--u); color: var(--ink); font-size: 1rem; box-shadow: 0 0 0 3px var(--u-100); }
.prose ol.uf-steps { gap: 12px; }
@media (min-width: 860px) { .uf-scarf { grid-template-columns: minmax(0, 1fr) 300px; } }
.prose .uf-scarf h3 { margin: 22px 0 12px; font-size: 1.14rem; }
.uf-scarf-art { align-self: center; margin: 0; padding: 30px 20px 18px; border-radius: 22px; background: var(--u-100); text-align: center; }
.prose .uf-scarf-art img { width: 100%; max-width: 240px; height: auto; border-radius: 0; }
.uf-scarf-art figcaption { margin-top: 10px; font-size: .9rem; font-weight: 700; color: var(--u-ink); }
.prose ol.uf-trail { display: grid; gap: 14px; margin: 22px 0 12px; padding: 0; list-style: none; }
@media (min-width: 760px) { .prose ol.uf-trail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prose ol.uf-trail li { position: relative; margin: 0; padding: 20px 22px; border-radius: 18px; background: var(--u-100); }
.prose ol.uf-trail li + li::before { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px; background: var(--u); }
@media (min-width: 760px) { .prose ol.uf-trail li + li::before { top: 50%; left: -14px; width: 14px; height: 2px; } }
/* il distintivo della tappa in cima alla scheda, in un riquadro alto uguale per le tre tappe */
.prose .uf-trail-badge { display: grid; place-items: center; height: 150px; margin: 0 0 14px; }
.prose .uf-trail-badge img { width: auto; height: auto; max-width: 160px; max-height: 150px; border-radius: 10px; mix-blend-mode: multiply; }
.uf-trail-step { font: 800 .75rem/1.3 var(--f-head); letter-spacing: .07em; text-transform: uppercase; color: var(--u-ink); }
.prose .uf-trail h3 { margin: 4px 0 2px; font-size: 1.24rem; }
.prose .uf-trail p { margin: 0; font-size: .98rem; line-height: 1.5; }
.prose .uf-trail .uf-trail-who { margin-bottom: 8px; font-weight: 700; color: var(--u-ink); }
.uf-spec { display: grid; gap: 24px clamp(28px, 4vw, 52px); align-items: center; }
.prose .uf-spec-text p:last-child { margin-bottom: 0; }
.prose .uf-spec .sp-photo img { width: auto; max-width: 100%; max-height: 440px; margin-inline: auto; }
.uf-spec .sp-photo figcaption { text-align: center; }
.prose .uf-spec-count { margin: 26px 0 0; font: 800 .78rem/1.3 var(--f-head); letter-spacing: .07em; text-transform: uppercase; color: var(--u-ink); }
@media (min-width: 900px) { .uf-spec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.prose ul.uf-spec-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 18px; list-style: none; border-radius: 18px; border: 2px dashed color-mix(in srgb, var(--u) 40%, transparent); }
.prose .uf-spec-list li { margin: 0; padding: 6px 13px; border-radius: 999px; background: var(--u-100); font-size: .92rem; font-weight: 600; line-height: 1.3; }
.page-hero-img[src*="iscrizioni-lupetti-vacanze-di-branco-2025"] { object-position: center 45%; }
.page-hero-img[src*="branco-lupetti-fazzolettoni-al-vento"] { object-position: center 38%; } /* Uniforme L/C: i fazzolettoni alzati e i visi dei lupetti */
.page-hero-img[src*="branco-lupetti-in-cammino-sul-crinale"] { object-position: center 72%; } /* Legge, Promessa e Motto L/C: i due lupetti in primo piano e il Branco in fila sul sentiero */
.page-hero-img[src*="reparto-squadriglie-con-i-guidoni-in-sede"] { object-position: center 35%; } /* Uniforme E/G: i visi e i guidoni delle squadriglie */
.page-hero-img[src*="reparto-capisquadriglia-con-i-guidoni"] { object-position: center 30%; } /* Legge, Promessa e Motto E/G: i visi e i guidoni */
@media print { .uf-chart { position: static; } .uf-num { background: none; border: 1px solid #000; } }
@media print { .sg-flag { background: none; border: 1px solid #999; } .sg-flag > div { border: 1px solid #999; } .sg-story li::before { background: none; color: #000; } }

/* Pagine del Clan: i pulsanti in fondo alla pagina nei colori della branca */
.unit-rosso .page-actions .btn-primary { background: var(--u); color: #fff; }
.unit-rosso .page-actions .btn-primary:hover { background: var(--u-ink); color: #fff; }
.unit-rosso .page-actions .btn-ghost { border-color: color-mix(in srgb, var(--u) 40%, #fff); color: var(--u-ink); }
.unit-rosso .page-actions .btn-ghost:hover { border-color: var(--u); color: var(--u-ink); }
.unit-rosso .page-actions .btn:focus-visible { outline: 3px solid var(--u); outline-offset: 2px; }

/* Documenti di una pagina, in riquadri con la foto (app/views/page.php, $pageDocs) */
.doc-cards { display: grid; gap: clamp(14px, 2vw, 20px); margin-top: clamp(28px, 3.5vw, 40px); }
@media (min-width: 720px) { .doc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Riquadro basso: la foto in una colonna stretta a sinistra, testo e pulsante a destra */
.doc-card { display: flex; align-items: stretch; overflow: hidden; border: 2px solid var(--u-100); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s ease; }
.doc-card:hover { border-color: var(--u); color: var(--ink); transform: translateY(-2px); }
.doc-card:focus-visible { outline: 3px solid var(--u); outline-offset: 3px; }
.doc-card img { display: block; width: clamp(96px, 22%, 150px); flex-shrink: 0; min-height: 100%; object-fit: cover; object-position: center 38%; }
.doc-card-body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; padding: 14px 16px; line-height: 1.4; font-size: .92rem; }
.doc-card-body strong { font: 800 1.05rem/1.25 var(--f-head); color: var(--u-ink); }
.doc-card-action { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin-top: 8px; padding: .45em .95em; border-radius: 999px; background: var(--u); color: #fff; font-weight: 700; font-size: .85rem; }
.doc-card:hover .doc-card-action { background: var(--u-ink); }
.doc-card-action .icon { width: 15px; height: 15px; }
@media print { .doc-cards { display: none; } }

/* Footer: Made with ♥ by Seppia, su una riga a sé a sinistra (come su jamboree.it): il pulsante fluttuante in basso a destra non lo copre */
.footer-bottom .made { color: rgba(255,255,255,.75); }
/* Il cuore batte: due colpi vicini e una pausa, come un battito vero; fermo per chi ha chiesto meno movimento */
.footer-bottom .made .heart { color: #E5484D; display: inline-block; transform-origin: 50% 55%; animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 28%, 100% { transform: scale(1); } 7% { transform: scale(1.3); } 14% { transform: scale(1); } 21% { transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .footer-bottom .made .heart { animation: none; } }
.footer-bottom .made a { color: inherit; font-weight: inherit; } /* «Seppia» con lo stesso tono di «Made with» e delle altre scritte */
.footer-bottom .made a:hover { color: #fff; }

/* Seguici sui social, su fondo bianco: pulsanti pieni di viola chiaro con il bordo viola, così si staccano dallo sfondo (il badge Google resta bianco) */
.section.insta .social-row a { background: var(--viola-100); border: 2px solid var(--viola-300); box-shadow: 0 3px 0 var(--viola-300); }
.section.insta .social-row a:hover { background: #fff; border-color: var(--viola); box-shadow: 0 3px 0 var(--viola); }
.section.insta .social-txt strong { color: var(--viola-800); }
.section.insta .social-txt small { color: var(--text); }
.section.insta .social-go { background: #fff; }
.section.insta .g-rating { border-color: #fff; }

/* Tabelle su tablet e telefono: una scheda per riga, con l'anno come titolo e sotto solo le voci compilate (etichette e classi da main.js).
   Senza JavaScript e in stampa restano tabelle. */
.md-lab { display: none; }
@media screen and (max-width: 860px) {
  .md-table.is-cards { overflow: visible; border: 0; border-radius: 0; }
  .md-table.is-cards table { display: block; font-size: .95rem; }
  .md-table.is-cards thead { display: none; }
  .md-table.is-cards tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
  .md-table.is-cards tr { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: 0 1px 2px rgba(36,19,63,.06), 0 4px 12px rgba(36,19,63,.06); }
  .md-table.is-cards tr[hidden] { display: none; }
  .md-table.is-cards tbody tr:nth-child(n) td { background: none; }
  .md-table.is-cards td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: baseline; padding: 9px 14px; border-top: 1px solid var(--line); }
  .md-table.is-cards td.is-empty { display: none; }
  .md-table.is-cards .md-lab { display: block; font-size: .8rem; font-weight: 600; line-height: 1.35; color: var(--muted); }
  .md-table.is-cards .md-val { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
  /* la prima cella fa da titolo */
  .md-table.is-cards tbody tr:nth-child(n) td:first-child { display: block; padding: 10px 14px; border-top: 0; background: var(--u-100, var(--viola-100)); font: 800 1.02rem/1.25 var(--f-head); color: var(--ink); white-space: normal; }
  /* Albo d'oro: posizione e squadriglia sulla stessa riga, sotto le tre medaglie affiancate */
  .md-table.is-cards table:has(.medal) tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #fff; }
  .md-table.is-cards table:has(.medal) tbody tr:nth-child(n) td:first-child { grid-column: span 1; padding-right: 0; }
  .md-table.is-cards table:has(.medal) tbody tr:nth-child(n) td:nth-child(2) { grid-column: span 5; display: block; padding: 10px 14px 10px 4px; border-top: 0; background: var(--u-100, var(--viola-100)); font: 800 1.02rem/1.25 var(--f-head); color: var(--ink); }
  .md-table.is-cards table:has(.medal) td:nth-child(2) .md-lab { display: none; }
  .md-table.is-cards table:has(.medal) td:nth-child(n+3) { grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 12px; border-top: 0; text-align: center; }
  .md-table.is-cards table:has(.medal) .md-lab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .76rem; }
  .md-table.is-cards table:has(.medal) .md-lab .medal { margin: 0; }
  .md-table.is-cards table:has(.medal) td:nth-child(n+3) .md-val { font: 800 1.15rem/1.1 var(--f-head); color: var(--ink); }
}

/* Menu sopra le foto: l'ombra non finisce sul bordo del menu ma continua sotto, sfumando (pseudo-elemento più alto del menu, non intercetta i clic) */
.site-header::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: calc(100% + 72px); pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(180deg, rgba(25,15,38,.62) 0%, rgba(25,15,38,.46) 40%, rgba(25,15,38,.28) 62%, rgba(25,15,38,.12) 82%, rgba(25,15,38,0) 100%); }
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) { background: transparent; }
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden])))::before { opacity: 1; }

/* Footer su tablet, due colonne per due righe: «Comunità Capi» sulla stessa riga dell'ultima riga dell'indirizzo; «Utilità» e le sue voci alla stessa altezza di «Collegamenti utili» */
@media (min-width: 641px) and (max-width: 1000px) {
  .footer-brand p { margin-bottom: 0; }
  .footer-grid > div:nth-child(2) { align-self: end; }
  .footer-grid > div:nth-child(3) { padding-top: 21px; }
  .footer-grid > div:nth-child(3) ul, .footer-ext ul { gap: 10px; }
  .footer-ext { align-self: start; }
}

/* Fuoco da tastiera: l'anello scuro vale anche per i link e i pulsanti che hanno una loro ombra (schede, social, «Chi siamo» in home),
   che altrimenti la terrebbero al posto dell'anello. Solo su link e pulsanti: i campi dei moduli hanno già il bordo viola */
:is(a, button, summary, [tabindex]):focus-visible { box-shadow: 0 0 0 2px var(--ink) !important; }

/* Giallo su bianco non si legge (contrasto 1,6:1, WCAG 1.4.3): nel Branco i testi nel colore di branca usano il giallo scuro (--u-ink)
   e le etichette su fondo giallo il testo scuro. Le altre branche restano com'erano: verde, rosso e blu reggono il bianco */
.unit-giallo :is(.unit-text > h2.stitched, .unit-title-name, .unit-meta .kicker, .age-years, .age-more, .lpm-text > p:first-of-type em) { color: var(--u-ink); }
.unit-giallo .cell-tag { color: var(--ink); }
/* Slider di foto (Iscrizioni, Co.Ca.): il comando pausa sta nella riga dei pallini, dopo l'ultimo, con lo stesso simbolo dei caroselli (WCAG 2.2.2) */
.ps-dots { align-items: center; }
.ps-dots .ps-pause { width: 24px; height: 24px; margin-left: 4px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--viola); cursor: pointer; }
.ps-dots .ps-pause:hover, .ps-dots .ps-pause:focus-visible { background: var(--giallo); color: var(--ink); }
.ps-dots .ps-pause span { width: 7px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.ps-dots .ps-pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }

/* Moduli: campo sbagliato con il bordo rosso e il messaggio sotto; nell'elenco in alto ogni voce porta al suo campo */
.contact-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--rosso); }
.contact-form .field-error { color: var(--rosso-ink); font-weight: 600; font-size: .85rem; line-height: 1.35; }
.contact-form .check .field-error { flex-basis: 100%; }
.contact-form .check { flex-wrap: wrap; }
.form-errors a { color: inherit; font-weight: 600; }
.form-errors:focus { outline: none; box-shadow: 0 0 0 3px #F3B8B6; }

/* «GRUPPO» sull'intestazione bianca (pagina scorsa, menu o ricerca aperti, pagine senza foto in apertura): verde scurito quanto basta
   per leggersi a 12 px (5:1 sul bianco, WCAG 1.4.3); sopra le foto, con l'intestazione trasparente, resta il verde del logo.
   «SCOUT» resta sempre nel giallo del logo (#FDC400), per scelta: sul bianco il contrasto è 1,6:1, il link ha comunque la sua etichetta */
:root { --verde-logo-testo: #147A4E; }
.site-header .brand-text .brand-g { color: var(--verde-logo-testo) !important; }
.site-header .brand-text .brand-s { color: var(--giallo-logo) !important; }
body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) .brand-text .brand-g { color: var(--verde-logo) !important; }

/* Tratteggio sotto la voce di menu aperta (computer): trattini sempre interi. Il motivo verde-giallo (22 px con il suo spazio) si ripete
   un numero intero di volte nella larghezza della sottolineatura, allungando o accorciando di poco i trattini (background-repeat: round),
   e comincia e finisce con un trattino: lo spazio finale del motivo è compensato dal margine destro più stretto di 4 px */
@media (min-width: 1181px) {
  .nav-link[aria-current="page"]::after, .has-mega.is-active > .mega-toggle::after,
  body.header-overlay:not(.nav-open) .site-header:not(.is-scrolled):not(:has(.has-mega.is-open)):not(:has(.search-panel:not([hidden]))) :is(.nav-link[aria-current="page"], .has-mega.is-active > .mega-toggle)::after {
    left: 14px; right: 10px;
    background-image: linear-gradient(90deg, var(--verde-logo) 0 7px, transparent 7px 11px, var(--giallo-logo) 11px 18px, transparent 18px 22px);
    background-size: 22px 100%; background-repeat: round; background-position: 0 0;
  }
}

/* --- Chi siamo (views/chi-siamo.php): stessa griglia 5/7 in tutte le sezioni; si apre con la frase del 1986 come epigrafe e si chiude con la quercia di B.-P. --- */
.cs-intro, .cs-head, .cs-how, .cs-history { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 72px); }
.cs-intro { align-items: start; }
.cs-intro-text .lead { color: var(--text); }
.cs-intro-text > p:last-child { margin-bottom: 0; }
.cs-intro-photo { margin: 0; }
/* slider dei momenti del Gruppo: stesso formato della foto che c'era prima */
.cs-intro-slider { --u: var(--viola); --u-ink: var(--viola); } /* pulsanti nel colore del Gruppo, non nel giallo degli altri slider */
.cs-intro-slider img { aspect-ratio: 3 / 2; }
/* cornice piena in alto a destra, come le foto incorniciate delle altre pagine */
.cs-intro-slider .carousel-track { box-shadow: 14px -14px 0 var(--viola), var(--shadow); }
@media (max-width: 620px) { .cs-intro-slider .carousel-track { box-shadow: 8px -8px 0 var(--viola), var(--shadow); } }
.cs-intro-photo img, .cs-split-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.cs-intro-photo img { aspect-ratio: 3 / 2; object-fit: cover; }
/* Il seme che germoglia sotto una linea di terra «cucita»: tratto sottile nel verde del fazzolettone, il seme nel suo giallo */
.cs-seed { max-width: 50rem; margin: 0 auto clamp(44px, 6vw, 76px); text-align: center; }
.cs-seed-art { display: block; width: min(280px, 72%); height: auto; margin: 0 auto 18px; overflow: visible; fill: none; stroke: var(--scarf-green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-seed-soil { stroke-dasharray: 9 7; opacity: .5; }
.cs-seed-leaf { fill: var(--verde-100); }
.cs-seed-grain { fill: var(--scarf-border); }
.cs-seed-vein { stroke-width: 1.1; }
.cs-seed p { margin: 0; font: italic 500 clamp(1.25rem, 2.3vw, 1.85rem)/1.35 var(--f-body); letter-spacing: -.005em; color: var(--viola-900); text-wrap: balance; }
.cs-seed cite { display: block; margin-top: .75em; font: 500 .92rem/1.3 var(--f-body); color: var(--muted); }
.cs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(20px, 3vw, 36px); margin: clamp(40px, 5vw, 64px) 0 0; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius); background: var(--viola-100); }
.cs-facts dt { font: 800 1rem/1.3 var(--f-head); color: var(--viola); }
.cs-facts dd { margin: 3px 0 0; }
.cs-facts-wide { grid-column: span 2; }
.cs-facts ul { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.cs-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.cs-facts li .icon { width: 18px; height: 18px; margin-top: .32em; color: var(--viola); }
.cs-facts strong { font-weight: 600; }
.cs-facts dd a { display: inline-block; margin-top: 8px; font-weight: 600; }
/* I dati del Gruppo con accanto la foto del distintivo: la foto si adatta all'altezza del riquadro, sui telefoni va sotto */
.cs-facts-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 25%, 300px); gap: clamp(14px, 2vw, 22px); margin-top: clamp(40px, 5vw, 64px); }
.cs-facts-row .cs-facts { margin: 0; }
.cs-facts-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
.cs-facts-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 62%; }
@media (max-width: 1100px) { .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cs-head { align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.cs-head h2 { margin: 0; }
.cs-head > p { margin: 0; max-width: 42rem; }

.cs-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 36px) clamp(20px, 2.4vw, 32px); }
.cs-points img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.cs-point-icon { position: relative; margin: -25px 0 12px 14px; box-shadow: 0 4px 14px rgba(36,19,63,.18); }
.cs-points img[src*="news-scout-in-cammino"] { object-position: 22% center; }
.cs-points img[src*="chi-siamo-promessa"] { object-position: center 43%; } /* foto verticale: restano i volti e la stretta di mano */
.cs-points h3 { margin-bottom: .4em; font-size: 1.18rem; }
.cs-points p { margin: 0; font-size: .97rem; }
.cs-how { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.cs-how h3 { margin-bottom: .4em; }
.cs-how .muted { margin: 0; font-size: .95rem; max-width: 34ch; }
.cs-how dl { display: grid; gap: 14px; margin: 0; }
.cs-how dl div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.cs-how dt { display: flex; align-items: center; gap: 10px; align-self: start; font: 800 1rem/1.25 var(--f-head); color: var(--ink); }
.cs-how-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--viola); }
.cs-how-icon svg { width: 19px; height: 17px; }
.cs-how dd { margin: 0; padding-top: 4px; }

/* Il cammino: una vera sequenza, quindi una linea sola «cucita» nei colori di branca (in verticale fino a 1000 px) */
.cs-path { --gap: clamp(16px, 2vw, 28px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
.cs-path li { position: relative; }
.cs-path li:not(:last-child)::before { content: ""; position: absolute; left: 34px; right: calc(-1 * var(--gap)); top: 33px; height: 3px; background: repeating-linear-gradient(90deg, var(--u) 0 12px, transparent 12px 19px); }
.cs-path a { position: relative; display: block; color: var(--text); text-decoration: none; }
.cs-path a:hover { color: var(--text); }
.cs-path-mark { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 16px; border: 3px solid var(--u); border-radius: 50%; background: #fff; }
.cs-path-mark .unit-icon { width: 40px; height: 40px; }
.cs-path-mark .unit-icon-img { width: 54px; height: 54px; }
.cs-path-age { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--u-100); color: var(--u-ink); font: 700 .82rem/1.3 var(--f-body); }
.cs-path h3 { margin: .55em 0 .15em; font-size: 1.22rem; }
.cs-path a:hover h3 { color: var(--u-ink); text-decoration: underline; text-underline-offset: .18em; }
.cs-path-who { display: block; font-size: .92rem; font-weight: 600; color: var(--u-ink); }
.cs-path p { margin: .55em 0 0; font-size: .95rem; }

.cs-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
.cs-split-photo { margin: 0; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5em; }

.cs-world { background: var(--viola-900); color: rgba(255,255,255,.9); }
.cs-world .kicker { color: var(--giallo); }
.cs-world h2, .cs-world strong { color: #fff; }
.cs-stats { list-style: none; margin: 0; padding: clamp(22px, 3vw, 32px) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 40px); border-block: 1px solid rgba(255,255,255,.22); }
.cs-stats strong { display: block; font: 800 clamp(1.45rem, 2.5vw, 2rem)/1.12 var(--f-head); letter-spacing: -.02em; color: var(--giallo); }
.cs-stats span { display: block; margin-top: 6px; font-size: .95rem; }
.cs-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(32px, 4vw, 48px); }
.cs-link { display: block; color: #fff; text-decoration: none; }
.cs-link img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 14px; border-radius: var(--radius); }
.cs-link-label { display: block; font-size: .9rem; font-weight: 600; color: var(--giallo); }
.cs-link strong { display: block; margin: 2px 0 4px; font: 800 1.3rem/1.2 var(--f-head); }
.cs-link-text { display: block; font-size: .95rem; color: rgba(255,255,255,.88); }
.cs-link:hover { color: #fff; }
.cs-link:hover strong { color: var(--giallo); text-decoration: underline; text-underline-offset: .18em; }

.cs-history { align-items: start; }
/* Foto d'archivio: riquadro sfalsato e distintivo delle foto accanto alle FAQ (.unit-faq-photo), cornice bianca come su /storia e proporzioni originali */
.cs-history-photo.unit-faq-photo { position: relative; top: auto; }
.cs-history-photo.unit-faq-photo > img { height: auto; aspect-ratio: 749 / 490; border: 8px solid #fff; }
.cs-history-photo .unit-badge { width: 96px; height: 96px; padding: 3px; border: 4px solid #fff; background: #008001; } /* lo stesso verde del fondo del logo ASCI: il cerchio resta pieno */
.cs-history-photo .unit-badge img.badge-logo { width: 82px; height: 82px; object-fit: contain; }
.cs-history .cs-actions { justify-content: center; margin-top: 48px; padding-right: 16px; } /* centrato sotto la foto e il distintivo: il riquadro sfalsato occupa 16 px a destra */
.cs-history-list { max-width: none; }
.cs-history-list .history-timeline { margin: 0; }

.cs-cta .cs-actions { flex-shrink: 0; margin-top: 0; }
.cs-closing::before { background: radial-gradient(ellipse 72% 85% at 50% 50%, rgba(36,19,63,.88), rgba(36,19,63,.58)); } /* foto molto fitta: testo su fondo pieno, fazzolettoni visibili ai lati */
.cs-closing blockquote p { font-size: clamp(1.05rem, 1.8vw, 1.3rem); }

@media (max-width: 1000px) {
  .cs-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-path { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .cs-path a { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 18px; }
  .cs-path-mark { margin-bottom: 0; }
  .cs-path li:not(:last-child)::before { left: 33px; right: auto; top: 34px; bottom: -28px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--u) 0 12px, transparent 12px 19px); }
}
@media (max-width: 860px) {
  .cs-intro, .cs-head, .cs-how, .cs-history, .cs-split { grid-template-columns: minmax(0, 1fr); }
  .cs-intro-text { margin-bottom: 24px; }
  .cs-head { row-gap: 14px; }
  .cs-how { row-gap: 20px; }
  .cs-how .muted { max-width: none; }
  .cs-split, .cs-history { row-gap: 28px; }
  .cs-facts-row { grid-template-columns: minmax(0, 1fr); }
  .cs-facts-photo { aspect-ratio: 4 / 3; }
  .cs-facts-photo img { object-position: 0% 78%; }
  .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cs-links { grid-template-columns: minmax(0, 1fr); }
  .cs-link img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .cs-points, .cs-facts { grid-template-columns: minmax(0, 1fr); }
  .cs-facts { gap: 16px; }
  .cs-facts-wide { grid-column: auto; }
  .cs-how dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ==========================================================================
   Accessibilità: pulsante e pannello nell'intestazione (a11y_panel() in app/partials.php, logica in main.js),
   modi di lettura scelti dal pannello (attributi data-a11y-* su <html>, messi da a11y-init.js) e pagina /accessibilita
   ========================================================================== */
/* Atkinson Hyperlegible, del Braille Institute (SIL OFL, licenza in assets/fonts/atkinson-hyperlegible-OFL.txt; file da @fontsource/atkinson-hyperlegible 5.3.0).
   Il browser lo scarica solo se qualcuno sceglie «Carattere più leggibile» */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); }

/* Logo del footer: il link è largo quanto l'immagine, e l'anello di fuoco abbraccia solo lei */
.footer-logo-link { display: block; width: fit-content; margin-bottom: 20px; }
.footer-brand .footer-logo-link .footer-logo { margin-bottom: 0; }

/* Pulsanti fissi in basso a destra, dall'alto: Torna su, Accessibilità, WhatsApp. --float-lift li alza sopra il banner dei cookie sul telefono (main.js) */
:root { --float-base: clamp(14px, 2.5vw, 28px); --float-lift: 0px; }
/* Il fuoco da tastiera non finisce sotto i pulsanti fissi (WCAG 2.4.11) */
html { scroll-padding-bottom: 200px; }
.wa-chat { bottom: calc(var(--float-base) + var(--float-lift)); }
.a11y-toggle { position: fixed; right: var(--float-base); bottom: calc(var(--float-base) + var(--float-lift) + 62px); z-index: 60; width: 50px; height: 50px; border: 2px solid #fff; border-radius: 50%; background: var(--viola); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(36,19,63,.3); transition: background .2s; }
.a11y-toggle[hidden] { display: none; }
.a11y-toggle .icon { width: 28px; height: 28px; }
/* Fazzolettone dell'omino scout (icona accessibility): verde con il bordo giallo come quello del Gruppo; in alto contrasto prende i colori del tema */
.icon-fazzolettone { fill: var(--scarf-green); stroke: var(--scarf-border); }
html[data-a11y-contrast] .icon-fazzolettone { fill: var(--hc-bg); stroke: var(--hc-fg); }
.a11y-toggle:hover, .a11y-toggle[aria-expanded="true"] { background: var(--viola-800); }
.to-top { bottom: calc(var(--float-base) + var(--float-lift) + 124px); }
/* Senza il numero di WhatsApp si scende di un posto */
.float-actions:not(:has(.wa-chat)) .a11y-toggle { bottom: calc(var(--float-base) + var(--float-lift)); }
.float-actions:not(:has(.wa-chat)) .to-top { bottom: calc(var(--float-base) + var(--float-lift) + 62px); }
/* Sul telefono il pannello aperto ha bisogno del fondo dello schermo: il banner dei cookie torna quando si chiude */
@media (max-width: 640px) {
  body:has(.a11y-panel:not([hidden])) .cookie-banner { visibility: hidden; }
}
/* Con il menu del telefono aperto la pagina dietro è inerte: i pulsanti fissi non funzionerebbero */
body.nav-open .float-actions > * { visibility: hidden; }
/* Le frecce dello slider della home non stanno mai nella colonna dei pulsanti fissi. Sugli schermi larghi il margine si azzera da solo */
.slider-arrows { margin-right: max(0px, calc(var(--float-base) + 62px - max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter)))); }
@media (max-width: 400px) {
  .slider-controls { gap: 8px; }
  .slider-dots { gap: 4px; }
}

.a11y-panel { position: fixed; right: var(--float-base); bottom: calc(var(--float-base) + var(--float-lift) + 124px); z-index: 75; width: min(380px, calc(100vw - 2 * var(--float-base))); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--text); border-top: 5px solid var(--viola); border-radius: var(--radius); box-shadow: 0 2px 6px rgba(36,19,63,.12), 0 18px 48px rgba(36,19,63,.24);
  padding: 18px 22px 16px; font: 400 .95rem/1.4 var(--f-body); text-align: left; }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.a11y-title { font: 800 1.25rem/1.2 var(--f-head); color: var(--ink); margin: 0; align-self: center; }
.a11y-close { flex: none; width: 44px; height: 44px; margin: -6px -10px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.a11y-close:hover { background: var(--viola-50); color: var(--viola); }
.a11y-seg { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.a11y-seg legend { padding: 0; margin-bottom: 6px; font-weight: 600; color: var(--ink); }
.a11y-seg > div { display: flex; flex-wrap: wrap; gap: 6px; }
.a11y-seg label { position: relative; flex: 1 1 auto; cursor: pointer; }
.a11y-seg input, .a11y-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.a11y-seg span { display: grid; place-items: center; min-height: 44px; padding: 6px 8px; border: 1.5px solid var(--viola-600); border-radius: 8px; color: var(--ink); font-weight: 600; text-align: center; line-height: 1.15; transition: background .15s, color .15s; }
.a11y-seg label:hover span { background: var(--viola-50); }
.a11y-seg input:checked + span { background: var(--viola); border-color: var(--viola); color: #fff; }
.a11y-switches { display: grid; margin-bottom: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.a11y-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; color: var(--ink); font-weight: 600; cursor: pointer; }
.a11y-switch i { flex: none; position: relative; width: 44px; height: 24px; border: 2px solid var(--viola-600); border-radius: 999px; background: #fff; transition: background .15s; }
.a11y-switch i::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--viola-600); transition: transform .15s; }
.a11y-switch input:checked + i { background: var(--viola); border-color: var(--viola); }
.a11y-switch input:checked + i::before { transform: translateX(20px); background: #fff; }
.a11y-seg input:focus-visible + span, .a11y-switch input:focus-visible + i { outline: 3px solid var(--giallo); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.a11y-reset { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--viola-600); border-radius: 8px; background: #fff; color: var(--viola); font: 600 .95rem/1.2 var(--f-body); cursor: pointer; }
.a11y-reset:hover { background: var(--viola-50); }
.a11y-note { margin: 12px 0 8px; color: var(--muted); font-size: .85rem; }
.a11y-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.a11y-links a { color: var(--viola); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; line-height: 1.7; }
@media print { .a11y-toggle, .a11y-panel { display: none !important; } }

/* --- Dimensione del testo: tutto il sito è in rem --- */
html[data-a11y-text="115"] { font-size: 115%; }
html[data-a11y-text="130"] { font-size: 130%; }
html[data-a11y-text="150"] { font-size: 150%; }
/* Con il testo grande l'intestazione va su due righe invece di uscire dallo schermo. Il logo resta della sua misura: i bottoni del telefono devono starci */
html[data-a11y-text] .header-inner { flex-wrap: wrap; row-gap: 0; }
@media (min-width: 1181px) {
  html[data-a11y-text] .header-actions { order: 2; margin-left: auto; }
  html:is([data-a11y-text="130"], [data-a11y-text="150"]) .main-nav { order: 3; flex: 1 0 100%; margin-left: 0; padding-bottom: 6px; }
}
html[data-a11y-text] :is(h1, h2, h3) { hyphens: auto; }
html[data-a11y-text="150"] h1 { font-size: clamp(2rem, 10.5vw, 3.6rem); }
html[data-a11y-text] .brand-text strong { font-size: 24px; }
html[data-a11y-text] .brand-text small { font-size: 12px; }
@media (max-width: 640px) {
  html[data-a11y-text] .header-inner { flex-wrap: nowrap; }
  html[data-a11y-text] .brand-text strong { font-size: 20px; }
  html[data-a11y-text] .brand-text small { font-size: 9.6px; }
}
html[data-a11y-text] .link-more, html[data-a11y-spacing] .link-more { white-space: normal; }
/* --- Testo più spaziato: i valori del criterio WCAG 1.4.12. Il logo resta com'è --- */
html[data-a11y-spacing] :where(body *):not(.brand, .brand *) { letter-spacing: .06em !important; word-spacing: .16em !important; }
html[data-a11y-spacing] :where(p, li, dd, dt, td, th, blockquote, label, figcaption, summary, legend) { line-height: 1.9 !important; }
html[data-a11y-spacing] :where(h1, h2, h3, h4) { line-height: 1.35 !important; }
html[data-a11y-spacing] :where(main p) { margin-bottom: 1.8em; }
/* --- Carattere più leggibile --- */
html[data-a11y-font] { --f-head: "Atkinson Hyperlegible", var(--f-sistema, system-ui), sans-serif; --f-body: "Atkinson Hyperlegible", var(--f-sistema, system-ui), sans-serif; --f-quote: "Atkinson Hyperlegible", var(--f-sistema, system-ui), sans-serif; }
/* --- Sottolinea tutti i link --- */
html[data-a11y-links] a:not(.btn, .brand, .skip) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .18em !important; }
/* --- Ferma animazioni e scorrimenti (gli slider li ferma main.js) --- */
html[data-a11y-motion] { scroll-behavior: auto !important; }
html[data-a11y-motion] *, html[data-a11y-motion] *::before, html[data-a11y-motion] *::after { animation: none !important; transition: none !important; }

/* --- Alto contrasto, chiaro o scuro: un solo colore di testo su un solo colore di fondo, in tutto il sito ---
   Si azzerano fondi, sfumature e ombre; le foto restano, tranne quelle sotto i testi, che si attenuano. I :where tengono bassa la specificità,
   così le eccezioni qui sotto vincono senza gare. Mappe e immagini restano fuori */
html[data-a11y-contrast="chiaro"] { --hc-bg: #fff; --hc-fg: #000; --hc-link: #00339A; --hc-photo: .16; color-scheme: light; }
html[data-a11y-contrast="scuro"] { --hc-bg: #000; --hc-fg: #fff; --hc-link: #FFE14D; --hc-photo: .3; color-scheme: dark; }
html[data-a11y-contrast] { --verde-logo: var(--hc-fg); --verde-logo-testo: var(--hc-fg); --giallo-logo: var(--hc-fg); }
html[data-a11y-contrast], html[data-a11y-contrast] body { background: var(--hc-bg) !important; color: var(--hc-fg) !important; }
html[data-a11y-contrast] :where(body *):not(:where(.leaflet-container, .leaflet-container *)) { color: inherit !important; }
html[data-a11y-contrast] :where(body *):not(:where(img, picture, video, iframe, canvas, svg, svg *, .leaflet-container, .leaflet-container *)) {
  background-color: transparent !important; background-image: none !important; border-color: var(--hc-fg) !important;
  box-shadow: none !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-a11y-contrast] :where(body *)::before, html[data-a11y-contrast] :where(body *)::after { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
/* Ciò che sta sopra la pagina ha bisogno di un fondo pieno */
html[data-a11y-contrast] :is(.site-header, .mega, .search-panel, .a11y-panel, .a11y-toggle, .cookie-banner, .lightbox, .to-top, .wa-chat, .section-subnav, .skip, .subnav-list) { background-color: var(--hc-bg) !important; }
html[data-a11y-contrast] .site-header { border-bottom: 2px solid var(--hc-fg) !important; }
html[data-a11y-contrast] .a11y-panel, html[data-a11y-contrast] .cookie-banner, html[data-a11y-contrast] .mega, html[data-a11y-contrast] .float-actions :is(.a11y-toggle, .to-top, .wa-chat) { border: 2px solid var(--hc-fg) !important; }
@media (max-width: 1180px) { html[data-a11y-contrast] .main-nav { background-color: var(--hc-bg) !important; border-bottom: 2px solid var(--hc-fg) !important; } }
/* Le foto sotto i testi */
html[data-a11y-contrast] :is(.page-hero-img, .hero-img, .slide-img, .cta-band > img, .support > img, .quote-band > img, .page-photo-band.has-quote > img, .path-card > img, .lpm-messaggio .lpm-art img, .age-photo img:not(.unit-icon), .mega-card-photo) { opacity: var(--hc-photo) !important; }
/* I link si riconoscono da colore e sottolineatura; i pulsanti dal bordo */
html[data-a11y-contrast] .staff-role { color: inherit !important; }
html[data-a11y-contrast] a:not(.btn, .brand, .leaflet-container a) { color: var(--hc-link) !important; text-decoration: underline !important; }
html[data-a11y-contrast] [aria-current]:not(.dot, button) { font-weight: 700 !important; text-decoration: underline !important; text-decoration-thickness: 3px !important; }
html[data-a11y-contrast] :is(.btn, .tag, .badge) { border: 2px solid var(--hc-fg) !important; }
html[data-a11y-contrast] .btn:hover { background-color: var(--hc-fg) !important; color: var(--hc-bg) !important; }
html[data-a11y-contrast] :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { background-color: var(--hc-bg) !important; border: 2px solid var(--hc-fg) !important; }
html[data-a11y-contrast] ::placeholder { color: var(--hc-fg) !important; opacity: .85; }
html[data-a11y-contrast] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--hc-fg); }
/* Anello del fuoco: sempre doppio, con i due colori del modo */
html[data-a11y-contrast] :focus-visible, html[data-a11y-contrast] .a11y-seg input:focus-visible + span, html[data-a11y-contrast] .a11y-switch input:focus-visible + i { outline: 3px solid var(--hc-fg) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px var(--hc-bg) !important; }
/* Disegni che vivono del fondo: simboli delle branche (maschere), menu, pallini */
html[data-a11y-contrast] :is(.unit-icon:not(img), .uicon) { background-color: currentColor !important; }
html[data-a11y-contrast] .nav-toggle span:first-child, html[data-a11y-contrast] .nav-toggle span:first-child::before, html[data-a11y-contrast] .nav-toggle span:first-child::after { background: var(--hc-fg) !important; }
html[data-a11y-contrast] .nav-open .nav-toggle span:first-child { background: transparent !important; }
html[data-a11y-contrast] :is(.slider-dots .dot, .ps-dots button:not(.ps-pause), .carousel-dots button)::before { background: var(--hc-fg) !important; opacity: .55; }
html[data-a11y-contrast] :is(.slider-dots .dot.is-active, .ps-dots button[aria-current], .carousel-dots button[aria-current], .carousel-dots button.is-active)::before { opacity: 1; }
html[data-a11y-contrast] .carousel-pause[aria-pressed="true"] span { border-color: transparent transparent transparent currentColor !important; }
/* Controlli del pannello */
html[data-a11y-contrast] .a11y-seg input:checked + span { background-color: var(--hc-fg) !important; color: var(--hc-bg) !important; }
html[data-a11y-contrast] .a11y-switch i::before { background: var(--hc-fg) !important; }
html[data-a11y-contrast] .a11y-switch input:checked + i { background-color: var(--hc-fg) !important; }
html[data-a11y-contrast] .a11y-switch input:checked + i::before { background: var(--hc-bg) !important; }
/* Logo: nella versione che si vede su quel fondo (le scritte del logo altrove hanno il colore fisso con !important) */
html[data-a11y-contrast] .site-header .brand-text :is(.brand-g, .brand-s) { color: inherit !important; }
html[data-a11y-contrast="chiaro"] .brand .logo-light { display: none !important; }
html[data-a11y-contrast="chiaro"] .brand .logo-dark { display: block !important; }
html[data-a11y-contrast="scuro"] .brand .logo-dark { display: none !important; }
html[data-a11y-contrast="scuro"] .brand .logo-light { display: block !important; }
html[data-a11y-contrast="chiaro"] .footer-logo { filter: invert(1); }
html[data-a11y-contrast="scuro"] :is(img[src*="albenga5-colore"], img[src*="emblema-colore"], img[src*="agesci-viola"], img[src*="aic-logo"]) { background: #fff !important; border-radius: 6px; padding: 3px; }

/* --- Moduli e slider: reggono testo grande e schermi stretti (WCAG 1.4.4, 1.4.10) --- */
.contact-form, .contact-form label { grid-template-columns: minmax(0, 1fr); }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea { width: 100%; max-width: 100%; min-width: 0; }
.contact-form .field-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.contact-form .check > span { flex: 1 1 0; min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 400px) { .slider-dots { flex: 1 1 0; min-width: 0; flex-wrap: wrap; } .slider-dots .dot { width: 20px; } .slider-dots .dot.is-active { width: 40px; } .slider-arrows button { width: 42px; height: 42px; } }

html[data-a11y-text] .section.path .coca-banner { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; aspect-ratio: auto; min-height: 0; }
html[data-a11y-text] .section.path .coca-banner .coca-body { flex: none; width: 100%; min-width: 0; }
html[data-a11y-text] .deep-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important; }
html[data-a11y-text] .unit-when > strong { font-size: clamp(1.4rem, 8vw, 2.2rem); hyphens: auto; }
html[data-a11y-text] main :is(p, li, strong, a, span, td, th, dd, dt, h4) { overflow-wrap: break-word; }
/* Una scritta su una riga sola non può superare lo schermo: con il testo grande, spaziato o nel carattere più largo va a capo */
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) :is(.staff-role, .cell-tag, .sp-ref) { white-space: normal; max-width: 100%; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .cell-tag { margin-left: 0; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .btn { max-width: 100%; line-height: 1.2; text-align: center; }
/* Le schede dei capi crescono con il testo, senza uscire dallo schermo */
html[data-a11y-text] .staff-card { width: min(11.125rem, 100%); }
/* La colonna laterale delle unità non si allarga oltre lo schermo per seguire il contenuto */
.unit-side, .unit-side-links { grid-template-columns: minmax(0, 1fr); }
.history-timeline li > * { min-width: 0; }
.support-inner > * { min-width: 0; }
@media (max-width: 480px) { .support-cf { padding: 22px 16px; } .support-cf strong { display: block; font-size: min(1.8rem, 9vw); } }

/* --- Pagina /accessibilita --- */
.a11y-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 8px; }
.a11y-actions [hidden] { display: none; }
.a11y-body h2 { scroll-margin-top: 96px; }
.a11y-body .prose h2:first-child { margin-top: 0; }
.a11y-verdict { padding: 14px 18px; border-left: 5px solid var(--giallo); background: var(--giallo-100); color: var(--ink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
#segnala { scroll-margin-top: 76px; }
.a11y-form-intro h3 { margin: 1.4em 0 .5em; }
.contact-form-intro.a11y-form-intro p:not(.kicker) { color: var(--text); }
.a11y-channels { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 10px; }
.a11y-channels li { display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.a11y-channels .icon { flex: none; margin-top: 3px; color: var(--viola); }
.a11y-channels a { color: var(--viola); font-weight: 600; }
.field-hint { display: block; margin: 0; color: var(--muted); font-size: .85rem; font-weight: 400; line-height: 1.4; }
.a11y-reply { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.a11y-reply legend { padding: 0; margin-bottom: 6px; font-weight: 700; color: var(--ink); }
/* Il riquadro della mappa (OpenStreetMap, Leaflet): i link si riconoscono anche senza il colore */
.leaflet-container .leaflet-control-attribution a { text-decoration: underline; }

/* Banner in evidenza in cima alle pagine (Impostazioni): sta prima della testata e scorre via con la pagina */
.site-banner { position: relative; z-index: 60; color: #fff; background: var(--viola); font-size: .95rem; line-height: 1.35; }
.site-banner-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; padding-block: 10px; }
.site-banner p { margin: 0; color: inherit; }
.site-banner strong { color: inherit; }
.site-banner-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.site-banner-btn:hover, .site-banner-btn:focus-visible { background: var(--ink); color: #fff; }
.site-banner-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.site-banner-verde { background: var(--verde-ink); }
.site-banner-rosso { background: var(--rosso); }
.site-banner-blu { background: var(--blu-ink); }
.site-banner-giallo { background: var(--giallo); color: var(--ink); }
.site-banner-giallo .site-banner-btn { background: var(--ink); color: #fff; }
.site-banner-giallo .site-banner-btn:hover, .site-banner-giallo .site-banner-btn:focus-visible { background: #fff; color: var(--ink); }
@media (max-width: 640px) { .site-banner-inner { justify-content: flex-start; } }
@media print { .site-banner, .maintenance-bar { display: none !important; } }
html[data-a11y-contrast] .site-banner { background: var(--hc-bg) !important; color: var(--hc-fg) !important; border-bottom: 2px solid var(--hc-fg); }

/* Manutenzione: la striscia per chi vede il sito lo stesso, e la pagina di cortesia per i visitatori */
.maintenance-bar { position: relative; z-index: 61; margin: 0; padding: 8px var(--gutter); background: var(--ink); color: #fff; font-size: .88rem; text-align: center; }
.maintenance-bar a { color: var(--giallo); font-weight: 700; }
.maintenance-page { min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 24px; background: var(--viola-900); color: #fff; }
.maintenance-card { max-width: 560px; text-align: center; }
.maintenance-card img { display: block; margin: 0 auto 22px; }
.maintenance-kicker { margin: 0 0 8px; color: var(--giallo); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.maintenance-card h1 { margin: 0 0 14px; color: #fff; font-size: clamp(2rem, 6vw, 3rem); }
.maintenance-text { margin: 0; font-size: 1.15rem; line-height: 1.5; color: rgba(255,255,255,.92); }
.maintenance-admin { margin: 34px 0 0; font-size: .88rem; }
.maintenance-admin a { color: rgba(255,255,255,.8); }

/* Chi siamo: il logo AGESCI, piccolo, accanto al nome dell'associazione */
.cs-facts-agesci { display: flex; align-items: flex-start; gap: 10px; }
.cs-facts-agesci img { flex: none; width: 32px; height: auto; margin-top: 4px; }

/* Chi siamo: il disegno del fazzolettone del Gruppo accanto alla sua descrizione */
.cs-scarf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cs-scarf { flex: none; width: 84px; height: auto; }

/* Chi siamo: «Vuoi entrare nel Gruppo?» su fondo viola chiaro, con il riquadro interno bianco */
.section.section-tint.cs-cta { background: var(--viola-100); }
.cs-cta .become { background: #fff; border-color: transparent; box-shadow: 0 6px 22px rgba(36,19,63,.08); }

/* La nostra storia e i suoi capitoli: fondo bianco */
.page-band.page-storia, .page-band[class*="page-storia-"] { background: #fff; }
/* Lo Scoutismo e Baden-Powell: fondo bianco */
.page-band.page-chi-siamo-lo-scoutismo, .page-band.page-chi-siamo-baden-powell { background: #fff; }

/* Tutti i link che portano fuori dal sito: una freccia ↗ che al passaggio del mouse si sposta in alto a destra.
   :where() lascia la regola debole: vince chi ha già un suo ::after. Restano senza freccia i link fatti solo di icone o foto (social, WhatsApp, foto di Instagram). */
:where(a[target="_blank"][href^="http"]:not([href^="https://www.albenga5.org"], [href^="https://albenga5.org"], .wa-chat, .insta-avatar, .insta-polaroid, .md-zoom, .doc-card, .scout-org, .footer-social a, .g-rec a, .social-row a, .unit-national, .card-media, .news-card h3 a, .event-row h3 a, .cal-page, .polaroid-card, .mini-news, :has(> img:only-child), [aria-label]:empty))::after {
  content: "↗"; content: "↗" / ""; display: inline-block; margin-left: .35em; font-size: .85em; line-height: 1; transition: transform .15s; }
:where(a[target="_blank"][href^="http"]):hover::after, :where(a[target="_blank"][href^="http"]):focus-visible::after { transform: translate(2px, -2px); }
.footer-grid a[target="_blank"]::after { color: var(--giallo); opacity: .85; }
/* «Indicazioni per…» di solito ha →, che vuol dire «resta nel sito»: qui porta fuori */
.link-more[target="_blank"][href^="http"]::after { content: "↗"; content: "↗" / ""; }
/* I riquadri dei social e dei siti nazionali hanno già la loro freccia in un cerchio: si muove allo stesso modo */
.social-row a:hover .social-go, .social-row a:focus-visible .social-go,
.unit-national:hover .unit-national-go, .unit-national:focus-visible .unit-national-go { transform: translate(2px, -2px); }
/* I riquadri WOSM, WAGGGS e FIS: la stessa freccia accanto all'indirizzo */
.scout-org-go::after { content: "↗"; content: "↗" / ""; display: inline-block; margin-left: .35em; font-size: .85em; line-height: 1; transition: transform .15s; }
.scout-org:hover .scout-org-go::after, .scout-org:focus-visible .scout-org-go::after { transform: translate(2px, -2px); }
.unit-national-go .icon { transform: rotate(-45deg); }

/* Ricerca in tutto il sito (/cerca): a ogni riga l'anteprima a sinistra e il testo a destra. minmax(0, 1fr) lascia andare a capo i titoli lunghi, così non c'è scorrimento laterale */
.cerca-filters { margin-bottom: 8px; }
.cerca-filters small { font-weight: 500; opacity: .8; }
.cerca-group { margin-top: 36px; }
.cerca-group > h2 { font-size: 1.45rem; padding-bottom: 10px; border-bottom: 2px solid var(--line); margin-bottom: 0; }
.cerca-group > h2 small { font: 600 .95rem var(--f-body); color: var(--muted); letter-spacing: 0; }
.cerca-list { list-style: none; margin: 0; padding: 0; }
.cerca-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cerca-body { min-width: 0; }
.cerca-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--u-100, var(--viola-100)); color: var(--u-ink, var(--viola-800)); text-decoration: none; }
.cerca-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cerca-thumb img.img-fit { object-fit: contain; }
.cerca-thumb .card-placeholder .unit-icon { width: 48%; }
/* La prima pagina di un PDF: se ne vede la parte alta, su un foglio bianco con il bordo */
.cerca-thumb-pdf { background: #fff; border: 1px solid var(--line); }
.cerca-thumb-pdf img { object-position: top; }
.cerca-thumb-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--rosso-100); color: var(--rosso-ink); }
.cerca-thumb-doc .icon { width: 34px; height: 34px; }
.cerca-thumb-doc small { font: 700 .75rem/1 var(--f-body); letter-spacing: .06em; }
@media (max-width: 640px) {
  .cerca-item { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .cerca-thumb { aspect-ratio: 1; }
  .cerca-thumb-doc .icon { width: 26px; height: 26px; }
}
.cerca-item .tag .icon { width: 14px; height: 14px; }
.cerca-item h3 { font-size: 1.15rem; margin: 8px 0 4px; }
.cerca-item h3 a { color: var(--ink); text-decoration: none; }
.cerca-item h3 a:hover, .cerca-item h3 a:focus-visible { color: var(--viola); text-decoration: underline; }
.cerca-meta { margin: 0; color: var(--muted); font-size: .9rem; }
.cerca-snippet { margin: 8px 0 0; font-size: .97rem; line-height: 1.5; }
.cerca-item mark { background: var(--giallo-100); color: inherit; padding: 0 2px; border-radius: 3px; font-weight: 600; }
.cerca-more { margin: 14px 0 0; font-weight: 600; }
.cerca-more .icon { width: 16px; height: 16px; vertical-align: -3px; }

/* Home, «Contattaci» e «In programma»: titoli senza le frecce sotto */
.meet-contact .stitched::after, .meet-events .stitched::after { content: none; }
.meet-contact .stitched, .meet-events .stitched { padding-bottom: 4px; }
/* Citazione della home: niente barra, solo le virgolette nel cerchio viola a sinistra del testo */
.welcome-grid > .bp-quote { border-left: 0; border-image: none; padding: 0 0 0 52px; }
.welcome-grid > .bp-quote .bp-quote-icon { left: 0; top: 0; width: 36px; height: 36px; box-shadow: none; }
.welcome-grid > .bp-quote .bp-quote-icon svg { width: 15px; height: 15px; }

/* Citazioni: tutte in Newsreader corsivo (--f-quote), le firme restano nel font del testo */
.bp-quote p, .quote-band p, .page-photo-band blockquote p, .prose blockquote, .footer-brand blockquote, .motto-band blockquote,
.prose .bp-quotes blockquote, .prose .sp-pope blockquote, .prose .sp-quote blockquote, .prose .history-quote p, .prose .uf-bp p,
.cs-closing blockquote p, .prose .scout-value-card blockquote, .prose .lpm-messaggio blockquote {
  font-family: var(--f-quote); font-style: italic; font-weight: 400; letter-spacing: 0; }
.prose .bp-quotes blockquote, .prose .sp-pope blockquote { font-weight: 500; }
:is(.bp-quote, .quote-band, .page-photo-band, .prose, .footer-brand, .motto-band, .cs-closing) blockquote cite, .bp-quote cite { font-family: var(--f-body); font-style: normal; }

/* Occhielli: al posto della lineetta le stesse frecce dei titoli, più corte: sei frecce intere (due verdi, una gialla, due verdi, una gialla), disegno a parte
   perché le frecce si sovrappongono e tagliando quello lungo resterebbe un pezzo della sesta */
.kicker::before, .unit-meta .kicker::before { width: 43px; height: 10px; border-radius: 0; background: url(../img/frecce-occhiello.svg) left center / contain no-repeat; }

/* Titoli senza le frecce sotto: le frecce stanno ora davanti agli occhielli (.kicker::before). Anche lo spazio che le ospitava si stringe */
.stitched::after, .meet-events .stitched::after, .prose h2.stitched::after, .lpm-noart .lpm-text h2.stitched::after { content: none; }
.stitched { padding-bottom: 0; }

/* ===== Rifinitura grafica (novembre 2026) ===== */

/* Titoli e paragrafi senza parole sole in fondo: i titoli si dividono in righe di lunghezza simile
   («Il tuo 5×1000 fa crescere / lo scautismo»), i testi evitano l'ultima riga con una parola sola.
   Sui browser che non lo conoscono resta l'a capo normale. */
h1, h2, h3, .slide-title { text-wrap: balance; }
p, .lead, li, figcaption, blockquote { text-wrap: pretty; }
/* Nomi con il trattino (Baden-Powell) non spezzati a fine riga: li avvolge e_nobr() in app/helpers.php */
.nobr { white-space: nowrap; }

/* Slider della home: su schermo largo il sottotitolo resta nella parte velata a sinistra e non finisce sui volti;
   velatura un po' più piena dietro al testo, la foto resta pulita a destra */
@media (min-width: 761px) {
  .slide .lead { max-width: 30rem; }
  .slide::after { background: linear-gradient(90deg, rgba(36,19,63,.82) 0%, rgba(36,19,63,.6) 34%, rgba(36,19,63,.2) 62%, rgba(36,19,63,.04) 82%), linear-gradient(0deg, rgba(36,19,63,.6) 0%, transparent 45%); }
}

/* Comunità Capi in home: su schermo largo il testo resta sul bianco, senza passare sopra alle lettere gialle della foto */
@media (min-width: 861px) {
  .section.path .coca-banner .coca-body p:not(.kicker) { max-width: min(44ch, calc(52% - 40px)); }
}

/* Footer: la linea sotto «Resta aggiornato» è larga quanto il contenuto, non quanto il margine della pagina */
.footer-top { border-bottom: 0; background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)) var(--gutter) 100% / calc(100% - 2 * var(--gutter)) 1px no-repeat; }

/* Footer: link legali più facili da toccare (almeno 24 px, WCAG 2.5.8); su telefono centrati come il resto del footer */
.footer-links a, .footer-bottom .made a { display: inline-flex; align-items: center; min-height: 28px; }
@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer-links { justify-content: center; gap: 4px 20px; }
  .footer-links a, .footer-bottom .made a { min-height: 40px; }
}

/* Foto delle news in home (senza Instagram): tante colonne quante foto, fino a sei, senza caselle vuote a destra */
@media (min-width: 621px) { .insta-grid { grid-template-columns: repeat(var(--n, 6), 1fr); } }

/* Riquadri dei social: con quattro canali, dove non stanno tutti su una riga vanno due per riga, mai tre più uno da solo */
@media (max-width: 1000px) { .social-row:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* News che citano un articolo esterno (colonna news.external_url): nome del sito in vista accanto al link, e il pulsante nella pagina della news */
.mini-ext { font-size: .84rem; font-weight: 700; color: var(--viola); }
.related-latest .mini-ext { color: var(--viola-300); }
.external-read { margin: 28px 0 0; }
.external-read .btn { white-space: normal; text-align: center; }
.event-ext { font-weight: 700; color: var(--viola); white-space: nowrap; }
.external-btn { white-space: normal; text-align: center; }
/* Pagina oscurata (app/views/hidden-page.php): i due pulsanti uno accanto all'altro, a capo su telefono */
.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Telefono: le briciole di pane sono link brevi («Home», «Clan»): più alte, per toccarle senza sbagliare (WCAG 2.5.8) */
@media (max-width: 820px) {
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
  .crumbs { gap: 0 8px; margin-bottom: 16px; }
}
/* Eventi: il fuoco è a metà altezza, un po' più in alto si vedono anche le scintille */
.page-hero-img[src*="eventi-fuoco-di-bivacco-notte"] { object-position: center 42%; }
/* La foto è già notte fonda: il velo viola normale la spegne. Pieno a sinistra sotto il testo, leggero a destra sul fuoco.
   Sul telefono il testo copre tutta la larghezza e passa sopra il fuoco: resta il velo normale, per leggerlo bene */
@media (min-width: 821px) {
  .page-hero:has(.page-hero-img[src*="eventi-fuoco-di-bivacco-notte"])::before { background: linear-gradient(90deg, rgba(36,19,63,.88) 0%, rgba(36,19,63,.6) 42%, rgba(36,19,63,.12) 75%, rgba(36,19,63,.05) 100%); }
}