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

   Videos sugeridos (grilla con la tarjeta del canal) y videos populares (carrusel con puntos).
   Nodos de Figma: 4827:90223 (PC), 4827:91061 (tablet) y 4827:91625 (mobile). Tipografía: site.css.

   PC: sugeridos en una fila de 3 videos y la tarjeta del canal al final; los populares muestran 5
   a la vez. Tablet: 2 columnas con el canal primero y 2 populares con el siguiente asomando.
   Mobile: una columna con el canal primero y un popular con el siguiente asomando.

   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. --- */
.VideoGallery {
    background-color: #ffffff;
    /* El carrusel sangra hasta el borde de la pantalla en tablet y mobile: ese desborde muere acá. */
    overflow-x: clip;
}

/* Contenido centrado dentro del techo del sitio, con 30px arriba y abajo. */
.VideoGallery-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: 32px;
}

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

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

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

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

/* --- Bloque: subtítulo y contenido. --- */
.VideoGallery-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Fila del subtítulo con las flechas del carrusel a la derecha. */
.VideoGallery-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.VideoGallery-block-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    color: #0f0f12;
}

/* --- Tarjeta de video: miniatura con duración, título y línea de canal y vistas. --- */
.VideoGallery-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
.VideoGallery-card,
.VideoGallery-card:link,
.VideoGallery-card:visited,
.VideoGallery-card:hover,
.VideoGallery-card:focus,
.VideoGallery-card:active {
    color: inherit;
    text-decoration: none;
}

.VideoGallery-card:focus-visible,
.VideoGallery-channel:focus-visible {
    outline: 2px solid #429cde;
    outline-offset: 3px;
    border-radius: 10px;
}

.VideoGallery-thumb {
    position: relative;
    display: block;
    height: 168px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #1a1a1f;
}

.VideoGallery-card--popular .VideoGallery-thumb {
    height: 110px;
}

/* Sin miniatura: fondo gris con el ícono de reproducir centrado. */
.VideoGallery-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d9dce0;
}

.VideoGallery-thumb-play {
    width: 22px;
    height: 26px;
    margin-left: 4px; /* Compensa el peso visual del triángulo. */
    fill: rgba(15, 15, 18, 0.55);
}

.VideoGallery-thumb-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Zoom de la miniatura. El hover va acotado a punteros finos: en táctil el hover emulado queda
   pegado después del toque. El foco del teclado dispara lo mismo. */
@media (hover: hover) and (pointer: fine) {
    .VideoGallery-card:hover .VideoGallery-thumb-image {
        transform: scale(1.045);
    }
}

.VideoGallery-card:focus-visible .VideoGallery-thumb-image {
    transform: scale(1.045);
}

.VideoGallery-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.82);
    font-size: 11px;
    font-weight: 600;
    line-height: normal;
    color: #ffffff;
}

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

.VideoGallery-card-meta {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #73737a;
}

/* --- Sugeridos: 3 videos por fila y, a la derecha, la tarjeta del canal. Los que sobran pasan a la
   fila de abajo. --- */
.VideoGallery-suggested {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.VideoGallery-suggested--with-channel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
}

/* Solo la tarjeta del canal, sin videos sugeridos (BTCN-365): ocupa su ancho, sin las columnas
   vacías de los videos. */
.VideoGallery-suggested--channel-only {
    grid-template-columns: minmax(0, 300px);
}

/* Aviso del editor con los videos que no se muestran (BTCN-365): una línea larga sin espacios (las
   de QA) envuelve en lugar de desbordar el aviso. */
.VideoGallery-warning-text {
    overflow-wrap: anywhere;
}

/* Posición fija en la primera fila y la última columna: los videos fluyen alrededor. */
.VideoGallery-suggested--with-channel .VideoGallery-channel {
    grid-column: 4;
    grid-row: 1;
}

/* --- Tarjeta del canal. --- */
.VideoGallery-channel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 26px 22px;
    background-color: #fafafc;
    border: 1.5px solid #e0e3e8;
    border-radius: 12px;
    text-align: center;
}

/* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
.VideoGallery-channel,
.VideoGallery-channel:link,
.VideoGallery-channel:visited,
.VideoGallery-channel:hover,
.VideoGallery-channel:focus,
.VideoGallery-channel:active {
    color: inherit;
    text-decoration: none;
}

.VideoGallery-channel-avatar {
    width: 72px;
    height: 72px;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
}

.VideoGallery-channel-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.VideoGallery-channel-name {
    font-size: 17px;
    font-weight: 700;
    line-height: normal;
    color: #0f0f12;
}

.VideoGallery-channel-details,
.VideoGallery-channel-description {
    max-width: 240px;
    line-height: normal;
    color: #73737a;
}

.VideoGallery-channel-details {
    font-size: 12px;
}

.VideoGallery-channel-description {
    font-size: 12.5px;
}

.VideoGallery-channel-button {
    box-sizing: border-box; /* El relleno entra en el ancho. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    max-width: 100%; /* Nunca más ancho que la tarjeta. */
    padding: 11px 20px;
    border-radius: 22px;
    background-color: #cc1f1f;
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    color: #ffffff;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-out;
}

/* Leyenda: dos renglones como máximo; lo que sobra se corta con puntos suspensivos. */
.VideoGallery-channel-button-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; /* Puede achicarse. */
    overflow: hidden; /* Recorta lo que no entra. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

/* Realce estándar de botones del proyecto: el color se oscurece y el botón crece 1.05. :active lo hace
   existir en táctil. */
.VideoGallery-channel:hover .VideoGallery-channel-button,
.VideoGallery-channel:focus-visible .VideoGallery-channel-button,
.VideoGallery-channel:active .VideoGallery-channel-button {
    background-color: #b01a1a;
    transform: scale(1.05);
}

/* --- Populares: carrusel con desplazamiento nativo y anclaje por tarjeta. --- */
.VideoGallery-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}

.VideoGallery-viewport::-webkit-scrollbar {
    display: none;
}

/* Mientras se arrastra con el mouse no hay anclaje: el JS lo asienta al soltar. */
.VideoGallery-viewport.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

.VideoGallery-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
}

/* Cinco por vista en PC. */
.VideoGallery-slide {
    flex: 0 0 calc((100% - 64px) / 5);
    min-width: 0;
    scroll-snap-align: start;
}

/* --- Flechas del carrusel: mismo patrón y medidas que las de ApplicationCardsCarousel. --- */
.VideoGallery-controls {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto; /* A la derecha aunque no haya subtítulo. */
}

.VideoGallery-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(15, 15, 18, 0.2);
    background-color: transparent;
    font-size: 15px;
    line-height: 1;
    color: rgba(15, 15, 18, 0.55);
    cursor: pointer;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-out;
}

.VideoGallery-control:hover:not(:disabled),
.VideoGallery-control:focus-visible,
.VideoGallery-control:active:not(:disabled) {
    transform: scale(1.05);
}

.VideoGallery-control:disabled {
    opacity: 0.35;
    cursor: default;
}

.VideoGallery-control:focus-visible {
    outline: 2px solid #429cde;
    outline-offset: 3px;
}

.VideoGallery-chevron-icon {
    width: 1.25em;
    height: 1.25em;
    display: block;
    flex: none;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sin animación para quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .VideoGallery-thumb-image {
        transition: none;
    }

    /* El realce de botones se conserva; solo se quita el zoom de la miniatura. */
    .VideoGallery-channel-button,
    .VideoGallery-control {
        transition: background-color 0.2s ease-in-out, transform 0.2s ease-out;
    }

    .VideoGallery-card:hover .VideoGallery-thumb-image,
    .VideoGallery-card:focus-visible .VideoGallery-thumb-image {
        transform: none;
    }
}

/* --- Tablet: 2 columnas con el canal primero; el carrusel sangra hasta el borde derecho y muestra
   2 tarjetas con la siguiente asomando. --- */
@media (max-width: 1024px) {
    .VideoGallery-content {
        padding: 30px 32px;
    }

    .VideoGallery-suggested,
    .VideoGallery-suggested--with-channel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }

    .VideoGallery-suggested--with-channel .VideoGallery-channel {
        grid-column: 1;
        grid-row: 1;
    }

    .VideoGallery-suggested--channel-only {
        grid-template-columns: minmax(0, 300px);
    }

    .VideoGallery-viewport {
        margin-right: -32px;
        padding-right: 32px;
    }

    .VideoGallery-slide {
        flex-basis: calc((100% - 16px) / 2);
    }
}

/* --- Mobile: una columna y un popular por vista con el siguiente asomando. --- */
@media (max-width: 500px) {
    .VideoGallery-content {
        padding: 30px 20px;
    }

    .VideoGallery-suggested,
    .VideoGallery-suggested--with-channel {
        grid-template-columns: minmax(0, 1fr);
    }

    .VideoGallery-viewport {
        margin-right: -20px;
        padding-right: 20px;
    }

    .VideoGallery-slide {
        flex-basis: calc(100% - 28px);
    }
}

/* --- Modal del video: <dialog> nativo, con fondo, Esc y foco atrapado del navegador. --- */
.VideoGallery-modal {
    width: min(1100px, calc(100vw - 64px)); /* Ancho del video, con aire a los costados. */
    max-width: none; /* Sin el tope del navegador. */
    max-height: none; /* Ídem. */
    margin: auto; /* Centrado en la ventana. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    background: transparent; /* El fondo lo da el ::backdrop. */
    overflow: visible; /* El botón de cerrar sale por arriba. */
}

.VideoGallery-modal::backdrop {
    background-color: rgba(15, 15, 18, 0.8); /* Velo plano del sitio. */
}

/* Con el modal abierto la página de atrás no se desplaza. */
html:has(.VideoGallery-modal[open]) {
    overflow: hidden; /* Sin scroll de fondo. */
}

.VideoGallery-modal-frame {
    position: relative; /* Origen del botón de cerrar. */
}

/* Cerrar: arriba a la derecha, por fuera del video. */
.VideoGallery-modal-close {
    position: absolute; /* Sobre el marco. */
    right: 0; /* Pegado al borde derecho del video. */
    bottom: calc(100% + 12px); /* Por encima del video. */
    display: flex; /* Centra el ícono. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: 40px; /* Área de toque cómoda. */
    height: 40px; /* Cuadrada. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    border-radius: 50%; /* Círculo. */
    background-color: #ffffff; /* Blanco. */
    color: var(--color-cool-neutral-02); /* Azul de marca. */
    cursor: pointer; /* Mano de clic. */
    appearance: none; /* Sin los estilos nativos de <button>. */
}

.VideoGallery-modal-close svg {
    width: 18px; /* Ícono. */
    height: 18px; /* Cuadrado. */
}

.VideoGallery-modal-close:focus-visible,
.VideoGallery-start:focus-visible,
.VideoGallery-sound:focus-visible {
    outline: 2px solid #ffffff; /* Blanco, visible sobre el velo. */
    outline-offset: 2px; /* Separado del botón. */
}

/* --- Reproductor: los controles de IntroVideoText. --- */
.VideoGallery-media {
    --VideoGallery-play-size: 72px; /* Diámetro del play. */
    position: relative; /* Origen de los controles. */
    aspect-ratio: 16 / 9; /* Proporción del video. */
    overflow: hidden; /* Recorta al borde redondeado. */
    border-radius: 6px; /* Esquinas estándar. */
    background-color: #0f0f12; /* Fondo mientras carga y en las franjas del video. */
}

.VideoGallery-video {
    position: absolute; /* Ocupa el marco. */
    inset: 0; /* De borde a borde. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: contain; /* Se ve entero: no recorta los subtítulos quemados. */
    pointer-events: none; /* El clic lo toma el play o, si se puede pausar, el video. */
}

.VideoGallery-start {
    position: absolute; /* Cubre el marco. */
    inset: 0; /* De borde a borde. */
    z-index: 1; /* Sobre el video. */
    display: flex; /* Centra el play. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    background: none; /* Transparente. */
    cursor: pointer; /* Mano de clic. */
    appearance: none; /* Sin los estilos nativos de <button>. */
}

.VideoGallery-play {
    display: flex; /* Centra el triángulo. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: var(--VideoGallery-play-size); /* Diámetro. */
    height: var(--VideoGallery-play-size); /* Círculo. */
    border-radius: 50%; /* Círculo. */
    background-color: #ffffff; /* Blanco. */
    transition: transform 0.2s ease-in-out; /* Realce. */
}

.VideoGallery-start:hover .VideoGallery-play,
.VideoGallery-start:focus-visible .VideoGallery-play {
    transform: scale(1.05); /* Realce estándar. */
}

.VideoGallery-play-icon {
    width: 12px; /* Triángulo. */
    height: 14px; /* Ídem. */
    margin-left: 3px; /* Centrado óptico del triángulo. */
    fill: var(--color-cool-neutral-02); /* Azul de marca. */
}

/* Sonido: abajo a la derecha, visible también mientras reproduce. */
.VideoGallery-sound {
    position: absolute; /* Sobre el video. */
    z-index: 2; /* Sobre el play. */
    right: 16px; /* Esquina. */
    bottom: 16px; /* Ídem. */
    display: flex; /* Centra el ícono. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: 40px; /* Área de toque. */
    height: 40px; /* Cuadrada. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    border-radius: 50%; /* Círculo. */
    background-color: #ffffff; /* Blanco. */
    color: var(--color-cool-neutral-02); /* Azul de marca. */
    cursor: pointer; /* Mano de clic. */
    appearance: none; /* Sin los estilos nativos de <button>. */
}

.VideoGallery-sound-icon {
    display: block; /* Sin hueco de línea. */
    width: 20px; /* Ícono. */
    height: 20px; /* Cuadrado. */
}

.VideoGallery-sound-icon--off,
.VideoGallery-media.is-muted .VideoGallery-sound-icon--on {
    display: none; /* Uno de los dos íconos según el estado. */
}

.VideoGallery-media.is-muted .VideoGallery-sound-icon--off {
    display: block; /* Silenciado. */
}

/* Progreso: abajo, a lo ancho; deja lugar al botón de sonido. */
.VideoGallery-progress {
    position: absolute; /* Sobre el video. */
    z-index: 2; /* Sobre el play. */
    left: 16px; /* Margen. */
    right: 72px; /* Lugar para el sonido. */
    bottom: 28px; /* A la altura del centro del sonido. */
    display: flex; /* Tiempo, barra y duración. */
    align-items: center; /* Centrados entre sí. */
    gap: 12px; /* Separación de IntroVideoText. */
}

/* Sin botón de sonido, la barra llega al borde. */
.VideoGallery-media:not(:has(.VideoGallery-sound)) .VideoGallery-progress {
    right: 16px; /* Margen. */
}

.VideoGallery-time {
    flex: none; /* No se comprime. */
    font-size: 13px; /* Tamaño de IntroVideoText. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado. */
    color: rgba(255, 255, 255, 0.85); /* Blanco atenuado. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan. */
    white-space: nowrap; /* En un renglón. */
}

.VideoGallery-track-bar {
    flex: 1 1 0; /* Ocupa lo que queda. */
    min-width: 1px; /* Puede achicarse. */
    height: 3px; /* Grosor de IntroVideoText. */
    border-radius: 6px; /* Extremos redondeados. */
    background-color: rgba(255, 255, 255, 0.35); /* Riel. */
    cursor: pointer; /* Salto por clic. */
}

.VideoGallery-track-fill {
    width: 0; /* Lo actualiza el script. */
    height: 100%; /* Alto del riel. */
    border-radius: inherit; /* Mismos extremos. */
    background-color: #ffffff; /* Avance. */
    pointer-events: none; /* El clic lo toma el riel. */
}

/* Reproduciendo: se va el play; si se puede pausar, el video toma el clic. */
.VideoGallery-media.is-playing .VideoGallery-start {
    display: none; /* Sin play. */
}

.VideoGallery-media[data-video-pausable="true"].is-playing .VideoGallery-video {
    pointer-events: auto; /* Pausa por clic. */
    cursor: pointer; /* Mano de clic. */
}

/* --- Modal en mobile: casi todo el ancho del teléfono y controles más chicos. --- */
@media (max-width: 500px) {
    .VideoGallery-modal {
        width: calc(100vw - 32px); /* Aire de 16px por lado. */
    }

    .VideoGallery-media {
        --VideoGallery-play-size: 56px; /* Play más chico. */
    }

    .VideoGallery-progress {
        left: 12px; /* Margen de mobile. */
        right: 60px; /* Lugar para el sonido. */
        bottom: 22px; /* Centro del sonido. */
        gap: 8px; /* Separación de mobile. */
    }

    .VideoGallery-sound {
        right: 12px; /* Esquina de mobile. */
        bottom: 12px; /* Ídem. */
        width: 36px; /* Área de toque. */
        height: 36px; /* Cuadrada. */
    }
}