/* ============================================
   hero — mobile 4:39 (DRAWN @390) + bg of wrapper 4:26 (also under the header)
   Desktop 1024–1920 INVENTED (mobile-only-mode.md): full-bleed bg, centred-column 960.
   Tablet 768–1023: pseudo-tablet (desktop-compressed composition).
   Pattern B-edge: .hero is .container.container--bleed, padding lives on .hero__content.
============================================ */

/* ---------- MOBILE (base, anchor 390) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* 600 FIXED in Figma → min-height so text can never overflow */
  min-height: clamp(492px, calc(600px + (var(--max-vw) - 390px) * 0.015), 820px);
}

/* Wrapper 4:26 fill: ONE visible photo (6fe6d99e, D-H2) + sampled edge-colour field.
   Extended UP under the transparent header by var(--header-h) (D-H1). */
.hero__bg {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--header-h));
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #020003 0%, #020108 30%, #01040d 36%, #000916 40%, #01101f 44%, #001827 48%,
    #04293c 52%, #1c4152 56%, #3d5a69 60%, #5d7282 65%, #708290 70%, #83929e 75%, #92a1ab 80%, #a3b1ba 85%,
    #b4c1c8 90%, #c6d2d9 95%, #d5e2ec 100%);
}

/* Height-driven, natural aspect, centred (D-H4) — never cover on a landscape box */
.hero__photo {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* 4:39 padding box: 20 / gutter / 40 / gutter; SPACE_BETWEEN with one child → column at the top */
.hero__content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 40px);
  padding-bottom: clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 80px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* 4:40: vertical, gap 20, children FILL */
.hero__col {
  container-type: inline-size; /* D-H3: the CTA label is width-locked to this column */
  display: flex;
  flex-direction: column;
  gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 30px);
  width: 100%;
}

/* 4:41 */
.hero__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display-hero);
  line-height: var(--lh-display-hero);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-white);
}

/* 4:42 — Mobile/Text/lead */
.hero__lead {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
  text-align: center;
  color: var(--color-white);
}

/* "e-com" / "Tier-1": never split at the hyphen (≤ 340 the lead would break "e-" / "com") */
.hero__nobreak { white-space: nowrap; }

/* 4:43 CTA — white bar, 48 tall, label bottom-aligned (alignItems MAX), padding 0 24, gap 4 */
.hero__cta {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  height: 48px;
  padding-left: 24px;
  padding-right: 24px;
  overflow: visible;
  background-color: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.2s;
}

/* BA-H2 (states not drawn) */
.hero__cta:hover { background-color: #EDEDED; }
.hero__cta:active { background-color: #DADADA; }
.hero__cta:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* I4:43;1860:5452 — drawn 344 wide in a 302 padded box: centred overflow kept (D-H7) */
.hero__cta-label {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: min(var(--text-cta-display), 16cqi); /* D-H3: 56 @390, 53.6 @375, 44.8 @320 */
  line-height: var(--lh-cta-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* ---------- PSEUDO-TABLET 768–1023 (desktop-compressed) ---------- */
@media (min-width: 768px) {
  .hero {
    min-height: clamp(605.66px, calc(605.66px + (var(--max-vw) - 768px) * 0.025), 820px);
  }

  .hero__content {
    padding-top: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    padding-bottom: clamp(45.66px, calc(45.66px + (var(--max-vw) - 768px) * 0.025), 80px);
  }

  .hero__col {
    gap: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 30px);
  }

  .hero__lead { text-wrap: balance; }

  /* D-H6: fit-content, centred — never the mobile full-width bar stretched (D2/M2) */
  .hero__cta {
    width: fit-content;
    align-self: center;
  }
}

/* ---------- DESKTOP 1024–1920 (INVENTED) ---------- */
@media (min-width: 1024px) {
  .hero {
    /* D-base 820 INVENTED; floor 612 = T-1023 (monotonic height, D-H5) */
    min-height: clamp(612px, calc(820px * (var(--max-vw) / var(--vw-base))), 1093px);
  }

  .hero__content {
    padding-top: clamp(28px, calc(40px * (var(--max-vw) / var(--vw-base))), 53px);
    padding-bottom: clamp(57px, calc(80px * (var(--max-vw) / var(--vw-base))), 107px);
  }

  /* centred-column 960 (INVENTED) */
  .hero__col {
    max-width: clamp(683px, calc(960px * (var(--max-vw) / var(--vw-base))), 1280px);
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    gap: clamp(21px, calc(30px * (var(--max-vw) / var(--vw-base))), 40px);
  }
}