/*
 * Portable image layout repairs
 * - every image keeps its source aspect ratio (no forced 160x220 / 320x180 declarations)
 * - card shape follows the image orientation
 * - image content is contained rather than cropped
 */
:root { --site-max-width: 720px; --media-bg: #0b0f15; }

html { background: var(--bg, #000); }
img { max-width: 100%; }

.mexflix-app {
  width: 100%;
  max-width: var(--site-max-width);
  min-height: 100dvh;
  padding-bottom: 112px;
}

.top-bar-inner {
  width: 100%;
  max-width: var(--site-max-width);
  margin-inline: auto;
}

.dl-bar { max-width: var(--site-max-width); }

.cat-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(249, 115, 22, .68) transparent;
}

.cat-scroll::-webkit-scrollbar { display: block; height: 5px; }
.cat-scroll::-webkit-scrollbar-thumb { background: rgba(249, 115, 22, .68); border-radius: 999px; }
.scroll-track.marquee { animation: none !important; }
.scroll-track > a { scroll-snap-align: start; }

.content-card,
.wide-card {
  display: block;
  text-align: left;
  color: inherit;
}

.content-card.media-landscape,
.wide-card.media-landscape {
  flex: 0 0 232px;
  width: 232px;
}

.content-card.media-square,
.wide-card.media-square {
  flex: 0 0 164px;
  width: 164px;
}

.content-card.media-portrait,
.wide-card.media-portrait {
  flex: 0 0 132px;
  width: 132px;
}

.content-card.media-landscape .thumb,
.wide-card.media-landscape .thumb { aspect-ratio: 16 / 9; }
.content-card.media-square .thumb,
.wide-card.media-square .thumb { aspect-ratio: 1 / 1; }
.content-card.media-portrait .thumb,
.wide-card.media-portrait .thumb { aspect-ratio: 2 / 3; }

.content-card .thumb,
.wide-card .thumb {
  background: var(--media-bg);
  border: 1px solid rgba(255, 255, 255, .08);
}

.content-card .thumb img,
.wide-card .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--media-bg);
}

@media (max-width: 420px) {
  .content-card.media-landscape,
  .wide-card.media-landscape { flex-basis: 204px; width: 204px; }
  .content-card.media-square,
  .wide-card.media-square { flex-basis: 150px; width: 150px; }
  .content-card.media-portrait,
  .wide-card.media-portrait { flex-basis: 122px; width: 122px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}