/*
 * Live Covenant Visual System v1.1 — large desktop / 2K / 4K composition.
 * Presentation only. No Story state, authority, auth, or interaction semantics.
 */

/*
 * The original C0 canvas capped at 1080px. That is acceptable for laptop-sized
 * desktop, but underuses 1920/2560 CSS-pixel viewports. Keep narrative measure
 * bounded while allowing the cinematic stage to become materially larger.
 */
@media (min-width: 1200px) {
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-main {
    width: min(1320px, calc(100% - 64px));
    grid-template-columns: minmax(320px, 440px) minmax(560px, 1fr);
    gap: clamp(44px, 5vw, 76px);
    padding-inline: 0;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-copy {
    max-width: 440px;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stage,
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stageinner {
    min-height: 540px;
  }
}

/* Large desktop / common 4K-at-200%-scaling effective viewport. */
@media (min-width: 1600px) {
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-main {
    width: min(1500px, calc(100% - 96px));
    grid-template-columns: minmax(360px, 480px) minmax(720px, 1fr);
    gap: clamp(58px, 5vw, 92px);
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-copy {
    max-width: 480px;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stage,
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stageinner {
    min-height: 600px;
  }
}

/* 2K-native / 4K-at-150%-scaling class. */
@media (min-width: 2200px) {
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-main {
    width: min(1760px, calc(100% - 160px));
    grid-template-columns: minmax(380px, 520px) minmax(880px, 1fr);
    gap: clamp(72px, 5vw, 108px);
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-copy {
    max-width: 520px;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stage,
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stageinner {
    min-height: 660px;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stageinner {
    padding: clamp(34px, 2.4vw, 52px);
  }
}

/*
 * Extreme-width containment. Do not stretch native controls or narrative copy
 * across a 3840 CSS-pixel canvas. The scene art may remain full-bleed, while
 * the authored interaction canvas stays centered and deliberately bounded.
 */
@media (min-width: 3200px) {
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-main {
    width: min(1920px, calc(100% - 240px));
    grid-template-columns: 520px minmax(0, 1fr);
    gap: 112px;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stage,
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stageinner {
    min-height: 720px;
  }
}

/* Keep legacy Story shell readable on large monitors as well. */
@media (min-width: 1600px) {
  #storyLayerV1Overlay .story-v1-shell {
    width: min(920px, calc(100% - 96px));
  }
}

@media (min-width: 2200px) {
  #storyLayerV1Overlay .story-v1-shell {
    width: min(1040px, calc(100% - 160px));
  }
}