/* human-impact-article-layout-fix
   Corrige el bloque “Películas que debes ver” cuando queda afectado por rails/carousels antiguos.
   No cambia colores base: usa variables del tema actual.
*/

#peliculas-recomendadas[data-human-impact-article-fixed="1"] {
  overflow: visible !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-rail,
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-v30-marquee-track,
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-carousel,
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .mm-row {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
  animation: none !important;
  overflow: visible !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 14px !important;
  margin-top: clamp(14px, 2vw, 22px) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: clamp(150px, 17vw, 210px) minmax(0, 1fr) !important;
  gap: clamp(14px, 2.4vw, 26px) !important;
  align-items: start !important;
  overflow: visible !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-cover {
  width: 100% !important;
  max-width: 210px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  justify-self: center !important;
  background: #050505 !important;
  border-radius: 16px !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-body {
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-title,
#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-description {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-description {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
}

#peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-meta {
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

@media (max-width: 720px) {
  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-card {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-cover {
    width: 118px !important;
    max-width: 118px !important;
    border-radius: 14px !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-title {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-description {
    font-size: .86rem !important;
    line-height: 1.38 !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-chip {
    min-height: 25px !important;
    padding: 0 8px !important;
    font-size: .72rem !important;
  }
}

@media (max-width: 420px) {
  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-card {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-cover {
    width: 104px !important;
    max-width: 104px !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-kicker {
    display: none !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-chip[data-extra="director"] {
    display: none !important;
  }
}

@media (max-width: 360px) {
  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-card {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  #peliculas-recomendadas[data-human-impact-article-fixed="1"] .human-impact-article-cover {
    width: 92px !important;
    max-width: 92px !important;
  }
}