/* =========================================================
   HERO-SYSTEM.CSS
   One hero for the whole site. Loads AFTER each page's own
   stylesheet and overrides the five heroes that had each been
   built to their own frame, so height, type and position are
   now identical everywhere.

   Covered: Home, Category, Downloads, Projects, Contact,
   Technical Service. Product pages are deliberately NOT in
   this file -- their hero is a different composition (photo
   carousel + product code) and is being decided separately.

   The reference is the Contact hero: 64px Open Sans Hebrew
   Light over the SILANDE label and the blue/red rule, with a
   13px paragraph under it.

   THE SPEC
     band height   max(600px, 100vh - 79px)   -- 79 = the header
     text block    vertically centred in the band
     right edge    135px in from the SCREEN's right edge at every
                   width (87 rail + 48), so the gap to the rail
                   never changes
     SILANDE       Jost 8px / 1.6px tracking / #000
     rule          67.6 x 1.5, blue 70 / red 30, red physically right
     h1            Open Sans Hebrew Light, 64px
     sub-line      24px Regular  (only where a page has one)
     paragraph     13px Regular, #747474, max 264px

   FONTS -- the one thing that must not drift:
     Hebrew  -> var(--font-hebrew)   Open Sans Hebrew
     English -> var(--font-english)  Blinker
     SILANDE -> Jost                 (Century Gothic substitute)
   The rules below set the Hebrew face on the headings, and a
   single [lang="en"] rule after them hands anything marked as
   English back to Blinker. The SILANDE label comes last so its
   Jost wins over both.
   ========================================================= */

/* Jost stands in for Century Gothic (commercial, not licensed
   for embedding). Declared here too so this file works on a page
   whose own stylesheet never declared it. */
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 79px is the header's real height (header.css, Figma-exact).
     The 600px floor keeps the hero usable on a short laptop
     window. */
  --hero-height: max(600px, calc(100vh - 79px));
  --hero-inset: 135px;     /* 87 rail + 48 */
}

/* ---------------------------------------------------------
   1 — BAND
   --------------------------------------------------------- */
.hero,
.cat-hero,
.dl-hero,
.pj-hero,
.contact-hero,
.tech-hero {
  position: relative;
  height: var(--hero-height);
  min-height: var(--hero-height);
  overflow: hidden;
}

/* ---------------------------------------------------------
   2 — MEDIA
   At full-window height the photo has to cover the band at any
   window shape, so every hero now uses the same model Contact
   and Technical Service already used: fill the band, crop from
   the centre, never stretch.

   That makes the side fills and the edge mask on Downloads and
   Projects redundant -- they existed only because those photos
   were scaled by height and left a strip of empty band beside
   them. There is no strip any more.
   --------------------------------------------------------- */
.dl-hero__image,
.pj-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.dl-hero__fill,
.pj-hero__fill { display: none; }

/* ONE wash for all five. Each page had its own, anchored to the
   band's CENTRE -- so the light panel under the text moved with
   the window while the text no longer does. Anchored to the
   screen's RIGHT edge instead, it now sits under the type at
   every width, and every hero reads with the same weight of
   light over the photo. */
.cat-hero__wash,
.dl-hero__wash,
.pj-hero__wash,
.contact-hero__wash,
.tech-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to left,
    rgba(247, 247, 245, 0.90) 0,
    rgba(247, 247, 245, 0.86) 330px,
    rgba(247, 247, 245, 0.66) 520px,
    rgba(247, 247, 245, 0.28) 730px,
    rgba(247, 247, 245, 0) 930px);
}

/* Downloads had a flat white veil over the whole photo on top of
   its wash; the shared wash above replaces it. */
.dl-hero__veil { display: none; }

/* ---------------------------------------------------------
   3 — POSITION
   The inner is NOT capped at 1140. If it were, the text would
   drift toward the middle of the screen as the window grew and
   its distance from the rail would change with every width.
   Uncapped + a fixed inline-start inset holds it exactly 135px
   from the screen's right edge, always.
   --------------------------------------------------------- */
.cat-hero__inner,
.dl-hero__inner,
.pj-hero__inner,
.contact-hero__inner,
.tech-hero__inner {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

/* The block is anchored by its TOP, not centred.
   Centring a block sounds like the way to line these up, but the
   blocks are not the same height -- some pages carry a sub-line,
   some do not, and the paragraphs run to different numbers of
   lines. Centring therefore put the TITLE on a different y on
   every page, which is exactly what looked uneven.
   Anchoring the top instead lands the SILANDE label, the rule and
   the title's first line on the same pixel on every page, at every
   window height, and lets the copy below differ as it must.
   50% - 140px is where a centred average-length block sat, so the
   composition keeps the balance it had. */
.cat-hero__content,
.dl-hero__content,
.pj-hero__content,
.contact-hero__content,
.tech-hero__content {
  position: absolute;
  top: calc(50% - 140px);
  /* inline-start = the physical RIGHT in this RTL document */
  inset-inline-start: var(--hero-inset);
  z-index: 2;
  display: block;
  width: 640px;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: start;
}

/* The rail has to stay on top of the hero's own layers. On Contact
   the photo and the wash live INSIDE the inner wrapper, so the
   moment that wrapper got a z-index of its own it lifted them over
   the rail and the white strip on the right vanished. The rail is
   pinned above everything here instead. */
.cat-hero .section-rail__item,
.dl-hero .section-rail__item,
.pj-hero .section-rail__item,
.contact-hero .section-rail__item,
.tech-hero .section-rail__item {
  z-index: 4;
}

/* ---------------------------------------------------------
   4 — TYPE
   --------------------------------------------------------- */
.cat-hero__heading,
.dl-hero__title,
.pj-hero__title,
.contact-hero__heading,
.tech-hero__heading {
  margin: 26px 0 0;
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);   /* 300 -- a real font file */
  font-size: 64px;
  /* Figma gives 50px for the single-line "צור קשר". A category
     name is long enough to take two lines at this size, and 50px
     would let them touch, so the box is opened to 68px. On a
     single line this is invisible -- the block is centred in the
     band either way. */
  line-height: 68px;
  color: #000000;
}

.cat-hero__subtitle,
.pj-hero__subtitle,
.tech-hero__subheading {
  /* 22px of air under the title -- it was reading as one block
     with it. */
  margin: 22px 0 0;
  max-width: none;
  font-family: var(--font-hebrew);
  /* One step lighter than it was. At Regular this line was
     actually HEAVIER than the 64px title above it (which is
     Light), which is what made it look wrong. */
  font-weight: var(--font-weight-light);
  font-size: 24px;
  line-height: 34px;
  color: #000000;
  white-space: normal;
}

.cat-hero__paragraph,
.dl-hero__lede,
.pj-hero__lede,
.contact-hero__paragraph,
.tech-hero__paragraph {
  margin: 26px 0 0;
  /* 320, up from 264. This widening is not cosmetic: at 15px a
     264px column holds about 35 characters per line, well under
     the 50-75 that reads comfortably, and the copy would have
     come out choppier than it was at 13px. The size and the
     measure have to move together or the change makes things
     worse. */
  max-width: 320px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  /* 15px, up from 13. 13px is below the 14px floor that applies
     to any running text; this is the lede on five inner pages,
     not a caption. */
  font-size: 15px;
  line-height: 23px;   /* 1.53 -- inside the 1.5-1.7 band */
  color: var(--color-text-muted);
  /* the Projects lede was pinned to one line per <br>; at 264px
     it has to be allowed to wrap again. */
  white-space: normal;
}

/* The rule, one spec everywhere: 67.6 x 1.5, blue 70 / red 30.
   Red is first in the DOM on every page, and in this RTL row the
   first child lands physically RIGHT -- which is where every
   comp puts it. */
.cat-hero__rule,
.dl-hero__rule,
.pj-hero__rule,
.contact-hero__divider,
.tech-hero__rule {
  display: flex;
  /* 85.4px, the measured ink width of SILANDE at 16px in Jost
     with 3.2px of tracking -- so the rule now runs the full
     length of the word above it instead of stopping short.
     The label and the rule already share a right edge, so the
     width alone lines both ends up.

     It was 67.6px, which was right when the label was 8px and
     the word measured 43. Doubling the type without doubling
     this left the rule at 79% of the word and the pair looked
     unfinished.

     Derived from the size, the face and the tracking; if any
     of the three changes, measure again. */
  width: 85.4px;
  height: 1.5px;
  margin: 12px 0 0;
}
.cat-rule__segment--red,
.dl-rule__segment--red,
.pj-rule__segment--red,
.contact-hero__divider-segment--red,
.tech-rule__segment--red { flex: 30; background-color: #CC2F3A; }

.cat-rule__segment--blue,
.dl-rule__segment--blue,
.pj-rule__segment--blue,
.contact-hero__divider-segment--blue,
.tech-rule__segment--blue { flex: 70; background-color: #005E8E; }

/* ---------------------------------------------------------
   5 — FONTS
   The block above puts the Hebrew face on every hero heading.
   This hands anything explicitly marked as English back to
   Blinker -- a descendant selector, so it outranks the plain
   class rules above it.
   --------------------------------------------------------- */
.cat-hero [lang="en"],
.dl-hero [lang="en"],
.pj-hero [lang="en"],
.contact-hero [lang="en"],
.tech-hero [lang="en"] {
  font-family: var(--font-english);
}

/* The SILANDE label last, so its Jost beats both rules above. */
.cat-hero .cat-hero__eyebrow,
.dl-hero .dl-hero__eyebrow,
.pj-hero .pj-hero__eyebrow,
.contact-hero .contact-hero__eyebrow,
.tech-hero .tech-hero__eyebrow {
  margin: 0;
  font-family: "Jost", var(--font-english), sans-serif;
  font-weight: var(--font-weight-regular);
  /* 16px, doubled from 8. The tracking and the line box are
     doubled with it -- 1.6 -> 3.2 and 14 -> 28 -- because both
     were set in px, not in em, and leaving them would have
     pulled the letters together and crushed the line as the
     type grew. The label has to read as the same mark, just
     larger. */
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 3.2px;
  color: #000000;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   6 — HOME
   Home already sits at full window height and keeps its own
   composition (the large SILANDE ISRAEL line, the headline and
   the CTA). Only the height constant is brought into line: its
   own file still used 100px for the header, which measured 79.
   --------------------------------------------------------- */
.hero__inner { min-height: var(--hero-height); }


/* =========================================================
   HERO CTA
   One control, shared by the Downloads, Projects and Technical
   Service heroes. The same shape the home page's own CTA has:
   the label on the physical right and a small chevron to its
   left, pointing DOWN -- into the page, which is where it
   takes you. No underline, by the same decision that removed
   the home CTA's.

   row-reverse: in this RTL document a plain row would put the
   FIRST dom child on the physical right. The icon is first in
   the markup (so it is announced before the label is read),
   and row-reverse is what lands it on the physical left.
   ========================================================= */
.hero-cta {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
  width: fit-content;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-emphasis);
  font-size: var(--font-size-nav);
  color: var(--color-text-strong);
  text-decoration: none;
}

.hero-cta__icon {
  flex: none;
  width: 11px;
  height: 7px;
}