/* =========================================================
   HOME — "פתרונות בניה": THE ROW HOVER
   Home page only. Pure CSS, no script.

   Nothing here changes the section's structure, content or
   spacing. The photo keeps its own 300x150 box and is scaled
   INSIDE it -- .solutions__row-media is the frame that clips
   it, and that frame carries exactly the sizing the <img>
   used to carry, so the rendered layout is identical at rest.
   ========================================================= */

:root {
  /* The same decelerating curve the rest of the site uses. */
  --sp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* A long expo tail for the photo: it keeps drifting a moment
     after the pointer stops, which is what reads as expensive. */
  --sp-ease-photo: cubic-bezier(0.19, 1, 0.22, 1);

  --sp-state: 460ms;   /* rows dimming, the number colouring */
  --sp-rule: 600ms;    /* the line opening */
  --sp-zoom: 1000ms;   /* the photo */
}

/* ---------------------------------------------------------
   1 — THE PHOTO'S FRAME
   This span now holds what the <img> held: the flex sizing and
   the 2:1 box. The image fills it and is free to scale behind
   overflow:hidden without touching the row's layout.
   --------------------------------------------------------- */
.solutions__row-media {
  flex: 0 0 auto;
  display: block;
  width: 300px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.solutions__row-media .solutions__row-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sp-zoom) var(--sp-ease-photo);
}

/* The zoom is inside the frame only: the box never grows, so
   no divider, title or neighbour moves by a pixel. */
.solutions__row:hover .solutions__row-image {
  transform: scale(1.05);
}

/* ---------------------------------------------------------
   2 — THE ROWS
   No background, no shadow, no lift. Only ink.
   --------------------------------------------------------- */
.solutions__row {
  position: relative;          /* for the rule below */
  transition: opacity var(--sp-state) var(--sp-ease);
}

/* A touch, not a dimming: the hovered row still has to look
   like one of the eight, not like a spotlight. */
.solutions__list:has(.solutions__row:hover) .solutions__row {
  opacity: 0.62;
}

/* The dimming rule above carries a :has() whose specificity is
   that of its argument, so it outweighs a plain `.row:hover`.
   Repeating the :has() here puts this one ahead of it. */
.solutions__list:has(.solutions__row:hover) .solutions__row:hover {
  opacity: 1;
}

/* ---------------------------------------------------------
   3 — THE HOVERED ROW'S OWN MARKS
   --------------------------------------------------------- */
.solutions__row-number,
.solutions__row-title {
  transition: color var(--sp-state) var(--sp-ease);
}

.solutions__row:hover .solutions__row-number {
  color: #3C3C3C;
}

.solutions__row:hover .solutions__row-title {
  color: var(--color-text-strong);
}

/* The line rides over the row's existing 1px divider and opens
   from the physical RIGHT -- with the reading, not against it.
   transform-origin is PHYSICAL and is never flipped by
   direction, which is exactly what is wanted here. */
.solutions__row::after {
  content: "";
  position: absolute;
  /* `left`/`right` rather than inset-inline: the row is RTL and
     this bar must not depend on that. */
  left: 0;
  right: 0;
  bottom: -1px;                /* sits ON the divider, not under it */
  height: 1px;
  /* #656565 -- clearly darker than the #DDDDDA divider it rides
     over, so the sweep is actually visible. #D9D9D9 was tried
     first and disappeared against the divider. */
  background-color: #656565;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--sp-rule) var(--sp-ease);
  pointer-events: none;
}

.solutions__row:hover::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------
   4 — WHERE IT DOES NOT RUN
   --------------------------------------------------------- */
@media (hover: none) {
  .solutions__list:has(.solutions__row:hover) .solutions__row { opacity: 1; }
  .solutions__row:hover .solutions__row-image { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .solutions__row-media .solutions__row-image { transition: none; }
  .solutions__row:hover .solutions__row-image { transform: none; }
}


/* =========================================================
   HOME — PROJECT CARDS
   Three effects, nothing else. The card does not move, does
   not lift and does not change size; the grid never shifts.
   These cards are not links and there is no project page
   behind them, so nothing here suggests a click: no cursor
   change, no arrow, no label.
   ========================================================= */

:root {
  --pc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pc-shadow: 620ms;   /* the shadow blooming */
  --pc-zoom: 700ms;     /* the photo */
  --pc-line: 620ms;     /* one divider drawing itself */
  --pc-stagger: 80ms;   /* the second divider's head start, inverted */
}

/* ---------------------------------------------------------
   1 — THE SHADOW
   The resting shadow is restated here as the first of two
   layers so the two values have the same shape and the
   browser interpolates them cleanly. Layer one is untouched;
   layer two is the one that blooms -- wide, very soft, and
   warm grey rather than black, which is what keeps it from
   reading as a button.
   --------------------------------------------------------- */
.projects__card {
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 0 0 rgba(60, 60, 60, 0);
  transition: box-shadow var(--pc-shadow) var(--pc-ease);
}

.projects__card:hover {
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 18px 52px rgba(60, 60, 60, 0.10);
}

/* ---------------------------------------------------------
   2 — THE PHOTO
   .projects__media now holds what the <img> held: the 463:313
   box and the card's own 1px radius. The image fills it and
   scales behind overflow:hidden, so the frame -- and the
   card -- never change size.
   --------------------------------------------------------- */
.projects__media {
  display: block;
  width: 100%;
  aspect-ratio: 463 / 313;
  border-radius: 1px;
  overflow: hidden;
}

.projects__media .projects__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;          /* the frame owns the ratio now */
  object-fit: cover;
  border-radius: 0;            /* the frame does the rounding */
  transition: transform var(--pc-zoom) var(--pc-ease);
}

.projects__card:hover .projects__image {
  transform: scale(1.028);
}

/* ---------------------------------------------------------
   3 — THE DIVIDERS
   Each row keeps its own 1px #E6E3DF border at rest. The bar
   below is an overlay that draws across it from the physical
   RIGHT -- with the reading -- a shade darker while it
   travels, settling back to the resting grey once it lands.

   --pc-delay staggers the second row behind the first by just
   enough to feel like one gesture rather than two.
   --------------------------------------------------------- */
.projects__row {
  position: relative;
}

.projects__row::before {
  content: "";
  position: absolute;
  /* -1px: the row's border sits in its border box, above the
     padding box this element is measured from. */
  top: -1px;
  /* PHYSICAL left/right, not inset-inline: the bar's direction
     of travel is set by transform-origin below and must not
     depend on the row's RTL inline axis. */
  left: 0;
  right: 0;
  height: 1px;
  background-color: #C9C3BC;   /* the travelling shade */
  transform: scaleX(0);
  transform-origin: right center;
  pointer-events: none;
  /* Leaving: the bar retracts and the shade resets at once, so
     the next pass starts from the same place. */
  transition:
    transform 440ms var(--pc-ease),
    background-color 200ms var(--pc-ease);
}

.projects__card:hover .projects__row::before {
  transform: scaleX(1);
  background-color: #E6E3DF;   /* back to the resting grey */
  transition:
    transform var(--pc-line) var(--pc-ease) var(--pc-delay, 0ms),
    background-color 300ms var(--pc-ease)
      calc(var(--pc-delay, 0ms) + var(--pc-line));
}

.projects__row:nth-of-type(2) { --pc-delay: var(--pc-stagger); }

@media (hover: none) {
  .projects__card:hover .projects__image { transform: none; }
  .projects__card:hover .projects__row::before { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .projects__media .projects__image { transition: none; }
  .projects__card:hover .projects__image { transform: none; }
  .projects__row::before,
  .projects__card:hover .projects__row::before { transition: none; }
}