/* =====================================================
   Hero Video Block — hero-video-block.css
   ===================================================== */

/* ── Reset base del componente ─────────────────────── */
.hvb-section {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: hidden;   /* contiene el desborde del fondo sin modificar el layout */
    position: relative;
}

/* ── Columnas ──────────────────────────────────────── */
.hvb-col {
    flex: 0 0 50%;
    width: 50%;
    position: relative;
}

/* Col izquierda: el fondo puede desbordar hacia la derecha */
.hvb-col--left {
    overflow: visible;   /* permite que bg_scale > 100% se proyecte a la derecha */
    z-index: 1;
    background-clip: padding-box; /* la imagen NO empuja el layout */
    /* El background-size en %, cuando se pone sobre el padding-box, */
    /* se calcula respecto al ancho del elemento. Un valor de 130%   */
    /* significa que la imagen mide 130% del ancho de la columna     */
    /* y se desborda visualmente hacia la derecha.                   */
}

/* Contenido interior: siempre por encima del fondo */
.hvb-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;        /* desktop: izquierda */
    padding: var(--hvb-col-padding, 60px);
    height: 100%;
    box-sizing: border-box;
}

/* ── Título ────────────────────────────────────────── */
.hvb-title {
    font-size:      var(--hvb-title-size, 56px);
    font-weight:    var(--hvb-title-weight, 700);
    line-height:    var(--hvb-title-lh, 1.1);
    color:          var(--hvb-title-color, #000);
    letter-spacing: var(--hvb-title-spacing, 0);
    margin: 0 0 var(--hvb-gap-ts, 24px) 0;
    padding: 0;
}

/* ── Subtítulo ─────────────────────────────────────── */
.hvb-subtitle {
    font-size:      var(--hvb-sub-size, 20px);
    font-weight:    var(--hvb-sub-weight, 400);
    line-height:    var(--hvb-sub-lh, 1.5);
    color:          var(--hvb-sub-color, #333);
    letter-spacing: var(--hvb-sub-spacing, 0);
    margin: 0 0 var(--hvb-gap-sb, 32px) 0;
    padding: 0;
}

/* ── Botón ─────────────────────────────────────────── */
.hvb-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             16px;
    padding:         var(--hvb-btn-pv, 14px) var(--hvb-btn-ph, 24px);
    font-size:       var(--hvb-btn-size, 18px);
    font-weight:     var(--hvb-btn-weight, 400);
    color:           var(--hvb-btn-color, #000);
    background:      transparent;
    border:          var(--hvb-btn-border-width, 1.5px) solid var(--hvb-btn-border-color, #000);
    text-decoration: none;
    cursor:          pointer;
    transition:      background 0.25s ease, color 0.25s ease;
    white-space:     nowrap;
    line-height:     1;
}

.hvb-btn:hover,
.hvb-btn:focus-visible {
    background: var(--hvb-btn-hover-bg, #000);
    color:      var(--hvb-btn-hover-color, #fff);
    outline:    none;
}

.hvb-btn__arrow {
    font-size:   1.4em;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Columna derecha / Video ───────────────────────── */
.hvb-col--right {
    overflow: hidden;
}

/* Wrapper responsive con padding-bottom trick */
.hvb-video-wrap {
    position:     relative;
    width:        100%;
    height:       0;
    /* padding-bottom se establece inline desde PHP */
    background:   #222;
    overflow:     hidden;
}

.hvb-video-wrap iframe {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    border:   0;
    display:  block;
}

/* Placeholder cuando no hay Vimeo ID */
.hvb-video-placeholder {
    width:           100%;
    height:          100%;
    min-height:      300px;
    background:      #333;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.hvb-play-icon {
    display:       block;
    width:         64px;
    height:        64px;
    border:        2px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    position:      relative;
}

.hvb-play-icon::after {
    content:    '';
    position:   absolute;
    top:        50%;
    left:       55%;
    transform:  translate(-50%, -50%);
    border-top:    10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left:   16px solid rgba(255,255,255,0.7);
}

/* ── Mobile (≤ 768px) ──────────────────────────────── */
@media (max-width: 768px) {

    .hvb-section {
        flex-direction: column;
    }

    .hvb-col {
        flex:  none;
        width: 100%;
    }

    /* Columna izquierda: centrado en mobile */
    .hvb-content {
        align-items: center;
        text-align:  center;
    }

    .hvb-title,
    .hvb-subtitle {
        text-align: center;
    }

    /* En mobile el fondo no desborda */
    .hvb-col--left {
        background-size: cover !important;
        background-position: center !important;
    }

    /* El video ocupa todo el ancho en mobile */
    .hvb-col--right {
        width: 100%;
    }
}