/* V17 — responsive QTRON hero, scoped to the portfolio homepage. */
@layer pages {
  .page-index .portfolio-intro {
    padding-top: clamp(1.5rem, 3vw, 3rem);
    min-height: 0;
    align-content: start;
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
  .page-index .portfolio-hero-main { display: block; }
  .page-index .qtron-hero {
    order: -3;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 68svh;
    overflow: hidden;
    background: #000;
    isolation: isolate;
  }
  .qtron-hero-poster, .qtron-hero-poster img, .qtron-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .qtron-hero-video { opacity: 0; }
  .qtron-hero.is-playing .qtron-hero-video, .qtron-hero.has-frame .qtron-hero-video { opacity: 1; }
  @media (max-width: 63.999rem) {
    .page-index .portfolio-intro { padding-top: 0; }
    .page-index .qtron-hero {
      width: calc(100% + 2 * var(--pad));
      margin-inline: calc(-1 * var(--pad));
      justify-self: start;
    }
    .page-index .qtron-hero-poster img,
    .page-index .qtron-hero-video { object-fit: cover; object-position: center; }
  }
  @media (max-width: 47.999rem) and (orientation: portrait) {
    .page-index .qtron-hero {
      height: var(--qtron-mobile-height, calc(100svh - 20rem));
      aspect-ratio: auto;
      max-height: none;
    }
  }
}