/* =====================================================================
   detail.css: the title page (title.js). Hero (backdrop or poster),
   actions, resume bar, synopsis, episodes section, related row,
   Información and the loading skeleton.
   Mobile first: the base is the stacked layout (16:9 media from y=0, the
   copy below it); ≥600 puts every action in one row; the billboard takes
   over at ≥861 landscape or ≥1120 (the negation of ui.js mq.stacked).
   ===================================================================== */

/* ------------------------------------------------------------- canvas */
/* --tint is "r, g, b": the tokens.css default, or sampled from the backdrop by title.js.
   The scrims live here because they need --canvas. */
.page--title {
  --canvas: rgb(var(--tint));
  --detail-scrim-y: linear-gradient(0deg, var(--canvas) 0, rgba(11, 11, 13, .62) 20%, rgba(11, 11, 13, 0) 46%);
  --detail-scrim-stacked: linear-gradient(0deg, var(--canvas) 0, rgba(11, 11, 13, 0) 40%);
  background: linear-gradient(180deg, rgb(var(--tint)) 0, var(--bg) 1100px);
}
/* The scrims end in --canvas, so the hero is --canvas under its art and the body fades from it to --bg:
   no seam where the image ends, however tall the hero grows. */
.detail__hero { position: relative; isolation: isolate; background: var(--canvas); }
.detail__body { padding-top: 40px; background: linear-gradient(180deg, var(--canvas) 0, var(--bg) 480px); }

/* ------------------------------------------------------ media: stacked */
.detail__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.detail__backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 20%;
  transition: opacity var(--dur-5) var(--ease-std);
}
/* Set by title.js only while a not yet complete image decodes. */
.detail__backdrop.is-pending { opacity: 0; }
/* Top scrim for the transparent header, fade into the canvas. */
.detail__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--scrim-top), var(--detail-scrim-stacked);
  /* The shorthand resets the repeat: without this the 140px scrim tiles down the image. */
  background-size: 100% 140px, 100% 100%; background-repeat: no-repeat;
}

/* --------------------------------------------------------------- info */
.detail__info { position: relative; z-index: 1; min-width: 0; max-width: 680px; margin-top: -24px; padding: 0 var(--gutter); }
.detail__kind { color: var(--text-2); }
.detail__title {
  /* .08em of padding keeps the 3-line clamp from cutting accents and descenders. */
  margin: calc(10px - .08em) 0 -.08em; padding: .08em 0;
  font-size: clamp(26px, 7vw, 34px); line-height: 1.1; letter-spacing: var(--ls-display); font-weight: 700;
  text-wrap: balance; overflow-wrap: break-word;
}
.detail__original { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.35; }
.detail__meta { margin-top: 12px; font-size: 14px; font-weight: 500; }

/* ------------------------------------------------------------ actions */
.detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
/* Outside phones the secondary buttons join the row; engines without display:contents keep a flex group. */
.detail__secondary { display: flex; display: contents; flex-wrap: wrap; gap: 12px; }
/* Phones: a full-width primary, then the secondary buttons in equal columns (hidden ones take none). */
@media (max-width: 599px) {
  .detail__actions { flex-direction: column; align-items: stretch; margin-top: 20px; }
  .detail__play { width: 100%; height: 50px; }
  .detail__secondary { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
  .detail__secondary .btn { min-width: 0; padding: 0 10px; gap: 6px; font-size: 14px; }
  /* Three columns on a 360px screen: "Desde el principio" wraps to two lines instead of overflowing. */
  .detail__secondary .detail__label { min-width: 0; white-space: normal; line-height: 1.15; text-align: center; }
}
/* Three buttons on a small phone: single words ("Episodios", "principio") cannot wrap, so the icons give way. */
@media (max-width: 399px) {
  .detail__secondary:has(> .detail__restart:not([hidden]) + .detail__to-episodes) .icon { display: none; }
}
/* "Desde el principio" is icon-only below 1120 (its aria-label names it). */
@media (min-width: 600px) and (max-width: 1119px) {
  .detail__restart { width: var(--control-lg); padding: 0; }
  .detail__restart .detail__label { display: none; }
}

/* ------------------------------------------------------- resume, copy */
.detail__resume { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.detail__bar { position: relative; flex: 1; min-width: 0; height: 4px; border-radius: 2px; overflow: hidden; background: var(--progress-track); }
.detail__bar > span { display: block; height: 100%; background: var(--progress); transform-origin: left; }
.detail__left { flex: none; color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 1.3; }

.detail__synopsis { max-width: var(--measure); margin-top: 20px; color: var(--text-soft); font-size: 15px; line-height: 1.5; }
/* 44px hit area; the negative margins keep it visually tight under the text. */
.detail__more {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: -4px 0 -6px -10px;
  border-radius: var(--radius-pill); color: var(--text); font: 600 14px/1 var(--font);
}
@media (hover: hover) and (pointer: fine) { .detail__more:hover { text-decoration: underline; text-underline-offset: 3px; } }
.detail__cast {
  max-width: var(--measure); margin-top: 12px; color: var(--text-2); font-size: 14px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Only under a visible "Más": a hidden one is still the cast's DOM sibling. */
.detail__more:not([hidden]) + .detail__cast { margin-top: 2px; }
.detail__cast-label { color: var(--text-3); font-weight: 500; }

/* ------------------------------------------------- no backdrop: poster */
.detail__hero--plain { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: calc(var(--header-h) + 24px) var(--gutter) 8px; }
.detail__hero--plain .detail__info { margin: 0; padding: 0; }
.detail__poster {
  position: relative; flex: none; width: clamp(160px, 15vw, 240px); aspect-ratio: 2 / 3;
  border-radius: var(--radius); overflow: hidden; background: var(--surface-1); box-shadow: var(--shadow-2);
}
.detail__poster img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------- tablet portrait (TP) */
@media (min-width: 600px) {
  .detail__title { font-size: clamp(34px, 5vw, 44px); line-height: 1.06; }
  .detail__hero--plain { flex-direction: row; align-items: flex-end; gap: 40px; padding: calc(var(--header-h) + 48px) var(--gutter) 48px; }
  .detail__hero--plain .detail__info { flex: 1 1 auto; }
}

/* ---------------------------------------------------------- billboard */
/* The info block sits in the flow at the bottom (not absolute), so a long title or an open synopsis
   grows the hero instead of running under the header; the art keeps the billboard height. */
@media (min-width: 861px) and (orientation: landscape), (min-width: 1120px) {
  .detail__hero--media {
    display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
    min-height: 520px; min-height: max(520px, min(78vh, 860px)); min-height: max(520px, min(78svh, 860px));
  }
  .detail__hero--media .detail__media {
    position: absolute; top: 0; left: 0; right: 0; aspect-ratio: auto;
    height: 520px; height: max(520px, min(78vh, 860px)); height: max(520px, min(78svh, 860px));
  }
  .detail__media::after {
    background: var(--scrim-top), var(--scrim-hero-x), var(--detail-scrim-y);
    background-size: 100% 140px, 100% 100%, 100% 100%; background-repeat: no-repeat;
  }
  .detail__hero--media .detail__info { margin: 0 var(--gutter) 56px; padding: calc(var(--header-h) + 32px) 0 0; }
  .detail__hero--media .detail__kind, .detail__hero--media .detail__original, .detail__hero--media .detail__meta,
  .detail__hero--media .detail__left, .detail__hero--media .detail__synopsis, .detail__hero--media .detail__cast {
    text-shadow: var(--text-shadow-img);
  }
  .detail__hero--media .detail__title { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }

  .detail__title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
  .detail__meta { margin-top: 14px; font-size: 15px; }
  .detail__actions { margin-top: 28px; }
  .detail__bar { flex: none; width: 240px; }
  .detail__synopsis { margin-top: 24px; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
  /* The episodes are one scroll away: "Episodios" is for the stacked layouts only. */
  .detail__to-episodes { display: none; }
  .detail__body { padding-top: 48px; }
}

/* Engines without aspect-ratio would collapse the media and the poster to 0px. */
@supports not (aspect-ratio: 16 / 9) {
  .detail__media { height: 56.25vw; }
  .detail__poster { height: clamp(240px, 22.5vw, 360px); }
}
/* Short landscape. Stacked (phones on their side): a 16:9 image would be taller than the screen. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 860px) {
  .detail__media { aspect-ratio: auto; height: 72vh; height: 72svh; }
}
/* Billboard on a short screen: one screen of art, the copy at its foot. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 861px) {
  .detail__hero--media { min-height: 100vh; min-height: 100svh; }
  .detail__hero--media .detail__media { height: 100vh; height: 100svh; }
  .detail__hero--media .detail__info { margin-bottom: 24px; padding-top: calc(var(--header-h) + 16px); }
  .detail__title { font-size: clamp(28px, 4vw, 40px); }
}

/* ------------------------------------------------- sections, episodes */
.detail__body > * + * { margin-top: 48px; }
@media (min-width: 861px) { .detail__body > * + * { margin-top: 64px; } }
.detail__section { padding: 0 var(--gutter); }
/* ?from=seasons lands here, clear of the fixed header. */
#episodios { scroll-margin-top: calc(var(--header-h) + 16px); }
.detail__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.detail__heading { font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--ls-title-2); font-weight: 600; }
.detail__count { color: var(--text-2); font-size: 15px; }
.detail__head + .detail__episodes { margin-top: 16px; }

/* Season chips: one scrolling track bleeding to the screen edges. The 6px padding keeps the
   3px focus ring and its 3px offset unclipped; the margins give the space back (16px around). */
.seasons {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 6px var(--gutter); margin: 10px calc(-1 * var(--gutter)); scroll-padding: 0 var(--gutter);
}
.seasons::-webkit-scrollbar { display: none; }
/* A mouse wheel alone does not scroll sideways: mouse users keep a thin scrollbar. */
@media (hover: hover) and (pointer: fine) { .seasons { scrollbar-width: thin; } }
/* More than 8 seasons: one "Temporada" picker (ui.js pickerControl). */
.detail__season-picker { display: flex; width: max-content; max-width: 100%; margin: 16px 0; }

/* On the tinted canvas the tiles are translucent, so they read the same on every shade of the fade. */
.page--title .ep--num { background: var(--hairline); }
.page--title .ep--row .ep__tile { background: var(--fill-1); }
.page--title .ep.is-watched .ep__tile { background: var(--hairline); }
.page--title .ep:focus-visible { background: var(--fill-2); }
@media (hover: hover) and (pointer: fine) { .page--title .ep:hover { background: var(--fill-1); } }

/* D-pad moves (focus.js scrollIntoView "nearest") keep the target clear of the fixed header and tab bar. */
.detail__actions .btn, .detail__more, .seasons .chip, .detail__season-picker select, .page--title .ranges button, .page--title .ep {
  scroll-margin-top: calc(var(--header-h) + 16px); scroll-margin-bottom: calc(var(--tabbar-total) + 16px);
}

/* ------------------------------------------------- related, Información */
.info .detail__heading { margin-bottom: 20px; }
.info-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 880px; }
@media (min-width: 861px) { .info-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; } }
.info-list dt { color: var(--text-3); font-size: var(--fs-caption); font-weight: 500; line-height: var(--lh-caption); }
.info-list dd { margin-top: 2px; color: var(--text); font-size: var(--fs-body); line-height: 1.5; overflow-wrap: break-word; }

/* ----------------------------------------------------------- skeleton */
/* title.js renders it with the hero classes, so it has the loaded page's geometry in every tier. */
.detail-skeleton .detail__media { border-radius: 0; }
.detail-skeleton .detail__info .skeleton { background: var(--surface-3); }
.detail-skeleton__line { width: 40%; height: 14px; margin-top: 12px; border-radius: var(--radius-xs); }
.detail-skeleton__line--kind { width: 120px; height: 12px; margin-top: 0; }
.detail-skeleton__title { width: 70%; height: 34px; margin-top: 14px; border-radius: var(--radius-sm); }
@media (max-width: 599px) {
  .detail-skeleton__pill { width: auto; height: 50px; }
  .detail-skeleton__pill + .detail-skeleton__pill { height: 44px; }
}
@media (min-width: 861px) and (orientation: landscape), (min-width: 1120px) {
  .detail-skeleton__title { width: 60%; height: 56px; }
  .detail-skeleton__pill { height: var(--control-lg); }
}

/* ----------------------------------------------------------------- TV */
html.is-tv .detail__hero--media { min-height: 70vh; min-height: 70svh; }
html.is-tv .detail__hero--media .detail__media { height: 70vh; height: 70svh; }
html.is-tv .detail__hero--media .detail__info { max-width: calc(900px * var(--tvu)); margin-bottom: calc(64px * var(--tvu)); }
html.is-tv .detail__poster { width: calc(300px * var(--tvu)); }
html.is-tv .detail__original, html.is-tv .detail__meta, html.is-tv .detail__count { font-size: var(--fs-callout); }
html.is-tv .detail__left, html.is-tv .detail__cast { font-size: var(--fs-caption); }
html.is-tv .detail__actions { gap: calc(16px * var(--tvu)); margin-top: calc(32px * var(--tvu)); }
html.is-tv .detail__bar { width: calc(320px * var(--tvu)); height: calc(6px * var(--tvu)); }
html.is-tv .detail__more { min-height: var(--control); font-size: var(--fs-callout); }
html.is-tv .detail__body { padding-top: calc(56px * var(--tvu)); }
html.is-tv .detail__body > * + * { margin-top: calc(80px * var(--tvu)); }
html.is-tv .detail__head + .detail__episodes { margin-top: calc(24px * var(--tvu)); }
html.is-tv .info .detail__heading { margin-bottom: calc(24px * var(--tvu)); }
/* The focused chip scales 1.06, so its ring reaches about 9px out: more padding, same space around the track. */
html.is-tv .seasons { padding-top: 10px; padding-bottom: 10px; margin: calc(14px * var(--tvu) - 4px) calc(-1 * var(--gutter)); gap: calc(12px * var(--tvu)); }
html.is-tv .info-list { max-width: calc(1200px * var(--tvu)); gap: calc(28px * var(--tvu)) calc(64px * var(--tvu)); }