/* =========================================================================
   why-works.css - "למה זה עובד?" (#why-works). Figma frame 1:4, y 2795-3500.
   Mobile/tablet first: a clean stacked column. From 1280px the section
   switches to the Figma composition, written in --u (1px at 1920) so it
   scales proportionally (at 1280 the body type reaches its 16px floor).
   ========================================================================= */

#why-works {
  position: relative;
  background: var(--fg-paper, #fff);
  color: var(--fg-brown);
  padding-block: 64px 72px;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

#why-works .why-works__col {
  inline-size: 100%;
  max-inline-size: 560px;
  text-align: right;
}

#why-works .why-works__title {
  margin: 0;
  font-family: var(--font-heb);
  font-weight: 700;
  font-size: clamp(44px, 11vw, 72px);
  line-height: .74;
  color: var(--fg-brown);
}

#why-works .why-works__body {
  margin: 0;
  font-family: var(--font-heb);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
  color: var(--fg-brown);
}

#why-works .why-works__col--right .why-works__body { margin-block-start: 28px; }
#why-works .why-works__br { display: none; }

/* Feather card + seal. The card keeps the Figma crop and the rounded corner
   (baked into the exported image), the seal overlaps its left edge. */
#why-works .why-works__media {
  position: relative;
  inline-size: min(70%, 340px);
  margin-block: 44px 36px;
  left: 7%;                          /* shifted right so the seal (19.4% of the card) fits on the left */
}
#why-works .why-works__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
#why-works .why-works__seal {
  position: absolute;
  inset-block-start: -1%;
  left: -19.5%;                      /* 78 / 401 of the card width */
  inline-size: 26.7%;                /* 107 / 401 */
  block-size: auto;
}
/* The seal is three layers in one box: brown text ring under the photo,
   white text ring over the photo (clipped to the photo box) and the R.
   The ring travels round its oval (js/main.js initSeals); the split between
   brown and white stays on the photo edge. */
#why-works .why-works__media { isolation: isolate; }
#why-works .why-works__ring--under { z-index: -1; }
#why-works .why-works__ring-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Vertical hairline under the seal (1:139). In the stacked layout it becomes
   a short separator between the image and the second text block. */
#why-works .why-works__line {
  display: block;
  inline-size: 1px;
  block-size: 48px;
  margin-block-end: 28px;
  background: var(--fg-brown);
}

#why-works .why-works__col--left {
  display: flex;
  flex-direction: column;
}
#why-works .why-works__cta {
  align-self: flex-end;              /* RTL: physical left, as in Figma */
  margin-block-start: 32px;
}

@media (min-width: 768px) {
  #why-works { padding-block: 96px 96px; padding-inline: 48px; }
  #why-works .why-works__col { max-inline-size: 640px; }
  #why-works .why-works__body { font-size: 19px; line-height: 1.4; }
  #why-works .why-works__media { inline-size: 380px; left: 40px; }
}

/* ---- Figma composition (>= 1280px) -------------------------------------- */
@media (min-width: 1280px) {
  #why-works {
    display: block;
    block-size: calc(705 * var(--u));
    padding: 0;
  }
  #why-works .why-works__col {
    position: absolute;
    max-inline-size: none;
  }
  #why-works .why-works__col--right {
    top: calc(144 * var(--u));
    right: calc(179 * var(--u));
    inline-size: calc(447 * var(--u));
  }
  #why-works .why-works__title { font-size: var(--t-h2); }
  #why-works .why-works__body {
    font-size: var(--t-body);
    line-height: 1.2;
  }
  #why-works .why-works__col--right .why-works__body { margin-block-start: calc(93 * var(--u)); }
  #why-works .why-works__br { display: inline; }

  #why-works .why-works__media {
    position: absolute;
    top: calc(172 * var(--u));
    left: calc(829 * var(--u));
    inline-size: calc(401 * var(--u));
    margin: 0;
  }
  #why-works .why-works__seal {
    inset-block-start: calc(-2.5 * var(--u));
    left: calc(-77.714 * var(--u));
    inline-size: calc(107 * var(--u));
  }

  /* Starts under the seal and runs to the section bottom; #process continues
     it from its top edge where the slanted line arrives (x 801.6). */
  #why-works .why-works__line {
    position: absolute;
    top: calc(344 * var(--u));
    bottom: 0;
    left: calc(805 * var(--u));
    block-size: auto;
    margin: 0;
    transform: rotate(.5417deg);     /* Figma 1:139 slants 13px over 1375px */
    transform-origin: 0 0;
  }

  #why-works .why-works__col--left {
    top: calc(327 * var(--u));
    left: calc(184 * var(--u));
    inline-size: calc(562 * var(--u));
  }
  #why-works .why-works__cta {
    margin-block-start: calc(34 * var(--u));
    margin-inline-end: calc(-3 * var(--u));   /* CTA x 181 vs text x 184 */
  }
}