/* ============================================================
   4Tex Spare Parts Shop — hero.css
   Full-bleed hero, ported 1:1 from the 4tex.at homepage
   (.hero-band > .hero-bleed--full) so the shop overview page
   opens with the same hero treatment as the main website.
   ============================================================ */
.hero-band { position: relative; }

.hero-bleed--full {
  display: block; position: relative; overflow: hidden;
  min-height: clamp(480px, 60vw, 680px);
}
.hero-bleed__media { position: relative; overflow: hidden; background: var(--grey-050); }
.hero-bleed__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bleed--full .hero-bleed__media {
  position: absolute; inset: 0; border-radius: 0; z-index: 0;
}
.hero-bleed--full .hero-bleed__text {
  position: relative; z-index: 2; max-width: min(72rem, 92vw);
  padding: clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem) clamp(2.5rem,6vw,4.5rem)
           max(clamp(1.25rem,4vw,2.5rem), calc((100vw - var(--container)) / 2 + clamp(1.5rem,5vw,6rem)));
  min-height: 100%; display: flex; flex-direction: column; justify-content: center;
}
.hero__eyebrow { margin-bottom: .4rem; letter-spacing: .14em; }
.hero__title {
  font-size: var(--fs-hero); line-height: 1.18; letter-spacing: .005em;
  margin: var(--sp-3) 0 var(--sp-3); max-width: 22ch;
}
.hero-bleed--full .hero__lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.7;
  max-width: 54ch; margin-top: var(--sp-3);
}
.hero-bleed--full .hero__eyebrow,
.hero-bleed--full .hero__title,
.hero-bleed--full .hero__lead {
  color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4);
}
.hero-bleed--full .hero__lead { color: rgba(255,255,255,.92); }
.hero-bleed--full .hero__title { overflow-wrap: break-word; hyphens: manual; }

.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Darkening wash so white text stays legible over any photo */
.media--darken { position: relative; }
.media--darken::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(4,14,26,.72) 0%, rgba(4,14,26,.5) 32%, rgba(4,14,26,.22) 60%, rgba(4,14,26,.42) 100%);
}
.media--darken::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(0deg, rgba(4,14,26,.55) 0%, rgba(4,14,26,0) 30%);
}

@media (max-width: 900px) {
  .hero-bleed--full { min-height: clamp(420px, 100vh, 720px); }
  .hero-bleed--full .hero-bleed__text { padding-block: clamp(2.5rem,10vw,4rem); }
}