/* =============================================================
   1. RESET STRUTTURALE & RIMOZIONE SPAZI (HOME)
   ============================================================= */
/* Elimina i margini tra Header e Hero e forza la larghezza intera */
.home .site-main,
.home #main-container,
.home .ct-container-full,
.home .entry-content,
.home .entry-content.is-layout-constrained {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Nasconde il titolo della pagina se presente (es. "home") */
.home .entry-header {
    display: none !important;
}

/* =============================================================
   2. HERO SECTION (BLOCCO COPERTINA NATIVO)
   ============================================================= */
.cicli-hero {
    min-height: 100vh !important;
    margin: 0 !important;
    position: relative;
    display: flex !important;
    align-items: center !important;
}

/* Gradiente Angolare: Nero (Basso-Sinistra) -> Trasparente (Destra) */
.cicli-hero .wp-block-cover__background {
    background: linear-gradient(45deg, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0.5) 50%, 
        rgba(0,0,0,0) 85%) !important;
    opacity: 1 !important;
}

/* Reset del contenitore interno di Gutenberg per allineamento a sinistra */
.cicli-hero .wp-block-cover__inner-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =============================================================
   3. CONTAINER TESTI ELASTICO (hero-text-container)
   ============================================================= */
.hero-text-container {
    /* Occupa metà schermo su desktop, quasi tutto su mobile */
    width: 100% !important;
    max-width: 50% !important; 
    
    /* Distanza elastica dal bordo sinistro */
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: clamp(1.5rem, 8vw, 6rem) !important;
    padding-right: 1.5rem !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Forza tutto a sinistra */
    text-align: left !important;
    z-index: 10;
}

/* =============================================================
   4. TIPOGRAFIA HERO (CLASSE PER CLASSE)
   ============================================================= */
/* Headline: i marchi trattati */
.cicli-headline {
    display: block;
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #FF8C00; /* Arancio */
    margin-bottom: 1rem;
}

/* Titolo H1: Magenta */
.cicli-main-title {
    font-size: clamp(2.2rem, 6vw, 4rem) !important;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.4);
}

/* Sottotitolo descrittivo */
.cicli-sub-text {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 45ch; /* Limite caratteri per leggibilità */
    margin-bottom: 2.5rem;
}

/* =============================================================
   5. PULSANTI CTA (UNIFICATI CON SEZIONE 3)
   ============================================================= */
.wp-block-buttons {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
}

.wp-block-button__link {
    /* Layout di base unificato */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.2rem 2.5rem !important; /* Padding più generoso come S3 */
    border-radius: 0.8rem !important;  /* Bordo arrotondato coordinato */
    font-family: var(--font-sistema) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.95rem !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    text-decoration: none !important;
}

/* Bottone 1: Arancio Solido (Stile S3) */
.wp-block-buttons > .wp-block-button:first-child .wp-block-button__link {
    background-color: var(--color-arancio) !important;
    background-image: none !important; /* Rimosso gradiente */
    color: #ffffff !important;        /* Testo bianco per contrasto solido */
    border: 2px solid var(--color-arancio) !important;
}

.wp-block-buttons > .wp-block-button:first-child .wp-block-button__link:hover {
    background-color: transparent !important;
    color: var(--color-arancio) !important;
    transform: translateY(-3px) !important;
}

/* Bottone 2: Ghost (Trasparente con bordo bianco) */
.wp-block-buttons > .wp-block-button:last-child .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

.wp-block-buttons > .wp-block-button:last-child .wp-block-button__link:hover {
    background-color: #ffffff !important;
    color: #1a1c1e !important; /* Inversione colore al passaggio */
    transform: translateY(-3px) !important;
}

/* Mobile: impila i pulsanti se lo spazio è poco */
@media (max-width: 600px) {
    .wp-block-buttons {
        flex-direction: column !important;
    }
    .wp-block-button__link {
        width: 100% !important;
    }
}

/* ==========================================================================
   MOVIMENTO ALLO SCROLL - PREPARAZIONE (SEZIONE 3)
   ========================================================================== */

/* Nascondiamo titolo, testo e wrapper pulsanti */
.s3-main-container h2,
.s3-main-container p,
.s3-main-container .s3-actions-wrapper {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
}

/* Classe attivata dallo script */
.s3-main-container.is-visible h2,
.s3-main-container.is-visible p,
.s3-main-container.is-visible .s3-actions-wrapper {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Effetto a cascata (ritardo sequenziale) */
.s3-main-container.is-visible p { transition-delay: 0.2s; }
.s3-main-container.is-visible .s3-actions-wrapper { transition-delay: 0.4s; }



/* =============================================================
   6. OTTIMIZZAZIONE MOBILE (Sotto i 768px)
   ============================================================= */
@media (max-width: 48rem) {
    .hero-text-container {
        max-width: 95% !important; /* Il testo occupa quasi tutta la larghezza */
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .cicli-hero {
        min-height: 80vh !important; /* Un po' più bassa su mobile */
    }

    .wp-block-buttons {
        flex-direction: column; /* Bottoni impilati su mobile */
        width: 100%;
    }
    
    .wp-block-button, .wp-block-button__link {
        width: 100% !important; /* Bottoni a larghezza intera */
        text-align: center;
    }
}