/* SPACE showcase — one heading (the SPACE sentence) followed by a two-column
   (text/video) grid, between the hero-tension transition image and the
   Ecosystem section. The separate "Built for the work that has to be right."
   heading/section that used to precede this was removed — this is the only
   heading now.

   Plain document flow, sized/spaced like every other section on the page —
   an earlier pass tried to force this to fit one viewport height via
   min-height:100vh + centering, but that made the gaps above/below it
   inconsistent from screen to screen, so it was dropped in favor of the same
   spacing rhythm the rest of the page uses. Below 1200px the grid stacks to
   a single column (see .demo-video__grid) — a higher breakpoint than the
   .wia-card / .talk-to-us__inner pattern this otherwise follows, because the
   video's width is fixed rather than percentage-based; see the note there. */

/* padding-top:0 keeps this flush against .hero-tension-transition, this
   section's original spacing before any of this redesign (see the .tension
   rule it replaced). padding-bottom:0 keeps the gap into Ecosystem at the
   sitewide 128px (this section's 0 + Ecosystem's own unmodified 128px top),
   instead of doubling to 256px — same "one side zeros its edge" pattern
   every other section on the page uses (built-different.css /
   where-it-applies.css / talk-to-us.css). */
.section.demo-video {
  padding-top: 0;
  padding-bottom: 0;
}

/* Wider than the sitewide 1200px .container cap — this section's grid wants
   more room for a 70/30 video/text split — but still with real side margins,
   not edge-to-edge. */
.demo-video__container {
  width: 100%;
  max-width: 1440px;
}

/* --space-4 (16px) — a middle ground. This was briefly --space-7 (48px, the
 * sitewide .container gutter), which restored real side margins but gave
 * that width straight back to the text column's own problem: with the video
 * sized independently by height (see .demo-video__player below), every
 * pixel of padding here comes directly out of the text column, so 48px of
 * padding meant the text column was tall enough again to noticeably exceed
 * the video's height (610px vs the video's fixed 468px) — the same
 * "cramped or too tall" tension as before, just moved. Before that it was
 * --space-2 (8px), which fixed the height (501px vs 468px) but ran text and
 * video almost to the viewport edge, reading as a mistake next to the
 * sections above and below it. 16px keeps the same 501px result while
 * giving noticeably more breathing room on the sides than 8px did — a
 * genuine side gutter, just not the full sitewide one.
 */
@media (min-width: 900px) {
  .demo-video__container {
    padding-inline: var(--space-4);
  }
}

/* The section's one heading — bigger/brighter than the body text below it
   (full white, not the muted gray a caption-style treatment used before),
   with "SPACE" itself picked out in the sitewide brand gradient
   (.gradient-text span in the HTML), the same "highlight the key phrase"
   treatment used elsewhere on the page (e.g. "cannot be wrong.",
   "by design."). Simple fade-in-up on load rather than a word-by-word
   reveal — this sentence is too long to read well one word at a time.

   max-width:1400px is wide enough that this specific sentence (~140
   characters) wraps to exactly two lines at this font size on common
   desktop widths, rather than three — verified by measuring the rendered
   element, not guessed from character counts alone. padding-inline gives it
   real side gutters of its own instead of running to the same edges as the
   container (max-width alone was letting it fill the full 1400px whenever
   the viewport was wide enough to allow it). */
.demo-video__heading {
  max-width: 1400px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  padding-inline: var(--space-7);
  font-size: clamp(1.75rem, 3.4vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--color-paper);
  animation: demo-video-fade-in 0.7s var(--ease-out) both;
}

@keyframes demo-video-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-video__heading {
    animation: none;
  }
}

.demo-video__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* 1200px, not 900px: the video's fixed width (832px, from height:52vh) plus
   the text column's min-width (220px) plus the gap and container padding
   need roughly 1100-1200px just to lay out side by side without the text
   getting crushed — the 900-1199px range used to force the row anyway,
   leaving text as narrow as ~220px wide and absurdly tall as a result.
   Below this it stacks instead (same as the video always did below 900px),
   which already reads fine at any width. */
@media (min-width: 1200px) {
  .demo-video__grid {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-7);
  }
}

/* flex:0 1 320px, not 1 1 auto: with the video's width fixed independently
   (see .demo-video__media/.demo-video__player below), letting this column
   grow to fill 100% of whatever the video doesn't use meant its share crept
   up as the viewport got wider (29% at 1280px, 38% at 1440px+) — video is
   supposed to read as the bigger, more prominent element, at roughly a
   24-30% text / 70-76% video split, not creeping toward even. A capped
   basis keeps that ratio stable regardless of viewport; .demo-video__grid
   now centers the pair (justify-content:center, above) since the row no
   longer always fills the full container width. flex-shrink stays enabled
   (the "1") so this still narrows gracefully on the 900-1100px range where
   there isn't 320px+832px+gap to spare, rather than overflowing. */
.demo-video__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 0 1 320px;
  min-width: 220px;
}

.demo-video__headline {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--color-paper);
  line-height: 1.25;
  margin-bottom: var(--space-1);
}

.demo-video__body {
  font-size: 0.9375rem;
  color: var(--color-gray-300);
  line-height: 1.5;
}

/* The three key terms — bold + the sitewide brand gradient, matching the
   short-phrase emphasis treatment used elsewhere on the page (e.g. "cannot
   be wrong.", "by design."). The two standalone bold sentences around them
   stay plain bold white: that gradient treatment is reserved for short
   phrases, not full sentences, everywhere else it's used on this page. */
.demo-video__term {
  font-weight: 700;
}

.demo-video__closing {
  font-size: var(--type-body);
  font-weight: 700;
  color: var(--color-paper);
}

/* Centered, below both columns — not inside .demo-video__text anymore. */
.demo-video__cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

/* flex:0 0 auto — sized to its content (the video), not a percentage of the
   row. This is what makes the video's size genuinely fixed: previously
   .demo-video__player was width:100% of THIS column, so the video's
   rendered size was actually driven by how wide the 70% column happened to
   be, and max-height rarely even kicked in. Sizing the video by height
   instead (see below) and letting this column hug that fixed size is what
   lets the text column claim every pixel of freed-up space instead of the
   gain being split proportionally between both columns. */
.demo-video__media {
  flex: 0 0 auto;
}

/* height, not width, is the fixed dimension now — width:auto derives from
   it via aspect-ratio. This is what makes "keep the video the same size"
   and "give the text more room" simultaneously possible: the video no
   longer cares how wide its column is (as long as it's at least this wide),
   so container/column width changes only ever affect the text column. */
.demo-video__player {
  display: block;
  width: auto;
  height: 52vh;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-dark-border);
  background: var(--color-ink-900);
  object-fit: cover;
}