/*
 * hero.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: SOLO en is_front_page() — condicional en functions.php
 *
 * El HTML del hero se inyecta vía hook blocksy:header:after
 * en functions.php. Este CSS estiliza ese HTML.
 *
 * DISEÑO CONFIRMADO:
 * - Fotografía de fondo a pantalla completa
 * - Overlay gris #4C4C4C al 60% (regla única en main.css, compartida por los banners)
 * - Una sola columna, texto alineado a la izquierda
 * - Sin cursiva, sin palabra destacada, sin dos columnas
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-hero
 */

/* ============================================================
   HERO — WRAPPER PRINCIPAL
   ============================================================ */
.db-hero {
    position: relative;
    min-height: 75vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-verde-oscuro);
}

/* ============================================================
   IMAGEN DE FONDO
   ============================================================ */
.db-hero .db-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

/* ============================================================
   CONTENEDOR DE CONTENIDO
   z-index 2: encima de foto y overlay. El contenido se alinea con
   las secciones centrándolo a --ancho-contenedor vía padding-inline
   max/calc (mismo patrón que el header), NO con max-width: con
   border-box, max-width + padding en el mismo elemento metería el
   contenido hacia dentro y lo descuadraría en escritorio.
   ============================================================ */
.db-hero .db-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: 7rem 4rem;
    padding-inline: max(var(--padding-contenedor), calc((100% - var(--ancho-contenedor)) / 2));
}

/* ============================================================
   BADGE — "Instaladores Autorizados"
   Estilo común en main.css (.db-badge--banner); aquí solo lo contextual.
   ============================================================ */
.db-hero .db-hero__badge {
    margin-bottom: 1.75rem;
}

/* ============================================================
   H1 — "Instaladores de Telecomunicaciones y Electricidad."
   Sin cursiva. Sin palabra destacada. Sin subrayado.
   ============================================================ */
.db-hero .db-hero__title {
    font-family: var(--font-titulos);
    font-size: var(--texto-h1);
    font-weight: var(--peso-extrabold);
    font-style: normal;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--color-blanco);
    margin: 0 0 1.5rem;
    max-width: 680px;
}

/* ============================================================
   PÁRRAFO VERDE — .db-hero__subtitle
   "Ofrecemos soporte integral con experiencia técnica y compromiso."
   ============================================================ */
.db-hero .db-hero__subtitle {
    font-family: var(--font-cuerpo);
    font-size: 1.1rem;
    font-weight: var(--peso-semibold);
    line-height: 1.6;
    color: var(--color-verde);
    margin: 0 0 0.85rem;
    max-width: 560px;
}

/* ============================================================
   PÁRRAFO BLANCO — .db-hero__description
   "Un equipo técnico para las instalaciones de tu hogar,
   comunidad o empresa en Vigo y sur de Pontevedra."
   ============================================================ */
.db-hero .db-hero__description {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-parrafo-hero);
    font-weight: var(--peso-normal);
    line-height: 1.7;
    color: var(--color-blanco-80);
    margin: 0 0 2.5rem;
    max-width: 540px;
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1024px) {
    .db-hero .db-hero__inner {
        padding-block: 6rem 3rem;
    }

    .db-hero .db-hero__title {
        max-width: 100%;
    }
}

/* ============================================================
   RESPONSIVE — TABLET (768–1024) — altura del banner
   Solo aquí min-height:auto (altura por contenido, sin vh).
   Acotado a ≥768 para que el iPad mini (768) cuente como tablet;
   los teléfonos (≤767.98) conservan su 85svh, con tope de 50rem, más abajo.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .db-hero {
        min-height: auto;
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL (teléfonos, ≤767.98 — excluye el iPad mini)
   ============================================================ */
@media (max-width: 767.98px) {
    .db-hero {
        /* Tope de 50rem: ningún teléfono real llega (932px × 85% = 792px); solo actúa en
           ventanas muy altas, como la del renderizador de Search Console. */
        min-height: min(85svh, 50rem);
        align-items: flex-end;
    }

    .db-hero .db-hero__inner {
        padding-block: 2rem 2.5rem;
    }

    .db-hero .db-hero__subtitle {
        font-size: var(--texto-base);
    }

    .db-hero .db-hero__cta {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }
}