/* CineVerse UK v2 — module styles.
   Mobile-first, no external font, no external asset: everything is served from
   the site itself, and the TMDB mark stays visually quieter than the CineVerse
   brand (A2 §7.5 rule 1). */

.cineverse {
  --cv-space: 1rem;
  --cv-radius: 12px;
  --cv-border: #2a2f3a;
  --cv-muted: #a9b0bd;
  --cv-surface: #12141a;
  /* One type scale for every page this module renders (t_c547e37e). The levels
     descend by a real ratio at every width — 52/30/17/13 at 1440, 32/21/17/13 at
     320 — because the measured problem was the opposite: a section title of 54px
     followed, two levels down, by a group label of 24px, which reads as a second
     section title instead of a label. Nothing below may set a heading size
     outside these steps; the surfaces that own their own layout (the homepage
     blocks, the published editorial pages, the cinema card) keep theirs. */
  --cv-title: clamp(32px, 4.4vw, 52px);
  --cv-section: clamp(21px, 2.3vw, 30px);
  --cv-subhead: 1.0625rem;
  --cv-card: 1.0625rem;
  --cv-label: .8125rem;
  /* --- Card & Surface system (t_6e1bd479, design t_672d2b3a §3) -----------
     Every surface, border, radius, shadow and gap on this domain now comes
     from here: one card, one chip row, one focus ring, one grid gap. The
     values are the ones the design lane measured (spec.md §3); `--cv-surface`,
     `--cv-border`, `--cv-radius`, `--cv-space` and `--cv-muted` above are the
     tokens that already existed and keep their values. */
  --cv-surface-2: #1b1f2a;
  --cv-border-hover: rgba(139, 92, 246, .55);
  --cv-border-focus: #22d3ee;
  --cv-radius-lg: 18px;
  --cv-shadow-soft: 0 6px 18px rgba(5, 5, 10, .45);
  --cv-shadow-lift: 0 16px 36px rgba(5, 5, 10, .60);
  --cv-ring: #22d3ee;
  --cv-ring-shadow: 0 0 0 3px rgba(34, 211, 238, .30);
  --cv-grid-gap: 18px;
  --cv-card-pad: 14px;
  /* The spacing scale: nothing in this system invents a space outside it. */
  --cv-sp-1: .25rem;
  --cv-sp-2: .5rem;
  --cv-sp-3: .75rem;
  --cv-sp-4: 1rem;
  --cv-sp-5: 1.5rem;
  --cv-sp-6: 2rem;
  --cv-tap: 44px;
}

.cineverse .section-intro,
.cineverse .film-meta,
.cineverse .review-head,
.cineverse .watch-fetched,
.cineverse .field-hint {
  color: var(--cv-muted);
}

.cineverse main {
  padding: 0 var(--cv-space) 2rem;
}

/* Breadcrumbs: one row, always, and centred (t_c547e37e; centring t_9f34676e)
   -------------------------------------------------------------------------
   Measured before t_c547e37e, on the served pages: the bar was a wrapping
   flex row and every crumb carried the 44x44 touch-target minimum, so the bar
   sat flush against the header (gap 0 — a crumb's own box began exactly where
   the header ended) and a long film title such as "Voicemails for Isabelle"
   pushed the trailing crumb onto a second row.

   That change took the bar off the second row: the first crumb keeps its full
   width, the crumbs after it shorten with an ellipsis, and the bar is offset
   from the header by its own margin. The separator is drawn by the row, on
   both sides of the same mark, so it cannot drift with the label it follows.

   t_9f34676e adds the other half of the ask — „le vreau centrat in line". The
   row wraps this time around the trail instead of the other way: the list
   shrink-wraps its content (`width: fit-content`) and is centred with auto
   margins, so the list's own box IS the trail. That is what makes the centre
   mean something — on a full-width block the bbox centre of a flex row is the
   viewport's centre wherever the trail sits, which is why the bar could read
   as „centred" while hugging the left edge. What a long name does is
   unchanged: the last crumb still elides inside the single row. */
.cineverse .breadcrumbs {
  text-align: center;
  margin: clamp(.75rem, 2vw, 1.25rem) 0 0;
}

.cineverse .breadcrumbs ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  font-size: .875rem;
}

.cineverse .breadcrumbs li {
  display: flex;
  align-items: center;
  /* A crumb of the trail is a landmark and is not squeezed to make room — but
     the row may never leave the viewport either. The two are kept apart: the
     FIRST crumb is fixed (the rule below), and every crumb after it can yield,
     eliding inside its own box. v2 bounded the middle labels with
     `max-width: 35%` instead; that is a share of the CONTAINER, and the
     container is now the trail itself (t_9f34676e), where a share of it stops
     meaning anything — `35%` of a 95px bar clamped the word "Home" on /films.
     The shrink IS the bound now, and it cannot bite while the trail fits. */
  flex: 0 1 auto;
  min-width: 0;
}

/* The first crumb — the way back to the site — never gives way: what the row
   cannot hold comes off the labels after it. */
.cineverse .breadcrumbs li:first-child {
  flex: 0 0 auto;
}

/* The page's own name is the only part of a trail with no length bound (a film
   title can be a whole sentence), so it is the part that gives way first: it
   elides inside the row. `6ch` is the floor that keeps the name readable, and
   the row still cannot exceed the viewport — every crumb after the first
   shrinks with it — so nothing is pushed past the edge and nothing scrolls
   sideways. On a phone the middle label is what gives way instead, which is
   the card's own reading of the same rule. */
.cineverse .breadcrumbs li:last-child {
  min-width: 6ch;
}

.cineverse .breadcrumbs li + li::before {
  content: '›';
  flex: 0 0 auto;
  margin: 0 .5rem;
  color: var(--cv-muted);
}

/* A crumb is a label in a single row, not a button: it keeps the 44px height
   every control on this site carries, but not the 44px minimum WIDTH the
   control list gives a button — a 44px-wide box around the word "Home" is what
   spread the row apart. Whatever still does not fit is elided by the browser
   instead of breaking the bar onto a second line. */
.cineverse .breadcrumbs a,
.cineverse .breadcrumbs [aria-current="page"] {
  display: block;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  line-height: 44px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Film grids -------------------------------------------------------------
   The grid itself, the card link and the card's surface are declared once, in
   the Card & Surface block at the end of this file (t_6e1bd479). The rules
   that used to open this section were superseded one by one and are gone:
   `auto-fill/minmax(140px,1fr)` reached seven 155px columns at 1440, and a
   `display: block` link is a `display: flex` column now. */

/* The poster of the FILM PAGE (`.film-poster`, the two-column header) is not a
   catalogue card: it keeps its own box. The catalogue's poster is declared by
   `.cv-card-media img` in the Card & Surface block. */
.cineverse .film-card img,
.cineverse .film-poster {
  width: 100%;
  height: auto;
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
}

.cineverse .film-card h3 {
  font-size: var(--cv-card);
  margin: .5rem 0 .25rem;
}

.cineverse .poster-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
  color: var(--cv-muted);
  font-weight: 700;
}

.cineverse .film-genres a {
  color: inherit;
}

/* Film detail ------------------------------------------------------------ */

.cineverse .film-header {
  display: grid;
  gap: var(--cv-space);
}

@media (min-width: 640px) {
  .cineverse .film-header {
    grid-template-columns: minmax(160px, 240px) 1fr;
    align-items: start;
  }
}

.cineverse .no-player,
.cineverse .watch-note {
  border-left: 3px solid var(--cv-border);
  padding-left: .75rem;
  color: var(--cv-muted);
}

/* The IMDb link-out (V4). site.css makes every anchor inherit its colour and
   drop its underline, which would leave an outbound link looking like plain
   text; it stays a quiet text link (not a brand button) but keeps the underline
   and the same 44px touch target as every other control on this site.
   `inline-block`, not `inline-flex`: a flex container treats the " (external)"
   span as its own item and drops the space in front of it (V4-R1 screenshot). */
.cineverse .film-imdb {
  margin: .25rem 0 0;
}

.cineverse .film-imdb a {
  display: inline-block;
  /* Padding, not min-height: an inline-block puts its text at the top of a
     min-height box, so the underline would sit above the centre of the target.
     14.4px + the 19px line box = 48px, over the 44px this site uses. */
  padding: .9rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cineverse .film-imdb a:hover {
  color: var(--text);
}

/* Trailer (click-to-load) ------------------------------------------------ */

.cineverse .trailer-frame iframe {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.cineverse .trailer-note {
  color: var(--cv-muted);
  font-size: .875rem;
  max-width: 46ch;
}

/* Where to watch --------------------------------------------------------- */

.cineverse .watch-groups {
  display: grid;
  gap: var(--cv-space);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.cineverse .watch-group ul {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
}

.cineverse .watch-attribution {
  font-size: .875rem;
  color: var(--cv-muted);
}

.cineverse .external-label {
  font-size: .75rem;
  color: var(--cv-muted);
}

/* Reviews ---------------------------------------------------------------- */

.cineverse .review-list,
.cineverse .comment-list,
.cineverse .collection-list,
.cineverse .genre-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* The one gap of the system (t_6f5fa6df): 16px was a second rhythm next to
     the catalogue's 18px, and these lists hold cards. */
  gap: var(--cv-grid-gap);
}

/* The box these list items wear is NOT declared here: `.review`,
   `.collection-list li` and `.genre-list li` are containers, and this site has
   exactly one declaration of a container's surface, at the end of this file
   (Card & Surface, t_6f5fa6df). The old rule that dressed them here — border,
   12px radius, `--cv-space` padding — was the second of the three card
   treatments the design measured (C7). */

.cineverse .review-head {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  font-size: .875rem;
}

.cineverse .review-body {
  overflow-wrap: anywhere;
}

.cineverse .review-score {
  font-weight: 700;
}

.cineverse .link-button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.cineverse .review-form,
.cineverse .report-form {
  display: grid;
  gap: .5rem;
  max-width: 46rem;
  margin-top: var(--cv-space);
}

.cineverse .review-form input,
.cineverse .review-form select,
.cineverse .review-form textarea,
.cineverse .report-form textarea,
.cineverse .search-form input {
  width: 100%;
  padding: .5rem;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
  color: inherit;
  font: inherit;
}

/* Tinta de atingere a controalelor de scris si de ales (V3-Q1, t_a405beb0) ----
   Campul de cautare — actiunea principala a paginii de start — se randa la 37px
   inaltime pe toate cele 8 viewport-uri masurate, ca orice control din blocul de
   sus: 19px de cutie de linie + 2 x .5rem de padding + 2 x 1px de chenar.
   `select`-ul din formularul de recenzie iese din aceeasi regula la 39px, deci
   minimul se ridica pentru toate controalele in care se scrie sau se alege, fara
   sa li se schimbe latimea sau restul geometriei. Checkbox-ul de acceptare a
   termenilor ramane cu geometria lui: nu e un control de scris, iar tinta lui
   reala este eticheta care il inconjoara, nu cutia de 13px din ea. */
.cineverse .search-form input,
.cineverse .review-form input:not([type="checkbox"]),
.cineverse .review-form select,
.cineverse .review-form textarea,
.cineverse .report-form textarea {
  min-height: 44px;
}

.cineverse .before-you-post ul {
  padding-left: 1.1rem;
}

.cineverse .honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cineverse .form-notice[data-state="error"] {
  border-left: 3px solid #d9534f;
  padding-left: .75rem;
}

.cineverse .form-notice[data-state="ok"] {
  border-left: 3px solid #3cbec9;
  padding-left: .75rem;
}

.cineverse .pagination {
  display: flex;
  gap: var(--cv-space);
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: var(--cv-space);
}

.cineverse .pagination .disabled {
  color: var(--cv-muted);
}

/* --- listing filters (catalogue v3) -------------------------------------- */
/* The catalogue's own controls: one GET form (genre / year / platform / sort)
   and the filters in use as chips. Every control is a 44px target on the same
   surface as the rest of the listing, and each row wraps rather than pushing the
   page sideways — at 320px a field takes the whole width instead of overflowing
   it. The chip is the `.cv-chip` primitive (one declaration, above); the removal
   cross only sizes the glyph the chip already carries. */
.cineverse .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-space);
  align-items: end;
  margin-top: var(--cv-space);
}

.cineverse .filter-field {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: var(--cv-sp-1);
  min-width: min(180px, 100%);
}

.cineverse .filter-field label {
  color: var(--cv-muted);
  font-size: .8125rem;
  font-weight: 700;
}

.cineverse .filter-field select {
  width: 100%;
  min-height: var(--cv-tap);
  padding: 0 var(--cv-sp-2);
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
  color: inherit;
  font: inherit;
}

.cineverse .filter-actions {
  display: flex;
  flex: 1 1 180px;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cv-space);
}

.cineverse .filter-reset {
  color: var(--cv-muted);
  font-weight: 700;
}

.cineverse .filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-sp-2);
  margin-top: var(--cv-space);
  padding: 0;
  list-style: none;
}

.cineverse .cv-chip-remove {
  font-size: 1rem;
  line-height: 1;
}

.cineverse .listing-meta {
  margin-top: var(--cv-space);
  color: var(--cv-muted);
  font-size: .9375rem;
}

.cineverse .pagination-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cv-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cineverse .pagination-pages a,
.cineverse .pagination-pages [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cv-tap);
  min-height: var(--cv-tap);
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  text-decoration: none;
}

.cineverse .pagination-pages [aria-current="page"] {
  border-color: rgba(34, 211, 238, .55);
  background: rgba(34, 211, 238, .16);
  font-weight: 700;
}

/* Footer ------------------------------------------------------------------ */
/* ONE footer for every page. The module renders its body - brand block, link
   columns, TMDB attribution, copyright line - into the shell's own
   `<footer class="site-shell footer">` on `/` (and into the error templates),
   and into the identical element its layout writes elsewhere, so `.footer` is
   the only hook the stylesheet needs and a site whose config keeps this module
   off serves no module surface at all.

   The footer renders on `/` too, where `<body>` carries no module class, so the
   two tones it uses are declared here: the footer must look the same on every
   page, not only on the ones the module renders itself. */
.footer .footer-body {
  --footer-muted: #a9b0bd;
  --footer-line: #2a2f3a;
  /* The shell's `.footer` is a `nowrap` flex row; the body claims the full width
     and runs its own grid, and every track is `minmax(0, …)` so a long heading
     or label wraps inside its column instead of widening the document. */
  flex: 1 1 100%;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr);
  gap: 1.5rem 2.5rem;
  align-items: start;
  font-size: .875rem;
}

.footer .footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

.footer .footer-tagline {
  margin: 0;
  color: var(--footer-muted);
}

.footer .footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

.footer .footer-column-heading {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-2);
}

.footer .footer-columns ul {
  display: grid;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .footer-columns a {
  color: var(--footer-muted);
}

.footer .footer-columns a:hover,
.footer .footer-columns a:focus-visible {
  color: var(--text);
}

/* The attribution, the no-stream line and the copyright line run the full width
   of the footer, under the brand block and its columns. */
.footer .tmdb-attribution,
.footer .footer-disclaimer,
.footer .footer-legal {
  grid-column: 1 / -1;
}

.footer .footer-disclaimer {
  border-left: 3px solid var(--footer-line);
  padding-left: .75rem;
  color: var(--footer-muted);
}

.footer .tmdb-attribution {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--footer-line);
  font-size: .8125rem;
  color: var(--footer-muted);
}

.footer .tmdb-heading {
  font-weight: 600;
  margin: 0 0 .25rem;
}

.footer .tmdb-sentence {
  margin: 0;
}

.footer .tmdb-logo {
  display: inline-block;
  margin-top: .5rem;
  opacity: .85;
}

.footer .tmdb-logo img {
  width: 150px;
  height: auto;
  max-width: 60%;
}

/* Footer on narrow screens ------------------------------------------------- */
/* The footer used to carry four blocks side by side in the shell's `nowrap`
   flex row, and their combined minimum width pushed the whole document sideways
   (scrollWidth 463px at a 320px viewport). The grid above cannot: every track
   is `minmax(0, …)`, so a column shrinks and its content wraps. The column count
   still steps down - three link columns on a phone squeeze every label into a
   sliver - and under 560px a column gets the whole width instead. */
@media (max-width: 900px) {
  .footer .footer-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .footer .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .footer .footer-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* Long unbreakable strings coming from the catalogue or from a handle (a film
   title, `sample_reviewer`, a collection slug) must break inside the column
   instead of widening the document: at 320px the shared `h1` clamp is 46px, so
   a 15-character token is already wider than the shell. */
.cineverse h1,
.cineverse h2,
.cineverse h3 {
  overflow-wrap: anywhere;
}

.cineverse .policy-draft {
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  padding: .75rem;
  background: var(--cv-surface);
}

@media (max-width: 480px) {
  .cineverse main {
    padding: 0 .75rem 2rem;
  }
}

/* Published platform pages (t_f2b002ca) -------------------------------------
   The pages an editor publishes in the UpVerse platform are rendered inside
   this shell instead of on a second renderer: one design, one CSP. Every rule
   here is same-origin CSS, so `style-src 'self'` stays exactly as reviewed, and
   long unbreakable strings (the URLs in a Sources block) wrap instead of
   widening the document on a phone. */

.cineverse .editorial-page {
  padding-bottom: 2rem;
}

.cineverse .editorial-hero {
  padding: 2rem 0 1rem;
}

.cineverse .editorial-hero h1 {
  max-width: 900px;
}

.cineverse .editorial-eyebrow {
  color: var(--brand-2);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  font-size: 12px;
  margin: 0 0 14px;
}

.cineverse .editorial-lede p {
  color: var(--muted);
  font-size: 19px;
  line-height: 1.7;
  margin: 18px 0 0;
}

.cineverse .editorial-hero-image,
.cineverse .editorial-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--cv-radius);
}

.cineverse .editorial-section {
  padding: 1.25rem 0;
  max-width: 900px;
}

.cineverse .editorial-section h2 {
  margin: 0 0 .75rem;
  font-size: clamp(24px, 3.4vw, 38px);
}

.cineverse .editorial-section p {
  color: var(--cv-muted);
  line-height: 1.75;
  margin: 0 0 1rem;
}

/* A published page may cite a long URL; it must break inside the column. */
.cineverse .editorial-lede p,
.cineverse .editorial-section p,
.cineverse .editorial-figure figcaption,
.cineverse .editorial-list li,
.cineverse .editorial-plain {
  overflow-wrap: anywhere;
}

.cineverse .editorial-figure {
  margin: 1.5rem auto;
  max-width: 900px;
}

.cineverse .editorial-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--cv-radius);
}

.cineverse .editorial-figure figcaption {
  color: var(--cv-muted);
  font-size: .85rem;
  line-height: 1.6;
  margin-top: .6rem;
}

.cineverse .editorial-cta {
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 1.25rem 1.5rem;
  background: var(--panel, var(--cv-surface));
}

.cineverse .editorial-cta h2 {
  font-size: clamp(20px, 2.6vw, 28px);
}

.cineverse .editorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: .85rem 0 0;
}

.cineverse .editorial-list {
  color: var(--cv-muted);
  line-height: 1.75;
  padding-left: 1.2rem;
}

.cineverse .editorial-spacer {
  height: 2rem;
}

@media (min-width: 720px) {
  .cineverse .editorial-section {
    padding: 1.75rem 0;
  }
}

/* Homepage composed from the Platform's published blocks (V1-I3, t_2c2cb7cf) ---
   The homepage was one hardcoded section; it is now the ordered list of blocks
   an editor publishes for the `home` page, so the layout the blocks need lives
   here. Two hooks only — `.cineverse-home` (the module's own surface on the
   shared shell) and `.home-block` (one published block) — and every rule is
   same-origin CSS, so `style-src 'self'` stays exactly as reviewed. Nothing here
   may widen the document: the lists wrap, the grids are the module's own, and a
   long platform string breaks inside its column like everywhere else. */

.cineverse .cineverse-home {
  display: grid;
  gap: 2rem;
}

.cineverse .home-block {
  display: grid;
  gap: .85rem;
  min-width: 0;
}

.cineverse .home-block-head {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

.cineverse .home-block-head h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
}

.cineverse .home-block-head .eyebrow,
.cineverse .home-block-head .section-intro {
  margin: 0;
}

.cineverse .home-block .count {
  color: var(--brand-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cineverse .home-block .collection-list h3 {
  font-size: clamp(18px, 2.2vw, 24px);
}

.cineverse .cineverse-home .section-more {
  margin: 0;
  color: var(--cv-muted);
}

/* Homepage shell layer (V3-I1, t_57c9dc45) -----------------------------------
   The layout the homepage's own sections need — `.hero`, `.trust-row`,
   `.cinema-card`, `.poster-stack`, `.poster-main`, `.poster-side`,
   `.collection-grid`, `.upverse-panel`, `.step-list` — used to live in the
   SHARED `public/assets/css/site.css`. That file is the Account wave's hotspot
   (plan D6) and the shipped templates still consume those class names
   (`public/templates/*.html`: `.hero` and `.trust-row` are in all eight of
   them, `.upverse-panel` and `.step-list` in five, `.collection-grid` in three,
   `.cinema-card`/`.poster-main` in one), so this card may not delete the block
   there: removing it would restyle sites that never opt into this module, and
   it would collide with a file another writer owns.

   CineVerse therefore takes ownership of the layer here. This stylesheet is
   linked AFTER site.css on every page of this domain — the shared file comes
   from the shell (`public/index.html`) or from `views.head`, and this module's
   own stylesheet arrives through the module head slot right behind it — and it
   is loaded by CineVerse alone: `sites/cineverse-uk.json` is the only shipped
   config with `"modules": { "cineverse": true }`. The declarations below
   therefore decide the geometry of this homepage; the shared file keeps its own
   copy for the sites that still need it and can drop it once the last
   non-module template is migrated.

   The declarations below are the ones site.css carries, except where a comment
   marks a deliberate change. Three things change here, all of them this card's
   own scope: the hero card's geometry (the pills were drawn over the headline at
   every width), the touch-target sizes, and the keyboard focus ring. */

/* Mesurat pe pagina livrata, inainte de fix, la 1440x900: `.poster-side.bottom`
   x `.poster-main h2` se suprapuneau pe 11 363 px², iar la 360x640 pe 9 273 px²
   (plus 481 px² ale pastilei de sus peste primul rand de titlu). Regulile de mai
   jos fac suprapunerea imposibila prin constructie, nu prin noroc:
     * titlul cardului e limitat la 40px (24px pe telefon) — la 54px, cat da
       clamp-ul din site.css, „Stories, clearly sourced" ocupa trei randuri
       intr-o coloana de 345px si urca exact in banda pastilelor;
     * `.poster-main` isi rezerva banda in care plutesc pastilele
       (`--cv-pill-band`), iar grupul de text e lipit de baza cardului, deci nu
       poate urca in ea oricat s-ar infasura textul;
     * ambele pastile stau in acea banda, oglindite fata de card, si se micsoreaza
       odata cu cardul. Pastreaza suprapunerea cu arta cardului (trec peste
       marginea posterului), dar nu mai trec peste cuvintele lui. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, .78fr);
  gap: 54px;
  align-items: center;
  padding: 72px 0 48px;
}

.hero-text {
  max-width: 680px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.7;
  margin: 24px 0 0;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.trust-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.trust-row span {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .045);
  font-size: 12px;
  font-weight: 800;
}

.cinema-card {
  min-height: 560px;
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.cinema-card:before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg, transparent, rgba(139, 92, 246, .22), rgba(34, 211, 238, .2), transparent);
  animation: spin 14s linear infinite;
}

.poster-stack {
  position: relative;
  height: 100%;
  min-height: 516px;
  isolation: isolate;
  /* Geometria pastilelor, pe breakpoint: latime, inaltime, distanta de la
     varful stack-ului si banda rezervata in `.poster-main` (inaltimea casetei
     rotite a pastilei + 16px aer - 38px inset - 28px padding). */
  --cv-pill-w: 156px;
  --cv-pill-h: 112px;
  --cv-pill-top: 92px;
  --cv-pill-band: 200px;
}

.poster {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow);
}

.poster-main {
  inset: 38px 18px 28px;
  border-radius: 30px;
  padding: 28px;
  /* Randul de sus al cardului e rezervat: acolo plutesc pastilele. Textul e
     lipit de baza cardului (justify-content: flex-end), deci nu poate intra in
     banda oricat s-ar infasura. */
  padding-top: var(--cv-pill-band);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent 18%, rgba(5, 5, 10, .2) 42%, rgba(5, 5, 10, .9) 100%), radial-gradient(circle at 38% 30%, rgba(249, 115, 167, .72), transparent 13rem), radial-gradient(circle at 70% 22%, rgba(34, 211, 238, .42), transparent 11rem), linear-gradient(145deg, #20132d, #080a13);
  z-index: 2;
}

.poster-label {
  width: max-content;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  /* Eticheta se aseaza acum deasupra titlului, in grupul lipit de baza
     cardului: lasa banda de sus libera pentru pastile. */
  margin-bottom: 8px;
}

.poster-main h2 {
  margin-top: 0;
  font-size: clamp(24px, 4.6vw, 40px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.poster-main p {
  color: var(--muted);
  margin: 12px 0 0;
}

.poster-side {
  width: var(--cv-pill-w);
  height: var(--cv-pill-h);
  max-width: 60%;
  display: grid;
  place-items: center;
  border-radius: 22px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px);
  color: var(--text);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  z-index: 3;
}

/* Ambele pastile stau in banda rezervata, oglindite fata de card, la acelasi
   nivel. Inainte, cea de jos era ancorata la `bottom: 88px`, adica exact peste
   titlu (11 363 px² de suprapunere la 1440x900). */
.poster-side.top {
  right: -4px;
  left: auto;
  top: var(--cv-pill-top);
  bottom: auto;
  transform: rotate(8deg);
}

.poster-side.bottom {
  left: -6px;
  right: auto;
  top: var(--cv-pill-top);
  bottom: auto;
  transform: rotate(-8deg);
}

/* The hero's featured panel (brief §B, card t_57604d78) ----------------------
   The shell hands this column to the module (sites/cineverse-uk.json
   `heroPanel`), so everything below styles markup this module owns: a
   scroll-snapped track of catalogue films with its controls. It replaces the
   decorative card the shell used to place here — same column, same rounded box,
   but the contents are real films and the switching belongs to the visitor.

   The geometry is chosen so the panel can never widen the hero: the track owns
   its own overflow (`overflow-x: auto`), every slide is exactly one track wide,
   and every poster declares its intrinsic size in the markup, which is what
   keeps the box reserved before the file arrives. The decorative rules above
   (`.cinema-card`, `.poster-*`) stay for the sites that still ship that markup;
   this domain no longer renders them. */

.cv-featured {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));
  box-shadow: var(--shadow);
}

.cv-slider {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.cv-slider-heading {
  margin: 0;
  color: var(--brand-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cv-slides {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* A thin bar rather than none: the track really scrolls (touch, wheel and the
     arrow keys), and a scrollable region with no visible affordance is a trap. */
  scrollbar-width: thin;
}

.cv-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  scroll-snap-align: start;
}

.cv-slide-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
}

.cv-slide-body {
  min-width: 0;
}

.cv-slide-title {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.cv-slide-title a:hover {
  color: var(--brand-2);
}

.cv-slide-meta,
.cv-slide-score,
.cv-slide-votes,
.cv-slider-status,
.cv-featured-empty {
  color: var(--muted);
}

.cv-slide-meta {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
}

.cv-slide-score {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.cv-slide-votes {
  font-weight: 700;
}

.cv-slide-cta {
  margin: 14px 0 0;
}

.cv-slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cv-slider-status {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.cv-slider-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.cv-slider-button:hover:not(:disabled) {
  border-color: rgba(139, 92, 246, .55);
}

.cv-slider-button:disabled {
  opacity: .45;
  cursor: default;
}

.cv-featured-empty {
  margin: 0;
  font-size: 14px;
}

.collections {
  padding: 64px 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 20px;
}

.section-head h2 {
  max-width: 760px;
}

.collection-grid {
  display: grid;
  grid-template-columns: 1.18fr .91fr .91fr;
  gap: 16px;
}

.collection-card {
  min-height: 240px;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 24px;
  background: var(--panel);
  backdrop-filter: blur(22px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
}

.collection-card.is-large {
  background: linear-gradient(135deg, rgba(139, 92, 246, .3), rgba(34, 211, 238, .12));
}

.collection-card span {
  color: var(--brand-2);
  font-weight: 950;
}

.collection-card p,
.upverse-panel p {
  color: var(--muted);
  line-height: 1.65;
}

.upverse-panel {
  display: grid;
  grid-template-columns: 1fr minmax(280px, .55fr);
  gap: 24px;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 52px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--panel-strong);
}

.step-list {
  display: grid;
  gap: 10px;
}

.step-list span {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, .045);
  font-weight: 800;
}

@media (max-width: 920px) {
  .hero,
  .upverse-panel,
  .collection-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 34px;
  }

  /* Coloana hero nu are voie sa ceara mai mult decat ecranul. */
  .hero-copy {
    min-width: 0;
  }

  .cinema-card {
    min-height: 470px;
  }

  .poster-stack {
    min-height: 426px;
    --cv-pill-w: 132px;
    --cv-pill-h: 94px;
    --cv-pill-top: 64px;
    --cv-pill-band: 152px;
  }
}

@media (max-width: 560px) {
  .cinema-card {
    border-radius: 24px;
    padding: 14px;
  }

  .hero {
    gap: 34px;
    padding: 26px 0 40px;
  }

  .hero-text {
    font-size: 17px;
    line-height: 1.65;
  }

  /* Doua CTA-uri pe un rand de 336px se ating: pe telefon fiecare isi ia
     randul, ceea ce le si face tinte de 44px inalte. */
  .hero-actions .button {
    flex: 1 1 100%;
  }

  .trust-row span {
    font-size: 11px;
  }

  .poster-stack {
    --cv-pill-w: 104px;
    --cv-pill-h: 74px;
    --cv-pill-top: 52px;
    --cv-pill-band: 120px;
  }

  .poster-side {
    border-radius: 18px;
    font-size: 13px;
  }

  /* Sub 560px coloana hero e una singura si panoul primeste toata latimea. Un
     poster asezat singur deasupra textului lasa jumatate de rand gol, iar o
     coloana de text de 80px rupe titlurile: posterul ramane in stanga, dar isi
     cedeaza latimea textului (maxim 42%), ca randul sa fie folosit integral. */
  .cv-featured {
    padding: 16px;
    border-radius: 24px;
  }

  .cv-slide {
    grid-template-columns: minmax(104px, 42%) minmax(0, 1fr);
    gap: 14px;
  }
}

/* Meniul pe ecrane mici (V3-I1, R1.4 / R3.2) --------------------------------
   `site.css` ascunde complet `.nav-links` sub 920px si shell-ul nu are nici un
   hamburger sau disclosure, deci pe telefon nu exista meniu deloc: QA a masurat
   (t_947c1b0c) 5 linkuri cu latime 0 la 768/390/360 si doar brand + intrare de
   cont in captura. Aici linkurile raman vizibile, pe randul lor, fiecare cu
   tinta de 44px — fara JavaScript, fara markup nou, doar cu ordinea din flex-ul
   care exista deja. Nu se schimba ce linkuri exista, doar daca sunt accesibile. */
@media (max-width: 920px) {
  .nav-shell {
    flex-wrap: wrap;
  }

  .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 2px 14px;
    font-size: 13px;
  }
}

/* Touch targets, focus si miscare (V3-I1, AC5) -------------------------------
   Masurat pe paginile livrate, inainte: intrarea de cont din header si CTA-urile
   erau inalte de 42px, linkurile de meniu 16px, cele din subsol 16px, iar
   linkurile de gen din cardul de film 19px — niciuna nu ajunge la tinta de 44px
   ceruta de card. Sunt ridicate aici, pentru toate paginile CineVerse, cat timp
   fisierul partajat isi pastreaza metricile pentru site-urile care nu incarca
   acest stylesheet. */

.button {
  min-height: 44px;
}

.brand {
  min-height: 44px;
}

.nav-links a,
.footer-links a,
.footer-columns a,
.breadcrumbs a,
.pagination a,
.section-more a,
.genre-list a,
.editorial-actions a,
.tmdb-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-width, nu doar min-height: „Films" are 34px latime, „Home" 40px, iar
     un buton de 34x44 nu e o tinta de 44x44. */
  min-height: 44px;
  min-width: 44px;
  padding: 0 .4rem;
}

/* Exceptia: un breadcrumb NU e un buton, e o eticheta intr-un singur rand. Cu
   `min-width: 44px` caseta din jurul cuvantului „Home" impingea randul in afara
   (masurat, t_c547e37e); inaltimea de 44px ramane, latimea o da textul. */
.cineverse .breadcrumbs a,
.cineverse .breadcrumbs [aria-current="page"] {
  min-width: 0;
}

/* Linkurile de gen din cardul de film devin pastile: un link inline de 19px nu
   e o tinta de atingere. Separatoarele dintre ele au fost scoase din markup, iar
   lista e un rand care se infasoara. */
.film-genres,
.cv-slide-genres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
}

/* A genre link — on the film page, in the hero's slides and in the genre hub —
   is a `.cv-chip`, and there is one declaration of that chip in this file
   (the Card & Surface block, t_6f5fa6df). The copy of its box that used to sit
   here (`border: 1px solid var(--line)`, 44px targets, 12px text) was the
   second of the two chip treatments the brief called out. */

/* Focus de tastatura vizibil pe orice control: conturul implicit al browserului
   are 1px si se pierde pe fundalul inchis. */
:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}

/* Cine cere fara miscare primeste fara miscare (WCAG 2.3.3), iar capturile de
   audit devin deterministe. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cinema-card:before {
    animation: none;
  }

  /* The hero's slider: the film changes, the motion does not. The buttons and
     the arrow keys keep working — `scrollTo` without an explicit behaviour is
     what reads this declaration. */
  .cv-slides {
    scroll-behavior: auto;
  }
}

/* =========================================================================
   Cap de pagina, secțiuni si scara tipografica (V2-C, t_c547e37e)

   Masurat inainte, pe paginile servite de acest modul:
     * pagina de film la 1440: H1 92px · H2 54px („Official trailer") ·
       **H3 24px („Stream")** · H2 54px („Reviews") — eticheta unui grup de
       provideri avea doua treimi din titlul secțiunii de deasupra ei, iar intre
       secțiuni nu exista nici o delimitare vizuala;
     * /films, /genres, /collections, /about: H1 92px urmat direct de conținut —
       fara un bloc de titlu + subtitlu si fara regula care sa inchida capul
       paginii, deci secțiunea de conținut nu se citea ca o secțiune.

   Regulile de mai jos sunt singura sursa a scarii si a delimitarii, si sunt
   scrise pe un singur set de hooks (`.page-head`, `.film-header`, `section`),
   astfel incat cele cinci pagini sa urmeze aceeasi logica, nu cinci aproape
   identice. */

/* Capul paginii: titlu + subtitlu + regula ------------------------------- */
.cineverse .page-head {
  display: grid;
  gap: .6rem;
  max-width: 70ch;
  padding-bottom: clamp(1rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--cv-border);
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

.cineverse .page-head h1 {
  font-size: var(--cv-title);
  line-height: 1.06;
  margin: 0;
}

.cineverse .page-head > p {
  color: var(--cv-muted);
  font-size: var(--cv-subhead);
  line-height: 1.6;
  margin: 0;
}

/* Pagina de film are acelasi cap, doar ca e o grila de doua coloane
   (poster | text): aceeasi regula il inchide. */
.cineverse .film-detail > .film-header {
  padding-bottom: clamp(1rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--cv-border);
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

.cineverse .film-detail .film-header-text h1 {
  font-size: var(--cv-title);
  line-height: 1.06;
  margin: 0;
}

.cineverse .film-detail .film-header-text .film-meta {
  margin: .6rem 0 0;
}

/* Secțiunile paginii de film ------------------------------------------- */
/* Fiecare secțiune are titlul ei, randul de sub titlu (intro, nota de trailer,
   linia de scor) si o regula care o desparte de secțiunea de deasupra. Prima
   secțiune nu primeste regula: capul paginii tocmai s-a inchis cu una. */
.cineverse .film-detail > section {
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.cineverse .film-detail > section + section {
  border-top: 1px solid var(--cv-border);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.cineverse .film-detail > section > h2 {
  font-size: var(--cv-section);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
}

/* Un titlu din interiorul unei secțiuni nu e un al doilea titlu de secțiune:
   „Stream"/„Rent"/„Buy"/„Free" sunt etichete deasupra unei liste, iar titlurile
   recenziilor si al formularului sunt trepte de conținut. */
.cineverse .watch-group h3 {
  font-size: var(--cv-label);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brand-2);
  margin: 0 0 .35rem;
}

/* Titlul unei recenzii si filmul pe care il trateaza (hub-ul /reviews, pagina
   unui recenzent) sunt titluri de rand, nu titluri de secțiune: pe hub, numele
   filmului lua treapta de 54px si concura cu titlul paginii. */
.cineverse .review h2,
.cineverse .review h3,
.cineverse .review-form h3 {
  font-size: var(--cv-subhead);
  line-height: 1.3;
  margin: .5rem 0 .35rem;
}

.cineverse .review-form .before-you-post h4 {
  margin: 0 0 .35rem;
}

/* Paginile editoriale ale site-ului: /about si paginile de politica ------- */
.cineverse .static-page > h2 {
  font-size: var(--cv-section);
  line-height: 1.15;
  border-top: 1px solid var(--cv-border);
  padding-top: clamp(1rem, 2.5vw, 1.5rem);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 .6rem;
}

.cineverse .static-page > h3 {
  font-size: var(--cv-subhead);
  margin: 1.5rem 0 .35rem;
}

/* Banda de citit: paragrafele lungi ale unei pagini legale nu se intind pe tot
   shell-ul de 1180px. Doar masura, nimic din text nu se schimba. */
.cineverse .static-page > p,
.cineverse .static-page > ul,
.cineverse .static-page > .policy-draft {
  max-width: 75ch;
}

/* Titluri de card in listele de gen / colectii --------------------------- */
.cineverse .listing h1 {
  font-size: var(--cv-title);
  line-height: 1.06;
  margin: 0;
}

.cineverse .collection-list h2 {
  font-size: var(--cv-subhead);
  margin: 0 0 .35rem;
}

.cineverse .collection-list p {
  color: var(--cv-muted);
  margin: 0;
}

.cineverse .listing .count {
  color: var(--brand-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Plasa de siguranta: in acest modul nici un h3 nu mai ia treapta de 24px din
   foaia partajata. Fiecare suprafata care are nevoie de altceva isi scrie
   regula mai sus, cu selectoare mai specifice. */
.cineverse main h3 {
  font-size: var(--cv-card);
}

/* --- pagina de contact si paginile de informare (t_3519a51f) ----------------
   Bloc nou, adaugat la finalul fisierului partajat: nu se modifica nicio regula
   existenta, iar stilurile de formular de mai sus ramin valabile. */

/* Paginile de document (privacy, cookie, terms, about, contact) sunt text de
   citit, nu hero-uri de prezentare: scara tipografica implicita a site-ului
   (H1 92px / H2 54px) este potrivita pentru paginile de film, nu pentru un
   document. Se aplica DOAR in interiorul .static-page, deci paginile de film si
   hub-urile ramin neatinse. */
.cineverse .static-page h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  line-height: 1.15;
}

.cineverse .static-page h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  margin-top: 1.5rem;
}

.cineverse .static-page h3 {
  font-size: 1.08rem;
  line-height: 1.3;
}

.cineverse .static-page h4 {
  font-size: 1rem;
}

.cineverse .contact-form {
  display: grid;
  gap: var(--cv-space);
  max-width: 46rem;
  margin-top: var(--cv-space);
}

.cineverse .contact-fields {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cineverse .contact-field {
  display: grid;
  gap: .25rem;
}

.cineverse .contact-field-wide {
  grid-column: 1 / -1;
}

.cineverse .contact-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cv-muted);
}

.cineverse .contact-hint {
  font-size: 12px;
  color: var(--cv-muted);
}

.cineverse .contact-input {
  width: 100%;
  padding: .5rem;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
  color: inherit;
  font: inherit;
}

.cineverse .contact-input:focus-visible {
  border-color: var(--brand-2);
}

/* Ascuns pentru oameni, tentant pentru roboti: nu se foloseste display:none,
   ca sa ramana completabil de un script care citeste doar DOM-ul. */
.cineverse .contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cineverse .contact-note {
  border-left: 3px solid var(--cv-border);
  padding-left: .75rem;
  color: var(--cv-muted);
}

.cineverse .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-space);
  align-items: center;
}

.cineverse .about-attribution {
  color: var(--cv-muted);
  font-size: 13px;
}

/* =========================================================================
   Card & Surface system (t_6e1bd479, consuming design t_672d2b3a)

   The measured problem this closes: the catalogue card had no container at
   all — `.film-card img` had a radius and nothing else (no surface, no
   border, no padding, no hover), the generator of the meta line ran a
   different height on every card in a row, the genre links wrapped to two or
   three rows under each card, and `.film-grid` had no declared rhythm (seven
   155px columns at 1440). One block below defines the surface, the
   primitives, the grid and the card's scaffolding ONCE, so a container on
   this site is one thing, not four.

   Scope of this card (A): the tokens above, these primitives, the catalogue
   card (filmGrid/filmCard, which is also the homepage raft), the grid and the
   rhythm of the listing head. The same primitives are adopted by the film
   page, the /genres and /collections hubs, the editorial pages and the search
   control in card B (t_6f5fa6df) and by the chrome lane (t_9f34676e), so the
   `.cv-search` control and the non-catalogue surfaces are deliberately NOT
   declared here.

   Everything is same-origin CSS: no font, no image, no network request.
   ========================================================================= */

/* --- catalogue grid ------------------------------------------------------
   One gap and one set of thresholds. `minmax(0, 1fr)` everywhere: a track may
   not be widened by its content, which is what let the shipped
   `auto-fill/minmax(140px, 1fr)` reach seven columns of 155px at 1440 and
   pushed a long title past the viewport at 320px. */
.cineverse .film-grid,
.cineverse .cv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cv-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1199px) {
  .cineverse .film-grid,
  .cineverse .cv-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .cineverse .film-grid,
  .cineverse .cv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Two columns on a phone, not one (a deliberate reading of the brief, argued
   with a comparison shot in the design spec §6: at 390px one column means a
   342x513 poster and a first screen with a single film and none of its text).
   The gap tightens with the card. */
@media (max-width: 599px) {
  .cineverse .film-grid,
  .cineverse .cv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --cv-grid-gap: 12px;
  }
}

/* --- primitive: .cv-card -------------------------------------------------
   Geometry only (the surface comes from the direction below). A flex column,
   so the last row can be pinned to the base: that, plus the fixed two-line
   title and the fixed one-line meta, is the whole alignment mechanism. */
.cineverse .cv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cv-sp-3);
  min-width: 0;
}

.cineverse .cv-card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--cv-sp-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.cineverse .cv-card-media {
  position: relative;
  display: block;
  min-width: 0;
}

.cineverse .cv-card-media img,
.cineverse .cv-card-media .poster-placeholder {
  display: block;
  width: 100%;
  height: auto;
  /* The poster box is declared, never measured from the file: the posters of
     the first row are 500x750, 500x741 and 500x703 pixels at TMDB, so
     `height: auto` alone made three cards in one row end 22px apart. */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
}

.cineverse .cv-card-media .poster-placeholder {
  display: grid;
  place-items: center;
  color: var(--cv-muted);
  font-weight: 700;
}

.cineverse .cv-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--cv-sp-2);
  min-width: 0;
}

/* Two lines of title, always — one line for a short title and two for a long
   one, never three. Measured before this: "Supergirl" took one line and
   "Batman: Knightfall Part 1: Knightfall" took three, so the meta line of a
   row of cards began 40px lower under the long ones. */
.cineverse .cv-card-title {
  margin: 0;
  font-size: var(--cv-card);
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* One line of tabular figures: the year columns of a row of cards line up and
   a certification can never wrap the line onto a second row. */
.cineverse .cv-card-meta {
  margin: 0;
  color: var(--cv-muted);
  font-size: var(--cv-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The pill row is the card's last row and is pinned to the base. It renders
   even with no genre at all, so an empty row cannot lift one card's base
   above its neighbours'. It wraps rather than clips: measured at 390px,
   `flex-wrap: nowrap` cut the "+N" pill — the one pill that carries
   information the others do not — off the right edge of every card. */
.cineverse .cv-card-genres {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: var(--cv-sp-1);
  margin-top: auto;
  min-height: 28px;
  overflow: hidden;
}

/* The worst real pair — "Science Fiction" + "Documentary" + the "+N" pill —
   has to fit one row at 768px, where a card is 217px wide. */
@media (max-width: 899px) {
  .cineverse .cv-card-genres .cv-pill {
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Under 600px a card is 147px wide and the pills wrap, so two rows are
   reserved. The reserve is what keeps three cards' pill rows at the same
   height — and therefore their bases on the same y. */
@media (max-width: 599px) {
  .cineverse .cv-card-genres {
    min-height: 56px;
  }
}

/* --- ONE declaration of a container's surface ----------------------------
   The measured defect (C7) was three unrelated ways of drawing a "card" on one
   site. From here there is exactly one, and a container on this site is one of
   two things: `.cv-card` — a film — or this same declaration worn by a block
   that is not a film (the design contract, spec.md §9: a review, a collection
   card, a genre row, a watch group, the trailer, a form).

   `.cv-card` wears the direction the design lane recommended and measured
   ("Plaque", spec.md §8): the poster bleeds to the edges and the text sits in a
   band of its own. `padding: 0` is therefore the CARD's value — the band
   (`.cv-card-body`) carries its spacing — and every non-catalogue block below
   takes its own interior spacing from the one scale. `overflow: hidden` is what
   makes the bleeding poster follow the radius.

   Nothing else in this file paints a card surface: the old
   `.review / .collection-list li / .genre-list li` rule (border + 12px radius +
   `--cv-space`) is gone, and so is the box `.film-card` never had. */
.cineverse .cv-card,
.cineverse .review,
.cineverse .collection-list li,
.cineverse .genre-list li,
.cineverse .watch-group,
.cineverse .trailer-card,
.cineverse .review-form,
.cineverse .report-form {
  padding: 0;
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius-lg);
  background: var(--cv-surface);
  overflow: hidden;
}

.cineverse .cv-card-link {
  gap: 0;
}

.cineverse .cv-card-media img,
.cineverse .cv-card-media .poster-placeholder {
  border-radius: 0;
}

/* The poster bleeds to the card's edges; the text sits in a band of its own,
   split from the art by a 1px rule. */
.cineverse .cv-card-body {
  padding: var(--cv-sp-3) var(--cv-card-pad) var(--cv-card-pad);
  border-top: 1px solid var(--cv-border);
  background: linear-gradient(180deg, var(--cv-surface-2), var(--cv-surface));
}

.cineverse .cv-card--interactive:hover {
  border-color: var(--cv-border-hover);
  box-shadow: var(--cv-shadow-soft);
  transform: translateY(-2px);
}

.cineverse .cv-card--interactive:hover .cv-card-body {
  border-top-color: rgba(139, 92, 246, .55);
}

.cineverse .cv-card-link:hover .cv-card-title {
  color: var(--text);
}

/* --- primitive: .cv-pill (a label that is NOT a control) ----------------- */
.cineverse .cv-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid var(--cv-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: var(--cv-muted);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.cineverse .cv-pill--more {
  border-style: dashed;
  color: var(--cv-muted);
}

/* --- primitive: .cv-chip (a label that IS a link: a >=44px target) -------
   ONE declaration per primitive (t_6f5fa6df). Every genre link on this site
   wears it: the film page's `.film-genres`, the hero's slides, and the genre
   hub's `.genre-list` rows (spec.md §4: the chip is used outside the film card,
   on the film page and in the genre hub). */
.cineverse .cv-chip,
.cineverse .film-genres a,
.cineverse .cv-slide-genres a,
.cineverse .genre-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cv-sp-1);
  min-height: var(--cv-tap);
  min-width: var(--cv-tap);
  padding: 0 .75rem;
  border: 1px solid var(--cv-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: var(--cv-text, var(--text));
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.cineverse .cv-chip:hover,
.cineverse .film-genres a:hover,
.cineverse .cv-slide-genres a:hover,
.cineverse .genre-list a:hover {
  border-color: var(--cv-border-hover);
  background: rgba(139, 92, 246, .16);
}

.cineverse .cv-chip[aria-current="page"],
.cineverse .cv-chip.is-active {
  border-color: rgba(34, 211, 238, .55);
  background: rgba(34, 211, 238, .16);
  color: var(--text);
}

/* --- primitive: .cv-badge (a value on the poster) ------------------------
   A badge is a value, never decoration: the renderer emits it only when the
   value exists. The backdrop is opaque enough that the worst case underneath
   (a white poster) still clears 4.5:1 with #fff text — 12.76:1, computed in
   the design spec's contrast report and asserted by this card's test. */
.cineverse .cv-badge {
  position: absolute;
  inset-block-start: var(--cv-sp-2);
  inset-inline-end: var(--cv-sp-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(5, 5, 10, .82);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cineverse .cv-badge--score::before {
  /* The review star of the mark, drawn locally: no icon font, no request. */
  content: "";
  width: 11px;
  height: 11px;
  background: var(--brand-2);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* --- primitive: .cv-empty (a surface with nothing to show) --------------- */
.cineverse .cv-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--cv-sp-2);
  justify-items: center;
  padding: var(--cv-sp-6) var(--cv-sp-5);
  border: 1px dashed var(--cv-border);
  border-radius: var(--cv-radius-lg);
  background: rgba(255, 255, 255, .02);
  color: var(--cv-muted);
  text-align: center;
}

.cineverse .cv-empty p {
  margin: 0;
  max-width: 46ch;
}

/* `.empty-state` used to declare `grid-column: 1 / -1` here — a second empty
   state next to `.cv-empty`, which already declares it. The class stays in the
   markup as the shared hook the runtime's own environment check looks for
   (`scripts/site-runtime-env-check.js` reads `empty-state` to tell "no data"
   from "the Platform is down"), and it declares nothing: every empty list on
   this site wears `.cv-empty` (t_6f5fa6df). */

/* --- primitive: .cv-skeleton — NOT APPLICABLE IN THIS WAVE ---------------
   The brief asks for a skeleton only where a surface really loads asynchronously.
   Nothing on this site does: every page is rendered server-side and complete,
   and the catalogue payload arrives in the same response as the markup that
   shows it. A skeleton here would be CSS for a state that cannot happen, so it
   is deliberately not declared — recorded as deferred with this reason rather
   than shipped as decoration (brief §3, design spec §4/§12). */

/* --- primitive: .cv-section-head (the head of a shelf) ------------------- */
.cineverse .cv-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--cv-sp-3) var(--cv-sp-5);
  margin: 0 0 var(--cv-sp-4);
  min-width: 0;
}

.cineverse .cv-section-head-text {
  display: grid;
  gap: var(--cv-sp-1);
  min-width: 0;
}

.cineverse .cv-section-head h2,
.cineverse .cv-section-head h3 {
  margin: 0;
  font-size: var(--cv-section);
  line-height: 1.15;
}

.cineverse .cv-section-head .eyebrow {
  margin: 0;
  color: var(--brand-2);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cineverse .cv-section-head .section-intro,
.cineverse .cv-section-head > p {
  margin: 0;
  color: var(--cv-muted);
  font-size: var(--cv-label);
}

.cineverse .cv-section-head-actions {
  display: flex;
  align-items: center;
  gap: var(--cv-sp-3);
}

.cineverse .cv-section-head-actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cv-tap);
  color: var(--cv-muted);
  font-size: var(--cv-label);
  font-weight: 700;
  text-decoration: none;
}

.cineverse .cv-section-head-actions a:hover {
  color: var(--text);
}

/* --- adoption: what each non-catalogue container does inside that surface --
   One surface declaration above; this is the interior of each block. Every
   value comes from the one spacing scale (spec.md §3), so the film page, the
   genre hub and the collection hub cannot drift into three spacings. */
.cineverse .review,
.cineverse .collection-list li,
.cineverse .watch-group,
.cineverse .trailer-card,
.cineverse .review-form,
.cineverse .report-form {
  padding: var(--cv-sp-5);
}

/* A genre row is a label and a count, not a poster: the tight padding of a row
   and the small radius of an aside — the design keeps this row deliberately
   smaller than a card, and it is still the same surface declaration. */
.cineverse .genre-list {
  gap: var(--cv-sp-2);
}

.cineverse .genre-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cv-sp-2) var(--cv-sp-3);
  padding: var(--cv-sp-3) var(--cv-sp-4);
  border-radius: var(--cv-radius);
}

/* The collections hub is a two-column grid of cards (spec.md §9); a phone gets
   one column, because a collection card carries prose, not a poster. */
.cineverse .collection-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cineverse .collection-list li {
  display: flex;
  flex-direction: column;
  gap: var(--cv-sp-2);
  min-width: 0;
  /* The raised surface of the system: the same declaration, with the discreet
     overlay the design measured (`rec-collections-*`). One extra `background`
     on one block — the surface itself is declared once, above. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .008)), var(--cv-surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.cineverse .collection-list li:hover {
  border-color: var(--cv-border-hover);
  box-shadow: var(--cv-shadow-soft);
}

/* The count of a collection card is pinned to its base, so two cards of a row
   whose intros differ still end their text on the same line. */
.cineverse .collection-list li > p:last-child {
  margin-top: auto;
}

.cineverse .review {
  min-width: 0;
}

.cineverse .watch-groups {
  gap: var(--cv-grid-gap);
}

@media (max-width: 899px) {
  .cineverse .collection-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- states, focus and motion ------------------------------------------- */
.cineverse .cv-card--interactive {
  transition: border-color 150ms ease, background-color 150ms ease,
    box-shadow 150ms ease, transform 150ms ease;
}

.cineverse .cv-card--interactive:focus-within {
  border-color: var(--cv-border-focus);
  box-shadow: var(--cv-ring-shadow);
}

/* The containers that are not the catalogue card answer focus the same way it
   does: the ring of the system, drawn on the container edge (a child could be
   clipped by the radius). */
.cineverse .review:focus-within,
.cineverse .collection-list li:focus-within,
.cineverse .genre-list li:focus-within,
.cineverse .watch-group:focus-within,
.cineverse .trailer-card:focus-within,
.cineverse .review-form:focus-within,
.cineverse .report-form:focus-within {
  border-color: var(--cv-border-focus);
  box-shadow: var(--cv-ring-shadow);
}

.cineverse .cv-card-link:focus-visible {
  outline: 2px solid var(--cv-ring);
  outline-offset: 3px;
  border-radius: var(--cv-radius);
}

.cineverse .cv-card--interactive:active {
  transform: translateY(1px);
}

/* Whoever asked for no motion gets none: the transitions go and the
   transforms are cancelled, not merely shortened. */
@media (prefers-reduced-motion: reduce) {
  .cineverse .cv-card--interactive,
  .cineverse .cv-chip {
    transition: none;
  }

  .cineverse .cv-card--interactive:hover,
  .cineverse .cv-card--interactive:active {
    transform: none;
  }
}

/* --- helpers ------------------------------------------------------------- */
.cineverse .cv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The listing head: the page's own H1 is a page title, not a hero. It keeps
   its step (`--cv-title`, from t_c547e37e) and the rule that closes it; the
   head only takes the rhythm of the shelves, so the first row of cards is on
   the first screen at 1440x900. */
.cineverse .listing .page-head,
.cineverse .listing > .cv-section-head {
  max-width: 70ch;
  padding-bottom: var(--cv-sp-4);
  margin-bottom: var(--cv-sp-4);
}

/* --- the touch target of the search field -------------------------------
   The fix of t_a405beb0 (`min-height: 44px` on the text controls of the
   forms), restored here for the one control this card owns: measured on the
   base of this wave, `.search-form input` was **37px** tall and the submit
   button 44px, so the field and the button of /films did not line up. The
   rule is byte-identical to the one that card shipped, and only the search
   input is picked up: the rest of the search component (the pill container,
   the button, the states, the placeholder, the icon-only narrow layout) is
   card t_9f34676e, and the review/report form controls are card B. */
.cineverse .search-form input {
  min-height: var(--cv-tap);
}

/* =========================================================================
   Chrome v3 — the search control, one pill (t_9f34676e, consuming the design
   system's `.cv-search`: spec.md §7 of t_672d2b3a).

   The measured defect: `.search-form` had NO rule at all in this stylesheet,
   so all four instances of the same form — the two homepage compositions,
   /films and /search — rendered as a raw browser form. A label, then the
   field, then the submit button on a line of its OWN, 107px of head in total,
   the button starting at the field's left edge; and the /films and /search
   copies carried no `placeholder` at all. That was not a design decision, it
   was missing CSS.

   One pill is the whole component now. The field and the submit live inside
   the same container, at the same height (44px — the touch target this site
   gives every control), and the container carries the surface, the hairline
   and the radius the card system already defines, so the control is the same
   object on every page that offers it.

   Two readings of the design system are this card's own, both measured and
   reported in the handoff:
   * the pill is CENTRED on a row of its own, and capped at 40rem — the top of
     the 560–640px range the card states — instead of the design's 46rem;
   * the gap under the pill is `--cv-sp-3`, the widest step of the spacing
     scale that still keeps the pill row of the /films catalogue inside the
     fold at 1440x900. That budget is card A's (t_6e1bd479): 30.64px of that
     row sat under the fold, and those pixels were exactly the raw 107px form
     this block replaces with a 44px pill.

   Everything here is same-origin CSS and an inline SVG: no font, no image, no
   network request, and no inline `style` (so `style-src 'self'` is untouched).
   ========================================================================= */

.cineverse .cv-search,
.cineverse .search-form.cv-search {
  display: flex;
  align-items: center;
  gap: var(--cv-sp-2);
  width: 100%;
  max-width: 40rem;
  margin: 0 auto var(--cv-sp-3);
  padding: 4px 4px 4px var(--cv-sp-4);
  border: 1px solid var(--cv-border);
  border-radius: 999px;
  background: var(--cv-surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* The focus ring belongs to the pill, not to the field inside it: an outline
   on the field would be clipped by the container's radius. Both spellings are
   listed because they answer different questions — `:focus-within` covers any
   focus (a mouse click in the field included), `:has(input:focus-visible)`
   names the keyboard state for the review checklist. The submit keeps the
   site's own `:focus-visible` outline as well. */
.cineverse .cv-search:focus-within,
.cineverse .cv-search:has(input:focus-visible) {
  border-color: var(--cv-border-focus);
  box-shadow: var(--cv-ring-shadow);
}

/* The label is hidden HERE and only here: it stays in the markup of every
   instance, so the field keeps its accessible name. */
.cineverse .cv-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The field carries no surface of its own — the pill around it is the ONE
   container. This overrides the shared form-control rule near the top of the
   file (which gave the search input its own border, radius, background and
   padding, and is why the field and the button never lined up). The 1rem text
   is the floor that stops iOS zooming the page when the field takes focus. */
.cineverse .cv-search input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: var(--cv-tap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1rem;
}

.cineverse .cv-search input:focus,
.cineverse .cv-search input:focus-visible {
  outline: none;
}

.cineverse .cv-search input::placeholder {
  color: var(--cv-muted);
  opacity: 1;
}

/* The submit, inside the pill: the accent this site already uses for its
   primary action, the magnifier inline, the word beside it on a wide screen.
   `appearance` and `border: 0` are what take the browser's own button chrome
   off — the control is the site's, not the platform's. */
.cineverse .cv-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cv-sp-2);
  flex: 0 0 auto;
  appearance: none;
  min-height: var(--cv-tap);
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--hot));
  color: #fff;
  font-size: .875rem;
  font-weight: 800;
  cursor: pointer;
}

.cineverse .cv-search-submit:hover {
  filter: brightness(1.12);
}

.cineverse .cv-search-submit:active {
  filter: brightness(.94);
}

.cineverse .cv-search-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Under 480px the word goes and the magnifier stays: a button whose label is
   cut in half is worse than an icon with an accessible name, and the button
   carries `aria-label="Search films"` on every instance, so its name never
   depended on the visible text. */
@media (max-width: 480px) {
  .cineverse .cv-search {
    padding-left: var(--cv-sp-3);
  }

  .cineverse .cv-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cineverse .cv-search-submit {
    padding: 0 1rem;
  }
}

/* Advertising containers (plan §4.4) -------------------------------------
   A container only exists when the shipped config carries a real slot; it is
   an empty, labelled frame in the served HTML and it stays empty until the
   visitor grants advertising consent through the consent module. No unit is
   ever the header or an overlay: the approved list is article-top, in-article,
   list-bottom and (from 1280px up) the rail. */
.cineverse .cv-ad {
  margin: 1.5rem 0;
  padding: .75rem;
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  background: var(--cv-surface);
}

.cineverse .cv-ad-label {
  display: block;
  margin-bottom: .5rem;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cv-muted);
}

.cineverse .cv-ad-frame {
  min-height: 90px;
}

/* The unit the loader creates after consent. Styled from the stylesheet, never
   with an inline style. */
.cineverse .cv-ad-frame .adsbygoogle {
  display: block;
  width: 100%;
}

.cineverse .cv-ad--rail {
  display: none;
}

@media (min-width: 1280px) {
  .cineverse .cv-ad--rail {
    display: block;
    float: right;
    width: 320px;
    margin: 0 0 1rem 1.5rem;
    position: sticky;
    top: 6rem;
  }
}