/* =============================================================================
   Giro d'Italia 2026 — Template Styles
   Scope: .page-template-giroditalia-template
   Dipendenze: Bootstrap 4 (container, d-flex, ecc.) già caricato dal tema
   ============================================================================= */

/* Scroll agli anchor: lasciato al comportamento default del browser (istantaneo).
   Lo "scroll-behavior: smooth" è stato rimosso perché la curva ease-in-out dei
   browser su percorsi lunghi rendeva l'animazione lenta e "inceppata" all'avvio. */

.page-template-giroditalia-template {

    /* ── Variabili colore ──────────────────────────────────────────────────── */
    --gdoc-rosa: #fb7598;
    --gdoc-rosa-chiaro: #f5d6e4;
    --gdoc-verde: #41604e;
    --gdoc-verde-scuro: #41604e;
    --gdoc-oro: #c8b470;
    --gdoc-oro-chiaro: #c4ba7d;
    --gdoc-bianco: #ffffff;
    --gdoc-grigio: #f0ede5;
    --gdoc-testo: #2c2c2c;
    --gdoc-testo-chiaro: #ffffff;
    --gdoc-transition: 0.2s ease;

    /* ── Reset base per questa pagina ─────────────────────────────────────── */
    color: var(--gdoc-testo);
    font-family: 'Open Sans', Arial, sans-serif;

    /* Rimuove il padding aggiunto da alcuni temi sotto la navbar */
    .gdoc-main {
        overflow-x: hidden;
    }

    /* ── Utility interne ──────────────────────────────────────────────────── */
    .gdoc-uppercase {
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* ============================================================
	   1. HERO
	   ============================================================ */
    .gdoc-hero {
        position: relative;
        width: 100%;
        min-height: 680px;

        .gdoc-hero__bg {
            width: 100%;
            min-height: 680px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: var(--gdoc-verde-scuro);
            position: relative;
            overflow: hidden;
        }

        .gdoc-hero__inner {
            position: relative;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 2rem 1.5rem 2.5rem;
            min-height: 680px;

            /* Gradiente scuro per leggibilità del testo */
            &::before {
                content: '';
                position: absolute;
                inset: 0;

                pointer-events: none;
            }
        }

        .gdoc-hero__text {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-self: flex-start;
            margin-top: 3rem;

            /* Righe: display flex per tenere le parole affiancate */
            >span {
                display: flex;
                flex-wrap: wrap;
                gap: 0.25em;
                align-items: baseline;
                font-weight: 700;
                text-transform: uppercase;
                line-height: 0.85;
                letter-spacing: 0.02em;
            }

            /* Singola parola */
            .gdoc-hero__word {
                display: block;

            }

            /* Opacità a cascata: parola 1 → 4 */
            .gdoc-hero__r1 .gdoc-hero__word:nth-child(1) {
                color: rgba(255, 255, 255, 0.90);
            }

            .gdoc-hero__r1 .gdoc-hero__word:nth-child(2) {
                color: rgba(255, 255, 255, 0.80);
            }

            .gdoc-hero__r2 .gdoc-hero__word:nth-child(1) {
                color: rgba(255, 255, 255, 0.70);
            }

            .gdoc-hero__r2 .gdoc-hero__word:nth-child(2) {
                color: rgba(255, 255, 255, 0.60);
            }

            .gdoc-hero__r1 {
                font-size: clamp(2rem, 7vw, 10rem);
            }

            .gdoc-hero__r2 {
                font-size: clamp(2rem, 7vw, 10rem);
            }
        }

        .gdoc-hero__badge {
            position: absolute;
            top: -80px;
            right: -30px;
            z-index: 2;
            background-color: var(--gdoc-rosa);
            color: var(--gdoc-bianco);
            text-decoration: none;
            font-weight: 700;
            font-size: 4rem;
            text-transform: uppercase;

            text-align: center;
            padding: 0.85rem 1.1rem;
            border-radius: 50%;
            width: 340px;
            height: 340px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1;

            /* Stacking context dedicato: tiene il glow (::before z:-1) sopra al
               background rosa ma sotto al testo del bollone. */
            isolation: isolate;
            transition: transform var(--gdoc-transition);

            &:hover,
            &:focus-visible {
                transform: scale(1.03);
            }

            /* Glow rotante "luce naturale" che corre lungo il bordo.
               - conic-gradient: arco luminoso bianco-caldo che ruota
               - filter blur: ammorbidisce la luce in un alone
               - mask radiale: clippa il centro lasciando visibile solo un anello
                 attorno al bordo del bollone */
            &::before {
                content: '';
                position: absolute;
                inset: -14px;
                border-radius: inherit;
                background: conic-gradient(
                    from 0deg,
                    transparent 0deg,
                    rgba(255, 240, 190, 0) 40deg,
                    rgba(255, 248, 210, 0.85) 80deg,
                    rgba(255, 255, 245, 1) 100deg,
                    rgba(255, 248, 210, 0.85) 120deg,
                    rgba(255, 240, 190, 0) 160deg,
                    transparent 360deg
                );
                filter: blur(10px);
                /* Anello stretto, sfumato su entrambi i bordi (interno + esterno) */
                -webkit-mask: radial-gradient(circle closest-side, transparent 85%, #000 92%, transparent 100%);
                mask: radial-gradient(circle closest-side, transparent 85%, #000 92%, transparent 100%);
                animation: gdoc-badge-spin 4.4s linear infinite;
                pointer-events: none;
                z-index: -1;
                will-change: transform;
            }


            span {
                display: block;
                font-size: 2rem;
                font-weight: 700;
                margin-top: 2.4rem;
                letter-spacing: 0.04em;
            }
        }
    }

    @media (max-width: 575px) {

        .gdoc-hero,
        .gdoc-hero .gdoc-hero__bg,
        .gdoc-hero .gdoc-hero__inner {
            min-height: 480px;
        }

        .gdoc-hero .gdoc-hero__inner {
            padding: 1.25rem 1.25rem 1.5rem;
        }

        .gdoc-hero .gdoc-hero__text {
            align-self: flex-end;
        }

        .gdoc-hero .gdoc-hero__text .gdoc-hero__r1,
        .gdoc-hero .gdoc-hero__text .gdoc-hero__r2 {
            font-size: clamp(3.6rem, 9vw, 4.2rem);
        }

        .gdoc-hero .gdoc-hero__badge {
            width: 160px;
            height: 160px;
            font-size: 1.9rem;
            top: -25px;
            right: -20px;
            padding: 0.5rem 0.4rem;

            /* Glow: ricalibrato per il bollone mobile (160px) — inset più
               piccolo e percentuali del mask spostate verso l'interno,
               altrimenti l'anello cadrebbe tutto fuori dal cerchio. */
            &::before {
                inset: -8px;
                filter: blur(6px);
                -webkit-mask: radial-gradient(circle closest-side, transparent 83%, #000 91%, transparent 100%);
                mask: radial-gradient(circle closest-side, transparent 83%, #000 91%, transparent 100%);
            }

            span {
                font-size: 1.4rem;
                margin-top: 1rem;
            }
        }
    }

    /* ============================================================
	   2. INTRO LOGHI
	   ============================================================ */
    .gdoc-intro {
        background-color: var(--gdoc-bianco);
        padding: 3rem 0 2.5rem;
        text-align: center;

        .gdoc-intro__loghi {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
            margin-bottom: 1.5rem;

            img {
                max-height: 110px;
                width: auto;
                object-fit: contain;
            }

            .gdoc-intro__sep {
                font-size: 4rem;
                font-weight: 100;
                color: var(--gdoc-rosa);
                line-height: 1;
                transform: rotate(0deg);
                opacity: 0.85;
            }
        }

        .gdoc-intro__official {
            font-size: 1.6rem;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            margin-bottom: 1.2rem;
            line-height: 1.6;

            /* "OFFICIAL WINE" — testo principale */
            color: #1a1a1a;
            font-weight: 700;
            font-style: italic;

            /* Anno "2026" dentro <strong> */
            strong {
                display: block;
                color: var(--gdoc-rosa);
                font-style: normal;
                font-weight: 700;
                font-size: 1.8rem;
                letter-spacing: 0.22em;
            }
        }

        .gdoc-intro__titolo {
            font-size: clamp(2.6rem, 3vw, 3.8rem);
            font-weight: 700;
            text-transform: uppercase;
            line-height: 1.2;
            color: var(--gdoc-verde);
            margin-bottom: 0.75rem;
        }

        .gdoc-intro__testo {
            max-width: 760px;
            margin: 0 auto;
            font-size: clamp(1.7rem, 2vw, 2.2rem);
            line-height: 1.4;
            color: #000;
        }
    }

    /* ============================================================
	   3. FARE SQUADRA
	   ============================================================ */
    .gdoc-fare-squadra {
        background-color: var(--gdoc-oro-chiaro);
        padding: 3rem 0;

        .gdoc-fare-squadra__titolo {
            font-size: clamp(3.2rem, 4vw, 3.8rem);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            text-align: center;
            color: var(--gdoc-bianco);
            margin-bottom: 2.2rem;
            line-height: 1.3;
        }

        .gdoc-fare-squadra__cols {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            /*max-width: 720px;*/
            margin: 0 auto;
            text-align: center;
        }

        .gdoc-fare-squadra__col {
            h3 {
                font-size: clamp(2rem, 2.5vw, 2.2rem);
                font-weight: 700;
                text-transform: uppercase;
                color: #000;
                letter-spacing: 0.04em;
                margin-bottom: 0.4rem;
            }

            p,
            .gdoc-fare-squadra__col-testo {
                font-size: clamp(1.7rem, 2vw, 2.2rem);
                line-height: 1.3;
                color: #000;
                margin-bottom: 0;
            }

            .gdoc-fare-squadra__col-testo p:last-child {
                margin-bottom: 0;
            }
        }
    }

    /* ============================================================
	   4a. I PERCHÉ — sezione bianca (Giro d'Italia)
	   ============================================================ */
    .gdoc-perche {
        background-color: var(--gdoc-bianco);
        padding: 3rem 0 2rem;

        .gdoc-perche__titolo {
            font-size: clamp(3.2rem, 4vw, 3.8rem);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            text-align: center;
            color: var(--gdoc-verde-scuro);
            margin-bottom: 2rem;
            line-height: 1.3;
        }

        .gdoc-perche__giro {

            margin: 0 auto;

            .gdoc-perche__giro-titolo {
                font-size: clamp(2rem, 2.5vw, 2.2rem);
                font-weight: 700;
                text-transform: uppercase;
                color: var(--gdoc-verde);
                letter-spacing: 0.04em;
                margin-bottom: 0.8rem;
                text-align: center;
            }

            .gdoc-perche__giro-intro {
                font-size: clamp(1.7rem, 2vw, 2.2rem);
                line-height: 1.3;
                color: #444;
                text-align: center;
                margin: 0 auto 1.5rem;
                /*max-width: 720px;*/
            }

            .gdoc-perche__giro-sub {
                font-size: clamp(2rem, 2.5vw, 2.2rem);
                font-weight: 700;
                text-transform: uppercase;
                color: var(--gdoc-testo);
                letter-spacing: 0.05em;
                text-align: center;
                margin: 0 0 1rem;
            }

            .gdoc-perche__giro-voci {
                margin: 0;
                font-size: clamp(1.7rem, 2vw, 2.2rem);
                line-height: 1.3;
                color: #444;
                text-align: center;
            }

            .gdoc-perche__giro-voce {
                margin-bottom: 0.55rem;

                @media (max-width: 575px) {
                    margin-bottom: 0.85rem;
                }
            }

            .gdoc-perche__giro-voce dt {
                display: inline;
                font-weight: 700;
                color: var(--gdoc-testo);
                margin-right: 0.35em;

                @media (max-width: 575px) {
                    display: block;
                    margin-right: 0;
                    margin-bottom: 0.1rem;
                }
            }

            .gdoc-perche__giro-voce dd {
                display: inline;
                margin: 0;

                @media (max-width: 575px) {
                    display: block;
                }
            }
        }
    }

    /* ============================================================
	   4b. I PERCHÉ — sezione verde scuro (DOC stats)
	   ============================================================ */
    .gdoc-doc-stats {
        background-color: var(--gdoc-verde-scuro);
        padding: 3rem 0;
        color: var(--gdoc-testo-chiaro);
        text-align: center;

        h3 {
            font-size: clamp(2.6rem, 2.5vw, 3.8rem);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--gdoc-bianco);
            margin-bottom: 1.2rem;
        }

        .gdoc-doc-stats__testo {

            margin: 0 auto 1.8rem;
            font-size: clamp(1.7rem, 2vw, 2.2rem);
            line-height: 1.3;
            color: #fff;

            p {
                margin-bottom: 0.5rem;
            }
        }

        .gdoc-doc-stats__numeri {
            display: flex;
            flex-direction: column;
            gap: 0;
            align-items: center;

            p {
                font-size: clamp(1.7rem, 2vw, 2.2rem);
                font-weight: 700;

                letter-spacing: 0.06em;
                color: var(--gdoc-bianco);
                margin: 0;
                padding: 0rem 1.5rem;
                width: 100%;

                line-height: 1;




                @media (max-width: 575px) {
                    padding: 0.6rem 0.5rem;
                    font-size: 1.7rem;
                }
            }
        }
    }

    /* ============================================================
	   5. FOTO SEPARATORE
	   ============================================================ */
    .gdoc-foto-sep {
        width: 100%;
        overflow: hidden;
        line-height: 0;
        height: 480px;
        background-size: cover;
        background-position: center 50%;
        background-repeat: no-repeat;

        @media (max-width: 767px) {
            height: 220px;
        }
    }

    /* ============================================================
	   6. CONCORSO
	   ============================================================ */
    .gdoc-concorso {
        background-color: var(--gdoc-rosa);
        padding: 3.5rem 0 0;
        color: var(--gdoc-bianco);
        overflow: hidden;

        .gdoc-concorso__titolo {
            font-size: clamp(2.6rem, 3vw, 3.8rem);
            font-weight: 400;
            text-transform: uppercase;
            line-height: 1.3;
            color: var(--gdoc-bianco);
            margin-bottom: 0.6rem;
            width: 100%;

            @media (max-width: 767px) {
                text-align: center;
            }

            strong {
                font-weight: 700;
            }
        }

        .gdoc-concorso__inner {
            display: grid;
            grid-template-columns: minmax(0, 70%) auto;
            gap: 1.5rem;
            align-items: end;

            @media (max-width: 767px) {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 1.5rem;
            }
        }

        .gdoc-concorso__steps {
            padding-left: 0;
            padding-bottom: 2rem;
            margin: 0;
            list-style: none;
            counter-reset: gdoc-step;

            li {
                counter-increment: gdoc-step;
                display: flex;
                align-items: baseline;
                gap: 0.8em;
                font-size: clamp(1.7rem, 2vw, 2rem);
                line-height: 1.55;
                margin-bottom: 1rem;
                color: var(--gdoc-bianco);

                &::before {
                    content: counter(gdoc-step) ".";
                    flex-shrink: 0;
                    font-size: 1.5em;
                    font-weight: 700;
                    line-height: 1;
                    color: var(--gdoc-bianco);
                }
            }

            @media (max-width: 767px) {
                li {
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 0.3em;
                }
            }
        }

        .gdoc-concorso__cta {
            margin: 0 0 4rem;

            @media (max-width: 767px) {
                text-align: center;
                margin-bottom: 3rem;
            }
        }

        .gdoc-concorso__btn {
            display: inline-block;
            background-color: var(--gdoc-bianco);
            color: var(--gdoc-rosa);
            font-size: 1.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            text-decoration: none;
            padding: 1.2rem 3.2rem;
            border: 2px solid var(--gdoc-bianco);
            border-radius: 6px;
            line-height: 1.2;
            transition: background-color var(--gdoc-transition), color var(--gdoc-transition);

            &:hover,
            &:focus {
                background-color: transparent;
                color: var(--gdoc-bianco);
                text-decoration: none;
            }
        }

        .gdoc-concorso__immagine {
            flex-shrink: 0;
            align-self: end;
            margin-bottom: -3.5rem;

            img {
                max-width: 200px;
                width: 100%;
                height: auto;
                display: block;
                filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));

                @media (max-width: 767px) {
                    max-width: 130px;
                    margin: 0 auto;
                }
            }
        }
    }

    /* ============================================================
	   7. CARD LINK
	   ============================================================ */
    .gdoc-cards {
        background-color: var(--gdoc-bianco);
        padding: 3rem 0;

        .gdoc-cards__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;

            @media (max-width: 767px) {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            @media (min-width: 768px) and (max-width: 991px) {
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
            }
        }

        .gdoc-card {
            position: relative;
            background-color: var(--gdoc-oro-chiaro);
            color: var(--gdoc-bianco);
            text-align: center;
            overflow: hidden;
            min-height: clamp(46rem, 55vw, 58rem);
            display: flex;
            flex-direction: column;
            transition: transform var(--gdoc-transition), box-shadow var(--gdoc-transition);

            @media (max-width: 575px) {
                min-height: 44rem;
            }

            >a {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                text-decoration: none;
                color: inherit;

                &:hover {
                    text-decoration: none;
                    color: inherit;
                }
            }

            &:has(a):hover {
                transform: translateY(-3px);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
            }

            /* Body: testo sopra l'immagine */
            .gdoc-card__body {
                position: relative;
                z-index: 2;
                padding: 2.4rem 1.6rem 1.4rem;
                text-align: center;
            }


            .gdoc-card__label {
                display: inline-block;
                font-size: clamp(2.2rem, 2vw, 2.6rem);
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: var(--gdoc-bianco);
                text-decoration: underline;
                text-underline-offset: 5px;
                text-decoration-thickness: 2px;
                margin: 0 0 1.2rem;
            }

            .gdoc-card__titolo {
                font-size: clamp(2rem, 1.8vw, 2.2rem);
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.02em;
                color: var(--gdoc-bianco);
                line-height: 1.3;
                margin: 0;
            }

            /* Immagine full-width / full-height (tutte le varianti con <img>) */
            .gdoc-card__img {
                position: absolute;
                inset: 0;
                z-index: 0;
                line-height: 0;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    display: block;
                    transition: transform 0.45s ease;
                }
            }

            &:hover .gdoc-card__img img {
                transform: scale(1.04);
            }

            /* ----- Variante: immagine a tutta card ----- */
            &.gdoc-card--immagine_sfondo {
                background-color: transparent;

                .gdoc-card__bg {
                    position: absolute;
                    inset: 0;
                    background-size: cover;
                    background-position: center;
                    z-index: 0;
                }
            }

            /* ----- Variante: verde (Newsletter) ----- */
            &.gdoc-card--verde {
                background-color: var(--gdoc-verde);
            }

            /* ----- Variante: senza immagine ----- */
            &.gdoc-card--no-image .gdoc-card__body {
                padding: 2.4rem 1rem;
                margin: auto 0;
            }
        }
    }

}

/* =============================================================================
   Animazione bollone concorso (hero)
   Arco di luce bianco-caldo che ruota lungo il bordo del bollone.
   Keyframes fuori dal selettore radice perché @keyframes non può essere annidato.
   ============================================================================= */
@keyframes gdoc-badge-spin {
    to {
        transform: rotate(1turn);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-template-giroditalia-template .gdoc-hero__badge::before {
        animation: none;
        /* Mostra comunque l'alone luminoso, ma statico */
        transform: rotate(90deg);
    }
}

/* fine scope .page-template-giroditalia-template */