/* Scoped marketing layout for `TelemicaAppHomePage` — paired with `tm-marketing-page` root class. */

.tm-marketing-page {
  --tm-marketing-media-max-h: min(48dvh, 560px);
  --tm-marketing-media-max-h-narrow: min(34dvh, 400px);
  --tm-marketing-media-stack-max-h: min(50dvh, 620px);
  --tm-marketing-section-inner-max-h: calc(
    100dvh - 2 * var(--tm-marketing-section-y) - 0.5rem
  );
  --tm-marketing-section-y: clamp(3.25rem, 7vw, 5.75rem);
  --tm-marketing-hero-min-h: min(92dvh, 920px);
}

.tm-marketing-page .tm-marketing-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-height: 100dvh;
  min-height: var(--tm-marketing-hero-min-h);
  padding-block: var(--tm-marketing-section-y);
  overflow: hidden;
}

.tm-marketing-page .tm-marketing-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: scale(1.02);
  background-color: var(--mantine-color-body);
  background-image: linear-gradient(
      115deg,
      color-mix(in srgb, var(--mantine-color-body) 76%, transparent) 0%,
      color-mix(in srgb, var(--mantine-color-orange-2) 22%, transparent) 42%,
      color-mix(in srgb, var(--mantine-color-body) 55%, transparent) 100%
    ),
    url("/assets/images/marketing/vehicle/sunset-lineup.webp");
  background-size: cover;
  background-position: 62% 42%;
  filter: saturate(1.05);
}

[data-mantine-color-scheme="dark"] .tm-marketing-page .tm-marketing-hero__bg {
  background-image: linear-gradient(
      125deg,
      color-mix(in srgb, var(--mantine-color-body) 82%, transparent) 0%,
      color-mix(in srgb, var(--mantine-color-dark-6) 58%, transparent) 48%,
      color-mix(in srgb, var(--mantine-color-body) 72%, transparent) 100%
    ),
    url("/assets/images/marketing/vehicle/desert-race-tacoma.webp");
  background-position: 50% 55%;
  filter: saturate(1.08) brightness(0.92);
}

.tm-marketing-page .tm-marketing-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 18% 12%,
    color-mix(in srgb, var(--mantine-color-orange-0) 35%, transparent),
    transparent 62%
  );
}

[data-mantine-color-scheme="dark"] .tm-marketing-page .tm-marketing-hero__veil {
  background: radial-gradient(
    130% 100% at 14% 0%,
    color-mix(in srgb, var(--mantine-color-orange-8) 22%, transparent),
    transparent 58%
  );
}

.tm-marketing-page .tm-marketing-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.tm-marketing-page .tm-marketing-intro-section {
  box-sizing: border-box;
  max-height: 100dvh;
  overflow: hidden;
}

.tm-marketing-page .tm-marketing-intro-section img {
  max-height: min(52dvh, 440px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.tm-marketing-page .tm-marketing-section {
  box-sizing: border-box;
  max-height: 100dvh;
  overflow: hidden;
  padding-block: var(--tm-marketing-section-y);
}

.tm-marketing-page .tm-marketing-section-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-height: min(var(--tm-marketing-section-inner-max-h), 100%);
  min-height: 0;
  /* Let FrostedPaper / visual-frame shadows paint; outer section still clips overflow */
  overflow: visible;
}

.tm-marketing-page .tm-marketing-section-grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  align-items: stretch;
  /* DMC/Mantine major versions may rename `mantine-SimpleGrid-root`; keep rail breathing room. */
  gap: var(--mantine-spacing-xl) !important;
}

.tm-marketing-page .tm-marketing-section-grid .tm-frosted-paper {
  /* Matches foundation frost (backdrop works); avoid clipping blur + drop shadows mid-tree */
  min-height: 0;
  overflow: visible !important;
}

.tm-marketing-page .tm-marketing-section-grid > .tm-frosted-paper {
  box-sizing: border-box;
  /* Guardrail when `p` from props does not land on the DOM root (flex stretch + class churn). */
  padding-block: var(--mantine-spacing-xl) !important;
  padding-inline: var(--mantine-spacing-xl) !important;
}

.tm-marketing-page .tm-marketing-section-grid .tm-marketing-copy-features-block .mantine-Group-root {
  flex-wrap: wrap;
}

.tm-marketing-page .tm-marketing-section--mist {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mantine-color-gray-0) 52%, transparent),
    transparent 72%
  );
}

[data-mantine-color-scheme="dark"] .tm-marketing-page .tm-marketing-section--mist {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mantine-color-dark-7) 38%, transparent),
    transparent 74%
  );
}

.tm-marketing-page .tm-marketing-section--ridge {
  background: light-dark(
    color-mix(in srgb, var(--mantine-color-gray-0) 88%, transparent),
    color-mix(in srgb, var(--mantine-color-dark-8) 84%, transparent)
  );
}

.tm-marketing-page .tm-marketing-visual-frame {
  position: relative;
  border-radius: var(--mantine-radius-lg);
  overflow: hidden;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-height: var(--tm-marketing-media-max-h);
}

.tm-marketing-page .tm-marketing-visual-frame:not(.tm-marketing-visual-frame--stack) {
  aspect-ratio: 16 / 10;
}

.tm-marketing-page .tm-marketing-visual-frame__tile {
  border: none;
  box-shadow: none;
  margin: 0;
  outline: none;
  overflow: hidden;
}

.tm-marketing-page .tm-marketing-visual-frame__tile--first {
  border-radius: var(--mantine-radius-lg) var(--mantine-radius-lg) 0 0;
}

.tm-marketing-page .tm-marketing-visual-frame__tile--last {
  border-radius: 0 0 var(--mantine-radius-lg) var(--mantine-radius-lg);
}

html[data-mantine-color-scheme="light"] .tm-marketing-page .tm-marketing-visual-frame {
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--mantine-color-black) 14%, transparent),
    0 3px 10px color-mix(in srgb, var(--mantine-color-black) 7%, transparent);
}

html[data-mantine-color-scheme="dark"] .tm-marketing-page .tm-marketing-visual-frame {
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.38),
    0 5px 14px rgba(0, 0, 0, 0.22);
}

/* FrostedPaper ships a 2px chromed border for app chrome; strip it on marketing rails only. */
.tm-marketing-page .tm-frosted-paper {
  border: none !important;
}

html[data-mantine-color-scheme="light"] .tm-marketing-page .tm-frosted-paper {
  box-shadow:
    0 8px 26px color-mix(in srgb, var(--mantine-color-black) 16%, transparent),
    0 2px 10px color-mix(in srgb, var(--mantine-color-black) 8%, transparent) !important;
}

html[data-mantine-color-scheme="dark"] .tm-marketing-page .tm-frosted-paper {
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.38),
    0 4px 14px rgba(0, 0, 0, 0.22) !important;
}

.tm-marketing-page .tm-marketing-visual-frame:not(.tm-marketing-visual-frame--stack)
  .mantine-Image-root {
  display: block;
  height: 100%;
  line-height: 0;
  max-height: var(--tm-marketing-media-max-h);
  width: 100%;
}

.tm-marketing-page .tm-marketing-visual-frame:not(.tm-marketing-visual-frame--stack) img {
  border: none;
  display: block;
  height: 100%;
  max-height: var(--tm-marketing-media-max-h);
  outline: none;
  vertical-align: top;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.tm-marketing-page .tm-marketing-visual-frame--stack {
  display: flex;
  flex-direction: column;
  max-height: var(--tm-marketing-media-stack-max-h);
}

.tm-marketing-page .tm-marketing-visual-frame--stack > .mantine-Stack-root {
  flex: 1 1 auto;
  gap: 0 !important;
  max-height: 100%;
  min-height: 0;
}

.tm-marketing-page .tm-marketing-visual-frame--stack .tm-marketing-visual-frame__tile {
  flex: 1 1 50%;
  min-height: 0;
  max-height: min(26dvh, 310px);
  overflow: hidden;
}

.tm-marketing-page .tm-marketing-visual-frame--stack .mantine-Image-root {
  display: block;
  height: 100%;
  line-height: 0;
  width: 100%;
}

.tm-marketing-page .tm-marketing-visual-frame--stack img {
  border: none;
  display: block;
  height: 100%;
  width: 100%;
  min-height: 120px;
  max-height: min(26dvh, 310px);
  object-fit: cover;
  object-position: center;
  outline: none;
  vertical-align: top;
}

.tm-marketing-page .tm-marketing-tier-grid .tm-frosted-paper {
  min-height: 0;
  max-height: 100%;
}

.tm-marketing-page .tm-marketing-quote {
  border-inline-start: 3px solid color-mix(in srgb, var(--mantine-primary-color) 72%, transparent);
  padding-inline-start: var(--mantine-spacing-md);
}

.tm-marketing-page .tm-marketing-hero .tm-marketing-hero__inner {
  max-height: 100%;
  min-height: 0;
  overflow: visible;
}

.tm-marketing-page .tm-marketing-section.tm-marketing-section--ridge > .tm-marketing-section-inner > .mantine-Stack-root {
  flex: 1 1 auto;
  max-height: 100%;
  min-height: 0;
  overflow: visible;
}

/* Shorter crops when the layout stacks or the viewport is narrow. */
@media (max-width: 62em) {
  .tm-marketing-page {
    --tm-marketing-media-max-h: var(--tm-marketing-media-max-h-narrow);
    --tm-marketing-media-stack-max-h: min(42dvh, 520px);
  }
}

/* Pricing band: fit four stacked tier cards on phone without clipping the section */
@media (max-width: 47.99em) {
  /*
   * Let this band exceed one viewport when needed so stacked tier cards are not clipped;
   * document scroll remains natural on iPhone (other sections stay viewport-capped).
   */
  .tm-marketing-page .tm-marketing-pricing-section.tm-marketing-section {
    --tm-marketing-section-inner-max-h: none;
    max-height: none;
    overflow: visible;
    --tm-marketing-section-y: clamp(0.35rem, 2vw, 0.75rem);
  }

  .tm-marketing-page .tm-marketing-pricing-section > .tm-marketing-section-inner {
    max-height: none;
    padding-block: var(--mantine-spacing-xs) !important;
    padding-inline: var(--mantine-spacing-sm) !important;
  }

  .tm-marketing-page .tm-marketing-pricing-stack.mantine-Stack-root {
    gap: var(--mantine-spacing-xs) !important;
  }

  .tm-marketing-page .tm-marketing-pricing-section .tm-marketing-tier-grid {
    gap: var(--mantine-spacing-xs) !important;
    row-gap: var(--mantine-spacing-xs) !important;
  }

  .tm-marketing-page .tm-marketing-pricing-section .tm-marketing-tier-grid > .tm-frosted-paper {
    padding: var(--mantine-spacing-xs) !important;
  }

  .tm-marketing-page .tm-marketing-pricing-section .tm-marketing-tier-extra .mantine-Divider-root {
    display: none !important;
  }

  .tm-marketing-page .tm-marketing-pricing-section .tm-marketing-tier-extra .mantine-Stack-root {
    gap: 0.125rem !important;
  }

  .tm-marketing-page .tm-marketing-pricing-section .tm-marketing-section-grid {
    max-height: none;
  }
}

/* Hide rich lists first, then quotes, then body copy as vertical space tightens. */
@media (max-height: 820px), (max-width: 62em) {
  .tm-marketing-page .tm-marketing-copy-features-block {
    display: none !important;
  }
}

@media (max-height: 700px), ((max-width: 62em) and (max-height: 880px)) {
  .tm-marketing-page .tm-marketing-quote {
    display: none !important;
  }
}

@media (max-height: 560px) {
  .tm-marketing-page .tm-marketing-copy-lede {
    display: none !important;
  }

  .tm-marketing-page .tm-marketing-hero-lede {
    display: none !important;
  }

  .tm-marketing-page .tm-marketing-tier-blurb {
    display: none !important;
  }
}

@media (max-height: 480px) {
  .tm-marketing-page .tm-marketing-hero-actions,
  .tm-marketing-page .tm-marketing-hero-subnote {
    display: none !important;
  }

  .tm-marketing-page .tm-marketing-pricing-blurb,
  .tm-marketing-page .tm-marketing-pricing-overline {
    display: none !important;
  }

  .tm-marketing-page .tm-marketing-tier-extra {
    display: none !important;
  }
}

@media (max-height: 520px) {
  .tm-marketing-page {
    --tm-marketing-media-max-h: min(30dvh, 260px);
    --tm-marketing-media-stack-max-h: min(36dvh, 400px);
    --tm-marketing-section-y: clamp(1.25rem, 4vw, 3rem);
  }

  .tm-marketing-page .tm-marketing-section-grid > .tm-frosted-paper {
    padding: var(--mantine-spacing-md) !important;
  }

  .tm-marketing-page .tm-marketing-hero .tm-frosted-paper {
    padding: var(--mantine-spacing-md) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-marketing-page .tm-marketing-hero__bg {
    transform: none;
  }
}