/* ============================================================================
   Arova · עמוד הבית
   כל הערכים נשענים על design/tokens/tokens.css — אין כאן ערכים קשיחים.
   ============================================================================ */


/* ============================================================================
   1 · היירו
   ============================================================================ */

.hero { padding-block: var(--space-9) var(--space-11); }

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-9);
  align-items: center;
}

.hero__title { font-size: var(--text-display); line-height: var(--leading-tight); }
.hero__line  { display: block; }

.hero__lead { margin-block-start: var(--space-5); max-width: 44ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-7);
}

/* שורת הורדת חיכוך — עונה על "מה קורה אחרי שאני לוחץ" */
.hero__support {
  margin-block-start: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero__media img { width: 100%; }

@media (max-width: 900px) {
  .hero { padding-block: var(--space-7) var(--space-9); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-7); }
  /* במובייל התמונה עולה מעל הטקסט — היא מה שתופס את העין ראשונה */
  .hero__media { order: -1; }
}


/* ---------------------------------------------------------------------------
   היירו במצב תמונה מלאה
   ---------------------------------------------------------------------------
   התמונה ממלאת בדיוק את המסך הראשון: 100svh פחות גובה הסרגל העליון.
   svh ולא vh — במובייל vh מחושב לפי מסך בלי סרגל הדפדפן, והמקטע היה
   נחתך בפתיחה ואז קופץ.

   הטקסט יושב בתחתית ומעליו הצללה שמתחזקת כלפי מטה. זו לא החלטה
   אסתטית בלבד: הצללה של 78% נייבי מבטיחה יחס ניגודיות של 6.6:1
   גם מול תמונה לבנה לגמרי, כלומר AA מובטח בלי תלות בתמונה שתועלה.
   --------------------------------------------------------------------------- */

.hero--cover {
  position: relative;
  padding-block: 0;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  align-items: end;
  overflow: hidden;
}

.hero--cover .hero__bg {
  position: absolute;
  inset: 0;
}

.hero--cover .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ההצללה על התמונה.
   אין כאן מלבן ואין קצה נראה — ההצללה חזקה בצד שבו יושב הטקסט
   ונמוגה בהדרגה לכיוון המוצר, כך שהיא נקראת כעומק טבעי בתמונה
   ולא כרכיב ממשק. זו גם מה שמחזיקה את הניגודיות, ולכן היא רחבה
   ומדורגת ולא נקודתית.

   הכיוון: 0% הוא הקצה הימני, שם יושב הטקסט בעברית.
   לגרסה האנגלית יש היפוך מפורש בהמשך. */
.hero--cover .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left,
      rgba(62, 44, 31, .88)   0%,
      rgba(62, 44, 31, .86)  38%,
      rgba(62, 44, 31, .78)  58%,
      rgba(62, 44, 31, .40)  78%,
      rgba(62, 44, 31, .10) 100%),
    linear-gradient(to top,
      rgba(62, 44, 31, .28)   0%,
      rgba(62, 44, 31, 0)    45%);
}

/* באנגלית הטקסט עובר לצד שמאל, ואיתו ההצללה */
html[dir="ltr"] .hero--cover .hero__bg::after {
  background:
    linear-gradient(to right,
      rgba(62, 44, 31, .88)   0%,
      rgba(62, 44, 31, .86)  38%,
      rgba(62, 44, 31, .78)  58%,
      rgba(62, 44, 31, .40)  78%,
      rgba(62, 44, 31, .10) 100%),
    linear-gradient(to top,
      rgba(62, 44, 31, .28)   0%,
      rgba(62, 44, 31, 0)    45%);
}

/* מצב חסר תמונה — סימון גלוי, באותה מוסכמה של שאר האתר.
   לעולם לא תמונה מומצאת במקום תמונה אמיתית. */
.hero--cover .hero__bg--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--clay-900), var(--clay-700));
}

.hero__bg-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-soft);
  border: var(--border-hair) dashed var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
}

.hero--cover .hero__inner {
  position: relative;   /* מעל שכבת ההצללה */
  z-index: 1;
  display: block;
  /* הטקסט מורם מהקצה התחתון. הריווח גדל עם גובה המסך אך חסום
     משני הצדדים, כדי שבמסך נמוך הוא לא יידחוף את הטקסט החוצה
     ובמסך גבוה הוא לא יצוף באמצע. */
  padding-block: var(--space-8) clamp(var(--space-9), 14vh, var(--space-12));
}

/* ---------------------------------------------------------------------------
   הטקסט יושב ישירות על התמונה — בלי לוח ובלי מסגרת.
   הקריאות מגיעה משני מקורות: ההצללה המדורגת שמעל, וצל רך סביב
   האותיות שמפריד אותן מפרטים בהירים בתמונה.
   --------------------------------------------------------------------------- */
.hero--cover .hero__text {
  max-width: 40rem;
}

.hero--cover .eyebrow,
.hero--cover .hero__title,
.hero--cover .hero__lead,
.hero--cover .hero__support {
  text-shadow: 0 1px 3px rgba(26, 18, 13, .45),
               0 2px 18px rgba(26, 18, 13, .35);
}

/* ניגודיות: כל הטקסט על ההצללה עובר לגוונים בהירים */
/* הזהב אינו משמש כאן. נמדד 1.0:1 מול הקיר המואר שבתמונה —
   טקסט זהב על קיר חמים ובהיר הוא הצירוף הגרוע ביותר האפשרי.
   בז' מולבן נותן 6.75:1 באותה נקודה בדיוק. */
.hero--cover .eyebrow,
.hero--cover .hero__support { color: var(--clay-50); }
.hero--cover .hero__title   { color: var(--clay-50); }
.hero--cover .hero__lead    { color: var(--color-text-invert); }

/* הכפתורים מתהפכים: על רקע כהה הנייבי נבלע, ולכן הראשי הופך לזהב
   והמשני למסגרת בהירה. אין שינוי ב-HTML — רק בשכבת העיצוב. */
.hero--cover .btn--primary {
  background: var(--color-accent);
  color: var(--clay-900);
  border-color: var(--color-accent);
}
/* בפלטת החמרה accent-soft ו-accent הם אותו גוון, ולכן ה-hover
   לא שינה דבר. clay-300 מבהיר בדרגה אחת — 7.86:1 מול הטקסט. */
.hero--cover .btn--primary:hover {
  background: var(--clay-300);
  border-color: var(--clay-300);
  color: var(--clay-900);
}

.hero--cover .btn--secondary {
  background: transparent;
  color: var(--clay-50);
  border-color: rgba(246, 240, 234, .55);
}
.hero--cover .btn--secondary:hover {
  background: rgba(246, 240, 234, .12);
  border-color: var(--clay-50);
}

/* מיקוד מקלדת חייב להיראות גם על רקע כהה */
.hero--cover a:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .hero--cover { padding-block: 0; }
  .hero--cover .hero__inner { padding-block: var(--space-7) clamp(var(--space-8), 9vh, var(--space-10)); }

  /* במסך צר החיתוך אגרסיבי: מתוך תמונה ביחס 16:9 נשאר פס צר.
     ברירת המחדל (מרכז) הייתה חותכת את המוצר החוצה ומשאירה את
     פתח הדלת. 20% מזיזה את החלון אל המוצר. */
  .hero--cover .hero__bg img { object-position: 20% center; }

  /* במובייל הטקסט תופס את כל הרוחב, ולכן הצללה בציר האופקי אינה
     מכסה אותו. כאן ההצללה עולה מלמטה — הטקסט יושב בתחתית. */
  .hero--cover .hero__bg::after,
  html[dir="ltr"] .hero--cover .hero__bg::after {
    background: linear-gradient(to top,
      rgba(62, 44, 31, .84)   0%,
      rgba(62, 44, 31, .74)  48%,
      rgba(62, 44, 31, .46)  78%,
      rgba(62, 44, 31, .28) 100%);
  }
  /* הכלל של order:-1 לתמונה אינו רלוונטי כאן — אין עמודת תמונה נפרדת */
  .hero--cover .hero__media { display: none; }
}

/* ============================================================================
   2 · ערכי המותג
   ============================================================================ */

.value-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.value-item {
  padding-block-start: var(--space-5);
  border-block-start: var(--border-thin) solid var(--color-accent);
}

.value-item__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-text);
  margin-block-end: var(--space-3);
}

.value-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-block-end: var(--space-3);
}

.value-item__text { font-size: var(--text-sm); }


/* ============================================================================
   3 · למלונות ולעסקים
   ============================================================================ */

.business__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  /* center ולא start: עמודת הטקסט קצרה מעמודת הנתונים,
     ויישור לראש הותיר חלל ריק ענק מתחתיה. */
  align-items: center;
}

.business__cta { margin-block-start: var(--space-7); }


/* ---- ארבעת נתוני התמיכה ----
   רשת של שתיים על שתיים ולא טור אחד. בטור אחד המקטע נמתח לגובה
   כפול מעמודת הטקסט שלצידו, והפער נראה כמו טעות ולא ככוונה. */
.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-7);
}

.spec-item {
  padding-block-end: var(--space-4);
  border-block-end: var(--border-hair) solid var(--color-line-invert);
}

.spec-item__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-soft);
  margin-block-end: var(--space-2);
}

.spec-item__body { margin: 0; }

.spec-item__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-text-invert);
  margin: 0;
  text-wrap: balance;
}

/* ערך ארוך — משפט ולא מספר. גופן תצוגה על משפט שלם נשבר לשלוש
   שורות ונראה שבור, ולכן הוא יורד לגודל קריא. */
.spec-item__value--long {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-medium);
}

.spec-item__note {
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(234, 219, 206, .68);
}

@media (max-width: 900px) {
  .business__inner { grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
}

@media (max-width: 520px) {
  .spec-list { grid-template-columns: 1fr; gap: var(--space-5); }
}


/* ============================================================================
   4 · הקולקציה
   ============================================================================ */

.collection__more { margin-block-start: var(--space-8); text-align: center; }


/* ============================================================================
   5 · ארבעה צעדים
   ============================================================================ */

/* מספר העמודות נקבע מפורשות ולא ב-auto-fit.
   auto-fit מתאים לרשימה שאורכה אינו ידוע מראש; כאן יש בדיוק ארבעה צעדים,
   ו-auto-fit היה משאיר את הרביעי לבד בשורה כשהרוחב חסר בפיקסלים בודדים.
   מקטע שכותרתו "ארבעה צעדים" ומוצג כ-3+1 נראה שבור. */
.step-list {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  counter-reset: step;
}

@media (min-width: 560px)  { .step-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .step-list { grid-template-columns: repeat(4, 1fr); } }

.step-item { counter-increment: step; }

/* המספר נוצר ב-CSS ולא נכתב ב-HTML — כך הוא תמיד מסונכרן עם הסדר בפועל */
.step-item::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  /* --color-accent אסור כטקסט על רקע בהיר: 1.97:1. ראה Arova-CL סעיף 13.
     --color-accent-text נותן 5.28:1 באותו גוון. */
  color: var(--color-accent-text);
  line-height: 1;
  margin-block-end: var(--space-4);
}

.step-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  margin-block-end: var(--space-2);
}

.step-item__text { font-size: var(--text-sm); }


/* ============================================================================
   6 · מאחורי הבחירה
   ============================================================================ */

.story {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-9);
  align-items: center;
}

.story__media img { width: 100%; }

.story__text h2 { margin-block-end: var(--space-5); }

/* הערת עבודה פנימית — מוצגת בשלב האב-טיפוס בלבד */
.story__note {
  margin-block-start: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-inline-start: var(--border-thin) solid var(--color-accent);
  background: var(--color-surface-alt);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: var(--space-7); }
}


/* ============================================================================
   7 · קריאה לפעולה סוגרת
   ============================================================================ */

.closing { padding-block: var(--space-11); }
.closing .lead { margin-inline: auto; }

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.closing__phone { font-size: var(--text-sm); color: var(--color-text-muted); }

/* התווית והמספר יושבים יחד; המספר הוא קישור חיוג */
.closing__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.closing__phone a {
  min-height: 44px;                 /* אזור לחיצה נגיש */
  display: inline-flex;
  align-items: center;
  color: var(--color-accent-text);
  direction: ltr;
}
.closing__phone a[href]:hover { color: var(--color-text); }