/* ==========================================================================
   Hero block — full-width banner, shown whole (never cropped)
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  color: var(--color-white);
}

.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  min-height: 220px;
  overflow: hidden;
  background: var(--color-bg-dark);
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* intrinsic ratio (3:1) matches container exactly: never crops */
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(19, 19, 19, 0.92) 0%, rgba(19, 19, 19, 0.62) 45%, rgba(19, 19, 19, 0.25) 100%),
              linear-gradient(0deg, rgba(19, 19, 19, 0.85) 0%, rgba(19, 19, 19, 0.15) 60%);
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  padding-block: 1rem;
  max-width: 46rem;
}

.hero__breadcrumb {
  margin-bottom: 0.35rem;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-gold-gradient);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero__badge-star {
  width: 14px;
  height: 14px;
  color: var(--color-gold);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 5.2vw, 2.6875rem);
  line-height: var(--lh-hero);
  text-transform: none;
  color: var(--color-white);
  max-width: 100%;
}

.hero__subtitle {
  font-size: clamp(0.8125rem, 1.6vw, 1rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 40rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero__cta {
  margin-top: 0.5rem;
  align-self: flex-start;
}

@media (min-width: 640px) {
  .hero__media {
    min-height: 280px;
  }

  .hero__subtitle {
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 1024px) {
  .hero__content {
    padding-block: 1.5rem;
  }

  .hero__subtitle {
    font-size: 1.0625rem;
  }
}

/* ==========================================================================
   Mobile only (<768px): the banner becomes a pure background — its own
   artwork/aspect-ratio no longer sets the section height. Instead the
   text content (badge, H1, subtitle in full, CTA) flows normally and
   determines the height, and the image stretches to cover exactly that
   area (cropping is acceptable here since it is decorative background).
   Desktop/tablet (>=768px) styles above are untouched.
   ========================================================================== */
@media (max-width: 767px) {
  .hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
  }

  .hero__overlay {
    background: linear-gradient(180deg, rgba(19, 19, 19, 0.6) 0%, rgba(19, 19, 19, 0.88) 65%, rgba(19, 19, 19, 0.94) 100%);
  }

  .hero__content {
    position: relative;
    inset: auto;
    padding-block: 1.75rem 1.5rem;
  }

  .hero__subtitle {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
}