/* SetPrep concept embed adapter — production overrides for components.
 *
 * The ideas-board components ship with placeholder chrome that the live
 * site already provides (site nav, background videos). This file hides
 * that placeholder chrome WITHOUT touching the component source, so the
 * concept code stays byte-identical to the SetPrep-Ideas-Board.html.
 *
 * If you ever want to re-render the placeholder chrome (e.g. to preview
 * how the concept looks isolated), just remove the relevant rule. */

/* Concept wrapper baseline — let the inner .sp-concept fill it */
[data-setprep-concept] {
  display: block;
  position: relative;
  width: 100%;
}

/* The hero is the page's hero — at least the viewport tall. */
[data-setprep-concept="ConceptHeroEditorial"],
[data-setprep-concept="ConceptHeroSplit"],
[data-setprep-concept="ConceptHeroArc"] {
  min-height: 100vh;
}

/* Mid-page concepts get a fixed working height (mirrors the ideas-board
 * artboard size). Mobile collapses these via the @media block below. */
[data-setprep-concept="ConceptScan"],
[data-setprep-concept="ConceptCamelot"],
[data-setprep-concept="ConceptReasoning"] {
  min-height: 620px;
}

[data-setprep-concept="ConceptCounters"]    { min-height: 360px; }
[data-setprep-concept="ConceptControlRoom"],
[data-setprep-concept="ConceptStyles"]      { min-height: 720px; }
[data-setprep-concept="ConceptPipeline"]    { min-height: 1100px; }

/* Hide the .sp-grid lime-cyan grid wash inside ANY embedded concept —
 * the live homepage already has its own atmosphere via the video bg. */
[data-setprep-concept] .sp-grid::before { display: none !important; }

/* Hide FakeVideoBG — the live site already loops real B-roll behind the
 * hero. The component still mounts; it just renders invisibly. */
[data-setprep-concept] .sp-fakevideo { display: none !important; }

/* Make hero-concept .sp-concept transparent so the page's real video bg
 * shows through. Without this the component's #0a0a0a background paints
 * a black box on top of the .hero-bg-video and the hero looks dead. */
[data-setprep-concept="ConceptHeroEditorial"] .sp-concept,
[data-setprep-concept="ConceptHeroSplit"] .sp-concept,
[data-setprep-concept="ConceptHeroArc"] .sp-concept {
  background: transparent !important;
}

/* The .sp-concept default `overflow: hidden` clips the kinetic headline +
 * lede + stats when the embed container is shorter than the natural
 * content height (which happens at large viewport widths where the
 * clamp() font scales up). Let content overflow gracefully — the
 * container itself caps the visible region. */
[data-setprep-concept="ConceptHeroEditorial"] .sp-concept {
  overflow: visible !important;
}

/* Mobile-friendly fallback. Concepts are designed at 1280px wide. Below
 * that we collapse to natural flow and let internal flex/grid reflow. */
@media (max-width: 768px) {
  [data-setprep-concept] {
    min-height: auto !important;
  }
  [data-setprep-concept="ConceptHeroEditorial"],
  [data-setprep-concept="ConceptHeroSplit"],
  [data-setprep-concept="ConceptHeroArc"] {
    min-height: 88vh !important;
  }
  /* Camelot: stack the wheel + sidebar */
  [data-setprep-concept="ConceptCamelot"] .sp-concept > div {
    grid-template-columns: 1fr !important;
  }
  /* Pipeline: drop the sticky 180px rail on mobile */
  [data-setprep-concept="ConceptPipeline"] .sp-concept > div {
    grid-template-columns: 1fr !important;
  }
}

/* Reduced-motion respect. Components use setInterval / requestAnimationFrame
 * in JS — we can't kill those from CSS, but we can suppress the visible
 * keyframe animations that live in shared.js (sp-blink, sp-fadein,
 * sp-arrowpulse, sp-vidcycle). */
@media (prefers-reduced-motion: reduce) {
  [data-setprep-concept] *,
  [data-setprep-concept] *::before,
  [data-setprep-concept] *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}