/* V75_MOVIE_HERO_LESS_VERTICAL_START
   Panel principal de Películas más bajo.
   Objetivo: que el bloque mida casi lo mismo que la portada, sin tocar carruseles.
   Panel real: #cine.mm-hero
*/
#cine.mm-hero {
  min-height: clamp(360px, 42vh, 455px) !important;
  margin-top: clamp(8px, 1.4vw, 14px) !important;
}

#cine .mm-hero-inner {
  min-height: inherit !important;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 285px) !important;
  gap: clamp(16px, 3vw, 34px) !important;
  align-items: center !important;
  padding:
    clamp(18px, 3.1vw, 34px)
    clamp(22px, 4.3vw, 52px) !important;
}

#cine .mm-kicker {
  margin-bottom: 8px !important;
  font-size: .68rem !important;
  letter-spacing: .16em !important;
}

#cine .mm-hero h1 {
  font-size: clamp(2.45rem, 5.1vw, 4.35rem) !important;
  line-height: .94 !important;
  margin: 0 0 10px !important;
  max-width: 720px !important;
}

#cine .mm-hero p:not(.mm-kicker):not(.mm-loader-note) {
  max-width: 650px !important;
  font-size: clamp(.92rem, 1.04vw, 1.04rem) !important;
  line-height: 1.42 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#cine .mm-actions,
#cine .mm-hero-actions {
  margin-top: 14px !important;
  gap: .55rem !important;
}

#cine .mm-primary,
#cine .mm-actions a,
#cine .mm-actions button {
  min-height: 40px !important;
  padding: .58rem .92rem !important;
}

#cine .mm-hero-poster {
  width: min(260px, 22vw) !important;
  min-height: clamp(318px, 34vw, 390px) !important;
  max-height: 405px !important;
  justify-self: center !important;
  border-radius: clamp(18px, 2vw, 26px) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,.34) !important;
}

/* Si el overlay Top en tu biblioteca existe por estado anterior, no debe expandir el hero. */
#cine .mm-hero-top-owned-v49 {
  max-height: 320px !important;
  overflow: auto !important;
}

/* Pantallas medianas: mantener proporción baja. */
@media (max-width: 1080px) {
  #cine.mm-hero {
    min-height: clamp(340px, 40vh, 430px) !important;
  }

  #cine .mm-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 245px) !important;
    padding:
      clamp(17px, 3.2vw, 30px)
      clamp(20px, 4.2vw, 42px) !important;
  }

  #cine .mm-hero h1 {
    font-size: clamp(2.25rem, 6.7vw, 3.75rem) !important;
  }

  #cine .mm-hero-poster {
    width: min(230px, 25vw) !important;
    min-height: clamp(292px, 35vw, 360px) !important;
  }
}

/* Móvil: menos altura, pero sigue mostrando portada con buena proporción. */
@media (max-width: 760px) {
  #cine.mm-hero {
    min-height: auto !important;
    margin-top: 10px !important;
    border-radius: 22px !important;
  }

  #cine .mm-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 22px 20px 24px !important;
  }

  #cine .mm-kicker {
    margin-bottom: 7px !important;
  }

  #cine .mm-hero h1 {
    font-size: clamp(2.05rem, 9.4vw, 3.15rem) !important;
    margin-bottom: 10px !important;
  }

  #cine .mm-hero p:not(.mm-kicker):not(.mm-loader-note) {
    font-size: .94rem !important;
    line-height: 1.38 !important;
    -webkit-line-clamp: 2 !important;
  }

  #cine .mm-actions,
  #cine .mm-hero-actions {
    margin-top: 12px !important;
  }

  #cine .mm-hero-poster {
    width: min(185px, 48vw) !important;
    min-height: 255px !important;
    max-height: 275px !important;
    justify-self: start !important;
  }
}

@media (max-width: 440px) {
  #cine .mm-hero-inner {
    padding: 20px 18px 22px !important;
    gap: 12px !important;
  }

  #cine .mm-hero h1 {
    font-size: clamp(1.9rem, 9.8vw, 2.75rem) !important;
  }

  #cine .mm-primary,
  #cine .mm-actions a,
  #cine .mm-actions button {
    min-height: 38px !important;
    padding: .52rem .82rem !important;
  }

  #cine .mm-hero-poster {
    width: min(170px, 48vw) !important;
    min-height: 235px !important;
    max-height: 255px !important;
  }
}
/* V75_MOVIE_HERO_LESS_VERTICAL_END */