/* ==========================================================================
   Sections — פריסות ייחודיות לכל אזור בדף
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(56px, 9vw, 110px)) clamp(56px, 8vw, 104px);
  overflow: hidden;
  text-align: center;
  /* הגרדיאנט מגיע מהשכבה הגלובלית (body::before) — לא נצבע כאן שוב */
  background: transparent;
}

/* קו ההפרדה מהסקשן הבא — הכלל המשותף נמצא ב-base.css */
.hero::after { inset-block-end: 0; }

.hero__inner { position: relative; z-index: 1; max-width: 880px; margin-inline: auto; }

.hero h1 { margin-bottom: var(--sp-3); }

/* שורת התפקיד מתחת לשם */
.hero__role {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--c-accent);
}

.hero__sub {
  max-width: 640px;
  margin-inline: auto;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.7;
  color: var(--c-ink-2);
  text-align: center;
}
.hero__sub p + p { margin-top: var(--sp-4); }
.hero__sub strong { font-weight: 700; color: var(--c-ink); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line-soft);
}

@media (max-width: 520px) {
  .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   פתרונות — שלושת המסלולים
   ========================================================================== */

/* אייקון בצ'יפ מעוגל בראש כל כרטיס */
.service__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--sp-4);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-md);
  color: var(--c-accent);
}
.service__icon svg { width: 20px; height: 20px; }

.tracks {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
@media (min-width: 900px) { .tracks { grid-template-columns: repeat(3, 1fr); } }

.track {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--sp-6) + 4px);
  overflow: hidden;
}
.track::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right; /* RTL — הקו נפתח מצד ימין */
  transition: transform var(--dur-slow) var(--ease);
}
.track:hover::before { transform: scaleX(1); }

/* המסלול המרכזי — מודגש */
.track--featured {
  border-color: var(--c-ink);
  box-shadow: var(--shadow-lg);
}
.track--featured::before { transform: scaleX(1); }

.track__badge {
  position: absolute;
  inset-block-start: var(--sp-5);
  inset-inline-end: var(--sp-5);
  padding: 4px 11px;
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.track__for {
  margin-top: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-accent);
}

.track__cta { margin-top: auto; padding-top: var(--sp-6); }

/* ==========================================================================
   פרויקטים
   ========================================================================== */

/* שלושה פרויקטים בשורה. הצילום קטן מכדי לקרוא בו —
   לכן לחיצה עליו פותחת אותו בגודל מלא (ראו .lightbox). */
.projects { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
@media (min-width: 700px)  { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .projects { grid-template-columns: repeat(3, 1fr); } }

.project { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.project__media {
  position: relative;
  aspect-ratio: 2 / 1;   /* היחס הטבעי של הצילום — בלי חיתוך */
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.project__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* מדיה שניתן ללחוץ עליה כדי להגדיל */
button.project__media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  cursor: zoom-in;
  font: inherit;
}
.project__zoom-hint {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(13, 13, 13, .78);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.project__zoom-hint svg { width: 14px; height: 14px; }
button.project__media:hover .project__zoom-hint,
button.project__media:focus-visible .project__zoom-hint { opacity: 1; transform: none; }
/* במגע אין hover — התווית מוצגת תמיד */
@media (hover: none) {
  .project__zoom-hint { opacity: 1; transform: none; }
}

/* מצב placeholder — עד שיתקבלו צילומי מסך */
.project__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: var(--sp-5);
  text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(212, 33, 39, .035) 10px 20px),
    var(--c-bg-soft);
  color: var(--c-ink-3);
  font-size: var(--fs-xs);
}
.project__placeholder svg { width: 26px; height: 26px; color: var(--c-ink-3); }
.project__placeholder code {
  padding: 3px 8px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 5px;
  font-size: 0.75rem;
  direction: ltr;
}

/* תווית "בעבודה" — פרויקט שעדיין רץ, לפני שיש מה להראות */
.project__wip {
  padding: 5px 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-2);
}

.project__body { padding: var(--sp-5); flex: 1; }
.project__type {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 4px 11px;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--c-accent);
}
/* תווית וטקסט באותה שורה — כרטיס צר, חוסך 3 שורות */
.project__rows { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.project__rows > div { font-size: var(--fs-sm); line-height: 1.6; }
.project__row-label {
  display: inline;
  margin-inline-end: 6px;
  font-weight: 700;
  color: var(--c-ink);
}
.project__row-text { display: inline; color: var(--c-ink-2); }

.projects__note {
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  text-align: center;
}

/* ==========================================================================
   המלצות
   ========================================================================== */

/* כרגע יש המלצה אחת — כרטיס רחב וממורכז, כדי שלא ייראה יתום בשורה.
   כשמוסיפים המלצות: להוסיף .testimonials--grid למכל, והכרטיסים
   ייפרסו לשני טורים ברוחב מלא. */
.testimonials { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
.testimonial   { max-width: 820px; margin-inline: auto; }

@media (min-width: 900px) {
  .testimonials--grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials--grid .testimonial { max-width: none; margin-inline: 0; }
}

.testimonial {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.6vw, 48px);
  margin-block: 0;                 /* figure — איפוס ברירת המחדל של הדפדפן */
  box-shadow: var(--shadow-md);
}

/* גרשיים דקורטיביים — רומזים על ציטוט בלי לצעוק */
.testimonial__quote {
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-5);
  color: var(--c-accent);
  opacity: .3;
  flex: none;
}

.testimonial__text {
  margin: 0;                       /* blockquote */
  flex: 1;                         /* דוחף את החתימה לתחתית — כרטיסים בגובה אחיד */
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.85;
  color: var(--c-ink-2);
}
.testimonial__text p + p { margin-top: var(--sp-4); }
.testimonial__text strong { font-weight: 600; color: var(--c-ink); }

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

/* ראשי תיבות במקום תצלום — אין תמונות של ממליצים */
.testimonial__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  border-radius: 50%;
  color: var(--c-accent);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1;
}

/* כשיש לוגו של העסק הממליץ — הוא מחליף את ראשי התיבות.
   הלוגו נחתך לעיגול, בלי המסגרת הוורודה שמתאימה רק לאות. */
.testimonial__avatar--logo {
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  background: none;
  border-color: rgba(13, 13, 13, .10);
}
.testimonial__avatar--logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.testimonial__name { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }
.testimonial__role { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-ink-3); line-height: 1.5; }

/* ==========================================================================
   עליי
   ========================================================================== */

/* בלי תמונת פורטרט — טור טקסט אחד ברוחב קריא */
.about__text { max-width: 720px; }

.about__text p + p { margin-top: var(--sp-4); }
.about__text p { color: var(--c-ink-2); line-height: 1.8; }
.about__signature {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.about__signature b { display: block; font-size: var(--fs-h4); color: var(--c-ink); }
.about__signature span { color: var(--c-ink-3); }

/* ==========================================================================
   טופס — פריסה
   ========================================================================== */

.contact { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: 1fr 1.25fr; gap: var(--sp-8); } }

.contact__aside { position: sticky; top: calc(var(--nav-h) + 32px); }
@media (max-width: 959px) { .contact__aside { position: static; } }

.contact__direct { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
/* טלפון ומייל זה לצד זה במקום זה מתחת לזה — חוסך גובה במובייל */
@media (min-width: 480px) and (max-width: 959px) {
  .contact__direct { grid-template-columns: repeat(2, 1fr); }
}
.contact__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 18px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.contact__link:hover { border-color: var(--c-ink); transform: translateX(-2px); }
.contact__link svg { width: 18px; height: 18px; color: var(--c-accent); flex: none; }
.contact__link b { display: block; font-weight: 600; }
.contact__link span { direction: ltr; display: block; font-size: var(--fs-xs); color: var(--c-ink-3); text-align: start; }

.form-row { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
.form-row .field { margin-bottom: 0; }
.form-row { margin-bottom: var(--sp-5); }