/* 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 900px the grid stacks to a
   single column — same pattern as .wia-card / .talk-to-us__inner at their
   own breakpoints. */

/* 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-7 (48px), matching the sitewide .container gutter that every other
 * section uses. This was --space-2 (8px), which ran the text and the video
 * almost to the viewport edge and read as a mistake next to the sections above
 * and below it.
 *
 * This does cost the text column ~80px of width, which the earlier value was
 * deliberately buying back. The max-width above is 1440px against a sitewide
 * 1200px cap, so there is already more room here than elsewhere to absorb it.
 */
@media (min-width: 900px) {
  .demo-video__container {
    padding-inline: var(--space-7);
  }
}

/* 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:1040px 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. */
.demo-video__heading {
  max-width: 1400px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  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);
}

@media (min-width: 900px) {
  .demo-video__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-7);
  }
}

/* Readability comes first here — a previous pass tightened this (smaller
   type, 1.45 line-height, 4px gaps) specifically to force the text block
   shorter than the video, and that made it cramped and hard to read.

   flex:1 1 auto — this column now absorbs 100% of whatever width the fixed-
   size video (see .demo-video__media/.demo-video__player below) doesn't
   use. Previously both columns were split by percentage (30/70), which is
   why reducing the container's side padding had no visible effect on this
   text: the extra width from less padding was itself being split 30/70, so
   the text only ever gained ~30% of a few extra pixels. Now every pixel
   freed up by less padding goes straight to this column. */
.demo-video__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
}

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

.demo-video__body {
  font-size: var(--type-body);
  color: var(--color-gray-300);
  line-height: 1.55;
}

/* 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;
}