/* ============================================================
   Collection hero — full-bleed banner with overlaid title.
   Tokens only.
   ============================================================ */

.lh-coll-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 320px; /* content-safe floor; "Background fit" controls the image */
  background: var(--surface-image);
}
@media (min-width: 750px) {
  .lh-coll-hero { min-height: 420px; }
}

.lh-coll-hero__media { position: absolute; inset: 0; }
.lh-coll-hero__media picture { display: block; height: 100%; }
.lh-coll-hero__img,
.lh-coll-hero__placeholder-svg { width: 100%; height: 100%; object-fit: cover; }

/* ---- Background fit (mirrors the Difference band image-only setting) ---- */
.lh-coll-hero[data-image-fit="cover"] .lh-coll-hero__img { object-fit: cover; }
.lh-coll-hero[data-image-fit="contain"] .lh-coll-hero__img { object-fit: contain; }
.lh-coll-hero[data-image-fit="fill"] .lh-coll-hero__img { object-fit: fill; }
/* Auto — drop the floor and follow the banner's natural ratio (no crop). */
.lh-coll-hero[data-image-fit="auto"] {
  min-height: 0;
  aspect-ratio: var(--coll-hero-ar, 16 / 6);
}
/* cover, not fill: when the container ratio matches the image (the normal case)
   the two are identical, and when it does not, this crops a few pixels instead of
   stretching faces out of shape. */
.lh-coll-hero[data-image-fit="auto"] .lh-coll-hero__img { object-fit: cover; }
@media (max-width: 749px) {
  .lh-coll-hero[data-image-fit="auto"] { aspect-ratio: var(--coll-hero-ar-m, 4 / 3); }
}
.lh-coll-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(var(--lh-stone-900-rgb), calc(var(--coll-hero-overlay, 0.4) + 0.1)), rgba(var(--lh-stone-900-rgb), 0) 70%),
    rgba(var(--lh-stone-900-rgb), var(--coll-hero-overlay, 0.4));
}

.lh-coll-hero__inner { position: relative; z-index: 2; width: 100%; }
.lh-coll-hero__content { max-width: 640px; color: var(--text-on-dark); }
.lh-coll-hero--center .lh-coll-hero__inner { display: flex; justify-content: center; }
.lh-coll-hero--center .lh-coll-hero__content { text-align: center; }

.lh-coll-hero__eyebrow { color: var(--color-accent); margin-bottom: var(--space-3); }
.lh-coll-hero__heading {
  margin: 0;
  font-size: var(--font-h1);
  line-height: var(--leading-heading);
  color: var(--text-on-dark);
}
.lh-coll-hero__desc {
  margin: var(--space-4) 0 0;
  font-size: var(--font-body-lg);
  line-height: var(--leading-body);
  color: var(--text-on-dark);
  opacity: 0.92;
}
.lh-coll-hero--center .lh-coll-hero__desc { margin-inline: auto; max-width: 60ch; }