/*
  KEROSYS top-section layout refinement
  Load this file after styles.css and systems-section.css.
*/

/* Give the real corridor footage more visual weight than the hero copy. */
.hero-grid {
  grid-template-columns: minmax(430px, 0.84fr) minmax(560px, 1.16fr);
  column-gap: clamp(40px, 4vw, 64px);
  row-gap: 42px;
}

.hero h1 {
  font-size: clamp(43px, 4.7vw, 68px);
}

.hero-visual {
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  justify-self: end;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  The inspection footage was recorded vertically, so present it vertically.
  This preserves every tracked insulator instead of cropping the top and bottom.
*/
.ksys-system__intro-grid--evidence {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: clamp(52px, 6vw, 82px);
  align-items: center;
}

.ksys-system__story {
  max-width: 520px;
}

.ksys-system__evidence-media {
  width: min(100%, 400px);
  min-width: 0;
  margin: 0;
  justify-self: end;
}

/* Supports both the original direct-video markup and the newer stage wrapper. */
.ksys-system__evidence-media > video,
.ksys-system__evidence-stage {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #d9ded8;
}

.ksys-system__evidence-media > video,
.ksys-system__evidence-stage > video,
.ksys-system__evidence-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: minmax(390px, 0.94fr) minmax(460px, 1.06fr);
    column-gap: 36px;
  }
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 680px;
  }

  .hero-visual {
    width: min(100%, 780px);
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .ksys-system__intro-grid--evidence {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .ksys-system__evidence-media {
    width: min(100%, 390px);
    margin-inline: auto;
    justify-self: center;
  }
}

@media (max-width: 520px) {
  .ksys-system__evidence-media {
    width: min(100%, 340px);
  }
}

.hero-grid {
  column-gap: clamp(28px, 3vw, 44px);
}

.hero h1 {
  max-width: 570px;
  font-size: clamp(43px, 4.3vw, 62px);
}

.hero-visual {
  --hero-media-bleed: clamp(28px, 3.5vw, 64px);

  width: calc(100% + var(--hero-media-bleed));
  margin-right: calc(-1 * var(--hero-media-bleed));
  padding: 0;
  aspect-ratio: 16 / 9;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 960px) {
  .hero-visual {
    width: 100%;
    margin-right: 0;
  }
}

/* =========================================================
   SYSTEMS INTRO REFINEMENT
   ========================================================= */

.ksys-system__intro {
  padding: 88px 0 92px;
}

.ksys-system__intro-grid--evidence {
  grid-template-columns: minmax(0, 1fr) 450px;
  gap: 56px;
  align-items: start;
}

.ksys-system__story {
  max-width: 640px;
  padding-top: 6px;
}

.ksys-system__story .ksys-system__title {
  max-width: 620px;
  font-size: clamp(3.1rem, 4.2vw, 4.6rem);
  line-height: 0.98;
}

.ksys-system__story .ksys-system__intro-copy {
  max-width: 510px;
  margin-top: 28px;
}

.ksys-system__evidence-media {
  width: 450px;
  max-width: 100%;
  justify-self: end;
}

.ksys-system__evidence-media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
}

.ksys-system__loop {
  margin-top: 64px;
}

.ksys-system__loop li {
  min-height: 230px;
  padding: 24px 28px 30px;
}

/* Subtly emphasize the defensible step */


@media (max-width: 1050px) {
  .ksys-system__intro-grid--evidence {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .ksys-system__evidence-media {
    width: min(100%, 420px);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .ksys-system__intro {
    padding: 72px 0;
  }

  .ksys-system__loop {
    margin-top: 48px;
  }
}