/* Product: content revealing at the reading line like the features section and fading out as the section leaves; heading, the shared media viewer (styles/viewer.css) with the drone photos, and the spec sheet in two groups (platform, target recognition). On wide screens the viewer holds on the left while heading and specs scroll past it on the right, each group title holding the viewport top until its group has passed. */
.product {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 64px var(--gutter) 72px;
  display: grid;
  justify-items: center;
  gap: 40px;
}

/* heading, viewer and spec panel fade and rise in at the reading line like the features section (core/reveal.js), and fade back out as they
   drop below it */
.product :is(h2, .viewer, .specs) { transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }

.product :is(h2, .viewer, .specs)[data-state="pending"] {
  opacity: 0;
  translate: 0 24px;
}

/* where scroll timelines work, the content fades out as the section's end leaves through the top 60% of the viewport */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .product { view-timeline: --product block; }

    .product > * {
      animation: product-out linear both;
      animation-timeline: --product;
      animation-range: exit 40% exit 100%;
    }
  }
}

@keyframes product-out {
  to { opacity: 0; }
}

/* heading to photos when stacked: the features heading-to-item gap (96px, 144px on wide screens), less the stage's 24px grid gap */
.product h2 {
  grid-column: 1 / -1;
  margin: 0 0 72px;
  text-align: center;
  font: 800 clamp(28px, 3.4vw, 52px)/1.1 var(--font-display);
  font-synthesis: none;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.product-track {
  width: 100%;
  max-width: 1280px;
}

.product-stage {
  display: grid;
  gap: 24px;
}

.specs-body {
  display: grid;
  align-content: start;
  gap: 40px;
}

/* group titles set like the Why Sentry item titles (features.css .feat h3), kept in the accent */
.specs h3 {
  margin: 0 0 12px;
  font-weight: 500;
  font-size: var(--text-title);
  line-height: 1.15;
  color: var(--circle-base);
}

.specs dl { margin: 0; }

.specs dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

/* labels and values at the size of the Why Sentry item text (features.css .feat p) */
.specs dt {
  color: var(--mute);
  font-size: var(--text-detail);
  line-height: 1.5;
}

.specs dd {
  margin: 0;
  font-size: var(--text-detail);
  line-height: 1.5;
}

@media (min-width: 761px) {
  .specs h3 { font-size: clamp(20px, 1.7vw, 26px); }
  .specs :is(dt, dd) { font-size: 16px; }
}

/* phones: the photo frame runs across the whole gutter to the screen's edges, about 12% larger, with square corners there; the photos
   sit on black like the page, so its edges don't show */
@media (max-width: 760px) {
  .product .viewer-frame {
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
  }
}

@media (min-width: 761px) {
  .product {
    padding: 120px var(--gutter);
    gap: 56px;
  }

  .product h2 { margin-bottom: 120px; }

  .specs-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
  }
}

/* wide screens: under the centred heading, the viewer starts level with the specs, then holds on the left once it reaches the viewport's
   vertical centre (--media-h, its height, set by core/media-viewer.js) while the specs run past it on the right with the page; each group title holds
   the top of the viewport until its group has scrolled by */
@media (min-width: 1024px) {
  .product-track { max-width: 1680px; }

  .product-stage {
    grid-template-columns: minmax(0, 5fr) minmax(300px, 2fr);
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    row-gap: 0;
  }

  .product h2 {
    grid-row: 1;
    margin-bottom: 144px;
  }

  .product .viewer {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: calc(50vh - var(--media-h, 0px) / 2);
    top: calc(50svh - var(--media-h, 0px) / 2);
  }

  .specs {
    grid-column: 2;
    grid-row: 2;
  }

  .specs-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .specs h3 {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 24px 0 12px;
    background: var(--bg);
  }
}