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

   Dos tarjetas de webinars. Nodos de Figma: 3944:58940 (PC), 3944:59472 (tablet) y 3944:60275
   (mobile). Tipografía: site.css.

   PC: anteriores a la izquierda y próximos a la derecha. Tablet y mobile: una columna, próximos
   arriba. Cada lista muestra 4 filas y desde la quinta se desplaza (barra y sombras como en
   ProductSpotlightSection); WebinarsHistory.js fija el alto exacto de 4 filas.

   Breakpoints del @media propio: mobile hasta 500px, tablet hasta 1024px, laptop hasta 1200px
   (hereda desktop), desktop de 1201px en adelante sin @media.
   ============================================================ */

/* --- Sección: fondo blanco. --- */
.WebinarsHistory {
    background-color: #ffffff;
}

/* Contenido centrado dentro del techo del sitio, con 30px arriba y abajo. */
.WebinarsHistory-content {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    box-sizing: border-box;
    padding: 30px 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* --- Encabezado de la sección. --- */
.WebinarsHistory-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.WebinarsHistory-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.88px;
    text-transform: uppercase;
    color: #1b2d3a;
}

.WebinarsHistory-eyebrow-dot {
    flex: none;
    width: 8px;
    height: 8px;
    background-color: #1b2d3a;
}

.WebinarsHistory-title {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    line-height: normal;
    color: #0f0f12;
}

/* --- Columnas: en PC anteriores a la izquierda aunque el DOM traiga próximos primero. --- */
.WebinarsHistory-columns {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.WebinarsHistory-card {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 0 8px;
    background-color: #fcfcff;
    border: 1.5px solid #e0e3e8;
    border-radius: 14px;
    /* Relleno lateral de cabecera y filas; la barra de scroll se ubica contra el borde. */
    --WebinarsHistory-pad: 24px;
    --WebinarsHistory-image-width: 118px;
}

/* Solo en PC la tarjeta de anteriores pasa a la izquierda y lleva su barra de scroll de ese lado;
   en tablet y mobile queda el orden del DOM: próximos arriba y anteriores abajo. */
@media (min-width: 1025px) {
    .WebinarsHistory-card--past {
        order: -1;
    }

    .WebinarsHistory-card--past .WebinarsHistory-scrollbar {
        left: 8px;
        right: auto;
    }
}

/* --- Cabecera de la tarjeta. --- */
.WebinarsHistory-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 var(--WebinarsHistory-pad) 8px;
}

.WebinarsHistory-card--upcoming .WebinarsHistory-card-header {
    align-items: flex-end;
    text-align: right;
}

.WebinarsHistory-card-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    color: #429cde;
}

.WebinarsHistory-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    color: #0f0f12;
}

/* --- Lista con scroll desde la quinta fila (patrón de ProductSpotlightSection). --- */
.WebinarsHistory-list-wrapper {
    position: relative;
}

.WebinarsHistory-list {
    list-style: none;
    margin: 0;
    padding: 0 var(--WebinarsHistory-pad);
    /* Respaldo de 4 filas (4 × 104px + 3 separadores); el JS lo reemplaza por la medida real. */
    max-height: var(--WebinarsHistory-list-max, 419px);
    overflow-y: auto;
    overscroll-behavior: contain;
    cursor: grab;
    scrollbar-width: none;
}

.WebinarsHistory-list::-webkit-scrollbar {
    display: none;
}

/* Barra propia: riel y pulgar. Solo se ve si la lista tiene contenido por desplazar (la clase
   has-overflow la pone WebinarsHistory.js). */
.WebinarsHistory-scrollbar {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    display: none;
    width: 6px;
    border-radius: 3px;
    background-color: #eef1f3;
}

.WebinarsHistory-list-wrapper.has-overflow .WebinarsHistory-scrollbar {
    display: block;
}

.WebinarsHistory-scrollbar-thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    min-height: 32px;
    border-radius: 3px;
    background-color: #243746;
    cursor: grab;
    touch-action: none;
}

/* Zona de toque más ancha que el pulgar visible, para el dedo. */
.WebinarsHistory-scrollbar-thumb::before {
    content: "";
    position: absolute;
    inset: 0 -8px;
}

/* Sombra tenue que avisa que hay más filas arriba o abajo; el JS la enciende solo hacia el lado
   donde todavía hay contenido. Deja libre la barra. */
.WebinarsHistory-list-shadow {
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

.WebinarsHistory-list-shadow--top {
    top: 0;
    background: linear-gradient(to bottom, rgba(15, 15, 18, 0.2) 0%, rgba(15, 15, 18, 0) 100%);
}

.WebinarsHistory-list-shadow--bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(15, 15, 18, 0.2) 0%, rgba(15, 15, 18, 0) 100%);
}

.WebinarsHistory-list-shadow--visible {
    opacity: 1;
}

/* Cursor "agarrado" y sin selección de texto mientras dura el arrastre con mouse. */
.WebinarsHistory-is-grabbing,
.WebinarsHistory-is-grabbing * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* --- Fila: miniatura y texto, con separador entre filas. --- */
.WebinarsHistory-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
}

.WebinarsHistory-item + .WebinarsHistory-item {
    border-top: 1px solid #e0e3e8;
}

/* Próximos: texto a la izquierda de la miniatura y alineado a la derecha. */
.WebinarsHistory-card--upcoming .WebinarsHistory-item {
    flex-direction: row-reverse;
    text-align: right;
}

.WebinarsHistory-item-media {
    flex: none;
    width: var(--WebinarsHistory-image-width);
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    /* BTCN-356: respaldo mientras carga la imagen y portada de un recurso sin Thumbnail image (el
       mismo degradado de ResourceSpotlightCarousel). */
    background: linear-gradient(157deg, #f2f1ef 7%, #e1e0de 79%);
}

.WebinarsHistory-item-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.WebinarsHistory-item-body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.WebinarsHistory-card--upcoming .WebinarsHistory-item-body {
    align-items: flex-end;
}

.WebinarsHistory-item-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    color: #0f0f12;
}

.WebinarsHistory-item-meta {
    margin: 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: normal;
    color: #66666e;
}

/* Enlace con la flecha estándar de LegalLinksSection: la flecha se separa al pasar el mouse. */
.WebinarsHistory-item-link {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    max-width: calc(100% - 4px); /* Deja lugar a los 4px que crece en hover. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    transition: gap 0.2s ease-in-out, margin-inline-end 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Flecha, reserva y tope al mismo ritmo. */
}

/* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
.WebinarsHistory-item-link,
.WebinarsHistory-item-link:link,
.WebinarsHistory-item-link:visited,
.WebinarsHistory-item-link:hover,
.WebinarsHistory-item-link:focus,
.WebinarsHistory-item-link:active {
    color: #429cde;
    text-decoration: none;
}

/* Próximos: el enlace va contra la derecha, así que reserva los 4px que crece. */
.WebinarsHistory-card--upcoming .WebinarsHistory-item-link {
    margin-inline-end: 4px; /* El texto no se corre al abrirse la flecha. */
}

/* La flecha se corre al abrir la separación; el tope crece lo mismo y el texto no se mueve. */
.WebinarsHistory-item-link:hover,
.WebinarsHistory-item-link:focus-visible {
    gap: 10px; /* Separación estándar en hover y foco. */
    max-width: 100%; /* El tope crece los 4px de la flecha. */
}

.WebinarsHistory-card--upcoming .WebinarsHistory-item-link:hover,
.WebinarsHistory-card--upcoming .WebinarsHistory-item-link:focus-visible {
    margin-inline-end: 0; /* Cede la reserva: el borde izquierdo no cambia. */
}

/* Leyenda: dos renglones como máximo; lo que sobra se corta con puntos suspensivos. */
.WebinarsHistory-link-text {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    min-width: 0; /* Cede ancho a la flecha. */
    overflow: hidden; /* Recorta lo que no entra. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

.WebinarsHistory-link-arrow {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sin animación para quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .WebinarsHistory-item-link,
    .WebinarsHistory-list-shadow {
        transition: none;
    }

    .WebinarsHistory-item-link:hover,
    .WebinarsHistory-item-link:focus-visible {
        gap: 6px; /* La flecha no se corre. */
        max-width: calc(100% - 4px); /* El tope no crece. */
    }

    .WebinarsHistory-card--upcoming .WebinarsHistory-item-link:hover,
    .WebinarsHistory-card--upcoming .WebinarsHistory-item-link:focus-visible {
        margin-inline-end: 4px; /* La reserva se queda. */
    }
}

/* --- Tablet: una columna, próximos arriba. --- */
@media (max-width: 1024px) {
    .WebinarsHistory-content {
        padding: 30px 32px;
    }

    .WebinarsHistory-columns {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .WebinarsHistory-card {
        flex: none;
        --WebinarsHistory-pad: 26px;
    }

}

/* --- Mobile. --- */
@media (max-width: 500px) {
    .WebinarsHistory-content {
        padding: 30px 20px;
    }

    .WebinarsHistory-columns {
        gap: 16px;
    }

    /* Miniatura de los próximos más angosta, como en el nodo de mobile. */
    .WebinarsHistory-card--upcoming {
        --WebinarsHistory-image-width: 100px;
    }
}