/*
 * Bloque "hero" del Compositor (content_creator_section_component_heroblock).
 *
 * Convencion de ancho: en lugar de forzar un hack de 100vw/margen negativo
 * (que introduce el problema conocido de scrollbar-gap), el bloque hero
 * ocupa el 100% del contenedor que lo envuelve. Si se necesita que llegue
 * de verdad a sangre completa del viewport, la seccion del Compositor debe
 * configurarse con "Ancho completo" (content_creator_section_type =
 * fullwidth), que ya existe como opcion en el editor de secciones.
 *
 * Header sticky: el header (#header-wrapper) es position:sticky y se
 * superpone visualmente a la franja superior de la imagen de fondo del
 * hero (esto es intencionado: la imagen es decorativa ahi). Para que el
 * titulo/subtitulo/CTA nunca queden tapados, el contenido de texto se
 * ancla siempre a la parte inferior del hero (align-items: flex-end +
 * padding-bottom). Ademas se define scroll-margin-top para el caso de
 * salto por ancla (ej. #hero en la URL o scrollIntoView), de forma que al
 * aterrizar el titulo no quede oculto bajo el header. Si QA detecta que el
 * header sigue tapando contenido en el primer viewport, el valor de
 * scroll-margin-top / padding-bottom puede ajustarse con la altura real
 * del header medida en vivo.
 */

.compositor-wrapper .compositor-block-heroblock {
    width: 100%;
}

/*
 * En la home, el hero es el primer bloque tras el header y debe arrancar
 * pegado a el (sin el margen/padding superior que el Compositor aplica por
 * defecto a cualquier seccion, pensado para bloques de contenido normal, no
 * para un hero a sangre completa). Se quita solo para la primera seccion de
 * la home (body.home) para no afectar al resto de paginas que usan el
 * Compositor con ese espaciado por defecto.
 */
body.home #header-wrapper {
    margin-bottom: 0;
}

body.home .compositor-wrapper {
    margin-top: 0;
}

body.home .compositor-wrapper > .compositor-section-wrapper:first-child {
    padding-top: 0;
}

.compositor-wrapper .compositor-block-hero {
    position: relative;
    width: 100%;
    min-height: var(--hero-fit-height, 520px);
    display: flex;
    align-items: flex-end;
    background-image: var(--hero-bg-desktop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    scroll-margin-top: 110px;
    overflow: hidden;
}

/*
 * El texto (titulo/subtitulo) va anclado abajo del hero pero no tiene fondo
 * propio (a diferencia del CTA, que ya usa .button-filled con fondo solido).
 * El degradado cubre todo el alto del hero con opacidad constante en el 45%
 * inferior -- donde vive el bloque de texto, sea cual sea su altura real --
 * y solo entonces se desvanece hacia la mitad superior, puramente decorativa.
 * Esto es robusto ante cualquier imagen de fondo que se suba desde wp-admin.
 */
.compositor-wrapper .compositor-block-hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.compositor-wrapper .compositor-block-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    padding-top: 30px;
    padding-right: clamp(40px, 5vw, 100px);
    padding-bottom: 50px;
    padding-left: clamp(40px, 5vw, 100px);
    color: #fff;
}

.compositor-wrapper .compositor-block-hero-title {
    font-size: 40px;
    line-height: 48px;
    font-weight: 100;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.compositor-wrapper .compositor-block-hero-subtitle {
    font-size: 18px;
    line-height: 26px;
    margin: 0 0 20px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.45);
}

.compositor-wrapper .compositor-block-hero-cta {
    display: inline-block;
    padding: 20px 30px;
}

@media screen and (max-width: 950px) {
    .compositor-wrapper .compositor-block-hero {
        min-height: 420px;
    }

    .compositor-wrapper .compositor-block-hero-content {
        padding-top: 25px;
        padding-right: clamp(30px, 4vw, 60px);
        padding-bottom: 40px;
        padding-left: clamp(30px, 4vw, 60px);
    }
}

@media screen and (max-width: 650px) {
    .compositor-wrapper .compositor-block-hero {
        min-height: 380px;
        background-image: var(--hero-bg-mobile, var(--hero-bg-desktop));
    }

    .compositor-wrapper .compositor-block-hero-title {
        font-size: 32px;
        line-height: 38px;
    }

    .compositor-wrapper .compositor-block-hero-content {
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 20px;
    }
}