/* =====================================================================
   HERO layout: image on the RIGHT, full height (desktop).
   Scoped to .hero--figure-right so main.css base rules stay untouched.
   Desktop: text on the left, scaled image panel on the right.
   Mobile (<1024px): full-bleed background image; the pulsing Hero Core is
   pinned to the top-right and the brand eyebrow to the top edge.
   ===================================================================== */

/* Mobile: keep the original full-bleed background hero; hide the figure. */
.hero--figure-right .hero__figure { display: none; }

/* The pinned eyebrow exists only for mobile; the desktop layout uses the
   in-flow eyebrow inside .hero__content. Hidden everywhere by default. */
.hero--figure-right .hero__brand-eyebrow--pinned { display: none; }

/* Mobile only: shift the pulsing Hero Core to the RIGHT of the centred
   character in the background image, pinned near the top edge. */
@media (max-width: 1023px) {
  /* Fill the hero so .hero__inner's top edge == the image's top edge. This is
     only a positioning reference — the centred cluster does NOT move, because
     justify-content stays center. */
  .hero--figure-right .hero__inner {
    align-self: stretch;
    justify-content: center;
  }
  /* The stage reserves the ORIGINAL sphere footprint in the flow (same as
     index.html), so telemetry, the slider, the title and the CTA sit at the
     exact same vertical position as on index.html. The visible (smaller)
     sphere is pinned to the top, but its flow slot keeps the layout intact. */
  .hero--figure-right .hero__stage {
    width: 100%;
    min-height: min(66vw, 30svh, 280px);
  }
  /* Move ONLY the pulsing sphere: pin it 10px below the image's top edge, on
     the right. .hero__inner sits 24px (hero padding-top) below the image top,
     so 10px - 24px = -14px. */
  .hero--figure-right .hero-core {
    width: min(42vw, 170px);
    position: absolute;
    top: -14px;
    right: calc(var(--pad-container) + 6vw);
  }

  /* Pin the brand eyebrow 10px from the top edge of the background image.
     The image fills .hero (inset:0) and .hero is position:relative, so the
     pinned eyebrow (a direct child of .hero) anchors to the image's top edge.
     The in-flow eyebrow inside the centred content cluster is hidden here. */
  /* Keep the in-flow eyebrow reserving its height (invisible) so the cluster
     matches index.html; the visible copy is the pinned one at the very top. */
  .hero--figure-right .hero__content > .hero__brand-eyebrow { visibility: hidden; }

  /* The title has max-width:16ch, so as a block inside the (non-flex on mobile)
     .hero__content it hugs the left edge and its centred text looks off-centre.
     Centre the title block itself. */
  .hero--figure-right .hero__title { margin-inline: auto; }
  .hero--figure-right .hero__brand-eyebrow--pinned {
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
    text-align: center;
    padding-inline: var(--pad-container);
  }
}

@media (min-width: 1024px) {
  /* The background image now lives in its own right-hand column. */
  .hero--figure-right {
    align-items: stretch;        /* let both columns fill the hero height */
    padding-block: 0;
    overflow: hidden;
  }
  .hero--figure-right .hero__bg { display: none; }

  .hero--figure-right .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: none;   /* reset index.html's named areas */
    column-gap: 3rem;
    align-items: stretch;
    text-align: left;
  }

  /* ---- Left column: text + interactive Hero Core cluster ---- */
  .hero--figure-right .hero__content {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 0.9rem;
    padding-block: 40px;
  }
  .hero--figure-right .hero__content .hero__title { max-width: 15ch; }
  .hero--figure-right .hero__content .hero__subtitle { max-width: 46ch; }

  /* Centre the animated Hero Core over the intensity slider below it:
     match the slider's width (360px, left-aligned) and centre within it. */
  .hero--figure-right .hero__stage {
    align-self: flex-start;
    justify-content: center;
    width: min(100%, 360px);
  }
  .hero--figure-right .hero-core { width: min(22vw, 190px); }

  /* ---- Right column: the hero image, full height, scaled ---- */
  .hero--figure-right .hero__figure {
    display: block;
    grid-column: 2;
    align-self: stretch;
    position: relative;
    margin: 0;
    min-height: calc(100svh - 64px);
    transform: scale(0.8);       /* ~20% smaller, centred in the column */
    transform-origin: center;
  }
  .hero--figure-right .hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* scale to fill, no distortion */
    object-position: center top;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    display: block;
  }
  /* Gentle cinematic vignette to match the dark palette. */
  .hero--figure-right .hero__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(
      to bottom,
      rgba(14, 13, 19, 0.10) 0%,
      rgba(14, 13, 19, 0.00) 30%,
      rgba(14, 13, 19, 0.55) 100%
    );
    pointer-events: none;
  }
}

/* Wider screens: give the image a touch more presence. */
@media (min-width: 1280px) {
  .hero--figure-right .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}