@charset "UTF-8";

/* =============================================================================
SOSTERIA · DESIGN SYSTEM MASTER
MASTER UNIFICATO · SISTEMA CENTRALE

COPYRIGHT · ORIGINAL DESIGN · PROPRIETÀ INTELLETTUALE
© 2026 Maurizio Mattion. Tutti i diritti riservati.
Original design, identità visiva, architettura CSS e sistema grafico Sosteria.

Versione: 1.38.5
Data: 29 agosto 2026
Stato: STABILE · MASTER CENTRALE · COMPONENT-FIRST · SCROLL AUTONOMO · COMMENTI RIPULITI

PRINCIPIO
HTML = contenuto e struttura semantica
CSS  = un solo vestito centrale per componenti riutilizzabili
CMS  = organizzazione, routing, moduli, override e automazione

REGOLE NON DEROGABILI
- nessun CSS inline negli articoli;
- nessun selettore basato su Itemid, ID numerici di modulo o URL della pagina;
- nessun selettore basato sul nome di un file immagine;
- stesso componente = stesso CSS ovunque venga pubblicato;
- varianti solo tramite classi semantiche del componente (es. --map, --related);
- token globali per palette, tipografia, spazi, raggi, rapporti e ombre;
- user.css del child template come unica sorgente grafica del progetto;
- override del template soltanto quando serve cambiare il markup, non per correggere una singola pagina;
- classi modulo semantiche e stabili, mai ID generati.

ARCHITETTURA
1. Token e base
2. Layout e componenti globali
3. Header / navigazione
4. Home e moduli editoriali
5. Pagine e articoli custom · regia strutturale unica
6. Componenti specialistici riutilizzabili (Contatti, Viaggi, Flipbook, FESR, Timeline)
7. Moduli automatici (Continua nel Taccuino)
8. Responsive e accessibilità

AGGIORNAMENTO v1.38.5
- Distretto del Commercio: eliminato il fondo grigio del contenitore footer;
- fascia avorio estesa senza bordi laterali o inferiori;
- ridotto il padding verticale per rendere il blocco più compatto;
- logo mantenuto centrato sull'intera larghezza disponibile.

AGGIORNAMENTO v1.38.4
- Distretto del Commercio: corretta la causa reale del disallineamento;
- il wrapper di layout che contiene il modulo occupa ora tutta la riga;
- neutralizzati solo i wrapper che contengono .sos-regione-link;
- rimossa la tecnica 100vw/translate: il logo viene centrato con layout normale;
- fondo avorio esteso al contenitore del modulo.

AGGIORNAMENTO v1.38.3
- Distretto del Commercio: la fascia istituzionale usa tutta la viewport;
- eliminato l'effetto di base scura/grigia del contenitore esterno;
- logo centrato rispetto all'intera pagina, non al solo wrapper del modulo;
- mantenute le ultime impostazioni della Barra 2: fondo vino e font maggiorato.

AGGIORNAMENTO v1.38.2
- modulo istituzionale Regione/PR FESR: logo centrato nel contenitore;
- fondo del modulo portato a var(--sos-ivory);
- anchor esteso al 100% per garantire centratura stabile desktop/mobile.

AGGIORNAMENTO v1.38.0
- ripuliti i commenti da riferimenti al CMS non necessari;
- mantenuti soltanto i selettori/hook tecnici indispensabili al template e ai moduli;
- nessun caricamento esterno: gli SVG social restano incorporati come data URI;
- centralizzate le maschere SVG social per evitare definizioni duplicate tra desktop e mobile;
- reso SOS-SCROLL-BRIDGE completamente autonomo dai raggruppamenti Home;
- corretta la dimensione tipografica della Barra 2;
- aggiunta la variante Barra 3 per Business Lunch, inattiva finché non viene usata la classe --3;
- introdotto .sos-article-hero come alias generico compatibile con .sos-wine-trips-hero.

AGGIORNAMENTO v1.37.4
- consolidato il centraggio dei contenuti nei blocchi editoriali;
- .sos-center centra anche i blocchi con max-width, non soltanto il testo interno;
- le azioni poste direttamente in .sos-container-reading sono centrate di default;
- aggiunta utility generale .sos-actions--center per i futuri HTML;
- nessuna regola legata a Romanée-Conti, Viaggi di vino o singole pagine.

AGGIORNAMENTO v1.37.3
- introdotto un gutter orizzontale unico per articoli e liste editoriali;
- eliminato l'effetto “a filo” sui lati senza creare regole per singole pagine;
- tutti i contenitori visuali degli articoli usano lo stesso margine laterale dinamico;
- anche i moduli Articoli in posizione main-bottom rispettano lo stesso filo laterale;
- corretto il selettore :is() del modulo editoriale rimasto ridondante nella v1.37.2;
- nessun Itemid, URL, ID modulo o nome pagina coinvolto.

AGGIORNAMENTO v1.37.2
- ripristinato il respiro sopra e sotto i moduli di elenco articoli;
- le liste editoriali desktop usano 3 colonne reali e possono andare su righe illimitate;
- nessuna regola CSS limita il numero degli articoli restituiti dal modulo;
- i moduli editoriali di lettura usano un contenitore standard più ampio e uniforme;
- mantenuta la distinzione tra contenuto editoriale ordinario e moduli visuali;
- nessuna regola dipende da Itemid, URL, ID modulo o singolo articolo.

AGGIORNAMENTO v1.37.1
- ripristinata la gestione desktop del submenu senza freccia/toggler visibile;
- submenu Taccuino governato come componente di navigazione, non tramite Itemid o pagina;
- aumentato il respiro verticale globale degli articoli SOS;
- consolidato SOS-IMAGE-PANEL in un solo blocco: niente doppia regia o override sovrapposti;
- pannelli neri con padding reale, contenuto centrato verticalmente e testo mai a filo bordo;
- foto/pannello 62/38 desktop, stack mobile; mappe tramite sola variante semantica --map;
- nessuna regola nuova dipende da URL, Itemid, ID modulo o nome file immagine.

NOTA TECNICA
Il master è pensato per il child template attivo. Le classi specifiche di un modulo
vanno assegnate dal campo dedicato alla classe del modulo o prodotte dal relativo layout/override.
============================================================================= */
:root {
    --color-bg: #F3F0EA;
    --color-bg-alt: #DED9D1;
    --color-surface: #FFFFFF;
    --color-text: #242321;
    --color-dark: #2C2B29;
    --color-accent: #9A7650;
    --color-wine: #593B3C;
    --color-text-soft: #66615B;
    --color-story: #C47A68;
    --color-story-muted: #B87967;
    --color-accent-light: #D7B184;
    --color-overlay: #141312;
    --color-black: #000000;
    --color-border: color-mix(in srgb, var(--color-text) 14%, transparent);
    --color-border-strong: color-mix(in srgb, var(--color-text) 24%, transparent);
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --fs-hero: clamp(2.70rem, 4.6vw, 4.50rem);
    --fs-h1: clamp(2.20rem, 3.4vw, 3.20rem);
    --fs-h2: clamp(1.65rem, 2.2vw, 2.00rem);
    --fs-h3: clamp(1.18rem, 1.4vw, 1.42rem);
    --fs-h4: 1.10rem;
    --fs-lead: clamp(1.04rem, 1.1vw, 1.16rem);
    --fs-body: 1rem;
    --fs-small: 0.88rem;
    --fs-caption: 0.78rem;
    --fs-nav: 0.70rem;
    --fs-button: 0.76rem;
    --fs-meta: 0.72rem;
    --fs-card-title: clamp(0.98rem, 1.05vw, 1.08rem);
    --fs-feature-link: clamp(1.55rem, 1.85vw, 1.90rem);
    --lh-hero: 1.04;
    --lh-heading: 1.12;
    --lh-card: 1.22;
    --lh-lead: 1.55;
    --lh-body: 1.65;
    --lh-small: 1.45;
    --lh-ui: 1.25;
    --tracking-heading: -0.018em;
    --tracking-body: 0em;
    --tracking-nav: 0.14em;
    --tracking-button: 0.08em;
    --tracking-meta: 0.14em;
    --tracking-feature-link: 0.06em;
    --space-xs: 0.50rem;
    --space-sm: 0.875rem;
    --space-md: 1.50rem;
    --space-lg: 2.50rem;
    --space-xl: clamp(3rem, 4vw, 4rem);
    --space-2xl: clamp(3.75rem, 6vw, 6rem);
    --space-3xl: clamp(4.5rem, 8vw, 8rem);
    --gutter: clamp(0.75rem, 2.5vw, 1.50rem);
    --content-inline-space: clamp(2.50rem, 6vw, 5rem);
    --section-pad: clamp(2.50rem, 4vw, 3.50rem);
    --component-gap: clamp(1.25rem, 2vw, 2rem);
    --component-inner-gap: clamp(0.625rem, 1vw, 0.875rem);
    --container-max: 1180px;
    --content-max: 780px;
    --container-wide: 1380px;
    --radius: 10px;
    --radius-pill: 999px;
    --ratio-hero: 16 / 9;
    --ratio-card: 4 / 3;
    --ratio-banner: 3 / 1;
    --ratio-portrait: 4 / 5;
    --ratio-square: 1 / 1;
    --shadow-sm: 0 8px 24px color-mix(in srgb, var(--color-text) 8%, transparent);
    --shadow-md: 0 16px 40px color-mix(in srgb, var(--color-text) 12%, transparent);
    --transition: 220ms ease;
    --sos-ivory: var(--color-bg);
    --sos-stone: var(--color-bg-alt);
    --sos-white: var(--color-surface);
    --sos-charcoal: var(--color-text);
    --sos-anthracite: var(--color-dark);
    --sos-bronze: var(--color-accent);
    --sos-wine: var(--color-wine);
    --sos-text: var(--color-text);
    --sos-text-soft: var(--color-text-soft);
    --sos-border: var(--color-border);
    --sos-border-strong: var(--color-border-strong);
    --sos-font-display: var(--font-main);
    --sos-font-body: var(--font-main);
    --sos-home-type-1: var(--fs-h2);
    --sos-home-type-2: var(--fs-body);
    --sos-home-type-3: var(--fs-meta);
    --sos-container: var(--container-max);
    --sos-container-reading: var(--content-max);
    --sos-container-wide: var(--container-wide);
    --sos-space-xs: var(--space-xs);
    --sos-space-sm: var(--space-sm);
    --sos-space-md: var(--space-md);
    --sos-space-lg: var(--space-lg);
    --sos-space-xl: var(--space-xl);
    --sos-space-2xl: var(--space-2xl);
    --sos-space-3xl: var(--space-3xl);
    --sos-radius-sm: var(--radius);
    --sos-radius-md: var(--radius);
    --sos-radius-lg: var(--radius);
    --sos-radius-pill: var(--radius-pill);
    --sos-shadow-sm: var(--shadow-sm);
    --sos-shadow-md: var(--shadow-md);
    --sos-transition: var(--transition);
    --sos-home-inner: var(--container-max);
    --sos-home-gutter: var(--gutter);
    --sos-content-inline-space: var(--content-inline-space);
    --sos-component-pad-block: var(--section-pad);
    --sos-component-inner-gap: var(--component-inner-gap);
    --sos-component-gap: var(--component-gap);
    --body-color: var(--color-text);
    --body-bg: var(--color-bg);
    --cassiopeia-color-primary: var(--color-text);
    --cassiopeia-color-link: var(--color-accent);
    --cassiopeia-color-hover: var(--color-wine);
}

html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--sos-text);
    background: var(--sos-ivory);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--sos-bronze);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--sos-transition);
}

a:hover,
a:focus {
    color: var(--sos-wine);
}

::selection {
    background: var(--sos-bronze);
    color: var(--sos-white);
}

h1,
h2,
h3,
h4,
h5,
h6,
.sos-title-01,
.sos-title-02,
.sos-title-03,
.sos-title-04 {
    margin-top: 0;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-heading);
}

h1,
.sos-title-01 {
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
}

h2,
.sos-title-02 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
}

h3,
.sos-title-03 {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
}

h4,
.sos-title-04 {
    font-size: var(--fs-h4);
    line-height: var(--lh-heading);
}

.sos-kicker,
.sos-label {
    display: inline-block;
    margin-bottom: var(--sos-space-sm);
    color: var(--sos-bronze);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    line-height: var(--lh-ui);
    text-transform: uppercase;
}

.sos-text-lead {
    max-width: 48rem;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

.sos-text-small {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.sos-muted {
    color: var(--sos-text-soft);
}

.sos-page {
    width: 100%;
}

.sos-container {
    width: min(calc(100% - 2rem), var(--sos-container));
    margin-inline: auto;
}

.sos-container-reading {
    width: min(calc(100% - 2rem), var(--sos-container-reading));
    margin-inline: auto;
}

.sos-container-wide {
    width: min(calc(100% - 2rem), var(--sos-container-wide));
    margin-inline: auto;
}

.sos-section {
    padding-block: var(--sos-space-2xl);
}

.sos-section-sm {
    padding-block: var(--sos-space-xl);
}

.sos-section-lg {
    padding-block: var(--sos-space-3xl);
}

.sos-section-ivory {
    background: var(--sos-ivory);
}

.sos-section-stone {
    background: var(--sos-stone);
}

.sos-section-dark {
    color: var(--sos-ivory);
    background: var(--sos-anthracite);
}

.sos-section-dark h1,
.sos-section-dark h2,
.sos-section-dark h3,
.sos-section-dark h4,
.sos-section-dark .sos-title-01,
.sos-section-dark .sos-title-02,
.sos-section-dark .sos-title-03,
.sos-section-dark .sos-title-04 {
    color: var(--sos-white);
}

.sos-grid-02,
.sos-grid-03,
.sos-grid-04 {
    display: grid;
    gap: var(--sos-space-lg);
}

.sos-grid-02 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sos-grid-03 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sos-grid-04 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sos-align-center {
    align-items: center;
}

.sos-hero {
    position: relative;
    display: grid;
    min-height: clamp(560px, 78vh, 850px);
    place-items: end start;
    overflow: hidden;
    background: var(--sos-anthracite);
}

.sos-hero-media {
    position: absolute;
    inset: 0;
}

.sos-hero-media img,
.sos-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sos-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-black) 8%, transparent) 10%, color-mix(in srgb, var(--color-black) 56%, transparent) 100%);
}

.sos-hero-content {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 2rem), var(--sos-container));
    margin-inline: auto;
    padding-block: var(--sos-space-2xl);
    color: var(--sos-white);
}

.sos-hero-content h1,
.sos-hero-content h2 {
    max-width: 18ch;
    color: var(--sos-white);
}

.sos-hero-content p {
    max-width: 42rem;
    font-size: var(--fs-lead);
}

.container-banner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.container-banner > * {
    width: 100%;
    max-width: none;
    margin: 0;
}

.container-banner .mod-custom {
    margin: 0 !important;
    padding: 0 !important;
}

.sos-home-hero {
    display: grid;
    grid-template-columns: clamp(390px, 42vw, 620px) minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: var(--sos-anthracite);
}

.sos-home-hero__media {
    min-width: 0;
    aspect-ratio: var(--ratio-portrait);
    overflow: hidden;
    background: var(--sos-charcoal);
}

.sos-home-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.sos-home-hero__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(3rem, 5vw, var(--space-2xl));
    color: var(--sos-ivory);
    background: var(--sos-anthracite);
}

.sos-home-hero__content > * {
    width: min(100%, 38rem);
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
}

.sos-home-hero__eyebrow {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--sos-bronze);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    line-height: var(--lh-ui);
    text-transform: uppercase;
}

.sos-home-hero__title {
    max-width: 38rem;
    margin-top: 0;
    margin-bottom: var(--space-md);
    color: var(--sos-white);
    font-family: var(--font-main);
    font-size: var(--fs-hero);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-heading);
    line-height: var(--lh-hero);
}

.sos-home-hero__lead {
    max-width: 38rem;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--sos-ivory);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

.sos-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sos-space-sm);
    margin-top: 2rem;
}

.sos-home-hero .sos-btn-primary {
    color: var(--sos-charcoal);
    background: var(--sos-ivory);
}

.sos-home-hero .sos-btn-primary:hover,
.sos-home-hero .sos-btn-primary:focus {
    color: var(--sos-white);
    background: var(--sos-bronze);
}

.sos-home-hero .sos-btn-secondary {
    color: var(--sos-ivory);
    border-color: color-mix(in srgb, var(--color-bg) 62%, transparent);
    background: transparent;
}

.sos-home-hero .sos-btn-secondary:hover,
.sos-home-hero .sos-btn-secondary:focus {
    color: var(--sos-charcoal);
    border-color: var(--sos-ivory);
    background: var(--sos-ivory);
}

.sos-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.75rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-main);
    font-size: var(--fs-button);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-button);
    line-height: var(--lh-ui);
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--sos-transition), color var(--sos-transition), border-color var(--sos-transition), transform var(--sos-transition);
}

.sos-btn:hover,
.sos-btn:focus {
    transform: translateY(-2px);
    text-decoration: none;
}

.sos-btn-primary {
    color: var(--sos-white);
    background: var(--sos-charcoal);
}

.sos-btn-primary:hover,
.sos-btn-primary:focus {
    color: var(--sos-white);
    background: var(--sos-wine);
}

.sos-btn-secondary {
    color: var(--sos-charcoal);
    border-color: var(--sos-charcoal);
    background: transparent;
}

.sos-btn-secondary:hover,
.sos-btn-secondary:focus {
    color: var(--sos-white);
    background: var(--sos-charcoal);
}

.sos-btn-bronze {
    color: var(--sos-white);
    background: var(--sos-bronze);
}

.sos-btn-bronze:hover,
.sos-btn-bronze:focus {
    color: var(--sos-white);
    background: var(--sos-wine);
}

.sos-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sos-space-sm);
    margin-top: var(--sos-space-lg);
}

/* Utility generale: centraggio azioni riutilizzabile in qualunque componente. */
.sos-actions--center,
.sos-center .sos-actions,
.sos-container-reading > .sos-actions {
    justify-content: center;
}

/* Un elemento con max-width dentro .sos-center deve essere centrato
   anche come blocco, non soltanto avere il testo centrato. */
.sos-center > :is(
    .sos-text-lead,
    .sos-callout,
    .sos-quote
) {
    margin-inline: auto;
}

.sos-image {
    display: block;
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

.sos-image-wide {
    aspect-ratio: var(--ratio-hero);
}

.sos-image-card {
    aspect-ratio: var(--ratio-card);
}

.sos-image-banner {
    aspect-ratio: var(--ratio-banner);
}

.sos-image-square {
    aspect-ratio: var(--ratio-square);
}

.sos-image-portrait {
    aspect-ratio: var(--ratio-portrait);
}

.sos-image-shadow {
    box-shadow: var(--sos-shadow-sm);
}

.sos-card {
    overflow: hidden;
    border: 1px solid var(--sos-border);
    border-radius: var(--radius);
    background: var(--sos-white);
    transition: transform var(--sos-transition), box-shadow var(--sos-transition);
}

.sos-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sos-shadow-md);
}

.sos-card-media {
    overflow: hidden;
}

.sos-card-media img {
    width: 100%;
    aspect-ratio: var(--ratio-card);
    object-fit: cover;
    transition: transform 500ms ease;
}

.sos-card:hover .sos-card-media img {
    transform: scale(1.025);
}

.sos-card-body {
    padding: var(--space-md);
}

.sos-card-body > .sos-label,
.sos-card-body > .sos-wine-badge {
    margin-bottom: var(--space-xs);
}

.sos-card-title {
    margin-top: 0 !important;
    margin-bottom: var(--space-xs) !important;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: var(--fs-card-title);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-card);
}

.sos-card-body > p {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--color-text-soft);
    line-height: var(--lh-body);
}

.sos-card-wine {
    border-top: 3px solid var(--sos-wine);
}

.sos-card-recipe {
    border-top: 3px solid var(--sos-bronze);
}

.sos-card-travel {
    border-top: 3px solid var(--sos-charcoal);
}

.sos-callout {
    padding: clamp(var(--space-md), 4vw, 2.75rem);
    border-left: 3px solid var(--sos-bronze);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.sos-quote {
    max-width: 48rem;
    margin: var(--sos-space-xl) auto;
    padding: 0;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: var(--fs-h2);
    font-style: italic;
    line-height: var(--lh-heading);
    text-align: center;
}

.sos-divider {
    width: 64px;
    height: 1px;
    margin-block: var(--sos-space-lg);
    border: 0;
    background: var(--sos-bronze);
}

.sos-wine-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-pill);
    color: var(--sos-white);
    background: var(--sos-wine);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    line-height: var(--lh-ui);
    text-transform: uppercase;
}

.sos-wine-panel {
    padding: clamp(var(--space-md), 4vw, 3rem);
    border-radius: var(--radius);
    color: var(--sos-ivory);
    background: var(--sos-wine);
}

.sos-wine-panel h2,
.sos-wine-panel h3,
.sos-wine-panel h4 {
    color: var(--sos-white);
}

.sos-recipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sos-space-sm);
    padding-block: var(--sos-space-md);
    border-top: 1px solid var(--sos-border);
    border-bottom: 1px solid var(--sos-border);
}

.sos-recipe-meta-item {
    min-width: 120px;
}

.sos-recipe-meta-item strong {
    display: block;
    color: var(--sos-charcoal);
}

.sos-ingredients {
    padding: var(--sos-space-lg);
    border-radius: var(--radius);
    background: var(--sos-stone);
}

.sos-ingredients ul {
    margin-bottom: 0;
}

.sos-navigation {
    display: grid;
    gap: var(--sos-space-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--sos-space-2xl);
    padding-top: var(--sos-space-xl);
    border-top: 1px solid var(--sos-border);
}

.sos-next,
.sos-prev {
    display: block;
    padding: var(--sos-space-lg);
    border: 1px solid var(--sos-border);
    border-radius: var(--radius);
    color: var(--sos-charcoal);
    background: var(--sos-white);
    text-decoration: none;
    transition: border-color var(--sos-transition), transform var(--sos-transition);
}

.sos-next:hover,
.sos-prev:hover {
    border-color: var(--sos-bronze);
    color: var(--sos-charcoal);
    transform: translateY(-2px);
}

.sos-article {
    font-size: var(--fs-body);
}

.sos-article p {
    margin-bottom: 1.35em;
}

.sos-article h2 {
    margin-top: var(--sos-space-xl);
    margin-bottom: var(--sos-space-md);
}

.sos-article h3 {
    margin-top: var(--sos-space-lg);
    margin-bottom: var(--sos-space-sm);
}

.sos-article figure {
    margin: var(--sos-space-xl) 0;
}

.sos-article figcaption {
    margin-top: var(--sos-space-xs);
    color: var(--sos-text-soft);
    font-size: var(--fs-meta);
}

.site-grid {
    background: transparent;
}

.container-footer {
    color: var(--sos-ivory);
    background: var(--sos-anthracite);
}

.breadcrumb {
    background: transparent;
}

.btn-primary {
    border-color: var(--sos-charcoal);
    background-color: var(--sos-charcoal);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--sos-wine);
    background-color: var(--sos-wine);
}

.sos-center {
    text-align: center;
}

.sos-max-reading {
    max-width: var(--sos-container-reading);
    margin-inline: auto;
}

.sos-mt-0 {
    margin-top: 0 !important;
}

.sos-mt-sm {
    margin-top: var(--sos-space-sm) !important;
}

.sos-mt-md {
    margin-top: var(--sos-space-md) !important;
}

.sos-mt-lg {
    margin-top: var(--sos-space-lg) !important;
}

.sos-mt-xl {
    margin-top: var(--sos-space-xl) !important;
}

.sos-mb-0 {
    margin-bottom: 0 !important;
}

.sos-mb-sm {
    margin-bottom: var(--sos-space-sm) !important;
}

.sos-mb-md {
    margin-bottom: var(--sos-space-md) !important;
}

.sos-mb-lg {
    margin-bottom: var(--sos-space-lg) !important;
}

.sos-mb-xl {
    margin-bottom: var(--sos-space-xl) !important;
}

@media (max-width: 991.98px) {
    .sos-grid-03,
    .sos-grid-04 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .sos-home-hero {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .sos-home-hero__media {
        aspect-ratio: var(--ratio-portrait);
    }

    .sos-home-hero__content {
        padding: var(--space-lg) 1.25rem 2.25rem;
    }

    .sos-home-hero__title {
        max-width: 11ch;
    }

    .sos-home-hero__actions {
        align-items: stretch;
        flex-direction: column;
        margin-top: 1.75rem;
    }

    .sos-home-hero__actions .sos-btn {
        width: 100%;
    }

    .sos-container,
    .sos-container-reading,
    .sos-container-wide {
        width: min(calc(100% - var(--space-md)), var(--sos-container));
    }

    .sos-grid-02,
    .sos-grid-03,
    .sos-grid-04,
    .sos-navigation {
        grid-template-columns: 1fr;
    }

    .sos-hero {
        min-height: 70svh;
    }

    .sos-hero-content {
        width: calc(100% - var(--space-md));
        padding-block: var(--sos-space-xl);
    }

    .sos-card-body {
        padding: var(--sos-space-md);
    }

    .sos-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sos-actions .sos-btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .sos-section {
        padding-block: 3rem;
    }

    .sos-section-sm {
        padding-block: var(--space-lg);
    }

    .sos-card,
    .sos-image,
    .sos-wine-panel,
    .sos-ingredients {
        border-radius: var(--radius);
    }
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.container-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    width: 100% !important;
    padding: 0 !important;
    color: var(--sos-ivory) !important;
    background: var(--sos-anthracite) !important;
    box-shadow: none !important;
}

.container-header a {
    color: inherit;
}

.container-header .site-description {
    color: var(--sos-ivory);
}

.container-header .mod-menu > li:first-child {
    display: none !important;
}

@media (min-width: 992px) {
    .container-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: clamp(1rem, 2vw, 2rem) !important;
        min-height: 100px !important;
        padding-inline: max(var(--space-md), calc((100vw - 1240px) / 2)) !important;
    }

    .container-header > .grid-child:first-child {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .navbar-brand,
    .container-header .brand-logo {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .navbar-brand img {
        display: block !important;
        width: auto !important;
        max-width: 320px !important;
        max-height: 90px !important;
        height: auto !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .container-header .container-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: clamp(var(--space-md), 2.5vw, var(--space-lg)) !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .container-nav .navbar {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .navbar-collapse {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .container-header .mod-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(0.75rem, 1.35vw, 1.45rem) !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .mod-menu > li {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu .nav-item > a {
        position: relative !important;
        display: inline-block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0.45rem 0 !important;
        color: color-mix(in srgb, var(--color-bg) 90%, transparent) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-family: var(--font-main) !important;
        font-size: var(--fs-nav) !important;
        font-weight: var(--weight-semibold) !important;
        line-height: var(--lh-ui) !important;
        letter-spacing: var(--tracking-nav) !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .container-header .mod-menu > li > a:hover,
    .container-header .mod-menu > li > a:focus,
    .container-header .mod-menu > li.active > a {
        color: var(--sos-bronze) !important;
        background: transparent !important;
    }

    .container-header .mod-menu > li > a::after,
    .container-header .mod-menu .nav-item > a::after {
        position: absolute;
        right: 0;
        bottom: 0.08rem;
        left: 0;
        height: 1px;
        content: "";
        background: var(--sos-bronze);
        opacity: 0;
        transform: scaleX(0);
        transform-origin: center;
        transition: opacity var(--sos-transition), transform var(--sos-transition);
    }

    .container-header .mod-menu > li > a:hover::after,
    .container-header .mod-menu > li > a:focus::after,
    .container-header .mod-menu > li.active > a::after {
        opacity: 0.70;
        transform: scaleX(1);
    }

    .container-header .container-search {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.70rem !important;
    }

    .container-header .container-search > * {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .container-header .gtranslate_wrapper {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .container-header .gtranslate_wrapper select,
    .container-header .gtranslate_wrapper .gt_selector,
    .container-header select.gt_selector {
        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 6.5rem !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 0.10rem !important;
        color: color-mix(in srgb, var(--color-bg) 90%, transparent) !important;
        -webkit-text-fill-color: color-mix(in srgb, var(--color-bg) 90%, transparent) !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        font-family: var(--font-main) !important;
        font-size: var(--fs-nav) !important;
        font-weight: var(--weight-semibold) !important;
        line-height: var(--lh-ui) !important;
        letter-spacing: var(--tracking-nav) !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    .container-header .gtranslate_wrapper select:hover,
    .container-header .gtranslate_wrapper select:focus,
    .container-header .gtranslate_wrapper .gt_selector:hover,
    .container-header .gtranslate_wrapper .gt_selector:focus {
        color: var(--sos-bronze) !important;
        -webkit-text-fill-color: var(--sos-bronze) !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    .container-header .gtranslate_wrapper select option {
        color: var(--sos-charcoal) !important;
        -webkit-text-fill-color: var(--sos-charcoal) !important;
        background: var(--sos-white) !important;
        font-size: var(--fs-nav) !important;
    }

    .container-header .container-search {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .container-search .mod-custom,
    .container-header .container-search .sos-social-header {
        display: flex !important;
        align-items: center !important;
        gap: 0.62rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .container-search a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        color: color-mix(in srgb, var(--color-bg) 82%, transparent) !important;
        text-decoration: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 50% !important;
        transition: color var(--sos-transition), transform var(--sos-transition) !important;
    }

    .container-header .container-search a:hover,
    .container-header .container-search a:focus {
        color: var(--sos-bronze) !important;
        transform: translateY(-1px);
    }

    .container-header .container-search .sos-social-header a,
    .container-header .container-search .sos-social-header a:visited {
        position: relative !important;
        color: color-mix(in srgb, var(--color-bg) 92%, transparent) !important;
    }

    .container-header .container-search .sos-social-header a:hover,
    .container-header .container-search .sos-social-header a:focus {
        color: var(--sos-bronze) !important;
    }

    .container-header .sos-social-header a::before {
        display: block;
        width: 18px;
        height: 18px;
        content: "";
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .container-header .navbar-toggler {
        display: none !important;
    }
}

/* ==========================================================================
   NAVIGAZIONE · SUBMENU DESKTOP
   Regola di componente: vale per qualsiasi voce parent/deeper.
   Nessun Itemid, nessun ID numerico, nessuna pagina specifica.
   ========================================================================== */
@media (min-width: 992px) {

    .container-header .mod-menu > li.deeper,
    .container-header .mod-menu > li.parent {
        position: relative !important;
    }

    /* Il markup del menu genera un pulsante separato per il submenu.
       Su desktop il submenu è hover/focus: il pulsante e la relativa freccia
       non devono comparire accanto alla voce di menu. */
    .container-header .mod-menu > li.deeper > .mm-toggler,
    .container-header .mod-menu > li.parent > .mm-toggler,
    .container-header .mod-menu > li.deeper > button,
    .container-header .mod-menu > li.parent > button {
        display: none !important;
    }

    .container-header .mod-menu > li.deeper > ul,
    .container-header .mod-menu > li.parent > ul {
        position: absolute !important;
        top: calc(100% + .2rem) !important;
        left: 0 !important;
        z-index: 1200 !important;

        display: none !important;
        width: max-content !important;
        min-width: 205px !important;
        max-width: 270px !important;

        margin: 0 !important;
        padding: .28rem 0 !important;
        list-style: none !important;

        border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent) !important;
        border-top: 2px solid var(--sos-bronze) !important;
        border-radius: var(--radius) !important;

        background: var(--sos-ivory) !important;
        box-shadow: 0 10px 26px color-mix(in srgb, var(--color-text) 12%, transparent) !important;
        transform: none !important;
    }

    .container-header .mod-menu > li.deeper:hover > ul,
    .container-header .mod-menu > li.deeper:focus-within > ul,
    .container-header .mod-menu > li.parent:hover > ul,
    .container-header .mod-menu > li.parent:focus-within > ul {
        display: block !important;
    }

    .container-header .mod-menu > li > ul > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .container-header .mod-menu > li > ul > li > a {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;
        padding: .62rem 1rem !important;

        color: var(--sos-charcoal) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;

        font-family: var(--font-main) !important;
        font-size: var(--fs-nav) !important;
        font-weight: var(--weight-semibold) !important;
        line-height: 1.35 !important;
        letter-spacing: .08em !important;

        text-align: left !important;
        text-decoration: none !important;
        text-transform: none !important;
        white-space: nowrap !important;

        transition:
            color var(--sos-transition),
            background-color var(--sos-transition),
            padding-left var(--sos-transition) !important;
    }

    .container-header .mod-menu > li > ul > li > a::before,
    .container-header .mod-menu > li > ul > li > a::after {
        display: none !important;
        content: none !important;
    }

    .container-header .mod-menu > li > ul > li > a:hover,
    .container-header .mod-menu > li > ul > li > a:focus-visible {
        color: var(--sos-wine) !important;
        background: color-mix(in srgb, var(--color-accent) 9%, transparent) !important;
        padding-left: 1.15rem !important;
        outline: none !important;
    }

    .container-header .mod-menu > li > ul > li.active > a,
    .container-header .mod-menu > li > ul > li.current > a,
    .container-header .mod-menu > li > ul > li.alias-parent-active > a,
    .container-header .mod-menu > li > ul > li > a[aria-current="page"] {
        color: var(--sos-wine) !important;
        background: color-mix(in srgb, var(--color-accent) 7%, transparent) !important;
    }
}

@media (max-width: 991.98px) {
    .container-header {
        display: block !important;
        min-height: 68px !important;
    }

    .container-header > .grid-child:first-child {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 5px 56px !important;
        box-sizing: border-box !important;
    }

    .container-header .navbar-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .container-header .navbar-brand img {
        display: block !important;
        width: auto !important;
        max-width: 205px !important;
        max-height: 52px !important;
        height: auto !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    .container-header .container-nav,
    .container-header .container-nav .navbar {
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .navbar-toggler {
        position: absolute !important;
        top: 34px !important;
        left: 16px !important;
        z-index: 20 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 6px !important;
        color: var(--sos-ivory) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) !important;
    }

    .container-header .navbar-toggler-icon {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        filter: brightness(0) invert(1);
    }

    .container-header .navbar-toggler:focus {
        box-shadow: none !important;
    }

    .container-header .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }

    .container-header .navbar-collapse.show,
    .container-header .navbar-collapse.collapsing {
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 16px 10px !important;
        background: var(--sos-anthracite) !important;
        box-sizing: border-box !important;
    }

    .container-header .mod-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .container-header .mod-menu > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu .nav-item > a {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 11px 4px !important;
        color: var(--sos-ivory) !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 12%, transparent) !important;
        border-radius: 0 !important;
        font-size: var(--fs-nav) !important;
        font-weight: var(--weight-semibold) !important;
        line-height: var(--lh-ui) !important;
        letter-spacing: var(--tracking-nav) !important;
        text-align: left !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
    }

    .container-header .mod-menu > li > a:hover,
    .container-header .mod-menu > li > a:focus,
    .container-header .mod-menu > li.active > a {
        color: var(--sos-bronze) !important;
        background: transparent !important;
    }

    .container-header .container-search {
        display: none !important;
    }

    .container-header .container-nav:has(.navbar-collapse.show) .container-search,
    .container-header .container-nav:has(.navbar-collapse.collapsing) .container-search {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.85rem !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        min-height: 52px !important;
        margin: 0 16px !important;
        padding: 10px 4px 12px !important;
        border-top: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent) !important;
        background: var(--sos-anthracite) !important;
        box-sizing: border-box !important;
    }

    .container-header .container-search > * {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .gtranslate_wrapper {
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        height: 32px !important;
        margin: 0 0.35rem 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .container-header .gtranslate_wrapper select,
    .container-header .gtranslate_wrapper .gt_selector,
    .container-header select.gt_selector {
        width: auto !important;
        min-width: 0 !important;
        max-width: 7rem !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 0.15rem !important;
        color: color-mix(in srgb, var(--color-bg) 92%, transparent) !important;
        -webkit-text-fill-color: color-mix(in srgb, var(--color-bg) 92%, transparent) !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        font-family: var(--font-main) !important;
        font-size: var(--fs-nav) !important;
        font-weight: var(--weight-semibold) !important;
        line-height: var(--lh-ui) !important;
        letter-spacing: var(--tracking-nav) !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    .container-header .gtranslate_wrapper select option {
        color: var(--sos-charcoal) !important;
        -webkit-text-fill-color: var(--sos-charcoal) !important;
        background: var(--sos-white) !important;
    }

    .container-header .container-search .mod-custom,
    .container-header .container-search .sos-social-header {
        display: flex !important;
        align-items: center !important;
        gap: 0.72rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .container-search .sos-social-header a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: color-mix(in srgb, var(--color-bg) 88%, transparent) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 50% !important;
        text-decoration: none !important;
    }

    .container-header .container-search .sos-social-header a:hover,
    .container-header .container-search .sos-social-header a:focus {
        color: var(--sos-bronze) !important;
    }

    .container-header .sos-social-header a::before {
        display: block;
        width: 17px;
        height: 17px;
        content: "";
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }
}

@media (max-width: 480px) {
    .container-header,
    .container-header > .grid-child:first-child {
        min-height: 64px !important;
    }

    .container-header > .grid-child:first-child {
        padding: 4px 50px !important;
    }

    .container-header .navbar-brand img {
        max-width: 185px !important;
        max-height: 48px !important;
    }

    .container-header .navbar-toggler {
        top: 32px !important;
        left: 12px !important;
    }
}

.container-header .navbar-toggler:focus-visible,
.container-header .mod-menu a:focus-visible,
.container-header .container-search a:focus-visible {
    outline: 2px solid var(--sos-bronze) !important;
    outline-offset: 3px !important;
}

/* ==========================================================================
   HEADER · ICONE SOCIAL INCORPORATE
   Una sola sorgente SVG per desktop e mobile. Nessuna richiesta esterna.
   ========================================================================== */

.container-header .sos-social--facebook::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='%68%74%74%70%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3h-3.1V9.1c0-.9.3-1.5 1.6-1.5h1.7V4.9c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3V11H7.3v3h2.8v8h3.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='%68%74%74%70%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3h-3.1V9.1c0-.9.3-1.5 1.6-1.5h1.7V4.9c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3V11H7.3v3h2.8v8h3.4Z'/%3E%3C/svg%3E");
}

.container-header .sos-social--instagram::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='%68%74%74%70%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm10.5 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='%68%74%74%70%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm10.5 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
}

.container-header .sos-social--mail::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='%68%74%74%70%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.3l9 5.6 9-5.6V7H3Zm18 10V9.7l-8.5 5.3a1 1 0 0 1-1 0L3 9.7V17h18Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='%68%74%74%70%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.3l9 5.6 9-5.6V7H3Zm18 10V9.7l-8.5 5.3a1 1 0 0 1-1 0L3 9.7V17h18Z'/%3E%3C/svg%3E");
}

.container-header .sos-social--whatsapp::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='%68%74%74%70%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11.9 11.9 0 0 0 12.1 0C5.5 0 .2 5.3.2 11.9c0 2.1.6 4.2 1.7 6L0 24l6.3-1.7a12 12 0 0 0 5.8 1.5h.1c6.5 0 11.8-5.3 11.8-11.9 0-3.2-1.2-6.2-3.5-8.4ZM12.2 21.8h-.1c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4a9.8 9.8 0 1 1 8.5 4.6Zm5.4-7.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.6.3-.5c.1-.2.1-.4 0-.6-.1-.1-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8 0 1.6 1.2 3.2 1.4 3.4.1.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.1-1.4-.1-.1-.3-.2-.6-.3Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='%68%74%74%70%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11.9 11.9 0 0 0 12.1 0C5.5 0 .2 5.3.2 11.9c0 2.1.6 4.2 1.7 6L0 24l6.3-1.7a12 12 0 0 0 5.8 1.5h.1c6.5 0 11.8-5.3 11.8-11.9 0-3.2-1.2-6.2-3.5-8.4ZM12.2 21.8h-.1c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4a9.8 9.8 0 1 1 8.5 4.6Zm5.4-7.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.6.3-.5c.1-.2.1-.4 0-.6-.1-.1-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8 0 1.6 1.2 3.2 1.4 3.4.1.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.1-1.4-.1-.1-.3-.2-.6-.3Z'/%3E%3C/svg%3E");
}

.site-grid,
.site-grid .grid-child {
    margin-top: 0;
}

main,
main .blog,
main .item-page,
main .com-content-category-blog,
main .com-content-category-list,
main .com-content-article {
    margin-top: 0;
}

.breadcrumb,
.mod-breadcrumbs {
    margin-bottom: 0.6rem;
}

.sos-home-inner {
    width: min(calc(100% - (2 * var(--sos-home-gutter))), var(--sos-home-inner));
    margin-inline: auto;
}

.sos-home-eyebrow {
    margin: 0 0 .65rem;
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.sos-home-title {
    margin: 0;
    font-family: var(--font-main);
    font-size: var(--fs-h2);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
}

.sos-home-copy {
    margin: 0;
    font-family: var(--font-main);
    font-size: var(--fs-body);
    font-weight: var(--weight-regular);
    line-height: var(--lh-body);
}

.sos-home-micro {
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    line-height: var(--lh-ui);
}

.container-bottom-a {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    grid-auto-flow: initial !important;
}

.container-bottom-a > * {
    position: relative !important;
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    grid-column: 1 / -1 !important;
    z-index: auto !important;
}

.container-bottom-a > .card,
.container-bottom-a > .moduletable,
.container-bottom-a > [class*="moduletable"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.container-bottom-a > .card > .card-body,
.container-bottom-a > .moduletable > .card-body,
.container-bottom-a > [class*="moduletable"] > .card-body,
.container-bottom-a .card-body {
    position: relative !important;
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.bottom-a {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bottom-a.card,
.bottom-a > .card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bottom-a.card > .card-body,
.bottom-a > .card > .card-body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sos-home-manifesto,
.sos-home-reasons,
.sos-home-wine-journey,
.sos-divanetto-section,
.sos-mod-22a,
.sos-mod-22,
.sos-mod-23a,
.sos-mod-23 {
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: -50vw !important;
    box-sizing: border-box !important;
}

.sos-home-manifesto__inner,
.sos-home-reasons__intro,
.sos-home-reasons__grid,
.sos-mod-22a__inner,
.sos-mod-22 .mod-articles-items,
.sos-card-system .mod-articles-items,
.sos-mod-22 ul.mod-articles,
.sos-card-system ul.mod-articles,
.sos-mod-23a__inner,
.sos-mod-23__inner {
    width: min(
        calc(100% - (var(--sos-home-gutter) * 2)),
        var(--sos-home-inner)
    ) !important;
    max-width: var(--sos-home-inner) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.sos-home-manifesto__title,
.sos-home-manifesto__closing {
    max-width: 860px !important;
}

.sos-home-reasons__intro h2 {
    max-width: 920px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.container-bottom-a {
    gap: 0 !important;
}

.container-bottom-a > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.sos-home-manifesto,
.sos-home-reasons,
.sos-mod-23a,
.sos-mod-23 {
    padding-top: var(--sos-component-pad-block) !important;
    padding-bottom: var(--sos-component-pad-block) !important;
}

.sos-mod-22a {
    padding-top: var(--sos-component-pad-block) !important;
    padding-bottom: var(--sos-component-inner-gap) !important;
}

.sos-mod-22 {
    padding-top: var(--sos-component-inner-gap) !important;
    padding-bottom: var(--sos-component-pad-block) !important;
}

.sos-mod-22 > .sos-card-system,
.sos-mod-22 .sos-card-system {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sos-home-wine-journey,
.sos-divanetto-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.sos-home-wine-journey__content {
    padding-top: var(--sos-component-pad-block) !important;
    padding-bottom: var(--sos-component-pad-block) !important;
}

@media (max-width: 767.98px) {
    .sos-home-manifesto__inner,
    .sos-home-reasons__intro,
    .sos-home-reasons__grid,
    .sos-mod-22a__inner,
    .sos-mod-22 .mod-articles-items,
    .sos-card-system .mod-articles-items,
    .sos-mod-22 ul.mod-articles,
    .sos-card-system ul.mod-articles,
    .sos-mod-23a__inner,
    .sos-mod-23__inner {
        width: calc(100% - (var(--sos-home-gutter) * 2)) !important;
        max-width: none !important;
    }
}

.sos-home-manifesto {
    width: 100%;
    padding-block: var(--sos-component-pad-block);
    color: var(--sos-charcoal);
    background: var(--sos-ivory);
}

.sos-home-manifesto__inner {
    width: min(calc(100% - 2rem), 860px);
    margin-inline: auto;
    text-align: center;
}

.sos-home-manifesto__eyebrow {
    margin: 0 0 1rem;
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.sos-home-manifesto__title,
.sos-home-manifesto__closing {
    margin: 0 auto;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: var(--fs-h2);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
}

.sos-home-manifesto__title-return {
    display: block;
    margin-top: .22em;
    color: var(--sos-bronze);
    font-style: italic;
}

.sos-home-manifesto__rule {
    width: 48px;
    height: 1px;
    margin: 2rem auto;
    border: 0;
    background: color-mix(in srgb, var(--color-accent) 72%, transparent);
}

.sos-home-manifesto__text {
    max-width: 690px;
    margin: 0 auto;
    color: var(--sos-text-soft);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.sos-home-manifesto__closing {
    margin-top: 2rem;
    font-style: italic;
}

.sos-home-reasons {
    width: 100%;
    padding-block: var(--sos-component-pad-block);
    color: var(--sos-charcoal);
    background: var(--sos-stone);
}

.sos-home-reasons__intro {
    width: min(calc(100% - 2rem), 920px);
    margin: 0 auto var(--space-lg);
    text-align: center;
}

.sos-home-reasons__eyebrow,
.sos-home-reasons__number {
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.sos-home-reasons__eyebrow {
    display: inline-block;
    margin-bottom: .75rem;
}

.sos-home-reasons__intro h2,
.sos-home-reasons__item h3 {
    margin: 0;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: var(--fs-h2);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
}

.sos-home-reasons__grid {
    display: grid;
    width: min(calc(100% - 2rem), var(--sos-home-inner));
    margin-inline: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--sos-border);
    border-bottom: 1px solid var(--sos-border);
}

.sos-home-reasons__item {
    display: flex;
    min-width: 0;
    padding: 2rem;
    flex-direction: column;
    align-items: stretch;
}

.sos-home-reasons__item + .sos-home-reasons__item {
    border-left: 1px solid var(--sos-border);
}

.sos-home-reasons__media {
    display: block;
    width: 100%;
    aspect-ratio: var(--ratio-card);
    margin: 0 0 var(--space-md);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.sos-home-reasons__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sos-home-reasons__number {
    display: block;
    margin-bottom: .75rem;
}

.sos-home-reasons__item h3 {
    margin-bottom: .65rem;
}

.sos-home-reasons__item p {
    max-width: 28rem;
    margin: 0;
    color: var(--sos-text-soft);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

@media (max-width: 991.98px) {
    .sos-home-reasons__grid {
        grid-template-columns: 1fr;
    }

    .sos-home-reasons__item {
        padding: 2rem 0;
    }

    .sos-home-reasons__item + .sos-home-reasons__item {
        border-top: 1px solid var(--sos-border);
        border-left: 0;
    }
}

.sos-home-wine-journey {
    position: relative;
    left: 50%;
    display: grid;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 -50vw;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    color: var(--sos-charcoal);
    background: var(--sos-ivory);
}

.sos-home-wine-journey__media {
    min-width: 0;
    min-height: clamp(580px, 52vw, 760px);
    overflow: hidden;
    background: var(--sos-charcoal);
}

.sos-home-wine-journey__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sos-home-wine-journey__content {
    display: flex;
    min-width: 0;
    padding: clamp(3rem, 5vw, 5rem);
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sos-home-wine-journey__content > * {
    width: min(100%, 42rem);
}

.sos-home-wine-journey__brand,
.sos-home-wine-journey__brand-line,
.sos-home-wine-journey__globe,
.sos-home-wine-journey__globe-meridian,
.sos-home-wine-journey__globe-equator,
.sos-home-wine-journey__globe-s,
.sos-home-wine-journey__brand-mark {
    display: none;
}

.sos-home-wine-journey__brand-logo {
    display: flex;
    width: 90px;
    height: 90px;
    align-items: center;
    justify-content: center;
    margin: 0 auto .9rem;
}

.sos-home-wine-journey__brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sos-home-wine-journey__eyebrow {
    margin: 0 auto .65rem;
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.sos-home-wine-journey__title {
    max-width: 15ch;
    margin: 0 auto;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: var(--fs-h2);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
}

.sos-home-wine-journey__accent {
    color: var(--sos-bronze);
    font-style: italic;
}

.sos-home-wine-journey__rule {
    width: 56px;
    height: 1px;
    margin: 1.6rem auto;
    background: var(--sos-bronze);
}

.sos-home-wine-journey__text {
    max-width: 38rem;
    margin: 0 auto;
    color: var(--sos-text-soft);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-align: left;
}

.sos-home-wine-journey__text em {
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-style: italic;
}

.sos-home-wine-journey__link {
    display: inline-flex;
    width: auto;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: 1.7rem auto 0;
    padding: .72rem 1.15rem;
    border: 1px solid var(--sos-bronze);
    border-radius: 0;
    color: var(--sos-bronze);
    background: transparent;
    font-family: var(--font-main);
    font-size: var(--fs-body);
    font-weight: var(--weight-bold);
    line-height: var(--lh-body);
    letter-spacing: var(--tracking-body);
    text-decoration: none;
    text-transform: uppercase;
}

.sos-home-wine-journey__link:hover,
.sos-home-wine-journey__link:focus {
    color: var(--sos-white);
    background: var(--sos-bronze);
}

@media (max-width: 767.98px) {
    .sos-home-wine-journey {
        left: 0;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        grid-template-columns: 1fr;
    }

    .sos-home-wine-journey__media {
        min-height: 0;
        aspect-ratio: var(--ratio-portrait);
    }

    .sos-home-wine-journey__content {
        padding: 2.75rem 1rem 3rem;
    }

    .sos-home-wine-journey__brand-logo {
        width: 72px;
        height: 72px;
    }

    .sos-home-wine-journey__link {
        width: 100%;
    }
}

/* =============================================================================
   BARRE SCORREVOLI · MASTER STABILE

   HTML:
   Barra 1  <section class="sos-scroll-bridge sos-scroll-bridge--1"> ... </section>
   Barra 2  <section class="sos-scroll-bridge sos-scroll-bridge--2"> ... </section>
   Barra 3  <section class="sos-scroll-bridge sos-scroll-bridge--3"> ... </section>

   Compatibilità:
   .sos-scroll-bridge senza variante usa automaticamente i valori della Barra 1.
   Le tre varianti condividono struttura, animazione, responsive e accessibilità.
   ============================================================================= */

.sos-scroll-bridge {
    --scroll-bg: var(--sos-anthracite);
    --scroll-text: color-mix(in srgb, var(--color-bg) 94%, transparent);
    --scroll-dot: var(--sos-bronze);
    --scroll-border: color-mix(in srgb, var(--color-accent) 20%, transparent);
    --scroll-pad-y: .8rem;
    --scroll-font-size: var(--fs-body);
    --scroll-dot-size: var(--fs-meta);
    --scroll-font-style: italic;
    --scroll-font-weight: var(--weight-regular);
    --scroll-speed: 38s;
    --scroll-gap: clamp(2rem, 4vw, var(--space-xl));

    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 -50vw;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--scroll-text);
    background: var(--scroll-bg);
}

/* BARRA 1 · NARRATIVA / STANDARD */
.sos-scroll-bridge--1 {
    --scroll-bg: var(--sos-anthracite);
    --scroll-text: color-mix(in srgb, var(--color-bg) 94%, transparent);
    --scroll-dot: var(--sos-bronze);
    --scroll-border: color-mix(in srgb, var(--color-accent) 20%, transparent);
    --scroll-pad-y: .8rem;
    --scroll-font-size: var(--fs-body);
    --scroll-dot-size: var(--fs-meta);
    --scroll-font-style: italic;
    --scroll-font-weight: var(--weight-regular);
    --scroll-speed: 38s;
}

/* BARRA 2 · AVVISI / EVIDENZA */
.sos-scroll-bridge--2 {
    --scroll-bg: var(--sos-wine);
    --scroll-text: var(--sos-ivory);
    --scroll-dot: var(--sos-bronze);
    --scroll-border: color-mix(in srgb, var(--color-accent) 28%, transparent);
    --scroll-pad-y: 1rem;
    --scroll-font-size: clamp(1.10rem, 1.25vw, 1.30rem);
    --scroll-dot-size: var(--fs-meta);
    --scroll-font-style: italic;
    --scroll-font-weight: var(--weight-medium);
    --scroll-speed: 34s;
}

/* BARRA 3 · BUSINESS LUNCH / PROMO EDITORIALE */
.sos-scroll-bridge--3 {
    --scroll-bg: var(--sos-wine);
    --scroll-text: var(--sos-white);
    --scroll-dot: var(--color-accent-light);
    --scroll-border: color-mix(in srgb, var(--color-accent-light) 34%, transparent);
    --scroll-pad-y: .9rem;
    --scroll-font-size: clamp(1rem, 1.05vw, 1.14rem);
    --scroll-dot-size: var(--fs-meta);
    --scroll-font-style: normal;
    --scroll-font-weight: var(--weight-medium);
    --scroll-speed: 36s;
}

/* BARRA CLICCABILE · opzionale
   Usa la classe .sos-scroll-bridge--link quando l'intera barra deve aprire una pagina. */
.sos-scroll-bridge--link,
.sos-scroll-bridge--link:visited,
.sos-scroll-bridge--link:hover,
.sos-scroll-bridge--link:focus {
    display: block;
    color: var(--scroll-text);
    text-decoration: none;
    cursor: pointer;
}

.sos-scroll-bridge--link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-accent-light) 70%, transparent);
    outline-offset: -3px;
}

.sos-scroll-bridge__viewport {
    width: 100%;
    overflow: hidden;
    padding: var(--scroll-pad-y) 0;
    border-top: 1px solid var(--scroll-border);
    border-bottom: 1px solid var(--scroll-border);
}

.sos-scroll-bridge__track {
    display: flex;
    width: max-content;
    min-width: 100%;
    align-items: center;
    flex-wrap: nowrap;
    animation: sos-scroll-bridge-move var(--scroll-speed) linear infinite;
    will-change: transform;
}

.sos-scroll-bridge__group {
    display: flex;
    min-width: max-content;
    align-items: center;
    flex-shrink: 0;
    gap: var(--scroll-gap);
    padding-right: var(--scroll-gap);
}

.sos-scroll-bridge__text {
    white-space: nowrap;
    color: var(--scroll-text);
    font-family: var(--font-main);
    font-size: var(--scroll-font-size);
    font-style: var(--scroll-font-style);
    font-weight: var(--scroll-font-weight);
    line-height: var(--lh-body);
}

.sos-scroll-bridge__dot {
    color: var(--scroll-dot);
    font-family: var(--font-main);
    font-size: var(--scroll-dot-size);
    line-height: var(--lh-ui);
}

@keyframes sos-scroll-bridge-move {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (hover: hover) {
    .sos-scroll-bridge:hover .sos-scroll-bridge__track {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sos-scroll-bridge__track {
        width: 100%;
        animation: none;
        transform: none;
        will-change: auto;
    }

    .sos-scroll-bridge__group {
        width: 100%;
        min-width: 100%;
        justify-content: center;
        padding-inline: 1rem;
        padding-right: 1rem;
    }

    .sos-scroll-bridge__group[aria-hidden="true"] {
        display: none;
    }

    .sos-scroll-bridge__text {
        white-space: normal;
        text-align: center;
    }

    .sos-scroll-bridge__dot {
        display: none;
    }
}

.sos-image-panel {
    --sos-panel-media-width: 62%;
    --sos-panel-content-width: 38%;

    --sos-panel-pad-block: clamp(1.85rem, 2.4vw, 2.55rem);
    --sos-panel-pad-inline: clamp(1.65rem, 2.2vw, 2.35rem);

    --sos-panel-gap-label: .52rem;
    --sos-panel-gap-title: .72rem;
    --sos-panel-gap-copy: .72rem;
    --sos-panel-gap-cta: .90rem;

    --sos-panel-title-size: clamp(1.48rem, 1.75vw, 1.78rem);
    --sos-panel-title-lh: 1.12;
    --sos-panel-copy-size: clamp(.96rem, 1vw, 1.02rem);
    --sos-panel-copy-lh: 1.50;

    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    border: 0;
    border-radius: var(--radius);

    color: var(--sos-ivory);
    background: var(--sos-anthracite);
    box-shadow: none;
}

/* CONTENUTO */
.sos-image-panel__content {
    display: flex;
    min-width: 0;
    max-width: 100%;
    padding: var(--sos-panel-pad-block) var(--sos-panel-pad-inline);

    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    overflow: visible;

    color: var(--sos-ivory);
    background: var(--sos-anthracite);

    overflow-wrap: break-word;
    word-break: normal;
}

.sos-image-panel__content > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.sos-image-panel__content .sos-label {
    margin: 0 0 var(--sos-panel-gap-label);

    color: var(--sos-bronze);

    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: 1.20;
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;

    white-space: normal;
}

.sos-image-panel__content h1,
.sos-image-panel__content h2,
.sos-image-panel__content h3,
.sos-image-panel__content h4,
.sos-image-panel__content .sos-divanetto-heading,
.sos-image-panel__content .sos-divanetto-kicker {
    width: 100%;
    margin: 0 0 var(--sos-panel-gap-title);

    color: var(--sos-ivory);

    font-family: var(--font-main);
    font-size: var(--sos-panel-title-size);
    font-style: normal;
    font-weight: var(--weight-medium);
    line-height: var(--sos-panel-title-lh);
    letter-spacing: var(--tracking-heading);

    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
}

.sos-image-panel__content p,
.sos-image-panel__content .sos-text-lead,
.sos-image-panel__content .sos-divanetto-copy,
.sos-image-panel__content ul,
.sos-image-panel__content ol,
.sos-image-panel__content li {
    width: 100%;
    max-width: 100%;

    color: color-mix(in srgb, var(--color-bg) 94%, transparent);

    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.sos-image-panel__content p,
.sos-image-panel__content .sos-text-lead,
.sos-image-panel__content .sos-divanetto-copy {
    margin: 0 0 var(--sos-panel-gap-copy);

    font-family: var(--font-main);
    font-size: var(--sos-panel-copy-size);
    font-weight: var(--weight-regular);
    line-height: var(--sos-panel-copy-lh);
}

.sos-image-panel__content p:last-child,
.sos-image-panel__content .sos-text-lead:last-child,
.sos-image-panel__content .sos-divanetto-copy:last-child {
    margin-bottom: 0;
}

.sos-image-panel .sos-divider {
    width: 44px;
    height: 0;
    margin: .82rem 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 42%, transparent);
}

.sos-image-panel .sos-btn {
    width: fit-content;
    max-width: 100%;
    margin-top: var(--sos-panel-gap-cta);

    white-space: normal;
    text-align: center;
}

/* DESKTOP · un'unica griglia robusta 62/38 */
@media (min-width: 992px) {
    .sos-image-panel--orizzontale {
        display: grid;
        grid-template-columns:
            minmax(0, var(--sos-panel-media-width))
            minmax(0, var(--sos-panel-content-width));
        grid-template-areas: "media content";
        align-items: stretch;

        min-height: clamp(340px, 34vw, 480px);
    }

    .sos-image-panel--orizzontale.sos-image-panel--image-right {
        grid-template-columns:
            minmax(0, var(--sos-panel-content-width))
            minmax(0, var(--sos-panel-media-width));
        grid-template-areas: "content media";
    }

    .sos-image-panel--orizzontale .sos-image-panel__media,
    .sos-image-panel--orizzontale .sos-image-panel__media--wide,
    .sos-image-panel--orizzontale.sos-image-panel--image-right .sos-image-panel__media,
    .sos-image-panel--orizzontale.sos-image-panel--image-right .sos-image-panel__media--wide {
        grid-area: media;

        width: 100%;
        min-width: 0;
        min-height: 100%;
        margin: 0;

        overflow: hidden;
        background: var(--sos-charcoal);
    }

    .sos-image-panel--orizzontale .sos-image-panel__media img,
    .sos-image-panel--orizzontale .sos-image-panel__media--wide img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 100%;

        object-fit: cover;
        object-position: center;
    }

    .sos-image-panel--orizzontale .sos-image-panel__content,
    .sos-image-panel--orizzontale.sos-image-panel--image-right .sos-image-panel__content {
        position: static;
        grid-area: content;

        width: 100%;
        min-width: 0;
        min-height: 100%;

        justify-content: center;
    }
}

/* MAPPA · unica variante semantica.
   Nessuna regola dipende dal nome del file immagine. */
.sos-image-panel--map :is(.sos-image-panel__media, .sos-image-panel__media--wide) {
    background: var(--sos-ivory);
}

.sos-image-panel--map :is(.sos-image-panel__media, .sos-image-panel__media--wide) img {
    object-fit: contain !important;
    object-position: center !important;
}

/* VERTICALE */
.sos-image-panel--verticale {
    display: grid;
    grid-template-columns: minmax(360px, 42%) minmax(0, 58%);
    grid-template-areas: "media content";
}

.sos-image-panel--verticale .sos-image-panel__media {
    grid-area: media;
    aspect-ratio: var(--ratio-portrait);
    overflow: hidden;
    background: var(--sos-charcoal);
}

.sos-image-panel--verticale .sos-image-panel__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sos-image-panel--verticale .sos-image-panel__content {
    grid-area: content;
}

.sos-image-panel--verticale.sos-image-panel--image-right {
    grid-template-columns: minmax(0, 58%) minmax(360px, 42%);
    grid-template-areas: "content media";
}

/* DIVANETTO · variante del componente, non pagina specifica */
.sos-image-panel--divanetto {
    --sos-panel-pad-block: clamp(2.25rem, 3vw, 3.10rem);
    --sos-panel-pad-inline: clamp(2rem, 2.8vw, 2.80rem);
    --sos-panel-gap-cta: 1rem;
}

.sos-image-panel--divanetto .sos-divanetto-kicker {
    width: 100%;
    color: var(--color-story);
    text-align: center;
}

.sos-image-panel--divanetto .sos-divanetto-heading {
    max-width: 20ch;
}

.sos-image-panel--divanetto .sos-divanetto-cta {
    margin-inline: auto;
    align-self: center;
}

/* TABLET / MOBILE */
@media (max-width: 991.98px) {
    .sos-image-panel {
        --sos-panel-pad-block: 1.65rem;
        --sos-panel-pad-inline: 1.30rem;
        --sos-panel-title-size: clamp(1.38rem, 5vw, 1.65rem);
        --sos-panel-copy-size: 1rem;
    }

    .sos-image-panel--verticale,
    .sos-image-panel--verticale.sos-image-panel--image-right,
    .sos-image-panel--orizzontale,
    .sos-image-panel--orizzontale.sos-image-panel--image-right {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "content";

        min-height: 0;
    }

    .sos-image-panel--verticale .sos-image-panel__media,
    .sos-image-panel--orizzontale .sos-image-panel__media,
    .sos-image-panel--orizzontale .sos-image-panel__media--wide,
    .sos-image-panel--orizzontale.sos-image-panel--image-right .sos-image-panel__media,
    .sos-image-panel--orizzontale.sos-image-panel--image-right .sos-image-panel__media--wide {
        grid-area: media;

        width: 100%;
        min-height: 0;
        aspect-ratio: var(--ratio-hero);
        margin: 0;

        overflow: hidden;
    }

    .sos-image-panel--orizzontale .sos-image-panel__media img,
    .sos-image-panel--orizzontale .sos-image-panel__media--wide img,
    .sos-image-panel--verticale .sos-image-panel__media img {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .sos-image-panel--orizzontale .sos-image-panel__content,
    .sos-image-panel--orizzontale.sos-image-panel--image-right .sos-image-panel__content,
    .sos-image-panel--verticale .sos-image-panel__content {
        position: static;
        grid-area: content;

        width: 100%;
        min-width: 0;
        min-height: 0;

        overflow: visible;
        justify-content: flex-start;
    }
}

.sos-divanetto-section {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 -50vw;
    padding: 0;
    overflow: hidden;
    background: var(--sos-stone);
}

.sos-divanetto-section > .sos-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.sos-mod-22a {
    width: 100%;
    margin: 0;
    padding: 2.25rem 0 1rem;
    background: var(--sos-ivory);
}

.sos-mod-22a > .sos-container,
.sos-mod-22a .sos-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.sos-mod-22a__inner {
    width: min(calc(100% - 3rem), var(--sos-home-inner));
    margin-inline: auto;
}

.sos-mod-22a__eyebrow {
    margin: 0 0 .55rem;
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.sos-mod-22a__title {
    width: 100%;
    max-width: none;
    margin: 0 0 .55rem;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: var(--fs-h2);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
    text-align: left;
}

.sos-mod-22a__text {
    width: 100%;
    max-width: none;
    margin: 0;
    color: var(--sos-text-soft);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-align: left;
}

@media (min-width: 900px) {
    .sos-mod-22a__title,
    .sos-mod-22a__text {
        white-space: nowrap;
    }

    .sos-mod-22a__title br {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .sos-mod-22a__inner {
        width: calc(100% - var(--space-md));
    }
}

.sos-mod-22 {
    width: 100%;
    margin: 0;
    padding: .35rem 0 3.5rem;
    background: var(--sos-ivory);
}

.sos-card-system {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.sos-mod-22 .mod-articles-items,
.sos-card-system .mod-articles-items,
.sos-mod-22 ul.mod-articles,
.sos-card-system ul.mod-articles {
    display: grid;
    width: min(calc(100% - 3rem), var(--sos-home-inner));
    margin: 0 auto;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sos-component-gap);
    list-style: none;
}

.sos-mod-22 .mod-articles-items > li,
.sos-card-system .mod-articles-items > li,
.sos-mod-22 .mod-articles-item,
.sos-card-system .mod-articles-item {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    flex-direction: column;
    border: 0;
    background: transparent;
}

.sos-mod-22 .mod-articles-item-content,
.sos-card-system .mod-articles-item-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.sos-mod-22 .mod-articles-item figure,
.sos-card-system .mod-articles-item figure,
.sos-mod-22 .mod-articles-item picture,
.sos-card-system .mod-articles-item picture,
.sos-mod-22 .mod-articles-item-image,
.sos-card-system .mod-articles-item-image {
    display: block;
    order: 1;
    width: 100%;
    aspect-ratio: var(--ratio-card);
    margin: 0 0 .7rem;
    overflow: hidden;
    background: var(--sos-stone);
}

.sos-mod-22 .mod-articles-item figure img,
.sos-card-system .mod-articles-item figure img,
.sos-mod-22 .mod-articles-item picture img,
.sos-card-system .mod-articles-item picture img,
.sos-mod-22 .mod-articles-item-image img,
.sos-card-system .mod-articles-item-image img,
.sos-mod-22 .mod-articles-item > img,
.sos-card-system .mod-articles-item > img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio-card);
    object-fit: cover;
    object-position: center;
}

.sos-mod-22 .mod-articles-category,
.sos-card-system .mod-articles-category,
.sos-mod-22 .mod-articles-item-category,
.sos-card-system .mod-articles-item-category,
.sos-mod-22 .category-name,
.sos-card-system .category-name {
    order: 2;
    margin: 0 0 .35rem;
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.sos-mod-22 .mod-articles-item-title,
.sos-card-system .mod-articles-item-title,
.sos-mod-22 .mod-articles-link,
.sos-card-system .mod-articles-link,
.sos-mod-22 .mod-articles-link__title,
.sos-card-system .mod-articles-link__title,
.sos-mod-22 .newsflash-title,
.sos-card-system .newsflash-title,
.sos-mod-22 .mod-articles-item h2,
.sos-card-system .mod-articles-item h2,
.sos-mod-22 .mod-articles-item h3,
.sos-card-system .mod-articles-item h3,
.sos-mod-22 .mod-articles-item h4,
.sos-card-system .mod-articles-item h4 {
    order: 3;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 .65rem;
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-card-title);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-card);
    letter-spacing: var(--tracking-heading);
    text-transform: none;
}

.sos-mod-22 .mod-articles-item-title a,
.sos-card-system .mod-articles-item-title a,
.sos-mod-22 .mod-articles-link a,
.sos-card-system .mod-articles-link a,
.sos-mod-22 .newsflash-title a,
.sos-card-system .newsflash-title a,
.sos-mod-22 .mod-articles-item h2 a,
.sos-card-system .mod-articles-item h2 a,
.sos-mod-22 .mod-articles-item h3 a,
.sos-card-system .mod-articles-item h3 a,
.sos-mod-22 .mod-articles-item h4 a,
.sos-card-system .mod-articles-item h4 a {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

@media (min-width: 900px) {
    .sos-mod-22 .mod-articles-item-title,
    .sos-card-system .mod-articles-item-title,
    .sos-mod-22 .mod-articles-link,
    .sos-card-system .mod-articles-link,
    .sos-mod-22 .mod-articles-link__title,
    .sos-card-system .mod-articles-link__title,
    .sos-mod-22 .newsflash-title,
    .sos-card-system .newsflash-title,
    .sos-mod-22 .mod-articles-item h2,
    .sos-card-system .mod-articles-item h2,
    .sos-mod-22 .mod-articles-item h3,
    .sos-card-system .mod-articles-item h3,
    .sos-mod-22 .mod-articles-item h4,
    .sos-card-system .mod-articles-item h4,
    .sos-mod-22 .mod-articles-item-title a,
    .sos-card-system .mod-articles-item-title a {
        white-space: normal;
    }
}

.sos-mod-22 .mod-articles-item-introtext,
.sos-card-system .mod-articles-item-introtext,
.sos-mod-22 .introtext,
.sos-card-system .introtext,
.sos-mod-22 .mod-articles-item-readmore,
.sos-card-system .mod-articles-item-readmore,
.sos-mod-22 .readmore,
.sos-card-system .readmore,
.sos-mod-22 .published,
.sos-card-system .published,
.sos-mod-22 .createdby,
.sos-card-system .createdby,
.sos-mod-22 .hits,
.sos-card-system .hits,
.sos-mod-22 .tags,
.sos-card-system .tags {
    display: none;
}

@media (max-width: 991.98px) {
    .sos-mod-22 .mod-articles-items,
    .sos-card-system .mod-articles-items,
    .sos-mod-22 ul.mod-articles,
    .sos-card-system ul.mod-articles {
        width: min(calc(100% - 2rem), 900px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .sos-mod-22 .mod-articles-items,
    .sos-card-system .mod-articles-items,
    .sos-mod-22 ul.mod-articles,
    .sos-card-system ul.mod-articles {
        width: calc(100% - var(--space-md));
        grid-template-columns: 1fr;
    }

    .sos-mod-22 .mod-articles-item-title,
    .sos-card-system .mod-articles-item-title,
    .sos-mod-22 .mod-articles-item-title a,
    .sos-card-system .mod-articles-item-title a {
        white-space: normal;
    }
}

.sos-mod-23a {
    width: 100%;
    padding: var(--sos-component-pad-block) 0;
    color: var(--sos-charcoal);
    background: var(--sos-stone);
}

.sos-mod-23a__inner {
    width: min(calc(100% - 3rem), var(--sos-home-inner));
    margin-inline: auto;
}

.sos-mod-23a__eyebrow {
    margin: 0 0 .55rem;
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.sos-mod-23a__title {
    margin: 0 0 .6rem;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: var(--fs-h2);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
}

.sos-mod-23a__intro {
    margin: 0;
    color: var(--sos-text-soft);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.sos-mod-23a__number,
.sos-mod-23a__arrow {
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
}

.sos-mod-23a__link:hover {
    color: var(--sos-wine);
    background: color-mix(in srgb, var(--color-surface) 24%, transparent);
}

@media (max-width: 600px) {
    .sos-mod-23a__inner {
        width: calc(100% - var(--space-md));
    }
}

.sos-mod-23 {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 -50vw;
    padding: var(--sos-component-pad-block) var(--space-md);
    box-sizing: border-box;
    color: var(--sos-ivory);
    background: var(--sos-anthracite);
}

.sos-mod-23__inner {
    margin: 0 auto;
    text-align: center;
}

.sos-mod-23__eyebrow {
    margin: 0 0 .65rem;
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.sos-mod-23__title {
    margin: 0 auto .75rem;
    color: var(--sos-ivory);
    font-family: var(--font-main);
    font-size: var(--fs-h2);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
}

.sos-mod-23__text {
    margin: 0 auto;
    color: color-mix(in srgb, var(--color-bg) 78%, transparent);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.sos-mod-23__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sos-mod-23__primary,
.sos-mod-23__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-main);
    font-size: var(--fs-button);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-button);
    text-decoration: none;
    text-transform: uppercase;
}

.sos-mod-23__primary {
    color: var(--sos-white);
    border: 1px solid var(--sos-bronze);
    background: var(--sos-bronze);
}

.sos-mod-23__secondary {
    color: var(--sos-ivory);
    border: 1px solid color-mix(in srgb, var(--color-bg) 36%, transparent);
    background: transparent;
}

.sos-mod-23__primary:hover,
.sos-mod-23__secondary:hover {
    color: var(--sos-white);
    border-color: var(--sos-wine);
    background: var(--sos-wine);
}

@media (max-width: 767.98px) {
    .sos-mod-23__actions {
        width: min(100%, 24rem);
        margin-inline: auto;
        flex-direction: column;
    }

    .sos-mod-23__primary,
    .sos-mod-23__secondary {
        width: 100%;
    }
}

.sos-mod-22 .sos-card-system,
.sos-mod-22 > .sos-card-system,
.container-bottom-a .sos-mod-22 .sos-card-system {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.sos-mod-22a__inner,
.sos-mod-22 .mod-articles-items,
.sos-mod-22 .sos-card-system .mod-articles-items,
.sos-mod-22 ul.mod-articles,
.sos-mod-22 .sos-card-system ul.mod-articles {
    width: min(
        calc(100% - (var(--sos-home-gutter) * 2)),
        var(--sos-home-inner)
    ) !important;
    max-width: var(--sos-home-inner) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

@media (min-width: 992px) {
    .sos-mod-22 .mod-articles-items,
    .sos-mod-22 .sos-card-system .mod-articles-items,
    .sos-mod-22 ul.mod-articles,
    .sos-mod-22 .sos-card-system ul.mod-articles {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        justify-content: stretch !important;
        align-items: start !important;
    }
}

.container-bottom-a .card,
.container-bottom-a .moduletable,
.container-bottom-a [class*="moduletable"],
.container-bottom-a [class*="module-"],
.container-bottom-a .module {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.container-bottom-a .card-header,
.container-bottom-a .card-footer,
.container-bottom-a .module-header,
.container-bottom-a .module-footer {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.container-bottom-a .card-body,
.container-bottom-a .module-body,
.container-bottom-a [class*="module"] > .card-body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

.container-bottom-a .card::before,
.container-bottom-a .card::after,
.container-bottom-a .moduletable::before,
.container-bottom-a .moduletable::after {
    content: none !important;
    display: none !important;
}

.container-bottom-a .card:empty,
.container-bottom-a .card-body:empty,
.container-bottom-a .moduletable:empty,
.container-bottom-a [class*="moduletable"]:empty,
.container-bottom-a .module:empty {
    display: none !important;
}

.container-bottom-a .card:has(> .card-body:empty),
.container-bottom-a .moduletable:has(> .card-body:empty),
.container-bottom-a [class*="moduletable"]:has(> .card-body:empty) {
    display: none !important;
}

.container-bottom-a .card-body > :first-child,
.container-bottom-a .module-body > :first-child {
    margin-top: 0;
}

.container-bottom-a .card-body > :last-child,
.container-bottom-a .module-body > :last-child {
    margin-bottom: 0;
}

.container-bottom-a,
.site-grid > .container-bottom-a,
.grid-child.container-bottom-a,
.container-bottom-a.card,
.container-bottom-a.moduletable,
.container-bottom-a[class*="moduletable"] {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.container-bottom-a::before,
.container-bottom-a::after,
.site-grid > .container-bottom-a::before,
.site-grid > .container-bottom-a::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.site-grid .grid-child.container-bottom-a {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.container-bottom-a > :first-child {
    margin-top: 0 !important;
}

.container-bottom-a > :last-child {
    margin-bottom: 0 !important;
}

.main-bottom,
.main-bottom.card,
.site-grid .main-bottom,
.container-component .main-bottom {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.main-bottom > .card-body,
.main-bottom.card > .card-body,
.container-component .main-bottom > .card-body {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.main-bottom > .card-body > .mod-articles-items,
.main-bottom .mod-articles-items,
.main-bottom ul.mod-articles-items,
.main-bottom ul.mod-list {
    width: min(
        calc(100% - var(--sos-content-inline-space)),
        var(--sos-container-wide)
    ) !important;
    max-width: var(--sos-container-wide) !important;
    margin-inline: auto !important;
    margin-block: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.main-bottom .mod-articles-items > li,
.main-bottom .mod-list > li,
.main-bottom .mod-articles-item,
.main-bottom .mod-articles-item-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.main-bottom::before,
.main-bottom::after,
.main-bottom.card::before,
.main-bottom.card::after {
    content: none !important;
    display: none !important;
}

.main-bottom,
.container-bottom-a {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.main-bottom > .card-body > :first-child,
.main-bottom .mod-articles-items > :first-child,
.container-bottom-a > :first-child {
    margin-top: 0 !important;
}

.main-bottom > .card-body > :last-child,
.main-bottom .mod-articles-items > :last-child,
.container-bottom-a > :last-child {
    margin-bottom: 0 !important;
}

.sos-mod-23a {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
}

.sos-mod-23a__header {
    max-width: 760px !important;
    margin-bottom: 1.45rem !important;
}

.sos-mod-23a__eyebrow {
    margin-bottom: .45rem !important;
}

.sos-mod-23a__title {
    margin-bottom: .45rem !important;
}

.sos-mod-23a__intro {
    max-width: 44rem !important;
}

.sos-mod-23a__links {
    margin-top: 0 !important;
}

.sos-mod-23a__link {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto 1fr !important;
    column-gap: .75rem !important;
    row-gap: .45rem !important;
    align-items: start !important;
}

.sos-mod-23a__number {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
}

.sos-mod-23a__link-title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: end !important;
}

.sos-mod-23a__arrow {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: end !important;
    padding-bottom: .18rem !important;
}

.sos-mod-23a__link:hover,
.sos-mod-23a__link:focus {
    background: color-mix(in srgb, var(--color-surface) 18%, transparent) !important;
}

.sos-mod-23a__link:hover .sos-mod-23a__arrow,
.sos-mod-23a__link:focus .sos-mod-23a__arrow {
    transform: translateX(3px);
}

.sos-mod-23 {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
}

.sos-mod-23__inner {
    width: min(
        calc(100% - (var(--sos-home-gutter) * 2)),
        760px
    ) !important;
    max-width: 760px !important;
}

.sos-mod-23__eyebrow {
    margin-bottom: .55rem !important;
}

.sos-mod-23__title {
    max-width: 18ch !important;
    margin-bottom: .65rem !important;
}

.sos-mod-23__text {
    max-width: 38rem !important;
}

.sos-mod-23__actions {
    margin-top: 1.15rem !important;
    gap: .65rem !important;
}

.sos-mod-23__primary,
.sos-mod-23__secondary {
    min-height: 40px !important;
    padding: .68rem .95rem !important;
}

.sos-mod-23a + .sos-mod-23,
.bottom-a:has(.sos-mod-23a) + .bottom-a:has(.sos-mod-23) {
    margin-top: 0 !important;
}

.bottom-a:has(.sos-mod-23a),
.bottom-a:has(.sos-mod-23) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 767.98px) {
    .sos-mod-23a,
    .sos-mod-23 {
        padding-top: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }

    .sos-mod-23a__link {
        min-height: 88px !important;
        padding: .9rem 1rem !important;
    }

    .sos-mod-23__actions {
        margin-top: 1rem !important;
    }
}

.sos-mod-23a__links {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--sos-border) !important;
    border-bottom: 1px solid var(--sos-border) !important;
}

.sos-mod-23a__link {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: var(--ratio-banner) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--sos-white) !important;
    background: var(--sos-charcoal) !important;
    text-decoration: none !important;
}

.sos-mod-23a__link + .sos-mod-23a__link {
    border-left: 1px solid color-mix(in srgb, var(--color-bg) 28%, transparent) !important;
}

.sos-mod-23a__media {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.sos-mod-23a__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.001);
    transition: transform .55s ease,
        filter .55s ease !important;
}

.sos-mod-23a__shade {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--color-overlay) 74%, transparent) 0%,
            color-mix(in srgb, var(--color-overlay) 48%, transparent) 48%,
            color-mix(in srgb, var(--color-overlay) 26%, transparent) 100%
        ) !important;
    transition: background .35s ease !important;
}

.sos-mod-23a__number {
    position: absolute !important;
    top: .78rem !important;
    left: .90rem !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: color-mix(in srgb, var(--color-surface) 80%, transparent) !important;
    font-family: var(--font-main) !important;
    font-size: var(--fs-meta) !important;
    font-weight: var(--weight-semibold) !important;
    line-height: var(--lh-ui) !important;
    letter-spacing: var(--tracking-meta) !important;
}

.sos-mod-23a__link-title {
    position: absolute !important;
    left: .90rem !important;
    bottom: .72rem !important;
    z-index: 2 !important;
    width: calc(100% - 3.25rem) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sos-mod-23a__arrow {
    position: absolute !important;
    right: .90rem !important;
    bottom: .82rem !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-accent-light) !important;
    font-family: var(--font-main) !important;
    font-size: var(--fs-meta) !important;
    font-weight: var(--weight-semibold) !important;
    line-height: var(--lh-ui) !important;
    transition: transform .35s ease !important;
}

@media (hover: hover) {
    .sos-mod-23a__link:hover .sos-mod-23a__media img,
    .sos-mod-23a__link:focus-visible .sos-mod-23a__media img {
        transform: scale(1.035) !important;
        filter: brightness(1.06) !important;
    }

    .sos-mod-23a__link:hover .sos-mod-23a__shade,
    .sos-mod-23a__link:focus-visible .sos-mod-23a__shade {
        background: linear-gradient(
                90deg,
                color-mix(in srgb, var(--color-overlay) 64%, transparent) 0%,
                color-mix(in srgb, var(--color-overlay) 38%, transparent) 48%,
                color-mix(in srgb, var(--color-overlay) 18%, transparent) 100%
            ) !important;
    }

    .sos-mod-23a__link:hover .sos-mod-23a__arrow,
    .sos-mod-23a__link:focus-visible .sos-mod-23a__arrow {
        transform: translateX(4px) !important;
    }
}

@media (max-width: 991.98px) {
    .sos-mod-23a__links {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sos-mod-23a__link:nth-child(3) {
        border-left: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--color-bg) 28%, transparent) !important;
    }

    .sos-mod-23a__link:nth-child(4) {
        border-top: 1px solid color-mix(in srgb, var(--color-bg) 28%, transparent) !important;
    }
}

@media (max-width: 600px) {
    .sos-mod-23a__links {
        grid-template-columns: 1fr !important;
    }

    .sos-mod-23a__link,
    .sos-mod-23a__link + .sos-mod-23a__link,
    .sos-mod-23a__link:nth-child(3),
    .sos-mod-23a__link:nth-child(4) {
        border-left: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--color-bg) 28%, transparent) !important;
    }

    .sos-mod-23a__link:first-child {
        border-top: 0 !important;
    }

    .sos-mod-23a__link {
        aspect-ratio: var(--ratio-banner) !important;
    }

    .sos-mod-23a__number {
        top: .68rem !important;
        left: .78rem !important;
    }

    .sos-mod-23a__link-title {
        left: .78rem !important;
        bottom: .62rem !important;
        width: calc(100% - 3rem) !important;
    }

    .sos-mod-23a__arrow {
        right: .78rem !important;
        bottom: .72rem !important;
    }
}

.sos-mod-23a__number {
    display: none !important;
}

.sos-mod-23a__link-title {
    font-family: var(--font-main) !important;
    font-size: var(--fs-feature-link) !important;
    font-style: normal !important;
    font-weight: var(--weight-semibold) !important;
    line-height: var(--lh-heading) !important;
    letter-spacing: var(--tracking-feature-link) !important;
    text-transform: none !important;
    color: var(--color-surface) !important;
    text-shadow: 0 2px 5px color-mix(in srgb, var(--color-black) 95%, transparent),
        0 0 16px color-mix(in srgb, var(--color-black) 75%, transparent) !important;
}

.sos-mod-23a__links {
    gap: 8px !important;
}

.sos-mod-23a__link,
.sos-mod-23a__link + .sos-mod-23a__link,
.sos-mod-23a__link:nth-child(3),
.sos-mod-23a__link:nth-child(4) {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

@media (max-width: 991.98px) {
    .sos-mod-23a__links {
        gap: 8px !important;
    }
}

@media (max-width: 600px) {
    .sos-mod-23a__links {
        gap: 8px !important;
    }

    .sos-mod-23a__link,
    .sos-mod-23a__link + .sos-mod-23a__link,
    .sos-mod-23a__link:nth-child(3),
    .sos-mod-23a__link:nth-child(4),
    .sos-mod-23a__link:first-child {
        border: 0 !important;
    }
}

.site-grid:has(> .main-bottom):has(> .container-bottom-a) {
    row-gap: 0 !important;
}

.site-grid > .main-bottom,
.site-grid > .container-bottom-a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.site-grid > .main-bottom + .container-bottom-a {
    margin-top: 0 !important;
}

.site-grid:has(> .container-component .main-bottom):has(> .container-bottom-a) {
    row-gap: 0 !important;
}

.site-grid > .container-component:has(> .main-bottom),
.site-grid > .container-component:has(.main-bottom) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.site-grid > .container-component:has(.main-bottom) > main,
.site-grid > .container-component:has(.main-bottom) > .main-bottom,
.site-grid > .container-component:has(.main-bottom) > .main-bottom.card {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.site-grid > .container-bottom-a {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.site-grid:has(> .container-component .main-bottom):has(> .container-bottom-a) {
    row-gap: 0 !important;
}
.sos-contact-container {
    width: min(
        calc(100% - (var(--sos-home-gutter, 1rem) * 2)),
        var(--sos-container)
    );
    max-width: var(--sos-container);
    margin-right: auto;
    margin-left: auto;
}

.sos-contact-eyebrow,
.sos-contact-card__eyebrow {
    margin: 0 0 var(--sos-space-sm);
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    line-height: var(--lh-ui);
    text-transform: uppercase;
}

.sos-contact-title,
.sos-contact-section-title,
.sos-contact-card__title,
.sos-contact-closing__title {
    margin-top: 0;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-heading);
}


.sos-contact-hero {
    padding-top: clamp(3.25rem, 5vw, 5rem);
    padding-bottom: clamp(2.75rem, 4.5vw, var(--space-xl));
    text-align: center;
    background: var(--sos-ivory);
}

.sos-contact-hero .sos-contact-container {
    max-width: 900px;
}

.sos-contact-title {
    margin-bottom: 0;
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
}

.sos-contact-lead {
    max-width: 700px;
    margin: var(--sos-space-md) auto 0;
    color: var(--sos-text-soft);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

.sos-contact-main {
    padding: 0 0 var(--sos-space-xl);
    background: var(--sos-ivory);
}

.sos-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--sos-border);
    border-bottom: 1px solid var(--sos-border);
}

.sos-contact-card {
    min-width: 0;
    min-height: 250px;
    padding: clamp(1.6rem, 2.5vw, 2.25rem);
}

.sos-contact-card + .sos-contact-card {
    border-left: 1px solid var(--sos-border);
}

.sos-contact-card__title {
    margin-bottom: var(--sos-space-md);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
}

.sos-contact-card__text {
    margin: 0 0 var(--sos-space-md);
    color: var(--sos-text-soft);
    font-style: normal;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.sos-contact-card__text a {
    text-decoration: none;
}

.sos-contact-card__text a:hover,
.sos-contact-card__text a:focus-visible {
    color: var(--sos-bronze);
}

.sos-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--sos-bronze) !important;
    font-family: var(--font-main);
    font-size: var(--fs-button);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-button);
    line-height: var(--lh-ui);
    text-decoration: none;
    text-transform: uppercase;
}

.sos-contact-link span {
    display: inline-block;
    transition: transform var(--sos-transition);
}

.sos-contact-link:hover span,
.sos-contact-link:focus-visible span {
    transform: translateX(4px);
}

.sos-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 48px;
    padding: 0.75rem 1.35rem;
    border: 1px solid var(--sos-bronze);
    border-radius: var(--radius-pill);
    color: var(--sos-white) !important;
    background: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-button);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-button);
    line-height: var(--lh-ui);
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--sos-transition),
        color var(--sos-transition),
        border-color var(--sos-transition),
        transform var(--sos-transition);
}

.sos-contact-btn:hover,
.sos-contact-btn:focus-visible {
    color: var(--sos-white) !important;
    border-color: var(--sos-wine);
    background: var(--sos-wine);
    transform: translateY(-2px);
}

.sos-contact-hours {
    padding: var(--sos-space-lg) 0 1.75rem;
    background: var(--sos-stone);
}

.sos-contact-hours__header {
    max-width: 740px;
    margin: 0 auto var(--sos-space-md);
    text-align: center;
}

.sos-contact-section-title {
    margin-bottom: 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
}

.sos-contact-hours__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--sos-border);
}

.sos-contact-hours__item {
    min-width: 0;
    padding: var(--sos-space-md) var(--sos-space-md) 0;
    text-align: center;
}

.sos-contact-hours__item + .sos-contact-hours__item {
    border-left: 1px solid var(--sos-border);
}

.sos-contact-hours__item h3 {
    margin: 0 0 var(--sos-space-sm);
    font-family: var(--font-main);
    font-size: var(--fs-h3);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
}

.sos-contact-hours__item p {
    margin: 0;
    color: var(--sos-text-soft);
    line-height: var(--lh-body);
}

.sos-contact-hours__note {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: var(--fs-small);
}

.sos-contact-map {
    width: 100%;
    height: min(36vw, 420px);
    min-height: 300px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--sos-stone);
}

.sos-contact-map__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.sos-contact-closing {
    padding: clamp(3.25rem, 5vw, 4.5rem) 0;
    text-align: center;
    background: var(--sos-anthracite);
}

.sos-contact-closing .sos-contact-eyebrow {
    color: var(--sos-bronze);
}

.sos-contact-closing__title {
    margin-bottom: 0;
    color: var(--sos-white);
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
}

.sos-contact-closing__text {
    margin: var(--sos-space-md) 0 var(--sos-space-lg);
    color: color-mix(in srgb, var(--color-bg) 76%, transparent);
    font-size: var(--fs-body);
    letter-spacing: var(--tracking-body);
}

.sos-contact-legal {
    margin: var(--sos-space-lg) 0 0;
    color: color-mix(in srgb, var(--color-bg) 46%, transparent);
    font-size: var(--fs-meta);
    letter-spacing: var(--tracking-meta);
}

@media (max-width: 991.98px) {
    .sos-contact-grid,
    .sos-contact-hours__grid {
        grid-template-columns: 1fr;
    }

    .sos-contact-card {
        min-height: 0;
        padding: var(--sos-space-lg) var(--sos-space-sm);
        text-align: center;
    }

    .sos-contact-card + .sos-contact-card {
        border-top: 1px solid var(--sos-border);
        border-left: 0;
    }

    .sos-contact-hours__item {
        padding: var(--sos-space-lg) var(--sos-space-sm);
    }

    .sos-contact-hours__item + .sos-contact-hours__item {
        border-top: 1px solid var(--sos-border);
        border-left: 0;
    }
}

@media (max-width: 767.98px) {
    .sos-contact-container {
        width: calc(100% - var(--space-md));
        max-width: none;
    }

    .sos-contact-hero {
        padding-top: 2.75rem;
        padding-bottom: 2.4rem;
    }

    .sos-contact-lead {
        margin-top: var(--sos-space-md);
    }

    .sos-contact-hours {
        padding: var(--sos-space-md) 0 1.25rem;
    }

    .sos-contact-hours__header {
        margin-bottom: var(--sos-space-md);
    }

    .sos-contact-map {
        height: 300px;
        min-height: 0;
    }

    .sos-contact-closing {
        padding: var(--sos-space-lg) 0;
    }
}


.sos-mod-24 {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 -50vw;
    padding: 0;
    overflow: hidden;
    color: var(--sos-ivory);
    background: var(--sos-anthracite);
}

.sos-mod-24__inner {
    width: min(
        calc(100% - (var(--sos-home-gutter, 1rem) * 2)),
        var(--sos-container)
    );
    margin-right: auto;
    margin-left: auto;
    padding: clamp(3.25rem, 5vw, 4.5rem) 0;
    text-align: center;
}

.sos-mod-24__eyebrow {
    margin: 0 0 var(--sos-space-sm);
    color: var(--sos-bronze);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    line-height: var(--lh-ui);
    text-transform: uppercase;
}

.sos-mod-24__title {
    margin: 0;
    color: var(--sos-white);
    font-family: var(--font-main);
    font-size: var(--fs-h2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-heading);
    line-height: var(--lh-heading);
}

.sos-mod-24__text {
    margin: var(--sos-space-md) 0 0;
    color: color-mix(in srgb, var(--color-bg) 72%, transparent);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.sos-mod-24__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sos-space-sm);
    margin-top: var(--sos-space-lg);
}

.sos-mod-24__primary,
.sos-mod-24__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 48px;
    padding: 0.75rem 1.35rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-main);
    font-size: var(--fs-button);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-button);
    line-height: var(--lh-ui);
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--sos-transition),
        background-color var(--sos-transition),
        border-color var(--sos-transition),
        transform var(--sos-transition);
}

.sos-mod-24__primary {
    border: 1px solid var(--sos-bronze);
    color: var(--sos-white) !important;
    background: var(--sos-bronze);
}

.sos-mod-24__primary:hover,
.sos-mod-24__primary:focus-visible {
    border-color: var(--sos-wine);
    color: var(--sos-white) !important;
    background: var(--sos-wine);
    transform: translateY(-2px);
}

.sos-mod-24__secondary {
    border: 1px solid color-mix(in srgb, var(--color-bg) 52%, transparent);
    color: var(--sos-ivory) !important;
    background: transparent;
}

.sos-mod-24__secondary:hover,
.sos-mod-24__secondary:focus-visible {
    border-color: var(--sos-ivory);
    color: var(--sos-charcoal) !important;
    background: var(--sos-ivory);
    transform: translateY(-2px);
}

.sos-mod-24__micro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--sos-space-lg);
    color: color-mix(in srgb, var(--color-bg) 48%, transparent);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    line-height: var(--lh-ui);
}

.sos-mod-24__micro a {
    color: inherit;
    text-decoration: none;
}

.sos-mod-24__micro a:hover,
.sos-mod-24__micro a:focus-visible {
    color: var(--sos-bronze);
}

@media (max-width: 767.98px) {
    .sos-mod-24__inner {
        width: calc(100% - var(--space-md));
        padding: var(--sos-space-xl) 0;
    }

    .sos-mod-24__actions {
        align-items: stretch;
        flex-direction: column;
        width: min(100%, 360px);
        margin-right: auto;
        margin-left: auto;
    }

    .sos-mod-24__primary,
    .sos-mod-24__secondary {
        width: 100%;
    }

    .sos-mod-24__micro {
        flex-direction: column;
        gap: 0.15rem;
    }

    .sos-mod-24__micro > span {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .sos-contact-card {
        padding-top: 1.65rem;
        padding-bottom: 1.65rem;
    }
}

@media (max-width: 767.98px) {
    .sos-contact-grid {
        display: block;
        border-top: 0;
        border-bottom: 0;
    }

    .sos-contact-card {
        position: relative;
        min-height: 0;
        margin: 0 0 1rem;
        padding: var(--space-md) 1.25rem 1.4rem;
        border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent) !important;
        border-radius: var(--radius);
        background: color-mix(in srgb, var(--color-surface) 52%, transparent);
        box-shadow: var(--sos-shadow-sm);
        text-align: left;
    }

    .sos-contact-card + .sos-contact-card {
        margin-top: 0;
        padding-top: var(--space-md);
        border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent) !important;
        border-left: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent) !important;
    }

    .sos-contact-card:nth-child(2) {
        border-color: color-mix(in srgb, var(--color-accent) 34%, transparent) !important;
        background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
                color-mix(in srgb, var(--color-surface) 58%, transparent) 100%
            );
    }

    .sos-contact-card:nth-child(2)::before {
        position: absolute;
        top: 0;
        right: 1.25rem;
        left: 1.25rem;
        height: 2px;
        content: "";
        background: var(--sos-bronze);
    }

    .sos-contact-card__eyebrow {
        margin-bottom: 0.75rem;
        color: var(--sos-bronze);
        font-size: var(--fs-meta);
        letter-spacing: var(--tracking-meta);
    }

    .sos-contact-card__title {
        margin-bottom: 1rem;
    }

    .sos-contact-card__text {
        margin-bottom: 1rem;
    }

    .sos-contact-link {
        margin-top: 0.15rem;
        margin-bottom: 0;
    }

    .sos-contact-btn {
        width: 100%;
        max-width: 100%;
        margin-top: 0.35rem;
    }

    .sos-contact-main {
        padding-bottom: 2rem;
    }

    .sos-contact-hours {
        margin-top: 0;
    }
}
/* =============================================================================
SOSTERIA · COMPONENTE VIAGGI / PAGINA PONTE + MODULO ELENCO
Versione componente: 2.0.0
Regola: nessun Itemid, nessun body:has(pagina), nessun ID numerico.
Il componente mantiene lo stesso aspetto ovunque siano presenti le sue classi.
============================================================================= */

.sos-wine-trips-hero {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    align-items: start;
    gap: clamp(1rem, 1.5vw, 1.35rem);
    width: min(calc(100% - 2rem), var(--sos-container-wide));
    max-width: var(--sos-container-wide);
    margin: 0 auto;
    padding: 1.35rem 0 1.45rem;
    background: var(--sos-ivory);
}

.sos-wine-trips-hero__media {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-text) 9%, transparent);
}

.sos-wine-trips-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio-hero);
    object-fit: cover;
    object-position: center;
}

.sos-wine-trips-hero__content {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    color: var(--sos-charcoal);
}

.sos-wine-trips-hero__content > * {
    width: 100%;
    max-width: 100%;
}

.sos-wine-trips-hero__eyebrow,
.sos-wine-trips-intro__eyebrow {
    margin: 0 0 .55rem;
    color: var(--sos-bronze);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    line-height: var(--lh-ui);
    text-transform: uppercase;
}

.sos-wine-trips-hero__mark {
    width: 56px;
    height: 56px;
    margin-bottom: .65rem;
}

.sos-wine-trips-hero__mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sos-wine-trips-hero__title {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--sos-charcoal);
    font-size: var(--fs-h1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-heading);
    line-height: var(--lh-heading);
    white-space: normal;
    overflow-wrap: break-word;
}

.sos-wine-trips-hero__title em {
    display: block;
    color: var(--sos-bronze);
    font-weight: inherit;
}

.sos-wine-trips-hero__lead {
    max-width: none;
    margin: .75rem 0 0;
    color: var(--sos-text-soft);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

.sos-wine-trips-intro {
    padding: clamp(2.25rem, 4vw, 3.25rem) 0;
    background: var(--sos-ivory);
}

.sos-wine-trips-intro__inner {
    width: min(calc(100% - 2rem), var(--sos-container-reading));
    margin: 0 auto;
    text-align: center;
}

.sos-wine-trips-intro__title {
    margin: 0;
    color: var(--sos-charcoal);
    font-size: var(--fs-h2);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-heading);
    line-height: var(--lh-heading);
}

.sos-wine-trips-intro__text {
    margin: 1rem auto 0;
    color: var(--sos-text-soft);
    line-height: var(--lh-body);
}

.sos-wine-trips-intro__closing {
    margin: .55rem auto 0;
    color: var(--sos-charcoal);
    font-size: var(--fs-lead);
    font-style: italic;
    line-height: var(--lh-lead);
}

/* Modulo articoli: la classe semantica è sufficiente, indipendentemente dalla pagina. */
:is(.main-bottom.sos-editorial-list, .main-bottom.sos-wine-trips-list),
:is(.main-bottom.sos-editorial-list, .main-bottom.sos-wine-trips-list).card,
:is(.sos-editorial-list, .sos-wine-trips-list) {
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 0 0 -50vw !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sos-stone) !important;
    box-shadow: none !important;
}

/* IMPORTANTE:
   il reset generico di .main-bottom usa padding:0!important.
   Il componente editoriale deve quindi dichiarare esplicitamente il proprio respiro. */
:is(.main-bottom.sos-editorial-list, .main-bottom.sos-wine-trips-list) > .card-body,
:is(.sos-editorial-list, .sos-wine-trips-list) > .card-body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding:
        clamp(2.75rem, 4.5vw, 4rem)
        0
        clamp(3rem, 5vw, 4.25rem) !important;
    box-sizing: border-box !important;
}

:is(.sos-editorial-list, .sos-wine-trips-list)::before {
    display: block;
    width: 56px;
    height: 1px;
    margin: 0 auto clamp(1.5rem, 2.5vw, 2.25rem);
    content: "";
    background: var(--sos-bronze);
}

/* Tre colonne vere su desktop.
   Nessun limite al numero di elementi: le righe successive si creano automaticamente. */
:is(.sos-editorial-list, .sos-wine-trips-list)
:is(.mod-articles-items, ul.mod-articles, ul.mod-list) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    column-gap: clamp(1.25rem, 2vw, 2rem) !important;
    row-gap: clamp(1.5rem, 2.4vw, 2.25rem) !important;

    width: min(
        calc(100% - var(--sos-content-inline-space)),
        var(--sos-container-wide)
    ) !important;
    max-width: var(--sos-container-wide) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
}

:is(.sos-editorial-list, .sos-wine-trips-list)
:is(.mod-articles-items, ul.mod-articles, ul.mod-list) > *,
:is(.sos-editorial-list, .sos-wine-trips-list) .mod-articles-item {
    min-width: 0;
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--sos-white) 62%, transparent);
    box-shadow: var(--sos-shadow-sm);
    transition: transform var(--sos-transition), box-shadow var(--sos-transition), border-color var(--sos-transition);
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-items, ul.mod-articles, ul.mod-list) > *:hover,
:is(.sos-editorial-list, .sos-wine-trips-list) .mod-articles-item:hover {
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
    box-shadow: var(--sos-shadow-md);
    transform: translateY(-3px);
}

:is(.sos-editorial-list, .sos-wine-trips-list) .mod-articles-item-content {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(figure, picture, .mod-articles-item-image) {
    display: block;
    order: 1;
    width: 100%;
    aspect-ratio: var(--ratio-hero);
    margin: 0;
    overflow: hidden;
    background: var(--sos-charcoal);
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(figure, picture, .mod-articles-item-image) img,
:is(.sos-editorial-list, .sos-wine-trips-list) .mod-articles-item > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms ease;
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-items, ul.mod-articles, ul.mod-list) > *:hover img,
:is(.sos-editorial-list, .sos-wine-trips-list) .mod-articles-item:hover img {
    transform: scale(1.025);
}

:is(.sos-editorial-list, .sos-wine-trips-list) .mod-articles-title {
    order: 2;
    width: 100%;
    margin: 0 !important;
    padding: 1rem 1.15rem 1.05rem !important;
    color: var(--sos-bronze) !important;
    font-size: var(--fs-card-title) !important;
    font-weight: var(--weight-semibold) !important;
    line-height: var(--lh-card) !important;
    letter-spacing: var(--tracking-heading) !important;
}

:is(.sos-editorial-list, .sos-wine-trips-list) .mod-articles-title > .mod-articles-link {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-category, .mod-articles-item-category, .category-name, .published, .createdby, .hits, .tags) {
    display: none;
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-item-introtext, .introtext) {
    display: block;
    order: 3;
    margin: 0;
    padding: 0 1.15rem 1rem;
    color: var(--sos-text-soft);
    line-height: var(--lh-body);
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-item-readmore, .readmore) {
    order: 4;
    margin-top: auto;
    padding: 0 1.15rem 1.15rem;
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-item-readmore, .readmore) a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--sos-bronze);
    font-size: var(--fs-button);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-button);
    line-height: var(--lh-ui);
    text-decoration: none;
    text-transform: uppercase;
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-item-readmore, .readmore) a::after {
    content: "→";
    transition: transform var(--sos-transition);
}

:is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-item-readmore, .readmore) a:is(:hover, :focus-visible)::after {
    transform: translateX(4px);
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sos-wine-trips-hero {
        grid-template-columns: 1fr;
        width: min(calc(100% - 1.5rem), 900px);
    }

    .sos-wine-trips-hero__mark {
        width: 52px;
        height: 52px;
    }

    :is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-items, ul.mod-articles, ul.mod-list) {
        width: min(calc(100% - 2rem), 900px);
    }
}

@media (max-width: 767.98px) {
    .sos-wine-trips-hero {
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
        padding: 0 0 1.85rem;
    }

    .sos-wine-trips-hero__media {
        border-radius: 0;
        box-shadow: none;
    }

    .sos-wine-trips-hero__content {
        display: grid;
        justify-items: center;
        padding: var(--space-md) 1rem 0;
        text-align: center;
    }

    .sos-wine-trips-hero__content > * {
        width: auto;
        max-width: 100%;
        text-align: center;
    }

    .sos-wine-trips-hero__mark {
        width: 50px;
        height: 50px;
        margin-inline: auto;
    }

    .sos-wine-trips-hero__title {
        width: min(100%, 12ch);
    }

    .sos-wine-trips-hero__lead {
        width: min(100%, 31rem);
    }

    .sos-wine-trips-intro {
        padding: 2.5rem 0;
    }

    :is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-items, ul.mod-articles, ul.mod-list) {
        grid-template-columns: 1fr;
        width: calc(100% - 1.25rem);
        gap: var(--space-md);
    }

    :is(.sos-editorial-list, .sos-wine-trips-list) :is(.mod-articles-items, ul.mod-articles, ul.mod-list) > *,
    :is(.sos-editorial-list, .sos-wine-trips-list) .mod-articles-item {
        max-width: none;
    }
}
/* =============================================================================
   TEST STYLE · SOS-PALETTE-SWATCH
   Campioni colore reali governati esclusivamente dai token Master.
   ============================================================================= */

.sos-palette-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.sos-swatch {
    display: flex;
    min-height: 190px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: none;
}

.sos-swatch__body {
    display: flex;
    width: 100%;
    padding: var(--space-md);
    flex-direction: column;
    justify-content: flex-end;
    gap: .25rem;
}

.sos-swatch__name {
    font-size: var(--fs-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-heading);
}

.sos-swatch__token,
.sos-swatch__hex {
    display: block;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.sos-swatch__token {
    font-weight: var(--weight-semibold);
}

.sos-swatch--ivory {
    color: var(--color-text);
    background: var(--color-bg);
}

.sos-swatch--stone {
    color: var(--color-text);
    background: var(--color-bg-alt);
}

.sos-swatch--charcoal {
    color: var(--color-bg);
    background: var(--color-text);
}

.sos-swatch--anthracite {
    color: var(--color-bg);
    background: var(--color-dark);
}

.sos-swatch--bronze {
    color: var(--color-bg);
    background: var(--color-accent);
}

.sos-swatch--wine {
    color: var(--color-bg);
    background: var(--color-wine);
}

@media (max-width: 991.98px) {
    .sos-palette-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .sos-palette-grid {
        grid-template-columns: 1fr;
    }

    .sos-swatch {
        min-height: 150px;
    }
}
/* =============================================================================
SOSTERIA · INTRO EDITORIALE ARTICOLO
Compatibilità con HTML pubblicato: classi .sos-wine-diary__intro-* trattate come
componenti autonome, senza dipendere da un wrapper pagina specifico.
============================================================================= */

.sos-section--wine-intro {
    padding-block: clamp(2rem, 2.8vw, 2.75rem);
}

.sos-wine-diary__intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(.75rem, 1.25vw, 1rem);
}

.sos-wine-diary__intro-heading,
.sos-wine-diary__intro-copy {
    min-width: 0;
}

.sos-wine-diary__intro-heading .sos-title-02 {
    max-width: none;
    margin-bottom: 0 !important;
}

.sos-wine-diary__intro-copy {
    width: 100%;
    max-width: none;
}

.sos-wine-diary__intro-copy p {
    width: 100%;
    max-width: none;
    margin-top: 0;
    text-align: left;
}

.sos-wine-diary__intro-copy p:last-child {
    margin-bottom: 0;
}
/* =============================================================================
   SOS-COMPONENT · ST PAGEFLIP · REGIA GLOBALE
   Versione componente: 1.0.0
   Integrato nel MASTER: v1.32.7
   Scope: tutti i flipbook racchiusi in .sos-flipbook

   HTML standard:
   <section class="sos-section sos-section-stone sos-flipbook-section">
       <div class="sos-container-wide">
           <div class="sos-center sos-flipbook-heading">...</div>
           <div class="sos-flipbook">[book ...]</div>
       </div>
   </section>

   Principio:
   - HTML = cartella, PDF, id e parametri del libro;
   - CSS = aspetto comune;
   - ST PageFlip = funzionamento.
   ============================================================================= */


/* --------------------------------------------------------------------------
   01 · SEZIONE
   -------------------------------------------------------------------------- */

.sos-flipbook-section {
    padding-block: clamp(var(--space-md), 3.2vw, var(--space-lg));
}

.sos-flipbook-heading {
    margin-bottom: clamp(var(--space-sm), 1.8vw, var(--space-md));
}


/* --------------------------------------------------------------------------
   02 · CONTENITORE
   -------------------------------------------------------------------------- */

.sos-flipbook {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
}

.sos-flipbook .pdf_book_fullscreen,
.sos-flipbook .pdf_book_container,
.sos-flipbook .pdf_book_wrapper {
    width: 100%;
    max-width: 100%;
    margin-inline: auto !important;
}

.sos-flipbook .pdf_book_container {
    position: relative;
}

.sos-flipbook .pdf_book_wrapper {
    display: block;
}

.sos-flipbook .flip-book,
.sos-flipbook .ui-flipbook {
    max-width: 100%;
    margin-inline: auto !important;
}


/* --------------------------------------------------------------------------
   03 · BARRA COMANDI
   -------------------------------------------------------------------------- */

.sos-flipbook .controls {
    position: relative;
    width: 100%;
    margin: var(--space-sm) auto 0 !important;
    padding: 0;
    text-align: center;
}

.sos-flipbook .bt-options {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    width: fit-content;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 0.25rem 0.50rem !important;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: var(--fs-body) !important;
    line-height: var(--lh-ui);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   04 · PULSANTI
   -------------------------------------------------------------------------- */

.sos-flipbook .bt-options button.btn.btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0 !important;
    padding: 0.25rem 0.375rem !important;
    color: var(--sos-charcoal) !important;
    font-size: 1em !important;
    line-height: 1;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        color var(--sos-transition),
        transform var(--sos-transition);
}

.sos-flipbook .bt-options button.btn.btn-lg:hover,
.sos-flipbook .bt-options button.btn.btn-lg:focus {
    color: var(--sos-bronze) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.sos-flipbook .bt-options button.btn.btn-lg:active {
    color: var(--sos-wine) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none;
}


/* --------------------------------------------------------------------------
   05 · ELEMENTI DISATTIVATI DAL PLUGIN
   -------------------------------------------------------------------------- */

.sos-flipbook .pdf_control_none {
    display: none !important;
}


/* --------------------------------------------------------------------------
   06 · SLIDER
   Lo standard Sosteria usa slider="false".
   Questa regola elimina eventuali residui grafici o testi localizzati.
   -------------------------------------------------------------------------- */

.sos-flipbook .slider,
.sos-flipbook .slider.pdf_control_none {
    display: none !important;
}


/* --------------------------------------------------------------------------
   07 · FULLSCREEN
   -------------------------------------------------------------------------- */

.sos-flipbook .controls.controls_fullscreen {
    position: absolute !important;
    right: 0 !important;
    bottom: var(--space-sm) !important;
    left: 0 !important;
    z-index: 100;
    width: 100% !important;
    margin: 0 !important;
}

.sos-flipbook .controls_fullscreen .bt-options {
    margin-inline: auto !important;
    padding: 0.375rem 0.625rem !important;
    background: color-mix(in srgb, var(--sos-white) 90%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}


/* --------------------------------------------------------------------------
   08 · MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    .sos-flipbook-section {
        padding-block: var(--space-md);
    }

    .sos-flipbook-heading {
        margin-bottom: var(--space-sm);
    }

    .sos-flipbook .controls {
        margin-top: var(--space-xs) !important;
    }

    .sos-flipbook .bt-options {
        gap: 0.25rem;
        padding: 0.20rem 0.35rem !important;
        font-size: var(--fs-small) !important;
    }

    .sos-flipbook .bt-options button.btn.btn-lg {
        padding: 0.25rem 0.30rem !important;
    }
}

@media (max-width: 430px) {

    .sos-flipbook .bt-options {
        gap: 0.125rem;
        font-size: var(--fs-small) !important;
    }

    .sos-flipbook .bt-options button.btn.btn-lg {
        padding: 0.20rem 0.25rem !important;
    }
}
/*
===============================================================================
SOSTERIA ⭕️
SOS-CSS-REG-01 · CONTRIBUTO REGIONALE / PR FESR

Versione CSS: 1.0.0
Data: 21 agosto 2026
Ora: 15:42 CEST

FUNZIONE:
Grafica istituzionale per articoli dedicati a contributi,
progetti pubblici e finanziamenti.

PRINCIPIO:
Nessuno stile nell'HTML.
Tutta la regia grafica rimane nel CSS generale Sosteria.
===============================================================================
*/


/* ==========================================================================
   01 · CONTENITORE
   ========================================================================== */

.sos-fesr {
    width: 100%;
}


/* ==========================================================================
   02 · HEADER
   ========================================================================== */

.sos-fesr__header {
    max-width: 980px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2.5rem;
    text-align: center;
}


.sos-fesr__eyebrow {
    margin: 0 0 1rem;
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sos-bronze);
}


.sos-fesr__title {
    max-width: 900px;
    margin: 0 auto;
}


.sos-fesr__lead {
    max-width: 760px;
    margin: 1.5rem auto 0;
    font-size: var(--fs-lead);
    line-height: 1.7;
}


/* ==========================================================================
   03 · TESTO INTRODUTTIVO
   ========================================================================== */

.sos-fesr__section {
    padding: 1rem 1.5rem 3rem;
}


.sos-fesr__text {
    max-width: 820px;
    margin: 0 auto;
}


.sos-fesr__text p {
    margin: 0 0 1.4rem;
    line-height: 1.75;
}


/* ==========================================================================
   04 · TRE AZIONI DEL PROGETTO
   ========================================================================== */

.sos-fesr__actions {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem 4rem;
}


.sos-fesr__action {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 1.5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--sos-border);
}


.sos-fesr__action:last-child {
    border-bottom: 1px solid var(--sos-border);
}


.sos-fesr__action-number {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--sos-bronze);
}


.sos-fesr__action-content h2 {
    margin: 0 0 0.75rem;
    font-size: var(--fs-h3);
}


.sos-fesr__action-content p {
    max-width: 760px;
    margin: 0;
    line-height: 1.7;
}


/* ==========================================================================
   05 · BLOCCO PROGETTO
   ========================================================================== */

.sos-fesr__project {
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 3rem;
    background: color-mix(in srgb, var(--sos-ivory) 78%, var(--sos-white));
    border-radius: var(--radius);
}


.sos-fesr__project-label {
    margin: 0 0 0.8rem;
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sos-bronze);
}


.sos-fesr__project h2 {
    margin: 0 0 1.25rem;
}


.sos-fesr__project p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   06 · CONTRIBUTO CONCESSO
   ========================================================================== */

.sos-fesr__contribution {
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 3rem 2rem;
    text-align: center;
    border-top: 1px solid var(--sos-bronze);
    border-bottom: 1px solid var(--sos-bronze);
}


.sos-fesr__contribution-label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.sos-fesr__contribution-value {
    display: block;
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--sos-bronze);
}


.sos-fesr__contribution-program {
    display: block;
    margin-top: 0.8rem;
    font-size: var(--fs-small);
}


/* ==========================================================================
   07 · FOOTER
   ========================================================================== */

.sos-fesr__footer {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    text-align: center;
    font-size: var(--fs-small);
}


.sos-fesr__footer p {
    margin: 0;
}


/* ==========================================================================
   08 · MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .sos-fesr__header {
        padding: 2rem 1rem;
    }


    .sos-fesr__section,
    .sos-fesr__actions {
        padding-left: 1rem;
        padding-right: 1rem;
    }


    .sos-fesr__action {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        padding: 1.6rem 0;
    }


    .sos-fesr__project {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 2rem 1.5rem;
    }


    .sos-fesr__contribution {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 2.5rem 1rem;
    }

}
/* =============================================================================
SOSTERIA · COMPONENTE ISTITUZIONALE REGIONE / PR FESR
Versione componente: 2.4.0
Fascia avorio compatta · nessun bordo grigio · logo centrato
Il componente governa anche il contenitore footer quando ospita il modulo,
senza dipendere da ID numerici o da una pagina specifica.
============================================================================= */

/* Se il modulo Regione è nel footer, elimina il fondo antracite che creava
   i bordi grigi attorno alla fascia chiara. */
.container-footer:has(.sos-regione-link) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--sos-ivory) !important;
    box-shadow: none !important;
}

/* Libera anche il contenitore interno del footer dai limiti di larghezza. */
.container-footer:has(.sos-regione-link) > .grid-child,
.container-footer:has(.sos-regione-link) .grid-child:has(.sos-regione-link) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--sos-ivory) !important;
    box-shadow: none !important;
}

/* Il contenitore di layout che ospita questo modulo occupa tutta la riga. */
.site-grid > *:has(.sos-regione-link) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--sos-ivory) !important;
    box-shadow: none !important;
}

/* Neutralizza i wrapper del modulo soltanto quando contengono il componente Regione. */
:is(
    .card,
    .moduletable,
    [class*="moduletable"],
    .module,
    [class*="module-"],
    .mod-custom,
    .card-body
):has(.sos-regione-link) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sos-ivory) !important;
    box-shadow: none !important;
}

.site-grid > *:has(.sos-regione-link) > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.sos-regione-link {
    position: static !important;
    left: auto !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: var(--sos-ivory) !important;
}

.sos-regione-link__anchor {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
}

.sos-regione-link__image {
    display: block !important;
    width: 341px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .sos-regione-link {
        padding: 12px 16px !important;
    }

    .sos-regione-link__image {
        width: min(341px, 100%) !important;
    }
}
/* ==========================================================================
   SOSTERIA ⭕️ · MODULI ARTICOLI · CARD INTERAMENTE CLICCABILI
   Versione CSS: 1.34.0
   Data: 23 agosto 2026
   Ora: 08:26 CEST
   Stato: STABILE · GLOBALE

   OBIETTIVO
   - titolo e immagine aprono lo stesso articolo;
   - nessuna modifica manuale articolo per articolo;
   - nessun JavaScript necessario;
   - il link reale del modulo resta semanticamente l’unico collegamento.

   STRUTTURA MARKUP VERIFICATA
   .mod-articles-item
   > .mod-articles-item-content
   > h4.mod-articles-title
   > a.mod-articles-link
   ========================================================================== */

/* Crea il riferimento geometrico per il link esteso. */
.mod-articles-item:has(.mod-articles-title > a.mod-articles-link),
.mod-articles-items > li:has(.mod-articles-title > a.mod-articles-link),
ul.mod-list > li:has(.mod-articles-title > a.mod-articles-link) {
    position: relative;
}

/* Il link del titolo si estende invisibilmente su tutta la card. */
.mod-articles-title > a.mod-articles-link::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    cursor: pointer;
}

/* Mantiene il titolo sopra la superficie cliccabile e leggibile. */
.mod-articles-title > a.mod-articles-link {
    position: relative;
    z-index: 3;
}

/* Feedback visivo coerente quando il puntatore passa sulla foto/card. */
.mod-articles-item:has(.mod-articles-title > a.mod-articles-link) figure img,
.mod-articles-item:has(.mod-articles-title > a.mod-articles-link) picture img,
.mod-articles-item:has(.mod-articles-title > a.mod-articles-link) .mod-articles-image img,
.mod-articles-item:has(.mod-articles-title > a.mod-articles-link) .mod-articles-item-image img {
    transition: transform 500ms ease;
}

.mod-articles-item:has(.mod-articles-title > a.mod-articles-link):hover figure img,
.mod-articles-item:has(.mod-articles-title > a.mod-articles-link):hover picture img,
.mod-articles-item:has(.mod-articles-title > a.mod-articles-link):hover .mod-articles-image img,
.mod-articles-item:has(.mod-articles-title > a.mod-articles-link):hover .mod-articles-item-image img {
    transform: scale(1.025);
}

/* Focus da tastiera visibile sulla card senza alterare il layout. */
.mod-articles-item:has(.mod-articles-title > a.mod-articles-link:focus-visible),
.mod-articles-items > li:has(.mod-articles-title > a.mod-articles-link:focus-visible),
ul.mod-list > li:has(.mod-articles-title > a.mod-articles-link:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
    outline-offset: 3px;
}
/* =============================================================================
SOSTERIA · PLUGIN / COMPONENTI TERZI · REGIA GLOBALE
Le regole dipendono dal componente (Phoca / ST PageFlip), non dalla pagina.
============================================================================= */

/* PHOCA GALLERY · strip orizzontale uniforme */
:is(.pg-msnr-container, .pg-category-items-box, [id^="pg-msnr-container-"]) {
    position: relative !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: var(--sos-component-inner-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    inset: auto !important;
    margin: .65rem 0 .85rem !important;
    padding: 0 0 var(--space-xs) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    transform: none !important;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-accent) 55%, transparent) transparent;
}

:is(.pg-msnr-container, .pg-category-items-box, [id^="pg-msnr-container-"]) .pg-item-box {
    position: static !important;
    flex: 0 0 210px !important;
    width: 210px !important;
    max-width: 210px !important;
    height: auto !important;
    min-height: 0 !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: var(--radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    scroll-snap-align: start;
}

.pg-item-box :is(figure, .pg-item-box-image, .pg-photoswipe-button, a) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.pg-item-box img.pg-image,
:is(.pg-msnr-container, .pg-category-items-box, [id^="pg-msnr-container-"]) img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: var(--ratio-hero) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--radius) !important;
    object-fit: cover !important;
    object-position: center !important;
    box-shadow: none !important;
}

:is(.pg-item-box figcaption, .pg-item-box-title, .pg-item-box-description) {
    display: none !important;
}

:is(.pg-msnr-container, .pg-category-items-box, [id^="pg-msnr-container-"])::-webkit-scrollbar {
    height: 6px;
}

:is(.pg-msnr-container, .pg-category-items-box, [id^="pg-msnr-container-"])::-webkit-scrollbar-track {
    background: transparent;
}

:is(.pg-msnr-container, .pg-category-items-box, [id^="pg-msnr-container-"])::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

/* ST PAGEFLIP · fallback globale anche senza wrapper .sos-flipbook */
:is(.pdf_book_fullscreen, .pdf_book_container, .pdf_book_wrapper, .flip-book, .ui-flipbook) {
    box-sizing: border-box !important;
}

:is(.flip-book, .ui-flipbook) {
    max-width: 100% !important;
    margin-inline: auto !important;
}

:is(.pdf_book_container, .pdf_book_wrapper) .controls {
    width: 100% !important;
    margin: .45rem auto 0 !important;
    text-align: center !important;
}

:is(.pdf_book_container, .pdf_book_wrapper) .bt-options {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .20rem !important;
    margin: .30rem auto 0 !important;
    padding: .30rem .55rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(.pdf_book_container, .pdf_book_wrapper) .bt-options :is(button.btn, button.btn.btn-lg) {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: .22rem .32rem !important;
    border: 0 !important;
    color: var(--sos-charcoal) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1em !important;
    line-height: 1 !important;
}

:is(.pdf_book_container, .pdf_book_wrapper) .bt-options :is(button.btn, button.btn.btn-lg):is(:hover, :focus) {
    color: var(--sos-bronze) !important;
    transform: translateY(-1px);
}

:is(.pdf_control_none, .slider, .slider.pdf_control_none) {
    display: none !important;
}

/* FEATURE PANEL · componente semantico */
.sos-feature-panel {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2rem);
    width: 100%;
    padding: clamp(1.20rem, 2vw, 1.75rem);
    border-radius: var(--radius);
    color: var(--sos-ivory);
    background: var(--sos-anthracite);
}

.sos-feature-panel__eyebrow {
    margin: 0 0 .40rem;
    color: var(--color-accent-light);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    line-height: var(--lh-ui);
    text-transform: uppercase;
}

.sos-feature-panel__title {
    margin: 0;
    color: var(--sos-white);
    font-size: var(--fs-h2);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-heading);
}

.sos-feature-panel__text {
    margin: 0;
    color: color-mix(in srgb, var(--sos-ivory) 82%, transparent);
    line-height: 1.55;
}

.sos-feature-panel__actions {
    justify-content: flex-start;
}

@media (max-width: 991.98px) {
    :is(.pg-msnr-container, .pg-category-items-box, [id^="pg-msnr-container-"]) .pg-item-box {
        flex-basis: 190px !important;
        width: 190px !important;
        max-width: 190px !important;
    }
}

@media (max-width: 767.98px) {
    :is(.pg-msnr-container, .pg-category-items-box, [id^="pg-msnr-container-"]) {
        gap: var(--space-xs) !important;
    }

    :is(.pg-msnr-container, .pg-category-items-box, [id^="pg-msnr-container-"]) .pg-item-box {
        flex: 0 0 min(76vw, 300px) !important;
        width: min(76vw, 300px) !important;
        max-width: min(76vw, 300px) !important;
    }

    .sos-feature-panel {
        grid-template-columns: 1fr;
    }

    .sos-feature-panel__actions {
        justify-content: center;
    }
}
============================================================================= */


/* =============================================================================
   SOSTERIA · ARTICOLI · REGIA GLOBALE COMPATTA
   Componente: SOS-ARTICLE-GLOBAL-COMPACT-01
   Versione componente: 1.0.0
   Data: 26 agosto 2026
   Stato: STABILE · GLOBALE · COMPONENT-BASED

   PRINCIPIO
   Questa regia NON appartiene a Ricette o Viaggi di Vino.
   Si applica agli ARTICOLI che utilizzano il wrapper .sos-page.

   OBIETTIVI
   - stessa larghezza visuale fra articoli;
   - stesso Hero foto + testo;
   - ritmo verticale più compatto;
   - niente grandi vuoti tra un modulo e il successivo;
   - testi lunghi sempre leggibili;
   - moduli visuali larghi, testi narrativi controllati;
   - responsive coerente;
   - immagini: massimo 1 MB come regola editoriale.
   ============================================================================= */


/* --------------------------------------------------------------------------
   01 · WRAPPER ARTICOLO
   Libera solo gli articoli che usano il Design System Sosteria.
   -------------------------------------------------------------------------- */

body.view-article
.com-content-article:has(.com-content-article__body > :is(.sos-page, article[class*="sos-"])),
body.view-article
.com-content-article:has(.com-content-article__body > :is(.sos-page, article[class*="sos-"]))
.com-content-article__body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Nasconde il titolo duplicato del CMS quando l'articolo possiede già il proprio Hero semantico */
body.view-article:has(
    .com-content-article__body > :is(.sos-page, article[class*="sos-"]) > :is(.sos-article-hero, .sos-wine-trips-hero)
)
.com-content-article > .page-header,
body.view-article:has(
    .com-content-article__body > :is(.sos-page, article[class*="sos-"]) > :is(.sos-article-hero, .sos-wine-trips-hero)
)
.com-content-article > .article-info,
body.view-article:has(
    .com-content-article__body > :is(.sos-page, article[class*="sos-"]) > :is(.sos-article-hero, .sos-wine-trips-hero)
)
.com-content-article > .icons,
body.view-article:has(
    .com-content-article__body > :is(.sos-page, article[class*="sos-"]) > :is(.sos-article-hero, .sos-wine-trips-hero)
)
.com-content-article > .article-info-term {
    display: none !important;
}


/* --------------------------------------------------------------------------
   02 · WRAPPER DESIGN SYSTEM
   Full-bleed controllato: la pagina usa tutta la viewport,
   ma i moduli interni restano nel container Master.
   -------------------------------------------------------------------------- */

body.view-article .com-content-article__body > :is(.sos-page, article[class*="sos-"]) {
    --sos-article-wide: var(--sos-container-wide);
    --sos-article-reading: var(--sos-container-reading);
    --sos-article-inline-space: var(--sos-content-inline-space);

    --sos-article-y-visual: clamp(1.55rem, 2.4vw, 2.20rem);
    --sos-article-y-content: clamp(2.20rem, 3.4vw, 3.20rem);
    --sos-article-y-reading: clamp(2.60rem, 4vw, 3.80rem);

    --sos-article-title-gap: clamp(.70rem, .95vw, .95rem);
    --sos-article-copy-gap: clamp(.78rem, 1vw, 1rem);
    --sos-article-block-gap: clamp(1.15rem, 1.75vw, 1.60rem);
    --sos-article-grid-gap: clamp(1rem, 1.5vw, 1.40rem);

    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 -50vw;
    overflow: hidden;
    background: var(--sos-ivory);
}


/* --------------------------------------------------------------------------
   03 · CONTENITORI
   Visuale = largo.
   Lettura lunga = stretta.
   -------------------------------------------------------------------------- */

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> .sos-section
> :is(.sos-container, .sos-container-wide) {
    width: min(
        calc(100% - var(--sos-article-inline-space)),
        var(--sos-article-wide)
    ) !important;
    max-width: var(--sos-article-wide) !important;
    margin-inline: auto !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> .sos-section
> .sos-container-reading,
body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> .sos-section
> .sos-max-reading {
    width: min(
        calc(100% - var(--sos-article-inline-space)),
        var(--sos-article-reading)
    ) !important;
    max-width: var(--sos-article-reading) !important;
    margin-inline: auto !important;
}


/* --------------------------------------------------------------------------
   04 · HERO ARTICOLO · IDENTICO PER TUTTE LE COLLANA
   Stessa grammatica dei Viaggi di Vino.
   -------------------------------------------------------------------------- */

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> .sos-wine-trips-hero {
    width: min(
        calc(100% - var(--sos-article-inline-space)),
        var(--sos-article-wide)
    ) !important;
    max-width: var(--sos-article-wide) !important;
    margin: 0 auto !important;
    background: var(--sos-ivory) !important;
    border-top: 1px solid var(--sos-border) !important;
    border-bottom: 1px solid var(--sos-border) !important;
}

@media (min-width: 992px) {

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
        align-items: start !important;
        gap: clamp(1rem, 1.5vw, 1.35rem) !important;
        padding: 1.35rem 0 1.45rem !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__media {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__media img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: var(--ratio-hero) !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: var(--radius) !important;
        box-shadow: 0 12px 28px color-mix(in srgb, var(--color-text) 9%, transparent) !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__content {
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        align-self: start !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__content > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Logo / marchio più presente ma ancora elegante */
    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__mark {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: .65rem !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__title {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__lead {
        max-width: 38rem !important;
        margin-top: .70rem !important;
    }

}


/* --------------------------------------------------------------------------
   05 · RITMO VERTICALE GLOBALE
   -------------------------------------------------------------------------- */

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> .sos-section {
    margin: 0 !important;
    padding-block: var(--sos-article-y-content) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> :is(
    .sos-section--wine-visual,
    .sos-section-sm
) {
    padding-block: var(--sos-article-y-visual) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> :is(
    .sos-section--wine-reading,
    .sos-section-lg
) {
    padding-block: var(--sos-article-y-reading) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> .sos-section + .sos-section {
    margin-top: 0 !important;
}


/* --------------------------------------------------------------------------
   06 · TIPOGRAFIA E MARGINI INTERNI
   -------------------------------------------------------------------------- */

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-section :is(h2, h3, h4) {
    margin-top: 0 !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-section .sos-kicker {
    margin: 0 0 var(--sos-article-title-gap) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-section :is(.sos-title-02, h2) {
    margin-bottom: var(--sos-article-block-gap) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-section p {
    margin-top: 0 !important;
    margin-bottom: var(--sos-article-copy-gap) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-section p:last-child {
    margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   07 · GRIGLIE / CARD / BOX
   Compatte senza perdere respiro.
   -------------------------------------------------------------------------- */

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
:is(.sos-grid-02, .sos-grid-03, .sos-grid-04) {
    gap: var(--sos-article-grid-gap) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-mt-lg {
    margin-top: var(--sos-article-block-gap) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-card-body {
    padding: clamp(.95rem, 1.35vw, 1.25rem) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
:is(.sos-callout, .sos-ingredients, .sos-wine-panel) {
    padding: clamp(1rem, 1.6vw, 1.40rem) !important;
}

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-quote {
    margin: clamp(1.25rem, 2vw, 1.75rem) auto !important;
}


/* --------------------------------------------------------------------------
   08 · TABLET
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991.98px) {

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 1.15rem 0 1.35rem !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__mark {
        width: 52px !important;
        height: 52px !important;
    }

}


/* --------------------------------------------------------------------------
   09 · MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    body.view-article .com-content-article__body > :is(.sos-page, article[class*="sos-"]) {
        --sos-article-y-visual: 1.35rem;
        --sos-article-y-content: 2rem;
        --sos-article-y-reading: 2.35rem;
        --sos-article-grid-gap: 1rem;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero {
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
        border-top: 0 !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__media {
        width: 100% !important;
        margin: 0 !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__media img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: var(--ratio-hero) !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__content {
        padding: 1.25rem 1rem 1.55rem !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-wine-trips-hero
    .sos-wine-trips-hero__mark {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: .65rem !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > .sos-section
    > :is(.sos-container, .sos-container-wide, .sos-container-reading) {
        width: calc(100% - 1.25rem) !important;
    }

}

/* =============================================================================
   FINE SOS-ARTICLE-GLOBAL-COMPACT-01
   ============================================================================= */


/* Navigazione standard del CMS: i contenuti SOS usano la propria navigazione editoriale. */
body.view-article
.com-content-article:has(.com-content-article__body > :is(.sos-page, article[class*="sos-"]))
:is(.pagenavigation, .pager) {
    display: none !important;
}

/* Card interne agli articoli: standard fotografico 16:9 per asset editoriali 1600×900. */
body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-card-media img {
    aspect-ratio: var(--ratio-hero) !important;
    object-fit: cover !important;
    object-position: center !important;
}
/* =============================================================================
SOSTERIA · MODULI EDITORIALI · LARGHEZZA E RITMO
Regola di componente, non di pagina.

- .sos-section--editorial-module = nome generico futuro;
- .sos-section--wine-reading = alias legacy compatibile con gli HTML già pubblicati.

Questi blocchi (A tavola, passaggio alla Sosteria, appunti e moduli equivalenti)
devono essere più ampi del reading lungo, senza diventare full-bleed.
============================================================================= */

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> :is(.sos-section--editorial-module, .sos-section--wine-reading)
> .sos-container-reading {
    width: min(
        calc(100% - var(--sos-content-inline-space)),
        var(--sos-container)
    ) !important;
    max-width: var(--sos-container) !important;
    margin-inline: auto !important;
}

/* Il callout nei moduli editoriali deve poter sfruttare realmente il contenitore. */
body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
> :is(.sos-section--editorial-module, .sos-section--wine-reading)
.sos-callout {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* LISTE EDITORIALI · responsive globale */
@media (min-width: 768px) and (max-width: 991.98px) {
    :is(.sos-editorial-list, .sos-wine-trips-list)
    :is(.mod-articles-items, ul.mod-articles, ul.mod-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(calc(100% - 2rem), 900px) !important;
    }

    :is(.main-bottom.sos-editorial-list, .main-bottom.sos-wine-trips-list) > .card-body,
    :is(.sos-editorial-list, .sos-wine-trips-list) > .card-body {
        padding-top: 3rem !important;
        padding-bottom: 3.25rem !important;
    }
}

@media (max-width: 767.98px) {
    :is(.sos-editorial-list, .sos-wine-trips-list)
    :is(.mod-articles-items, ul.mod-articles, ul.mod-list) {
        grid-template-columns: 1fr !important;
        width: calc(100% - 1.25rem) !important;
        row-gap: var(--space-md) !important;
    }

    :is(.main-bottom.sos-editorial-list, .main-bottom.sos-wine-trips-list) > .card-body,
    :is(.sos-editorial-list, .sos-wine-trips-list) > .card-body {
        padding-top: 2.25rem !important;
        padding-bottom: 3rem !important;
    }

    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    > :is(.sos-section--editorial-module, .sos-section--wine-reading)
    > .sos-container-reading {
        width: calc(100% - 2rem) !important;
    }
}

/* =============================================================================
SOSTERIA · FLOW EDITORIALE GENERALE
Spazio coerente tra testo introduttivo e griglie successive, valido per ogni articolo.
============================================================================= */

body.view-article
.com-content-article__body > :is(.sos-page, article[class*="sos-"])
.sos-section > :is(p, .sos-text-lead, .sos-callout) + :is(.sos-grid-02, .sos-grid-03, .sos-grid-04) {
    margin-top: clamp(1.25rem, 2.2vw, 2rem) !important;
}

@media (max-width: 767.98px) {
    body.view-article
    .com-content-article__body > :is(.sos-page, article[class*="sos-"])
    .sos-section > :is(p, .sos-text-lead, .sos-callout) + :is(.sos-grid-02, .sos-grid-03, .sos-grid-04) {
        margin-top: 1.25rem !important;
    }
}
/* =============================================================================
   SOS-TIMELINE-01 · TIMELINE EDITORIALE SOSTERIA
   Versione 1.0.0 · 28 agosto 2026
   Ispirazione: timeline verticale alternata; interpretazione grafica Sosteria.
   Palette: Ivory · Stone · Charcoal · Bronze · Wine.
============================================================================= */

.sos-timeline {
    --timeline-line: color-mix(in srgb, var(--sos-charcoal) 46%, transparent);
    --timeline-bronze: var(--sos-bronze);
    --timeline-wine: var(--sos-wine);
    --timeline-bg: var(--sos-stone);
    position: relative;
    width: min(100%, 1120px);
    margin: clamp(2rem, 4vw, 3.5rem) auto 0;
    padding: .5rem 0;
}

.sos-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px dashed var(--timeline-line);
    transform: translateX(-.5px);
}

.sos-timeline__item {
    --timeline-accent: var(--timeline-bronze);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
    min-height: clamp(9rem, 14vw, 11.25rem);
    align-items: start;
}

.sos-timeline__item--wine {
    --timeline-accent: var(--timeline-wine);
}

.sos-timeline__node {
    position: relative;
    z-index: 3;
    grid-column: 2;
    justify-self: center;
    display: grid;
    width: clamp(3.55rem, 5vw, 4.25rem);
    height: clamp(3.55rem, 5vw, 4.25rem);
    place-items: center;
    border: 3px solid var(--timeline-accent);
    border-radius: 50%;
    background: var(--sos-ivory);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--timeline-bg) 92%, transparent);
    color: var(--timeline-accent);
    font-family: var(--font-main);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    font-weight: var(--weight-semibold);
    line-height: 1;
}

.sos-timeline__content {
    position: relative;
    width: min(100%, 380px);
    padding-top: .15rem;
}

.sos-timeline__item:nth-child(odd) .sos-timeline__content {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    padding-right: clamp(2rem, 4vw, 3.25rem);
    text-align: left;
}

.sos-timeline__item:nth-child(even) .sos-timeline__content {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    padding-left: clamp(2rem, 4vw, 3.25rem);
    text-align: right;
}

.sos-timeline__content::after {
    content: "";
    position: absolute;
    top: 2.05rem;
    width: clamp(2rem, 4vw, 3.15rem);
    border-top: 1px dashed var(--timeline-line);
}

.sos-timeline__item:nth-child(odd) .sos-timeline__content::after {
    right: 0;
}

.sos-timeline__item:nth-child(even) .sos-timeline__content::after {
    left: 0;
}

.sos-timeline__tag {
    display: inline-flex;
    width: fit-content;
    min-height: 1.75rem;
    margin: 0 0 .62rem;
    padding: .27rem .72rem .3rem;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--timeline-accent) 22%, var(--sos-ivory));
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: 1.1;
    letter-spacing: .01em;
}

.sos-timeline__item:nth-child(even) .sos-timeline__tag {
    margin-left: auto;
}

.sos-timeline__year {
    display: block;
    margin: 0 0 .5rem;
    color: var(--timeline-accent);
    font-family: var(--font-main);
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: -.02em;
}

.sos-timeline__content h3 {
    margin: 0 0 .48rem;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: clamp(1.08rem, 1.5vw, 1.3rem);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: -.01em;
}

.sos-timeline__content p {
    margin: 0;
    color: var(--sos-charcoal);
    font-family: var(--font-main);
    font-size: clamp(.96rem, 1.1vw, 1.03rem);
    line-height: 1.5;
}

.sos-timeline__usage-note {
    width: min(100%, 760px);
    margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
}

/* Variante compatta per cronologie dense negli articoli. */
.sos-timeline--compact .sos-timeline__item {
    min-height: clamp(7.25rem, 11vw, 8.75rem);
}

.sos-timeline--compact .sos-timeline__node {
    width: 3.35rem;
    height: 3.35rem;
    font-size: 1.38rem;
}

.sos-timeline--compact .sos-timeline__content::after {
    top: 1.62rem;
}

@media (max-width: 767.98px) {
    .sos-timeline {
        width: 100%;
        margin-top: 1.75rem;
        padding-left: 0;
    }

    .sos-timeline::before {
        left: 1.55rem;
        transform: none;
    }

    .sos-timeline__item,
    .sos-timeline--compact .sos-timeline__item {
        grid-template-columns: 3.15rem minmax(0, 1fr);
        min-height: auto;
        margin-bottom: 1.6rem;
        align-items: start;
    }

    .sos-timeline__node,
    .sos-timeline--compact .sos-timeline__node {
        grid-column: 1;
        grid-row: 1;
        width: 3.05rem;
        height: 3.05rem;
        border-width: 2px;
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--timeline-bg) 94%, transparent);
        font-size: 1.28rem;
    }

    .sos-timeline__item:nth-child(odd) .sos-timeline__content,
    .sos-timeline__item:nth-child(even) .sos-timeline__content {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        justify-self: stretch;
        padding: .05rem 0 0 1.2rem;
        text-align: left;
    }

    .sos-timeline__content::after,
    .sos-timeline__item:nth-child(odd) .sos-timeline__content::after,
    .sos-timeline__item:nth-child(even) .sos-timeline__content::after {
        top: 1.45rem;
        left: -.1rem;
        right: auto;
        width: 1.3rem;
    }

    .sos-timeline__item:nth-child(even) .sos-timeline__tag {
        margin-left: 0;
    }

    .sos-timeline__year {
        font-size: 1.45rem;
    }
}
/* =============================================================================
SOSTERIA · CONTINUA NEL TACCUINO
SOS-TAC-CONTINUA-01
Versione CSS: 2.0.0 · MASTER CONSOLIDATO
Data: 28 agosto 2026

FUNZIONE
- una sola regia CSS per il modulo automatico;
- nessuna dipendenza dalla pagina in cui il modulo appare;
- sezione full-bleed, contenuto nel container-wide Master;
- card interamente cliccabile;
- 3 colonne desktop, 2 tablet, 1 mobile;
- palette esclusivamente Master.
============================================================================= */

.sos-taccuino-more {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 -50vw;
    padding: 0;
    overflow: hidden;
    background: var(--sos-ivory);
}

.sos-taccuino-more > .sos-container-wide,
.sos-taccuino-more .sos-container-wide {
    width: min(calc(100% - 2rem), var(--sos-container-wide));
    max-width: var(--sos-container-wide);
    margin-inline: auto;
    padding-block: clamp(2.25rem, 4vw, 3rem);
}

.sos-taccuino-more__header {
    width: min(100%, 760px);
    margin: 0 0 1.35rem;
    text-align: left;
}

.sos-taccuino-more__header .sos-kicker {
    display: block;
    margin: 0 0 .25rem;
    color: var(--sos-bronze);
    text-align: left;
}

.sos-taccuino-more__header .sos-title-02 {
    margin: 0;
    color: var(--sos-charcoal);
    text-align: left;
}

.sos-taccuino-more__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(1rem, 1.8vw, 1.5rem);
    width: 100%;
}

.sos-taccuino-card {
    display: block;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: .875rem;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: var(--sos-shadow-sm);
    transition: transform var(--sos-transition), box-shadow var(--sos-transition);
}

.sos-taccuino-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sos-shadow-md);
}

.sos-taccuino-card__link,
.sos-taccuino-card__link:visited {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.sos-taccuino-card__link:is(:hover, :focus) {
    color: inherit;
    text-decoration: none;
}

.sos-taccuino-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--ratio-hero);
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: var(--sos-stone);
}

.sos-taccuino-card__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    margin: 0;
    object-fit: cover !important;
    object-position: center;
    opacity: 1 !important;
    visibility: visible !important;
}

.sos-taccuino-card__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.25rem .75rem .75rem;
    text-align: left;
}

.sos-taccuino-card__door {
    display: block;
    margin: 0 0 .95rem !important;
    padding: 0 0 .70rem;
    border-bottom: 2px solid currentColor;
    font-size: clamp(1.28rem, 1.55vw, 1.60rem);
    font-weight: var(--weight-semibold);
    line-height: 1.08;
    letter-spacing: var(--tracking-heading);
    text-align: left;
}

.sos-taccuino-card__articlebox {
    display: block;
    margin: 0 0 1rem;
    padding: .90rem 1rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--sos-white) 16%, transparent);
    text-align: left;
}

.sos-taccuino-card__category {
    display: block;
    margin: 0 0 .42rem !important;
    font-size: var(--fs-meta);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    text-align: left;
}

.sos-taccuino-card__title {
    display: block;
    margin: 0 !important;
    padding: 0;
    font-size: clamp(1.08rem, 1.25vw, 1.28rem);
    font-weight: var(--weight-semibold);
    line-height: 1.22;
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
    text-align: left;
}

.sos-taccuino-card__text {
    display: block;
    margin: 0 0 1rem !important;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    text-align: left;
}

.sos-taccuino-card__action {
    display: inline-block;
    margin-top: auto;
    padding-top: .25rem;
    font-size: var(--fs-small);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-ui);
    text-align: left;
}

.sos-taccuino-card--continue {
    color: var(--sos-charcoal);
    background: var(--sos-ivory);
}

.sos-taccuino-card--continue :is(.sos-taccuino-card__door, .sos-taccuino-card__action) {
    color: var(--sos-bronze);
}

.sos-taccuino-card--continue :is(.sos-taccuino-card__category, .sos-taccuino-card__title, .sos-taccuino-card__text) {
    color: var(--sos-charcoal);
}

.sos-taccuino-card--continue .sos-taccuino-card__articlebox {
    background: var(--sos-stone);
}

.sos-taccuino-card--explore {
    color: var(--sos-ivory);
    background: var(--sos-bronze);
}

.sos-taccuino-card--explore :is(.sos-taccuino-card__door, .sos-taccuino-card__category, .sos-taccuino-card__title, .sos-taccuino-card__text, .sos-taccuino-card__action),
.sos-taccuino-card--related :is(.sos-taccuino-card__door, .sos-taccuino-card__category, .sos-taccuino-card__title, .sos-taccuino-card__text, .sos-taccuino-card__action) {
    color: var(--sos-ivory);
}

.sos-taccuino-card--related {
    color: var(--sos-ivory);
    background: var(--sos-wine);
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sos-taccuino-more__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .sos-taccuino-more > .sos-container-wide,
    .sos-taccuino-more .sos-container-wide {
        width: calc(100% - 1.25rem);
        padding-block: 2.25rem;
    }

    .sos-taccuino-more__header {
        margin-bottom: 1rem;
    }

    .sos-taccuino-more__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .sos-taccuino-card {
        padding: .75rem;
        border-radius: 16px;
    }

    .sos-taccuino-card__media {
        border-radius: 12px;
    }

    .sos-taccuino-card__body {
        padding: 1.10rem .60rem .65rem;
    }

    .sos-taccuino-card__door {
        margin-bottom: .80rem !important;
        font-size: 1.35rem;
    }
}