/* =========================================================
   HERO.CSS
   Desktop Hero only, built to the approved Figma screenshot.
   Deliberately RTL throughout — no direction: ltr override
   anywhere in this file. Physical right-alignment comes from
   the fact that flex-start / block inline-start both mean
   "right" in a right-to-left document; see .hero__inner and
   .hero__content below.

   Tablet/mobile Hero layout is intentionally NOT designed yet
   — see the placeholder comment in responsive.css. This file
   only adds minimal overflow safety for narrow viewports.
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden; /* safety only — no mobile layout decisions made here */
  /* Header is 100px (see header.css). Hero fills the rest of
     the first viewport, with a floor so it never gets too
     short on small/landscape screens. At the reference
     1428×848 screenshot viewport this resolves to ~748px,
     matching the measured ~747px Hero height almost exactly. */
  min-height: max(600px, calc(100vh - 100px));
}

/* ---------------------------------------------------------
   HEADER-BOTTOM FADE
   A soft white translucent gradient over the Hero's own top
   edge — not a shadow. Implemented here, not in header.css,
   so the header itself (and its layout/box model) stays
   untouched; this just sits visually on top of the Hero's
   media layer at the seam.
   --------------------------------------------------------- */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ---------------------------------------------------------
   MEDIA LAYER
   Full-bleed photo + fade, absolutely positioned so it is
   completely independent of the document's RTL flow — inset
   is symmetric, so direction never enters into it.
   --------------------------------------------------------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* No flip. The photo used to be mirrored here with
     transform: scaleX(-1), because the ORIGINAL hero-bg.jpg was
     not in the orientation the approved Figma showed and the flip
     was what put the composition the right way round.
     The photo has since been replaced with one that is already in
     its final orientation, so the flip now mirrors a correct image
     and reverses it — everything that belongs on the left appears
     on the right. Removed. If a future hero photo ever needs
     mirroring again, it is better to flip the file itself than to
     re-introduce it here. */
}

/* ---------------------------------------------------------
   SCRIM / GRADIENT
   Confirmed by inspecting hero-bg.jpg directly: the fade is
   NOT baked into the source photo (checked pixel variance
   across the full width and right-hand zone — high variance
   everywhither, no flat pale region). So the fade is built
   here as a layered gradient, physically left-to-right
   ("to right" is a physical keyword, unaffected by dir="rtl",
   the same reasoning already used for the header grid).
   Stops approximate the measured screenshot transition
   (visible photo texture to ~55%, fully flat by ~70%).
   --------------------------------------------------------- */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 40%,
    var(--color-surface) 68%
  );
  /* Stops shifted earlier (was 48%/76%) to enlarge the white
     panel per request — this only affects the overlay; the
     photo underneath (.hero__image) is untouched. */
}

/* ---------------------------------------------------------
   CONTENT POSITIONING
   No direction: ltr anywhere. In this RTL document,
   flex-start already means "right" — that's what places the
   content column on the physical right without reversing
   anything.

   THE GUTTER, AND WHY IT IS THIS EXPRESSION
   The text column is held off the right edge of the SCREEN by
   clamp(24px, 4.2vw, 100px) -- the identical expression used
   by .site-header__inner and .site-footer__inner. That is the
   whole point of it: the Hero's headline, the navigation above
   it and the logo in the footer below now share one gutter, so
   all three sit on the same vertical line at every window
   width, not only at the one this was eyeballed in.

   Measured at a 1519px viewport: the headline's right edge and
   the navigation's right edge both land on 1455.

   This used to cap at 1428px with margin-inline: auto, and the
   content carried a 52px inset of its own on top of that. The
   two together put the text 33px short of the navigation, and
   because the cap centred the box, that offset grew with the
   window. Both are gone; the gutter alone does the work.

   SCOPE -- home page only.
   .hero__inner and .hero__content exist in this file and
   nowhere else. The inner pages' heroes are a separate system
   (.cat-hero__inner, .dl-hero__inner, .pj-hero__inner,
   .contact-hero__inner, .tech-hero__inner in hero-system.css,
   anchored by their own --hero-inset of 135px), and
   hero-system.css touches .hero__inner for one declaration
   only -- min-height -- which does not meet anything here.
   Verified in the browser on technical-service.html: with
   these rules applied, every box in that hero measured
   identical to the pixel.
   --------------------------------------------------------- */
.hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: inherit;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(24px, 4.2vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: flex-start; /* RTL: flex-start = right */
}

.hero__content {
  /* 359px (headline's exact Figma frame width) + 52px inset.
     Widened from the earlier 380px estimate — required so the
     headline wraps at its real width, not a guessed one.

     The 52px padding-inline-start that used to sit here has
     moved out to the wrapper's gutter above; keeping both
     would have stacked two insets. The column's own rendered
     width is unchanged at 329px, so the headline still wraps
     exactly where it did. */
  max-width: 411px;
}

/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */
.hero__eyebrow {
  margin: 0;
  font-family: var(--font-english);
  font-weight: var(--font-weight-light);
  font-size: 40px; /* slight increase from --font-size-h2 (~38.7px at this viewport); local override, not a change to the shared token */
  line-height: var(--line-height-heading);
  letter-spacing: 0.02em;
  color: var(--color-text-strong);
}

/* ---------------------------------------------------------
   DIVIDER
   Independent graphic, stable width — not tied to the
   eyebrow's rendered width. Shrinks safely via min().
   Ratio and colors measured directly from the screenshot;
   DOM order is red-then-blue so the natural RTL flex row
   places red on the physical right (matching the reference)
   without any direction override.
   --------------------------------------------------------- */
.hero__divider {
  display: flex;
  width: min(328px, 100%); /* matches the eyebrow's rendered width exactly */
  height: 1px;
  margin-block-start: var(--space-6);
}

.hero__divider-segment {
  height: 100%;
}

.hero__divider-segment--red {
  flex: 3;
  background-color: var(--color-brand-red);
}

.hero__divider-segment--blue {
  flex: 7;
  background-color: var(--color-brand-blue);
}

/* ---------------------------------------------------------
   HEADLINE
   --------------------------------------------------------- */
.hero__headline {
  margin: 0;
  margin-block-start: var(--space-8);
  max-width: 359px; /* Figma frame width, exact */
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light); /* 300 — real Open Sans Hebrew Light file, no synthetic weight needed */
  font-size: 36px; /* Figma value, replaces earlier --font-size-h1 estimate */
  line-height: 60px; /* Figma value, explicit px per spec */
  letter-spacing: 0;
  color: var(--color-text-strong);
}

/* ---------------------------------------------------------
   PARAGRAPH
   --------------------------------------------------------- */
.hero__paragraph {
  margin: 0;
  margin-block-start: var(--space-8);
  max-width: 274px; /* Figma frame width, exact */
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular); /* Regular / 400, per Figma — was Light/300 */
  font-size: var(--font-size-body); /* 16px — Figma confirms this matches the existing token */
  letter-spacing: 0;
  line-height: var(--line-height-body); /* not specified in Figma export; kept as sitewide default */
  color: var(--color-text-strong);
}

/* ---------------------------------------------------------
   CTA
   Visibly emphasized vs. the paragraph, per direction —
   weight only, nothing else in the Hero gets heavier.
   No motion, no color change on hover: a very subtle opacity
   shift only, plus an accessible focus-visible outline.
   Icon is first in the DOM (decorative, ahead of the label
   for a11y ordering) but sits at the physical LEFT per the
   approved Figma — row-reverse flips it there without
   reordering the markup. The border-bottom is a real
   underline under icon + label together, per Figma; it is
   separate from the focus-visible outline below.
   --------------------------------------------------------- */
.hero__cta {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
  padding-bottom: var(--space-1);
  /* The underline the approved Figma put here has been removed
     at the designer's request. The padding-bottom stays: it is
     what holds the control's own height, and dropping it would
     pull the CTA up against the paragraph above. */
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-emphasis);
  font-size: var(--font-size-nav);
  color: var(--color-text-strong);
  transition: opacity 150ms ease;
}

.hero__cta:hover {
  opacity: 0.7;
}

.hero__cta:focus-visible {
  outline: 1px solid var(--color-brand-blue);
  outline-offset: 4px;
}

.hero__cta-icon {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}