/* =========================================================
   PROJECTS.CSS
   "Projects" (פרויקטים) — heading + intro paragraph + a 2x2
   grid of project photos, directly below Solutions. Desktop
   only — built to the approved Figma screenshot, same RTL
   conventions as solutions.css.

   Section background: corrected per direct instruction — the
   approved Figma actually runs one continuous #F6F5F3 surface
   from the "פתרונות בניה" heading (top of Solutions) all the
   way to the footer, with Projects sitting in the middle of
   that block. (The earlier assumption that this section was
   plain white/page-default was wrong — it left a white band
   between Solutions' own background and the footer's.) Same
   #F6F5F3 token as .solutions (see solutions.css) and the
   footer (see footer.css) so the three sit seamlessly flush
   with no visible seam between them.

   Body paragraph is Lorem Ipsum in the approved Figma itself
   (not yet real copy) — implemented verbatim to match.

   Card photos are the approved project-a/b/c/d.jpg assets,
   matching the Figma's own פרויקט א/ב/ג/ד labels one-to-one.
   In this dir="rtl" document, an implicit 2-column grid places
   the first DOM child in the physical top-RIGHT cell (inline
   start), so DOM order א,ב,ג,ד lands as: א top-right, ב
   top-left, ג bottom-right, ד bottom-left — matching the
   approved Figma without needing any explicit reordering.
   ========================================================= */

/* No padding-block-start override needed here the way Solutions
   needed one — Solutions' own padding-block-end (from .section's
   default var(--space-section)) already provides the gap above
   this section as contained padding, not a collapsible margin. */

/* Heading + divider: identical pattern to
   .solutions__heading-group (see solutions.css) — width:
   fit-content structurally locks the divider's width/edge to
   the heading's own rendered text width. */
.projects {
  background-color: #F6F5F3;
}

.projects__heading-group {
  width: fit-content;
}

.projects__heading {
  margin: 0;
  white-space: nowrap;
}

.projects__divider {
  margin-block-start: 20px;
  width: 70px;
}

/* Sits on the physical LEFT below the heading, same technique
   as .solutions__paragraph: margin-inline-start:auto pushes it
   away from the RTL inline-start (right) toward the physical
   left; text-align:left keeps the Latin copy reading naturally. */
.projects__paragraph {
  margin-block-start: var(--space-6);
  /* PHYSICAL, not logical. This block now carries `direction: ltr`
     (see below), and logical margins resolve against the element's
     OWN direction -- `margin-inline-start: auto` therefore flipped
     the paragraph from the physical left to the physical right. */
  margin-left: 0;
  margin-right: auto;
  /* widened from 300px so each of the two English sentences holds
     one line, as the couplet does on the Projects page. */
  width: 640px;
  max-width: none;   /* base.css caps every <p> at --text-max-width (520px) */
  text-align: left;
  color: var(--color-text-muted);
  /* Latin copy inside an RTL page: without this the full stop at the
     end of a sentence is reordered to its front (".aliqu"). */
  direction: ltr;
  unicode-bidi: isolate;
}

/* The location under the project name, same relationship the
   Projects page uses. */
.projects__place {
  display: block;
  margin-block-start: 3px;
  font-size: 13px;
  line-height: 19px;
  color: #5A5A5A;   /* was #8A8A8A -- 3.31:1, under AA */
}

/* ---------------------------------------------------------
   GRID
   Two columns, two rows. Implicit RTL grid auto-placement
   (see file header comment) — no explicit column/row
   assignment needed.
   --------------------------------------------------------- */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-7);
  margin-block-start: var(--space-8);
}

/* Reinstated and corrected per a direct Figma layer inspection
   (Rectangle 83, the card's own background rectangle: 481x410,
   fill #FAFAFA, corner-radius 1, effect "Drop Shadow/200" from
   the file's own "Simple Design System" — a real named style,
   not a guess). An earlier pass had removed this entirely on
   the assumption the card should be frameless; that assumption
   was wrong. The shadow's exact blur/spread aren't readable
   without a Dev Mode seat, so it stays the same soft low-
   elevation approximation used before.
   Padding is the card's own inset around the image, also read
   directly off the inspector: 8px top, 9px each side (the
   image sits at X9/Y8 inside the 481-wide, matching a further
   9px short on the right: 481 - 9 - 463 = 9). Bottom padding
   (53px) is the remainder after the image and caption, so the
   card's total height ratio matches Figma's 481:410 even
   though the actual column width here is fluid, not a fixed
   481px. */
.projects__card {
  display: flex;
  flex-direction: column;
  background-color: #FAFAFA;
  border-radius: 1px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  /* 8px above the image, 9px either side -- the card's own Figma
     insets. The bottom was 53px when the card held nothing but a
     caption; the meta block now fills that space. */
  padding: 8px 9px 20px;
}

/* 463/313 is the image's OWN aspect ratio (Rectangle 84,
   inside the card) — not the card's outer 481/410, which an
   earlier pass had mistakenly applied here instead. */
.projects__image {
  display: block;
  width: 100%;
  aspect-ratio: 463 / 313;
  object-fit: cover;
  border-radius: inherit;
}

/* ---------------------------------------------------------
   CARD TEXT
   The same block the Projects page card uses (.pj-card__*),
   at the larger type this wider card can carry: project name,
   where it is, then the envelope contractor and the products
   used, each on its own ruled row.
   --------------------------------------------------------- */
.projects__name {
  margin: 18px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 24px;
  line-height: 32px;
  color: #000000;
  text-align: start;          /* inline-start = physical right here */
}
.projects__place {
  margin: 4px 0 0;
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 15px;
  line-height: 21px;
  color: #5A5A5A;   /* was #8A8A8A -- 3.31:1, under AA */
  text-align: start;
}
/* `margin-block-start: auto` pushes the block to the card's bottom,
   so the rows line up across both cards in a row however long the
   project name runs. */
.projects__meta {
  margin-block-start: auto;
  padding-block-start: 20px;
}
.projects__row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-block-start: 13px;
  border-block-start: 1px solid #E6E3DF;
}
.projects__row + .projects__row { margin-block-start: 13px; }
/* First in the DOM, so physically RIGHT in this RTL row. */
.projects__label {
  flex: none;
  width: 52px;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 13px;
  line-height: 20px;
  color: #5A5A5A;   /* was #9A9A9A -- 2.70:1, the worst on this page */
  text-align: start;
}
.projects__value {
  flex: 1;
  min-width: 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  line-height: 20px;
  color: #3C3C3C;
  text-align: start;          /* right-aligned, ending left of the label */
}
/* Latin codes with a middot between them: an isolated ltr run with a
   PHYSICAL right alignment keeps "MF889 · MF899" in the written order
   and still flush right. */
.projects__value--en {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* ---------------------------------------------------------
   VIEW-ALL LINK
   Chevron sits on the physical LEFT of the label — default
   (non-reversed) row in this RTL document already places the
   first DOM child (the label) at the physical right and the
   second (the icon) after it, toward the left, so no
   row-reverse/justify-content trick is needed here (unlike
   .hero__cta / .about__eyebrow, which both had to counteract
   row-reverse's flipped main-start).
   --------------------------------------------------------- */
.projects__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-label);
}

.projects__view-all-icon {
  width: 14px;
  height: 8px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M13 4H1M5 1 1 4l4 3' stroke='%23000' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M13 4H1M5 1 1 4l4 3' stroke='%23000' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}