/* ============================================================
   OneDayStories — Storie a capitoli
   Design system per copertina storia + lettura capitoli.
   Header/footer sono del tema (Hello Elementor); qui si stilizza
   solo l'area contenuto. Prefisso .ods-.
   ============================================================ */

.ods-story,
.ods-reader,
.ods-storia-archive-main,
.odq-hub-page,
.ods-hub {
    --ods-purple: var(--brand-purple, #7a3ff2);
    --ods-purple-600: #6a2fe0;
    --ods-purple-050: #f3eefe;
    --ods-ink: #1b1830;
    --ods-body: #2b2840;
    --ods-muted: #6a6680;
    --ods-line: rgba(27, 24, 48, 0.1);
    --ods-gold: #e0a94a;
    --ods-gold-soft: #f0cd84;
    --ods-radius-lg: 24px;
    --ods-radius-md: 16px;
    --ods-radius-sm: 12px;
    --ods-shadow-lg: 0 32px 64px -28px rgba(50, 22, 78, 0.55), 0 12px 28px -16px rgba(0, 0, 0, 0.28);
    --ods-shadow-md: 0 12px 30px -16px rgba(27, 24, 48, 0.28);
    --ods-font-display: 'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, 'Times New Roman', serif;
    --ods-font-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --ods-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   Breadcrumb (condiviso storia + capitolo)
   ============================================================ */
.ods-breadcrumb {
    font-family: var(--ods-font-sans);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ods-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.15rem;
    margin: 0 0 1.4rem;
    padding-top: clamp(0.5rem, 1.4vw, 1rem);
}
.ods-breadcrumb a, .ods-breadcrumb a:visited { color: var(--ods-muted); text-decoration: none; transition: color 0.15s ease; }
.ods-breadcrumb a:hover { color: var(--ods-purple); }
.ods-breadcrumb-sep { opacity: 0.45; margin: 0 0.25rem; }
.ods-breadcrumb-current { color: var(--ods-ink); font-weight: 600; }

/* ============================================================
   COPERTINA STORIA
   ============================================================ */
/* Il contenitore resta a piena larghezza così l'hero può essere full-width;
   breadcrumb e corpo si incolonnano da soli (vedi sotto). */
.ods-story { font-family: var(--ods-font-serif); }

/* Breadcrumb: colonna centrata come il corpo, non più incollata al bordo. */
.ods-story > .ods-breadcrumb {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.1rem, 4vw, 1.6rem);
    padding-right: clamp(1.1rem, 4vw, 1.6rem);
    box-sizing: border-box;
}

/* ---- Hero scenografico ---- */
.ods-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(400px, 56vw, 620px);
    border-radius: 0; /* hero a pieno schermo: angoli vivi, non arrotondati */
    overflow: hidden;
    box-shadow: var(--ods-shadow-lg);
    isolation: isolate;
    margin-bottom: 2.6rem;
}
.ods-hero--img {
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
}
.ods-hero--plain { background: linear-gradient(150deg, #5a2fc2 0%, #33206a 55%, #170b34 100%); }
.ods-hero--plain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(55% 45% at 18% 12%, rgba(240, 205, 132, 0.28), transparent 70%),
        radial-gradient(45% 40% at 88% 22%, rgba(122, 63, 242, 0.55), transparent 70%),
        radial-gradient(45% 45% at 65% 95%, rgba(90, 200, 180, 0.20), transparent 70%);
}
.ods-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top, rgba(11, 6, 26, 0.94) 0%, rgba(11, 6, 26, 0.6) 30%, rgba(11, 6, 26, 0.08) 58%, rgba(11, 6, 26, 0.28) 100%),
        linear-gradient(to right, rgba(11, 6, 26, 0.45) 0%, transparent 55%);
}
.ods-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 780px;
    padding: clamp(1.6rem, 4vw, 3.2rem);
    color: #fff;
}
.ods-hero__eyebrow {
    font-family: var(--ods-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ods-gold-soft);
    margin: 0 0 0.7rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.ods-hero__title {
    font-family: var(--ods-font-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 5.4vw, 3.7rem);
    line-height: 1.03;
    letter-spacing: -0.018em;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.45);
}
.ods-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.3rem;
}
.ods-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--ods-font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
}
.ods-pill svg { width: 15px; height: 15px; flex: none; }

/* ---- Corpo copertina ---- */
.ods-story__body {
    max-width: 720px;
    margin: 0 auto;
    padding-left: clamp(1.1rem, 4vw, 1.6rem);
    padding-right: clamp(1.1rem, 4vw, 1.6rem);
    padding-bottom: clamp(1.5rem, 4vw, 3rem);
    box-sizing: border-box;
}

.ods-lead {
    font-family: var(--ods-font-serif);
    font-size: clamp(1.15rem, 1.5vw, 1.3rem);
    line-height: 1.75;
    color: var(--ods-body);
}
.ods-lead p { margin: 0 0 1.15rem; }
.ods-lead p:last-child { margin-bottom: 0; }
.ods-lead p:first-of-type {
    font-size: 1.08em;
    color: var(--ods-ink);
}

.ods-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; }
.ods-tag {
    font-family: var(--ods-font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ods-purple);
    background: var(--ods-purple-050);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
}

/* ---- CTA principale ---- */
.ods-cta,
a.ods-cta,
a.ods-cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--ods-font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, #8248ff, #6a2fe0);
    padding: 0.95rem 1.85rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(106, 47, 224, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin: 1.8rem 0 2.6rem;
}
a.ods-cta:hover,
a.ods-cta:focus { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(106, 47, 224, 0.72); color: #fff; }
.ods-cta__arrow { font-size: 1.15em; transition: transform 0.15s ease; }
a.ods-cta:hover .ods-cta__arrow { transform: translateX(3px); }

.ods-cta--ghost,
a.ods-cta--ghost,
a.ods-cta--ghost:visited {
    background: #fff;
    color: var(--ods-purple);
    border: 2px solid rgba(122, 63, 242, 0.3);
    box-shadow: none;
    margin: 0.4rem 0 0;
}
a.ods-cta--ghost:hover,
a.ods-cta--ghost:focus { background: var(--ods-purple-050); color: var(--ods-purple); transform: translateY(-1px); box-shadow: none; }

/* ---- Ascolta la storia (copertina, solo se c'è l'audio) ---- */
.ods-listen {
    margin: 1.8rem 0 0;
    padding: 1.1rem 1.2rem 1.2rem;
    background: var(--ods-purple-050);
    border-radius: var(--ods-radius-md);
    font-family: var(--ods-font-sans);
}
.ods-listen__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.85rem; }
.ods-listen__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: 999px;
    background: #fff;
    color: var(--ods-purple);
}
.ods-listen__icon .ods-feature-icon { width: 20px; height: 20px; }
.ods-listen__title {
    font-family: var(--ods-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ods-ink);
    margin: 0;
}
.ods-listen__meta { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--ods-muted); }
.ods-listen__player { display: block; width: 100%; }

/* ---- Indice capitoli ---- */
.ods-index { margin-top: 0.6rem; }
.ods-index__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--ods-line);
    padding-bottom: 0.7rem;
    margin-bottom: 0.3rem;
}
.ods-index__title {
    font-family: var(--ods-font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--ods-ink);
    margin: 0;
}
.ods-index__count { font-family: var(--ods-font-sans); font-size: 0.82rem; color: var(--ods-muted); }

.ods-toc { list-style: none; margin: 0; padding: 0; }
.ods-toc__item { border-bottom: 1px solid var(--ods-line); }
.ods-toc__link,
a.ods-toc__link,
a.ods-toc__link:visited {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 0.5rem;
    text-decoration: none;
    color: var(--ods-ink);
    border-radius: var(--ods-radius-sm);
    transition: background 0.15s ease, padding 0.15s ease;
}
a.ods-toc__link:hover,
a.ods-toc__link:focus { background: var(--ods-purple-050); padding-left: 1rem; padding-right: 1rem; color: var(--ods-ink); }
.ods-toc__num {
    font-family: var(--ods-font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ods-purple);
    opacity: 0.85;
    min-width: 2.1rem;
    line-height: 1;
}
.ods-toc__name { flex: 1; font-family: var(--ods-font-serif); font-size: 1.12rem; line-height: 1.35; }
.ods-toc__go {
    color: var(--ods-purple);
    font-size: 1.15rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
a.ods-toc__link:hover .ods-toc__go,
a.ods-toc__link:focus .ods-toc__go { opacity: 1; transform: translateX(0); }

.ods-empty { color: var(--ods-muted); font-style: italic; }

/* ============================================================
   PAGINA CAPITOLO (reader)
   ============================================================ */
.ods-reader {
    max-width: 760px;
    margin: 0 auto;
    padding-left: clamp(1.1rem, 4vw, 1.6rem);
    padding-right: clamp(1.1rem, 4vw, 1.6rem);
    box-sizing: border-box;
    font-family: var(--ods-font-serif);
}

.ods-reader__head { margin-bottom: 2.2rem; }
.ods-reader__eyebrow,
a.ods-reader__eyebrow,
a.ods-reader__eyebrow:visited {
    display: inline-block;
    font-family: var(--ods-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ods-purple);
    text-decoration: none;
    margin-bottom: 0.55rem;
}
a.ods-reader__eyebrow:hover { color: var(--ods-purple-600); text-decoration: underline; }
.ods-reader__title {
    font-family: var(--ods-font-display);
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--ods-ink);
    margin: 0 0 1.3rem;
}

.ods-progress { display: flex; align-items: center; gap: 0.85rem; }
.ods-progress__track {
    flex: 1;
    max-width: 280px;
    height: 6px;
    background: var(--ods-purple-050);
    border-radius: 999px;
    overflow: hidden;
}
.ods-progress__fill { display: block; height: 100%; background: linear-gradient(90deg, #8248ff, #6a2fe0); border-radius: 999px; }
.ods-progress__label { font-family: var(--ods-font-sans); font-size: 0.8rem; font-weight: 600; color: var(--ods-muted); white-space: nowrap; }

/* ---- Immagine del capitolo (opzionale) ---- */
.ods-chapter-image { margin: 0 0 2.2rem; }
.ods-chapter-image__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ods-radius-md);
    box-shadow: var(--ods-shadow-md);
}

/* ---- Prosa ---- */
/* Il fattore `--ods-tscale` lo scrive il JS dei comandi A− A A+ sulla radice
   (default 1 quando manca). Scala solo la prosa: ingrandire anche menu, pill e
   pulsanti sfascerebbe l'impaginazione senza aiutare nessuno a leggere. */
.ods-prose { font-size: calc(clamp(1.1rem, 1.4vw, 1.2rem) * var(--ods-tscale, 1)); line-height: 1.85; color: var(--ods-body); }
.ods-prose p { margin: 0 0 1.4rem; }
.ods-prose > p:first-of-type::first-letter {
    font-family: var(--ods-font-display);
    float: left;
    font-size: 3.1em; /* em e non rem: deve crescere col testo, altrimenti a testo grande sembra rimpicciolito */
    line-height: 0.8;
    font-weight: 700;
    color: var(--ods-purple);
    margin: 0.35rem 0.65rem 0 0;
}
.ods-prose h2, .ods-prose h3 { font-family: var(--ods-font-display); color: var(--ods-ink); line-height: 1.2; margin: 2rem 0 0.8rem; }
.ods-prose a, .ods-prose a:visited { color: var(--ods-purple); }
.ods-prose blockquote {
    margin: 1.6rem 0;
    padding: 0.4rem 0 0.4rem 1.4rem;
    border-left: 3px solid var(--ods-purple);
    font-style: italic;
    color: var(--ods-muted);
}

/* ---- Finale ---- */
.ods-finale {
    margin: 3rem 0 2rem;
    padding: clamp(1.8rem, 4vw, 2.8rem);
    text-align: center;
    background: linear-gradient(160deg, #f7f3ff, #efeafe);
    border: 1px solid rgba(122, 63, 242, 0.14);
    border-radius: var(--ods-radius-lg);
}
.ods-finale__badge { display: block; font-size: 2.4rem; line-height: 1; }
.ods-finale__title {
    font-family: var(--ods-font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--ods-ink);
    margin: 0.5rem 0 0.35rem;
}
.ods-finale__text { font-family: var(--ods-font-serif); color: var(--ods-muted); margin: 0 0 1.5rem; }

/* Tutte le regole del bottone like sono scopate sotto .ods-finale (specificità
   ≥ 0,2,0): reset.css di hello-elementor carica DOPO questo foglio, quindi le
   sue regole (0,1,0 base, 0,2,0 su :hover/:focus) vincerebbero a parità. Con
   .ods-finale le battiamo su tutti gli stati, incluso il riposo. */
.ods-finale .ods-like {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ods-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ods-purple);
    background: #fff;
    border: 2px solid rgba(122, 63, 242, 0.25);
    border-radius: 999px;
    padding: 0.6rem 1.35rem;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
/* Stati con selettori a (0,3,0): servono a battere il leak di reset.css
   `[type=button]:hover,[type=button]:focus{background:#c36;color:#fff}` (0,2,0),
   che altrimenti rende il bottone magenta e lascia il cuore rosso su rosso.
   Il bottone vive dentro .ods-finale, quindi possiamo usarlo come antenato. */
.ods-finale .ods-like:hover,
.ods-finale .ods-like:focus,
.ods-finale .ods-like:focus-visible {
    background: var(--ods-purple-050);
    border-color: var(--ods-purple);
    color: var(--ods-purple);
    transform: translateY(-1px);
}
.ods-finale .ods-like__heart { color: #e0456f; font-size: 1.15rem; line-height: 1; }
.ods-finale .ods-like__count { min-width: 0.8em; }

/* Stato "mi piace" attivo: gradiente rosa→rosso, testo e cuore bianchi.
   Selettore a classe composta (.ods-like.ods-like--liked = 0,3,0) per vincere
   in modo netto sulla base (0,2,0) e sul reset; ripetuto su :hover/:focus così
   il reset non lo appiattisce a magenta. */
.ods-finale .ods-like.ods-like--liked,
.ods-finale .ods-like.ods-like--liked:hover,
.ods-finale .ods-like.ods-like--liked:focus,
.ods-finale .ods-like.ods-like--liked:focus-visible {
    background: linear-gradient(135deg, #ff5c8a, #e0456f);
    border-color: transparent;
    color: #fff;
    transform: none;
}
.ods-finale .ods-like.ods-like--liked .ods-like__heart { color: #fff; }
.ods-like[disabled] { cursor: default; }

.ods-finale .ods-cta--interattiva { display: flex; width: fit-content; max-width: 100%; margin: 1.4rem auto 0; }
.ods-finale .ods-cta--ghost { margin-top: 1.2rem; }

.ods-finale__more { margin-top: 2.2rem; text-align: left; }
.ods-finale__more-title {
    font-family: var(--ods-font-sans);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ods-muted);
    margin: 0 0 0.9rem;
}
.ods-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.ods-related__card,
a.ods-related__card,
a.ods-related__card:visited { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: var(--ods-ink); }
.ods-related__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--ods-radius-sm);
    background: linear-gradient(135deg, #7a3ff2, #3a2560);
    background-size: cover;
    background-position: center;
    box-shadow: var(--ods-shadow-md);
    transition: transform 0.15s ease;
}
a.ods-related__card:hover .ods-related__media { transform: translateY(-3px); }
.ods-related__name { font-family: var(--ods-font-serif); font-size: 1rem; line-height: 1.3; }
a.ods-related__card:hover .ods-related__name { color: var(--ods-purple); }

/* ---- CTA capitolo successivo ---- */
.ods-next,
a.ods-next,
a.ods-next:visited {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 2.6rem 0 1.6rem;
    padding: 1.15rem 1.5rem;
    background: linear-gradient(135deg, #8248ff, #6a2fe0);
    border-radius: var(--ods-radius-md);
    text-decoration: none;
    color: #fff;
    box-shadow: 0 16px 34px -14px rgba(106, 47, 224, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.ods-next:hover,
a.ods-next:focus { transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(106, 47, 224, 0.68); color: #fff; }
.ods-next__label {
    font-family: var(--ods-font-sans);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
}
.ods-next__title {
    font-family: var(--ods-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.ods-next__arrow { flex: none; transition: transform 0.15s ease; }
a.ods-next:hover .ods-next__arrow { transform: translateX(4px); }

/* ---- Footer capitolo ---- */
.ods-reader__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.2rem;
    border-top: 1px solid var(--ods-line);
}
.ods-textlink,
a.ods-textlink,
a.ods-textlink:visited { font-family: var(--ods-font-sans); font-size: 0.9rem; font-weight: 600; color: var(--ods-muted); text-decoration: none; transition: color 0.15s ease; }
a.ods-textlink:hover { color: var(--ods-purple); }

/* ---- Condivisione ---- */
.ods-share { display: flex; align-items: center; gap: 0.55rem; margin: 1.8rem 0 clamp(1.5rem, 4vw, 3rem); }
.ods-share__label { font-family: var(--ods-font-sans); font-size: 0.8rem; color: var(--ods-muted); margin-right: 0.15rem; }
.ods-share__btn,
a.ods-share__btn,
a.ods-share__btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ods-purple-050);
    color: var(--ods-purple);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
a.ods-share__btn:hover { background: var(--ods-purple); color: #fff; transform: translateY(-1px); }
.ods-share__btn svg { width: 18px; height: 18px; }

/* ============================================================
   ARCHIVIO CATEGORIA / HUB (invariati nella sostanza)
   ============================================================ */
.ods-storia-archive-main { font-family: var(--ods-font-serif); }

.ods-nav-link { font-family: var(--ods-font-sans); text-decoration: none; font-size: 0.9rem; color: var(--ods-muted); transition: color 0.15s ease; }
.ods-nav-link:hover { color: var(--ods-purple); }

.ods-archive-hero { text-align: center; padding: 2.5rem 1.5rem 1.5rem; }
.ods-archive-heading {
    font-family: var(--ods-font-display);
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ods-ink);
    margin: 0.6rem 0 0;
}
.ods-archive-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }

/* Testo introduttivo SEO */
.ods-archive-intro {
    font-family: var(--ods-font-serif);
    max-width: 720px;
    margin: 0 auto 1.8rem;
    color: var(--ods-ink);
    font-size: clamp(1.02rem, 1.4vw, 1.12rem);
    line-height: 1.6;
    text-align: center;
}
.ods-archive-intro--custom { text-align: left; }
.ods-archive-intro a, .ods-archive-intro a:visited { color: var(--ods-purple); text-decoration: none; }
.ods-archive-intro a:hover, .ods-archive-intro a:focus { text-decoration: underline; }

/* Testo SEO lungo sotto le storie */
.ods-archive-seo {
    font-family: var(--ods-font-serif);
    max-width: 760px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--ods-line);
    color: var(--ods-ink);
    line-height: 1.65;
}
.ods-archive-seo__title {
    font-family: var(--ods-font-display);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.9rem;
    color: var(--ods-ink);
}
.ods-archive-seo p { margin: 0 0 1rem; font-size: 1rem; }
.ods-archive-seo p:last-child { margin-bottom: 0; }
.ods-archive-seo a, .ods-archive-seo a:visited { color: var(--ods-purple); text-decoration: none; }
.ods-archive-seo a:hover, .ods-archive-seo a:focus { text-decoration: underline; }

/* Blocco "Esplora anche" (link tra le sezioni principali) */
.ods-archive-explore {
    font-family: var(--ods-font-sans);
    text-align: center;
    margin-top: 1.6rem;
    color: var(--ods-muted);
    font-size: 0.92rem;
}
.ods-archive-explore a, .ods-archive-explore a:visited { color: var(--ods-purple); text-decoration: none; }
.ods-archive-explore a:hover, .ods-archive-explore a:focus { text-decoration: underline; }

/* Contenuto SEO/FAQ nel corpo della pagina hub /storie/ (i blocchi Gutenberg
   dopo lo shortcode [storie_hub]): stesso trattamento del blocco
   .ods-archive-seo degli archivi — colonna stretta centrata, serif, e un
   bordino superiore che lo stacca dalle card. */
.odq-hub-page .ods-hub ~ * {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--ods-font-serif);
    color: var(--ods-ink);
    line-height: 1.65;
}
.odq-hub-page .ods-hub ~ h2 {
    font-family: var(--ods-font-display);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 2rem auto 0.9rem;
    color: var(--ods-ink);
}
.odq-hub-page .ods-hub ~ h3 {
    font-family: var(--ods-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.3rem auto 0.4rem;
    color: var(--ods-ink);
}
.odq-hub-page .ods-hub ~ p {
    margin: 0 auto 1rem;
    font-size: 1rem;
}
.odq-hub-page .ods-hub ~ * a, .odq-hub-page .ods-hub ~ * a:visited { color: var(--ods-purple); text-decoration: none; }
.odq-hub-page .ods-hub ~ * a:hover,
.odq-hub-page .ods-hub ~ * a:focus { text-decoration: underline; }

/* Bordino separatore sopra il primo blocco dopo le card (selettori qualificati
   per elemento così vincono per ordine di sorgente sulle regole ~ qui sopra). */
.odq-hub-page .ods-hub + h2,
.odq-hub-page .ods-hub + h3,
.odq-hub-page .ods-hub + p {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ods-line);
}

/* Filtri chip */
.ods-filters-bar { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.2rem; }
.ods-filter-group { display: flex; flex-direction: column; gap: 0.4rem; }
.ods-filter-label { font-family: var(--ods-font-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ods-muted); }
.ods-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
button.ods-chip,
a.ods-chip,
a.ods-chip:visited {
    font-family: var(--ods-font-sans);
    background: rgba(27, 24, 48, 0.04);
    border: 1px solid var(--ods-line);
    color: var(--ods-ink);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button.ods-chip--active,
a.ods-chip--active,
a.ods-chip--active:visited { background: var(--ods-purple); border-color: var(--ods-purple); color: #fff; }
button.ods-chip:hover, button.ods-chip:focus,
a.ods-chip:hover, a.ods-chip:focus { border-color: rgba(27, 24, 48, 0.28); color: var(--ods-ink); background: rgba(27, 24, 48, 0.04); }
button.ods-chip--active:hover, button.ods-chip--active:focus,
a.ods-chip--active:hover, a.ods-chip--active:focus { background: var(--ods-purple-600); border-color: var(--ods-purple-600); color: #fff; }
.ods-results-count { font-family: var(--ods-font-sans); font-size: 0.82rem; color: var(--ods-muted); min-height: 1.2em; }

/* Griglia storie */
.ods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.4rem; }
.ods-card { border-radius: var(--ods-radius-md); overflow: hidden; background: #fff; box-shadow: var(--ods-shadow-md); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.ods-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -18px rgba(27, 24, 48, 0.3); }
a.ods-card-link { text-decoration: none; color: inherit; display: block; }
.ods-card-image { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.ods-card-image--empty { background: linear-gradient(135deg, #7a3ff2, #3a2560); }
.ods-card-thumb { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ods-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0.9rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent 62%);
}
.ods-card-title { font-family: var(--ods-font-display); font-size: 1.1rem; margin: 0; color: #fff; line-height: 1.2; }
.ods-card-body { padding: 0.75rem 0.85rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ods-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--ods-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--ods-purple-050);
    color: var(--ods-purple);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
}
.ods-badge--time { background: rgba(27, 24, 48, 0.05); color: var(--ods-muted); }
/* Tag caratteristica (Illustrata/Audio): neutri di proposito — il viola resta
   riservato ai link/azioni, come per le storie interattive. */
.ods-badge--feature { gap: 0.3rem; background: rgba(27, 24, 48, 0.05); color: var(--ods-muted); }
.ods-feature-icon { width: 13px; height: 13px; flex: none; }
.ods-pill--feature .ods-feature-icon { width: 15px; height: 15px; }
.ods-no-stories, .ods-no-results { color: var(--ods-muted); font-style: italic; }

/* ============================================================
   HUB /storie/ — intestazione + card scenografiche
   ============================================================ */
.ods-hub {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 5vw, 4rem);
    font-family: var(--ods-font-serif);
}

.ods-hub__head { text-align: center; max-width: 640px; margin: 0 auto clamp(1.8rem, 4vw, 3rem); }
.ods-hub__eyebrow {
    font-family: var(--ods-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ods-purple);
    margin: 0 0 0.7rem;
}
.ods-hub__title {
    font-family: var(--ods-font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ods-ink);
    margin: 0 0 0.9rem;
}
.ods-hub__lead {
    font-family: var(--ods-font-serif);
    font-size: clamp(1.02rem, 1.4vw, 1.12rem);
    line-height: 1.6;
    color: var(--ods-ink);
    margin: 0;
}

.ods-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 2.4vw, 1.6rem);
}

.ods-hubcard,
a.ods-hubcard,
a.ods-hubcard:visited {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(320px, 34vw, 420px);
    border-radius: var(--ods-radius-lg);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--ods-shadow-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.ods-hubcard:hover,
a.ods-hubcard:focus { transform: translateY(-5px); color: #fff; box-shadow: 0 40px 70px -30px rgba(50, 22, 78, 0.6), 0 14px 30px -16px rgba(0, 0, 0, 0.3); }

.ods-hubcard__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.001);
    transition: transform 0.5s ease;
}
a.ods-hubcard:hover .ods-hubcard__media,
a.ods-hubcard:focus .ods-hubcard__media { transform: scale(1.06); }
.ods-hubcard--plain .ods-hubcard__media { background: linear-gradient(150deg, #5a2fc2 0%, #33206a 55%, #170b34 100%); }

.ods-hubcard__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(11, 6, 26, 0.92) 0%, rgba(11, 6, 26, 0.45) 38%, rgba(11, 6, 26, 0.05) 68%, rgba(11, 6, 26, 0.18) 100%);
}

.ods-hubcard__body {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 1.4rem 1.4rem 1.5rem;
}
.ods-hubcard__title {
    display: block;
    font-family: var(--ods-font-display);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.2vw, 1.8rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
    margin-bottom: 0.45rem;
}
.ods-hubcard__desc {
    display: block;
    font-family: var(--ods-font-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.9rem;
}
.ods-hubcard__go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ods-font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ods-gold-soft);
}
.ods-hubcard__go span { transition: transform 0.15s ease; }
a.ods-hubcard:hover .ods-hubcard__go span,
a.ods-hubcard:focus .ods-hubcard__go span { transform: translateX(4px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
    .ods-hero { min-height: 320px; }
    .ods-prose > p:first-of-type::first-letter { font-size: 3rem; }
    .ods-reader__foot { justify-content: center; text-align: center; }
}

/* ============================================================
   Dimensione del testo — linguetta fissa sul bordo destro
   (v1.15.0 — vedi ODS_Counters::textsize_html)

   Fissa e non in cima alla pagina: serve a chi sta leggendo, e chi
   sta leggendo ha gia scrollato. La stampa wp_footer, quindi e
   figlia di <body> e nessun antenato con filter/transform puo
   ancorarla a se.
   ============================================================ */

.ods-textsize[hidden],
.ods-textsize__panel[hidden] { display: none; }

.ods-textsize {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Sotto il modale del dado (200) e sotto il banner cookie, che sta al
       massimo assoluto: un comando di lettura non deve mai coprire una
       decisione da prendere. */
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ods-textsize .ods-textsize__toggle {
    appearance: none;
    cursor: pointer;
    /* 44px di lato: e un bersaglio da pollice, ed e il comando che serve
       proprio a chi fatica a colpire i bersagli piccoli. */
    width: 44px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    color: var(--ods-purple, #7a3ff2);
    border: 1px solid var(--ods-line, rgba(27,24,48,0.1));
    border-right: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: var(--ods-shadow-md, 0 12px 30px -16px rgba(27,24,48,0.28));
    font-family: var(--ods-font-display, Georgia, serif);
    font-size: 1.15rem;
    line-height: 1;
    transition: background-color 0.15s, color 0.15s;
}
/* ⚠️ reset.css del tema: `[type=button]:focus, button:focus { background:#c36 }` a
   (0,2,0), caricato DOPO il CSS del plugin. Dopo un clic col dito o col mouse il
   pulsante resta `:focus` ma NON `:focus-visible`, quindi una regola scritta solo
   su `:focus-visible` non lo copre e il fondo diventa magenta. Serve un `:focus`
   esplicito che rimetta l'aspetto BASE (0,3,0), messo PRIMA di hover/focus-visible:
   a parità di specificità vince chi viene dopo, e per la tastiera `:focus-visible`
   matcha entrambe le regole e si riprende l'aspetto attivo. */
.ods-textsize .ods-textsize__toggle:focus {
    background: #fff;
    color: var(--ods-purple, #7a3ff2);
}
.ods-textsize .ods-textsize__toggle:hover,
.ods-textsize .ods-textsize__toggle:focus-visible {
    background: var(--ods-purple-050, #f3eefe);
}
.ods-textsize__toggle-small { font-size: 0.72em; }

.ods-textsize__panel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid var(--ods-line, rgba(27,24,48,0.1));
    border-radius: 999px;
    box-shadow: var(--ods-shadow-md, 0 12px 30px -16px rgba(27,24,48,0.28));
}
.ods-textsize__label {
    font-family: var(--ods-font-sans, system-ui, sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ods-muted, #6a6680);
}
.ods-textsize__buttons {
    display: inline-flex;
    border: 1px solid var(--ods-line, rgba(27,24,48,0.1));
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
/* Selettore composto (0,2,0): reset.css del tema colora ogni <button> di
   magenta con (0,1,0) e carica DOPO, quindi a parita di specificita vince lui. */
.ods-textsize .ods-textsize__btn {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--ods-font-sans, system-ui, sans-serif);
    color: var(--ods-body, #2b2840);
    line-height: 1;
    min-width: 44px;
    min-height: 40px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    transition: background-color 0.15s, color 0.15s;
}
.ods-textsize .ods-textsize__btn + .ods-textsize__btn { border-left: 1px solid var(--ods-line, rgba(27,24,48,0.1)); }
.ods-textsize .ods-textsize__btn:focus {
    background: transparent;
    color: var(--ods-body, #2b2840);
}
.ods-textsize .ods-textsize__btn:hover:not([disabled]),
.ods-textsize .ods-textsize__btn:focus-visible,
.ods-textsize .ods-textsize__btn[aria-pressed="true"] {
    background: var(--ods-purple-050, #f3eefe);
    color: var(--ods-purple, #7a3ff2);
}
.ods-textsize .ods-textsize__btn[disabled] { opacity: 0.35; cursor: default; }
/* Il primo e piu piccolo, l'ultimo piu grande: il comando dice da se cosa fa. */
.ods-textsize .ods-textsize__btn[data-ods-textsize-step="-1"] { font-size: 0.82rem; }
.ods-textsize .ods-textsize__btn[data-ods-textsize-step="0"]  { font-size: 0.95rem; }
.ods-textsize .ods-textsize__btn[data-ods-textsize-step="1"]  { font-size: 1.15rem; }
.ods-textsize__sign { font-size: 0.7em; }

@media (max-width: 600px) {
    /* Su telefono l'etichetta mangia la larghezza del pannello, che deve
       stare in schermo accanto alla linguetta: restano i tre pulsanti. */
    .ods-textsize__label { display: none; }
    .ods-textsize__panel { padding: 0.4rem 0.5rem; }
    .ods-textsize .ods-textsize__toggle { width: 40px; height: 44px; }
}

/* Contatore letture */
.ods-views[hidden] { display: none; }
.ods-views {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 1.2rem 0 0;
    font-family: var(--ods-font-sans);
    font-size: 0.85rem;
    color: var(--ods-muted);
}
.ods-views strong { font-weight: 600; color: var(--ods-body); }
.ods-views--finale { justify-content: center; margin-top: 1.1rem; }