/* 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;
}

.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;
}

.cineverse .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: .875rem;
}

.cineverse .breadcrumbs li + li::before {
  content: '›';
  margin-right: .35rem;
  color: var(--cv-muted);
}

/* Film grids ------------------------------------------------------------- */

.cineverse .film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--cv-space);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cineverse .film-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.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: 1rem;
  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,
.cineverse .footer-disclaimer {
  border-left: 3px solid var(--cv-border);
  padding-left: .75rem;
  color: var(--cv-muted);
}

/* 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;
  gap: var(--cv-space);
}

.cineverse .review,
.cineverse .collection-list li,
.cineverse .genre-list li {
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  padding: var(--cv-space);
  background: var(--cv-surface);
}

.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;
}

.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);
}

/* Footer and TMDB attribution -------------------------------------------- */
/* Keyed on the generic .footer hook the shared shell also uses: the shell
   footer (home, 404, 500) carries no module class name, so a site whose config
   keeps the CineVerse module off serves no module surface at all. */
.footer .tmdb-attribution {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cv-border);
  font-size: .8125rem;
  color: var(--cv-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 .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .75rem;
  font-size: .875rem;
}

/* Footer layout on narrow screens ---------------------------------------- */
/* The module footer carries four blocks (TMDB attribution, the no-stream
   disclaimer, the legal line and the site links). Their combined minimum width
   is wider than the shell on a phone, and the shell's `.footer` is a
   `nowrap` flex row, so the block used to push the whole document sideways
   (scrollWidth 463px at a 320px viewport). One class below the shared 560px
   breakpoint of site.css: the footer wraps instead of overflowing, and stacks
   into a single column so the two mandatory TMDB sentences stay legible. */
.footer.cineverse-footer {
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .footer.cineverse-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 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;
  }

  .cineverse .film-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* 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;
  }
}