/*
  Shared top banner system.
  Homepage carousel is intentionally excluded.
*/

:is(
  .about-hero,
  .contact-hero,
  .products-hero,
  .pl-hero,
  .support-hero,
  .ti-hero,
  .nd-hero,
  .search-hero,
  .status-hero,
  .trial-hero
) {
  position: relative;
  display: flex;
  min-height: var(--site-banner-min-height, 520px);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--site-banner-bg, #080808);
  color: #fff;
}

:is(
  .about-hero__media,
  .contact-hero__media,
  .products-hero__media,
  .pl-hero__media,
  .support-hero__media,
  .ti-hero__media,
  .nd-hero__media,
  .search-hero__media,
  .status-hero__media,
  .trial-hero__media
) {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--site-banner-image, none);
  opacity: var(--site-banner-media-opacity, 1);
  filter: var(--site-banner-media-filter, none);
  transform: scale(1.02);
}

:is(
  .about-hero__shade,
  .contact-hero__shade,
  .products-hero__shade,
  .pl-hero__shade,
  .support-hero__shade,
  .ti-hero__shade,
  .nd-hero__shade,
  .search-hero__shade,
  .status-hero__shade,
  .trial-hero__shade
) {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--site-banner-shade, linear-gradient(180deg, transparent 62%, #090909 100%));
}

:is(
  .about-hero__inner,
  .contact-hero__inner,
  .products-hero__inner,
  .pl-hero__inner,
  .support-hero__inner,
  .ti-hero__inner,
  .nd-hero__inner,
  .search-hero__inner,
  .status-hero__inner,
  .trial-hero__inner
) {
  position: relative;
  z-index: 1;
  padding: var(--site-banner-inner-padding, 108px 0 88px);
  transform: var(--site-banner-inner-transform, none);
}

:is(
  .about-hero,
  .contact-hero,
  .products-hero,
  .pl-hero,
  .support-hero,
  .ti-hero,
  .nd-hero,
  .search-hero,
  .status-hero,
  .trial-hero
) :is(
  .about-eyebrow,
  .contact-eyebrow,
  .products-eyebrow,
  .pl-eyebrow,
  .support-eyebrow,
  .ti-eyebrow,
  .nd-eyebrow,
  .search-eyebrow,
  .status-eyebrow,
  .trial-eyebrow
) {
  margin: 0 0 var(--site-banner-eyebrow-gap, 14px);
  color: var(--site-banner-eyebrow-color, #24a65a);
  font-size: var(--site-banner-eyebrow-size, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

:is(
  .about-hero h1,
  .contact-hero h1,
  .products-hero h1,
  .pl-hero h1,
  .support-hero h1,
  .ti-hero h1,
  .nd-hero h1,
  .search-hero h1,
  .status-hero h1,
  .trial-hero h1
) {
  max-width: var(--site-banner-title-width, 830px);
  margin: var(--site-banner-title-margin, 0);
  color: #fff;
  font-size: var(--site-banner-title-size, 64px);
  font-weight: 800;
  line-height: var(--site-banner-title-line-height, 0.92);
  letter-spacing: -0.066em;
  text-transform: none;
  text-shadow: none;
}

.support-hero__product-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 0.85vw, 13px);
}

html[data-language="EN"] .product-detail-page .support-hero__product-title {
  gap: clamp(8px, 0.85vw, 13px);
}

html[data-language="EN"] .product-detail-page .support-hero__model-pill {
  height: 1.47em;
  min-height: 1.47em;
  padding: 0 0.52em;
  font-size: 0.42em;
}

html[data-language="EN"] .product-detail-page .support-hero {
  --site-banner-title-size: 50px;
  --site-banner-title-line-height: 1.2;
}

.support-hero__model-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0.62em;
  padding: 0.08em 0.28em 0.11em;
  border-radius: 999px;
  background: #ff2a26;
  color: #fff;
  font-size: 0.52em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.product-detail-page .support-hero__model-pill {
  box-sizing: border-box;
  height: 1.47em;
  min-height: 1.47em;
  padding: 0 0.52em;
  font-size: 0.42em;
}

html[data-language="CN"] :is(.search-hero, .status-hero, .trial-hero) {
  --site-banner-inner-transform: translateY(-20px);
  --site-banner-title-margin: 10px 0 0;
}

:is(
  .about-hero__lead,
  .contact-hero__lead,
  .products-hero__lead,
  .pl-hero__lead,
  .support-hero__lead,
  .ti-hero__lead,
  .nd-hero__lead,
  .search-hero__lead
) {
  max-width: var(--site-banner-lead-width, 660px);
  margin: var(--site-banner-lead-margin, 28px 0 0);
  color: var(--site-banner-lead-color, rgba(255, 255, 255, 0.82));
  font-size: 18px;
  line-height: 1.58;
}

:is(
  .about-hero__meta,
  .contact-hero__meta,
  .products-hero__meta,
  .pl-hero__meta,
  .support-hero__meta,
  .ti-hero__meta,
  .nd-hero__meta
) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

:is(
  .about-hero__meta span,
  .contact-hero__meta span,
  .products-hero__meta span,
  .pl-hero__meta span,
  .support-hero__meta span,
  .ti-hero__meta span,
  .nd-hero__meta span
) {
  display: inline-flex;
  min-height: 32px;
  padding: 7px 13px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--site-banner-meta-color, rgba(255, 255, 255, 0.82));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  :is(
    .about-hero,
    .contact-hero,
    .products-hero,
    .pl-hero,
    .support-hero,
    .ti-hero,
    .nd-hero,
    .search-hero,
    .status-hero,
    .trial-hero
  ) {
    --site-banner-title-size: 58px;
  }

  html[data-language="EN"] .product-detail-page .support-hero {
    --site-banner-title-size: 50px;
  }

}

@media (max-width: 900px) {
  :is(
    .about-hero,
    .contact-hero,
    .products-hero,
    .pl-hero,
    .support-hero,
    .ti-hero,
    .nd-hero,
    .search-hero,
    .status-hero,
    .trial-hero
  ) {
    --site-banner-min-height: 400px;
    --site-banner-inner-padding: 64px 0;
    --site-banner-title-size: 44px;
  }

  html[data-language="EN"] .product-detail-page .support-hero {
    --site-banner-title-size: 42px;
  }

  :is(.search-hero, .status-hero, .trial-hero) {
    --site-banner-min-height: 220px;
    --site-banner-inner-padding: 48px 0;
  }

  :is(
    .about-hero__lead,
    .contact-hero__lead,
    .products-hero__lead,
    .pl-hero__lead,
    .support-hero__lead,
    .ti-hero__lead,
    .nd-hero__lead,
    .search-hero__lead
  ) {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  :is(
    .about-hero,
    .contact-hero,
    .products-hero,
    .pl-hero,
    .support-hero,
    .ti-hero,
    .nd-hero,
    .search-hero,
    .status-hero,
    .trial-hero
  ) {
    --site-banner-min-height: 330px;
    --site-banner-inner-padding: 52px 0;
    --site-banner-title-size: 36px;
  }

  html[data-language="EN"] .product-detail-page .support-hero {
    --site-banner-title-size: 36px;
  }

  :is(.search-hero, .status-hero, .trial-hero) {
    --site-banner-min-height: 200px;
    --site-banner-inner-padding: 42px 0;
  }

  :is(
    .about-eyebrow,
    .contact-eyebrow,
    .products-eyebrow,
    .pl-eyebrow,
    .support-eyebrow,
    .ti-eyebrow,
    .search-eyebrow,
    .status-eyebrow,
    .trial-eyebrow
  ) {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  :is(
    .about-hero,
    .contact-hero,
    .products-hero,
    .pl-hero,
    .support-hero,
    .ti-hero,
    .nd-hero,
    .search-hero,
    .status-hero,
    .trial-hero
  ) {
    --site-banner-min-height: 280px;
    --site-banner-inner-padding: 44px 0;
    --site-banner-title-size: 32px;
  }

  html[data-language="EN"] .product-detail-page .support-hero {
    --site-banner-title-size: 32px;
  }

  :is(.search-hero, .status-hero, .trial-hero) {
    --site-banner-min-height: 190px;
    --site-banner-inner-padding: 38px 0;
  }
}