/* ============================================================
   BeeGroup — Hero section
   Visual spec v2 (Fase 02.1):
   - Logo above headline, white, centered
   - Headline entirely Orange Impact (#F37321)
   - CSS underline only under the highlighted word (+ the dot)
   - No orange background box
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* Fase 02.3 — the Hero takes up ~88% of the visible viewport height.
     `svh` is the "small" viewport unit, so the measurement stays stable
     on mobile when the browser URL bar collapses/expands. `vh` is kept
     as the fallback for engines that don't yet implement `svh`.
     Previous `height: clamp(480px, 50vw, 760px)` capped the hero too
     low on large desktops, leaving the next section visible on load. */
  min-height: 88vh;
  min-height: 88svh;
  padding: 0;                       /* overrides .section padding */
  overflow: hidden;
  background: var(--bg-green);
  color: var(--color-text-inv);
  display: block;
}

/* --- Media layer -------------------------------------------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__video,
.hero__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero__poster {
  position: absolute;
  inset: 0;
  display: none; /* native <video poster=…> covers normal first-paint */
}

/* --- Overlay for text legibility ---------------------------- */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.38) 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

/* --- Content layer (logo + headline, stacked, centered) -----
   Positioned absolutely (same model as .hero__media / .hero__overlay)
   so the flex box fills the Hero's full painted area. `height: 100%`
   does not resolve against a parent that only has `min-height`
   (common on the Hero after Fase 02.3's `min-height: 88svh`), so
   `justify-content: center` would otherwise center within the
   content's intrinsic height and the lockup would pin to the top. */
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--container-pad);
  text-align: center;
}

.hero__eyebrow {
  font-size: clamp(0.75rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--bg-beige);
  margin: 0;
}

/* --- Logo lockup (official SVG, inverted to white) ---------- */
.hero__brand {
  margin: 0;
  display: flex;
  justify-content: center;
}
.hero__brand-img {
  width: clamp(120px, 15vw, 210px);
  height: auto;
  /* The source SVG uses #050605 fills everywhere — invert to pure white. */
  filter: brightness(0) invert(1);
}

/* --- Headline: all Orange Impact, no background ------------- */
.hero__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 7vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--color-primary);         /* #F37321 */
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); /* improves contrast over bright video frames */
}

.hero__title-lead,
.hero__title-mark {
  display: inline;
  color: var(--color-primary);
}

/* Underline only on the highlighted word (and its trailing dot). */
.hero__title-mark {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-skip-ink: none;
  text-decoration-thickness: clamp(3px, 0.45vw, 7px);
  text-underline-offset: clamp(2px, 0.3vw, 7px);
}

/* --- Reduced motion: hide video, show the poster still ------ */
@media (prefers-reduced-motion: reduce) {
  .hero__video  { display: none; }
  .hero__poster { display: block; }
}

/* --- Responsive ---------------------------------------------
   Fase 02.3 — Height is driven by `min-height: 88svh` at every
   breakpoint; the Hero now scales with the visible viewport instead
   of being capped. Only typography + logo sizing changes per
   breakpoint. */
@media (max-width: 768px) {
  .hero__title {
    font-size: clamp(1.75rem, 9vw, 3rem);
    line-height: 1.06;
  }
  .hero__brand-img {
    width: clamp(110px, 24vw, 160px);
  }
}

@media (max-width: 420px) {
  .hero__title {
    font-size: clamp(1.75rem, 10vw, 2.5rem);
  }
  .hero__brand-img {
    width: clamp(100px, 26vw, 140px);
  }
}