/* =========================================================
   PROJECTS-PAGE.CSS
   NOTE the file name: css/projects.css already exists and
   belongs to the HOME PAGE's "פרויקטים" section (the .projects__*
   classes, the 2x2 teaser grid above the footer). This file is
   the standalone Projects PAGE and uses its own .pj-* prefix, so
   the two never touch each other.
   Built from Figma node 328:15 "Projects" (file
   FXmifvLSP3sT25kYn7hTmS), a 1140x3017 frame, read through
   get_metadata + get_design_context.

   Frame geometry, same as the rest of the site:
     1140 total = 1053 content zone + 87 rail.

   Band stack, as y-ranges in the frame:
     header      0    -   79
     01 hero     79   -  541   photo (462 tall)   rail #F1EFEE
     02 projects 541  - 2967   #F6F5F3            rail #FAFAFA
        footer   2967 - 3017   (shared site footer, 50px)

   Per the layout system: every <section> runs the FULL viewport
   width and carries its own background; only the inner wrapper
   is capped at 1140 and centred. The rail is an absolute overlay
   on each section's physical right edge.
   ========================================================= */

/* ---------------------------------------------------------
   SHARED
   The blue/red rule, identical in spec to the one on the
   product and downloads pages: 67.6px wide, blue 70 / red 30.
   Figma puts both instances here at 67.595 wide.
   --------------------------------------------------------- */
.pj-rule {
  display: flex;
  width: 67.6px;
  height: 1.5px;
  /* physical, so the RTL direction cannot flip it: the comp
     puts red on the physical RIGHT in every instance. */
  margin-left: auto;
  margin-right: 0;
}
.pj-rule__segment--red  { flex: 30; background-color: #CC2F3A; }
.pj-rule__segment--blue { flex: 70; background-color: #005E8E; }

.pj-inner {
  position: relative;
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* =========================================================
   01 — HERO   (frame y79-541, 462 tall)
   The photo is 1983x793 -- 2.501:1, which is all but exactly
   the band's own 1140:462 -- so at the comp's width it fills
   the band edge to edge with no crop at all. It is scaled by
   HEIGHT only and centred, so it is never stretched; on a
   window wider than 1155px the strip left over on each side
   continues that edge of the photo as a sampled vertical
   gradient and the photo dissolves into it. Same approach the
   downloads hero settled on.
   ========================================================= */
.pj-hero {
  position: relative;
  height: 462px;
  background-color: #F1EFEE;   /* safety colour if the photo fails */
  overflow: hidden;
}
.pj-hero__media { position: absolute; inset: 0; overflow: hidden; }

.pj-hero__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
/* Two layers each. Underneath, the photo's own edge column sampled
   as a 10-stop vertical gradient, so the colour at the join matches.
   On top, a calm flat tone that is transparent AT the join and
   nearly opaque by the screen edge, so the dark foliage at the
   right edge is not smeared sideways across the screen. */
.pj-hero__fill--left {
  left: 0;
  right: 50%;
  background-image:
    linear-gradient(to left, rgba(231,232,232,0) 0, rgba(231,232,232,0.58) 45%, rgba(231,232,232,0.93) 100%),
    linear-gradient(to bottom,
      rgb(160,184,211) 5%, rgb(193,201,213) 15%, rgb(227,209,194) 25%,
      rgb(226,193,165) 35%, rgb(253,215,155) 45%, rgb(207,166,138) 55%,
      rgb(138,125,122) 65%, rgb(72,64,37) 75%, rgb(67,69,66) 85%,
      rgb(102,107,117) 95%);
}
.pj-hero__fill--right {
  left: 50%;
  right: 0;
  background-image:
    linear-gradient(to right, rgba(238,234,231,0) 0, rgba(238,234,231,0.62) 45%, rgba(238,234,231,0.95) 100%),
    linear-gradient(to bottom,
      rgb(123,121,123) 5%, rgb(113,109,105) 15%, rgb(78,70,53) 25%,
      rgb(43,38,23) 35%, rgb(90,66,35) 45%, rgb(126,93,60) 55%,
      rgb(153,119,87) 65%, rgb(49,48,47) 75%, rgb(76,75,76) 85%,
      rgb(112,110,113) 95%);
}
.pj-hero__image {
  position: absolute;
  top: 0;
  /* centred in the band. `transform` is not affected by the RTL
     direction, so this holds physically at every width. */
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  /* 200px dissolve on both vertical edges. Kept well under the
     strip width so the photo itself stays crisp: at 1440 each
     strip is 142px, which is where the fade is fully spent. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
}
/* A soft lift on the right third only, so the Hebrew sitting over the
   glazing stays readable without washing out the sunset on the left. */
.pj-hero__wash {
  position: absolute;
  inset: 0;
  /* The text block runs from 112px in from the right edge to about
     460px. The veil is near-opaque across that whole span and only
     starts releasing the photo past it, so every line reads cleanly
     at any window width. */
  background: linear-gradient(to left,
    rgba(247, 245, 243, 0.90) 0,
    rgba(247, 245, 243, 0.86) 330px,
    rgba(247, 245, 243, 0.72) 500px,
    rgba(247, 245, 243, 0.34) 680px,
    rgba(247, 245, 243, 0) 880px);
  pointer-events: none;
}

.pj-hero__inner {
  position: relative;
  height: 100%;
  /* NOT capped at 1140. 112 = 1140 - 1028, the x the eyebrow, rule
     and title all share in the comp, so at the comp's own width the
     text lands exactly where Figma puts it and on a wider window it
     keeps that same 112px from the screen's right edge instead of
     drifting into the middle. 112 - 87 (rail) = a 25px gap. */
  max-width: none;
  padding-inline-start: 112px;
}
.pj-hero__content {
  /* every line is right-flush to the same x, and each keeps the
     line breaks the comp gives it, so no width cap is needed. */
  margin-inline-start: 0;
  margin-inline-end: auto;
  padding-block-start: 117px;   /* eyebrow box lands on frame y196 */
}
.pj-hero__eyebrow {
  margin: 0;
  font-family: var(--font-english);
  font-weight: var(--font-weight-regular);
  font-size: 8px;
  letter-spacing: 0.2em;        /* Figma: 1.6px on 8px */
  line-height: 12px;
  color: #000000;               /* Figma Fill 000000, as elsewhere */
  text-align: start;
}
.pj-hero__rule { margin-block-start: 10px; }    /* rule on frame y218 */
.pj-hero__title {
  margin: 56px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 64px;
  line-height: 63px;
  color: #000000;
}
.pj-hero__subtitle {
  margin: 36px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 24px;
  line-height: 34px;
  color: #000000;
  white-space: nowrap;   /* one line in the comp (Figma box is 614 wide) */
}
.pj-hero__lede {
  margin: 19px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  line-height: 22px;
  color: #000000;            /* Figma: text-black, same as the lines above */
  white-space: nowrap;   /* the two lines are set by the <br>, as in the comp */
}

/* =========================================================
   02 — PROJECTS   (frame y541-2967, 2426 tall)
   ========================================================= */
.pj-projects {
  position: relative;
  background-color: #F6F5F3;
  padding-block-end: 191px;
}
.pj-section__head {
  /* 120 = 1140 - 1020, the x the heading sits on. */
  padding-inline-start: 120px;
  padding-block-start: 149px;   /* heading box on frame y690 */
}
.pj-section__heading {
  margin: 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 36px;
  line-height: 43px;
  color: #000000;
}
/* Under the word, flush with its right edge -- the placement Yael
   marked up on the downloads page and Figma repeats here (y741). */
.pj-section__head .pj-rule { margin-block-start: 20px; }

/* The English couplet runs from the frame's x71, left-aligned and
   in the English face, so it needs its own direction: the page is
   RTL and would otherwise reorder the full stops. */
.pj-intro {
  /* Flush with the left edge of the leftmost card's PHOTO (frame x18 =
     the card's own x9 plus its 9px inset), so the couplet sits on the
     same vertical line as the grid below it.
     The right margin must be `auto`, not 0: in an RTL container a block
     with BOTH margins fixed is over-constrained and the LEFT one is the
     one thrown away, which pinned this paragraph to the right edge. */
  width: 500px;
  margin: 82px auto 0 18px;
  font-family: var(--font-english);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------
   CARD GRID
   Three columns inside the same x9..x1024 content band the
   Figma comp uses (1015 wide): 3 x 321 + 2 x 26 = 1015.
   Three-up rather than the comp's two-up because the real list
   is 44 projects, and because each card now carries name,
   location, envelope contractor and products rather than a
   single caption.
   In this dir="rtl" document the first card in the DOM lands
   physically RIGHT, which is the reading order the design uses.
   --------------------------------------------------------- */
.pj-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 321px);
  gap: 42px 26px;
  /* physical: top / right 116 (= 1140 - 1024) / bottom / left 9 */
  margin: 52px 116px 0 9px;
  padding: 0;
}
.pj-card {
  display: flex;
  flex-direction: column;
  /* 9px of card either side of the image, 8px above it -- the
     Figma card's own insets, kept at the narrower width. */
  padding: 8px 9px 20px;
  background-color: #FAFAFA;
  border-radius: 1px;
  box-shadow:
    0 1px 4px rgba(12, 12, 13, 0.1),
    0 1px 4px rgba(12, 12, 13, 0.05);
}
.pj-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.pj-card__image {
  display: block;
  width: 303px;
  /* 303 x 205 keeps the comp's own 463:313 image proportion. */
  height: 205px;
  object-fit: cover;
  background-color: #ECEAE7;
}
.pj-card__name {
  margin: 18px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 20px;
  line-height: 27px;
  color: #000000;
  text-align: start;          /* inline-start = physical right here */
}
.pj-card__place {
  margin: 4px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 13px;
  line-height: 19px;
  color: #5A5A5A;   /* was #8A8A8A -- 3.31:1, under AA */
  text-align: start;
}
/* `margin-block-start: auto` pushes this block to the card's
   bottom, so the two meta rows line up across every card in a
   row however long the project name runs. */
.pj-card__meta {
  margin-block-start: auto;
  padding-block-start: 16px;
}
.pj-card__row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block-start: 11px;
  border-block-start: 1px solid #E6E3DF;
}
.pj-card__row + .pj-card__row { margin-block-start: 11px; }
/* First in the DOM, so physically RIGHT in this RTL row. */
.pj-card__label {
  flex: none;
  width: 44px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 12px;
  line-height: 18px;
  color: #5A5A5A;   /* was #9A9A9A -- 2.70:1, under AA */
  text-align: start;
}
.pj-card__value {
  flex: 1;
  min-width: 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 13px;
  line-height: 18px;
  color: #3C3C3C;
  text-align: start;          /* right-aligned, ending left of the label */
}
/* The product codes are Latin with a middot between them. Left to
   the page's RTL, the neutral separators reorder; an isolated ltr
   run with a PHYSICAL right alignment keeps "MF889 · MF899 · MF322"
   in the written order and still flush right. */
.pj-card__value--en {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

@media (max-width: 1139px) {
  .pj-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: 32px;
  }
  .pj-card__image { width: 100%; height: auto; aspect-ratio: 463 / 313; }
  .pj-section__head { padding-inline-start: 32px; }
  .pj-intro { margin-left: 32px; }
}

@media (max-width: 880px) {
  .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}