/* Section: Hero */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-grey-100);
}

.hero__bg { position: absolute; inset: 0; z-index: -1; }
/* <picture> wraps the <img> when a mobile crop is set; make it fill .hero__bg
   so the <img>'s height:100% has a definite box to resolve against. */
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.40) 100%);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding-top: calc(var(--header-h) + var(--space-3xl));
  padding-bottom: var(--space-6xl);
  /* alignment comes from the .u-align-* utility (ACF "align" field) */
}

.hero__eyebrow { gap: var(--space-xs); }
.hero__rating-text {
  font-size: var(--fs-body-s);
  font-weight: 500;
  color: var(--color-grey-100);
}

.hero__heading {
  max-width: 750px;
  color: var(--color-grey-100);
}
.hero__heading em { font-style: italic; }

.hero__sub {
  max-width: 750px;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-100);
}

.hero__btn { min-width: 304px; margin-top: var(--space-2x); }

/* Tablet */
@media (max-width: 1024px) {
  .hero__heading { font-size: 48px; line-height: 56px; }
}

/* Mobile */
@media (max-width: 600px) {
  .hero { min-height: 80vh; }
  /* Stars on top, label on its own line below (Figma) — instead of one cramped wrapped row. */
  .hero__eyebrow { flex-direction: column; }
  .hero__heading { font-size: 36px; line-height: 42px; letter-spacing: -1px; }
  .hero__btn { width: 100%; min-width: 0; }
}