/*
 * Intellego PC / iOS web
 * Corrección aislada del popup de película.
 *
 * Cargar DESPUÉS de css/inicio.css.
 */

/* Evita que el documento de fondo se desplace mientras está abierta la ficha. */
html.with-modal-popup,
html.with-modal-popup body {
  overflow: hidden !important;
}

/*
 * Framework7 aplica en tablet/escritorio:
 * top: 50%, left: 50% y márgenes negativos.
 * Al combinarse con el popup personalizado, esos márgenes lo enviaban lejos.
 */
.popup.movie-popup {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;

  width: 100vw !important;
  max-width: none !important;

  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;

  margin: 0 !important;
  border-radius: 0 !important;

  box-sizing: border-box !important;
  overflow: hidden !important;

  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(10px, env(safe-area-inset-right, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(10px, env(safe-area-inset-left, 0px)) !important;

  background: rgba(4, 7, 12, 0.78) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  place-items: center !important;
  transform: translate3d(0, 100dvh, 0) !important;
}

/* Estado abierto y cerrado controlado por Framework7. */
.popup.movie-popup.modal-in {
  display: grid !important;
  transform: translate3d(0, 0, 0) !important;
}

.popup.movie-popup.modal-out {
  display: grid !important;
  transform: translate3d(0, 100dvh, 0) !important;
}

/* Contenedor interior estable en escritorio y Safari/iOS. */
.popup.movie-popup .movie-popup-shell {
  position: relative !important;

  width: min(920px, calc(100vw - 32px)) !important;
  max-width: 920px !important;

  height: auto !important;
  max-height: min(760px, calc(100dvh - 32px)) !important;

  margin: 0 auto !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  border-radius: 22px !important;
  background: #101620 !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62) !important;
}

/* Escritorio: imagen y contenido en dos columnas sin salirse del viewport. */
@media (min-width: 700px) {
  .popup.movie-popup .movie-popup-shell {
    display: grid !important;
    grid-template-columns: minmax(260px, 42%) minmax(0, 1fr) !important;
  }

  .popup.movie-popup .movie-popup-media {
    min-height: 420px;
    height: 100% !important;
    max-height: 760px;
    aspect-ratio: auto !important;
  }

  .popup.movie-popup .movie-popup-body {
    min-width: 0;
    align-self: center;
    padding: clamp(26px, 4vw, 46px) !important;
  }
}

/* Móvil y iPhone: sheet inferior, siempre dentro del área visible. */
@media (max-width: 699px) {
  .popup.movie-popup {
    place-items: end center !important;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      0
      0
      0 !important;
  }

  .popup.movie-popup .movie-popup-shell {
    width: 100% !important;
    max-width: 100% !important;
    max-height:
      calc(
        100dvh -
        max(8px, env(safe-area-inset-top, 0px))
      ) !important;

    border-radius: 22px 22px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .popup.movie-popup .movie-popup-media {
    max-height: min(220px, 31dvh) !important;
  }

  .popup.movie-popup .movie-popup-body {
    padding:
      16px
      18px
      calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* iOS antiguo sin soporte completo para dvh. */
@supports (-webkit-touch-callout: none) {
  .popup.movie-popup {
    height: -webkit-fill-available !important;
  }

  .popup.movie-popup .movie-popup-shell {
    max-height:
      calc(
        -webkit-fill-available -
        max(8px, env(safe-area-inset-top, 0px))
      );
  }
}