/* =====================================================================
   catalog.css: home (featured carousel, the rows under it, the hero
   skeleton). Sections, search and Mi lista rules follow below.
   Billboard first; the stacked layout (≤860, portrait ≤1119) overrides it.
   ===================================================================== */

/* ---------------------------------------------------------- hero: billboard */
.hero {
  position: relative; isolation: isolate; overflow: hidden; background: #000;
  height: min(82vh, 920px); height: min(82svh, 920px); min-height: 520px;
}
.hero__slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  /* The outgoing slide waits under the incoming one, then drops: the crossfade never dips to black. */
  transition: opacity 0s linear var(--dur-6);
}
.hero__slide.is-active { z-index: 1; opacity: 1; pointer-events: auto; transition: opacity var(--dur-6) var(--ease-std); }

.hero__media { position: absolute; inset: 0; display: block; background: #000; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.hero__image {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 25%; user-select: none; -webkit-user-drag: none;
}
/* Top scrim for the transparent header, side scrim for the copy, fade into the rows. */
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--scrim-top), var(--scrim-hero-x), linear-gradient(0deg, var(--bg) 0, rgba(11, 11, 13, .62) 20%, rgba(11, 11, 13, 0) 46%);
  background-size: 100% 140px, 100% 100%, 100% 100%; background-repeat: no-repeat;
}

.hero__body {
  position: absolute; z-index: 1; left: var(--gutter); bottom: 136px; width: min(640px, 46vw);
  transition: opacity var(--dur-2) var(--ease-in);
}
.hero__slide:not(.is-active) .hero__body { opacity: 0; }
.hero__slide.is-entering .hero__body { animation: hero-in var(--dur-5) var(--ease-calm) 200ms both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } }

.hero__kind { color: var(--text-2); text-shadow: var(--text-shadow-img); }
.hero__title {
  /* At line-height 1 accents and descenders overflow the line box; .1em of padding keeps the clamp from cutting them. */
  margin: calc(12px - .1em) 0 -.1em; padding: .1em 0;
  font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); font-weight: 700;
  text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero__title a { color: inherit; }
.hero__meta { margin-top: 14px; font-size: 15px; font-weight: 500; text-shadow: var(--text-shadow-img); }
.hero__synopsis {
  max-width: 52ch; margin-top: 16px; color: var(--text-soft);
  font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); text-shadow: var(--text-shadow-img);
}
.hero__actions { display: flex; gap: 12px; margin-top: 28px; }

/* ------------------------------------------------------- hero: controls */
/* [pause] [‹] 01 ━━ 06 [›]. Centred on the 52px action row, whose bottom is the body's. */
.hero__controls {
  position: absolute; z-index: 2; right: var(--gutter); bottom: calc(136px + (var(--control-lg) - var(--control)) / 2);
  display: flex; align-items: center; gap: 4px;
}
.hero__ctrl {
  display: grid; place-items: center; flex: none; width: var(--control); height: var(--control); border-radius: 50%;
  color: var(--text-2);
  transition: color var(--dur-2), background-color var(--dur-2), transform var(--dur-1) var(--ease-std);
}
.hero__ctrl .icon { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.hero__pause .icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .hero__ctrl:hover { color: var(--text); } }
.hero__ctrl:active { transform: scale(.94); }
.hero__index { display: inline-flex; align-items: center; gap: 10px; margin: 0 6px; font-size: 15px; line-height: 1; text-shadow: var(--text-shadow-img); }
.hero__index b { color: var(--text); font-weight: 600; }
.hero__index span { color: var(--text-2); font-weight: 500; }
.hero__rule { position: relative; display: block; width: 48px; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(255, 255, 255, .3); }
.hero__rule::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff;
  transform: scaleX(0); transform-origin: left;
}
/* home.js swaps in a fresh rule on every slide, so the fill restarts with the 9 s timer. */
.hero.is-rotating .hero__rule::after { animation: hero-rule var(--dur-rotate) linear forwards; }
.hero.is-paused .hero__rule::after { animation-play-state: paused; }
@keyframes hero-rule { to { transform: scaleX(1); } }

/* ------------------------------------------------- hero: rows, skeleton */
/* The first row tucks into the bottom of the billboard so posters peek above the fold. */
.hero + .rows, .skeleton-hero + .rows { margin-top: -72px; }
.skeleton-hero + .rows--top { padding-top: 0; }

/* ------------------------------------------------------------ hero: tiers */
@media (min-width: 861px) and (max-width: 1279px) {
  .hero { height: min(78vh, 760px); height: min(78svh, 760px); }
  .hero__body { bottom: 120px; width: min(560px, 52vw); }
  .hero__controls { bottom: calc(120px + (var(--control-lg) - var(--control)) / 2); }
  .hero + .rows, .skeleton-hero + .rows { margin-top: -64px; }
}
@media (min-width: 1680px) {
  .hero__body { bottom: 150px; width: 680px; }
  .hero__controls { bottom: calc(150px + (var(--control-lg) - var(--control)) / 2); }
  .skeleton-hero__body { bottom: 150px; width: 680px; }
}
/* Short landscape billboard (wide phones on their side): one screen tall, no synopsis. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 861px) {
  .hero, .skeleton-hero { min-height: 0; height: 100vh; height: 100svh; }
  .hero__body, .skeleton-hero__body { bottom: 88px; }
  .hero__title { font-size: clamp(28px, 4vw, 40px); }
  .hero__synopsis { display: none; }
  .hero__controls { bottom: calc(88px + (var(--control-lg) - var(--control)) / 2); }
}

/* --------------------------------------------------------- hero: stacked */
/* Phones and portrait tablets: a 4:3 image from y=0 under the transparent header, the copy below it.
   Every slide shares one grid cell, so the tallest sets the height and the crossfade still works. */
@media (max-width: 860px), (orientation: portrait) and (max-width: 1119px) {
  .hero { display: grid; height: auto; min-height: 0; overflow: visible; background: none; }
  .hero__slide { position: relative; inset: auto; grid-area: 1 / 1; }
  .hero__media { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; }
  .hero__media::after {
    background: var(--scrim-top), linear-gradient(0deg, var(--bg) 0, rgba(11, 11, 13, 0) 40%);
    /* The shorthand resets the repeat: without this the 140px scrim tiles down the image. */
    background-size: 100% 140px, 100% 100%; background-repeat: no-repeat;
  }
  .hero__body { position: relative; left: auto; bottom: auto; width: auto; max-width: 600px; margin-top: -96px; padding: 0 var(--gutter); }
  .hero__title { font-size: clamp(34px, 5.6vw, 48px); line-height: 1.08; }
  .hero__synopsis { margin-top: 12px; font-size: 16px; line-height: 1.5; -webkit-line-clamp: 2; }
  /* Reproducir and Mi lista: side by side, same width, 48px. */
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; max-width: 440px; margin-top: 24px; }
  .hero__actions .btn { min-width: 0; height: 48px; padding: 0 16px; font-size: 16px; }
  .hero__actions .btn .icon { width: 20px; height: 20px; }
  .hero__controls { position: static; grid-area: 2 / 1; margin-top: 16px; padding: 0 calc(var(--gutter) - 10px); }
  .hero + .rows, .skeleton-hero + .rows { margin-top: 24px; }

  .skeleton-hero__media { aspect-ratio: 4 / 3; }
  .skeleton-hero__body { margin-top: -96px; }
  .skeleton-hero__actions { display: grid; grid-template-columns: 1fr 1fr; max-width: 440px; }
  .skeleton-hero__actions .skeleton--pill { width: auto; }
}
@media (max-width: 599px) {
  .hero__body { margin-top: -72px; text-align: center; }
  .hero__title { font-size: clamp(26px, 7.6vw, 32px); line-height: 1.1; }
  .hero__meta { justify-content: center; }
  .hero__synopsis { display: none; }
  .hero__actions { max-width: none; margin-top: 20px; }
  .hero__controls { justify-content: center; }
  .skeleton-hero__body { margin-top: -72px; }
  .skeleton-hero__actions { max-width: none; }
}
/* Engines without aspect-ratio would collapse the media to 0px. */
@supports not (aspect-ratio: 4 / 3) {
  @media (max-width: 860px), (orientation: portrait) and (max-width: 1119px) {
    .hero__media, .skeleton-hero__media { height: 75vw; }
  }
}
/* Stacked and short (phones in landscape): a 4:3 image would be taller than the screen. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 860px) {
  .hero__media, .skeleton-hero__media { aspect-ratio: auto; height: 72vh; height: 72svh; }
}

/* ---------------------------------------------------------------- hero: TV */
/* No auto-advance on TV or with reduced motion: no pause button and no fill. */
@media (prefers-reduced-motion: reduce) {
  .hero__pause, .hero__rule::after { display: none; }
  .hero__slide.is-entering .hero__body { animation: none; }
}
html.is-tv .hero__pause, html.is-tv .hero__rule::after { display: none; }
html.is-tv .hero { height: 74vh; height: 74svh; min-height: calc(520px * var(--tvu)); }
html.is-tv .hero__body { bottom: calc(160px * var(--tvu)); width: calc(820px * var(--tvu)); }
html.is-tv .hero__actions { gap: calc(16px * var(--tvu)); margin-top: calc(32px * var(--tvu)); }
html.is-tv .hero__meta { font-size: var(--fs-callout); }
html.is-tv .hero__controls { bottom: calc(160px * var(--tvu) + (var(--control-lg) - var(--control)) / 2); }
html.is-tv .hero__ctrl .icon { width: calc(28px * var(--tvu)); height: calc(28px * var(--tvu)); }
html.is-tv .hero__ctrl:focus-visible { background: var(--inverse); color: var(--on-inverse); }
html.is-tv .hero__index { font-size: var(--fs-callout); }
html.is-tv .hero + .rows, html.is-tv .skeleton-hero + .rows { margin-top: calc(-96px * var(--tvu)); }

/* =====================================================================
   List pages: sections and collections (browse.js), search (search.js)
   and Mi lista (mylist.js).
   ===================================================================== */

/* ---------------------------------------------------------- page head */
/* h1, count and (≥1120) the filters share one line; the filters wrap below on narrower screens. */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 0; margin-bottom: 20px; }
.page-head h1 {
  min-width: 0; font-size: var(--fs-title-1); line-height: var(--lh-title-1); letter-spacing: var(--ls-title-1);
  font-weight: 700; overflow-wrap: anywhere;
}
.page-head__eyebrow { flex: 0 0 100%; margin-bottom: -4px; color: var(--text-3); }
.page-head__count { margin-left: 12px; color: var(--text-2); font-size: 15px; line-height: 1.3; }
html.is-tv .page-head__count { font-size: var(--fs-callout); }

/* ------------------------------------------------------------ filters */
.filters { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters__clear .icon { width: 16px; height: 16px; stroke-width: 2.2; }
/* Género and Año before their lists arrive: same shape, not usable yet. */
.picker-wrap.is-pending { opacity: .5; }
@media (min-width: 1120px) {
  .page-head .filters { flex: 0 0 auto; align-self: center; max-width: 100%; margin-left: auto; padding-left: 24px; justify-content: flex-end; }
}

/* Colecciones: one scrolling track of link chips under the head (24+ of them would wrap into
   several lines). The 6px padding keeps the 3px focus ring and its 3px offset unclipped; the
   negative margin gives the space back. */
.collections {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 6px; margin: -6px -6px 22px;
}
.collections::-webkit-scrollbar { display: none; }
/* A mouse wheel alone does not scroll sideways: mouse users keep a thin scrollbar. */
@media (hover: hover) and (pointer: fine) { .collections { scrollbar-width: thin; } }
.collections__label { margin-right: 4px; color: var(--text-3); white-space: nowrap; }
html.is-tv .collections { margin-bottom: calc(40px * var(--tvu) - 6px); }

/* Phones: one scrolling row each, bleeding to the screen edges (same 6px ring padding). */
@media (max-width: 599px) {
  /* Section routes only: their subnav carries the title. Collections keep the padded page's spacing. */
  .page--browse:not(.page--collection) { padding-top: calc(var(--header-h) + 12px); }
  .page-head__title--section { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page--browse .page-head { gap: 8px 0; margin-bottom: 12px; }
  /* Under the filters, with its line kept while it is empty so the grid does not jump. */
  .page--browse .page-head__count { order: 3; flex: 0 0 100%; min-height: 16px; margin-left: 0; font-size: 13px; line-height: 16px; }
  .filters, .collections {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 6px var(--gutter);
  }
  .filters::-webkit-scrollbar, .collections::-webkit-scrollbar { display: none; }
  .filters { order: 2; flex: 0 0 auto; width: calc(100% + 2 * var(--gutter)); margin: -6px calc(-1 * var(--gutter)); }
  .collections { margin: -6px calc(-1 * var(--gutter)) 6px; }
}

/* --------------------------------------------------------------- grid */
/* Empty and error states span the whole grid instead of one card cell. */
.grid > .empty { grid-column: 1 / -1; }
.load-more { display: flex; justify-content: center; padding: 40px 0 8px; min-height: 80px; }

/* ------------------------------------------------------------- search */
.search-page__title {
  margin-bottom: 20px; font-size: var(--fs-title-1); line-height: var(--lh-title-1); letter-spacing: var(--ls-title-1); font-weight: 700;
}
@media (max-width: 599px) { .search-page__title { margin-bottom: 16px; font-size: 28px; } }
.search-page__field { max-width: 720px; margin-bottom: 24px; }
.search-page__field .spinner { flex: none; }
/* At ≥1120 the top bar field is the search input (D9). */
@media (min-width: 1120px) { .search-page__field { display: none; } }
html.is-tv .search-page__field { max-width: calc(960px * var(--tvu)); }

.search-page__summary { margin-bottom: 16px; color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; }
html.is-tv .search-page__summary { font-size: var(--fs-callout); }
.search-page__kinds { margin-bottom: 24px; }
.search-page__kinds:empty { display: none; }

/* Empty query: recent searches, Explorar, Géneros. A flex gap skips hidden sections. */
.search-page__discover { display: flex; flex-direction: column; gap: 32px; }
html.is-tv .search-page__discover { gap: calc(48px * var(--tvu)); }
.search-page__heading {
  margin-bottom: 14px; font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--ls-title-2); font-weight: 600;
}
html.is-tv .search-page__heading { margin-bottom: calc(20px * var(--tvu)); }
.search-page__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.search-page__forget { margin-left: 4px; }

/* A recent search: the chip runs the query; the X on its right end removes it. */
.recent { position: relative; display: inline-flex; flex: none; max-width: 100%; }
.recent > .chip { max-width: 100%; padding-right: 44px; }
.recent__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.recent__remove {
  position: absolute; top: 50%; right: 0; width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center; border-radius: 50%; color: var(--text-3);
  transition: color var(--dur-2);
}
.recent__remove .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.recent__remove:focus-visible { outline: 2px solid var(--focus); outline-offset: -6px; box-shadow: none; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .recent__remove:hover { color: var(--text); } }
html.is-tv .recent > .chip { padding-right: var(--control); }
html.is-tv .recent__remove { width: var(--control); height: var(--control); margin-top: calc(var(--control) / -2); }

/* ------------------------------------------------------------ Mi lista */
.page-section { padding-left: var(--gutter); padding-right: var(--gutter); }
.mylist__head { padding-top: calc(var(--header-h) + 24px); margin-bottom: 24px; }
@media (min-width: 861px) { .mylist__head { padding-top: calc(var(--header-h) + 40px); margin-bottom: 32px; } }
html.is-tv .mylist__head { padding-top: calc(var(--header-h) + 56px * var(--tvu)); }
.mylist__continue { margin-bottom: var(--rows-gap); }
.mylist__title {
  margin-bottom: 16px; font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--ls-title-2); font-weight: 600;
}
html.is-tv .mylist__title { margin-bottom: calc(20px * var(--tvu)); }