/* =========================================================================
   Emergency-override screen inset -- a small looping clip of the real box
   firmware's override view (website/assets/video/screen/override-loop.webm),
   sitting beside the "Emergency override" heading next to the interactive
   .override-demo button (styles.css). The interactive demo lets a visitor
   feel the mechanism; this inset shows what the physical display actually
   does while they do it -- complementary, not redundant, so it stays small
   and never competes with the demo for attention.

   Reduced-motion handling is CSS/markup only, no JS: the <source> in
   index.html is scoped to `media="(prefers-reduced-motion: no-preference)"`,
   so under reduced motion the <video> has no matching source to select,
   autoplay never has anything to play, and the element simply displays its
   `poster` (override-view-still.png) as a static image. This file only
   handles sizing/layout -- it never touches the global reduced-motion block
   in styles.css.
   ========================================================================= */

.setting__head.setting__head--override {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.setting__head-text {
  /* Stacked (not side-by-side like the other four cards' plain .setting__head)
     so the title block's own hypothetical width stays small -- flex-basis 0
     below means it never forces the row to wrap the video onto its own
     line; it just grows to fill whatever space the inset leaves beside it. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 0%;
  min-width: 0;
  gap: var(--space-1);
}

.override-inset {
  flex: none;
  width: 58px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.override-inset__frame {
  width: 100%;
  aspect-ratio: 172 / 320;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-2);
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.6);
}

.override-inset__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.override-inset__caption {
  margin: 0;
  max-width: 84px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  line-height: 1.3;
  text-align: center;
  color: var(--text-3);
}

/* Tablet: the card is already down to 2 columns (styles.css, 980px bp) and
   narrower, so the inset shrinks a step but keeps its place beside the
   heading -- it still reads as a small screen, not a thumbnail crop. */
@media (max-width: 900px) {
  .override-inset { width: 50px; }
}

/* Mobile: .adjust__grid collapses to one column here (styles.css, 560px bp)
   and the card is at its narrowest, full-width state. The interactive demo
   is the one thing on this card a visitor must be able to complete without
   scrolling past extra material, so the inset is hidden rather than stacked
   -- stacking it above the paragraph/track/demo would push the demo further
   down the card on exactly the viewport where vertical space is tightest. */
@media (max-width: 560px) {
  .override-inset { display: none; }
  /* With the inset gone there's no reason left to keep the title stacked --
     restore the same single-row h3-left/badge-right layout the other four
     .setting cards use at this width, instead of leaving a hidden-inset
     side effect behind. */
  .setting__head-text { flex-direction: row; align-items: baseline; justify-content: space-between; }
}