/* ===========================================================================
   TitleShowcase — adaptation layer for plurimedia.fr
   ---------------------------------------------------------------------------
   showcase.css is a faithful, de-scoped copy of the component as it is built
   on media-press.tv. Do not hand-edit it: if the widget is ever re-exported
   from that repo, it gets overwritten. Every change needed to make it sit on
   this site's paper page lives here instead.

   The component was authored to sit on a navy hero, so four things it does
   there are wrong here:

     1. Two blurred copies of the poster bleed outside the card as an ambient
        halo. On navy that reads as cinematic glow; on paper it reads as a
        smudge under the card.
     2. The ticker above the card carries its own translucent navy band.
     3. The pager below the card carries the same band.
     4. Several labels are set in paper-on-navy alphas, so on paper they are
        light type on a light ground. The demo-note was effectively invisible.

   The fix is the same each time: drop the band, put the type back into ink.
   ======================================================================== */

/* 1 — the halo. Nothing on this page glows. */
.hs__halo {
  display: none;
}

/* The card is the one dark object; it keeps its fill but loses the rounding,
   because nothing on this site is rounded. */
.hs__card {
  border-radius: 0;
}

/* 2 — the ticker above the card. No band, no blur, no rounding: it reads as
   a mono caption line sitting directly above the card, like every other
   label on the page. */
.hs__strip {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  border-radius: 0;
  padding: 0 0 10px;
  /* --ink-2, not --dim: at this size --dim on paper measures 3.49:1, under the
     4.5:1 AA floor for small text. --ink-2 measures 8.47:1. */
  color: var(--ink-2);
  /* Re-scaled from the component's 11.5px/0.08em to this site's own label
     metrics, so the ticker reads as one of the page's eyebrows rather than as
     a transplant. The original values are not sacred; matching is. */
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hs__strip .hs__strip-net {
  color: var(--accent);
}
/* The active feed item carries its own paper-on-navy colour (#f4f4f1e6), which
   on paper made the title read as blank space next to a floating red network
   name. Same specificity as the original, so load order decides. */
.hs__strip-item.is-active {
  color: var(--ink-2);
}
/* The feed's edge mask exists to soften a marquee that only hs.js drives;
   with a single item it just fades the leading arrow. */
.hs__strip-feed {
  -webkit-mask-image: none;
  mask-image: none;
}

/* The clock, the rotation and the KEYWORDS/JSON toggle are all driven by
   hs.js, which this site now ships. An earlier no-JS pass replaced the
   timestamp with a static label because it would otherwise sit at a permanent
   00:00:00 UTC; that override is gone now that the real clock ticks. */
/* Feed items are stacked in the markup and crossfaded by hs.js. Without that
   script every item paints at once, so only the server-rendered active one is
   shown. Harmless when hs.js IS loaded: it drives the same class. */
.hs__strip-item {
  display: none;
}
.hs__strip-item.is-active {
  display: inline;
}

/* 3 — the pager below the card. Same treatment; the track has to come off
   white-alpha, which is invisible on paper, and onto the page's own rule. */
.hs__nav {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 0;
  border-radius: 0;
  padding: 12px 0 0;
  margin-top: 0;
  gap: 6px;
}
.hs__nav-line {
  background: var(--rule);
  border-radius: 0;
}
.hs__nav-line:hover {
  background: rgb(26 34 51 / 0.28);
}

/* 4b — the card's own micro-labels.
   The component sets its field names at 9-10px in 35-45% white, which measures
   3.0-3.5:1 on navy-800, under the 4.5:1 AA floor. These are not decoration:
   DIRECTOR / CAST / EIDR / CONTENTID are what the card is demonstrating, so
   they get one shared scale instead of six slightly different faint ones.
   10px is held rather than raised to the page's 11px because the card is
   dense and 11px reflows its two columns. */
.hs__credits dt,
.hs__foot-id dt,
.hs__kw-label,
.hs__chip-cat,
.hs__thumb-label {
  font-size: 10px;
  color: rgb(244 244 241 / 0.62);
  letter-spacing: 0.08em;
}
/* The asset tiles are fixed-width, and "TRAILERS" at 10px/0.08em fills 54 of
   the 56px, touching both edges. It keeps the component's tighter tracking. */
.hs__thumb-label {
  letter-spacing: 0.02em;
}
.hs__bar-pager {
  color: rgb(244 244 241 / 0.62);
}

/* 4 — contrast outside the card. These were paper-on-navy alphas; on paper
   they need ink. The demo-note is the disclaimer, so it has to be legible,
   not merely technically present. */
.hs__demo-note {
  color: var(--ink-2);
  text-align: left;
  margin-top: 12px;
  /* Up from 10px: this is the disclaimer that keeps the sample data honest,
     so it has to be read, not just technically present. */
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

/* ── Mobile ──────────────────────────────────────────────────────────────
   The widget is not shown on phones. It is a dense two-column record card
   roughly 700px wide; stacked into a phone column it either reflows into an
   unreadable ribbon or forces the real content far below the fold. The hero
   there is the headline, the standfirst and the two actions, which on a
   type-led page like this one is a stronger opening than a shrunken card.

   On the cost of hiding it: display:none does NOT reliably stop an <img src>
   from being fetched, and Chrome loads loading="lazy" images inside a
   display:none subtree anyway. Measured at 390px: the two server-rendered
   is-active posters still download, about 95KB. The other ~190KB and the 18KB
   of hs.js are avoided, because index.html only injects the script above this
   same breakpoint. Removing the last 95KB would mean either building the
   markup from JS or carrying a second copy of the hero, so it stays. */
@media (max-width: 760px) {
  .front__art--showcase {
    display: none;
  }
}

/* ── Card height ─────────────────────────────────────────────────────────
   .hs__body carries a fixed height (424px), tuned for the 700px-wide card
   the component gets on media-press.tv. The height is fixed on purpose: the
   card swaps entry every 5s and a content-driven height would make the whole
   hero jump on each tick. Our column is narrower, so the keyword chips wrap
   onto more lines and the tab body was clipping.
   Measured per entry at this column width, with the auto-rotation accounted
   for: The Gilded Passage is the tallest (its keyword block needs 180px
   against the 157px a 444px body left it, so 444px still clipped by 23px).
   470px clears all three on both the Keywords and the JSON tab.
   If the hero grid ratio changes, re-measure: the card narrows, the chips
   wrap onto more lines and this number goes up. */
/* Only the two-column band needs this: there the card is ~652px and the
   chips wrap onto the most lines. In the single-column band below 1321px the
   card is far wider and the component's own 424px base is ample. */
@media (min-width: 1321px) {
  .hs__body {
    height: 470px;
  }
}

/* Below 1081px the component's own media query takes over: it narrows the
   first column to 200px and asks for 389px, which suits the wider card the
   collapsed hero grid gives it. That narrower column leaves the four asset
   tiles 47px each while "TRAILERS" needs 50px, and a 1fr track will not
   shrink below its content, so the row used to spill across the keyword
   column. Letting the tiles shrink and tightening the label fixes it. */
/* The whole single-column band. Measured with height:auto across all three
   entries on both tabs: 428px at 900px wide, 427px at 1200px. The component's
   own values (424px base, 389px under its 1080px query) both fall just short. */
@media (max-width: 1320px) {
  .hs__body {
    height: 432px;
  }
}

@media (max-width: 1080px) {
  .hs__thumb {
    min-width: 0;
  }
  .hs__thumb-label {
    font-size: 9px;
    letter-spacing: 0;
  }
}