/*
 * Pull hero backgrounds under the shared sticky header.
 *
 * Pricing already applies this treatment in pricing.css. This layer makes the
 * same first-viewport relationship explicit on the other marketing hero pages
 * without changing the home variant, legal pages, support hub, or articles.
 */

body:is(
  [data-page="sensor"],
  [data-page="sensor-evidence"],
  [data-page="app"],
  [data-page="learn-index"],
  [data-page="contact"],
  [data-page="support-getting-started"]
) {
  --ts-hdr-h: var(--ts-space-400);
}

:root:has(body[data-page="sensor"]) {
  overflow-x: clip;
}

/* .ts-dark-hero already supplies margin-top: calc(-1 * var(--ts-hdr-h)) once
   --ts-hdr-h is set above, so these rules only tune the per-page padding-top.
   The exceptions below restate margin-top where they need a different value
   (sensor-evidence) or the element is not a .ts-dark-hero (gs-hero). */
body[data-page="sensor"] .sensor-hero.ts-dark-hero {
  padding-top: calc(clamp(var(--ts-space-200), 6vw, var(--ts-space-400)) + var(--ts-hdr-h));
}

body[data-page="sensor"] .sensor-comparison__wrap {
  contain: paint;
  overflow-x: auto;
  overflow-y: hidden;
}

body[data-page="app"] .appcloud-hero--dashboard.ts-dark-hero,
body[data-page="learn-index"] .learn-index-hero.ts-dark-hero,
body[data-page="contact"] .contact-header.ts-dark-hero {
  padding-top: calc(clamp(var(--ts-space-250), 6vw, var(--ts-space-500)) + var(--ts-hdr-h));
}

body[data-page="sensor-evidence"] .evidence-hero.ts-dark-hero {
  margin-top: calc(-1 * (var(--ts-hdr-h) + var(--ts-space-200)));
  padding-top: calc(clamp(var(--ts-space-200), 4vw, var(--ts-space-350)) + var(--ts-hdr-h));
  padding-bottom: clamp(var(--ts-space-400), 8vw, var(--ts-space-600));
}

body[data-page="support-getting-started"] .gs-hero {
  margin-top: calc(-1 * var(--ts-hdr-h));
  padding-top: calc(clamp(var(--ts-space-160), 5vw, var(--ts-space-250)) + var(--ts-hdr-h));
  padding-bottom: clamp(var(--ts-space-300), 8vw, var(--ts-space-600));
}

body[data-page="support-getting-started"] .gs-hero::before {
  top: calc(-1 * var(--ts-hdr-h));
}

body[data-page="support-getting-started"] .gs-hero-aura {
  top: calc(-1 * var(--ts-hdr-h));
}

@media (max-width: 720px) {
  body[data-page="support-getting-started"] .gs-hero {
    padding-top: calc(var(--ts-space-140) + var(--ts-hdr-h));
    padding-bottom: var(--ts-space-400);
  }
}