/* Zyrenicus chapter cinematic masthead v1.49.5.
 * Replaces Fictioneer's large site-title/header-image treatment on chapter pages
 * with an image and constellation above the solid chapter reading panel.
 */

/* Keep Fictioneer's navigation, but remove the large site identity/header block
 * above chapters. The parent header image is also disabled in PHP. */
body.single-fcn_chapter.zy-cohesion-view :is(.header__title, .top-header__title) {
  display: none !important;
}

/* Fictioneer's page-background element spans the whole page shell, which is
 * the unwanted outer slab in this layout. Keep it suppressed. The cinematic
 * rail is rendered as its own transparent sibling before the real reading
 * wrapper, so the reading wrapper remains one square, fully opaque surface. */
body.single-fcn_chapter.zy-cohesion-view .main__background {
  display: none !important;
}

/* The cinematic rail owns only its own namespace. It deliberately does not
 * borrow Fictioneer's `.main__wrapper` class or any parent-theme structural
 * role. Its rendered width follows the real Fictioneer reader through a
 * one-way ResizeObserver bridge in inner-pages.js. */
body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-wrapper {
  box-sizing: border-box;
  width: min(var(--zy-live-reader-width, min(calc(100% - 2rem), 76rem)), 100%);
  max-width: 100%;
  container-name: zy-cinematic;
  container-type: inline-size;
  margin-inline: auto;
  isolation: auto;
  opacity: 1 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-block: 0 !important;
}

body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-wrapper::before,
body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-wrapper::after {
  content: none !important;
  display: none !important;
}

/* The real Fictioneer reading wrapper is the sole chapter panel. These are
 * cosmetic surface rules only; Fictioneer retains its width and layout. */
body.single-fcn_chapter.zy-cohesion-view .main__wrapper {
  background: var(--page-bg-color, var(--bg-900, #151922)) !important;
  background-image: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the article visually transparent inside the solid wrapper, but do not
 * redefine any parent-owned width, margins, padding, or layout geometry. */
body.single-fcn_chapter.zy-cohesion-view .chapter__article {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.single-fcn_chapter.zy-cohesion-view #chapter-content {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.single-fcn_chapter.zy-cohesion-view header.chapter__headline.layout-links {
  width: var(--zy-reading-shell-max, min(100%, 76rem));
  max-width: 100%;
  gap: 0.38rem;
}

/* Desktop masthead: the image occupies the main reading-width column while the
 * constellation remains a compact adjacent navigator. */
body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 22.5rem);
  align-items: stretch;
  gap: clamp(0.72rem, 1.5vw, 1rem);
  width: 100%;
  margin: 0 auto clamp(0.58rem, 1.25vw, 0.82rem);
}

body.single-fcn_chapter.zy-cohesion-view :is(
  .zy-chapter-visual-rail--constellation-only,
  .zy-chapter-visual-rail--cinematic-only,
  .zy-chapter-visual-wrapper.zy-cinematic-image-suppressed .zy-chapter-visual-rail
) {
  grid-template-columns: minmax(0, 1fr);
}

body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-wrapper.zy-cinematic-image-suppressed .zy-chapter-cinematic {
  display: none !important;
}

body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail--constellation-only > .zy-chapter-constellation {
  height: auto;
  min-height: 0;
}

body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  min-height: clamp(13rem, 22vw, 21rem);
  margin: 0;
  border: 1px solid rgba(255, 214, 140, 0.18);
  border-radius: 20px;
  background: rgba(8, 11, 17, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 23%),
    linear-gradient(0deg, rgba(4, 6, 10, 0.2), transparent 30%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  object-position: center;
}

body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail > .zy-chapter-constellation {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail > .zy-chapter-constellation .zy-chapter-constellation__viewport {
  flex: 1 1 auto;
  min-height: 8rem;
  align-items: center;
}

/* With the visual rail now acting as the top-level header, reset the old
 * standalone constellation margin. */
body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-wrapper > .zy-chapter-visual-rail {
  align-self: stretch;
}

/* Fictioneer can narrow the reading panel while the browser remains wide.
 * Mirror the viewport fallbacks against the actual chapter shell width. */
@container zy-cinematic (max-width: 980px) {
  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic {
    min-height: 0;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic__image {
    min-height: 0;
    aspect-ratio: 16 / 7;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail > .zy-chapter-constellation {
    height: auto;
    min-height: 0;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail > .zy-chapter-constellation .zy-chapter-constellation__viewport {
    min-height: 0;
    align-items: start;
  }
}

@container zy-cinematic (max-width: 640px) {
  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail {
    gap: 0.58rem;
    margin-bottom: 0.72rem;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic {
    border-radius: 15px;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic__image {
    aspect-ratio: 16 / 8.5;
  }
}

@media (max-width: 980px) {
  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic {
    min-height: 0;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic__image {
    min-height: 0;
    aspect-ratio: 16 / 7;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail > .zy-chapter-constellation {
    height: auto;
    min-height: 0;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail > .zy-chapter-constellation .zy-chapter-constellation__viewport {
    min-height: 0;
    align-items: start;
  }
}

@media (max-width: 640px) {
  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-visual-rail {
    gap: 0.58rem;
    margin-bottom: 0.72rem;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic {
    border-radius: 15px;
  }

  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic__image {
    aspect-ratio: 16 / 8.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic__image {
    transition: none;
  }
}

@media print {
  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-cinematic,
  body.single-fcn_chapter.zy-cohesion-view .zy-chapter-constellation {
    display: none !important;
  }
}