/* ==========================================================================
   תאילנד אקספרס — Base + Layout
   RTL-native, mobile-first. שום ערך קשיח — הכל מ-tokens.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /*
   * קפיצת עוגן נוחתת מתחת לכל מה שדביק.
   *
   * ‎5rem‎ היה מספר שנמדד פעם אחת ביד, ובעמוד הטיסות הוא כבר
   * לא נכון: הכותרת 66 ועוד סרגל ההתקדמות 28 בנייד, כלומר 94,
   * מול 80 שהוקצו. קישור הדילוג לתוכן הנחית את הכותרת מתחת
   * לסרגל — וזה נוגע דווקא במי שמנווט במקלדת.
   *
   * ‎--fl-bar-h‎ הוא 0 בכל עמוד שאין בו סרגל, ולכן החישוב נכון
   * בכל האתר בלי תנאי.
   */
  scroll-padding-top: calc(var(--header-h, 66px) + var(--fl-bar-h, 0px) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
svg { fill: currentColor; }

/* ---------- טיפוגרפיה ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-xl);  font-weight: var(--fw-bold);  line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

p { margin: 0 0 var(--sp-4); max-width: var(--w-prose); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--fw-bold); color: var(--text-strong); }
small { font-size: var(--fs-xs); }

a {
  color: var(--c-sea-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--c-navy-800); }

ul, ol { margin: 0 0 var(--sp-4); padding-inline-start: var(--sp-5); }
li { margin-bottom: var(--sp-2); }
li::marker { color: var(--c-sea-500); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-7) 0; }

/* ---------- נגישות ---------- */
:focus-visible {
  outline: 3px solid var(--c-sea-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-4);
  top: -100%;
  z-index: var(--z-modal);
  background: var(--c-navy-900);
  color: var(--text-on-dark);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--text-on-dark); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- פריסה ---------- */
.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--w-wide); }
.container--prose { max-width: 76ch; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(var(--sp-6), 4vw, var(--sp-8)); }
.section--dark {
  background: var(--c-navy-900);
  color: rgba(255, 255, 255, 0.86);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: var(--text-on-dark); }
.section--dark a { color: var(--c-sea-200); }
.section--sand { background: var(--c-gold-050); }
.section--sea  { background: var(--c-sea-050); }

/* כותרת סקשן — אסימטרית, לא ממורכזת (הימנעות מקלישאת ה-AI) */
.section-head { margin-bottom: var(--sp-7); max-width: 62ch; }
.section-head .eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-sea-600);
  margin-bottom: var(--sp-2);
}
.section-head p { color: var(--text-muted); font-size: var(--fs-lg); }

/* גריד בסיסי */
.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* גריד אסימטרי — הפרה מכוונת של הסימטריה */
@media (min-width: 900px) {
  .grid--offset { grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--sp-8); }
  .grid--offset-rev { grid-template-columns: 1fr 1.4fr; align-items: center; gap: var(--sp-8); }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* ---------- כפתורים ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: var(--sp-3) var(--sp-5);
  min-height: 48px;              /* יעד מגע בנייד */
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn--primary {
  background: var(--c-gold-500);
  color: var(--c-navy-950);
}
.btn--primary:hover { background: var(--c-gold-600); color: var(--c-navy-950); }

.btn--secondary {
  background: var(--c-navy-800);
  color: var(--text-on-dark);
}
.btn--secondary:hover { background: var(--c-navy-900); color: var(--text-on-dark); }

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--c-navy-800);
}
.btn--ghost:hover { background: var(--c-navy-800); color: var(--text-on-dark); }

.btn--on-dark { background: var(--c-white); color: var(--c-navy-900); }
.btn--on-dark:hover { background: var(--c-sea-050); color: var(--c-navy-950); }

.btn--lg { font-size: var(--fs-lg); padding: var(--sp-4) var(--sp-7); min-height: 56px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- תגיות ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  border: 1px solid var(--c-sea-200);
}
.tag--warm { background: var(--c-gold-050); color: var(--c-gold-700); border-color: var(--c-gold-200); }

/* ---------- תמונות ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--c-navy-800); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x4  { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1; }

figure { margin: 0 0 var(--sp-5); }
figcaption {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--sp-2);
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--c-sea-200);
}

/* ---------- עזרי כיווניות ---------- */
/* מספרים, מחירים ותאריכים חייבים LTR גם בתוך טקסט RTL */
.ltr-num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/*
 * ‼️ ‎[hidden]‎ מסתיר, נקודה.
 *
 * --------------------------------------------------------------------------
 * זו הפעם הרביעית היום שהתכונה הזו מובסת: פאנלי הלשוניות שהוצגו
 * כולם יחד, כרטיסי הסינון שלא נעלמו, ועכשיו ‎.lead-status‎ —
 * מלבן ירוק ריק בתוך טופס הטיסה ששי צילם.
 *
 * ‎[hidden]‎ הוא ‎display: none‎ בגיליון ברירת המחדל של הדפדפן,
 * כלומר **כל** כלל מחבר גובר עליו, גם כלל עם סגוליות נמוכה.
 * מדדתי: מתוך אחד-עשר אלמנטים עם ‎hidden‎ באותו עמוד, אחד לא
 * הוסתר — ולא הצלחתי לאתר את הכלל שגבר עליו אפילו כשסרקתי את
 * כל גיליונות הסגנון בזמן ריצה.
 *
 * ‎!important‎ כאן ולא בכל מקום אחר: זו התנהגות של תקן ולא
 * החלטת עיצוב, ואלמנט שמוסתר במפורש אסור שיוצג בגלל כלל
 * שנכתב למשהו אחר לגמרי. מי שרוצה להציג אותו — מסיר את
 * התכונה, וזה בדיוק מה שה-JavaScript עושה.
 * --------------------------------------------------------------------------
 */
[hidden] { display: none !important; }

/* ===========================================================================
   ‼️ ‎.grid‎ ברוחב מלא — תיקון סימפטום, ואני אומר את זה בפירוש
   ---------------------------------------------------------------------------
   בוריס מדד ב-‎/פוקט-פארק-מים-אנדמנדה‎ ברוחב מסך 1425:

       .container        1120px   פנוי 1053
         .section-header   504px   ← מכווץ
         .grid             266px   ← מכווץ, עמודות של 73

   ולשם השוואה, ‎/טיול-דייג-בפוקט‎ באותו רוחב: רשת 1053, עמודות 335.
   **אותם כללים גלובליים, תוצאה אחרת.**

   ---------------------------------------------------------------------------
   מה ששנינו בדקנו ושללנו

   ‎display: block‎ בהורה · אין ‎float‎ · אין ‎position: absolute‎ ·
   אין ‎transform‎ · אין ‎zoom‎ · אין ‎column-count‎ · אין ‎contain‎ ·
   ‎margin‎ אפס · ‎max-width: 100%‎ · **ואין אף כלל CSS שקובע
   ‎width‎ על ‎.grid‎** — בדקתי את כל הגיליונות.

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

   ---------------------------------------------------------------------------
   ‼️ ולמה אני מחיל בכל זאת

   שנינו הגענו לאותה נקודה בנפרד: **תיקון מאומת בלי שורש מאומת.**
   בוריס בדק בדפדפן ש-‎width: 100%‎ מחזיר את הרשת ל-1053.

   הכלל הזה הוא **חסר השפעה** על כל רשת שכבר ממלאת את ההורה
   שלה — ‎width: 100%‎ על אלמנט שרוחבו ‎auto‎ בהורה בלוקי נותן את
   אותו מספר בדיוק. הוא משנה **רק** את המקרה השבור.

   ‼️ **זה אינו תירוץ, וזה כן תיעוד.** מי שיגלה מחר את השורש
   יוכל להסיר את הכלל ולראות אם משהו זז. בלי ההערה הזו הוא
   היה מוצא שורה בלי הסבר ומשאיר אותה מפחד.
   =========================================================================== */

.grid {
  width: 100%;
  box-sizing: border-box;
}