/*
 * Homepage QuixLab hero + feature cards (pages/index.astro; content from
 * content/pages/home.json `hero` and `features`).
 *
 * The hero was drawn as one composition: text on the left, the notebook
 * screenshots top-right, the F1 photo along the foot, three feature cards below.
 * It must KEEP ITS PROPORTIONS when the window is resized horizontally, so every
 * size and position inside it is expressed in --u = one mockup pixel at the
 * current width. The mockup's content box was 1533px wide:
 *   --u: calc(100cqw / 1533)
 * with the stage and the feature grid as `container-type: inline-size`
 * containers (cqw resolves against them in their descendants).
 *
 * The content box lines up with the nav: its left edge is the logo's left edge
 * and its right edge is the BOOK A DEMO button's right edge, i.e. the nav's inner
 * content box (css/nav.css .nav__inner). Above the rail width the composition
 * stops growing and stays centred. Below 900px it stacks.
 *
 * The page's nav is the light theme (<site-header theme="light">, .nav--light),
 * which the hero's pale background runs up behind.
 */

.home-main { display: block; }

.qlh {
  --qlh-bg: #D2DDDF;
  --qlh-nav: var(--nav-height);
  position: relative;
  background: var(--qlh-bg);
  color: var(--almost-black);
  /* run up behind the transparent nav (the nav is z-index 105, so it stays on top) */
  margin-top: calc(-1 * var(--qlh-nav));
  padding-top: var(--qlh-nav);
  overflow: hidden; /* clips the photo where it bleeds past the right edge and the foot */
}

/* The stage = the nav's inner content box (css/nav.css .nav__inner: rail width clamped to
   --rail-min-margin, minus its 24px padding each side). */
.qlh__stage,
.qlf__grid {
  width: calc(min(var(--rail-width), 100% - 2 * var(--rail-min-margin)) - 48px);
  margin-inline: auto;
  container-type: inline-size;
  --u: calc(100cqw / 1533);
}
.qlh__stage { position: relative; aspect-ratio: 1533 / 951; }

/* max-width: none on both images — reset.css caps every img at max-width:100%,
   and the photo is wider than the stage (it bleeds off the right edge). */
.qlh__photo {
  position: absolute;
  left: calc(84 * var(--u));
  top: calc(270 * var(--u));
  width: calc(1543 * var(--u));
  max-width: none;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
/* Up to ~1630px wide the photo runs past the window's right edge and is cut there. Wider,
   the stage stops growing, so the photo ends inside the window: fade its right edge into
   the background rather than show a hard edge. (Its left and top fades are in the image.) */
@media (min-width: 1631px) {
  .qlh__photo {
    -webkit-mask-image: linear-gradient(to right, #000 94%, transparent 100%);
    mask-image: linear-gradient(to right, #000 94%, transparent 100%);
  }
}
/* The screenshot cluster (briefs/home-quixlab-hero/build_cluster.py). Its canvas has a
   40-app-px transparent margin for the shadows, and 1 app px = 0.6302u, so the panels
   start at (721u, 56u) and the image box is pulled up-left by 40 x 0.6302 = 25.2u. The
   report panel on the right hangs ~50u past the content edge, across the right tram
   line; z-index 102 lifts the cluster above the tram lines (.page-wrapper::after, 101)
   so the panel covers the line instead of the line crossing the panel. Still under the
   nav (105) and the banner (106). */
.qlh__shots {
  --shots-x: 721;
  position: absolute;
  left: calc((var(--shots-x) - 25.2) * var(--u));
  top: calc((56 - 25.2) * var(--u));
  width: calc(911.3 * var(--u));
  max-width: none;
  height: auto;
  z-index: 102;
}
.qlh__copy { position: relative; z-index: 3; padding-top: calc(60 * var(--u)); }

.qlh__eyebrow {
  display: flex; align-items: center; gap: calc(17 * var(--u));
  margin: 0 0 calc(14 * var(--u));
  font: 400 max(11px, calc(20 * var(--u)))/1.2 var(--font-mono);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--almost-black);
}
.qlh__eyebrow::before {
  content: ''; flex: none;
  width: max(8px, calc(15 * var(--u))); height: max(8px, calc(15 * var(--u)));
  background: var(--orange);
}
.qlh__title {
  margin: 0 0 calc(30 * var(--u));
  font: 500 calc(150 * var(--u))/1 var(--font-sans);
  letter-spacing: -0.04em; color: var(--almost-black);
}
.qlh__tagline {
  margin: 0 0 calc(32 * var(--u)); max-width: 12.6em;
  font: 500 max(20px, calc(45 * var(--u)))/1.22 var(--font-sans);
  letter-spacing: -0.02em; color: var(--almost-black);
}
.qlh__sub {
  margin: 0 0 calc(44 * var(--u)); max-width: 22em;
  font: 400 max(15px, calc(24 * var(--u)))/1.42 var(--font-sans);
  color: #3A3A3A;
}
.qlh__ctas { display: flex; flex-wrap: wrap; gap: calc(20 * var(--u)); }
.qlh__btn {
  justify-content: center;
  min-height: max(40px, calc(55 * var(--u)));
  padding: 0 max(18px, calc(28 * var(--u)));
  font-size: max(11px, calc(14 * var(--u)));
}
.qlh__btn--ink { background: var(--almost-black); color: var(--white); border-color: var(--almost-black); }
.qlh__btn--line { background: rgba(255, 255, 255, 0.30); color: var(--almost-black); border-color: rgba(10, 10, 10, 0.25); }
.qlh__btn:focus-visible { outline: 2px solid var(--almost-black); outline-offset: 4px; }

/* Feature cards */
.qlf { background: #C6D1D5; color: var(--almost-black); position: relative; z-index: 2; }
.qlf__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.qlf__item {
  border-left: 1px solid rgba(10, 10, 10, 0.08);
  padding: calc(48 * var(--u)) calc(36 * var(--u)) calc(53 * var(--u)) calc(38 * var(--u));
}
.qlf__media {
  aspect-ratio: 437 / 197; overflow: hidden; background: var(--white);
  border-radius: max(6px, calc(8 * var(--u)));
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.06), 0 8px 24px rgba(10, 10, 10, 0.06);
}
.qlf__media { position: relative; }
.qlf__media img,
.qlf__media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* The loop sits over the still (its first frame); until a frame has loaded it is transparent */
.qlf__media video { position: absolute; inset: 0; }
/* h2 here overrides the global h2 in css/layout.css */
.qlf__title {
  margin: calc(30 * var(--u)) 0 calc(14 * var(--u));
  font: 400 max(18px, calc(27 * var(--u)))/1.2 var(--font-sans);
  letter-spacing: -0.01em; color: var(--almost-black);
}
.qlf__desc { margin: 0; font: 400 max(14px, calc(18.5 * var(--u)))/1.45 var(--font-sans); color: #3A3A3A; }

/* Light band → the dark page below (the logo strip's own gradient overlaps its foot). */
.qlf-fade {
  height: 160px;
  background: linear-gradient(to bottom, #C6D1D5 0%, #8E979A 30%, #3C4142 62%, var(--almost-black) 100%);
  position: relative; z-index: 2;
}

/* ≤1300px: the nav is the 48px mobile bar with 16px gutters (css/mobile.css) */
@media (max-width: 1300px) {
  .qlh { --qlh-nav: 48px; }
  .qlh__stage, .qlf__grid { width: calc(100% - 32px); }
  /* No tram lines here and only a 16px gutter, so the overhang would run off the
     screen: shift the cluster left until the report panel ends inside the content edge. */
  .qlh__shots { --shots-x: 661; }
}

/* ≤900px: stack — text, screenshots, photo; cards in one column. Sizes stop scaling
   with the composition and use a fixed --u. */
@media (max-width: 900px) {
  .qlh__stage, .qlf__grid { --u: min(0.6px, calc(100cqw / 600)); }
  .qlh__stage { aspect-ratio: auto; display: flex; flex-direction: column; }
  .qlh__copy { order: 1; padding-top: 40px; }
  .qlh__shots { order: 2; position: relative; left: auto; top: auto; width: 100%; margin-top: 40px; }
  .qlh__photo { order: 3; position: relative; left: auto; top: auto; width: calc(100% + 32px); margin: -14% -16px 0; }
  .qlf__grid { grid-template-columns: 1fr; }
  .qlf__item { border-left: 0; border-top: 1px solid rgba(10, 10, 10, 0.08); padding: 32px 0 36px; }
  .qlf__item:first-child { border-top: 0; }
  .qlf__title { font-size: 22px; margin-top: 20px; }
  .qlf__desc { font-size: 16px; }
}