/* ==========================================================================
   CATALOG LISTING - page header band and listing-specific bits.
   Loaded only on listing pages via the Styles section.
   ========================================================================== */

.page-head {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-6) var(--sp-6);
  background: var(--tbs-green-soft);
  border-bottom: 1px solid var(--line);
}

.page-head__body { position: relative; z-index: 2; max-width: 62ch; }

.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.4vw, 3.25rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--tbs-green);
}

.page-head__lede {
  margin: var(--sp-3) 0 0;
  font-size: 1.0625rem;
  color: var(--ink-mute);
  line-height: 1.6;
}

/* When a collection supplies a hero image, the band becomes full-bleed media
   with a scrim. The text stays readable regardless of the photograph. */
.page-head.has-hero {
  padding-block: var(--sp-8);
  background: var(--tbs-green-deep);
}

.page-head.has-hero .page-head h1,
.page-head.has-hero h1 { color: var(--white); }

.page-head.has-hero .eyebrow { color: rgba(255, 255, 255, .7); }
.page-head.has-hero .page-head__lede { color: rgba(255, 255, 255, .84); }

.page-head__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .55;
}

.page-head.has-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(0, 48, 31, .82) 0%, rgba(0, 48, 31, .45) 62%, rgba(0, 48, 31, .2) 100%);
}

@media (min-width: 768px) {
  .page-head { padding-block: var(--sp-7); }
}

/* ---- Filter search box ---------------------------------------------- */

.filter-search { margin-bottom: var(--sp-4); }

@media (min-width: 1024px) {
  .filter-search { margin-bottom: var(--sp-5); }
}

/* ---- Range accent override ------------------------------------------ */
/* A range landing page sets --accent inline from G_Range.AccentHex; these rules
   are the only places it is allowed to show through. */

.page-head[style*="--accent"] h1 { color: var(--accent); }
.page-head[style*="--accent"] .eyebrow { color: var(--accent); }