/* ==========================================================================
   flights.css — הסקשנים החדשים בעמוד הטיסות
   ==========================================================================

   ‼️ למה קובץ נפרד: הפתיח ומפת המסלול של עמוד הטיסות מעוצבים
   ב-‎components.css‎, שהוא הקובץ של איגור. הסקשנים שנוספו כאן —
   שדות התעופה, חברות התעופה, הצהרת המחיר, הטיפים ותוכן ה-SEO —
   הם תוספת בתחום שלי, ולכן הם בקובץ משלי שאפשר לגלגל אחורה
   בנפרד בלי לגעת בשאר האתר.

   נטען אחרי ‎transfers.css‎. שני הקבצים אינם נוגעים זה בזה:
   ‎tr-*‎ מול ‎fl-*‎.

   כל הצבעים והמרווחים הם טוקנים מ-‎tokens.css‎.
   ========================================================================== */

/* --------------------------------------------------------------------------
   שדות התעופה
   -------------------------------------------------------------------------- */

.fl-airports__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.fl-airport {
  position: relative;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

/*
 * קוד ה-IATA הוא הדבר שמחפשים.
 *
 * הוא מוצג גדול ובמונוספייס כי זה קוד ולא מילה, והוא מיושר
 * לפינה הפותחת כך שאפשר לסרוק את כל הכרטיסים בעמודה אחת.
 * ‎ltr‎ מפורש: קוד לטיני בתוך עמוד עברי מתהפך בלי זה.
 */
.fl-airport__code {
  display: inline-block;
  direction: ltr;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-gold-700);
  background: var(--c-gold-050);
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-3);
  margin-block-end: var(--sp-3);
}

.fl-airport__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  margin-block: 0 var(--sp-1);
}

.fl-airport__city {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-sea-600);
  margin-block: 0 var(--sp-3);
}

.fl-airport__note {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
  margin: 0;
}

/* --------------------------------------------------------------------------
   חברות התעופה
   -------------------------------------------------------------------------- */

/*
 * ‎columns‎ ולא ‎grid‎.
 *
 * DESIGN-RULES: רשימה קצרה מקבלת עמודות מאוזנות ולא רשת, כי
 * ברשת יש "שורה אחרונה" ולכן תמיד יתום. שמונה פריטים באורך
 * משתנה מתאזנים כאן מעצמם.
 */
.fl-airlines__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--sp-7);
}

@media (max-width: 719px) {
  .fl-airlines__list { columns: 1; }
}

.fl-airline {
  break-inside: avoid;
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--c-line);
}

.fl-airline__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  margin-block: 0 var(--sp-1);
}

.fl-airline__note {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
  margin: 0;
}

/* --------------------------------------------------------------------------
   הצהרת המחיר

   ‼️ הסקשן היחיד בעמוד שמקבל רקע כהה.
   הוא אומר "אנחנו לא הכי זולים", וזו האמירה שהכי חשוב שתיקרא.
   -------------------------------------------------------------------------- */

.fl-honest__panel {
  background: var(--c-navy-900);
  color: var(--c-white);
  border-radius: var(--r-md);
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  max-inline-size: 76ch;
}

.fl-honest__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  margin-block: 0 var(--sp-4);
}

.fl-honest__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-sea-200);
  margin-block: 0 var(--sp-4);
}

.fl-honest__list {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.fl-honest__list li {
  position: relative;
  padding-inline-start: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-white);
}

/*
 * הווי נבנה ב-CSS ולא נכתב בתוכן.
 *
 * ‎border-left‎ ו-‎border-bottom‎ פיזיים ולא לוגיים: צורת הווי
 * אינה תלוית כיוון, ובתכונות לוגיות היא מתהפכת ב-RTL ונראית
 * כחץ שמצביע לכיוון הלא נכון.
 */
.fl-honest__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  inline-size: var(--sp-3);
  block-size: var(--sp-3);
  border-left: 2px solid var(--c-gold-500);
  border-bottom: 2px solid var(--c-gold-500);
  transform: rotate(-45deg);
}

.fl-honest__note {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-sea-200);
  margin: 0;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid rgb(255 255 255 / 0.15);
}

/* --------------------------------------------------------------------------
   טיפים
   -------------------------------------------------------------------------- */

.fl-tips__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.fl-tip {
  background: var(--c-sea-050);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.fl-tip__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  margin-block: 0 var(--sp-2);
}

.fl-tip__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
  margin: 0;
}

/* --------------------------------------------------------------------------
   תוכן ה-SEO
   -------------------------------------------------------------------------- */

/* 76ch — רוחב עמודת הטקסט הקריאה לפי DESIGN-RULES */
.fl-seo__body {
  max-inline-size: 76ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
}

.fl-seo__body p { margin-block: 0 var(--sp-4); }
.fl-seo__body p:last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   תוכן ה-SEO — מאמר ולוח עובדות

   שי הצביע על הסקשן ואמר שהוא נראה יבש. הוא היה ארבע פסקאות
   רצופות ברוחב 76 תווים בלי שום עוגן לעין — קיר טקסט.

   עכשיו לכל פסקה יש כותרת משנה, ולצידה לוח קודי שדות התעופה.
   הלוח אינו קישוט: קוד שדה הוא בדיוק מה שמחפשים תוך כדי קריאה
   ולא רוצים לצוד בתוך פסקה.
   -------------------------------------------------------------------------- */

/*
 * הטוקן חל רק על עמוד שיש בו סרגל.
 *
 * ‎flights.css‎ נטען בכל עמודי האתר, ולכן ‎:root‎ סתמי היה מוסיף
 * 32 פיקסל ל-‎scroll-padding-top‎ גם בעמודים שאין בהם שום סרגל,
 * וקפיצת עוגן הייתה נוחתת נמוך מדי בכל מקום. ‎:has()‎ קושר את
 * הערך לקיום הרכיב עצמו ולא לשם הקובץ שנטען.
 */
:root:has(.fl-progress) { --fl-bar-h: 32px; }

.fl-seo__wrap {
  display: grid;
  gap: clamp(var(--sp-5), 3vw, var(--sp-8));
}

.fl-seo__block + .fl-seo__block { margin-block-start: var(--sp-6); }

.fl-seo__h {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--lh-tight);
}

/*
 * קו מבטא קצר לפני הכותרת.
 *
 * הוא מסמן התחלה של נושא בלי להוסיף עוד גודל גופן. ‎::before‎
 * ולא אלמנט: אין כאן תוכן, רק סימן.
 */
.fl-seo__h::before {
  content: "";
  display: inline-block;
  inline-size: 18px;
  block-size: 2px;
  margin-inline-end: .5em;
  vertical-align: middle;
  background: var(--c-gold-500);
  border-radius: 2px;
}

/* ---------------------------------------------------------- לוח הקודים */

.fl-facts {
  padding: var(--sp-5);
  background: var(--c-sea-050);
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-md, 12px);
}

.fl-facts__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-sea-700);
  letter-spacing: var(--ls-wide);
}

.fl-facts__list { margin: 0; padding: 0; list-style: none; }

.fl-facts__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-block-end: 1px solid rgba(0, 0, 0, .06);
}
.fl-facts__row:last-child { border-block-end: 0; }

/*
 * הקוד נשאר LTR בתוך שורה עברית.
 *
 * ‎BKK‎ בתוך טקסט RTL בלי בידוד נצמד לצד הלא נכון כשיש לידו
 * פיסוק, וזו אותה משפחת באגים שטופלה ב-bidi-fix.
 */
.fl-facts__code {
  direction: ltr;
  unicode-bidi: isolate;
  min-inline-size: 3.2em;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-sea-700);
}

.fl-facts__place { font-size: var(--fs-sm); color: var(--text-body); }

.fl-facts__note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

@media (min-width: 900px) {
  .fl-seo__wrap {
    grid-template-columns: minmax(0, 1fr) clamp(240px, 26%, 300px);
    align-items: start;
  }
  /*
   * הלוח נשאר בשדה הראייה לאורך המאמר. ‎--header-h‎ הוא אותו
   * משתנה שסרגל המלונות כותב, ולא מספר שני לאותו דבר.
   */
  /*
   * ‼️ הלוח נדבק **מתחת לסרגל ההתקדמות**, לא מתחת לכותרת.
   *
   * הוא נדבק ב-82px בזמן שהסרגל מסתיים ב-98px, וכותרת הלוח
   * נחתכה ב-16px בכל גלילה. בוריס מדד את זה בגלילה אמיתית.
   *
   * החישוב מהטוקנים ולא ממספר: אם גובה הכותרת או הסרגל
   * ישתנה, המרווח ילך אחריהם.
   */
  .fl-seo__aside {
    position: sticky;
    top: calc(var(--header-h, 66px) + var(--fl-bar-h, 32px) + var(--sp-4));
  }
  .fl-seo__body { max-inline-size: none; }
}

/* --------------------------------------------------------------------------
   סרגל ההתקדמות — מטוס לאורך העמוד

   שי ביקש "סרגל עם מטוס" בזמן גלילה, וזה מתחבר לשפה שכבר קיימת
   בעמוד: ההירו מצייר קשת מ-TLV ל-BKK עם מטוס קטן נע עליה. הסרגל
   הוא אותו מסע, לאורך הקריאה.

   מימין לשמאל כמו כיוון הקריאה: תל אביב בימין, בנגקוק בשמאל.
   התוויות אינן קישוט — הן אומרות איפה אתה במסע.
   -------------------------------------------------------------------------- */

.fl-progress {
  --p: 0%;
  /* גובה הסרגל, כדי שמי שנדבק מתחתיו יחשב ולא ינחש. ראה fl-seo__aside */
  --fl-bar-h: 32px;
  /*
   * ‼️ הסרגל אינו חוטף קליקים.
   *
   * הוא fixed, ברוחב מלא ו-32px גובה, ויושב מיד מתחת לכותרת
   * הדביקה. בלי pointer-events הוא רצועה מתה לרוחב כל המסך
   * שבולעת כל לחיצה על קישור שנמצא שם — בנייד בדיוק באזור
   * שאנשים לוחצים בו. aria-hidden מסתיר מקורא מסך ולא מהעכבר.
   *
   * בוריס תפס את זה עם elementFromPoint בבדיקת r1, ולא מקריאת
   * הקוד. אין בסרגל שום דבר ללחוץ עליו, ולכן none מוחלט.
   */
  pointer-events: none;
  position: fixed;
  inset-block-start: var(--header-h, 66px);
  inset-inline: 0;
  z-index: calc(var(--z-sticky) - 1);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px clamp(var(--sp-4), 4vw, var(--sp-7));
  background: color-mix(in srgb, var(--c-navy-900, #0b1420) 88%, transparent);
  backdrop-filter: blur(8px);
  /* מוסתר עד שיוצאים מההירו — אחרת הוא חוצה את הכותרת הראשית */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.fl-progress[data-on="1"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fl-progress__from,
.fl-progress__to {
  font-size: var(--fs-3xs, .7rem);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, .62);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}

/*
 * המסלול: קו מקווקו כמו קשת ההירו, והחלק שכבר נעשה מלא.
 *
 * ‎background-image‎ ולא אלמנט נוסף — אין כאן תוכן, רק ציור.
 */
.fl-progress__track {
  position: relative;
  block-size: 2px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(
    to left,
    rgba(255, 255, 255, .28) 0 5px,
    transparent 5px 11px
  );
}

.fl-progress__done {
  position: absolute;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  inline-size: var(--p);
  border-radius: 2px;
  background: linear-gradient(to left, var(--c-gold-500), var(--c-sea-400));
}

/*
 * המטוס יושב על קצה המסלול שהושלם.
 *
 * ‎translateX(50%)‎ ולא ‎-50%‎: בהקשר RTL הציר הפיזי הפוך לציר
 * הלוגי, והמרכוז צריך ללכת לכיוון שממנו הגיע. נבדק בדפדפן ולא
 * נגזר מהיגיון — זה בדיוק סוג המקום שבו היגיון מטעה.
 */
.fl-progress__plane {
  position: absolute;
  inset-inline-end: var(--p);
  inset-block-start: 50%;
  translate: 50% -50%;
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--c-gold-500);
  color: #2a1b00;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: inset-inline-end .08s linear;
}
/* האייקון מצביע שמאלה, לכיוון הנסיעה */
.fl-progress__plane svg { transform: scaleX(-1); }

@media (max-width: 640px) {
  :root:has(.fl-progress) { --fl-bar-h: 28px; }
  .fl-progress { gap: var(--sp-2); padding-inline: var(--sp-3); }
  .fl-progress__from,
  .fl-progress__to { font-size: .62rem; }
  .fl-progress__plane { inline-size: 22px; block-size: 22px; }
  .fl-progress__plane svg { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-progress { display: none; }
}

/* --------------------------------------------------------------------------
   רצועת השותפים

   ‼️ הכללים כאן משכפלים את מה שכבר קיים ב-components.css, ובכוונה.

   שם הם כתובים ‎.legacy #te-main .te-strip‎. עמוד הטיסות הוא עמוד
   מיוצר ואין בו אף אחד משני האבות, ולכן חמישים הלוגואים הוצגו
   גולמיים — בלי הפס הכהה, בלי הצ׳יפים ובלי הגלילה.

   הכלל של ציון (TEAM.md סעיף 10): רכיב שדורש עוטף נושא את הסימן
   על עצמו ומקבל כלל מקביל. לא מרחיבים את הסלקטור הקיים —
   ‎.te-strip‎ מופיע גם בעמודים של אחרים.

   הכל תחת ‎.fl-supplier-strip‎ ולכן אינו יכול לדלוף מהעמוד הזה.
   -------------------------------------------------------------------------- */

.fl-supplier-strip .te-strip.section {
  position: relative;
  padding-block: var(--sp-7);
  background: linear-gradient(160deg, var(--c-navy-900) 0%, var(--c-navy-950) 60%, #06203a 100%);
  color: var(--text-on-dark);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  overflow: hidden;
}

.fl-supplier-strip .te-strip.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 120% at 15% 0%, rgba(18, 160, 179, .22), transparent 60%),
    radial-gradient(50% 110% at 85% 100%, rgba(240, 168, 26, .14), transparent 60%);
}

.fl-supplier-strip .te-strip .container { position: relative; }

.fl-supplier-strip .te-strip h2 {
  font-size: var(--fs-2xl);
  color: var(--text-on-dark);
  margin-bottom: var(--sp-2);
}

.fl-supplier-strip .te-strip > .container > p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .72);
  max-width: 60ch;
  margin-inline: auto;
}

/* --- הרצועה עצמה ---
 *
 * ‼️ 28.9 — כל כללי המרקיזה המקומיים נמחקו מכאן, וזו הייתה התקלה.
 *
 * שי, פעמיים באותו בוקר: קודם הלוגואים היו בלתי-נראים (לבן על
 * צ׳יפ לבן), ואחרי תיקון הצבע — "לא, זה שוב במסגרות. זה צריך
 * להיות בדיוק כמו בדף הבית".
 *
 * דף הבית נמדד: רקע פריט שקוף, אפס צל ואפס עיגול, לוגו לבן
 * (brightness(0) invert(1)), רווח clamp(10px,1vw,16px), משך
 * אנימציה נגזר מ---n. כל אלה מגיעים מ"מקור יחיד" —
 * legacy-patterns.css ("לוגואי רצועת השותפים — מקור יחיד"),
 * שכתוב בכוונה גם בסלקטורים לא-מסוקפים ולכן חל גם על העמוד
 * הזה, שאינו legacy.
 *
 * הסט המקביל שישב כאן (צ׳יפ לבן 166×62, gap ענק, 40s קבוע)
 * דרס את המקור היחיד בסגוליות (0,2,0) — בדיוק המלכודת של
 * css-rule-that-overrode-a-fix. מה שנשאר בקובץ הזה הוא רק מה
 * שחייב היקף מקומי: עיצוב הסקשן (te-strip מסוקף legacy
 * ב-components) וצבע שותפי-הטקסט על הפס הכהה.
 */

/*
 * הלוגואים מגיעים בצבעים שונים על רקע לבן, ולכן כל אחד יושב על
 * צ׳יפ לבן משלו — כך הרצועה אחידה על הפס הכהה.
 *
 * ‼️ 28.9 — ההנחה הזו בוטלה בהוראת שי ("בדיוק כמו בדף הבית"),
 * וכל כללי הצ׳יפ, המידות והפילטר שישבו כאן נמחקו. ההיסטוריה
 * שלהם — כולל שני סבבי המדידה מול עמוד ההעברות ותיקון
 * לבן-על-לבן — בפריט flights-partners-logos-broken בתור.
 * הרצועה מקבלת עכשיו הכל מ"מקור יחיד" (legacy-patterns) ומכללי
 * הבסיס (components) — שניהם לא-מסוקפים וחלים כאן מעצמם.
 */

/*
 * שותפים בלי קובץ לוגו מוצגים כטקסט. הסקשן כהה, וברירת המחדל
 * של קישור (נייבי) נעלמת עליו — לבן באותו משקל כמו הלוגואים.
 */
.fl-supplier-strip .partner-logo--text {
  color: rgba(255, 255, 255, .78);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.fl-supplier-strip .partner-logo--text:hover { color: #fff; }

/*
 * תנועה מופחתת: אין כאן כלל. משנמחקו כללי ה-(0,2,0) המקומיים,
 * ההתנהגות של הבית — עטיפה ל-100% והסרת המסכה — חלה כאן מעצמה,
 * ואין יותר מה שידרוס אותה. (28.9, יחד עם מחיקת הצ׳יפים.)
 */