/* NA Reviews hero — banner strip + centered heading below.
   Mirrors na-library-hero geometry so banners match across pages. */

.na-reviews-hero {
  position: relative;
  width: 100%;
}

.na-reviews-hero__banner {
  position: relative;
  width: 100%;
  margin: 0 0 clamp(32px, 5vw, 64px);
  overflow: hidden;
  background: rgba(31, 31, 29, 0.05);
}

.na-reviews-hero__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.na-reviews-hero__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(31, 31, 29, var(--nrh-banner-overlay, 0));
  pointer-events: none;
}

.na-reviews-hero__banner--small  { aspect-ratio: 32 / 5; }
.na-reviews-hero__banner--medium { aspect-ratio: 16 / 3; }
.na-reviews-hero__banner--large  { aspect-ratio: 32 / 9; }

@media screen and (max-width: 749px) {
  .na-reviews-hero__banner--small  { aspect-ratio: 16 / 7; }
  .na-reviews-hero__banner--medium { aspect-ratio: 16 / 8; }
  .na-reviews-hero__banner--large  { aspect-ratio: 4 / 3; }
}

.na-reviews-hero__container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
}

.na-reviews-hero__intro {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.na-reviews-hero__eyebrow {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.62;
  margin: 0 0 1.6rem;
}

.na-reviews-hero__title {
  font-size: clamp(2.8rem, 6vw, 7.2rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 clamp(1.4rem, 2vw, 2.4rem);
}

.na-reviews-hero__lede {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto;
  opacity: 0.78;
}

@media screen and (max-width: 749px) {
  .na-reviews-hero__title {
    font-size: clamp(2.2rem, 9vw, 3.6rem);
  }
  .na-reviews-hero__eyebrow {
    font-size: 0.78rem;
    margin-bottom: 1rem;
  }
  .na-reviews-hero__lede {
    font-size: 0.95rem;
  }
}

/* Dark mode */
html[data-na-theme='dark'] #na-reviews-hero-template--reviews,
html[data-na-theme='dark'] .na-reviews-hero {
  --nrh-bg: rgb(24, 24, 21) !important;
  --nrh-text: rgb(246, 241, 235) !important;
  background: var(--nrh-bg) !important;
  color: var(--nrh-text) !important;
}