/* =========================================================
   SOLUTIONS.CSS
   "Building Solutions" (פתרונות בניה) — an 8-row list directly
   below About. Desktop only — built to the approved Figma
   screenshot, same RTL conventions as hero.css / about.css: no
   direction overrides, physical left/right comes from normal
   flex flow in this dir="rtl" document (no row-reverse needed
   here — DOM order already matches visual order: number+title
   first/rightmost, photo last/leftmost).

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

   Row photos are approved-Figma-matched local category images
   (homepage-images/home-*.png), assigned by subject to each
   row since the source stock photos aren't extractable from a
   guest-mode Figma session.

   The section's inner wrapper (in the HTML) uses .content-grid,
   not .page-shell — same shared grid About uses (see layout.css)
   — so this section's left/right edges land on the same vertical
   line as every other section below Hero, instead of page-shell's
   extra 32px padding-inline shifting it in from that line.
   ========================================================= */

/* Section background is the approved Figma's light gray, same
   token used for other neutral surfaces sitewide (not pure
   white like the page background). */
/* .section's padding-block puts equal space above and below —
   but the approved Figma has this section's own background
   sitting flush against the bottom of the previous section
   (About), with no gap and no margin. The 173px of spacing
   before the heading is real (matches the approved Figma
   exactly), but per direct correction it now lives inside
   About's own box instead of here — About's background
   extends 173px past its video in Solutions' own #F6F5F3 tone
   (see about.css) as a lead-in, then this section starts
   immediately after with zero top padding. Net effect on
   screen is identical (the heading still sits 173px below the
   video), only which section's box is responsible moved. */
/* Surface tone, per direct request: a very light COOL off-white
   (#F8F9F9) in place of the previous warm #F6F5F3, to separate
   this section gently from .projects below — which keeps its own
   #F6F5F3 untouched, because that warm tone is part of the
   project cards' own design (see projects.css; do not change it).
   The difference from pure white is deliberately almost
   imperceptible: the goal is a faint depth cue and a more elegant
   transition between page parts, not a gray block.
   Because every SILANDE section paints its own full-width
   background, this color covers the whole Solutions area — the
   heading, the divider, the paragraph and the 01–08 list — and
   stops exactly where .projects begins. The one part of the
   Solutions area NOT painted here is the 173px of whitespace
   above the heading, which structurally belongs to About's box
   (see about.css, whose gradient's trailing stop carries the same
   #F8F9F9 so the lead-in stays seamless). */
.solutions {
  background-color: #F8F9F9;
  padding-block-start: 0;
}

/* width:fit-content makes this wrapper shrink to the heading's
   own rendered text width — not the full page-shell/content
   container. As a normal block box it still sits at the RTL
   inline-start (physical right) of page-shell, so the divider's
   right edge is now structurally guaranteed to match the
   heading's right edge (it's sized off the heading itself),
   rather than both coincidentally landing on the container's
   edge independently. */
.solutions__heading-group {
  width: fit-content;
}

/* Heading is first in the group now (per updated Figma — the
   divider moved from above it to below it). No margin-block-start
   here — the section's own padding-block-start (above) carries
   the top spacing instead, so it's contained inside the section's
   background rather than collapsing through these wrapper elements. */
.solutions__heading {
  margin: 0;
  white-space: nowrap;
}

/* Reuses .hero__divider's red/blue segments (see hero.css) —
   same accent graphic. Now sits BELOW the heading per the
   updated Figma (previously above it) — margin-block-start is
   the gap to the heading above, replacing the old margin-block-
   start:0 (which assumed the divider was the group's first,
   top-most element).
   Width stays overridden from hero__divider's 328px (calibrated
   for Hero's longer "SILANDE ISRAEL" eyebrow) — the approved
   Figma has this divider notably narrower, proportional to the
   shorter "פתרונות בניה" heading. */
.solutions__divider {
  margin-block-start: 20px;
  width: 70px;
}

/* Sits on the physical LEFT, above the first row's image, not
   right-aligned under the heading — margin-inline-start:auto
   pushes the box away from the RTL inline-start (right) toward
   the physical left, and text-align:left keeps the Latin copy
   reading naturally instead of ragged-left from RTL's default.
   Width is fixed at exactly .solutions__row-image's own width
   (300px) so both edges line up with the image below it, per
   the approved Figma — this is also what makes the paragraph
   wrap to 3 lines instead of 2. */
.solutions__paragraph {
  margin-block-start: var(--space-6);
  margin-inline-start: auto;
  width: 300px;
  text-align: left;
  color: var(--color-text-muted);
}

.solutions__list {
  margin: 0;
  margin-block-start: var(--space-8);
  padding: 0;
  list-style: none;
}

.solutions__row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-line);
}

.solutions__row-text {
  flex: 0 0 auto;
  width: 160px;
}

.solutions__row-number {
  display: block;
  font-size: var(--font-size-label);
  color: var(--color-text-muted);
}

.solutions__row-title {
  margin: 0;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-h3);
}

/* max-width:none overrides base.css's global `p { max-width:
   var(--text-max-width) }` — without it, this was capping out
   at 520px and leaving flex:1's remaining space unclaimed,
   pushing the image 32px short of the row's true left edge
   (out of alignment with the paragraph above, which reaches
   that edge correctly via margin-inline-start:auto). */
.solutions__row-description {
  flex: 1;
  margin: 0;
  max-width: none;
  color: var(--color-text-muted);
  text-align: center;
}

/* Landscape, not square — the approved Figma's row photos are
   roughly 2:1 wide rectangles. */
.solutions__row-image {
  flex: 0 0 auto;
  width: 300px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}