@import url('designsystem.css');

:root {
    /* Mobile/game shell (context-specific — tokens in designsystem.css) */
    --page-bg: #0b0b0c;
    --surface: #111216;
    --text: #e8e8ea;
    --header-bg: rgba(255,255,255,0.8);
    --text-muted: #b7b7bd;
    --primary: #ffffff;
    --border: rgba(255,255,255,0.12);
    --radius: 20px;
    --shadow: 5px 5px 10px rgba(0,0,0,0.3);
    --container-max-width: 1356px;
    --container-gutter: 16px;
    --card-no-bg-title: #ffffff;
    --card-no-bg-text: #cccccc;
}

.header-action-button {
    display: inline-block;
    background-color: var(--org-buttonbg); /* purple */
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.05s ease;
}

.header {
    display: flex;
    align-items: center;
}

.header-actions {
    margin-left: auto;
}

.header-action-button:hover {
    background-color: #341a96; /* slightly darker */
}

.header-action-button:active {
    transform: translateY(1px);
}
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

/* 2. Ora puoi usare la tua classe come hai definito */
.michroma-regular {
    font-family: "Michroma", sans-serif;
    font-weight: 400;
    font-style: normal;
}


/* Reset base */
* {
    box-sizing: border-box;
    padding: 0px;
}

body {
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--t-body-family, var(--org-font-body, "Fira Sans", system-ui, sans-serif));
    font-weight: var(--t-body-weight, var(--org-font-weight-body, 400));
    line-height: var(--t-body-lh, var(--org-lineheight-body, 1.45));
    margin: 0px;
}

h1, h2, h3, h4, h5, h6,
.heading,
.news-featured-title,
.news-card-title,
.news-list-title {
    font-family: var(--t-h2-family, var(--org-font-heading, "Fira Sans", system-ui, sans-serif));
    font-weight: var(--org-font-weight-heading, 700);
    letter-spacing: var(--org-letterspacing-heading, -0.02em);
    line-height: var(--org-lineheight-heading, 1.08);
}

/* Utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text--bold {
    font-weight: 500;
}

.radius {
    border-radius: var(--radius);
}

.shadow {
    box-shadow: var(--shadow);
}

.no-margin {
    margin-top: 0px;
    margin-bottom: 0px
}

/* Heading — OASIS bindings (B1) */
.heading {
    margin: 0 0 var(--space-2);
    font-weight: var(--t-h2-weight);
}

.heading--xl {
    /* Maps to OASIS H2 (40/44 Bold) */
    font-size: var(--t-h2-size);
    line-height: var(--t-h2-lh);
    font-weight: var(--t-h2-weight);
    color: var(--primary);
}

.heading--md {
    /* Maps to OASIS H4 (26/32 Bold) */
    font-size: var(--t-h4-size);
    line-height: var(--t-h4-lh);
    font-weight: var(--t-h4-weight);
}

/* Text — OASIS bindings (B1) */
.text {
    color: var(--color-text-default, var(--text));
}

.text--md {
    /* Maps to OASIS Body (16/24) */
    font-size: var(--t-body-size);
    line-height: var(--t-body-lh);
    font-weight: var(--t-body-weight);
    color: var(--card-no-bg-text);
}

.text--sm {
    /* Maps to OASIS XS (12/16) — weight 500 retained */
    font-size: var(--t-xs-size);
    line-height: var(--t-xs-lh);
    font-weight: 500;
}

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

/* Section */
.section {
    padding: var(--space-4) 0;
}

.section--cases {
    /*background: var(--page-bg);*/
}

/* AGGIUNGI QUESTA NUOVA REGOLA AL TUO FILE CSS */
.section-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #091722FF 0%, rgba(0,0,0,0.15) 30%);
    top: 0;
    left: 0;
}
/* Container */
.container-main {
    width: 100%;
    max-width: min(var(--container-max-width), 92vw);
    margin-inline: auto;
    height: auto;
    padding-inline: var(--container-gutter);
}

#dynamic-sections .section-block-wrapper {
    padding-inline: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--org-section-bg, var(--org-bg, var(--page-bg)));
}

#dynamic-sections .section-block-wrapper .container-main {
    padding-inline: var(--container-gutter);
    max-width: min(var(--container-max-width), 100%);
    box-sizing: border-box;
}

#dynamic-sections .section-block-wrapper.section-block-wrapper--with-container {
    padding-inline: var(--container-gutter);
}

#dynamic-sections .section-block-wrapper img,
#dynamic-sections .section-block-wrapper video {
    max-width: 100%;
    height: auto;
}

#dynamic-sections .section-block-wrapper iframe,
#dynamic-sections .section-block-wrapper canvas {
    max-width: 100%;
}

#dynamic-sections .section-block-wrapper > .section {
    background: transparent;
}

#dynamic-sections .section-block-wrapper--full-height {
    min-height: 100vh;
}

#dynamic-sections .section-block-wrapper--full-height > .section {
    min-height: 100vh;
}

#dynamic-sections .section-block-wrapper.three-layer-overlay-panels-linked.section-block-wrapper--full-height > .section {
    min-height: auto !important;
}

#dynamic-sections .section-block-wrapper.three-layer-overlay-panels-linked.section-block-wrapper--full-height {
    min-height: auto !important;
}

#dynamic-sections .section-block-wrapper--no-container .container-main {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
}

/* Child blocks inside a section container never claim viewport height — they sit inline
   within the container layout regardless of their own full-screen styling. */
.section-container__child .section-block-wrapper--full-height,
.section-container__child .section-block-wrapper--full-height > .section,
.section-container__child .depthmap,
.section-container__child .section--event,
.section-container__child .hero-content-event,
.section-container__child .hero-section.video-hero,
.section-container__child .hero-container {
    height: auto;
    min-height: 0;
}

.card--benefit {
    padding: 20px;
    border-radius: 20px;
    /*    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0) 100%);*/
}

/* Stile per la griglia a due colonne asimmetriche */
#benefits .grid--2cols {
    display: grid;
    /* Crea due colonne: la prima (testo) prende tutto lo spazio possibile,
       la seconda (immagine) si adatta alla larghezza del suo contenuto. */
    grid-template-columns: 1fr auto;
    gap: 4rem; /* Spazio tra testo e immagine (puoi regolarlo) */
    align-items: center; /* Allinea verticalmente il testo e l'immagine */
}

.benefit-image-circle {
    width: auto;
    height: 350px;
    border-radius: 10%;
    border: 1px solid var(--border);
    object-fit: cover;
}

/* Per schermi pi� piccoli di 768px (tablet e cellulari) */
@media (max-width: 768px) {
    #benefits .grid--2cols {
        grid-template-columns: 1fr; /* Passa a 1 sola colonna */
        text-align: left; /* Centra il testo */
        gap: 0px;
    }

    .benefit-image-circle {
        max-width: 100%;
        height: auto;
        margin-top: 0;
    }

    #benefits .image-wrapper {
        /* Rimuovi completamente la riga 'order: -1;' */
        /* Assicurati che non ci sia nessun 'order' qui */
        /* Aggiungi un margine superiore se vuoi spazio tra l'ultimo blocco di testo e l'immagine */
        /* Centra l'immagine orizzontalmente se la sua larghezza � fissa */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Grid */
.grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--4cols {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}


.time-tag {
    position: absolute;
    /*top: var(--space-4);*/ /* 16px dall'alto */
    left: var(--space-4); /* 16px da sinistra */
    /* ...altri stili... */
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 20px;
    font-size: var(--font-xs);
    line-height: 1;
    /*    border-radius: 9999px;*/
    /*    background: rgba(0, 20, 30, 0.6);*/
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    text-decoration: none;
    cursor: default;
    transition: transform .08s ease, background .2s ease, color .2s ease;
}

/* Card */
.card {
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card__media {
    position: relative;
}

.card__body {
    padding: var(--space-4) 0;
}

/*.card__body-features {
    padding: var(--space-4) 20px;
}
*/

.section .heading--xl {
    text-align: left;
}

/* Card no bg*/
.card--no-bg {
    background: none;
    border: none;
}


    .card--no-bg .heading {
        color: var(--card-no-bg-title);
    }

    .card--no-bg .text {
        color: var(--card-no-bg-text);
        margin: 6px 0px;
    }

/* Media */
.media {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    /* border-radius: var(--radius); */
}

.media--video {
    background: #000;
}

.media--image {
    width: 100%;
    aspect-ratio: 16 / 9; /* or 4/3 or square*/
    object-fit: cover;
    /* border-radius: var(--radius); */
}

.media--image--journey {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}


.time-border {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 20px;
    font-size: var(--font-xs);
    line-height: 1;
    border-radius: 9999px;
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
    transition: transform .08s ease, background .2s ease, color .2s ease;
}


/* Section background media */
.section-bg--image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}
.section-bg--video-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.section-bg--video-wrap > .section-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.section-bg__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--overlay-opacity, 0.4));
    pointer-events: none;
}

/* Button — OASIS bindings (B1). Default = Medium secondary. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-height: var(--btn-md-height);
    padding: var(--btn-md-padding-y) var(--btn-md-padding-x);
    font-family: var(--t-btn-md-family);
    font-size: var(--t-btn-md-size);
    line-height: var(--t-btn-md-lh);
    font-weight: var(--t-btn-md-weight);
    border-radius: var(--btn-radius);
    border: var(--btn-border-width) solid var(--color-border-btn-secondary-default);
    background: var(--color-bg-btn-secondary-default);
    color: var(--color-text-btn-secondary-default);
    text-decoration: none;
    cursor: pointer;
    transition: transform .08s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

    .btn:hover {
        background: var(--color-bg-btn-secondary-hover);
        color: var(--color-text-btn-secondary-hover);
        border-color: var(--color-border-btn-secondary-hover);
    }

    .btn:active {
        transform: translateY(1px);
    }

    .btn.is-selected {
        background: var(--color-bg-btn-secondary-selected);
        color: var(--color-text-btn-secondary-selected);
        border-color: var(--color-border-btn-secondary-selected);
    }

.btn--primary {
    background: var(--color-bg-btn-primary-default);
    color: var(--color-text-btn-primary-default);
    border-color: var(--color-bg-btn-primary-default);
}

.btn--primary:hover {
    background: var(--color-bg-btn-primary-hover);
    border-color: var(--color-bg-btn-primary-hover);
    color: var(--color-text-btn-primary-hover);
}

.btn--primary.is-selected {
    background: var(--color-bg-btn-primary-selected);
    border-color: var(--color-bg-btn-primary-selected);
    color: var(--color-text-btn-primary-selected);
}

.btn--ghost {
    background: transparent;
}

.btn--pill {
    border-radius: var(--radius-full);
}

.btn--sm {
    min-height: var(--btn-sm-height);
    padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
    font-size: var(--t-btn-sm-size);
    line-height: var(--t-btn-sm-lh);
    font-weight: var(--t-btn-sm-weight);
}

.btn--lg {
    min-height: var(--btn-lg-height);
    padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
    font-size: var(--t-btn-lg-size);
    line-height: var(--t-btn-lg-lh);
    font-weight: var(--t-btn-lg-weight);
}


/* ------------------------------
   Closing Sections
--------------------------------*/
.section--closing {
    position: relative;
    overflow: hidden;
}


    /* Background video wrapper */
    .section--closing .section__background {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }

        .section--closing .section__background video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Overlay  video */
        .section--closing .section__background .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 40%);
        }

    .section--closing .container {
        position: relative;
        z-index: 1;
    }

    /* Grid 2 responsive columns */
    .section--closing .grid--2cols {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--space-6);
        align-items: stretch !important;
    }

        .section--closing .grid--2cols .media--image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


    .section--closing .heading--xl {
        color: var(--primary);
        /*        margin-bottom: var(--space-3);*/
    }

    .section--closing .text--md {
        color: var(--text-muted);
        line-height: 1.6;
    }

/* Teaser video section */
.section--teaser {
    padding: var(--space-6) 0;
    text-align: center;
}


@media (max-width: 768px) {
    .flip-card-container {
        width: 90% !important; /* Forza la larghezza al 90% dello schermo */
        height: auto !important; /* ANNULLA l'altezza fissa di 400px */
        aspect-ratio: 320 / 400; /* Mantiene le proporzioni originali */
        /* Opzionale: per non farla diventare troppo grande su tablet verticali */
        max-width: 320px;
    }
}

/* ======================================================== */
/* == STILI FINALI PER LA SEZIONE OVERVIEW == */
/* ======================================================== */

/* Layout principale della sezione a due colonne */
#overview .grid--2cols {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* D� pi� spazio al testo */
    gap: var(--space-6, 32px);
    align-items: center;
    width: 100%; /* Occupa tutta la larghezza del container */
}

/* Cella dell'immagine */
#overview .image-cell.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenitore per l'effetto di sovrapposizione dell'immagine */
#overview .circle-wrapper {
    position: relative;
    display: grid;
    place-items: center;
    max-width: 450px;
    width: 100%;
}

    /* Immagine circolare */
    #overview .circle-wrapper .circle {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        object-fit: cover;
        position: relative;
        z-index: 2; /* Sta sopra lo sfondo */
    }

    /* Cerchio di sfondo colorato */
    #overview .circle-wrapper .circle-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        z-index: 1; /* Sta dietro l'immagine */
        /* --- MODIFICHE PER L'EFFETTO "MORBIDO" --- */
        filter: blur(4px); /* <-- AGGIUNTO: Sfoca i bordi del cerchio */
        opacity: 0.75; /* <-- AGGIUNTO: Rende il cerchio semi-trasparente */
        transform: translate(10px, 10px); /* <-- RIDOTTO: Spostamento pi� sottile */
    }

/* --- Stili Responsive per Mobile --- */
@media (max-width: 768px) {
    #overview .grid--2cols {
        grid-template-columns: 1fr; /* Una sola colonna */
    }

    #overview .content-cell,
    #overview .content-cell .text-left {
        text-align: center; /* Centra il testo */
        align-items: center; /* Centra il bottone */
    }

    #overview .image-cell {
        order: -1; /* Sposta l'immagine in cima */
        margin-bottom: var(--space-5);
    }
}

/* ------------------------------
   Overview Section
--------------------------------*/
.section--overview {
    position: relative;
}

    .section--overview .heading--sm {
        font-size: var(--font-sm);
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: var(--space-2);
    }

    .section--overview .heading--xl {
        color: var(--primary);
        margin-bottom: var(--space-4);
    }

    .section--overview .text--md {
        color: var(--text);
        /*        line-height: 1.6;*/
        margin-bottom: var(--space-3);
    }

    .section--overview img {
        border-radius: 50%;
        object-fit: cover;
    }


/* Overview section */
.section--overview {
    padding: 100px 0;
}

@media (max-width: 768px) {
    .section--overview {
        padding: 40px 0;
    }
}

.circle {
    border-radius: 50%;
    max-width: 400px;
}


#hero-section {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

.video-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.video-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
/*
#hero-section .hero-content {
    padding: 140px 0px;
}*/

/* Content */
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 1200px; /* container grande come cases */
    padding: 120px 0;
    color: white;
}

.hero-title {
    font-size: 3.5rem;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
    max-width: 800px; /* testo largo max 600px */
    line-height: 1.1;
}

.hero-text {
    font-size: 1.125rem;
    margin-top: 0px;
    max-width: 600px; /* testo largo max 600px */
    line-height: 1.6;
}



/* Hero section per eventi con video full screen */
.section--event {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Full screen garantito */
    overflow: hidden;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: flex-end; /* Spinge il contenuto a destra */
}


.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assicura che il video riempia lo schermo */
}

.video-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

/* Contenuto a destra */
.hero-content-event {
    position: relative;
    z-index: 2;
    display: flex;
    /*justify-content: flex-end;*/
    /*align-items: center;*/
    height: 100vh;
    padding: var(--space-6) 0;
}

.event-details {
    max-width: 800px;
    /*padding: 20px 10px;*/
    color: #fff; /* Testo bianco per coerenza con la foto */
    text-align: left;
}

.event-tag {
    position: absolute;
    top: 32px;
    right: 32px;
    background-color: #333; /* Fallback per @Model.mainColor */
    color: white;
    padding: 12px 30px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 100;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Per leggibilit� */
}

/* Media query per tablet e smartphone (sotto 768px) */
@media (max-width: 768px) {
    .event-tag {
        position: static; /* Rimuove position: absolute per fluire nel normale flusso del documento */
        padding: 12px 40px; /* Aumenta il padding per renderlo pi� grande */
        font-size: 1rem; /* Font pi� grande */
        border-radius: 20px; /* Bordi pi� arrotondati per un aspetto pi� grande */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        display: inline-block; /* Per centrare correttamente con margin: auto */
        margin-bottom: 20px;
    }


    .content-text {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra il contenuto, incluso il tag */
        text-align: left;
        align-items: flex-start;
    }
}

/* Media query per schermi molto piccoli (sotto 400px) */
@media (max-width: 400px) {
    .event-tag {
        position: static;
        padding: 10px 30px; /* Leggermente pi� compatto per schermi molto piccoli */
        font-size: 0.9rem; /* Font leggermente pi� piccolo ma ancora pi� grande del default */
        border-radius: 18px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        display: inline-block;
        margin-bottom: 20px;
    }
}


#detailsContainer .event-summary {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

#contentGoesHere {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.landing-tag {
    position: absolute;
    background-color: #333; /* Fallback per @Model.mainColor */
    color: white;
    padding: 10px 30px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 100;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Per leggibilit� */
}

/* Media query per tablet e smartphone (sotto 768px) */
@media (max-width: 768px) {
    .landing-tag {
        position: static; /* Rimuove position: absolute per fluire nel normale flusso del documento */
        padding: 12px 40px; /* Aumenta il padding per renderlo pi� grande */
        font-size: 1rem; /* Font pi� grande */
        border-radius: 20px; /* Bordi pi� arrotondati per un aspetto pi� grande */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        display: inline-block; /* Per centrare correttamente con margin: auto */
        margin-bottom: 20px;
    }


    .content-text {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra il contenuto, incluso il tag */
    }
}



/* Media query per schermi molto piccoli (sotto 400px) */
@media (max-width: 400px) {
    .landing-tag {
        position: static;
        padding: 10px 30px; /* Leggermente pi� compatto per schermi molto piccoli */
        font-size: 0.9rem; /* Font leggermente pi� piccolo ma ancora pi� grande del default */
        border-radius: 18px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        display: inline-block;
        margin-bottom: 20px;
    }
}

.event-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: #fff;
    max-width: 600px;
    line-height: 1.1;
    margin-top: 50px;
}

/* Tablet */

/* Per-order-id color overrides for dynamic/repeated blocks.
   Example:
   #dynamic-sections .section-block-wrapper[data-order-id="6"] {
       --order-news-title-color: #0f1f67;
       --order-news-text-color: #344054;
       --order-shorts-title-color: #0f1f67;
       --order-shorts-text-color: #ffffff;
       --order-cards-title-color: #0f1f67;
       --order-cards-text-color: #334155;
       --order-media-title-color: #0f1f67;
       --order-media-text-color: #334155;
       --order-parallax-title-color: #0f1f67;
       --order-parallax-text-color: #334155;
   }
*/
#dynamic-sections .section-block-wrapper[data-order-id] .section--news-featured-list {
    --news-title-color: var(--order-news-title-color, var(--ds-news-title-color, var(--org-title)));
    --news-text-color: var(--order-news-text-color, var(--ds-news-text-color, var(--org-text)));
}

#dynamic-sections .section-block-wrapper[data-order-id] .section--shorts {
    --shorts-title-color: var(--order-shorts-title-color, var(--ds-shorts-title-color, var(--org-title)));
    --shorts-text-color: var(--order-shorts-text-color, var(--ds-shorts-text-color, #ffffff));
}

#dynamic-sections .section-block-wrapper[data-order-id] .section--cards,
#dynamic-sections .section-block-wrapper[data-order-id] .section--cards-training {
    --cards-title-color: var(--order-cards-title-color, var(--ds-cards-title-color, var(--org-title)));
    --cards-text-color: var(--order-cards-text-color, var(--ds-cards-text-color, var(--org-text)));
}

#dynamic-sections .section-block-wrapper[data-order-id] .section--cards-duo-overlay {
    --cards-duo-content-color: var(--order-duo-title-color, var(--ds-duo-title-color, #ffffff));
    --cards-duo-desc-color: var(--order-duo-text-color, var(--ds-duo-text-color, rgba(255, 255, 255, 0.92)));
}

#dynamic-sections .section-block-wrapper[data-order-id] .section--media .media-block__title {
    color: var(--order-media-title-color, var(--ds-media-title-color, var(--org-title)));
}

#dynamic-sections .section-block-wrapper[data-order-id] .section--media .media-block__description,
#dynamic-sections .section-block-wrapper[data-order-id] .section--media .media-block__card-description {
    color: var(--order-media-text-color, var(--ds-media-text-color, var(--org-text)));
}

#dynamic-sections .section-block-wrapper[data-order-id] .three-layer-parallax__title {
    color: var(--order-parallax-title-color, var(--ds-parallax-title-color, var(--org-title)));
}

#dynamic-sections .section-block-wrapper[data-order-id] .three-layer-parallax__description {
    color: var(--order-parallax-text-color, var(--ds-parallax-text-color, var(--org-text)));
}

@media (max-width: 900px) {
    .event-title {
        font-size: 3.25rem;
        max-width: 500px;
        margin-top: 75px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .event-title {
        font-size: 2.75rem;
        max-width: 100%;
        text-align: left;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .event-title {
        font-size: 2.25rem;
        margin-bottom: var(--space-3);
        margin-top: 0px;
    }
}

/* Tablet */
@media (max-width: 900px) {

    .hero-title {
        font-size: 4rem;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
        max-width: 600px; /* testo largo max 600px */
        line-height: 1.1;
    }
}

/* Mobile */
@media (max-width: 768px) {

    .hero-title {
        font-size: 3rem;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
        max-width: 600px; /* testo largo max 600px */
        line-height: 1.1;
    }
}

/* Small mobile */
@media (max-width: 480px) {

    .hero-title {
        font-size: 3rem;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
        max-width: 600px; /* testo largo max 600px */
        line-height: 1.1;
    }
}


/* Very small screens */
@media (max-width: 360px) {
    .event-title {
        font-size: 1.8rem;
    }
}


#detailsContainer {
    display: flex; /* Mantiene flexbox */
    flex-direction: column; /* Mantiene la direzione verticale */
    max-height: 50vh; /* Imposta l'altezza massima per tutto il blocco a discesa */
    overflow: hidden; /* Nasconde ci� che potrebbe "sbordare" dai bordi arrotondati */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Stile per la "cornice di vetro" di entrambi i box */
.event-summary {
    background-color: rgba(var(--surface), 0.8);
    backdrop-filter: blur(30px);
    border-radius: 12px;
    color: white;
    /* Spostiamo il padding qui per il box superiore */
    padding: 20px;
    overflow: auto;
}

/* Stile per il layout a griglia del box superiore */
#summaryBox.event-summary {
    display: grid;
    grid-template-rows: repeat(4, auto);
    gap: 15px;
}

/* Stile per il box a discesa che DEVE diventare scorrevole */
#detailsContainer.event-summary {
    /* Rimuoviamo il padding da qui per evitare conflitti */
    padding: 0;
    display: flex; /* Manteniamo flexbox per il controllo */
    flex-direction: column;
    max-height: 50vh; /* L'altezza massima rimane qui */
}

/* Stile per l'area del contenuto che scorrer� */
.scrollable-content {
    overflow: auto; /* Aggiunge la scrollbar */
    padding: 20px; /* Spostiamo il padding QUI dentro */
    padding-right: 10px; /* Meno padding a destra per far spazio alla scrollbar */
    max-height: 20vh;
}

.event-subtitle {
    font-size: var(--font-md);
    color: #ccc;
    font-size: 22px;
    margin-bottom: var(--space-3);
}

.event-info .info-item {
    font-size: var(--font-sm);
    color: #bbb;
    margin-bottom: var(--space-1);
}

.event-info .icon {
    margin-right: var(--space-2);
}

.event-video-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: var(--colore-principale);
    background:
    /* 1. Gradiente superiore (invariato) */
    linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%),
    /* 2. Gradiente inferiore (MODIFICATO per iniziare con nero pieno) */
    linear-gradient(to top, var(--colore-principale) 0%, rgba(0, 0, 0, 0.4) 20%, transparent 100%);
}

.event-overview-video-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background:
    /* 1. Gradiente superiore (invariato) */
    linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, var(--colore-principale) 0%, rgba(0, 0, 0, 0.4) 20%, transparent 100%), linear-gradient(to top, var(--colore-principale) 0%, rgba(0, 0, 0, 0.4) 20%, transparent 100%);
}

.event-freesection-video-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background:
    /* 1. Orizzontale: opacit� iniziale ridotta per un effetto pi� leggero */
    linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.05) 50%, transparent 100%),
    /* 2. Verticale dall'alto: sfumatura pi� lunga e senza passaggi intermedi bruschi */
    linear-gradient(to bottom, var(--colore-principale) 0%, transparent 50%),
    /* 3. Verticale dal basso: speculare al precedente per un effetto morbido e bilanciato */
    linear-gradient(to top, var(--colore-principale) 0%, transparent 50%);
}




/* Registro evento */
.event-register {
    margin-top: var(--space-4);
}

.register-input {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-3);
    margin-bottom: var(--space-2);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: var(--radius);
}

.register-btn {
    color: #ffffff;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    transition: background 0.3s;
}

    .register-btn:hover {
        background: #e0b023;
    }

.register-note {
    font-size: var(--font-sm);
    color: #bbb;
    margin-top: var(--space-2);
}

/* Organizzatori */
.event-organizers {
    margin-top: var(--space-4);
    padding: 20px 0px;
}

/* Tablet */
@media (max-width: 1024px) {
    .event-organizers {
        margin-top: var(--space-3);
        padding: 16px 0px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .event-organizers {
        margin-top: var(--space-2);
        padding: 8px 0px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .event-organizers {
        margin-top: 0;
        padding: 4px 0px;
    }
}

.organizers-title {
    font-size: var(--font-md);
    color: #fff;
    margin-bottom: var(--space-2);
}

.organizers-list {
    list-style: none;
    padding: 0;
}

    .organizers-list li {
        margin-bottom: var(--space-1);
    }

    .organizers-list input[type="checkbox"] {
        margin-right: var(--space-2);
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Sezione Attend */
.event-attend {
    margin-top: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 25px 0;
}

.attend-btn {
    background: #28a745; /* Verde della foto */
    color: #fff;
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    transition: background 0.3s;
}

    .attend-btn:hover {
        background: #218838;
    }

.attend-date {
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: var(--radius);
    width: 100px;
    text-align: center;
}

.attend-email {
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: var(--radius);
    width: 200px;
}

.confirm-btn {
    background: #6c757d; /* Grigio della foto */
    color: #fff;
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    transition: background 0.3s;
}

    .confirm-btn:hover {
        background: #5a6268;
    }

/* Sezione principale */
.section.with-bg {
    /*    background-color: var(--colore-principale, #222);*/
    position: relative;
    z-index: 2;
    padding: 100px 0;
}

.section.with-video {
    background-color: transparent;
    position: relative;
    z-index: 2;
    padding: 100px 0;
}

#contentGoesHere {
    flex-grow: 1; /* FONDAMENTALE: Dice a questo elemento di riempire tutto lo spazio verticale disponibile nel padre */
    overflow-y: auto; /* Aggiunge la barra di scorrimento verticale SOLO se il contenuto � pi� alto dello spazio disponibile */
    min-height: 0; /* FIX CRUCIALE: Permette al contenitore flex di restringersi e attivare l'overflow */
    /* Manteniamo la spaziatura interna per un look pulito */
    padding: 20px;
    padding-right: 15px; /* Un po' di spazio extra a destra per non "incollare" la scrollbar al testo */
}
/*
** Stile per una scrollbar "fluttuante" solo per #contentGoesHere
*/

/* Per Firefox */
#contentGoesHere {
    scrollbar-width: thin;
    /* MODIFICA: Il secondo colore (lo sfondo) � ora trasparente */
    scrollbar-color: #a8a8a8 transparent;
}

    /* Per Chrome, Safari, Edge */
    #contentGoesHere::-webkit-scrollbar {
        width: 10px;
    }

    /* MODIFICA: Lo sfondo della scrollbar � ora trasparente */
    #contentGoesHere::-webkit-scrollbar-track {
        background: transparent !important;
    }

    #contentGoesHere::-webkit-scrollbar-thumb {
        background-color: #a8a8a8;
        border-radius: 5px;
        /* MODIFICA: Rimosso il bordo che c'era prima */
    }

        #contentGoesHere::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
/* Wrapper immagine + testo */
.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-6, 40px);
    background: var(--surface, #fff);
    padding: var(--space-6, 40px);
    border: 1px solid var(--border, #ddd);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    position: relative;
    /*    height: 80vh;*/
}

/* Immagine */
/*.content-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    cursor: pointer;
}*/

/* Testo */
.content-text {
    display: flex;
    flex-direction: column;
}

    .content-text .subtitle {
        margin-top: var(--space-2, 8px);
        font-weight: bold;
        color: var(--text-muted, #666);
        text-align: left;
    }

    .content-text .description {
        margin-top: var(--space-4, 16px);
        line-height: 1.7;
    }


/* Responsive */
@media (max-width: 768px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        height: auto;
        padding: 20px;
    }

    .content-text {
        margin-top: 20px;
        text-align: left;
        align-items: flex-start;
    }
}

@media (max-width: 900px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        height: auto;
        padding: 20px;
    }
}

/* =============================================== */
/* == CORREZIONE LARGHEZZA IMMAGINE OUR VALUES == */
/* =============================================== */

/* Applica una griglia asimmetrica specifica per la sezione #ourValues */
#ourValues .grid--2cols {
    grid-template-columns: 2fr 1fr; /* D� 2/3 dello spazio al testo e 1/3 all'immagine */
    gap: 4rem; /* Mantiene un bello spazio tra le colonne */
}

/* Assicura che l'immagine si adatti al suo nuovo contenitore pi� stretto */
#ourValues .benefit-image-circle {
    width: 100%; /* L'immagine occupa il 100% della sua colonna */
    height: 350px; /* L'altezza si adatta per mantenere le proporzioni */
    max-width: 550px; /* Imposta una larghezza massima per sicurezza */
    display: block; /* Rimuove spazi extra sotto l'immagine */
    margin-inline: auto; /* Centra l'immagine nella sua colonna */
}

/* La nuova griglia principale che contiene la card e la mappa */
.location-layout-grid {
    display: grid;
    /* Diamo pi� spazio alla card (1.5fr) rispetto alla mappa (1fr) */
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-6);
    align-items: stretch; /* Assicura che entrambe le colonne abbiano la stessa altezza */
}

/* Contenitore per la mappa */
.map-container {
    overflow: hidden; /* Nasconde gli angoli dell'iframe */
    height: 100%;
    min-height: 400px; /* Altezza minima per una buona visualizzazione */
    border-radius: var(--radius)
}

    /* Stile per rendere l'iframe della mappa responsivo */
    .map-container iframe {
        width: 100%;
        height: 100%;
        border: 1px solid var(--border);
        /*        padding:32px;*/
    }
/* Contenitore per la mappa */
.map-container-event-2 {
    overflow: hidden; /* Nasconde gli angoli dell'iframe */
    height: 300px; /* Altezza minima per una buona visualizzazione */
}

    /* Stile per rendere l'iframe della mappa responsivo */
    .map-container-event-2 iframe {
        width: 100%;
        border: 0;
        display: block;
        height: 100%;
    }
/* --- Adattabilit� per Smartphone --- */
@media (max-width: 900px) {
    .location-layout-grid {
        grid-template-columns: 1fr; /* Le colonne vanno una sopra l'altra */
    }
}
/* Icons */
.icon-list {
    margin-top: 20px;
    padding-right: 500px;
    display: flex;
    justify-content: left;
    gap: 5px;
}

.icon-item {
    width: 50px;
    padding: 11px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    transition: transform 0.2s;
}

    .icon-item img {
        width: 24px;
        height: 24px;
    }

    .icon-item:hover {
        transform: scale(1.1);
    }


.footer {
    background-color: #111; /* colore scuro di sfondo */
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* spazio tra le colonne */
    justify-content: flex-start; /* allinea tutto a sinistra */
    max-width: 1200px;
    margin: 0 auto; /* centra il footer nella pagina */
}


.footer-col {
    flex: 1;
    min-width: 250px;
    padding-left: 90px;
    padding-right: 90px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.footer-logo {
    width: 180px;
    padding-top: 40px;
    margin-bottom: 15px;
}

.footer-tagline {
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #ccc;
    max-width: 250px;
}

.footer-cert {
    width: 150px;
    margin-top: 10px;
}

.footer-col h5 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #fff;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

    .footer-links li {
        margin-bottom: 2px;
    }

    .footer-links a {
        color: #ccc;
        text-decoration: underline; /* aggiunge l'underline */
        transition: color 0.3s;
    }


        .footer-links a:hover {
            color: #ff9900;
            text-decoration: underline; /* mantiene l'underline anche al hover */
        }


.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

    .footer-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: #222;
        border-radius: 50%;
        transition: all 0.3s ease;
        color: #fff;
        flex-shrink: 0; /* impedisce deformazioni */
        overflow: hidden; /* evita che l�icona esca */
    }

        .footer-social a svg {
            max-width: 60%; /* dimensione proporzionata */
            max-height: 60%; /* mantiene le proporzioni */
            width: auto;
            height: auto;
            fill: currentColor;
            display: block;
        }

        .footer-social a:hover {
            background-color: #ff9900;
            transform: scale(1.1);
        }


.footer a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

    .footer a:hover {
        color: #ff9900;
    }

@media (max-width: 900px) {
    .footer-container {
        flex-direction: column;
        gap: 30px;
    }
}


@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }
}


/* Cookie Consent Section */
.cookie-consent {
    background-color: #2c2c2c;
    color: #fff;
    padding: 20px;
    font-family: 'Segoe UI', sans-serif;
}

.cookie-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.cookie-text h3 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
}

.cookie-text p {
    margin: 0;
    font-size: 1rem;
    max-width: 500px;
}

.cookie-action button {
    background-color: #ff6b00;
    border: none;
    border-radius: 14px;
    color: #fff;
    padding: 10px 25px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
}

    .cookie-action button:hover {
        background-color: #ff8800;
    }

/* Responsive */
@media (max-width: 768px) {
    .cookie-container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .cookie-action button {
        width: 100%;
        max-width: 200px;
    }
}

/* Stile per la griglia della sezione Downloads */
#downloads .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Default a 2 colonne per schermi grandi */
    gap: 2rem;
}

/* Per schermi pi� piccoli di 768px (tablet e cellulari) */
@media (max-width: 768px) {
    #downloads .grid {
        grid-template-columns: 1fr; /* Passa a 1 sola colonna */
    }
}
/* ======================================================== */
/* == STILI PER LE CARD DELLA SEZIONE DOWNLOADS == */
/* ======================================================== */

/* Stile principale della card */
#downloads .card--download {
    /*background-color: #1a2a3a;*/ /* Sfondo scuro per la card, cambialo se necessario */
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    /*    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 100%);*/
}

    /* Rimuove l'ombra dall'immagine, dato che la card ora ha uno sfondo */
    #downloads .card--download .media {
        box-shadow: none;
    }

    /* Corpo della card, organizzato in colonna */
    #downloads .card--download .card__body {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1; /* Fa in modo che il corpo occupi tutto lo spazio verticale disponibile */
    }

    /* Contenuto testuale (titolo e descrizione) */
    #downloads .card--download .card__content {
        flex-grow: 1; /* Spinge il footer in basso */
    }

    /* Footer con meta info e pulsante */
    #downloads .card--download .card__footer {
        margin-top: 1.5rem; /* Spazio sopra le meta info */
    }

    /* Meta Info (Versione e Dimensione) */
    #downloads .card--download .card__meta-info {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        color: #a0aec0; /* Un grigio chiaro per le info secondarie */
        margin-bottom: 1rem;
    }

    /* Pulsante Download grande */
    #downloads .card--download .btn--download {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem;
        background-color: #2a2b2a;
        font-size: 1rem;
        font-weight: bold;
        border-radius: 8px;
        border: 0px solid var(--primary);
        color: #FFFFFF;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

        #downloads .card--download .btn--download:hover {
            /* I tuoi due sfondi a strati, come li hai scritti */
            background-image:
            /* Livello 1 (sopra): velo bianco al 15% */
            linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
            /* Livello 2 (sotto): il tuo colore di base */
            linear-gradient(var(--colore-bottone-dinamico), var(--colore-bottone-dinamico));
            /* Applica il metodo di fusione desiderato */
            background-blend-mode: screen; /* <-- ECCO LA MAGIA */
        }
/*Language Selector*/

.language-selector {
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 1000;
}

.language__active {
    display: block;
    width: 36px;
    height: 36px;
    cursor: pointer;
    text-decoration: none;
}

.language__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    background-color: #1a1a1a;
    border-radius: 10px;
    padding: 5px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

    .language__dropdown.active {
        display: block;
    }

.language__item {
    display: block;
    width: 28px;
    height: 28px;
    margin: 8px 0; /* Aumentato un po' lo spazio verticale per una migliore leggibilit� */
    cursor: pointer;
}

.language__icon {
    width: 100%;
    height: 100%;
    display: block;
}

    .language__icon svg {
        width: 100%;
        height: 100%;
    }



/*
 * ===============================================
 * CLASSI PER EFFETTO GLASSMORPHISM (v2)
 * ===============================================
 */

/* 1. La Sezione Principale (Lo Sfondo) */
.glass-section {
    /* Background a pi� livelli: un colore scuro semitrasparente SOPRA l'immagine */
    background-image: linear-gradient(rgba(10, 10, 15, 0.7), rgba(10, 10, 15, 0.7)), var(--section-bg-image);
    background-size: cover;
    position: relative;
    background-position: center;
    /* Spaziatura e allineamento */
    padding: 80px 0;
    display: flex;
    align-items: center;
    min-height: 80vh;
}

    .glass-section .container {
        position: relative;
        z-index: 1;
    }


/* 2. La Card Effetto Vetro */
.glass-card {
    background: rgba(20, 20, 30, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 40px;
    color: #f0f0f0;
    overflow: hidden;
    margin-top: 0px !important;
}

.glass-card-text {
    background: rgba(20, 20, 30, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    align-items: center;
    padding: 10px 40px;
    color: #f0f0f0;
    margin-bottom: 0px;
}

.glass-card .glass-title {
    margin-top: 0 !important;
}


/* 3. Stili per il contenuto dentro la card */
.glass-content {
    margin-top: 0px;
    /* Nessuno stile particolare richiesto qui, serve solo come contenitore */
}

/*@media (max-width: 768){
    .glass-content{
        text-align: left;
        align-items: flex-start;
    }
}
*/

.glass-title {
    font-size: 2.8rem;
    font-weight: 700;
    /*    margin-bottom: 20px;*/
    margin-top: 0px;
    background: #ffffff;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    max-width: 600px;
}

.title-partners {
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 0px;
    background: #ffffff;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    max-width: 600px;
}


.glass-text {
    font-size: 1.2rem;
    line-height: 1.7;
    opacity: 0.9;
    /*    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);*/
    max-width: min(800px, 85vw);
    margin-bottom: 0px;
    margin-top: 0px;
    text-align: left;
}

@media (max-width: 768px) {
    .glass-text {
        font-size: 1.1rem;
        line-height: 1.6;
        max-width: min(600px, 90vw);
        text-align: left;
    }
}

@media (max-width: 480px) {
    .glass-text {
        font-size: 1rem;
        line-height: 1.5;
        max-width: min(400px, 92vw);
        text-align: left;
    }
}

@media (max-width: 350px) {
    .glass-text {
        font-size: 0.95rem;
        max-width: 250px;
        text-align: left;
    }
}


/* 4. L'immagine sulla destra */
.glass-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.glass-image {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}




/* 5. Responsivit� per dispositivi mobili */
@media (max-width: 900px) {
    .glass-card {
        grid-template-columns: 1fr;
        text-align: left;
        padding: 20px;
    }

    .glass-image-wrapper {
        order: -1;
        margin-bottom: 30px;
    }

    .glass-title {
        font-size: 2.0rem;
        text-align: left;
        max-width: 350px;
    }

    .title-partners {
        font-size: 2.2rem;
    }
}


/* =============================================== */
/* == STILI FINALI PER MAIN HEADER RESPONSIVE == */
/* =============================================== */

/* -- Struttura Principale -- */
.main-header {
    background-color: var(--header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid var(--border);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;  
    height: 75px;
    max-width: 1200px;
    margin: 0 auto;
}

.header-logo img {
    height: 50px;
    display: block;
}

/* -- Navigazione Desktop -- */
.main-nav {
    /* Stili per la navigazione desktop (visibile di default) */
}

.nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    text-decoration: none;
}

.nav-title {
    font-weight: 600;
    color: var(--nav-title-color, var(--org-title));
    font-size: var(--font-md);
    transition: color 0.2s ease;
}

.nav-subtitle {
    /*    font-size: var(--font-xs);*/
    font-size: var(--font-md);
    color: var(--text-muted);
    transition: color 0.2s ease;
    font-weight: 400;
}

.nav-link:hover .nav-title,
.nav-link:hover .nav-subtitle {
    color: var(--primary);
}

/* -- Pulsante Hamburger (nascosto su desktop) -- */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
}

/* -- Menu Mobile (nascosto di default su TUTTI gli schermi) -- */
.mobile-nav {
    display: none;
}

/* Stile per l'overlay di sfondo quando il menu � aperto */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .mobile-nav-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }


/* -- Media Query per la Responsivit� (sotto 900px) -- */
@media (max-width: 900px) {
    /* Nasconde la navigazione desktop */
    .main-nav,
    .header-actions {
        display: none;
    }

    /* Mostra il bottone hamburger */
    .mobile-nav-toggle {
        display: block;
    }

    /* Stili per il menu mobile quando � su schermi piccoli */
    .mobile-nav {
        display: block;
        position: fixed;
        top: 75px;
        right: 0;
        width: 300px;
        max-width: 80vw;
        height: calc(100vh - 75px);
        background-color: var(--surface);
        border-left: 1px solid var(--border);
        z-index: 9999;
        padding: var(--space-5);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

        /* Quando il JavaScript aggiunge la classe .is-open, il menu appare */
        .mobile-nav.is-open {
            transform: translateX(0);
        }

        /* Stili per gli elementi del menu mobile */
        .mobile-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .mobile-nav li a {
            display: block;
            padding: var(--space-3) 0;
            color: var(--text);
            text-decoration: none;
            font-size: var(--font-lg);
            border-bottom: 1px solid var(--border);
        }

        .mobile-nav li:last-child a {
            border-bottom: none;
        }

        /* Stili per il bottone d'azione nel menu mobile */
        .mobile-nav .mobile-nav-action {
            margin-top: var(--space-4);
            padding-top: var(--space-4);
            border-top: 1px solid var(--border);
        }

        .mobile-nav .btn {
            display: block;
            width: 100%;
            text-align: center;
            background-color: var(--primary);
            color: var(--page-bg);
            font-weight: 700;
        }

            .mobile-nav .btn:hover {
                background-color: var(--text-muted);
                color: var(--page-bg);
            }
}




.grid.is-reversed .grid-item__image {
    order: 1; /* Spinge l'immagine a destra */
}

.grid.is-reversed .grid-item__text {
    order: -1; /* Spinge il testo a sinistra */
}

/* Stile per le sezioni con video di sfondo */
.free-section.has-bg-video {
    position: relative;
    overflow: hidden;
    color: #fff; /* Assicura che il testo sia leggibile sul video */
}



.content-wrapper {
    /* Ensure the wrapper has a positioning context */
    position: relative;
}

.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Black at 50% opacity */
    z-index: 1; /* Sits above the background */
}

.content-text {
    z-index: 2; /* Sits on top of the overlay */
}

/* Main container - acts as the viewport */
.ribbon-container {
    width: 200%;
    overflow: hidden;
    background-color: #111;
    box-sizing: border-box;
    max-width: 100%;
}

/* The element that moves */
.ribbon-content {
    display: flex;
    width: max-content; /* Usa max-content per adattarsi al contenuto */
    animation: scroll-left 80s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}

/* Pausa animazione su hover */
.ribbon-container:hover .ribbon-content {
    animation-play-state: paused; /* Blocca l'animazione al passaggio del mouse */
}

/* The two spans containing the text */
.ribbon-content span {
    flex: 0 0 auto; /* Impedisce agli span di ridimensionarsi */
    white-space: nowrap; /* Prevents the text inside from wrapping */
    padding: 1.5rem 0;
    /* Text styling */
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Microgramma D';
}

.event-item {
    margin-right: 80px; /* Spazio tra ogni "EVENT � " */
    display: inline; /* Necessario per rispettare il margine */
}

.event-item {
    margin-right: 80px; /* Spazio tra ogni "EVENT � " */
    display: inline; /* Necessario per rispettare il margine */
    font-weight: 300;
}

.creator-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}

/* Stile per il logo all'interno del contenitore */
.creator-info__logo {
    width: 100px;
    height: auto;
}

/* Stile per il nome (ora un link) */
.creator-info__name {
    color: white;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 700;
}

    .creator-info__name:hover {
        cursor: pointer;
    }

.btn.btn--fill-effect {
    width: auto; /* O 'auto' se non lo vuoi a larghezza piena */
    max-width: 450px; /* It was 300 before, change it back if it breaks */
    margin: 0 auto; /* Per centrarlo se non � a larghezza piena */
    text-align: center;
    padding: .85rem 1.5rem;
    background-color: var(--colore-bottone-dinamico);
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 24px;
    border: none;
    color: #FFFFFF;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

    .btn.btn--fill-effect:hover {
        background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), linear-gradient(var(--colore-bottone-dinamico), var(--colore-bottone-dinamico));
        background-blend-mode: screen;
        transform: translateY(-2px); /* Effetto opzionale per sollevarlo un po' */
    }

/* Stili per il nuovo carosello otherjourneys */

/* IMPOSTA QUI LA LARGHEZZA FISSA CHE DESIDERI PER LE CARD */
.other-journeys-swiper .swiper-slide {
    width: 190px;
    /*    height: 450px;*/
}

/* Stile opzionale per dare un po' di spazio sotto al carosello per i "pallini" di paginazione */
.other-journeys-swiper {
    padding-bottom: 50px;
}

    /* Rende i pallini di paginazione e le frecce di un colore pi� visibile */
    .other-journeys-swiper .swiper-pagination-bullet-active {
        background-color: #ffffff;
    }

    .other-journeys-swiper .swiper-button-next,
    .other-journeys-swiper .swiper-button-prev {
        color: #ffffff;
    }

/* --- Stili FORZATI per la Lista a Scorrimento Orizzontale --- */

#otherjourneys .scrolllistnew {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 40px;
}

#otherjourneys .scroll-container {
    overflow-x: hidden !important;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    #otherjourneys .scroll-container::-webkit-scrollbar {
        display: none;
    }

#otherjourneys .scroll-content {
    display: flex !important; /* Forza il layout flessibile */
    flex-direction: row !important; /* Forza la direzione orizzontale */
    flex-wrap: nowrap !important; /* Forza a non andare a capo */
    gap: 20px;
}

    /* Regola forzata per ogni singola card */
    /* Sostituisci la vecchia regola per #otherjourneys con questa */
    #otherjourneys .scroll-content > * {
        flex: 0 0 auto; /* Dice: non crescere (0), non stringerti (0), e la tua larghezza � 'auto' (quella originale) */
        width: auto; /* Rinforza l'idea che la larghezza sia automatica e non forzata */
    }

/* Stili per i bottoni */
#otherjourneys .scroll-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
}

    #otherjourneys .scroll-button:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }

    #otherjourneys .scroll-button.left-button {
        left: 0;
    }

    #otherjourneys .scroll-button.right-button {
        right: 0;
    }

/* The animation keyframes */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Stili principali della sezione Timeline */
.timelineSection {
    padding-top: 100px;
    padding-bottom: 100px;
}

.timelineHeader {
    margin-bottom: var(--space-6);
}

.timelineGrid {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr; /* Colonna per la linea e colonna per le card */
    gap: 20px;
    align-items: start; /* Allinea gli elementi al top della griglia */
}

.timelineLine {
    position: absolute;
    width: 2px;
    background-color: #6b7280; /* Mantiene il tuo colore */
    left: 9px; /* Mantiene la tua posizione orizzontale */
    z-index: 1;
    /* --- MODIFICHE CHIAVE --- */
    /* Fai iniziare la linea al centro del primo cerchio */
    top: 2px;
    /* Fai finire la linea pi� in alto, lasciando spazio sotto l'ultimo elemento */
    bottom: 40px;
}

/* Elementi della colonna sinistra (orario) */
.timelineItem {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    min-height: 100px;
    z-index: 2; /* Deve stare sopra la linea */
}

.timelineCircle {
    width: 20px;
    height: 20px;
    background-color: #6b7280;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 28px;
    z-index: 2; /* z-index relativo al suo contenitore .timelineItem */
    flex-shrink: 0;
}

.timelineTimeTag {
    min-width: 60px;
    color: #ffffff;
    font-size: 1.875rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.timelineTimeDuration {
    font-size: 0.75rem;
}

/* Card dell'evento */
.timelineCard {
    position: relative;
    border: 1px solid var(--border, #ddd);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    min-height: 100px;
}

.timelineCardBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/ /* Aggiunto per coprire tutta l'altezza */
    z-index: 0;
}

.timelineCardImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timelineCardOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 0;
}

.timelineCardContent {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    color: #ffffff;
}

.timelineCardEventTag {
    padding: 0.4rem 1.2rem;
    border-radius: 0.5rem;
    font-size: 1rem;
}

.timelineCardTitle {
    margin-top: 1.2rem;
    margin-bottom: 0.75rem;
}

.timelineCardHost {
    color: #d1d5db;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.timelineCardDescription {
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.timelineCardMeta {
    font-size: 0.75rem;
}

.timelineCardMetaTime {
    margin-right: 1rem;
}

.program-card {
    z-index: 5;
}


/* =============================================== */
/* 2. MEDIA QUERY PER DESKTOP (VERSIONE CORRETTA)  */
/* =============================================== */
@media (min-width: 768px) {

    .timelineGrid {
        /* Layout a due colonne come lo desideri */
        grid-template-columns: 4% 93%;
        gap: 0 2rem;
    }

    .timelineLine {
        left: 10px;
    }


    /* Ripristina il blocco dell'orario */
    .timelineItem {
        grid-column: auto;
        flex-direction: row;
        align-items: flex-start;
        min-height: 100px;
        padding-top: 0;
    }

    /* Ripristina il cerchio */
    .timelineCircle {
        position: static;
        transform: none;
        border: none;
        margin-right: 20px; /* Aumentato lo spazio per corrispondere all'immagine */
        margin-top: 5px;
    }

    /* Ripristina il testo dell'orario */
    .timelineTimeTag {
        font-size: 1.875rem;
        text-align: left;
        margin-top: 0;
        margin-bottom: 10px;
        word-break: break-word;
    }

    /* --- MODIFICA CHIAVE --- */
    /* Nascondi la durata su desktop, come da immagine */
    .timelineTimeDuration {
        display: none;
    }

    /* Ripristina la card */
    .timelineCard {
        grid-column: auto;
        margin-bottom: 2rem;
    }
}


/* =================================================================== */
/* == BLOCCO CSS DEFINITIVO PER CAROSELLO PARTNERS CON SFUMATURA == */
/* =================================================================== */

/* --- 1. LAYOUT PRINCIPALE E FULL BLEED --- */

/* =================================================================== */
/* == BLOCCO CSS FINALE PER CAROSELLO PARTNERS CON GRADIENTE CORRETTO == */
/* =================================================================== */

/* --- 1. SEZIONE PRINCIPALE E GRADIENTI LATERALI (CORRETTO) --- */

/* La sezione #partners � il contenitore per i gradienti e ha l'altezza giusta */
#partners {
    position: relative;
    overflow: hidden;
}

/* Gradiente sul lato sinistro (applicato a #partners) */
.partner-swiper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15%;
    /* LA SOLUZIONE: altezza totale MENO lo spazio di 50px per la paginazione */
    height: calc(100% - 50px);
    background: linear-gradient(to right, #0d1a26, rgba(13, 26, 38, 0));
    z-index: 10;
    pointer-events: none;
}

.partner-swiper {
    position: relative;
}
    /* Gradiente destro con altezza calcolata */
    .partner-swiper::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 15%;
        /* LA SOLUZIONE: altezza totale MENO lo spazio di 50px per la paginazione */
        height: calc(100% - 50px);
        background: linear-gradient(to left, #0d1a26, rgba(13, 26, 38, 0));
        z-index: 10;
        pointer-events: none;
    }

.sezione-full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* --- 2. CONTENITORE DEL CAROSELLO --- */

.partner-swiper {
    padding-bottom: 50px;
    margin-bottom: -50px;
}

/* --- 3. STILI DEI BLOCCHI (SLIDE) --- */

#partners .partner-swiper .swiper-slide {
    width: 55%;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    #partners .partner-swiper .swiper-slide:not(.swiper-slide-active) {
        opacity: 0.5;
        transform: scale(0.95);
    }

    #partners .partner-swiper .swiper-slide.swiper-slide-active {
        opacity: 1;
        transform: scale(1);
    }

/* --- 4. STILI INTERNI ALLA CARD (OVERLAY, TESTO) --- */

.swiper-slide.card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* Forza una proporzione per un'altezza consistente */
}

    .swiper-slide.card .card__body {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0) 100%);
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        justify-content: flex-end;
        padding: 1.5rem;
        box-sizing: border-box;
    }

        .swiper-slide.card .card__body h5,
        .swiper-slide.card .card__body .text,
        .swiper-slide.card .card__body .btn--ghost {
            color: #FFFFFF !important;
            border-color: #FFFFFF;
        }

/* --- 5. NAVIGAZIONE (FRECCE E PAGINAZIONE) --- */
.partner-swiper .swiper-button-next {
    transform: translateY(80%);
    transform: translateX(-150%);
    color: #FFFFFF;
    z-index: 4;
}

.partner-swiper .swiper-button-prev {
    transform: translateY(-80%);
    transform: translateX(150%);
    color: #FFFFFF;
    z-index: 4;
}

.partner-swiper .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: 25px;
}

    .partner-swiper .swiper-pagination .swiper-pagination-bullet {
        background-color: #A0A0A0;
    }

    .partner-swiper .swiper-pagination .swiper-pagination-bullet-active {
        background-color: #FFFFFF;
    }



/* La sezione #partners � il contenitore per i gradienti e ha l'altezza giusta */
#impressions {
    position: relative;
    overflow: hidden;
}

/* Gradiente sul lato sinistro (applicato a #partners) */
.partner-swiper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15%;
    /* LA SOLUZIONE: altezza totale MENO lo spazio di 50px per la paginazione */
    height: calc(100% - 50px);
    background: linear-gradient(to right, var(--colore-bottone-dinamico), transparent);
    z-index: 10;
    pointer-events: none;
}

.partner-swiper {
    position: relative;
}
    /* Gradiente destro con altezza calcolata */
    .partner-swiper::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 15%;
        /* LA SOLUZIONE: altezza totale MENO lo spazio di 50px per la paginazione */
        height: calc(100% - 50px);
        background: linear-gradient(to left, var(--colore-bottone-dinamico), transparent);
        z-index: 10;
        pointer-events: none;
    }

.sezione-full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* --- 2. CONTENITORE DEL CAROSELLO --- */

.partner-swiper {
    padding-bottom: 50px;
    margin-bottom: -50px;
}

/* --- 3. STILI DEI BLOCCHI (SLIDE) --- */

#impressions .partner-swiper .swiper-slide {
    width: 55%;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    #impressions .partner-swiper .swiper-slide:not(.swiper-slide-active) {
        opacity: 0.5;
        transform: scale(0.95);
    }

    #impressions .partner-swiper .swiper-slide.swiper-slide-active {
        opacity: 1;
        transform: scale(1);
    }

/* --- 4. STILI INTERNI ALLA CARD (OVERLAY, TESTO) --- */

.swiper-slide.card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* Forza una proporzione per un'altezza consistente */
}

    .swiper-slide.card .card__body {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0) 100%);
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        justify-content: flex-end;
        padding: 1.5rem;
        box-sizing: border-box;
    }

        .swiper-slide.card .card__body h5,
        .swiper-slide.card .card__body .text,
        .swiper-slide.card .card__body .btn--ghost {
            color: #FFFFFF !important;
            border-color: #FFFFFF;
        }

/* --- 5. NAVIGAZIONE (FRECCE E PAGINAZIONE) --- */
.partner-swiper .swiper-button-next {
    transform: translateY(80%);
    transform: translateX(-150%);
    color: #FFFFFF;
    z-index: 4;
}

.partner-swiper .swiper-button-prev {
    transform: translateY(-80%);
    transform: translateX(150%);
    color: #FFFFFF;
    z-index: 4;
}

.partner-swiper .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: 25px;
}

    .partner-swiper .swiper-pagination .swiper-pagination-bullet {
        background-color: #A0A0A0;
    }

    .partner-swiper .swiper-pagination .swiper-pagination-bullet-active {
        background-color: #FFFFFF;
    }


/* Stili per il contenitore dell'immagine nella sezione Downloads */
#downloads .card__media {
    position: relative;
    overflow: hidden; /* Nasconde ci� che esce dai bordi */
    /* BORDI ARROTONDATI SOLO IN ALTO */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

    /* Crea un "velo" virtuale sopra il contenitore */
    #downloads .card__media::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        /*        background: linear-gradient(to top, #352e44 0%, rgba(0,0,0,0.25) 75%);*/
        background: linear-gradient(to top, rgba(20, 20, 20, 1) 1%, transparent 75%);
        pointer-events: none; /* Permette di cliccare sull'immagine/video sottostante */
        /* BORDI ARROTONDATI SOLO IN ALTO PER L'OVERLAY */
    }

    /* Assicura che l'immagine/video riempia lo spazio */
    #downloads .card__media .media {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* ANCHE L'IMMAGINE DEVE AVERE GLI STESSI BORDI ARROTONDATI */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

/* --- 6. RESPONSIVE --- */

@media (max-width: 768px) {
    /* --- Stili per il carosello Partners su Mobile --- */
    .partner-swiper .swiper-button-next,
    .partner-swiper .swiper-button-prev {
        top: 50%;
        transform: translateY(-50%);
        color: #FFFFFF;
        z-index: 100;
        /* Riduci la dimensione delle frecce se necessario, ad esempio */
        /* font-size: 1.5rem; */
    }

    .partner-swiper .swiper-button-next {
        /* Riduci il valore per avvicinarla al centro */
        right: 10%; /* <--- MODIFICA QUI, prova con 0px o un valore piccolo */
    }

    .partner-swiper .swiper-button-prev {
        /* Riduci il valore per avvicinarla al centro */
        left: 10%; /* <--- MODIFICA QUI, prova con 0px o un valore piccolo */
    }
    /* 1. Imposta la larghezza dello slide */
    #partners .partner-swiper .swiper-slide {
        width: 85%;
    }

        /* 2. Imposta l'altezza e la struttura della card */
        #partners .partner-swiper .swiper-slide.card {
            aspect-ratio: 3 / 4; /* Proporzione verticale (pi� alto che largo) */
            position: relative;
        }

    /* 3. Fa in modo che l'immagine occupi l'intera card */
    #partners .swiper-slide.card .card__media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }

        #partners .swiper-slide.card .card__media .media {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Riempie lo spazio senza deformarsi */
        }

    /* 4. Posiziona il testo e il gradiente sopra l'immagine */
    #partners .swiper-slide.card .card__body {
        position: relative;
        z-index: 2;
        height: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 30%, transparent 65%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.5rem;
        box-sizing: border-box;
        border-radius: 12px;
    }

    /* 5. Riduci la sfumatura laterale della sezione */
    #partners::before,
    #partners::after {
        width: 10%;
    }
}

/* --- 6. RESPONSIVE --- */

@media (max-width: 768px) {
    /* --- Stili per il carosello Partners su Mobile --- */
    .partner-swiper .swiper-button-next,
    .partner-swiper .swiper-button-prev {
        top: 50%;
        transform: translateY(-50%);
        color: #FFFFFF;
        z-index: 100;
        /* Riduci la dimensione delle frecce se necessario, ad esempio */
        /* font-size: 1.5rem; */
    }

    .partner-swiper .swiper-button-next {
        /* Riduci il valore per avvicinarla al centro */
        right: 10%; /* <--- MODIFICA QUI, prova con 0px o un valore piccolo */
    }

    .partner-swiper .swiper-button-prev {
        /* Riduci il valore per avvicinarla al centro */
        left: 10%; /* <--- MODIFICA QUI, prova con 0px o un valore piccolo */
    }
    /* 1. Imposta la larghezza dello slide */
    #impressions .partner-swiper .swiper-slide {
        width: 85%;
    }

        /* 2. Imposta l'altezza e la struttura della card */
        #impressions .partner-swiper .swiper-slide.card {
            aspect-ratio: 3 / 4; /* Proporzione verticale (pi� alto che largo) */
            position: relative;
        }

    /* 3. Fa in modo che l'immagine occupi l'intera card */
    #impressions .swiper-slide.card .card__media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }

        #impressions .swiper-slide.card .card__media .media {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Riempie lo spazio senza deformarsi */
        }

    /* 4. Posiziona il testo e il gradiente sopra l'immagine */
    #impressions .swiper-slide.card .card__body {
        position: relative;
        z-index: 2;
        height: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 30%, transparent 65%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.5rem;
        box-sizing: border-box;
        border-radius: 12px;
    }

    /* 5. Riduci la sfumatura laterale della sezione */
    #impressions::before,
    #impressions::after {
        width: 10%;
    }
}

/* Carosello generico */
.swiper-generic {
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
    margin-bottom: -50px;
}

    /* Gradienti laterali */
    .swiper-generic::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 15%;
        height: calc(100% - 50px);
        background: linear-gradient(to right, var(--page-bg, #0d1a26), rgba(13, 26, 38, 0));
        z-index: 10;
        pointer-events: none;
    }

    .swiper-generic::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 15%;
        height: calc(100% - 50px);
        background: linear-gradient(to left, var(--page-bg, #0d1a26), rgba(13, 26, 38, 0));
        z-index: 10;
        pointer-events: none;
    }

    /* Slide */
    .swiper-generic .swiper-slide {
        width: 55%;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

        .swiper-generic .swiper-slide:not(.swiper-slide-active) {
            opacity: 0.5;
            transform: scale(0.95);
        }

        .swiper-generic .swiper-slide.swiper-slide-active {
            opacity: 1;
            transform: scale(1);
        }

        /* Card all'interno dello slide */
        .swiper-generic .swiper-slide.card {
            position: relative;
            overflow: hidden;
            aspect-ratio: 16 / 9;
        }

            /* Gradiente inferiore sulla card */
            .swiper-generic .swiper-slide.card .card__body {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 80%);
                display: flex;
                flex-direction: column;
                border-radius: var(--radius, 20px);
                justify-content: flex-end;
                padding: 1.5rem;
                box-sizing: border-box;
            }

                /* Stili per il testo e i pulsanti nella card */
                .swiper-generic .swiper-slide.card .card__body .heading,
                .swiper-generic .swiper-slide.card .card__body .text,
                .swiper-generic .swiper-slide.card .card__body .btn--ghost {
                    color: var(--card-no-bg-title, #FFFFFF) !important;
                    border-color: var(--primary, #FFFFFF);
                }

    /* Navigazione */
    .swiper-generic .swiper-button-prev,
    .swiper-generic .swiper-button-next {
        color: var(--primary, #FFFFFF);
        z-index: 4;
    }

    .swiper-generic .swiper-button-prev {
        transform: translateY(-80%) translateX(150%);
    }

    .swiper-generic .swiper-button-next {
        transform: translateY(80%) translateX(-150%);
    }

    /* Paginazione */
    .swiper-generic .swiper-pagination {
        position: relative;
        bottom: auto;
        margin-top: 25px;
    }

        .swiper-generic .swiper-pagination .swiper-pagination-bullet {
            background-color: var(--text-muted, #A0A0A0);
        }

        .swiper-generic .swiper-pagination .swiper-pagination-bullet-active {
            background-color: var(--primary, #FFFFFF);
        }

/* Responsive */
@media (max-width: 768px) {
    .swiper-generic .swiper-slide {
        width: 85%;
    }

        .swiper-generic .swiper-slide.card {
            aspect-ratio: 3 / 4;
        }

            .swiper-generic .swiper-slide.card .card__media {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: var(--radius, 12px);
            }

                .swiper-generic .swiper-slide.card .card__media .media {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

            .swiper-generic .swiper-slide.card .card__body {
                position: relative;
                z-index: 2;
                height: 100%;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 30%, transparent 65%);
                border-radius: var(--radius, 12px);
            }

    .swiper-generic .swiper-button-prev,
    .swiper-generic .swiper-button-next {
        top: 50%;
        transform: translateY(-50%);
    }

    .swiper-generic .swiper-button-prev {
        left: 10%;
    }

    .swiper-generic .swiper-button-next {
        right: 10%;
    }

    .swiper-generic::before,
    .swiper-generic::after {
        width: 10%;
    }
}

.layout-row {
    display: flex;
    flex-wrap: wrap; /* Permette alle colonne di andare a capo su mobile */
    margin: -15px; /* Compensa il padding delle celle */
}

.layout-cell {
    padding: 15px; /* Simula il "gutter" (spaziatura) tra le colonne */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Allinea il contenuto verticalmente al centro */
}

/* Regole per le dimensioni delle colonne su schermi grandi */
.layout-row > .content-cell {
    flex: 0 0 60%; /* La colonna del testo occupa il 60% */
    max-width: 60%;
}

.layout-row > .image-cell {
    flex: 0 0 40%; /* La colonna dell'immagine occupa il 40% */
    max-width: 40%;
}

/* Regole per il responsive su schermi piccoli */
@media (max-width: 768px) {
    /* Su mobile, ogni colonna occupa il 100% della larghezza */
    .layout-row > .layout-cell {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* ======================================================== */
/* == STILI PER LA SEZIONE FAQ (ACCORDION) == */
/* ======================================================== */

.accordion__trigger .accordion__title {
    margin: 0;
}

.accordion {
    /*max-width: 800px;*/
    /*margin: var(--space-6) auto 0 auto;*/
}

.accordion__item {
    background-color: var(--colore-highlight);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    transition: background-color 0.3s ease;
}

.accordion__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-5);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text);
}

.accordion__item:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.accordion__title {
    flex: 1;
    padding-right: var(--space-4);
    max-width: 900px;
}

.accordion__icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

    .accordion__icon .icon {
        width: 100%;
        height: 100%;
        fill: var(--text-muted);
    }

/* Stili per lo stato "aperto" */
.accordion__trigger[aria-expanded="true"] .accordion__icon {
    transform: rotate(180deg);
}

.accordion__trigger[aria-expanded="true"] .accordion__title {
    color: var(--primary);
}

/* CONTENUTO - VERSIONE SEMPLICE */
.accordion__content[hidden] {
    display: none;
}

.accordion__content:not([hidden]) {
    display: block;
}

.accordion__content .text--md {
    padding: 0 var(--space-5) var(--space-5) var(--space-5);
    color: var(--text-muted);
    line-height: 1.7;
}

    .accordion__content .text--md p {
        margin-bottom: var(--space-4);
    }
/* ======================================================== */
/* == STYLES FOR THE TABS SECTION == */
/* ======================================================== */

/* Main container for the tabs component */
.tabs {
}

/* Tab navigation bar */
.tabs__nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
}

/* Individual tab button */
.tabs__link {
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

    .tabs__link:hover {
        color: var(--text);
    }

    .tabs__link.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }

/* Tab content area */
.tabs__content {
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius);
}

.tabs__pane {
    display: none; /* Hidden by default */
}

    .tabs__pane.active {
        display: block; /* Show only the active panel */
    }

/* Improved styles for the table */
.table--specs {
    width: 100%;
    border-collapse: collapse;
}

.table__cell {
    padding: var(--space-4);
    /*    border: 1px solid var(--border);*/
    text-align: left;
    font-size: 1.075rem;
}

.table__cell--header {
    font-weight: 700;
    width: 30%; /* Fixed width for the specs column */
    color: var(--text);
}
/* Alternating stripes for better readability */
.table--specs tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* ======================================================== */
/* == STILI PER LA SEZIONE SPECIFICATIONS (TABELLA CORRETTA) == */
/* ======================================================== */

#specifications .container {
    padding-top: var(--space-5); /* Spazio sopra la tabella */
}

#specifications .tabs__content {
    border: 1px solid var(--border);
    border-radius: var(--radius); /* Bordi arrotondati sul contenitore */
    overflow: hidden; /* **CRUCIALE:** Taglia il contenuto che esce dai bordi */
    padding: 0; /* Nessun padding sul contenitore generale, lo mettiamo nelle celle */
}

/* Stili migliorati per la tabella */
#specifications .table--specs {
    width: 100%;
    border-collapse: collapse; /* Fondamentale per far funzionare i bordi delle celle */
}

#specifications .table__cell {
    padding: var(--space-4) var(--space-5); /* Padding interno a tutte le celle */
    border-bottom: 1px solid var(--border); /* Solo bordo inferiore per ogni cella */
    text-align: left;
}

#specifications .table__cell--header {
    font-weight: 700;
    width: 30%;
    color: var(--text);
}

/* Rimuovi il bordo inferiore dell'ultima riga per evitare un doppio bordo */
#specifications .table--specs tbody tr:last-child .table__cell {
    border-bottom: none;
}

/* Strisce alternate per una migliore leggibilit� */
#specifications .table--specs tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

#specifications .table--specs tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Effetto hover sulla riga intera */
}
/* ======================================================== */
/* == STILI PER USE CASES (COPIATI DA DOWNLOADS) == */
/* ======================================================== */

/* Stile per la griglia della sezione Usecases */
#usecases .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Default a 2 colonne come per i downloads */
    gap: 2rem;
}

/* Per schermi pi� piccoli di 768px (tablet e cellulari) */
@media (max-width: 768px) {
    #usecases .grid {
        grid-template-columns: 1fr; /* Passa a 1 sola colonna */
    }
}

/* Stile principale della card */
#usecases .card--download {
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Rimosso background-color da qui, sar� sul card__text-content */
}

    /* Stili per l'immagine/media all'interno della card */
    #usecases .card--download .card__media {
        position: relative;
        overflow: hidden;
        /* I bordi arrotondati saranno gestiti dal contenitore generale della card,
           ma l'immagine deve ancora coprire solo la parte superiore */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        /* Assicurati che l'altezza sia consistente per le immagini */
        height: 250px; /* Potresti voler rendere questa altezza dinamica o rimuoverla se le immagini hanno gi� una dimensione fissa */
    }

        /* Overlay/gradiente sull'immagine */
        #usecases .card--download .card__media::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(20, 20, 20, 1) 1%, transparent 75%);
            pointer-events: none;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }

        #usecases .card--download .card__media .media {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }

    /* Nuovo contenitore per il testo della card, con sfondo scuro e bordi arrotondati inferiori */
    #usecases .card--download .card__text-content {
        /*        background-color: var(--dynamic-bg-color, #352e44);*/
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        flex-grow: 1; /* Fa in modo che questo blocco occupi lo spazio rimanente */
        display: flex;
        flex-direction: column; /* Per allineare il contenuto interno */
    }

    /* Spaziatura interna per le card usecases */
    #usecases .card--download .card__body {
        padding: var(--space-5); /* es. 24px */
        background-color: rgba(20, 20, 20, 1); /*var(--dynamic-bg-color, rgba(20, 20, 20, 0.5));*/
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    /* Spazio sotto il titolo */
    #usecases .card--download .heading--md {
        margin-bottom: var(--space-2); /* es. 8px */
    }

    /* Spazio tra il blocco titolo/sottotitolo e la descrizione */
    #usecases .card--download .card__content {
        /*margin-bottom: var(--space-4);*/ /* es. 16px */
    }

    /* Footer con la descrizione (al posto di meta info e pulsante) */
    #usecases .card--download .card__footer {
        /*margin-top: 1.5rem;*/ /* Spazio sopra la descrizione, se necessario */
        /* Forse avremo bisogno di specificare il colore del testo qui se non � gi� gestito globalmente */
    }

@media (max-width: 768px) {
    .grid {
        gap: 12px;
    }
}

/* ======================================================== */
/* == STILI PER LA SEZIONE TESTIMONIALS == */
/* ======================================================== */
/* Intestazione con titolo e navigazione */
.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;
}

/* Contenitore per le frecce e i pallini */
.testimonial-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Stile base del carosello */
.testimonials-swiper {
    overflow: hidden;
}

/* Griglia interna di ogni slide */
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
}

/* Colonna sinistra per l'immagine/video */
.testimonial-media {
    position: relative;
    cursor: pointer;
}

    .testimonial-media img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

/* Bottone Play sovrapposto */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

    .play-button svg {
        width: 32px;
        height: 32px;
        color: var(--page-bg);
    }

    .play-button:hover {
        transform: translate(-50%, -50%) scale(1.1);
    }


/* Colonna destra per la card di testo */

/* ======================================================== */
/* == STILE E POSIZIONE PAGINAZIONE TESTIMONIALS == */
/* ======================================================== */

/* Seleziona il contenitore dei puntini solo nei Testimonials */
#testimonials .swiper-pagination {
    margin-top: 30px;
    /* Manteniamo queste regole per un corretto funzionamento */
    position: relative;
    z-index: 10;
    bottom: auto; /* Annulla il 'bottom' di prima */
}

/* Colore per i puntini non attivi (grigio) */
#testimonials .swiper-pagination-bullet {
    background-color: #888888;
    opacity: 1;
}

/* Colore per il puntino attivo (bianco) */
#testimonials .swiper-pagination-bullet-active {
    background-color: #FFFFFF;
}

.testimonial-card {
    /*    background-color: var(--colore-highlight);*/
    padding: var(--space-6);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.testimonial-company-logo {
    max-height: 40px;
    width: auto;
    margin-bottom: var(--space-5);
}

.testimonial-quote {
    font-size: var(--font-lg);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    margin-bottom: var(--space-5);
}

.testimonial-name {
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.testimonial-role {
    font-size: var(--font-sm);
}

/* Navigazione Swiper (Frecce e Pallini) */
.testimonial-nav .swiper-button-prev,
.testimonial-nav .swiper-button-next {
    position: static;
    margin: 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    transition: background-color 0.3s ease;
}

    .testimonial-nav .swiper-button-prev:hover,
    .testimonial-nav .swiper-button-next:hover {
        background-color: rgba(255,255,255,0.1);
    }

    .testimonial-nav .swiper-button-prev::after,
    .testimonial-nav .swiper-button-next::after {
        font-size: 1rem;
        font-weight: bold;
    }

.testimonial-nav .swiper-pagination {
    position: static;
    width: auto;
}

.testimonial-nav .swiper-pagination-bullet {
    background-color: var(--text-muted);
}

.testimonial-nav .swiper-pagination-bullet-active {
    background-color: var(--primary);
}

#testimonials .swiper-button-next svg,
#testimonials .swiper-button-prev svg {
    height: 50%;
    object-fit: contain;
    transform-origin: center;
    width: 100%;
    fill: currentColor;
    pointer-events: none;
}

@media (max-width: 768px) {
    /* Impila la griglia */
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    /* Centra il titolo e nasconde la nav in alto */
    .testimonial-header {
    }

    .testimonial-nav {
        display: none;
    }
    /* Mostra e centra la nav in basso */
    .testimonial-nav-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-4);
        margin-top: var(--space-5);
    }
        /* Stili per le frecce e i pallini in basso (identici a quelli sopra) */
        .testimonial-nav-mobile .swiper-button-prev, .testimonial-nav-mobile .swiper-button-next, .testimonial-nav-mobile .swiper-pagination {
            position: static;
            margin: 0;
            width: 44px;
            height: 44px;
            background-color: var(--surface);
            border: 1px solid var(--border);
            border-radius: 50%;
            color: var(--text);
        }

            .testimonial-nav-mobile .swiper-button-prev::after, .testimonial-nav-mobile .swiper-button-next::after {
                font-size: 1rem;
                font-weight: bold;
            }

        .testimonial-nav-mobile .swiper-pagination {
            width: auto;
        }
}

/* ======================================================== */
/* == STILI PER I PALLINI (PAGINAZIONE) DEI TESTIMONIALS == */
/* ======================================================== */

/* Stile per il contenitore dei pallini (sia su desktop che su mobile) */
.testimonial-nav .swiper-pagination,
.testimonial-nav-mobile .swiper-pagination {
    position: static;
    width: auto;
}

/* Stile per ogni singolo pallino */
.testimonials-swiper .swiper-pagination-bullet {
    background-color: var(--text-muted); /* Colore del pallino grigio */
    opacity: 0.7;
    margin: 0 4px !important; /* Spazio tra i pallini */
    transition: background-color 0.3s ease;
}

/* Stile per il pallino attivo (quello della slide che stai vedendo) */
.testimonials-swiper .swiper-pagination-bullet-active {
    background-color: var(--primary); /* Colore del pallino bianco */
    opacity: 1;
}

/* ======================================================== */
/* == STYLES FOR THE TESTIMONIALS PAGINATION DOTS == */
/* ======================================================== */

/* This targets the container for the dots */
.testimonial-nav .swiper-pagination {
    position: static;
    width: auto;
}

/* This styles each individual dot */
.testimonials-swiper .swiper-pagination-bullet {
    background-color: var(--text-muted); /* Color for inactive dots */
    opacity: 0.7;
    margin: 0 var(--space-2) !important; /* Adds space between dots */
    transition: background-color 0.3s ease;
}

/* This styles the active dot (for the current slide) */
.testimonials-swiper .swiper-pagination-bullet-active {
    background-color: var(--primary); /* Color for the active dot */
    opacity: 1;
}

/* =============================================== */
/* == CORREZIONE FRECCE SWIPER TESTIMONIALS == */
/* =============================================== */

/* Gira l'icona della freccia "prev" per farla puntare a sinistra */
/* ======================================================== */
/* == SOLUZIONE FINALE FRECCE SWIPER == */
/* ======================================================== */

/* Seleziona l'icona SOLO quando � DENTRO il pulsante "prev"
   e la ruota di 180 gradi. */
.swiper-button-prev .swiper-navigation-icon {
    transform: rotate(180deg);
}

/* Opzionale ma consigliato: Assicura che l'altra freccia sia sempre dritta */
.swiper-button-next .swiper-navigation-icon {
    transform: rotate(0deg);
}
/* ======================================================== */
/* == STILI COMPLETI PER LA SEZIONE OTHERPAGES == */
/* ======================================================== */

/* Stile base e allineamento bottone */
#otherpages .card {
    background-color: rgba(20, 20, 20, 1);
    border: 1px solid var(--border);
    height: 100%;
    transition: all 0.4s ease;
    position: relative;
    padding-bottom: 80px;
}

    #otherpages .card:hover {
        background-color: rgba(255, 255, 255, 0.05);
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, 0.05);
    }

/* Stili per l'immagine e il suo effetto hover */
#otherpages .card__media {
    position: relative;
    overflow: hidden;
}

    #otherpages .card__media .media--image {
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    #otherpages .card__media::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0);
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
        transition: background-color 0.3s ease;
        pointer-events: none;
    }

#otherpages .card:hover .card__media::before {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Stili per il corpo della card */
#otherpages .card__body {
    padding: var(--space-5);
}

    #otherpages .card__body .heading--md {
        margin-bottom: var(--space-3);
    }

/* Posizionamento fisso del bottone in basso */
#otherpages .card .btn {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
}

/* Stile responsive */
@media (max-width: 768px) {
    #otherpages .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}
/* ======================================================== */
/* == STILI MIGLIORATI PER LA SEZIONE NUMBERS == */
/* ======================================================== */

#numbers .numbers-container {
    display: flex;
    flex-direction: column; /* Impila gli elementi verticalmente */
    align-items: center; /* Centra tutto orizzontalmente */
    gap: 5rem; /* Aumenta drasticamente lo spazio verticale tra i numeri */
}

#numbers .number-item {
    text-align: center;
}

/* Sovrascrive la dimensione del font solo in questa sezione per un look d'impatto */
#numbers .heading--xxl {
    font-size: 8rem; /* <-- Dimensione molto grande per il numero */
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-4);
    color: var(--primary); /* Usa il colore primario (bianco) per massima visibilit� */
}

/* Stile per la descrizione sotto il numero */
#numbers .text--md {
    font-size: var(--font-lg); /* Un po' pi� grande per leggibilit� */
    color: var(--text-muted); /* Colore pi� tenue per non competere con il numero */
}

/* Responsive per mobile */
@media (max-width: 768px) {
    #numbers .heading--xxl {
        font-size: 5rem; /* Riduci un po' la dimensione su schermi piccoli */
    }

    #numbers .numbers-container {
        gap: 4rem;
    }
}
/* ======================================================== */
/* == STILI PER LE CARD DELLA SEZIONE NUMBERS == */
/* ======================================================== */

/* Stile per le card all'interno della griglia #numbers */
#numbers .card {
    /* 1. Sfondo completamente trasparente */
    background-color: transparent;
    /* 2. Applichiamo il pattern a righe sottili usando il tuo colore --border */
    background-image: repeating-linear-gradient( -45deg, var(--border), var(--border) 1px, transparent 1px, transparent 20px /* <-- MAGGIORE SPAZIO TRA LE RIGHE (da 10px a 20px) */
    );
    /* 3. Manteniamo le altre propriet� per la struttura */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6);
    height: 100%;
    animation: scroll-diagonal-lines 30s linear infinite; /* 30s = velocit�, linear = costante, infinite = per sempre */
}

/* Stile per il numero grande */
#numbers .heading--xxl {
    color: var(--primary);
    margin-bottom: var(--space-2);
}

/* Stile per il titolo intermedio */
#numbers .heading--md {
    color: var(--text);
    margin-bottom: var(--space-3);
}

/* Stile per la descrizione */
#numbers .text--muted {
    color: var(--text-muted);
}
/* ============================================== */
/* == ANIMAZIONE PER LE LINEE DI BACKGROUND == */
/* ============================================== */
/* --- 3. Creazione e animazione del "velo" di sfondo (solo orizzontale) --- */
#numbers .numbers-container::before {
    content: '';
    position: absolute;
    z-index: 1;
    /* Lo rendiamo enorme orizzontalmente, ma l'altezza pu� essere normale se il pattern � solo orizzontale */
    top: 0; /* Rimane in alto */
    left: 0; /* Inizia da sinistra */
    width: 200%; /* Larghezza doppia per lo scorrimento infinito */
    height: 100%; /* Altezza normale, o 200% se il pattern ha anche variazioni verticali */
    /* Applichiamo qui il pattern */
    background-image: repeating-linear-gradient( -45deg, /* Il gradiente � ancora diagonale, ma il movimento sar� orizzontale */
    var(--border), var(--border) 1px, transparent 1px, transparent 20px );
    /* Applichiamo qui l'animazione */
    animation: scroll-horizontal-lines 30s linear infinite; /* Usa la nuova animazione */
}

@keyframes scroll-horizontal-lines {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-200px, 0); /* <-- PROBLEMA: movimento solo orizzontale */
    }
}

/* ======================================================== */
/* == STILI PER BOTTONE "FANTASMA ILLUMINATO" == */
/* ======================================================== */

/* Stile di base (non-hover) */
.btn--neon-glow {
    display: inline-block;
    padding: 18px 35px;
    border-radius: 26px;
    font-size: var(--font-xl);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    user-select: none;
    cursor: pointer;
    /* --- STILE "FANTASMA ILLUMINATO" --- */
    background: transparent;
    color: #008cff; /* Testo colorato di blu neon */
    border: 2px solid #008cff; /* Bordo pi� spesso e colorato */
    /* Glow iniziale molto leggero */
    /* Transizione fluida per tutti gli stati */
    transition: all 0.3s ease-in-out;
}

    /* Stile per hover e focus (l'effetto che ti piace) */
    .btn--neon-glow:hover,
    .btn--neon-glow:focus {
        /* Si riempie di colore e il testo diventa bianco */
        background: #008cff;
        color: #ffffff;
        border-color: #008cff; /* Il bordo rimane blu */
        /* Il glow si intensifica notevolmente */
        box-shadow: 0 0 20px #008cff, 0 0 40px #008cff, 0 0 80px #008cff;
        /* Leggero sollevamento per dare feedback */
        transform: translateY(-2px);
    }
/* Regola di base per tutti gli elementi con sfondo dinamico */
.js-dynamic-bg {
    /* Ora il colore di base � letto dalla variabile impostata da JavaScript */
    background-color: var(--dynamic-bg-color);
    transition: background-color 0.3s ease; /* Aggiungiamo una transizione per l'hover */
}

/* Esempio di regola :hover per le tue card 'benefit' */
.card--benefit.js-dynamic-bg:hover {
    /* Qui puoi mettere il colore che preferisci per l'hover */
    background-color: rgba(255, 255, 255, 0.1);
}

/* Esempio di regola :hover per il tuo popup 'hover-content' */
.hover-content.js-dynamic-bg:hover {
    /* Metti un altro colore se vuoi */
    background-color: rgba(var(--colore-highlight-rgb), 0.25);
}

/* ======================================================== */
/* == STILI PER IL CAROSELLO MOCKUP == */
/* ======================================================== */

/* Contenitore principale dello slider */
.mockup-swiper {
    width: 100%;
    padding-bottom: 60px;
    position: relative;
}

    /* ======================================================== */
    /* == STILI PER DIDASCALIA MOCKUP CAROUSEL == */
    /* ======================================================== */

    /* Modifica lo stile della slide per contenere mockup + testo in colonna */
    .mockup-swiper .swiper-slide {
        display: flex;
        flex-direction: column; /* Mette gli elementi uno sopra l'altro */
        justify-content: center;
        align-items: center;
    }

/* Stile per il testo della didascalia */
.mockup-caption {
    text-align: center;
    padding: 0 20px; /* Evita che il testo tocchi i bordi su mobile */
    margin-top: 32px; /* Spazio tra il mockup e la didascalia */
    max-width: 700px; /* Larghezza massima per una buona leggibilit� */
    color: var(--text-muted);
    font-size: var(--font-md);
    line-height: 1.6;
}

/* Stile per il testo della didascalia */
.mockup-caption {
    text-align: center;
    padding: 0 20px; /* Evita che il testo tocchi i bordi su mobile */
    margin-top: 32px; /* Spazio tra il mockup e la didascalia */
    max-width: 1200px; /* Larghezza massima per una buona leggibilit� */
    color: var(--text-muted);
    font-size: var(--font-md);
    line-height: 1.6;
}

/* Assicura che la paginazione e le frecce siano visibili */
.mockup-swiper .swiper-pagination-bullet-active {
    background-color: var(--primary, #FFFFFF);
}

.mockup-swiper .swiper-button-next,
.mockup-swiper .swiper-button-prev {
    color: var(--primary, #FFFFFF);
    /* Riduciamo leggermente le frecce per non essere troppo invasive */
    --swiper-navigation-size: 34px;
}


.mockup-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    width: 100%;
    padding: var(--spacing-xxl) var(--spacing-sm);
    background-color: var(--surface);
    overflow: hidden;
    margin: 0 auto; /* Centra la sezione rispetto al body */
    box-sizing: border-box; /* Include padding nel calcolo della larghezza */
}

.macbook-mockup-container {
    position: relative;
    max-width: 1200px;
    width: 58%;
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* Centra il contenitore all'interno della sezione */
}

.macbook-mockup-img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
    aspect-ratio: 16/9;
}

.macbook-screen-img {
    position: absolute;
    top: 2%;
    left: 11%;
    width: 78%;
    height: 96%;
    object-fit: cover;
    z-index: 5;
}






@media (max-width: 480px) {
    .content-wrapper {
        /*min-height: 50vh !important;*/ /* Even smaller on very small screens */
        padding: 20px;
    }
}



/* TEMPORARY FIX - Hide the problematic menu */
/*@media (max-width: 900px) {
    .mobile-nav:not(.is-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateX(100%) !important;
    }*/

/* Prevent horizontal scrolling */
/*html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
}*/




.accordion__content:not([hidden]) {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== INSIGHTS HERO SPECIFIC STYLES ===== */
#insights-hero.hero-section {
    /* Section-level styles */
    min-height: 90vh;
}

#insights-hero .hero-content {
    text-align: left;
    padding-top: 80px;
    padding-bottom: 80px;
}

#insights-hero .hero-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: 1.5rem;
    max-width: 800px;
}

#insights-hero .glass-text {
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 2rem;
}

#insights-hero .creator-info {
    margin-bottom: 2rem;
}

#insights-hero .btn--fill-effect {
    /* Custom button styles for insights hero only */
    background-color: var(--colore-highlight);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #insights-hero .hero-content {
        text-align: left;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #insights-hero .creator-info {
        justify-content: left;
    }

    #insights-hero .glass-text {
        text-align: left;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ======================================================== */
/* == CAROSELLO NEWS RESPONSIVE == */
/* ======================================================== */

#news-hero .hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 25px
}

.news-carousel-swiper {
    width: 100%;
    padding: 0 15px 60px 15px;
}

.news-card {
    height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-radius: 16px;
}

.news-card-media {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-label {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
}

.news-label-text {
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 5px 12px;
    text-transform: uppercase;
    border-radius: 30px;
    font-family: system-ui, -apple-system, sans-serif;
    display: inline-block;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.3) 100%);
}

.news-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: white;
    z-index: 3;
}

.news-title {
    margin-bottom: 10px;
    color: white;
    font-size: 1.1rem;
}

.news-button {
    color: white;
    border-color: white;
}

/* Media queries per altezze responsive */
@media (max-width: 768px) {
    .news-card {
        height: 250px;
    }

    .news-content {
        padding: 15px;
    }

    .news-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .news-card {
        height: 220px;
    }

    .news-content {
        padding: 20px;
    }

    .news-title {
        font-size: 1.2rem;
    }

    .news-label-text {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
}

/* Stili per la data */
.news-date {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
}

.news-date-text {
    background: rgba(0, 0, 0, 1);
    backdrop-filter: blur(10px);
    color: white;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 12px;
    font-family: system-ui, -apple-system, sans-serif;
    display: inline-block;
}

/* Per l'opzione 1 con contenitore */
.news-top-info {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Responsive */
@media (max-width: 768px) {
    .news-date-text {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    .news-label-text {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
}


/* ===== HERO SECTION RESPONSIVE ===== */

@media (max-width: 1024px) {
    #news-hero .grid--2cols {
        gap: 40px;
    }

    #news-hero .hero-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    #news-hero {
        min-height: auto !important;
        padding: 60px 20px;
    }

        #news-hero .grid--2cols {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        #news-hero .content-cell {
            order: 2;
            text-align: left;
        }

        #news-hero .image-cell {
            order: 1;
            width: 100%;
            display: flex;
            justify-content: flex-start;
        }

        #news-hero .hero-title {
            font-size: 2rem;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        #news-hero .creator-info {
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: flex-start;
        }

        #news-hero .creator-info__logo {
            width: 50px;
            height: 50px;
        }

        #news-hero .creator-info__name {
            font-size: 1rem;
        }

        #news-hero .news-hero-media {
            width: 100%;
            max-width: 500px;
        }

        #news-hero .text,
        #news-hero .text--lg,
        #news-hero .text--md {
            text-align: left;
        }

        #news-hero .btn--fill-effect {
            justify-content: flex-start;
        }
}

@media (max-width: 480px) {
    #news-hero {
        padding: 40px 15px;
    }

        #news-hero .hero-title {
            font-size: 2rem;
        }

        #news-hero .text--lg {
            font-size: 1.1rem;
        }

        #news-hero .time-tag {
            font-size: 0.9rem;
            padding: 4px 10px;
        }

        #news-hero .btn--fill-effect {
            font-size: 1rem;
            padding: 12px 24px;
        }
}

/* ===== GALLERY PREVIEW RESPONSIVE ===== */

@media (max-width: 768px) {
    #news-hero + .section .container-main {
        margin-top: 20px;
    }

    #news-hero + .section img {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    #news-hero + .section .heading--xl {
        font-size: 1.5rem !important;
        text-align: left;
    }

    #news-hero + .section img {
        width: 45px;
        height: 45px;
    }
}

/* Wrapper che simula il padding del container-main */
.news-carousel-container {
    padding-left: calc((100vw - min(1100px, 92vw)) / 2);
    padding-right: 20px; /* Spazio per le frecce di navigazione */
    overflow: hidden;
}

/* Swiper normale senza centratura */
.news-carousel-swiper .swiper-wrapper {
    justify-content: flex-start; /* Allinea a sinistra */
}

.news-carousel-swiper .swiper-slide {
    width: 300px; /* Larghezza fissa delle card */
}

/* Responsive - mantieni l'allineamento */
@media (max-width: 1200px) {
    .news-carousel-container {
        padding-left: 4vw; /* Stesso padding del container-main */
    }
}

@media (max-width: 768px) {
    .news-carousel-container {
        padding-left: 20px;
    }

    .news-carousel-swiper .swiper-slide {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .news-carousel-container {
        padding-left: 15px;
    }

    .news-carousel-swiper .swiper-slide {
        width: 260px;
    }
}

/* Fix definitivo per le immagini news */
.news-card-media .media--image[alt=" "] {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    outline: none !important;
}

/* Assicurati che il contenitore non abbia bordi */
.news-card-media {
    overflow: hidden;
    border-radius: 0px;
}


/* Cases carousel come Partners */
#cases .partner-swiper {
    position: relative;
    padding-bottom: 50px;
    margin-bottom: -50px;
}

    /* RIMUOVI tutto questo per Cases */
    #cases .partner-swiper::before,
    #cases .partner-swiper::after {
        display: none;
    }

    /* E usa invece i gradienti GLOBALI gi� esistenti */
    /* RIMUOVI TUTTI i gradienti esistenti */
    .partner-swiper::before,
    .partner-swiper::after,
    #cases .partner-swiper::before,
    #cases .partner-swiper::after,
    #partners .partner-swiper::before,
    #partners .partner-swiper::after {
        display: none;
    }

/* Aggiungi gradienti PULITI */
.partner-swiper {
    position: relative;
    padding: 20px 0 50px 0;
}

    .partner-swiper::before {
        content: "";
        position: absolute;
        top: 20px;
        left: 0;
        width: 15%;
        height: calc(100% - 70px); /* 100% - top(20px) - bottom(50px) */
        background: linear-gradient(to right, var(--page-bg), transparent);
        z-index: 10;
        pointer-events: none;
    }

    .partner-swiper::after {
        content: "";
        position: absolute;
        top: 20px;
        right: 0;
        width: 15%;
        height: calc(100% - 70px);
        background: linear-gradient(to left, var(--page-bg), transparent);
        z-index: 10;
        pointer-events: none;
    }

#cases .partner-swiper .swiper-slide {
    width: 55%;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    #cases .partner-swiper .swiper-slide:not(.swiper-slide-active) {
        opacity: 0.5;
        transform: scale(0.95);
    }

    #cases .partner-swiper .swiper-slide.swiper-slide-active {
        opacity: 1;
        transform: scale(1);
    }

/* Fix FORZATO - gradient sempre visibile */
#cases .content-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    border-radius: 20px;
    pointer-events: none; /* Permette click attraverso */
}

#cases .video-container {
    z-index: 1;
}

#cases .content-text {
    z-index: 3;
}



/* Fix per video COME SFONDO */
#cases .video-container {
    position: absolute !important; /* Deve essere absolute */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important; /* SOTTO il contenuto */
}

#cases .content-text {
    position: relative !important;
    z-index: 3 !important; /* SOPRA il video */
}

#cases .event-tag {
    position: absolute !important;
    top: 32px !important;
    right: 32px !important;
    z-index: 4 !important; /* SOPRA tutto */
}


/* Fix per contenuto testuale NON tagliato */
#cases .partner-swiper .swiper-slide {
    overflow: visible !important; /* Slide non taglia il contenuto */
    align-items: stretch !important;
}

#cases .content-wrapper {
    min-height: 600px; /* Altezza minima garantita */
}

#cases .content-text {
    overflow: visible !important; /* Testo pu� uscire se necessario */
    max-height: none !important; /* Rimuovi limiti di altezza */
}



/* Versione senza scroll - contenuto si adatta */
#cases .content-text {
    overflow: visible;
    max-height: none;
    flex: 1; /* Occupa spazio disponibile */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#cases .glass-text {
    flex: 1; /* Il testo occupa spazio rimanente */
    max-height: 200px; /* Altezza massima per il testo */
}
/* Resto del tuo CSS esistente per video e content */

/* ======================================================== */
/* RESPONSIVE TABLET */
/* ======================================================== */

/* ======================================================== */
/* RESPONSIVE LAPTOP LARGE */
/* ======================================================== */

@media (max-width: 1366px) {
    #cases .partner-swiper .swiper-slide {
        width: 60%;
    }

    #cases .content-wrapper {
        min-height: 500px;
    }
}

@media (max-width: 1024px) {
    #cases .partner-swiper .swiper-slide {
        width: 65%;
    }

    #cases .content-wrapper {
        min-height: 400px;
    }

    #cases .glass-title {
        font-size: 2rem;
    }

    #cases .glass-text {
        font-size: 1rem;
    }
}

@media (max-width: 900px) {
    #cases .partner-swiper .swiper-slide {
        width: 70%;
    }

    #cases .content-wrapper {
        min-height: 400px;
        padding: 1.75rem;
    }

    #cases .glass-title {
        font-size: 1.6rem;
    }
}

/* Nel responsive */
@media (max-width: 768px) {
    #cases .partner-swiper .swiper-slide {
        height: auto !important; /* Altezza in base al contenuto */
        min-height: 500px; /* Altezza minima su mobile */
    }

    #cases .content-wrapper {
        min-height: 500px; /* Altezza minima su mobile */
    }

    #cases .content-text {
        overflow: visible !important;
        max-height: none !important;
    }
}
/* Responsive Cases - Layout verticale con scroll */
@media (max-width: 768px) {
    #cases .partner-swiper .swiper-slide {
        width: 90%;
        height: 80vh; /* Usa l'altezza dello schermo */
        max-height: 600px;
    }

    #cases .content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 1.5rem;
        overflow-y: auto; /* CAMBIA: auto  visible */
    }

    #cases .event-tag {
        position: relative;
        top: auto;
        right: auto;
        margin-bottom: 1rem;
        align-self: flex-start;
    }

    #cases .video-container {
        position: relative;
        width: 100%;
        height: 180px;
        margin-bottom: 1rem;
        flex-shrink: 0; /* Non si riduce */
    }

    #cases .content-text {
        width: 100%;
        margin-top: 0;
        flex: 1; /* Occupa spazio rimanente */
    }
}
/* Nel responsive */
@media (max-width: 768px) {
    #cases .video-container {
        position: absolute !important; /* Rimane absolute */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important; /* Riempie tutto il container */
        margin-bottom: 0 !important; /* Rimuovi il margin */
    }

    #cases .content-text {
        position: relative !important;
        z-index: 3 !important;
    }
}

@media (max-width: 480px) {
    #cases .glass-title {
        font-size: 1.6rem;
    }

    #cases .glass-text {
        font-size: .8rem;
    }
}

@media (max-width: 480px) {
    #cases .partner-swiper .swiper-slide {
        height: 75vh;
        max-height: 500px;
    }

    #cases .content-wrapper {
        padding: 1.25rem;
    }

    #cases .video-container {
        height: 150px;
    }

    /* AGGIUNGI QUESTA RIGA: */
    #cases .content-text {
        overflow-y: visible; /* Fix per testo che esce */
    }
}

.triplets-swiper .swiper-slide {
    width: 190px;
    /*    height: 450px;*/
}

/* Stile opzionale per dare un po' di spazio sotto al carosello per i "pallini" di paginazione */
.triplets-swiper {
    padding-bottom: 50px;
}

    /* Rende i pallini di paginazione e le frecce di un colore pi� visibile */
    .triplets-swiper .swiper-pagination-bullet-active {
        background-color: #ffffff;
    }

    .triplets-swiper .swiper-button-next,
    .triplets-swiper .swiper-button-prev {
        color: #ffffff;
    }

#cases .swiper-wrapper {
    padding-left: 100px !important;
}

.glass-card-hero {
    background: rgba(20, 20, 30, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 40px;
    color: #f0f0f0;
    overflow: hidden;
    margin-top: 0px !important;
}

.hero-content-event-covince {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--space-6) 0;
}

/* Nuova classe identica a media--image ma senza aspect-ratio */
.media--image-no-ratio {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

.grid--3cols {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

/* Parallax effect */
.parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Grid a 3 colonne */
.grid--3cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

/* Glass card hero per questa sezione */
.glass-card-hero {
    background: rgba(20, 20, 30, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Responsive per mobile */
@media (max-width: 768px) {

    .glass-card-hero {
        padding: 20px;
    }

    .grid--3cols {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .hidewhenmobile {
        display: none;
    }

    .parallax-section {
        background-attachment: scroll; /* Disabilita parallax su mobile per performance */
    }
}

@media (max-width: 480px) {
    .glass-card-hero {
        padding: 20px;
    }
}


@media (max-width: 360px) {
    .glass-card-hero {
        padding: 20px;
    }
}

/* ======================================================== */
/* HELP SECTION HEIGHT FIX */
/* ======================================================== */

.responsive-help-section {
    height: auto !important; /* RIMUOVE l'altezza fissa */
    min-height: 800px; /* Altezza minima per desktop */
    background-image: url(/images/spacebackground.jpg) !important;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 80px 0; /* Spaziatura verticale */
}

    /* Container principale */
    .responsive-help-section .container-main {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100% !important; /* Usa min-height invece di height */
        position: relative !important;
        z-index: 2 !important;
    }

    /* Card principale */
    .responsive-help-section .glass-card-hero {
        border-radius: 20px !important;
        width: 100% !important;
        background: rgba(20, 20, 30, 0.85) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        margin: 20px 0 !important;
    }

    /* Griglia delle card */
    .responsive-help-section .grid--3cols {
        gap: 20px !important;
        align-items: stretch; /* Allinea l'altezza delle card */
    }

    /* Singola card */
    .responsive-help-section .card {
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        height: auto !important; /* Altezza automatica */
        display: flex;
        flex-direction: column;
    }

    .responsive-help-section .card__body {
        text-align: left !important;
        /*        padding: 25px !important;*/
        flex: 1; /* Fa espandere il corpo per occupare spazio disponibile */
        display: flex;
        flex-direction: column;
    }

    .responsive-help-section .card-actions {
        margin-top: auto; /* Spinge i bottoni in fondo */
        padding-top: 20px;
    }

/* ======================================================== */
/* MOBILE RESPONSIVE */
/* ======================================================== */

@media (max-width: 1024px) {
    .responsive-help-section {
        min-height: 700px;
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .responsive-help-section {
        min-height: auto !important; /* Altezza automatica su mobile */
        height: auto !important;
        padding: 40px 0 !important;
    }

        .responsive-help-section .glass-card-hero {
            padding: 25px !important;
            margin: 15px 0 !important;
        }

        .responsive-help-section .grid--3cols {
            grid-template-columns: 1fr !important; /* Una colonna su mobile */
            gap: 15px !important;
        }

        .responsive-help-section .card__body {
            /*            padding: 20px !important;*/
            text-align: left !important; /* Centra il testo su mobile */
        }

        .responsive-help-section .card-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }

            .responsive-help-section .card-actions .btn {
                width: 100% !important;
                margin: 0 !important;
                text-align: center;
                justify-content: center;
                max-width: 100%;
            }

            .responsive-help-section .card-actions p {
                margin: 0 !important;
                width: 100%;
            }
}

@media (max-width: 480px) {
    .responsive-help-section {
        padding: 30px 0 !important;
    }

        .responsive-help-section .glass-card-hero {
            padding: 20px !important;
        }

        /*        .responsive-help-section .card__body {
            padding: 15px !important;
        }*/

        .responsive-help-section .heading--xl {
            font-size: 1.8rem !important;
            margin-bottom: 30px !important;
        }
}

/* Per schermi molto alti */
@media (min-height: 1000px) {
    .responsive-help-section {
        min-height: 900px;
    }
}

/* Per schermi molto piccoli in altezza */
@media (max-height: 600px) {
    .responsive-help-section {
        min-height: 600px;
        padding: 40px 0;
    }
}


.responsive-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.hero-responsive-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 25px;
    border: 2px solid white;
    background: transparent;
    color: white;
    transition: all 0.3s ease;
    text-align: center;
}

    .hero-responsive-btn:hover {
        background: white;
        color: #000;
    }

/* MOBILE - STESSO COMPORTAMENTO DEL BLOCCO PRECEDENTE */
@media (max-width: 768px) {
    .responsive-hero-buttons {
        flex-direction: column;
        gap: 12px;
    }


    .hero-responsive-btn {
        width: 100%;
        margin: 0;
        text-align: center;
        justify-content: center;
        padding: 14px 20px;
    }

    .btn.btn--fill-effect {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-responsive-btn {
        padding: 12px 18px;
        font-size: 0.9rem;
    }

    .btn.btn--fill-effect {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .hero-responsive-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .btn.btn--fill-effect {
        width: 100%;
    }
}

/* ======================================================== */
/* RESPONSIVE MULTIDEVICE IMAGE - CLASS SPECIFICA */
/* ======================================================== */

.multidevice-card-body {
    padding: 100px 0 !important;
}

.responsive-multidevice-img {
    width: 70% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .responsive-multidevice-img {
        width: 100% !important;
    }

    .multidevice-card-body {
        padding: 60px 0 !important;
    }
}

@media (max-width: 480px) {
    .multidevice-card-body {
        padding: 40px 0 !important;
    }
}

/* ======================================================== */
/* HERO BUTTONS - REMOVE MARGIN ONLY */
/* ======================================================== */

.responsive-hero-buttons .btn.btn--fill-effect {
    margin: 0 !important;
    /* Tutto il resto rimane come definito nella classe originale */
}

/* MOBILE - Mantieni il comportamento responsive */
@media (max-width: 768px) {
    .responsive-hero-buttons .btn.btn--fill-effect {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

#hero-section {
    height: 100%;
}

.hero-section.video-hero {
    min-height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #292d33;
}

.hero-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

.hero-text-column {
    flex: 0 0 40%;
    background-color: #292d33;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 150px 100px;
}

.hero-innter-container {
    width: 100%;
}

.hero-section .hero-title {
    color: #ffffff;
    margin-bottom: 20px;
    margin-top: 0px;
}

.hero-section h5 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.hero-section .paragraph-text {
    margin-bottom: 20px;
    color: #ffffff;
}

.hero-section .paragraph-text-large {
    margin-bottom: 30px;
    color: #ffffff;
}

.hero-video-column {
    flex: 0 0 60%;
    background-color: #292d33;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 150px;
}

.hero-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .hero-section.video-hero {
        min-height: auto;
        padding-top: 80px;
    }

    .hero-container {
        flex-direction: column;
        height: auto;
    }

    .hero-text-column {
        flex: 1;
        padding: 60px 40px;
        order: 1;
    }

    .hero-video-column {
        flex: 1;
        padding: 0px 40px 80px 40px;
        order: 2;
    }

    .hero-video-wrapper {
        height: 400px;
    }
}

/* Mobile (480px - 767px) */
@media screen and (max-width: 767px) {
    .hero-section.video-hero {
        min-height: auto;
        padding-top: 100px;
    }

    .hero-text-column {
        padding: 40px 20px;
    }

    .hero-video-column {
        padding: 0px 20px 60px 20px;
    }

    .hero-video-wrapper {
        height: 300px;
    }
}

/* Mobile piccolo (fino a 479px) */
@media screen and (max-width: 479px) {
    .hero-section.video-hero {
        min-height: auto;
        padding-top: 80px;
    }

    .hero-text-column {
        padding: 30px 15px;
    }

    .hero-video-column {
        padding: 0px 15px 40px 15px;
    }

    .hero-video-wrapper {
        height: 250px;
    }
}



#goals .circle-wrapper {
    position: relative;
    display: grid;
    place-items: flex-end;
    /*    max-width: 450px;*/
    width: 100%;
}

    /* Immagine circolare */
    #goals .circle-wrapper .circle {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        object-fit: cover;
        position: relative;
        z-index: 2; /* Sta sopra lo sfondo */
    }



/* Sezione con video di sfondo - VERSIONE CORRETTA */
#multi-device {
    position: relative; /* Contesto per il posizionamento assoluto del video */
    min-height: 750px; /* Usa min-height invece di height */
    overflow: hidden; /* Evita che il video esca */
    display: flex;
    align-items: center; /* Centra verticalmente il contenuto */
    justify-content: center; /* Centra orizzontalmente il contenuto */
}

    /* Contenitore del video - deve essere ABSOLUTE per stare dietro */
    #multi-device .video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* Dietro il contenuto */
    }

    /* Video stesso */
    #multi-device .video-bg {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Copre tutto lo spazio */
    }

    /* Overlay del video per leggibilit� */
    #multi-device .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #000000 0%, rgba(0,0,0,0.15) 30%);
        z-index: 1; /* Sopra il video ma sotto il testo */
    }

    /* Contenitore principale del contenuto - VERSIONE CORRETTA */
    #multi-device .container-main {
        position: relative; /* Importante: rendilo relative */
        z-index: 2; /* Sopra il video e l'overlay */
        width: min(1100px, 92vw); /* Mantieni la larghezza originale */
        margin: 0 auto; /* Centra orizzontalmente */
        color: white; /* Assicurati che il testo sia leggibile */
        text-align: center; /* Allineamento centrale */
        /* Rimuovi padding se necessario */
        padding: 40px 0; /* Aggiungi un po' di padding verticale */
    }

    /* Centra l'immagine multidevice */
    #multi-device .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }

    /* Specifico per il testo */
    #multi-device .heading--xl {
        color: white;
        /*        margin-bottom: 30px;*/
    }

    #multi-device .text--md {
        color: rgba(255, 255, 255, 0.9);
        max-width: 800px;
        /*        margin-left: auto;*/
        margin-right: auto;
        margin-bottom: 40px !important; /* Forza il margin */
        text-align: left;
    }

    /* Specifico per il bottone */
    #multi-device .btn--fill-effect {
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
    }

        #multi-device .btn--fill-effect:hover {
            background-color: rgba(255, 255, 255, 0.3);
            color: white;
        }

    /* Assicurati che l'immagine sia responsive */
    #multi-device .responsive-multidevice-img {
        max-width: 800px;
        width: 100%;
        height: auto;
    }


/* Hero section block */
.hero-block {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.5)), var(--hero-bg-color, #292e33);
}

.hero-block__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-block__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.5));
    z-index: 1;
}

.hero-block__container {
    position: relative;
    z-index: 2;
}

.hero-block--regular .hero-block__container {
    padding-top: 120px;
    padding-bottom: 120px;
}

.hero-block--compact .hero-block__container {
    padding-top: 80px;
    padding-bottom: 80px;
}

.hero-block__grid {
    align-items: center;
    gap: 40px;
}

.hero-block__subtitle {
    color: var(--hero-title-color, #ffffff);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-block__title {
    color: var(--hero-text-color, #ffffff);
}

.hero-block__description {
    color: var(--hero-text-color, #ffffff);
    max-width: 680px;
}
/* Media section block */
.media-block {
    background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.5)), var(--media-bg, #292e33);
}

.media-block__container {
    margin-top: 80px;
}

.media-block__title {
    color: var(--media-text, #ffffff);
}

.media-block__description {
    color: var(--media-highlight, #ffffff);
    margin-bottom: 2rem;
}

.media-block__grid {
    gap: 32px;
    align-items: center;
}

.media-block__card-body {
    margin-top: 12px;
}

.media-block__card-title {
    color: var(--media-text, #ffffff);
}

.media-block__card-description {
    color: var(--media-highlight, #ffffff);
}
.media-block__grid--variant {
    align-items: center;
}

.media-block__media-col,
.media-block__content-col {
    width: 100%;
}

.media-block__subtitle {
    color: var(--media-highlight, #ffffff);
    margin-bottom: 1rem;
}

.media-block__text-panel {
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.media-block__media-video {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
}

.media-block--left .media-block__media-col { order: 0; }
.media-block--left .media-block__content-col { order: 1; }
.media-block--right .media-block__media-col { order: 1; }
.media-block--right .media-block__content-col { order: 0; }

.media-block--left .media-block__content-col {
    display: flex;
    align-items: stretch;
}

.media-block--left .media-block__text-panel {
    width: 100%;
}

.media-block--right .media-block__media-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.media-block--right .media-block__media-video {
    width: 100%;
    max-width: 720px;
}

.media-block__empty {
    width: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: 12px;
    color: var(--media-highlight, #ffffff);
    background: rgba(255,255,255,0.04);
}
.media-block--full-banner .media-block__container {
    margin-top: 56px;
    margin-bottom: 24px;
}

.media-block__full-banner {
    position: relative;
}

.media-block__full-banner-media {
    width: 100%;
}

.media-block__full-banner-image,
.media-block__full-banner-video {
    width: 100%;
    min-height: clamp(340px, 42vw, 560px);
    object-fit: cover;
}

.media-block__full-banner-panel {
    position: relative;
    margin-top: -110px;
    width: min(66%, 760px);
    background: var(--org-surface, #ffffff);
    color: var(--org-text, #0f1f67);
    padding: clamp(22px, 3vw, 42px);
    box-shadow: 0 16px 40px rgba(15, 31, 103, 0.1);
    z-index: 2;
}

.media-block--full-banner .media-block__title,
.media-block--full-banner .media-block__description,
.media-block--full-banner .media-block__subtitle {
    color: var(--org-title, #0f1f67);
}

.media-block--full-banner .media-block__description {
    margin-bottom: 0.9rem;
}

.media-block__inline-link {
    color: var(--org-title, #0f1f67);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
}

@media (max-width: 992px) {
    .media-block__full-banner-panel {
        margin-top: 16px;
        width: 100%;
    }
}

/* News Featured List */
.section--news-featured-list {
    border-left: 0;
    background-color: var(--news-section-bg, var(--org-bg));
    --news-section-bg: var(--org-bg);
    --news-title-color: var(--org-title);
    --news-text-color: var(--org-text);
    --news-container-bg: var(--org-surface);
    --news-wrap-pt: var(--org-space-section-y);
    --news-wrap-pb: var(--org-space-section-y);
    --news-header-gap: 20px;
    --news-header-mb: 36px;
    --news-grid-gap: calc(var(--org-space-gap) * 2);
    --news-cards-gap: calc(var(--org-space-gap) * 1.9);
    --news-card-image-h: var(--org-card-media-h);
    --news-card-min-h: 560px;
    --news-card-image-mb: 28px;
    --news-card-title-mb: 16px;
    --news-card-description-mb: 8px;
    --news-list-item-py: 20px;
    --news-list-gap: 22px;
    --news-small-item-w: 70px;
    --news-small-item-h: var(--org-item-sm-h);
    --news-image-radius: var(--org-radius);
    --news-button-radius: var(--org-radius);
}

.section--news-featured-list .news-featured-wrap {
    /* padding-top: var(--news-wrap-pt);
    padding-bottom: var(--news-wrap-pb);
    background-color: var(--news-container-bg); */
}

.section--news-featured-list .news-featured-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--news-header-mb);
    gap: var(--news-header-gap);
}

.section--news-featured-list .news-featured-title {
    margin: 0;
    font-size: clamp(2.2rem, 3.5vw, 3.5rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--news-title-color);
}

.section--news-featured-list .news-all-link {
    border: 1px solid rgba(27, 42, 112, 0.45);
    color: var(--news-title-color);
    text-decoration: none;
    border-radius: var(--news-button-radius);
    padding: 12px 20px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    white-space: nowrap;
    background: rgba(255,255,255,0.55);
}

.section--news-featured-list .news-featured-grid {
    display: grid;
    grid-template-columns: 2fr 1.15fr;
    gap: var(--news-grid-gap);
    align-items: start;
}

.section--news-featured-list .news-featured-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--news-cards-gap);
    align-items: stretch;
}

.section--news-featured-list .news-card {
    height: 100%;
    min-height: var(--news-card-min-h);
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-radius: 0;
}

.section--news-featured-list .news-card-image {
    height: var(--news-card-image-h);
    border-radius: var(--news-image-radius);
    background-color: #c8c8c8;
    background-image: var(--news-card-image, none);
    background-size: cover;
    background-position: center;
    margin-bottom: var(--news-card-image-mb);
}

.section--news-featured-list .news-card-title {
    margin: 0 0 var(--news-card-title-mb) 0;
    font-size: clamp(1.2rem, 2.45vw, 1.55rem);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--news-title-color);
}

.section--news-featured-list .news-card-description {
    margin: 0 0 var(--news-card-description-mb) 0;
    font-size: .95rem;
    line-height: 1.48;
    color: var(--news-text-color);
    flex: 1 1 auto;
}

.section--news-featured-list .news-card-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section--news-featured-list .news-read-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--news-title-color);
    text-decoration: underline;
    margin-bottom: 16px;
    font-size: 1.05rem;
    line-height: 1.35;
}

.section--news-featured-list .news-read-link::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 1px solid currentColor;
    border-radius: 999px;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.section--news-featured-list .news-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--news-title-color);
    text-decoration: none;
    border: 1px solid rgba(27, 42, 112, 0.45);
    border-radius: var(--news-button-radius);
    padding: 11px 18px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    background: rgba(255,255,255,0.55);
    width: fit-content;
}

.section--news-featured-list .news-contact-link::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 1px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.section--news-featured-list .news-featured-list {
    margin-top: 1px;
}

.section--news-featured-list .news-list-item {
    display: grid;
    grid-template-columns: var(--news-small-item-w) 1fr;
    gap: var(--news-list-gap);
    align-items: center;
    padding: var(--news-list-item-py) 0;
    border-top: 1px solid rgba(27, 42, 112, 0.2);
}

.section--news-featured-list .news-list-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.section--news-featured-list .news-list-thumb {
    width: var(--news-small-item-w);
    height: var(--news-small-item-h);
    background-color: #c7c7c7;
    background-image: var(--news-list-thumb-image, none);
    background-size: cover;
    background-position: center;
    border-radius: var(--news-image-radius);
}

.section--news-featured-list .news-list-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.32;
    font-weight: 600;
    text-decoration: none;
    color: var(--news-title-color);
}

@media (max-width: 1200px) {
    .section--news-featured-list .news-featured-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 900px) {
    .section--news-featured-list .news-featured-wrap {
        padding-top: 34px;
        padding-bottom: 40px;
    }

    .section--news-featured-list .news-featured-cards {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .section--news-featured-list .news-card-image {
        height: 220px;
        margin-bottom: 18px;
    }

    .section--news-featured-list .news-card {
        min-height: 0;
    }

    .section--news-featured-list .news-card-title {
        font-size: clamp(1.75rem, 7vw, 2.2rem);
    }

    .section--news-featured-list .news-list-title {
        font-size: 1.25rem;
    }

    .section--news-featured-list .news-card-description,
    .section--news-featured-list .news-read-link,
    .section--news-featured-list .news-contact-link {
        font-size: 1rem;
    }

    .section--news-featured-list .news-all-link {
        font-size: 0.95rem;
        padding: 10px 14px;
    }
}

/* Divider Block */
.section--divider-block {
    --divider-bg-image: none;
    --divider-bg-color: var(--org-bg);
    --divider-title-color: var(--org-title);
    --divider-text-color: var(--org-text);
    --divider-title-size: clamp(2.4rem, 4.2vw, 4rem);
    --divider-text-size: clamp(1.25rem, 1.5vw, 1.95rem);
    --divider-wrap-pt: 56px;
    --divider-wrap-pb: 56px;
    --divider-wrap-min-h: 420px;
    --divider-top-gap: 20px;
    --divider-top-mb: 34px;
    --divider-copy-max-w: 760px;
    --divider-cta-mt: 10px;
    background-color: var(--divider-bg-color);
    background-image: var(--divider-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Override generic section background reset for divider blocks */
#dynamic-sections .section-block-wrapper > .section.section--divider-block {
    background-color: var(--divider-bg-color);
    background-image: var(--divider-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section--divider-block .divider-wrap {
    padding-top: var(--divider-wrap-pt);
    padding-bottom: var(--divider-wrap-pb);
    min-height: var(--divider-wrap-min-h);
}

.section--divider-block .divider-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--divider-top-gap);
    align-items: start;
    margin-bottom: var(--divider-top-mb);
}

.section--divider-block .divider-title {
    margin: 0 0 12px 0;
    font-size: var(--divider-title-size);
    line-height: 1.05;
    font-weight: 800;
    color: var(--divider-title-color);
}

.section--divider-block .divider-subtitle,
.section--divider-block .divider-description {
    max-width: var(--divider-copy-max-w);
    line-height: 1.45;
    margin: 0 0 10px 0;
    font-size: var(--divider-text-size);
    color: var(--divider-text-color);
}

.section--divider-block .divider-cta {
    margin-top: var(--divider-cta-mt);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .section--divider-block .divider-top {
        grid-template-columns: 1fr;
    }

    .section--divider-block .divider-cta {
        width: fit-content;
    }
}

/* Cards Duo Overlay */
.section--cards-duo-overlay {
    --cards-duo-bg: var(--org-bg);
    --cards-duo-wrap-pt: 16px;
    --cards-duo-wrap-pb: 16px;
    --cards-duo-gap: 10px;
    --cards-duo-min-h: 360px;
    --cards-duo-image-fallback: #b9b9bc;
    --cards-duo-content-color: #ffffff;
    --cards-duo-content-px: 30px;
    --cards-duo-content-pt: 24px;
    --cards-duo-content-pb: 40px;
    --cards-duo-content-pr: 64px;
    --cards-duo-desc-color: rgba(255, 255, 255, 0.92);
    --cards-duo-arrow-border: rgba(255, 255, 255, 0.8);
    --cards-duo-arrow-hover-bg: rgba(255, 255, 255, 0.16);
    background-color: var(--cards-duo-bg);
}

.section--cards-duo-overlay .cards-duo-overlay-wrap {
    padding-top: var(--cards-duo-wrap-pt);
    padding-bottom: var(--cards-duo-wrap-pb);
    padding-left: 86px;
    padding-right: 86px;

}

.section--cards-duo-overlay .cards-duo-overlay-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cards-duo-gap);
    height: 600px;
}

.section--cards-duo-overlay .duo-card {
    position: relative;
    min-height: var(--cards-duo-min-h);
    background-color: var(--cards-duo-image-fallback);
    background-image: var(--duo-card-image, none);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border-radius: 0;
}

.section--cards-duo-overlay .duo-card-content {
    position: relative;
    z-index: 2;
    padding: var(--cards-duo-content-pt) var(--cards-duo-content-pr) var(--cards-duo-content-pb) var(--cards-duo-content-px);
    color: var(--cards-duo-content-color);
    width: 100%;
}

.section--cards-duo-overlay .duo-card-title {
    margin: 0 0 10px 0;
    color: var(--cards-duo-content-color);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
}

.section--cards-duo-overlay .duo-card-description {
    margin: 0;
    color: var(--cards-duo-desc-color);
    max-width: 88%;
    font-size: 0.95rem;
    line-height: 1.45;
}

.section--cards-duo-overlay .duo-card-arrow {
    position: absolute;
    right: 26px;
    bottom: 24px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--cards-duo-arrow-border);
    color: var(--cards-duo-content-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.section--cards-duo-overlay .duo-card-arrow:hover {
    transform: translateX(2px);
    background-color: var(--cards-duo-arrow-hover-bg);
    border-color: var(--cards-duo-content-color);
}

@media (max-width: 980px) {
    .section--cards-duo-overlay .cards-duo-overlay-grid {
        grid-template-columns: 1fr;
    }

    .section--cards-duo-overlay .duo-card {
        min-height: 320px;
    }
}

/* Organisation List Cards */
.section--organisation-list-cards {
    --org-list-bg-color: var(--org-bg);
    --org-list-title-color: var(--org-title);
    --org-list-text-color: var(--org-text);
    --org-list-wrap-mt: 80px;
    --org-list-layout-gap: 24px;
    --org-list-panel-bg: rgba(0, 0, 0, 0.25);
    --org-list-panel-border: rgba(255,255,255,0.1);
    --org-list-panel-radius: 16px;
    --org-list-panel-padding: 16px;
    --org-list-item-color: rgba(255,255,255,0.88);
    --org-list-item-border: rgba(255,255,255,0.08);
    --org-content-panel-bg: rgba(0, 0, 0, 0.2);
    --org-content-panel-border: rgba(255,255,255,0.08);
    --org-content-panel-radius: 16px;
    --org-content-panel-padding: 18px;
    background: linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22)), var(--org-list-bg-color);
}

.section--organisation-list-cards .org-list-cards-wrap {
    margin-top: var(--org-list-wrap-mt);
}

.section--organisation-list-cards .org-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: var(--org-list-layout-gap);
    align-items: start;
}

.section--organisation-list-cards .org-list-panel {
    background: var(--org-list-panel-bg);
    border: 1px solid var(--org-list-panel-border);
    border-radius: var(--org-list-panel-radius);
    padding: var(--org-list-panel-padding);
}

.section--organisation-list-cards .org-list-panel .heading {
    color: var(--org-list-title-color);
}

.section--organisation-list-cards .org-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.section--organisation-list-cards .org-list__item {
    color: var(--org-list-item-color);
    padding: 6px 2px;
    border-bottom: 1px solid var(--org-list-item-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.section--organisation-list-cards .org-list__item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.section--organisation-list-cards .org-list__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.section--organisation-list-cards .org-list__link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section--organisation-list-cards .org-list__link:hover {
    text-decoration: underline;
}

.section--organisation-list-cards .org-list__action {
    flex-shrink: 0;
}

.section--organisation-list-cards .org-content-panel {
    background: var(--org-content-panel-bg);
    border: 1px solid var(--org-content-panel-border);
    border-radius: var(--org-content-panel-radius);
    padding: var(--org-content-panel-padding);
}

.section--organisation-list-cards .org-content-panel .heading {
    color: var(--org-list-title-color);
}

.section--organisation-list-cards .org-content-panel .text--md,
.section--organisation-list-cards .org-content-panel .text--muted {
    color: var(--org-list-text-color);
}

.section--organisation-list-cards .org-cards-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.section--organisation-list-cards .org-card-body {
    padding: 18px;
}

@media (max-width: 900px) {
    .section--organisation-list-cards .org-layout {
        grid-template-columns: 1fr;
    }

    .section--organisation-list-cards .org-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Info Block */
.section--info {
    --info-bg-color: var(--org-bg);
    --info-title-color: var(--org-title);
    --info-text-color: var(--org-text);
    --info-wrap-mt: 80px;
    --info-description-mb: 2rem;
    --info-grid-gap: 32px;
    --info-card-padding: 24px;
    --info-card-radius: 20px;
    --info-fallback-radius: 16px;
    --info-fallback-mt: 12px;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), var(--info-bg-color);
}

.section--info .info-wrap {
    margin-top: var(--info-wrap-mt);
}

.section--info .info-title {
    color: var(--info-title-color);
}

.section--info .info-description {
    color: var(--info-text-color);
    margin-bottom: var(--info-description-mb);
}

.section--info .info-grid {
    gap: var(--info-grid-gap);
}

.section--info .info-card {
    padding: var(--info-card-padding);
    border-radius: var(--info-card-radius);
}

.section--info .info-card-title,
.section--info .info-card-text {
    color: var(--info-title-color);
}

.section--info.section--info--split-text .info-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
}

.section--info .info-fallback-image {
    max-width: 100%;
    border-radius: var(--info-fallback-radius);
    margin: var(--info-fallback-mt) 0;
}

.section--info .info-card-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
}

/* Post-it Feed */
.section--postit-feed {
    --postit-feed-wrap-pt: 20px;
    --postit-feed-wrap-pb: 28px;
    --postit-feed-subtitle-size: 0.95rem;
    --postit-feed-subtitle-opacity: 0.75;
    --postit-feed-title-size: clamp(1.45rem, 2.2vw, 2rem);
    --postit-feed-grid-gap: 16px;
    --postit-feed-item-border: rgba(10, 26, 92, 0.22);
    --postit-feed-item-radius: 12px;
    --postit-feed-item-bg: rgba(255, 241, 128, 0.2);
    --postit-feed-item-padding: 14px 14px 12px 14px;
}

.section--postit-feed .postit-feed-wrap {
    padding-top: var(--postit-feed-wrap-pt);
    padding-bottom: var(--postit-feed-wrap-pb);
}

.section--postit-feed .postit-feed-subtitle {
    margin: 0 0 6px 0;
    font-size: var(--postit-feed-subtitle-size);
    opacity: var(--postit-feed-subtitle-opacity);
}

.section--postit-feed .postit-feed-title {
    margin: 0 0 18px 0;
    font-size: var(--postit-feed-title-size);
    line-height: 1.2;
}

.section--postit-feed .postit-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--postit-feed-grid-gap);
}

.section--postit-feed .postit-feed-item {
    border: 1px solid var(--postit-feed-item-border);
    border-radius: var(--postit-feed-item-radius);
    padding: var(--postit-feed-item-padding);
    background: var(--postit-feed-item-bg);
}

.section--postit-feed .postit-feed-date {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    opacity: 0.75;
}

.section--postit-feed .postit-feed-item-title {
    margin: 0 0 8px 0;
    font-size: 1rem;
    line-height: 1.25;
}

.section--postit-feed .postit-feed-item-text {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.42;
    white-space: pre-wrap;
}

.section--postit-feed .postit-feed-link {
    display: inline-block;
    margin-top: 10px;
    text-decoration: underline;
    font-size: 0.88rem;
}

.section--postit-feed .postit-feed-empty {
    margin: 0;
    opacity: 0.8;
}

/* Post-it Content Blocks */
.section--postit-content-blocks {
    --postit-content-wrap-pt: 20px;
    --postit-content-wrap-pb: 28px;
    --postit-content-subtitle-size: 0.95rem;
    --postit-content-subtitle-opacity: 0.75;
    --postit-content-title-size: clamp(1.45rem, 2.2vw, 2rem);
    --postit-content-list-gap: 16px;
    --postit-content-item-border: rgba(10, 26, 92, 0.18);
    --postit-content-item-radius: 12px;
    --postit-content-item-padding: 14px;
    --postit-content-item-bg: rgba(255, 255, 255, 0.35);
}

.section--postit-content-blocks .postit-content-wrap {
    padding-top: var(--postit-content-wrap-pt);
    padding-bottom: var(--postit-content-wrap-pb);
}

.section--postit-content-blocks .postit-content-subtitle {
    margin: 0 0 6px 0;
    font-size: var(--postit-content-subtitle-size);
    opacity: var(--postit-content-subtitle-opacity);
}

.section--postit-content-blocks .postit-content-title {
    margin: 0 0 18px 0;
    font-size: var(--postit-content-title-size);
    line-height: 1.2;
}

.section--postit-content-blocks .postit-content-list {
    display: flex;
    flex-direction: column;
    gap: var(--postit-content-list-gap);
}

.section--postit-content-blocks .postit-content-item {
    border: 1px solid var(--postit-content-item-border);
    border-radius: var(--postit-content-item-radius);
    padding: var(--postit-content-item-padding);
    background: var(--postit-content-item-bg);
}

.section--postit-content-blocks .postit-content-item-title {
    margin: 0 0 8px 0;
    font-size: 1.03rem;
    line-height: 1.25;
}

.section--postit-content-blocks .postit-content-item-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.section--postit-content-blocks .postit-content-item-image,
.section--postit-content-blocks .postit-content-item-video {
    display: block;
    margin-top: 12px;
    max-width: 100%;
    border-radius: 10px;
}

/* Cards Block */
.section--cards {
    --cards-bg-color: var(--org-bg);
    --cards-title-color: var(--org-title);
    --cards-text-color: var(--org-text);
    /* --cards-wrap-mt: 80px; */
    --cards-subtitle-mb: 0.5rem;
    --cards-description-mb: 2rem;
    --cards-card-body-padding: 20px;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), var(--cards-bg-color);
}

.section--cards .cards-wrap {
    margin-top: var(--cards-wrap-mt);
}

.section--cards .cards-title,
.section--cards .cards-subtitle {
    color: var(--cards-title-color);
}

.section--cards .cards-subtitle {
    margin-bottom: var(--cards-subtitle-mb);
}

.section--cards .cards-description {
    color: var(--cards-text-color);
    margin-bottom: var(--cards-description-mb);
}

.section--cards .cards-card-body {
    padding: var(--cards-card-body-padding);
}

.section--cards-training {
    --cards-training-media-bg: var(--org-bg);
    --cards-training-title-color: var(--cards-training-title, var(--cards-title-color));
    --cards-training-text-color: var(--cards-training-text, var(--cards-text-color));
    --cards-training-heading-color: var(--cards-training-heading, var(--cards-training-title-color));
    --cards-training-link-color: var(--cards-training-link, var(--cards-training-title-color));
    --cards-training-contact-color: var(--cards-training-contact, var(--cards-training-title-color));
    --cards-training-badge-bg: var(--cards-title-color);
    --cards-training-badge-text: var(--org-surface);
    --cards-training-contact-border-color: var(--cards-training-contact-border, var(--cards-training-contact-color));
    background: var(--cards-bg-color);
}

.section--cards-training .cards-wrap {
    padding-bottom: 18px;
}

.section--cards-training .cards-title {
    margin: 0 0 28px;
    line-height: 1.06;
    color: var(--cards-training-heading-color);
}

.section--cards-training .cards-training-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 360px));
    justify-content: space-between;
    gap: 28px;
    align-items: start;
}

.section--cards-training .cards-training-card {
    display: flex;
    flex-direction: column;
    color: var(--cards-title-color);
    width: 100%;
    max-width: 360px;
    min-height: 452px;
}

.section--cards-training .cards-training-media {
    position: relative;
    /* background: var(--cards-training-media-bg); */
    height: 204px;
    overflow: hidden;
}

.section--cards-training .cards-training-media .media--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section--cards-training .cards-training-badge {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    padding: 10px 14px;
    background: var(--cards-training-badge-bg);
    color: var(--cards-training-badge-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.section--cards-training .cards-training-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    flex: 1;
}

.section--cards-training .cards-training-title {
    margin: 0;
    color: var(--cards-training-title-color);
    font-size: clamp(1.65rem, 1.45vw, 2.75rem);
    line-height: 1.05;
    max-width: 95%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section--cards-training .cards-training-text {
    margin: 0;
    color: var(--cards-training-text-color);
    font-size: 0.98rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section--cards-training .cards-training-actions {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.section--cards-training .cards-training-link {
    color: var(--cards-training-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.section--cards-training .cards-training-link::before {
    content: "⊙";
    margin-right: 8px;
    font-size: 0.9em;
}

.section--cards-training .cards-training-contact {
    border-color: var(--cards-training-contact-border-color);
    color: var(--cards-training-contact-color);
}

@media (max-width: 1280px) {
    .section--cards-training .cards-title {
        margin-bottom: 20px;
    }

    .section--cards-training .cards-training-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
        justify-content: stretch;
        gap: 22px;
    }

    .section--cards-training .cards-training-card {
        max-width: none;
        min-height: 430px;
    }

    .section--cards-training .cards-training-media {
        height: 190px;
    }
}

@media (max-width: 720px) {
    .section--cards-training .cards-training-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .section--cards-training .cards-training-card {
        min-height: 0;
    }
}

/* CTA Block */
.section--cta {
    --cta-bg-color: var(--org-bg);
    --cta-title-color: var(--org-title);
    --cta-text-color: var(--org-text);
    --cta-wrap-pt: 80px;
    --cta-wrap-pb: 80px;
    --cta-description-max-w: 720px;
    background: linear-gradient(135deg, var(--cta-bg-color) 0%, rgba(0,0,0,0.35) 100%);
}

.section--cta .cta-wrap {
    padding-top: var(--cta-wrap-pt);
    padding-bottom: var(--cta-wrap-pb);
    text-align: center;
}

.section--cta .cta-title {
    color: var(--cta-title-color);
}

.section--cta .cta-description {
    color: var(--cta-text-color);
    margin: 1rem auto 2rem;
    max-width: var(--cta-description-max-w);
}

/* Slider Block */
.section--slider {
    --slider-bg-color: var(--org-bg);
    --slider-title-color: var(--org-title);
    --slider-text-color: var(--org-text);
    --slider-description-mb: 24px;
    --slider-media-h: 400px;
    background: var(--slider-bg-color);
}

.section--slider .slider-title {
    color: var(--slider-title-color);
}

.section--slider .slider-subtitle,
.section--slider .slider-description {
    color: var(--slider-text-color);
}

.section--slider .slider-description {
    margin-bottom: var(--slider-description-mb);
}

.section--slider .slider-media {
    height: var(--slider-media-h);
}

.section--slider .slider-media-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Shorts Block */
.section--shorts {
    --shorts-bg-color: var(--org-bg);
    --shorts-title-color: var(--org-title);
    --shorts-text-color: #ffffff;
    --shorts-wrap-pt: 40px;
    --shorts-wrap-pb: 20px;
    --shorts-header-mb: 26px;
    --shorts-grid-gap: 12px;
    --shorts-card-radius: 0;
    --shorts-card-min-h: 380px;
    background: var(--shorts-bg-color);
}

.section--shorts .shorts-wrap {
    padding-top: var(--shorts-wrap-pt);
    padding-bottom: var(--shorts-wrap-pb);
}

.section--shorts .shorts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--shorts-header-mb);
}

.section--shorts .shorts-title {
    margin: 0;
    color: var(--shorts-title-color);
}

.section--shorts .shorts-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(27, 42, 112, 0.45);
    color: var(--shorts-title-color);
    text-decoration: none;
    border-radius: var(--org-radius);
    padding: 10px 14px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
    background: rgba(255,255,255,0.55);
}

.section--shorts .shorts-all-link::before {
    content: "";
    width: 11px;
    height: 11px;
    border: 1px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.section--shorts .shorts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--shorts-grid-gap);
}

.section--shorts .shorts-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--shorts-card-radius);
    border: 1px solid rgba(27, 42, 112, 0.2);
    min-height: var(--shorts-card-min-h);
    aspect-ratio: 9 / 16;
    background: #cfcfd2;
}

.section--shorts .shorts-media,
.section--shorts .shorts-iframe,
.section--shorts .shorts-media-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.section--shorts .shorts-iframe {
    border: 0;
}

.section--shorts .shorts-media-fallback {
    background-color: #c8c8cb;
    background-image: var(--shorts-thumb, none);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section--shorts .shorts-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.18) 34%, rgba(0, 0, 0, 0) 58%);
    pointer-events: none;
    z-index: 2;
}

.section--shorts .shorts-card-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 22px 20px;
}

.section--shorts .shorts-card-text {
    margin: 0;
    padding-top: 14px;
    border-top: 2px solid rgba(255,255,255,0.6);
    color: var(--shorts-text-color);
    font-weight: 700;
    line-height: 1.42;
    font-size: clamp(0.95rem, 1vw, 1.05rem);
}

@media (max-width: 1200px) {
    .section--shorts .shorts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .section--shorts .shorts-grid {
        grid-template-columns: 1fr;
    }

    .section--shorts .shorts-all-link {
        font-size: 0.88rem;
    }
}

/* Quick controls: one place to tune spacing + typography for dynamic sections. */
#dynamic-sections {
    /* Layout */
    --ds-page-pad-x: 40px;
    --ds-section-y: 64px;
    --ds-gap-lg: 32px;
    --ds-gap-md: 24px;
    --ds-gap-sm: 16px;

    /* Extra white space around content (no forced background color) */
    --ds-content-pad-x: 28px;
    --ds-content-pad-y: 24px;
    --ds-frame-x: 80px;
    --ds-frame-y: 60px;

    /* Type */
    --ds-news-title: clamp(2.2rem, 3.5vw, 3.5rem);
    --ds-news-card-title: clamp(1.2rem, 2.45vw, 1.55rem);
    --ds-news-text: 0.95rem;
    --ds-shorts-title: clamp(1.60rem, 2.60vw, 2.6rem);
    --ds-shorts-text: clamp(0.95rem, 1vw, 1.05rem);

    --ds-cards-title: clamp(2rem, 3vw, 3.2rem);
    --ds-cards-card-title: clamp(1.05rem, 1.4vw, 1.3rem);

    --ds-training-title: clamp(2rem, 3vw, 3.2rem);
    --ds-training-card-title: clamp(1.05rem, 1.4vw, 1.3rem);
    --ds-training-text: 0.98rem;

    --ds-media-title: clamp(2rem, 3vw, 3.2rem);
    --ds-media-text: 1rem;

    --ds-parallax-title: clamp(2.4rem, 4vw, 4.5rem);
    --ds-parallax-text: clamp(1.05rem, 1.5vw, 1.8rem);
}

#dynamic-sections .section-block-wrapper .container-main {
    padding-left: var(--ds-page-pad-x);
    padding-right: var(--ds-page-pad-x);
}

#dynamic-sections .section--news-featured-list,
#dynamic-sections .section--shorts,
#dynamic-sections .section--cards,
#dynamic-sections .section--cards-training,
#dynamic-sections .section--cards-duo-overlay,
#dynamic-sections .section--media-left,
#dynamic-sections .section--media-right,
#dynamic-sections .section--slider {
    padding-top: var(--ds-section-y);
    padding-bottom: var(--ds-section-y);
}

#dynamic-sections .section--news-featured-list {
    --news-wrap-pt: calc(var(--ds-content-pad-y) + var(--ds-frame-y));
    --news-wrap-pb: calc(var(--ds-gap-md) + var(--ds-frame-y));
    --news-header-mb: var(--ds-gap-lg);
    --news-grid-gap: var(--ds-gap-lg);
    --news-cards-gap: var(--ds-gap-md);
}

#dynamic-sections .section--shorts {
    --shorts-wrap-pt: calc(var(--ds-gap-md) + var(--ds-frame-y));
    --shorts-wrap-pb: calc(var(--ds-content-pad-y) + var(--ds-frame-y));
    --shorts-header-mb: var(--ds-gap-lg);
    --shorts-grid-gap: var(--ds-gap-sm);
}

#dynamic-sections .section--news-featured-list .news-featured-wrap,
#dynamic-sections .section--shorts .shorts-wrap,
#dynamic-sections .section--cards .cards-wrap,
#dynamic-sections .section--cards-training .cards-wrap,
#dynamic-sections .section--cards-duo-overlay .cards-duo-overlay-wrap,
#dynamic-sections .section--media-left .media-block__container,
#dynamic-sections .section--media-right .media-block__container,
#dynamic-sections .section--slider > .container-main {
    padding-left: calc(var(--ds-content-pad-x) + var(--ds-frame-x));
    padding-right: calc(var(--ds-content-pad-x) + var(--ds-frame-x));
    padding-top: var(--ds-frame-y);
    padding-bottom: var(--ds-frame-y);
}

#dynamic-sections .section--cards {
    --cards-wrap-mt: 0px;
    --cards-title-mb: var(--ds-gap-md);
    --cards-grid-gap: var(--ds-gap-md);
}

#dynamic-sections .section--cards-training {
    --cards-training-gap: var(--ds-gap-md);
}

#dynamic-sections .section--cards-training .cards-wrap {
    margin-top: 0px;
    padding-bottom: calc(var(--ds-gap-md) + var(--ds-frame-y));
}

#dynamic-sections .section--cards-duo-overlay {
    --cards-duo-wrap-pt: 0px;
    --cards-duo-wrap-pb: 0px;
}

#dynamic-sections .three-layer-parallax__copy {
    max-width: 720px;
}

#dynamic-sections .three-layer-parallax__title {
    margin-bottom: var(--ds-gap-sm);
    font-size: var(--ds-parallax-title);
}

#dynamic-sections .three-layer-parallax__description {
    margin-bottom: var(--ds-gap-md);
    font-size: var(--ds-parallax-text);
}

#dynamic-sections .section--news-featured-list .news-featured-title { 
    font-size: var(--ds-news-title); 
}

#dynamic-sections .section--news-featured-list .news-card-title { font-size: var(--ds-news-card-title); }
#dynamic-sections .section--news-featured-list .news-card-description { font-size: var(--ds-news-text); }

#dynamic-sections .section--shorts .shorts-title { font-size: var(--ds-shorts-title); }
#dynamic-sections .section--shorts .shorts-card-text { font-size: var(--ds-shorts-text); }

#dynamic-sections .section--cards .cards-title { font-size: var(--ds-cards-title); }
#dynamic-sections .section--cards .card__body .heading--md { font-size: var(--ds-cards-card-title); }

#dynamic-sections .section--cards-training .cards-title { font-size: var(--ds-training-title); }
#dynamic-sections .section--cards-training .cards-training-title { font-size: var(--ds-training-card-title); }
#dynamic-sections .section--cards-training .cards-training-text { font-size: var(--ds-training-text); }

#dynamic-sections .section--media .media-block__title { font-size: var(--ds-media-title); }
#dynamic-sections .section--media .media-block__description,
#dynamic-sections .section--media .media-block__card-description { font-size: var(--ds-media-text); }

@media (max-width: 900px) {
    #dynamic-sections {
        --ds-page-pad-x: 20px;
        --ds-section-y: 40px;
        --ds-gap-lg: 24px;
        --ds-gap-md: 16px;
        --ds-content-pad-x: 16px;
        --ds-content-pad-y: 16px;
        --ds-frame-x: 8px;
        --ds-frame-y: 8px;
    }
}



/* TEMPORARY: per-order color styling for this landing page.
   TODO: Move this block to landingpage overrule CSS when available. */
#dynamic-sections .section-block-wrapper[data-order-id="4"] {
    --order-parallax-title-color: #E6E4E5;
    
    --order-parallax-text-color: #E6E4E5;
}

#dynamic-sections .section-block-wrapper[data-order-id="5"] {
    --order-news-title-color: #0f1f67;
    --order-news-text-color: #334155;
    --order-cards-title-color: #0f1f67;
    --order-cards-text-color: #334155;
}

#dynamic-sections .section-block-wrapper[data-order-id="6"] {
    --order-duo-title-color: #ffffff;
    --order-duo-text-color: rgba(255, 255, 255, 0.92);
}

#dynamic-sections .section-block-wrapper[data-order-id="7"] {
    --cards-training-heading: #081352;
    --cards-training-title: #081352;
    --cards-training-text: #081352;

    --cards-training-link: #081352;
    --cards-training-contact: #081352;
    --cards-training-contact-border: #081352;
}

#dynamic-sections .section-block-wrapper[data-order-id="8"] {
    --order-parallax-title-color: #ffffff;
    --order-parallax-text-color: rgba(255, 255, 255, 0.9);
}

#dynamic-sections .section-block-wrapper[data-order-id="9"] {
    --cards-training-title: #081352;
    --cards-training-text: #081352;
}

#dynamic-sections .section-block-wrapper[data-order-id="10"] {
    --order-parallax-title-color: #ffffff;
    --order-parallax-text-color: rgba(255, 255, 255, 0.9);
}

#dynamic-sections .section-block-wrapper[data-order-id="12"] {
    --order-cards-title-color: #081352;
    --order-cards-text-color: #081352;
}