/* בלק צ'רי — עמוד צור קשר
   ─────────────────────────────────────────────────────────────────────────────
   מקור-אמת: figma-extract/2026-07-20/raw/nodes-15.json
     ‏667:26589  "Contact us"                  1440×1834 (דסקטופ)
     ‏667:26592  הירו 1440×400 · 667:26594 שכבה #010101@60%
     ‏667:26595  כותרת "צור קשר" Heebo 72/400 lh90 לבן, ממורכזת
     ‏667:26850  עוטף-התוכן fill #ffffff  ← אין פס-קרם בין התוכן לפוטר
     ‏667:26851  "Story Narrative Section" 1440×864 · padding 72/48 · gap 76
     ‏667:26971  בלוק-הכרטיסים  1002 רוחב · gap 48
     ‏667:26941  כותרת "פרטי ההתקשרות שלנו"  Heebo 48/400 lh60 #3b0f1a, ממורכזת
     ‏667:27020  שורת הכרטיסים  1002×124 · HORIZONTAL gap 16
     ‏667:27004  כרטיס 239×124 r6 · fill #f0e7dd · stroke #d6c3a3 1px
                 ‏padding 24 · gap 12 · טקסט 14/20 #1a1a1a ממורכז · אייקון 24×24
     ‏667:26852  בלוק-הטופס 1002×412 · gap 48
     ‏667:26938  "Frame 170" LM=GRID · gridCols=2 colGap=24 rowGap=24
                 סדר עוגנים: (1,0)=שם מלא · (0,0)=טלפון · (1,1)=דוא״ל · (0,1)=הודעה
                 ‏→ ב-RTL בדיוק סדר ה-DOM הקיים. לא נגעתי בסדר.
     ‏667:26916  שדה 489×58 r2 · fill #f8f7f4 · stroke #d8d8d8 · padding 16
     ‏667:26914  תווית 14/400 lh20 #444444 · gap 8 לשדה
     ‏667:26977  כפתור "שליחה" 200×60 r94(=pill) fill #3b0f1a · טקסט 20/400 לבן
   מובייל: nodes-04.json · M_Contact_us 667:27053 (413×2632)
     ‏667:27327 הירו 300 · כותרת 48 · 667:27334 padding 48/16 gap 72
     ‏667:27336 כותרות 36/400 · בלוקים gap 32 · כרטיסים טור-אחד gap 16
     ‏667:27363 טופס טור-אחד gap 24 · 667:27394 כפתור ברוחב מלא, עדיין 60 גובה
   כל מידה כאן נמדדה מה-JSON, לא מהעין.
   ───────────────────────────────────────────────────────────────────────────── */

/* רקע אזור התוכן — לבן כמו בפיגמה (667:26850), לא הקרם הכללי של body */
.contact-page { background: var(--bc-white); }

/* ── Hero · 667:26592 (1440×400) ── */
.contact-hero {
  position: relative;
  min-block-size: clamp(300px, 27.8vw, 400px); /* 300 במובייל (667:27327) → 400 ב-1440 */
  display: grid; place-items: center; overflow: hidden;
}
.contact-hero .hero-bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* 667:26594 fill #010101 opacity .6 — היה גרדיאנט בורדו שאינו בפיגמה */
.contact-hero .hero-overlay { position: absolute; inset: 0; background: rgba(1, 1, 1, .6); }
.contact-hero h1 {
  position: relative; margin: 0; color: var(--bc-white);
  /* 667:26595 = 72 · מובייל: ה-node ‏667:27331 אומר 48 אך הוכרע 60 (רשימת הכרעות #12,
     גובר על ה-node) — הרצפה של clamp חייבת להיות ערך-המובייל שהוכרע */
  font-size: clamp(3.75rem, 5vw, 4.5rem);
  font-weight: var(--fw-regular);       /* היה 500 */
  line-height: 1.25;                    /* lh 90 על 72 */
  padding-inline: 20px; text-align: center;
}

/* ── פריסת התוכן · 667:26851 — רוחב-תוכן 1002 בתוך שולי-עמוד 48 ── */
.contact-page .container {
  max-inline-size: 1098px;   /* 1002 + 2×48 */
  padding-inline: 48px;
}
/* בפיגמה: 72 מתחת להירו · 76 בין שני הבלוקים · 72 לפני הפוטר */
.contact-page .section { padding-block-start: 72px; }
.contact-page .section + .section { padding-block-start: 76px; }
.contact-page .section:last-of-type { padding-block-end: 72px; }

/* פס-הקרם שלפני הפוטר אינו בפיגמה: 667:26850 לבן ו-667:26596 (הפוטר) מתחיל
   מיד אחריו. ה-`margin-block-start` של `.site-footer` (base/chrome) חשף את רקע
   ה-body הקרם — מבוטל כאן; הריווח הלבן מגיע מה-padding-bottom של הסקשן האחרון. */
.contact-page ~ .site-footer { margin-block-start: 0; }

/* כותרות סקשן · 667:26941 / 667:26973 — 48/400 lh60 בורדו, ממורכזות
   (ה-textAlign RIGHT בפיגמה רלוונטי רק לשבירת-שורה; תיבת-הטקסט עצמה ממורכזת
   בקונטיינר 1002 — counterAxisAlignItems=CENTER) */
.contact-page .section-title {
  color: var(--bc-primary);
  /* דסקטופ 48 (667:26941) · מובייל 36 (667:27336) — --fs-h2 יורד עד 28, כאן מדויק */
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: var(--fw-regular);       /* "קלות יותר" — היה 500 */
  /* lineHeightPx בפיגמה = 60 גם בדסקטופ (667:26941 · 48/lh60) וגם במובייל
     (667:27336 · 36/lh60) → אורך קבוע, לא יחס. יחס 1.25 נתן 45px במובייל. */
  line-height: 60px;
  margin-block-end: 48px;               /* itemSpacing של הבלוק */
}

/* ── כרטיסי פרטי התקשרות · 667:27020 + 667:27004 ── */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-inline: auto;
}
.contact-card {
  min-block-size: 124px;
  background: var(--bc-cream-warm);          /* #f0e7dd */
  /* 667:27004 — הכרטיס 239×124 ובפיגמה ה-stroke הוא strokeAlign=INSIDE, כלומר
     נבלע בתוך 124. ‏`border` נכנס לגובה *מעל* התוכן (24+24 padding + 76 תוכן = 124)
     ולכן הכרטיס רונדר 126. ‏box-sizing לא עוזר כאן — הגובה נגזר מהתוכן, לא מה-
     min-block-size. ‏box-shadow inset = קו-מסגרת 1px שאינו תופס מקום בפריסה. */
  box-shadow: inset 0 0 0 1px var(--bc-gold-soft);   /* #d6c3a3 */
  border-radius: var(--radius-btn);          /* r=6 */
  padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* בפיגמה ה-gap 12 הוא בין האייקון לצומת-הטקסט *האחד* (שתי שורות בתוכו).
     כאן הטקסט מפוצל לשני span-ים — לכן ה-gap עובר ל-margin של האייקון בלבד,
     אחרת מתקבל ריווח כפול והכרטיס גבוה ב-12px מהעיצוב. */
  gap: 0;
  text-align: center; color: var(--bc-ink);
  min-inline-size: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* ה-inset נשמר גם ב-hover, אחרת המסגרת נעלמת ברגע שנוסף צל */
a.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--bc-gold-soft), var(--shadow-card);
}
/* אייקונים 24×24 בצבע הטקסט (#1a1a1a בפיגמה — היה בורדו) */
.contact-card .cc-icon { display: inline-flex; gap: 8px; color: var(--bc-ink); margin-block-end: 12px; }
.contact-card .cc-icon svg { inline-size: 24px; block-size: 24px; }
.contact-card .cc-icon a { color: inherit; display: inline-flex; transition: opacity .2s; }
.contact-card .cc-icon a:hover { opacity: .7; }
/* הכיתוב בפיגמה הוא צומת-טקסט אחד בשתי שורות: 14/20 #1a1a1a ממורכז */
.contact-card .cc-label,
.contact-card .cc-value {
  font-size: var(--fs-sm); line-height: 20px; color: var(--bc-ink);
}
/* משקל אחיד פר-כרטיס, לא פר-שורה (עקבי בדסקטופ+מובייל):
   טלפון (667:27024/27345) + מייל (667:26997/27341) = 400 לשתי השורות ·
   ניווט (667:27016/27360) + סושיאל (667:27006/27356) = 600 — מחלקת cc-strong ב-HTML */
.contact-card .cc-label, .contact-card .cc-value { font-weight: var(--fw-regular); }
.contact-card.cc-strong .cc-label, .contact-card.cc-strong .cc-value { font-weight: var(--fw-semibold); }

/* ── טופס · 667:26938 ── */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-inline: auto;
}
.form-field { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
.form-field label {
  font-size: var(--fs-sm); line-height: 20px; color: var(--bc-ink-mute); /* #444444 */
}
.form-field input, .form-field textarea {
  border: 1px solid #d8d8d8;             /* 667:26916 stroke — אין טוקן מתאים */
  border-radius: var(--radius-hair);     /* r=2 */
  /* 667:26916 / 667:27375 fill = #f8f7f4 = משתנה-הפיגמה "Background/Base 2"
     (figma-extract/2026-07-20/figma-variables.json). אין לו טוקן ב-tokens.css —
     ‎--bc-paper‎ הוא #faf9f7, גוון אחר, ושימש כאן בקירוב. עד שייווסף
     ‎--bc-base-2: #f8f7f4‎ לטוקנים — הערך המדוד ישירות. */
  background: var(--bc-base-2);
  padding: 16px;
  font: inherit; line-height: 24px; color: var(--bc-ink);
  inline-size: 100%; block-size: 58px;   /* 16 + 24 + 16 = 58 */
}
/* ידית-גרירה מוסרת — שדה נקי כמו בפיגמה; הגובה גדל אוטומטית ב-JS.
   מסגרת ה-textarea בהירה מה-inputs: #e9e8e6 (667:26991 דסקטופ · 667:27383 מובייל) */
.form-field textarea { resize: none; min-block-size: 58px; overflow: hidden; border-color: var(--bc-gray-bg); }
/* טלפון/דוא"ל — הקלדה LTR אבל יישור לימין כמו בעיצוב */
.form-field input[type="tel"], .form-field input[type="email"] { direction: ltr; text-align: end; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--bc-ink-mute); }
.form-field input:focus, .form-field textarea:focus {
  outline: 2px solid var(--bc-rose); outline-offset: 1px; border-color: transparent;
}
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: #b3261e; }

/* כפתור השליחה · 667:26977 — 200×60, pill, בורדו מלא, טקסט 20/400 */
.form-submit { grid-column: 1 / -1; text-align: center; margin-block-start: 24px; }
.form-submit .btn {
  min-inline-size: 200px;
  block-size: 60px;
  padding-block: 12px; padding-inline: 32px;
  border-radius: var(--radius-pill);     /* r=94 על גובה 60 = pill מלא */
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: 36px;                     /* 12 + 36 + 12 = 60 */
}
.form-submit .btn[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

.form-status { grid-column: 1 / -1; text-align: center; margin: 0; font-weight: 500; }
.form-status.ok { color: #2e6b34; }
.form-status.err { color: #b3261e; }
.form-status[hidden] { display: none; }

/* ── רספונסיב ── */
@media (max-width: 960px) {
  .contact-page .container { max-inline-size: none; padding-inline: 24px; }
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 560px; }
  .contact-form { grid-template-columns: minmax(0, 1fr); max-inline-size: 560px; }
  .form-submit .btn { inline-size: 100%; }
}

/* מובייל · M_Contact_us 667:27053 — padding 48/16, gap 72 בין הבלוקים,
   כותרות 36, gap 32 בתוך בלוק, כרטיסים בטור אחד */
@media (max-width: 560px) {
  .contact-page .container { padding-inline: 16px; }
  .contact-page .section { padding-block-start: 48px; }
  .contact-page .section + .section { padding-block-start: 72px; }
  .contact-page .section:last-of-type { padding-block-end: 48px; }
  .contact-page .section-title { margin-block-end: 32px; }  /* גודל 36 מגיע מה-clamp */
  .contact-cards { grid-template-columns: minmax(0, 1fr); max-inline-size: none; }
  .contact-form { max-inline-size: none; }
  /* 667:27361→667:27394 — במובייל 32 בין סוף השדות לכפתור: gap 24 + 8 (בדסקטופ נשאר 48) */
  .form-submit { margin-block-start: 8px; }
}

/* ── הצמדת שבירות-שורה לפיגמה (29.7.26) — ראו audit/2026-07-29-linebreaks/solve-widths.mjs ──────── */
@media (max-width: 960px) {
  /* 667:27362 — "או השאירו הודעה | ונחזור אליכם" — טווח-פתרון [258–350] */
  .contact-page h2[data-bc-slot="contact:form_title"] { max-inline-size: 300px; margin-inline: auto; }
}