/* ==========================================================
   PROMOTION LAYOUT GENERICO
   Usato da home, liste e pagine informative.
   ========================================================== */
.promotion-top-zone,
.promotion-inline-zone,
.promotion-footer-zone {
    width:100%;
    position:relative;
    z-index:20;
}

.promotion-top-zone { padding:82px 16px 10px; }
.promotion-inline-zone { padding:22px 16px; }
.promotion-footer-zone { padding:18px 16px 12px; }

/* Nella home navbar e hero rimangono intatti: il top parte dopo l'hero. */
.home-promotion-top .promotion-top-zone { padding:18px 16px 10px; }
.home-promotion-mid .promotion-inline-zone { padding:4px 0 22px; }
.home-promotion-footer .promotion-footer-zone { padding:12px 16px 8px; }

.promotion-banner {
    display:block;
    margin:0 auto;
    overflow:hidden;
    border-radius:12px;
    background:rgba(0,0,0,.24);
    box-shadow:0 12px 30px rgba(0,0,0,.24);
    line-height:0;
}

.promotion-banner picture,
.promotion-banner img {
    display:block;
    width:100%;
    height:100%;
}

.promotion-banner img { object-fit:cover; }

.promotion-top-banner {
    width:min(1448px,100%);
    aspect-ratio:1448 / 180;
}

.promotion-footer-banner {
    width:min(1448px,100%);
    aspect-ratio:1448 / 160;
}

.promotion-mid-banner {
    width:min(970px,100%);
    aspect-ratio:970 / 250;
}

.promotion-side-zone {
    position:fixed;
    top:50%;
    transform:translateY(-44%);
    z-index:950;
    display:none;
    width:min(420px,21vw);
    pointer-events:none;
}

.promotion-side-zone-left { left:18px; }
.promotion-side-zone-right { right:18px; }
.promotion-side-zone .promotion-banner { pointer-events:auto; }

.promotion-side-banner {
    width:100%;
    max-width:300px;
    aspect-ratio:300 / 600;
    border-radius:16px;
    box-shadow:0 22px 55px rgba(0,0,0,.38);
}

.promotion-side-banner[data-slot="SIDE_LEFT_WIDE"],
.promotion-side-banner[data-slot="SIDE_RIGHT_WIDE"] {
    max-width:420px;
    aspect-ratio:420 / 900;
}

.promotion-background-skin {
    position:fixed;
    inset:0;
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    pointer-events:none;
    z-index:-1;
    opacity:.18;
}

.promotion-banner:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.promotion-banner:hover { filter:brightness(1.04); }

/* Le due colonne comuni compaiono soltanto con margini realmente disponibili. */
@media (min-width:1900px) {
    .promotion-side-zone { display:block; }
}

@media (max-width:767px) {
    .promotion-top-zone { padding:74px 10px 8px; }
    .home-promotion-top .promotion-top-zone { padding:14px 10px 8px; }
    .promotion-inline-zone { padding:16px 10px; }
    .home-promotion-mid .promotion-inline-zone { padding:2px 10px 16px; }
    .promotion-footer-zone,
    .home-promotion-footer .promotion-footer-zone { padding:10px 10px 6px; }

    .promotion-top-banner,
    .promotion-footer-banner {
        width:min(390px,100%);
        aspect-ratio:390 / 120;
        border-radius:9px;
    }

    .promotion-mid-banner {
        width:min(390px,100%);
        aspect-ratio:390 / 160;
        border-radius:9px;
    }

    .promotion-background-skin { opacity:.12; }
    .promotion-side-zone { display:none !important; }
}

/* ==========================================================
   HOME: la zona promozionale comincia DOPO la hero.
   I laterali vivono nel grid e diventano sticky solo quando la
   zona promozionale raggiunge il viewport: non possono coprire
   navbar o hero.
   ========================================================== */
.home-promotion-skin-area {
    position:relative;
    isolation:isolate;
    width:100%;
    overflow:clip;
}

.home-promotion-skin-area.has-promotion-background::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(180deg, rgba(3,8,13,.74) 0%, rgba(3,8,13,.82) 48%, rgba(3,8,13,.92) 100%),
        radial-gradient(circle at 78% 8%, rgba(228,33,33,.10), transparent 38%);
}

.home-promotion-background-skin {
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    opacity:.38;
}

.home-promotion-layout {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1500px);
    justify-content:center;
    align-items:start;
    width:100%;
    margin:0 auto;
}

.home-promotion-main { min-width:0; }
.home-promotion-side { display:none; min-width:0; }
.home-promotion-side-inner {
    position:sticky;
    top:24px;
    width:100%;
    padding-top:24px;
}

.home-promotion-main .home-shell {
    margin-top:0;
    padding-top:0;
}

.home-promotion-top .promotion-top-zone {
    padding:24px 22px 18px;
}

.home-promotion-mid .promotion-inline-zone {
    padding:8px 0 24px;
}

.home-promotion-footer .promotion-footer-zone {
    padding:10px 22px 14px;
}

.promotion-home-side-banner {
    width:100%;
    max-width:420px;
    aspect-ratio:420 / 900;
    border-radius:16px;
    box-shadow:0 22px 55px rgba(0,0,0,.38);
}

.promotion-home-side-banner[data-slot="SIDE_LEFT"],
.promotion-home-side-banner[data-slot="SIDE_RIGHT"] {
    max-width:300px;
    aspect-ratio:300 / 600;
}

/* Le colonne si ridimensionano insieme al viewport. Il centro può
   restringersi, ma nessun banner invade mai la sua area. */
@media (min-width:1540px) {
    .home-promotion-layout.has-promotion-sides {
        grid-template-columns:
            clamp(190px,19vw,420px)
            minmax(0,1500px)
            clamp(190px,19vw,420px);
        column-gap:clamp(12px,1.2vw,24px);
        padding:0 10px;
    }

    .home-promotion-layout.has-promotion-sides .home-promotion-side {
        display:block;
    }
}

@media (max-width:1539px) {
    .home-promotion-side { display:none !important; }
}

@media (max-width:767px) {
    .home-promotion-background-skin {
        background-position:center top;
        background-size:100% auto;
        background-repeat:repeat-y;
        opacity:.30;
    }

    .home-promotion-top .promotion-top-zone { padding:14px 10px 12px; }
    .home-promotion-mid .promotion-inline-zone { padding:4px 10px 18px; }
    .home-promotion-footer .promotion-footer-zone { padding:8px 10px 8px; }
    .home-promotion-main .home-shell { padding-left:10px; padding-right:10px; }
}

/* ==========================================================
   PAGINE PUBBLICHE COMUNI
   La skin comincia dopo la hero. Top e footer restano nel flusso;
   i laterali vivono in colonne sticky e non attraversano la hero.
   MID_CONTENT non viene richiesto né renderizzato in queste pagine.
   ========================================================== */
.public-promotion-skin-area {
    position:relative;
    isolation:isolate;
    width:100%;
    overflow:clip;
}

.public-promotion-skin-area.has-promotion-background::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(180deg, rgba(3,8,13,.76) 0%, rgba(3,8,13,.84) 52%, rgba(3,8,13,.93) 100%),
        radial-gradient(circle at 78% 8%, rgba(228,33,33,.09), transparent 38%);
}

.public-promotion-background-skin {
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    opacity:.36;
}

.public-promotion-layout {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1500px);
    justify-content:center;
    align-items:start;
    width:100%;
    margin:0 auto;
}

.public-promotion-main { min-width:0; }
.public-promotion-side { display:none; min-width:0; }
.public-promotion-side-inner {
    position:sticky;
    top:24px;
    width:100%;
    padding:24px 0 42px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.public-promotion-top .promotion-top-zone { padding:24px 22px 18px; }
.public-promotion-footer .promotion-footer-zone { padding:12px 22px 14px; }

.promotion-public-side-banner {
    width:100%;
    max-width:420px;
    aspect-ratio:420 / 900;
    border-radius:16px;
    box-shadow:0 22px 55px rgba(0,0,0,.38);
}

.promotion-public-side-banner[data-slot="SIDE_LEFT"],
.promotion-public-side-banner[data-slot="SIDE_RIGHT"] {
    max-width:300px;
    aspect-ratio:300 / 600;
}

@media (min-width:1540px) {
    .public-promotion-layout.has-promotion-sides {
        width:min(100%,2200px);
        grid-template-columns:minmax(230px,1fr) minmax(860px,1120px) minmax(230px,1fr);
        column-gap:clamp(18px,1.45vw,34px);
        padding:0 clamp(12px,1.2vw,24px);
    }

    .public-promotion-layout.has-promotion-sides .public-promotion-side {
        display:block;
    }
}

@media (min-width:1960px) {
    .public-promotion-layout.has-promotion-sides {
        grid-template-columns:minmax(360px,420px) minmax(980px,1180px) minmax(360px,420px);
    }
}

@media (max-width:1539px) {
    .public-promotion-side { display:none !important; }
}

@media (max-width:767px) {
    .public-promotion-background-skin {
        background-position:center top;
        background-size:100% auto;
        background-repeat:repeat-y;
        opacity:.28;
    }

    .public-promotion-top .promotion-top-zone { padding:14px 10px 12px; }
    .public-promotion-footer .promotion-footer-zone { padding:8px 10px 8px; }
}

/* ==========================================================
   SKIN PAGINA DETTAGLIO PISTA
   La zona promozionale parte dopo hero/navbar e termina prima
   della riga di copyright. Navbar e intestazione restano intatte.
   ========================================================== */
.track-promotion-skin-area {
    position:relative;
    isolation:isolate;
    width:100%;
    overflow:clip;
}

.track-promotion-skin-area.has-promotion-background::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(180deg, rgba(3,8,13,.70) 0%, rgba(3,8,13,.78) 38%, rgba(3,8,13,.88) 100%),
        radial-gradient(circle at 78% 8%, rgba(228,33,33,.10), transparent 38%);
}

.track-promotion-background-skin {
    position:absolute;
    inset:0;
    z-index:-2;
    background-position:center top;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    pointer-events:none;
    opacity:.42;
}

.track-promotion-layout {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1500px);
    justify-content:center;
    align-items:start;
    width:100%;
    margin:0 auto;
}

.track-promotion-main { min-width:0; }
.track-promotion-side { display:none; min-width:0; }

.promotion-track-top-zone,
.promotion-track-mid-zone,
.promotion-track-footer-zone {
    width:100%;
    position:relative;
    z-index:5;
}

.promotion-track-top-zone { padding:18px 22px 12px; }
.promotion-track-mid-zone { padding:8px 22px 26px; }
.promotion-track-footer-zone { padding:8px 22px 12px; }

.promotion-track-top-banner {
    width:min(1448px,100%);
    aspect-ratio:1448 / 180;
}

.promotion-track-mid-banner {
    width:min(970px,100%);
    aspect-ratio:970 / 250;
}

.promotion-track-footer-banner {
    width:min(1448px,100%);
    aspect-ratio:1448 / 160;
}

.promotion-track-side-banner {
    width:100%;
    max-width:300px;
    aspect-ratio:300 / 600;
}

.track-promotion-side-inner {
    position:sticky;
    top:24px;
    width:100%;
}

/* I laterali entrano nel normale grid della pagina: non sono fixed,
   non coprono il contenuto e compaiono solo quando c'è spazio reale. */
@media (min-width:1720px) {
    .track-promotion-layout.has-promotion-sides,
    .track-promotion-layout:has(.track-promotion-side .promotion-banner) {
        grid-template-columns:
            clamp(160px,10.5vw,300px)
            minmax(0,1500px)
            clamp(160px,10.5vw,300px);
        column-gap:clamp(14px,1.15vw,24px);
        padding:0 18px;
    }

    .track-promotion-layout.has-promotion-sides .track-promotion-side,
    .track-promotion-layout:has(.track-promotion-side .promotion-banner) .track-promotion-side {
        display:block;
    }
}

@media (max-width:767px) {
    .track-promotion-skin-area.has-promotion-background::before {
        background:
            linear-gradient(180deg, rgba(3,8,13,.72) 0%, rgba(3,8,13,.82) 45%, rgba(3,8,13,.90) 100%),
            radial-gradient(circle at 76% 4%, rgba(228,33,33,.10), transparent 34%);
    }

    .track-promotion-background-skin {
        background-position:center top;
        background-size:100% auto;
        background-repeat:repeat-y;
        background-attachment:scroll;
        opacity:.34;
    }

    .promotion-track-top-zone { padding:18px 10px 4px; }
    .promotion-track-mid-zone { padding:2px 10px 20px; }
    .promotion-track-footer-zone { padding:2px 10px 8px; }

    .promotion-track-top-banner,
    .promotion-track-footer-banner {
        width:min(390px,100%);
        aspect-ratio:390 / 120;
        border-radius:9px;
    }

    .promotion-track-mid-banner {
        width:min(390px,100%);
        aspect-ratio:390 / 160;
        border-radius:9px;
    }

    .track-promotion-side { display:none !important; }
}

/* ==========================================================
   FORMATI LATERALI ALTERNATIVI
   SIDE_*_WIDE è preferito dalla pagina; SIDE_* standard resta
   il fallback. I laterali sono nel flusso e seguono lo scroll
   tramite sticky, senza sovrapporsi ai contenuti centrali.
   ========================================================== */
.promotion-track-side-banner {
    width:100%;
    max-width:360px;
    aspect-ratio:300 / 600;
    border-radius:16px;
    box-shadow:0 22px 55px rgba(0,0,0,.38);
}

.promotion-track-side-banner[data-slot="SIDE_LEFT_WIDE"],
.promotion-track-side-banner[data-slot="SIDE_RIGHT_WIDE"] {
    max-width:420px;
    aspect-ratio:420 / 900;
}

.track-promotion-side-inner {
    position:sticky;
    top:18px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:18px 0 42px;
}

@media (min-width:1540px) {
    .track-promotion-layout.has-promotion-sides,
    .track-promotion-layout:has(.track-promotion-side .promotion-banner) {
        width:min(100%,2200px);
        grid-template-columns:minmax(230px,1fr) minmax(860px,1120px) minmax(230px,1fr);
        column-gap:clamp(18px,1.45vw,34px);
        padding:0 clamp(12px,1.2vw,24px);
    }

    .track-promotion-layout.has-promotion-sides .track-promotion-side,
    .track-promotion-layout:has(.track-promotion-side .promotion-banner) .track-promotion-side {
        display:block;
    }
}

@media (min-width:1960px) {
    .track-promotion-layout.has-promotion-sides,
    .track-promotion-layout:has(.track-promotion-side .promotion-banner) {
        grid-template-columns:minmax(360px,420px) minmax(980px,1180px) minmax(360px,420px);
    }
}

@media (max-width:1539px) {
    .track-promotion-side { display:none !important; }
}

/* La pagina pista deve restare pienamente utilizzabile anche senza una skin.
   In assenza di laterali il contenuto torna al layout centrale ordinario. */
.track-promotion-skin-area.no-promotion-background {
    background:transparent;
}

.track-promotion-layout.no-promotion-sides {
    display:block;
    width:100%;
    max-width:1500px;
    margin:0 auto;
    padding:0;
}

.track-promotion-layout.no-promotion-sides .track-promotion-side {
    display:none !important;
}

.track-promotion-layout.no-promotion-sides .track-promotion-main {
    width:100%;
    min-width:0;
}