/* ── Block Content Context ────────────────────────────────────────────
   Slide partials use slide-title, slide-subtitle, stagger, and JS state
   classes that are normally scoped to .module-shell. Outside that shell
   (i.e. in block content) they need their own definitions.
   Uses @apply where possible — raw CSS only where Tailwind can't express it.
──────────────────────────────────────────────────────────────────── */

/* ── Typography ─────────────────────────────────────────────── */

.block-content-context .text-sm  { font-size: 1rem !important; }
.block-content-context .text-xs  { font-size: 0.8125rem !important; }


.block-content-context .slide-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: 20px;
}

.block-content-context .slide-subtitle {
  font-size: 1rem;
  color: var(--color-dark-muted);
  margin-bottom: 16px;
  font-weight: 400;
}

/* ── Stagger — just visible, no animation ───────────────────── */

.block-content-context .stagger {
  opacity: 1;
}

/* ── Intro in block context ─────────────────────────────────── */

.block-content-context .intro-slide {
  border-radius: 1rem;
  padding: 2.25rem 2.5rem;
}

/* ── Takeaway in block context ──────────────────────────────── */

.block-content-context .takeaway-slide {
  background: none !important;
  padding: 0.5rem 0;
  overflow: visible;
}

.block-content-context .takeaway-slide blockquote {
  color: var(--color-dark);
  font-size: 1.5rem;
}

.block-content-context .takeaway-slide p,
.block-content-context .takeaway-slide li {
  color: var(--color-dark-soft);
}

/* ── Accordion ──────────────────────────────────────────────── */
 
.block-content-context details[open] .acc-trigger {
  background: var(--color-highlight);
  color: var(--color-accent-dark);
}
 
.block-content-context details[open] .acc-icon {
  transform: rotate(180deg);
}
 
/* ── Tabs ───────────────────────────────────────────────────── */
 
.block-content-context .tab-btn.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
 
.block-content-context .tab-pane.active {
  display: block;
}
 
/* ── Hotspot ────────────────────────────────────────────────── */
 
.block-content-context .hotspot-btn {
  animation: m-hotPulse 2.5s infinite;
}
 
.block-content-context .hs-tooltip.show {
  display: block;
}
 
/* ── Flip cards ──────────────────────────────────────────────── */
 
.block-content-context .flip-card {
  perspective: 1000px;
}
 
.block-content-context .flip-inner {
  position: relative;
  width: 100%;
  min-height: 180px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
 
.block-content-context .flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}
 
/* Auto-fit grid: fills the row naturally, drops to fewer columns
   as width shrinks. Author controls content length, not column count. */
.block-content-context .flip-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
}
 
/* Back-face text stays at xs — prevent bumped .text-xs from inflating it further */
.block-content-context .flip-back-content {
  font-size: 0.8125rem !important;
}
 
/* ── Knowledge check / quiz ─────────────────────────────────── */
 
.block-content-context .quiz-opt.correct   { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success); }
.block-content-context .quiz-opt.incorrect { background: var(--color-error-light); border-color: var(--color-error); color: var(--color-error); }
 
.block-content-context .quiz-feedback.show    { display: block; }
.block-content-context .quiz-feedback.success { background: var(--color-success-light); color: var(--color-success); }
.block-content-context .quiz-feedback.error   { background: var(--color-error-light); color: var(--color-error); }
 
/* ── Matching ───────────────────────────────────────────────── */
 
.block-content-context .matching-item.is-selected {
  border-color: var(--color-accent);
  background: var(--color-highlight);
  color: var(--color-accent-dark);
  box-shadow: 0 0 0 3px var(--color-highlight);
}
 
.block-content-context .matching-item.is-matched {
  border-color: var(--color-success);
  background: var(--color-success-light);
  color: var(--color-success);
  cursor: default;
}
 
.block-content-context .matching-item.is-wrong {
  border-color: var(--color-error);
  background: var(--color-error-light);
  animation: m-shake 0.4s ease;
}
 
/* ── Drag drop ──────────────────────────────────────────────── */
 
.block-content-context .correct-placed {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success-dark);
  cursor: default;
}
 
.block-content-context .incorrect-placed {
  border-color: var(--color-error);
  animation: m-shake 0.4s ease;
}
 
/* ── True/false ─────────────────────────────────────────────── */
 
.block-content-context .tf-btn--correct {
  border-color: var(--color-success) !important;
  background: var(--color-success-light) !important;
  color: var(--color-success) !important;
}
 
.block-content-context .tf-btn--wrong {
  border-color: var(--color-error) !important;
  background: var(--color-error-light) !important;
  color: var(--color-error) !important;
  animation: m-shake 0.4s ease;
}
 
/* ── Modal open state (gallery, explore) ────────────────────── */
 
.block-content-context .ff-modal.open {
  display: flex;
} 

/* ═══════════════════════════════════════════════════════════════
   SLIDES THAT USE flex-1 TO FILL THE 16:9 SHELL
   In block context there is no parent height, so flex-1 → 0.
   Each type gets an explicit min-height appropriate for its content.
═══════════════════════════════════════════════════════════════ */
 
/* ── Before / After ─────────────────────────────────────────── */
/* flex-1 collapses; template floor is min-h-40 (160px).
   Heading + 5 items at bumped text size needs ~380px. */
 
.block-content-context .comparison-wrap {
  min-height: 380px;
}
 
/* ── Video ───────────────────────────────────────────────────── */
/* video-embed: flex-1 + min-h-40 — too short for a watchable embed. */
 
.block-content-context .video-embed {
  min-height: 340px;
}
 
/* ── Image Full ──────────────────────────────────────────────── */
/* image-full-slide is the root element (no slide-inner wrapper).
   flex-1 collapses entirely in document flow. */
 
.block-content-context .image-full-slide {
  min-height: 400px;
  border-radius: 1rem;
  overflow: hidden;
}
 
/* ── Image Pair ──────────────────────────────────────────────── */
/* Image cells use flex-1 min-h-40 inside a flex-col.
   The cell div carries the .image-pair-img class (added to ERB). */
 
.block-content-context .image-pair-img {
  min-height: 280px;
}
 
/* ── Hotspot area ────────────────────────────────────────────── */
/* flex-1 + min-h-48 (192px). Hotspot buttons are %-positioned
   so the container needs real height to be usable. */
 
.block-content-context .hotspot-area {
  min-height: 360px;
}
 
/* ═══════════════════════════════════════════════════════════════
   CAROUSEL — three modes, same collapse problem
   The outer slide-inner has flex-1 with no parent height.
   Inner viewports also use flex-1/min-h-0 → 0px.
═══════════════════════════════════════════════════════════════ */
 
/* Outer container */
.block-content-context [data-controller="slide-carousel"] {
  min-height: 520px;
  display: flex;
  flex-direction: column;
}
 
/* ── Fullscreen: the card stage (flex-1 inside flex-1 wrapper) ── */
/* Both wrappers collapse. The card stage has class:
   flex-1 relative overflow-hidden rounded-2xl border border-light-dark
   It carries .carousel-stage (added to ERB). */
 
.block-content-context .carousel-stage {
  min-height: 420px;
}
 
/* ── Peek: the peekViewport (flex-1 min-h-0) ────────────────── */
 
.block-content-context [data-slide-carousel-target="peekViewport"] {
  height: 380px;
}

/* Overlay card type: root div is relative flex-1 overflow-hidden —
   absolute-positioned image gives it no intrinsic height. */
.block-content-context [data-slide-carousel-target="card"] > .relative.flex-1 {
  min-height: 280px;
}

.block-content-context .carousel-card-img {
  max-height: 200px;
}
 
/* ── Strip: the detail panel (flex-1 min-h-0 relative) ─────── */
 
.block-content-context [data-slide-carousel-target="stripDetail"] {
  min-height: 380px;
}