/* ============================================================
   BusinessOverviewBanner.css — Estilos propios del widget BusinessOverviewBanner
   Bticino Mx · Sitefinity Renderer
   ============================================================

   Widget GENERAL: se identificó por primera vez en Corporativo (nodo "SEC · el negocio",
   1535:30274 PC, 1535:29839 tablet, 1535:30047 mobile del Figma), pero no es exclusivo de esa
   vertiente.

   NO se declara font-family: la resuelve site.css reasignando --bs-body-font-family en :root.

   El recuadro rojo destacado y el logo son piezas puramente decorativas de posición y tamaño FIJOS
   por breakpoint (en % del propio ancho/alto de la sección, para que la sección pueda ir a sangre
   completa en cualquier monitor) -- no dependen del texto real que cargue el editor. Los % salen de
   coordenadas en píxeles reales de cada mockup (no de un contenedor Figma declarado con un tamaño
   fijo que no coincide con el instance real).

   Breakpoints propios: mobile hasta 500px, tablet hasta 1024px, laptop hasta 1200px (hereda
   desktop), desktop de 1201px en adelante.
   ============================================================ */

.BusinessOverviewBanner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* 598/1280 = 46.72vw. El techo evita una sección absurda en un monitor ultrawide. */
    min-height: clamp(598px, 46.72vw, 720px);
    background-color: #0f0f12; /* Color de respaldo mientras la imagen carga. */
    overflow: hidden;
}

.BusinessOverviewBanner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none; /* Anula el max-width:100% que Bootstrap le pone a las imágenes. */
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* Velo parejo, muy sutil -- el nodo lo trae al 10% nada más, la mayor parte del contraste la da el
   recuadro rojo y el fondo del texto. */
.BusinessOverviewBanner-veil {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 15, 18, 0.1);
    pointer-events: none;
}

.BusinessOverviewBanner-fillet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

/* Recuadro traslúcido rojo detrás del texto. Rojo real de Legrand (#ed1c24 al 50%), fijo -- no es
   un color configurable del widget. */
.BusinessOverviewBanner-highlight {
    position: absolute;
    left: 35.08%;
    top: 43.81%;
    width: 64.92%;
    height: 40.64%;
    background-color: rgba(237, 28, 36, 0.5);
    pointer-events: none;
}

/* Logo, opcional. Tamaño y posición fijos -- no se mueve ni se agranda según haya o no
   descripción. */
/* Marco de la caja del logo: un <img> posicionado directo con inset usa su tamaño NATURAL de
   archivo en vez del que implica el inset (rareza de CSS con elementos reemplazados) -- por eso la
   caja fija va acá, en un <div> normal, y el <img> de adentro solo la llena. */
.BusinessOverviewBanner-logo-frame {
    position: absolute;
    inset: 18.39% 57.34% 62.21% 5.55%; /* top / right / bottom / left, del nodo real. */
    pointer-events: none;
}

.BusinessOverviewBanner-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none; /* Anula el max-width:100% que Bootstrap le pone a las imágenes. */
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
}

.BusinessOverviewBanner-content {
    position: absolute;
    left: 35.78%;
    top: 42.98%;
    width: 64.06%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; /* Del nodo real ("justify-center"): en PC no se nota porque el alto es
                                 intrínseco (hug), pero es la misma regla que trae el nodo. */
    overflow: hidden; /* Del nodo real ("overflow-clip"). */
    gap: 16px;
    padding: 56px 48px;
}

.BusinessOverviewBanner-title {
    margin: 0;
    font-size: 34px;
    font-weight: 900; /* Archivo Black del diseño. */
    line-height: 1.2;
    color: #ffffff;
}

.BusinessOverviewBanner-rule {
    width: 52px;
    height: 3px;
    background-color: #ed1c24; /* Rojo real de Legrand, fijo. */
    flex: none;
}

.BusinessOverviewBanner-description {
    margin: 0;
    font-size: 16px;
    font-weight: 500; /* Acumin Pro Medium del diseño. */
    line-height: 24px;
    color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------
   El recuadro rojo y el logo cambian de tamaño y posición por rango -- son piezas propias de cada
   mockup de Figma, no una regla continua entre PC y tablet/mobile.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    /* 362/774 = 46.77vw, del nodo real (1535:29839, 774x362). */
    .BusinessOverviewBanner {
        min-height: clamp(362px, 46.77vw, 460px);
    }

    .BusinessOverviewBanner-highlight {
        left: 2.97%;
        top: 32.6%;
        width: 97.03%;
        height: 67.13%;
    }

    .BusinessOverviewBanner-logo-frame {
        inset: 9.67% 55.04% 69.56% 5.17%;
    }

    /* Valores del nodo "contenido" (x=34 y=147 w=740 h=221 sobre el frame real de 774x362) --
       34/774, 147/362, 740/774, 221/362. El alto fijo + justify-content:center (heredado de la
       regla base) son del nodo real, no una decisión nuestra. */
    .BusinessOverviewBanner-content {
        left: 4.39%;
        top: 40.61%;
        width: 95.61%;
        height: 61.05%;
    }
}

@media (max-width: 500px) {
    /* 362/374 = 96.79vw, del nodo real (1535:30047, 374x362). */
    .BusinessOverviewBanner {
        min-height: clamp(362px, 96.79vw, 484px);
    }

    .BusinessOverviewBanner-highlight {
        left: 13.1%;
        top: 25.97%;
        width: 86.9%;
        height: 74.31%;
    }

    .BusinessOverviewBanner-logo-frame {
        inset: 5.52% 50% 82.6% 2.94%;
    }

    /* Valores del nodo "contenido" (1535:30068): x=31 y=126 w=338 h=221 sobre un frame real de
       374x362 -- 31/374, 126/362, 338/374, 221/362. Alto e items centrados (justify-content) como
       en el nodo real: si el texto real excede esa altura, el propio Figma también centra el
       sobrante en vez de desbordar solo hacia abajo. */
    .BusinessOverviewBanner-content {
        left: 8.29%;
        top: 34.81%;
        width: 90.37%;
        height: 61.05%;
        justify-content: center;
        padding: 56px 48px;
        transform: none; /* Anula el translateY(-50%) del breakpoint de tablet: max-width:1024px
                             también hace match acá, y ese transform no debe heredarse. */
    }

    .BusinessOverviewBanner-title {
        font-size: 25px;
    }
}

/* El marcador de posición que este widget muestra en el editor cuando no tiene contenido NO se
   estiliza acá: usa las clases WidgetPlaceholder de site.css, comunes a todos los widgets. */