/* ===========================================
   SABA VIDEO HERO - ADAPTIVE DESIGN
   Desktop: testo overlay sul video
   Mobile: testo sotto il video
   =========================================== */

/* Container principale */
.saba-video-hero-wrapper {
    position: relative;
}

/* Hero section */
.saba-video-hero {
    position: relative;
    overflow: hidden;
}

/* ===========================================
   DESKTOP CONTENT - Overlay controllato da FSE
   =========================================== */

/* L'overlay è gestito dal blocco Cover di WordPress
   Impostabile in FSE: Aspetto > Editor > seleziona Cover > Overlay
   - Colore: scegli dalla palette
   - Opacità: slider 0-100
   Per disattivare: imposta opacità a 0 */

/* Stile per l'overlay nativo di WordPress */
.saba-video-hero .wp-block-cover__background {
    border-radius: 16px;
}

/* === A11y P2: scrim di sicurezza quando il dim del Cover è 0 ===
   L'istanza live ha overlay opacità 0 (dim-0): il testo bianco resta solo
   con un soft text-shadow, insufficiente sulle aree chiare della foto.
   Aggiungiamo un velo a gradiente leggibile SOLO se il cover è a dim 0
   (via :has()), così non raddoppia un dim impostato volutamente da FSE.
   z-index: sopra l'immagine, sotto il contenuto. */
.saba-video-hero:has(.has-background-dim-0)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.22) 45%,
        rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
}

.saba-video-hero:has(.has-background-dim-0) > .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
}

/* Desktop content - visibile solo su desktop */
.hero-desktop-content {
    display: flex;
    flex-direction: column;
    max-width: min(90%, 800px);
    /* Allineamento controllato da FSE - non forzare center */
}

/* Allineamento di default center, ma sovrascrivibile da FSE */
.hero-desktop-content:not(.has-text-align-left):not(.has-text-align-right) {
    align-items: center;
    margin: 0 auto;
}

/* Supporto allineamento a sinistra - quando il titolo o paragrafo hanno text-align left */
.hero-desktop-content.has-text-align-left,
.hero-desktop-content:has(.has-text-align-left) {
    align-items: flex-start !important;
    margin: 0 !important;
    margin-right: auto !important;
    text-align: left;
}

/* Bottoni allineati a sinistra quando il contenuto è a sinistra */
.hero-desktop-content:has(.has-text-align-left) .wp-block-buttons {
    justify-content: flex-start !important;
}

/* Supporto allineamento a destra */
.hero-desktop-content.has-text-align-right,
.hero-desktop-content:has(.has-text-align-right) {
    align-items: flex-end !important;
    margin: 0 !important;
    margin-left: auto !important;
    text-align: right;
}

/* Bottoni allineati a destra quando il contenuto è a destra */
.hero-desktop-content:has(.has-text-align-right) .wp-block-buttons {
    justify-content: flex-end !important;
}

/* Mobile content - nascosto su desktop */
.hero-mobile-content {
    display: none;
}

/* Titolo Hero Desktop - Tipografia fluida */
.hero-desktop-content .wp-block-heading {
    font-size: clamp(2rem, 4vw + 1rem, 3.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    color: #fff;
    margin-bottom: var(--wp--preset--spacing--small, 1rem);
}

/* Sottotitolo Desktop */
.hero-desktop-content p {
    font-size: clamp(1rem, 2vw + 0.5rem, 1.375rem);
    line-height: 1.5;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    color: #fff;
    margin-bottom: var(--wp--preset--spacing--large, 2rem);
}

/* Buttons Desktop - default center, sovrascrivibile */
.hero-desktop-content .wp-block-buttons {
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Buttons centrati di default */
.hero-desktop-content .wp-block-buttons:not(.is-content-justification-left):not(.is-content-justification-right) {
    justify-content: center;
}

/* Supporto allineamento bottoni da FSE */
.hero-desktop-content .wp-block-buttons.is-content-justification-left {
    justify-content: flex-start;
}

.hero-desktop-content .wp-block-buttons.is-content-justification-right {
    justify-content: flex-end;
}

.hero-desktop-content .wp-block-button__link {
    font-size: clamp(0.95rem, 1.5vw + 0.25rem, 1.125rem);
    padding: clamp(0.85rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Hover effects desktop */
.hero-desktop-content .saba-btn-primary .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 159, 227, 0.4);
}

.hero-desktop-content .saba-btn-secondary .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

/* ===========================================
   MOBILE CONTENT - Sotto il video
   =========================================== */

.hero-mobile-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--wp--preset--spacing--large, 2rem) var(--wp--preset--spacing--medium, 1rem);
    background: var(--wp--preset--color--background, #fff);
}

/* Titolo Mobile */
.hero-mobile-content .hero-mobile-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    font-weight: 700;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--secondary, #001E3C);
    margin-bottom: var(--wp--preset--spacing--small, 0.75rem);
}

/* Sottotitolo Mobile */
.hero-mobile-content .hero-mobile-subtitle {
    font-size: clamp(0.95rem, 3vw, 1.125rem) !important;
    line-height: 1.5 !important;
    color: var(--wp--preset--color--foreground, #4A4F54);
    margin-bottom: var(--wp--preset--spacing--medium, 1.5rem);
    max-width: 90%;
}

/* Buttons Mobile */
.hero-mobile-content .wp-block-buttons {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
}

.hero-mobile-content .wp-block-button {
    width: 100%;
}

.hero-mobile-content .wp-block-button__link {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Hover effects mobile */
.hero-mobile-content .saba-btn-primary .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 159, 227, 0.3);
}

.hero-mobile-content .saba-btn-secondary .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary, #003A70) !important;
    color: #fff !important;
}

/* ===========================================
   RESPONSIVE - Adaptive Switching
   =========================================== */

/* Mobile: nasconde desktop, mostra mobile */
@media (max-width: 768px) {
    /* Nascondi contenuto desktop */
    .hero-desktop-content {
        display: none !important;
    }

    /* Mostra contenuto mobile */
    .hero-mobile-content {
        display: flex !important;
    }

    /* Nascondi overlay su mobile */
    .saba-video-hero .wp-block-cover__background {
        display: none !important;
    }

    /* Video più compatto su mobile */
    .saba-video-hero {
        min-height: 250px !important;
        max-height: 300px !important;
        padding: 0 !important;
    }

    .saba-video-hero .wp-block-cover__inner-container {
        display: none !important;
    }
}

/* Tablet: mostra desktop content */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-desktop-content {
        display: flex !important;
    }

    .hero-mobile-content {
        display: none !important;
    }

    .saba-video-hero {
        min-height: 450px !important;
        padding: 2.5rem 1.5rem !important;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .hero-desktop-content {
        display: flex !important;
    }

    .hero-mobile-content {
        display: none !important;
    }

    .saba-video-hero {
        min-height: 600px !important;
        padding: var(--wp--preset--spacing--xxl, 4rem) var(--wp--preset--spacing--large, 2rem) !important;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .saba-video-hero {
        min-height: 650px !important;
    }
}

/* ===========================================
   VIDEO WRAPPER
   =========================================== */
.saba-video-wrapper {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
}

.saba-video-wrapper video,
.saba-video-wrapper iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===========================================
   ACCESSIBILITY - Reduced motion
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .hero-desktop-content .wp-block-button__link,
    .hero-mobile-content .wp-block-button__link {
        transition: none;
    }

    .hero-desktop-content .wp-block-button__link:hover,
    .hero-mobile-content .wp-block-button__link:hover {
        transform: none;
    }
}