/* Purpose: Hero band — showroom photo under a two-layer scrim, headline column and detail pills. */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--scrim-hero-glow);
  /* --hero-drift is written by assets/js/components/hero-drift.js while scrolling. */
  background-position: center calc(50% + var(--hero-drift, 0px));
}

/* Narrow crops land on the dark aisle, so frame the lit counters instead and the banner still
   ends on a visible edge. */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 45%;
  opacity: var(--opacity-hero-img);
  pointer-events: none;
}

/* Scrim — heavier on the left so the headline stays legible. It must NOT fade to the page
   background at the bottom or the banner dissolves into the section below. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--scrim-hero-narrow);
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-44);
  padding: var(--space-56) var(--gutter) var(--space-72);
  align-items: center;
}

.hero__eyebrow {
  text-shadow: var(--text-shadow-eyebrow);
}

.hero__title {
  color: var(--color-ink);
  font-size: var(--fs-h1-hero);
  line-height: var(--leading-hero-h1);
  font-weight: var(--weight-semibold);
  text-shadow: var(--text-shadow-hero);
}

.hero__sub {
  margin-top: var(--space-26);
  max-width: 56ch;
  color: var(--color-ink-2);
  font-size: var(--fs-sub);
  line-height: var(--leading-sub);
  text-shadow: var(--text-shadow-sub);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-36);
}

.hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  width: 100%;
  padding: var(--space-11) var(--space-20);
  background: var(--card-pill);
  border: 1px solid var(--color-line-2);
  -webkit-backdrop-filter: var(--blur-pill);
  backdrop-filter: var(--blur-pill);
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-14-5);
  color: var(--color-ink);
  transition:
    transform var(--duration-med) var(--ease-smooth),
    border-color var(--duration-med) ease,
    background var(--duration-med) ease;
}

.hero__meta-item:hover {
  border-color: var(--color-line-3);
  transform: translateY(-3px);
  background: var(--color-gold-tint-10);
}

.hero__meta-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border-radius: 50%;
  background: var(--foil-soft);
  display: grid;
  place-items: center;
  color: var(--color-dark-ink);
  font-size: 10px;
  font-weight: var(--weight-black);
  box-shadow: var(--shadow-pill-ic);
}

@media (min-width: 561px) {
  .hero__meta {
    gap: var(--space-12);
  }

  .hero__meta-item {
    width: auto;
  }
}

@media (min-width: 821px) {
  .hero__media {
    object-position: center;
  }

  .hero::after {
    background: var(--scrim-hero);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-40);
    padding-top: var(--space-88);
    padding-bottom: var(--space-104);
  }
}

@media (min-width: 1081px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.2fr) 420px;
    gap: var(--space-64);
  }
}