/* Hero Banner */
.hero {
  position: relative;
  padding: var(--spacing-xxl) 0;
  min-height: 500px;
  display: flex;
  align-items: center;
}

.hero .container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  width: 100%;
}

.hero__content {
  flex: 1;
}

.hero__title {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark-blue);
  margin: 0 0 var(--spacing-sm);
}

.hero__subtitle {
  font-size: var(--p-size);
  line-height: var(--p-lh);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-lg);
}

.hero__buttons {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
}

.hero__cta {
  display: inline-flex;
}

/* Product image (left side) */
.hero__product-image {
  flex: 0 0 calc(50% - var(--spacing-lg) / 2 - 10px);
}

.hero__product-image img {
  max-width: 100%;
  height: auto;
}

/* Style: product — light bg, image LEFT, text RIGHT */
.hero--product {
  padding: 40px 0;
}

/* Style: image — full bg image with dark overlay, white text */
.hero--image {
  color: var(--color-white);
}

.hero--image::before {
  content: none;
}

.hero--image .hero__title {
  color: var(--color-white);
}

.hero--image .hero__subtitle {
  color: var(--color-white);
  opacity: 0.9;
}

/* Style: solid grey — light grey bg, centered text, dark color */
.hero--solid {
  min-height: auto;
  padding: var(--section-padding) 0;
}

.hero--solid .container {
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 0;
}

.hero--solid .hero__title {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark-blue);
  margin: 0 0 var(--spacing-sm);
}

.hero--solid .hero__subtitle {
  font-family: var(--font-family);
  font-size: var(--p-size);
  line-height: var(--p-lh);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: 0;
  max-width: 1000px;
  margin: 0 0 56px;
}

.hero--solid .hero__buttons {
  justify-content: center;
}

@media (max-width: 1023px) {
  .hero {
    min-height: 400px;
    padding: var(--spacing-xl) 0;
  }

  .hero .container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__buttons {
    justify-content: center;
  }

  .hero__product-image {
    flex: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding: var(--spacing-lg) 0;
  }

  /* Product hero — mobile */
  .hero--product {
    padding: 20px 0 var(--spacing-lg);
  }

  .hero--product .container {
    text-align: left;
  }

  .hero--product .hero__product-image {
    display: flex;
    justify-content: center;
  }

  .hero--product .hero__product-image img {
    max-width: 100%;
    height: auto;
  }

  .hero--product .hero__title {
    font-size: var(--h1-size-mobile, 38px);
    line-height: var(--h1-lh-mobile, 40px);
  }

  .hero--product .hero__subtitle {
    margin-bottom: var(--spacing-md);
  }

  .hero--product .hero__buttons {
    justify-content: flex-start;
    gap: var(--spacing-lg);
  }

  .hero--solid {
    padding: var(--spacing-xl) 0;
  }

  .hero--solid .hero__subtitle {
    margin: 0 auto 32px;
  }
}

@media (max-width: 390px) {
  .hero--solid .hero__subtitle {
    max-width: 335px;
  }
}