/**
 * Greenlight — detail row (.detail-row)
 *
 * The wide detail band that opens under the visual row of the clicked
 * card inside .card-stack, replacing the in-card expansion. That one
 * measured 412–1424px tall inside a 194px column: prose hyphenated into
 * ~160px of usable width, a streaming pill bleeding 27px outside the
 * card, and a screenful of dead horizontal space beside it. This file
 * spends that horizontal space instead of stacking vertically.
 *
 * Direction "Projeção 35mm": warm-dark recess, hairline rules instead
 * of soft shadows, Literata title, Metascore as typographic hero. No
 * card shadows, no glass, no SaaS dashboard tiles.
 *
 * Loaded AFTER styles.css, so same-specificity rules here win on
 * purpose. Streaming pills, reaction buttons and action controls REUSE
 * their existing classes (.card-streaming, .streaming-btn*, .reaction-bar,
 * .card-action, .card-*-link); this file only re-sets their layout and
 * whatever leaks out of the band.
 *
 * Breakpoints narrow→wide: the base is the 481–768px layout, §11
 * re-composes the phone at ≤480, §12 (≥769) and §13 (≥1200) spend width.
 * Contract and rationale: scratchpad onda3/SPEC-VISUAL.md
 */

/* --- 1. Shell — full-width grid item inside .card-stack ----------- */

/* Spans every column of the auto-fill grid: the band lands on its own
   row and the cards above it never move. */
.card-stack > .detail-row { grid-column: 1 / -1; }

.detail-row {
  /* Grid items default to min-width:auto — without this a long provider
     name can widen the whole page. */
  min-width: 0;

  /* Score band of the origin card, inherited by the rule and the score. */
  --detail-band: var(--color-band-neutral);

  /* Stated once here so the type rules below only carry what differs. */
  font-family: var(--font-sans);

  background: var(--color-bg-inset);
  border: 1px solid var(--color-border-line);
  /* The only "connector" to the origin card: same band color, no
     JS-measured caret. */
  border-top: 3px solid var(--detail-band);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  /* scrollIntoView({block:"nearest"}) must not park it flush to the edge. */
  scroll-margin-block: var(--space-md);
}

.detail-row[data-band="green"] { --detail-band: var(--color-band-green); }
.detail-row[data-band="yellow"] { --detail-band: var(--color-band-yellow); }
.detail-row[data-band="red"] { --detail-band: var(--color-band-red); }

/* --- 2. Top bar — eyebrow + close -------------------------------- */

.detail-row-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  min-width: 0;
  padding-block-end: var(--space-2xs);
  margin-block-end: var(--space-sm);
  border-block-end: 1px solid var(--color-border-subtle);
}

.detail-row-eyebrow {
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--line-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent-warm);
  overflow-wrap: break-word;
}

.detail-row-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  flex-shrink: 0;
  min-height: 44px;
  padding-inline: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 600;
  /* Same weight and tracking as `.card-expand`, and — like it — NO
     uppercase: while the band is open the card's own button reads
     "Fechar" a few pixels above this one, and caixa-alta is reserved for
     the eyebrow and data labels (SPEC-VISUAL 6.8). */
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease-settle),
    border-color var(--duration-fast) var(--ease-settle);
}

.detail-row-close:hover { color: var(--color-text-primary); border-color: var(--color-border-line); }

/* --- 3. Internal grid -------------------------------------------- */
/* DOM order is poster → main → where → aside and every breakpoint lays
   those out in that same left-to-right / top-to-bottom order. */

.detail-row-inner {
  display: grid;
  /* 481–768px: poster stays a thumbnail beside the title — a full-width
     2:3 poster would be ~560px tall and bury the text. Below 481 the
     poster column itself is what buries the text; see §11. */
  grid-template-columns: clamp(5.5rem, 26vw, 8rem) minmax(0, 1fr);
  grid-template-areas:
    "poster main"
    "where  where"
    "aside  aside";
  column-gap: var(--space-sm);
  row-gap: var(--space-md);
  align-items: start;
}

.detail-row-poster { grid-area: poster; min-width: 0; }
.detail-row-main { grid-area: main; min-width: 0; }
.detail-row-where { grid-area: where; min-width: 0; }
.detail-row-aside { grid-area: aside; min-width: 0; }

.detail-row-main,
.detail-row-where,
.detail-row-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Magazine column rules, not cards: horizontal while the blocks stack,
   vertical from ≥1200px. */
.detail-row-where,
.detail-row-aside {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border-subtle);
}

/* --- 4. Poster + Metascore hero ---------------------------------- */

.detail-row-poster-img,
.detail-row-poster-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-base);
}

.detail-row-poster-img { height: auto; object-fit: cover; }

.detail-row-poster-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-2xl);
  color: var(--color-text-muted);
}

.detail-row-score {
  margin-block-start: var(--space-2xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

/* Small tracked label above a large numeral — the brand's metascore
   gesture, not a dashboard KPI tile. "Reações" (§7) is the same object
   one column over, so the two share the rule instead of repeating it. */
.detail-row-score-label,
.detail-row-label {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--line-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* Tight to the numeral sitting under it. */
.detail-row-score-label { line-height: 1; }

.detail-row-score-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  /* Band color stays on the large numeral only: #C24A3E clears 3:1 on
     bg-inset as large text but would fail 4.5:1 at body size. */
  color: var(--detail-band);
}

/* --- 5. Main column — title and prose ---------------------------- */

.detail-row-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  overflow-wrap: break-word;
  font-variation-settings: "opsz" 144;
}

.detail-row-fit {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent-green);
}

/* Same green dot as .card-fit — the curation marker stays recognizable. */
.detail-row-fit::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-accent-green);
}

.detail-row-synopsis {
  font-size: var(--text-base);
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
  /* Caps the measure even in a wider column, and turns OFF the global
     html{hyphens:auto} that was chopping prose inside the 160px card. */
  max-width: 68ch;
  hyphens: manual;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.detail-row-note,
.detail-row-reason { line-height: var(--line-normal); max-width: 68ch; }

.detail-row-note { font-size: var(--text-sm); color: var(--color-accent-warm); }

.detail-row-reason {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-inline-start: var(--space-2xs);
  border-inline-start: 2px solid var(--color-border-line);
}

/* No gap and no orphan rule when note/reason/fit come back empty. */
.detail-row-main > p:empty { display: none; }

/* --- 6. "Onde assistir" — reuse of the streaming classes ---------- */

.detail-row .card-streaming { margin-top: 0; gap: var(--space-2xs); }

/* styles.css sizes these with --text-2xs, a token that does not exist in
   tokens.css — the declaration is dropped and they inherit body size. */
.detail-row .streaming-label,
.detail-row .streaming-line strong,
.detail-row .streaming-provider {
  font-size: var(--text-xs);
}

.detail-row .streaming-line,
.detail-row .streaming-btn-group { min-width: 0; flex-wrap: wrap; }

/* The 27px bleed came from a nowrap pill in a flex chain with no
   min-width:0. The pill now shrinks and the name wraps instead. */
.detail-row .streaming-btn { min-width: 0; max-width: 100%; }

.detail-row .streaming-btn-name { white-space: normal; overflow-wrap: break-word; }

/* --- 7. Aside — reactions and actions ---------------------------- */
/* The "Reações" label shares its rule with the Metascore label in §4. */

.detail-row-reactions,
.detail-row-actions,
.detail-row-actions-secondary {
  display: flex;
  gap: var(--space-2xs);
  min-width: 0;
}

.detail-row-reactions,
.detail-row-actions { flex-direction: column; }

/* The bar carries a dashed separator for the old in-card context; here
   the label already separates it. */
.detail-row .reaction-bar { margin-top: 0; padding-top: 0; border-top: none; }

/* One primary action, full width. Four equally weighted stacked buttons
   was the old failure. */
.detail-row .detail-row-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-inverse);
  background: var(--color-accent-green);
  border: 1px solid var(--color-accent-green);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-settle),
    border-color var(--duration-fast) var(--ease-settle);
}

.detail-row .detail-row-cta:hover {
  color: var(--color-text-inverse);
  background: var(--color-accent-green-hover);
  border-color: var(--color-accent-green-hover);
  text-decoration: none;
}

.detail-row .detail-row-cta:active { transform: translateY(1px); }

/* The secondaries are the one stack that wraps instead of stacking. */
.detail-row-actions-secondary { flex-wrap: wrap; }

/* Secondaries keep their component classes and are only demoted here:
   smaller, muted, and hovering to ONE accent instead of the green/amber
   mix they inherit from styles.css. `border-style` has to be restated
   with the color: `.card-share-btn` is dashed in styles.css while
   `.card-link` is solid, and the two sit side by side here — one ghost
   row, one border. */
.detail-row .detail-row-action {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-style: solid;
  border-color: var(--color-border-subtle);
}

.detail-row .detail-row-action:hover,
.detail-row .detail-row-action:focus-visible {
  color: var(--color-accent-green);
  border-color: var(--color-accent-green);
}

/* --- 8. Origin card state — CSS only, no measured caret ----------- */

.card-stack > .media-card.is-detail-open {
  background: var(--color-bg-overlay);
  border-color: var(--color-border-strong);
}

/* The band strip runs full height and thickens: this is the card that is
   talking, in the same color as the band's top rule. */
.card-stack > .media-card.is-detail-open::before {
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.card-stack > .media-card.is-detail-open .card-title { color: var(--color-accent-green); }

/* --- 9. Focus — nothing to restate ------------------------------- */
/* tokens.css `:focus-visible` (3px #F2EAD9, offset 2px) clears 3:1 on
   #0D0A06 and reaches every control here, including the h3 that takes
   focus programmatically; nothing sets overflow:hidden, so the ring is
   never clipped. The one component rule that outranked it —
   `.card-link:focus-visible`, amber border — is already answered by the
   .detail-row-action pair in §7. */

/* --- 10. Entrance motion — opacity + transform only --------------- */

@keyframes detail-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.detail-row-bar,
.detail-row-inner {
  animation: detail-row-in var(--duration-normal) var(--ease-reveal) both;
}

.detail-row-inner { animation-delay: 40ms; }

@media (prefers-reduced-motion: reduce) {
  .detail-row-bar,
  .detail-row-inner { animation: none; }
}

/* --- 11. Phone — ≤480px: the prose takes the whole band ----------- */
/* At 375 the two-column base left .detail-row-main 188px: 26 characters
   a line inside a 984px-tall band — the in-card squeeze this file exists
   to undo, in pocket format. Here the poster stops being a column and
   becomes a low strip, so every paragraph gets the full ~301px (≈40
   characters), with DOM order untouched. */

@media (max-width: 480px) {
  .detail-row-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "poster" "main" "where" "aside";
  }

  /* Thumbnail and numeral on one baseline, reading left→right. The poster
     is decorative (alt=""): 88px buys recognition, costs 132px of column,
     and the prose repays that by losing three lines. Freed from the 98px
     column, the numeral takes its ≥1200 size and fills the strip. */
  .detail-row-poster { display: flex; align-items: flex-end; gap: var(--space-sm); }
  .detail-row-poster-img,
  .detail-row-poster-fallback { width: 5.5rem; flex: none; }
  .detail-row-score { margin-block-start: 0; }
  .detail-row-score-value { font-size: var(--text-3xl); }
}

/* --- 12. Tablet / small desktop — 769–1199px --------------------- */

@media (min-width: 769px) {
  .detail-row { padding: var(--space-md); }

  .detail-row-inner {
    grid-template-columns:
      clamp(7.5rem, 20vw, 10.5rem)
      minmax(0, 1fr)
      minmax(0, 1fr);
    grid-template-areas:
      "poster main  main"
      "where  where aside";
    column-gap: var(--space-md);
  }

  .detail-row-title { font-size: var(--text-2xl); }

  /* "onde assistir" keeps the horizontal rule that opens row 2; the
     aside trades it for the vertical one between the two. Exactly one
     rule per block — carrying both would draw an L-shaped corner around
     the aside, the "card dentro de card" silhouette 6.1 forbids. */
  .detail-row-aside {
    padding-block-start: 0;
    border-block-start: none;
    padding-inline-start: var(--space-md);
    border-inline-start: 1px solid var(--color-border-subtle);
  }
}

/* --- 13. Wide desktop — ≥1200px: one row, four columns ------------ */
/* The text column is why the band exists, so it gets a floor, not just a
   fraction: a plain 1.5fr fell to 392px at 1200 and 463px at 1440 — 47–58
   characters, under the 60–75 the measure asks for. `minmax(30rem, 1.6fr)`
   pins it at 480px ≈ 60 characters through 1200–1439 and lets it grow
   above (486px at 1440, 588px at 1912); it cannot overflow, the track
   minimums adding to 696px against a 1078px container. The poster pays
   most of it (11vw not 12vw), so where/aside lose only ~5px at 1440. */

@media (min-width: 1200px) {
  .detail-row-inner {
    grid-template-columns:
      clamp(9rem, 11vw, 12rem)
      minmax(30rem, 1.6fr)
      minmax(0, 1fr)
      minmax(0, 0.9fr);
    grid-template-areas: "poster main where aside";
    column-gap: var(--space-md);
  }

  .detail-row-where,
  .detail-row-aside {
    padding-block-start: 0;
    border-block-start: none;
    padding-inline-start: var(--space-md);
    border-inline-start: 1px solid var(--color-border-subtle);
  }

  .detail-row-score-value { font-size: var(--text-3xl); }
}

/* --- 14. Forced colors (Windows High Contrast) -------------------- */
/* System colors flatten the fills, so the open card needs a real outline
   to stay distinguishable from its neighbours. */

@media (forced-colors: active) {
  .card-stack > .media-card.is-detail-open { outline: 2px solid CanvasText; outline-offset: 2px; }

  .detail-row { border-top-width: 3px; }
}