/* Three shared inner-page banner sizes. Heights include the fixed header. */
:root {
  --banner-tall: 720px;
  --banner-medium: 620px;
  --banner-short: 480px;
  --banner-header: var(--header-total);
}
.page-banner.page-banner[data-banner-size],
.gallery-hero[data-banner-size] {
  height: var(--page-banner-height);
  min-height: 0;
  margin-top: 0;
}
[data-banner-size="tall"] { --page-banner-height: var(--banner-tall); }
[data-banner-size="medium"] { --page-banner-height: var(--banner-medium); }
[data-banner-size="short"] { --page-banner-height: var(--banner-short); }
.gallery-hero[data-banner-size] {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--banner-header) 0 0;
}
/* Product details use the same header-inclusive geometry as certification pages. */
:is(.robot-detail-page, .energy-detail-page) .page-banner[data-banner-size] .banner-body {
  padding-top: calc(var(--banner-header) + 24px);
  padding-bottom: 0;
}
:is(.robot-detail-page, .energy-detail-page) .page-banner[data-banner-size] .banner-slide {
  align-items: center;
}
:is(.robot-detail-page, .energy-detail-page) .page-banner[data-banner-size] .banner-bg {
  top: var(--banner-header);
  height: calc(100% - var(--banner-header));
}
@media (max-width: 992px) {
  :root {
    --banner-tall: 620px;
    --banner-medium: 520px;
    --banner-short: 420px;
    --banner-header: var(--header-h);
  }
}
@media (max-width: 768px) {
  :root {
    --banner-tall: 540px;
    --banner-medium: 480px;
    --banner-short: 380px;
  }
}

/* Topic banners preserve each uploaded image's natural ratio below the header. */
.page-banner.topic-banner[data-banner-size] {
  height: auto;
  margin-top: var(--banner-header);
  background: #092c4d;
}
.topic-banner .banner-slides {
  position: relative;
  inset: auto;
  display: grid;
}
.topic-banner .banner-slide {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  display: grid;
  align-items: center;
  min-width: 0;
}
.topic-banner .banner-bg {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  grid-area: 1 / 1;
  align-self: start;
}
.topic-banner .banner-bg img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
.topic-banner .banner-body {
  position: absolute;
  inset: auto 0;
  padding-top: 0;
  padding-bottom: 0;
}
.topic-banner .banner-title { font-size: clamp(28px, 2.5vw, 48px); }
@media (min-width: 769px) and (max-width: 1100px) {
  .topic-banner .banner-title { font-size: 28px; }
  .topic-banner .banner-desc { margin-top: 12px; max-width: 52%; font-size: 13px; line-height: 1.75; }
  .topic-banner .banner-cta { margin-top: 18px; }
  .topic-banner .banner-ui { bottom: 18px; }
}
@media (max-width: 768px) {
  .topic-banner .banner-slide { align-content: start; }
  .topic-banner .banner-mask { display: none; }
  .topic-banner .banner-body {
    position: relative;
    inset: auto;
    padding-top: 24px;
    padding-bottom: 82px;
    background: #092c4d;
  }
  .topic-banner .banner-title { font-size: 26px; line-height: 1.4; }
  .topic-banner .banner-desc { max-width: none; margin-top: 12px; font-size: 14px; line-height: 1.8; }
  .topic-banner .banner-cta { margin-top: 20px; }
  .topic-banner .banner-ui { bottom: 22px; }
}