/**
 * ME FREE — hero.css  (v2)
 *
 * NUOVO HERO (nessun plugin): Gruppo .hero-home con
 *   ├─ Blocco HTML: <video class="hero-media"> + <div class="hero-shade">
 *   └─ Gruppo .hero-content  (brand, H1, testo, bottoni, caption)
 * Mobile: il video NON viene scaricato, resta il poster (vedi site.js).
 *
 * In fondo: "ponte" temporaneo per il vecchio hero con plugin
 * Video Background Block (togliere dopo la migrazione).
 */

/* =========================================================
   1. CONTENITORE
   ========================================================= */

.hero-home {
    position        : relative;
    isolation       : isolate;
    width           : 100%;
    overflow        : hidden;
    background-color: var(--me-color-deep);
    color           : #fff;
}

.hero-home > .hero-media,
.hero-home > .hero-shade {
    position: absolute;
    inset   : 0;
    width   : 100%;
    height  : 100%;
}

.hero-home > .hero-media {
    z-index   : -2;
    object-fit: cover;
}

/* Sfumatura: scura in alto (menu bianco leggibile) e in basso (testo) */
.hero-home > .hero-shade {
    z-index   : -1;
    background: linear-gradient(180deg,
            rgba(6, 22, 28, .55) 0%,
            rgba(6, 22, 28, .10) 30%,
            rgba(6, 22, 28, .25) 58%,
            rgba(6, 22, 28, .72) 100%);
}

/* =========================================================
   2. CONTENUTO — allineato a logo e sezioni
   ========================================================= */

.hero-home > .hero-content {
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    justify-content: flex-end;      /* per centrare in verticale: center */
    width          : min(calc(100% - var(--me-gutter) * 2), var(--me-container));
    min-height     : 100vh;
    min-height     : 100svh;        /* stabile su mobile (barra indirizzi) */
    margin-inline  : auto;
    padding-block  : calc(var(--me-header-offset) + 3rem) clamp(3.5rem, 11vh, 7rem);
}

/* =========================================================
   3. TIPOGRAFIA
   ========================================================= */

.hero-home .hero-brand {
    margin        : 0 0 1.25rem;
    color         : rgba(255, 255, 255, .85);
    font-size     : .78rem;
    font-weight   : 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.hero-home .hero-title {
    max-width     : 13em;
    margin        : 0 0 1.5rem;
    color         : #fff;
    font-family   : var(--me-font-serif);
    font-size     : clamp(2.5rem, 6vw, 5.25rem);
    font-weight   : 400;
    line-height   : 1.04;
    letter-spacing: -.02em;
    text-wrap     : balance;
    text-shadow   : 0 1px 32px rgba(0, 0, 0, .25);
}

.hero-home .hero-text {
    max-width  : 34rem;
    margin     : 0 0 2.25rem;
    color      : rgba(255, 255, 255, .92);
    font-size  : clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    text-shadow: 0 1px 24px rgba(0, 0, 0, .25);
}

.hero-home .hero-caption {
    margin        : 3rem 0 0;
    color         : rgba(255, 255, 255, .85);
    font-size     : .75rem;
    font-weight   : 500;
    line-height   : 1.8;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hero-home .hero-content h2,
.hero-home .hero-content p,
.hero-home .hero-brand,
.hero-home .hero-caption {
    text-shadow: 2px 2px 8px rgba(6, 45, 56, .8);
}

.hero-home .hero-buttons {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : .75rem 2rem;
    margin     : 0;
}

.hero-home .hero-buttons .btn-primary, .hero-home .hero-buttons .btn-primary a, .hero-home .hero-buttons .btn-secondary, .hero-home .hero-buttons .btn-secondary a {
    color: rgba(var(--me-color-primary-rgb), 1);
    background: rgba(255,255,255,0.5);
}

:is(.is-style-me-link, .hero-home .btn-secondary) .wp-block-button__link::after {
    content         : "";
    position        : absolute;
    inset           : auto 0 0 0;
    height          : 1px;
    background      : currentColor;
    opacity         : .4;
    transform-origin: left center;
    transition      :
        opacity var(--me-dur) var(--me-ease),
        transform var(--me-dur) var(--me-ease);
}

:is(.is-style-me-link, .hero-home .btn-secondary) .wp-block-button__link:is(:hover, :focus-visible)::after {
    opacity  : 1;
    transform: scaleX(.6);
}

/* =========================================================
   4. INGRESSO — un solo momento orchestrato, solo CSS
   ========================================================= */

@keyframes me-hero-in {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {

    .hero-home .hero-content > * {
        animation: me-hero-in 1.3s var(--me-ease) both;
    }

    .hero-home .hero-content > :nth-child(1) { animation-delay: .15s; }
    .hero-home .hero-content > :nth-child(2) { animation-delay: .30s; }
    .hero-home .hero-content > :nth-child(3) { animation-delay: .45s; }
    .hero-home .hero-content > :nth-child(4) { animation-delay: .60s; }
    .hero-home .hero-content > :nth-child(5) { animation-delay: .75s; }
}

@media (max-width: 768px) {

    .hero-home .hero-buttons {
        flex-direction: column;
        align-items   : flex-start;
    }

    .hero-home .hero-caption {
        margin-top: 2rem;
    }
}


/* =========================================================
   5. PONTE — vecchio hero con plugin Video Background Block
      Il plugin scrive nel <head> uno style con ID:
      #vbbVideoBG-1 { min-height: 1000px }  (anche su mobile!)
      → costringe l'hero a 1000px. Qui lo riportiamo a schermo.
      ELIMINARE questa sezione dopo aver sostituito l'hero.
   ========================================================= */

.hero-home .wp-block-vbb-video-bg,
.hero-home .wp-block-vbb-video-bg .vbbVideoContent {
    min-height: 100vh !important;
    min-height: 100svh !important;
}

.hero-home .vbbVideoContent {
    width          : min(calc(100% - var(--me-gutter) * 2), var(--me-container)) !important;
    margin-inline  : auto;
    padding        : calc(var(--me-header-offset) + 3rem) 0 clamp(3.5rem, 11vh, 7rem) !important;
    justify-content: flex-end !important;
}

.hero-home .vbbVideoOverlay {
    background: linear-gradient(180deg,
            rgba(6, 22, 28, .55) 0%,
            rgba(6, 22, 28, .10) 30%,
            rgba(6, 22, 28, .25) 58%,
            rgba(6, 22, 28, .72) 100%) !important;
}