/* =============================================================
   HATHOR - Mobile Overrides (HOME - Hero Section)
   REVERTIR: Elimina este archivo y borra el bloque
   "Mobile Overrides" en hathor-elementor.php (seccion 3).
   Este archivo NO afecta el desktop en ninguna forma.
   Breakpoint: max-width 767px (mobile - Elementor standard)
   =============================================================

   ESTRUCTURA REAL DEL DOM:
   - .elementor-element-b474fac  = Seccion principal del hero
   - .elementor-background-video-container = Video de fondo (oculto en mobile por Elementor)
   - .elementor-element-2c59528  = Widget de video inline (solo visible en mobile → el "cuadrado")
   ============================================================= */

@media (max-width: 767px) {

    /* 1. El hero section ocupa toda la pantalla */
    .elementor-element-b474fac.elementor-section {
        min-height: 100vh !important;
        min-height: 100svh !important;
    }

    /* 2. Mostrar el video de fondo en mobile
          Elementor lo oculta con elementor-hidden-mobile (display:none).
          Lo reactivamos para que actue como fondo de pantalla completa. */
    .elementor-element-b474fac .elementor-background-video-container {
        display: block !important;
    }

    /* 3. El video de fondo cubre bien la pantalla vertical del movil */
    .elementor-element-b474fac .elementor-background-video-hosted {
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 4. Ocultar el widget de video inline (era un workaround para mobile,
          ya no se necesita ahora que el video de fondo funciona en mobile) */
    .elementor-element-2c59528 {
        display: none !important;
    }

    /* 5. El overlay del hero en mobile: gradiente de abajo hacia arriba
          para que el texto tenga contraste sin tapar el video */
    .elementor-element-b474fac .elementor-background-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.25) 50%,
            rgba(0, 0, 0, 0.70) 100%
        ) !important;
    }

    /* 6. Columna del contenido: padding comodo para movil */
    .elementor-element-b474fac .elementor-container {
        align-items: flex-end !important;
        min-height: inherit !important;
    }

    /* 7. Movie carousel - TEST: solo imagenes, sin texto (mobile)
          Para revertir: restaurar la version anterior del bloque */

    /* Slides al mismo ancho completo, sin animacion de expansion */
    .hmc-swiper .swiper-slide {
        width: 86vw !important;
        transition: none !important;
    }

    /* Card: altura automatica basada en el poster */
    .hmc-card {
        height: auto !important;
    }

    /* Ocultar el panel de texto completamente */
    .hmc-info,
    .swiper-slide-active .hmc-info {
        display: none !important;
    }

    /* Poster: ancho completo, proporcion vertical, sin recorte */
    .hmc-poster {
        flex: 0 0 auto !important;
        width: 100% !important;
        aspect-ratio: 2 / 3 !important;
        min-width: 0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    /* 8. Gallery Bento: sobrescribir min-height del slot de video
          min-height:240px causa corte visual en mobile. */
    .hgb-slot--a {
        min-height: 0 !important;
    }

    /* 9. Gallery Bento: ocultar solo imagenes secundarias, conservar botones.
          slot--b: panel naranja + video (sin botones)  → ocultar todo
          slot--c2: imagen central entre botones        → ocultar imagen
          slot--d: imagenes adicionales (sin botones)   → ocultar todo
          slot--c1 y slot--c3: "Watch our movies" y "Join" → se conservan */
    .hgb-slot--b,
    .hgb-slot--c2,
    .hgb-slot--d {
        display: none !important;
    }

    /* 10. Films page: boton Explore outline (sin relleno, borde negro, letras negras) */
    .hpa-card__btn {
        background: transparent !important;
        background-color: transparent !important;
        border: 1.5px solid #111111 !important;
        color: #111111 !important;
        margin-bottom: 2rem !important;
    }

    .hpa-card__btn svg {
        stroke: #111111 !important;
    }

    /* 11. Films page: ocultar el meta (año) que no se ve por color blanco sobre blanco */
    .hpa-card__meta {
        display: none !important;
    }

    /* 12. Team carousel: reducir espacio superior del panel de texto */
    .htc-panel {
        padding-top: 14px !important;
    }

    /* 13. The Studio: ocultar lineas divisoras encima y debajo de "Awards" */
    .elementor-element-14773e5,
    .elementor-element-3e4628f {
        display: none !important;
    }

}