/**
 * =============================================================================
 * COMPONENT: Hero Banner (.hero)
 * =============================================================================
 * Full-width hero section with background image, optional watermark text,
 * title, subtitle, and optional CTA button.
 *
 * Modifiers:
 *   .hero--compact   (shorter, ~40vh — inner pages)
 *   .hero--tall      (taller, ~55vh — Home, Cloverfield)
 *   .hero--solid     (solid teal bg, no image — Contact)
 *
 * Markup:
 *   <section class="hero hero--compact">
 *     <div class="hero__bg">
 *       <img class="hero__bg-image" src="..." alt="" />
 *     </div>
 *     <div class="hero__overlay"></div>
 *     <p class="hero__watermark" aria-hidden="true">SOLUTIONS</p>
 *     <div class="hero__content">
 *       <h1 class="hero__title">Imaging Solutions For Phenotyping</h1>
 *       <p class="hero__subtitle">Industry-leading solutions...</p>
 *       <a class="btn btn--primary btn--lg btn--icon" href="#">
 *         <span class="btn__label">Explore</span>
 *         <span class="btn__icon">→</span>
 *       </a>
 *     </div>
 *   </section>
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * BASE
 * --------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45vh;
  padding: var(--space-40) var(--padding-x) var(--space-32);
  overflow: hidden;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * BACKGROUND IMAGE
 * --------------------------------------------------------------------------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------------------------------------------------------------------------
 * GRADIENT OVERLAY (darkens bottom for text readability)
 * --------------------------------------------------------------------------- */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Two layers: a centred radial scrim that darkens the area behind the title
     (where the content sits, vertically centred) + a vertical gradient that
     darkens the bottom. Ensures legible white text over bright/busy imagery. */
  background:
    radial-gradient(ellipse 90% 65% at 50% 45%,
      rgba(4, 48, 65, 0.45) 0%,
      rgba(4, 48, 65, 0) 72%),
    linear-gradient(180deg,
      rgba(4, 48, 65, 0.35) 0%,
      rgba(4, 48, 65, 0.75) 100%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * WATERMARK TEXT (large faded text behind title)
 * --------------------------------------------------------------------------- */
.hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-extrabold);
  font-size: clamp(60px, 12vw, 180px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* ---------------------------------------------------------------------------
 * CONTENT
 * --------------------------------------------------------------------------- */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  max-width: 900px;
}

.hero__title {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  color: var(--color-white);
  text-transform: capitalize;
  /* Guarantees legibility even where the underlying image is bright. */
  text-shadow: 0 2px 16px rgba(4, 48, 65, 0.55);
}

.hero__subtitle {
  font-family: var(--font-inter);
  /* 18px — single common hero subtitle size across the whole site (no
     per-page overrides). No 18px design token exists, so it's set literally;
     scales down to 16px on tablet/mobile via the breakpoints below. */
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-white-90);
  max-width: 680px;
  text-shadow: 0 1px 10px rgba(4, 48, 65, 0.5);
}

/* ---------------------------------------------------------------------------
 * MODIFIER: COMPACT (inner pages — shorter)
 * --------------------------------------------------------------------------- */
.hero--compact {
  min-height: 40vh;
  padding-top: var(--space-32);
  padding-bottom: var(--space-24);
}

/* ---------------------------------------------------------------------------
 * MODIFIER: TALL (Home, Cloverfield — taller)
 * Bottom of the overlay fades all the way to the page background colour so
 * the hero image dissolves into the next section without a hard horizontal
 * seam. Particularly important on the Home where the 3 highlight cards
 * straddle this boundary.
 * --------------------------------------------------------------------------- */
.hero--tall {
  min-height: 55vh;
}

.hero--tall .hero__overlay {
  background:
    radial-gradient(ellipse 90% 60% at 50% 42%,
      rgba(4, 48, 65, 0.45) 0%,
      rgba(4, 48, 65, 0) 70%),
    linear-gradient(180deg,
      rgba(4, 48, 65, 0.35) 0%,
      rgba(4, 48, 65, 0.70) 65%,
      rgba(4, 48, 65, 1) 100%);
}

/* ---------------------------------------------------------------------------
 * MODIFIER: SOLID BACKGROUND (Contact page — no image)
 * --------------------------------------------------------------------------- */
.hero--solid {
  background-color: var(--color-dark);
}

.hero--solid .hero__overlay {
  display: none;
}

.hero--solid .hero__watermark {
  /* Typography */
  font-family: var(--font-gilroy);
  font-size: clamp(100px, 18vw, 260px);
  font-style: normal;
  font-weight: var(--fw-extrabold);
  line-height: normal;
  letter-spacing: -6.5px;
  text-transform: uppercase;

  /* Position: left-aligned, not centered */
  left: var(--padding-x);
  transform: translateY(-50%);
  text-align: left;

  /* Stroke — white gradient (Figma: Hero background stroke white gradient) */
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.15);

  /* Fill — vertical white gradient fading out */
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 21.6%, rgba(255, 255, 255, 0.00) 78.02%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero {
    padding-inline: var(--padding-x-md);
  }

  .hero__title {
    font-size: var(--text-3xl);
  }

  .hero__subtitle {
    font-size: var(--text-lg);
  }

  .hero--solid .hero__watermark {
    left: var(--padding-x-md);
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: 35vh;
    padding-inline: var(--padding-x-sm);
    padding-top: var(--space-24);
    padding-bottom: var(--space-20);
  }

  .hero--compact {
    min-height: 30vh;
  }

  .hero__title {
    font-size: var(--text-2xl);
  }

  .hero__subtitle {
    font-size: var(--text-lg);
  }

  .hero__watermark {
    font-size: clamp(40px, 15vw, 80px);
  }

  .hero--solid .hero__watermark {
    left: var(--padding-x-sm);
    font-size: clamp(50px, 18vw, 120px);
    letter-spacing: -3px;
  }
}