/* ==========================================================================
   תאילנד אקספרס — Components
   ========================================================================== */

/* ==========================================================================
   כותרת עליונה
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 64px;
}
.brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.brand-name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-lg);
  color: var(--c-navy-900);
  line-height: 1.1;
}

.nav-toggle {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--c-navy-900);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle[aria-expanded="true"] .icon-menu,
.nav-toggle[aria-expanded="false"] .icon-close { display: none; }

.main-nav { display: none; }
.main-nav[data-open="true"] {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--c-white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
}
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul > li { border-bottom: 1px solid var(--border); }
.main-nav > ul > li:last-child { border-bottom: 0; }
.main-nav a {
  display: block;
  padding: var(--sp-3) 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  text-decoration: none;
  min-height: 48px;
  line-height: 1.5;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--c-sea-600); }

.header-cta { display: none; }

@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .main-nav { display: block; margin-inline-start: auto; }
  .main-nav > ul { display: flex; gap: var(--sp-1); }
  .main-nav > ul > li { border: 0; position: relative; }
  .main-nav a { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); min-height: 0; }
  .main-nav a:hover { background: var(--c-sea-050); }

  /* תפריט משנה */
  .main-nav li > ul {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 230px;
    background: var(--c-white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  }
  /*
   * ‼️ ‎:focus-within‎ השאיר תפריט פתוח אחרי לחיצה.
   *
   * שי צילם שני תפריטי משנה פתוחים בו-זמנית, מונחים זה על זה
   * ושקופים למחצה — וזה היה הריצוד שדיווח עליו.
   *
   * הסיבה: לחיצה על פריט אב משאירה את המיקוד בתוך ה-‎li‎ שלו,
   * ולכן התפריט שלו נשאר פתוח. ריחוף על פריט אחר פותח תפריט
   * שני, ושניהם מצוירים יחד. ככל שהעכבר עובר בין פריטים הם
   * נפתחים ונסגרים לסירוגין — ההבהוב.
   *
   * ‎:has(:focus-visible)‎ במקום ‎:focus-within‎: מי שמנווט
   * במקלדת עדיין מקבל את התפריט, ומי שלחץ בעכבר לא. זה בדיוק
   * ההבדל בין השניים, והוא בדיוק מה שהיה חסר כאן.
   */
  .main-nav li:hover > ul,
  .main-nav li:has(> a:focus-visible) > ul,
  .main-nav li:has(ul :focus-visible) > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /*
   * התפריט הפתוח מעל שכניו ומעל התוכן.
   *
   * בלי זה תפריט אחד נחתך על ידי השני ושניהם נראים כמו שכבה
   * אחת מבולבלת. ‎z-index‎ על ה-‎li‎ ולא על ה-‎ul‎, כי הקשר
   * הערימה נוצר אצל ההורה.
   */
  .main-nav li { position: relative; }
  .main-nav li:hover,
  .main-nav li:has(:focus-visible) { z-index: 2; }
  .main-nav li > ul { z-index: 1; }

  /*
   * השהיית סגירה קצרה.
   *
   * מעבר באלכסון מהפריט אל התפריט שמתחתיו עובר לרגע מעל פריט
   * שכן, והתפריט נסגר ונפתח. 120 מילישניות מספיקות כדי שהמעבר
   * יורגש רציף, ולא מספיקות כדי שתפריט יישאר תקוע.
   */
  .main-nav li > ul { transition-delay: 120ms; }
  .main-nav li:hover > ul,
  .main-nav li:has(:focus-visible) > ul { transition-delay: 0s; }

  .header-cta { display: inline-flex; flex-shrink: 0; }
}

/* ==========================================================================
   פירורי לחם
   ========================================================================== */
.breadcrumbs { padding-block: var(--sp-3); font-size: var(--fs-xs); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); }
.breadcrumbs li + li::before { content: "‹"; color: var(--c-ink-400); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-sea-600); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* ==========================================================================
   הירו — מונחה תמונה, לא גרדיאנט סגול
   ========================================================================== */
.hero { position: relative; isolation: isolate; background: var(--c-navy-900); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(4, 24, 46, 0.94) 0%,
    rgba(4, 24, 46, 0.72) 42%,
    rgba(4, 24, 46, 0.38) 100%);
}
.hero__inner {
  padding-block: clamp(var(--sp-9), 12vw, var(--sp-12));
  color: rgba(255, 255, 255, 0.9);
  max-width: 62ch;
}
.hero h1 { color: var(--text-on-dark); font-size: var(--fs-5xl); margin-bottom: var(--sp-4); }
.hero__lede { font-size: var(--fs-lg); line-height: var(--lh-normal); margin-bottom: var(--sp-6); }
.hero__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-gold-500);
  margin-bottom: var(--sp-3);
}
.hero .btn-row { margin-bottom: var(--sp-5); }

/* רצועת עובדות מתחת להירו */
.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-sm);
}
.hero__fact { display: flex; flex-direction: column; gap: 2px; }
.hero__fact dt { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-sea-200); }
.hero__fact dd { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-on-dark); font-size: var(--fs-md); }

/* הירו קומפקטי לעמודי תוכן */
/*
 * הירו של עמוד פנימי — גובה מרוסן.
 * ‎8vw‎ על מסך רחב נתן הירו בגובה חצי מסך לכל עמוד באתר, כך שהתוכן
 * עצמו התחיל רק אחרי גלילה. הגולש הגיע לעמוד כדי לראות תוכן.
 */
.hero--compact .hero__inner { padding-block: clamp(var(--sp-6), 4.5vw, var(--sp-8)); }
.hero--compact h1 { font-size: var(--fs-3xl); }

/* ==========================================================================
   כרטיסים — וריאנטים מובחנים, לא כרטיס אחיד בכל מקום
   ========================================================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.card:hover { border-color: var(--c-sea-200); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: #eceff3; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* כל הכרטיס לחיץ */
.card { position: relative; }
.card__text { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.card__foot { margin-top: auto; padding-top: var(--sp-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.card__price { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--c-navy-800); }
.card__price small { font-weight: var(--fw-regular); color: var(--text-muted); font-size: var(--fs-2xs); }

/* כרטיס רחב — שובר את הגריד */
.card--feature { }
@media (min-width: 760px) {
  .card--feature { flex-direction: row; grid-column: 1 / -1; }
  .card--feature .card__media { aspect-ratio: auto; flex: 0 0 44%; }
  .card--feature .card__body { padding: var(--sp-6) var(--sp-7); justify-content: center; }
  .card--feature .card__title { font-size: var(--fs-2xl); }
}

/* ==========================================================================
   טבלת מחירים — הרכיב הקריטי. העובדות חייבות להיות קריאות
   ========================================================================== */
.pricing { margin-block: var(--sp-6); }
.pricing__note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--sp-3);
  padding-inline-start: var(--sp-3);
  border-inline-start: 3px solid var(--c-gold-200);
}

.price-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.price-table caption {
  text-align: start;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--text-strong);
  margin-bottom: var(--sp-3);
}
.price-table th, .price-table td {
  padding: var(--sp-3);
  text-align: start;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.price-table thead th {
  background: var(--c-navy-900);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-bottom: 0;
}
.price-table thead th:first-child { border-start-start-radius: var(--r-sm); }
.price-table thead th:last-child  { border-start-end-radius: var(--r-sm); }
.price-table tbody tr:nth-child(even) { background: rgba(18, 160, 179, 0.04); }
.price-table .price {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--c-navy-800);
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* בנייד: כל שורה הופכת לכרטיס — אין גלילה אופקית */
@media (max-width: 719px) {
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .price-table tr {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
    background: var(--bg-card);
    overflow: hidden;
  }
  .price-table tbody tr:nth-child(even) { background: var(--bg-card); }
  .price-table td { border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); }
  .price-table td:last-child { border-bottom: 0; }
  .price-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
}

/* כרטיס מחיר בודד */
.price-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  background: var(--bg-card);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.price-card--highlight { border-color: var(--c-gold-500); border-width: 2px; background: var(--c-gold-050); }
.price-card__label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--text-strong); }
.price-card__amount { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-2xl); color: var(--c-navy-800); direction: ltr; unicode-bidi: isolate; }
.price-card__meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   כלול / לא כלול — עובדות עסקיות קריטיות
   ========================================================================== */
.inclusions { display: grid; gap: var(--sp-5); margin-block: var(--sp-6); }
@media (min-width: 760px) { .inclusions { grid-template-columns: 1fr 1fr; } }

.inclusion-list { border-radius: var(--r-md); padding: var(--sp-5); border: 1px solid var(--border); background: var(--bg-card); }
.inclusion-list h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.inclusion-list ul { list-style: none; padding: 0; margin: 0; }
.inclusion-list li { position: relative; padding-inline-start: var(--sp-6); margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.inclusion-list li:last-child { margin-bottom: 0; }
.inclusion-list li::before {
  position: absolute;
  inset-inline-start: 0; top: 0.1em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}
.inclusion-list--yes { border-inline-start: 4px solid var(--c-success); }
.inclusion-list--yes li::before { content: "✓"; color: var(--c-success); }
.inclusion-list--no { border-inline-start: 4px solid var(--c-ink-400); }
.inclusion-list--no li::before { content: "✕"; color: var(--c-ink-400); }

/* ==========================================================================
   שאלות נפוצות
   ========================================================================== */
.faq { margin-block: var(--sp-6); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--text-strong);
  list-style: none;
  min-height: 48px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  transition: transform var(--dur-mid) var(--ease);
}
.faq__item[open] summary::after { content: "−"; transform: rotate(180deg); }
.faq__answer { padding-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--text-body); }

/* ==========================================================================
   תוכן עשיר — מה שמגיע מהעמוד הישן
   ========================================================================== */
.prose { max-width: 76ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-8); font-size: var(--fs-2xl); }
.prose h3 { margin-top: var(--sp-6); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose img { border-radius: var(--r-md); margin-block: var(--sp-5); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-block: var(--sp-5); }
.prose th, .prose td { padding: var(--sp-3); border: 1px solid var(--border); text-align: start; }
.prose th { background: var(--c-sea-050); font-family: var(--font-display); font-weight: var(--fw-bold); }
.prose blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-inline-start: 4px solid var(--c-gold-500);
  background: var(--c-gold-050);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* ==========================================================================
   קריאה לפעולה
   ========================================================================== */
.cta-band {
  background: var(--c-navy-900);
  color: rgba(255, 255, 255, 0.88);
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-6), 5vw, var(--sp-8));
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 860px) {
  .cta-band { grid-template-columns: 1.6fr auto; align-items: center; }
}
.cta-band h2 { color: var(--text-on-dark); font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.cta-band p { margin: 0; }

/* כפתור וואטסאפ צף — נייד בלבד */
.wa-float {
  position: fixed;
  inset-inline-end: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-sticky);
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: #25d366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}
.wa-float svg { width: 30px; height: 30px; }
@media (min-width: 1000px) { .wa-float { inset-inline-end: var(--sp-6); bottom: var(--sp-6); } }

/* ==========================================================================
   כותרת תחתונה
   ========================================================================== */
.site-footer {
  background: var(--c-navy-950);
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-sm);
}
.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 720px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer h3 {
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.site-footer a:hover { color: var(--c-sea-200); text-decoration: underline; }
.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   באנר סטייג'ינג — לא יופיע בפרודקשן
   ========================================================================== */
.staging-flag {
  background: repeating-linear-gradient(45deg, #b3261e, #b3261e 12px, #8f1e18 12px, #8f1e18 24px);
  color: #fff;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  padding: var(--sp-2) var(--sp-4);
  letter-spacing: var(--ls-wide);
}

/* ==========================================================================
   סרגל טלפונים עליון — כמו באתר הקיים
   ========================================================================== */
.call-bar { display: flex; flex-wrap: wrap; }
.call-link {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
  color: #fff;
  min-height: 52px;
  transition: filter var(--dur-fast) var(--ease);
}
.call-link:hover { filter: brightness(1.08); color: #fff; }
.call-link--th { background: #1aa260; }   /* ירוק — שיחה מתאילנד */
.call-link--il { background: #4fb3e8; }   /* תכלת — שיחת חינם מישראל */

.call-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.call-text { display: flex; flex-direction: column; line-height: 1.2; }
.call-primary { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.call-number  { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); direction: ltr; unicode-bidi: isolate; }

@media (max-width: 520px) {
  .call-link { padding: var(--sp-2) var(--sp-3); min-height: 46px; }
  .call-primary { font-size: var(--fs-3xs); }
  .call-number { font-size: var(--fs-xs); }
}

/* קו הדגשה כתום על פריט הניווט הפעיל */
.main-nav a[aria-current="page"] {
  position: relative;
  color: var(--c-gold-600);
}
@media (min-width: 1000px) {
  .main-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--sp-3);
    bottom: -2px;
    height: 3px;
    border-radius: var(--r-full);
    background: var(--c-gold-500);
  }
}

/* ==========================================================================
   סקשן השארת פרטים
   ========================================================================== */
/*
 * צבעי הטופס נגזרים מלוח הצבעים של האתר ולא מכתום עצמאי.
 * הכתום ‎#e2600f‎ לא קיים בשום מקום אחר, והטופס יצא נראה כמו רכיב
 * מודבק מאתר אחר. הזהב והנייבי הם אותם ערכים שהכפתורים והכותרת
 * משתמשים בהם, כך שהטופס יושב בתוך העמוד ולא לידו.
 */
:root {
  --c-cta-600: var(--c-gold-500);
  --c-cta-700: var(--c-gold-600);
  --c-cta-ink: var(--c-navy-950);   /* טקסט על גבי הזהב */
}

.lead-section { background: var(--c-surface); }

.lead-card {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(var(--sp-5), 4vw, var(--sp-8));
  max-width: 820px;
  margin-inline: auto;
}

.lead-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-sea-600);
  margin-bottom: var(--sp-2);
}
.lead-title { font-size: var(--fs-3xl); margin-bottom: var(--sp-2); }
.lead-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); max-width: none; }

/* בורר מצב טיסה */
.lead-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  border: 0; padding: 0; margin: 0 0 var(--sp-5);
}
@media (min-width: 720px) { .lead-choice { grid-template-columns: repeat(3, 1fr); } }

.lead-opt {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  background: var(--c-white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  min-height: 52px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.lead-opt:hover { border-color: var(--c-sea-500); color: var(--c-sea-600); background: var(--c-sea-050); }
.lead-opt.is-active {
  background: var(--c-navy-800);
  border-color: var(--c-navy-800);
  color: var(--text-on-dark);
  box-shadow: 0 8px 20px -8px rgba(11, 58, 94, .55);
}

/* שדות */
.lead-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 720px) { .lead-grid { grid-template-columns: 1fr 1fr; } }

.lead-field label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-bottom: var(--sp-2);
}
.lead-field input,
.lead-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text-strong);
  background: var(--c-white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  min-height: 50px;
}
.lead-field input:focus,
.lead-field textarea:focus {
  border-color: var(--c-sea-500);
  outline: 2px solid rgba(18, 160, 179, .3);
  outline-offset: 1px;
}
.lead-field textarea { min-height: 96px; resize: vertical; }

/* פרטים נוספים */
.lead-more-toggle {
  display: inline-block;
  margin-top: var(--sp-4);
  background: none; border: 0; padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.lead-more-toggle:hover { color: var(--c-sea-600); }
.lead-more { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }

/* הסכמה */
.lead-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.lead-consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--c-sea-600); }
.lead-consent a { color: var(--text-body); }

/* פעולות */
.lead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.lead-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-cta-ink);
  background: var(--c-cta-600);
  border: 0;
  border-radius: var(--r-full);
  padding: var(--sp-3) var(--sp-6);
  min-height: 52px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lead-submit:hover { background: var(--c-cta-700); color: var(--c-cta-ink); transform: translateY(-1px); }
.lead-submit:disabled { opacity: .7; cursor: default; transform: none; }
.lead-submit svg { transform: scaleX(-1); }   /* חץ השליחה פונה לכיוון הקריאה */

.lead-alt { font-size: var(--fs-sm); color: var(--text-muted); }
.lead-alt a { color: var(--c-sea-600); font-weight: var(--fw-semibold); }

.lead-status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(23, 121, 74, .1);
  border: 1px solid var(--c-success);
  color: var(--c-success);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   כותרת עליונה — מבנה תואם לאתר הקיים
   שורה כהה אחת: לוגו בקצה, ניווט במרכז, בלוקי טלפון קומפקטיים בקצה השני.
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-navy-900);
  backdrop-filter: none;
  border-bottom: 0;
}
.header-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  min-height: 72px;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; flex-shrink: 0;
}
.brand-mark {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: var(--c-sea-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-md);
  letter-spacing: .5px;
}
.brand-name { color: #fff; font-size: var(--fs-sm); line-height: 1.15; }

.nav-toggle {
  margin-inline-start: auto;
  align-self: center;
  background: none;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}

/* בלוקי הטלפון — קומפקטיים, לא על כל הרוחב */
.call-bar { display: none; margin-inline-start: auto; align-items: stretch; flex-shrink: 0; }
.call-link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none; color: #fff;
  transition: filter var(--dur-fast) var(--ease);
}
.call-link:hover { filter: brightness(1.08); color: #fff; }
.call-link--th { background: #1aa260; }
.call-link--il { background: #4fb3e8; }
.call-icon {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.22);
  flex-shrink: 0;
}
.call-text { display: flex; flex-direction: column; line-height: 1.15; }
.call-primary { font-family: var(--font-display); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); }
.call-number  { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); direction: ltr; unicode-bidi: isolate; }

/* ניווט על רקע כהה */
.main-nav a { color: rgba(255,255,255,.9); }
.main-nav a:hover { color: var(--c-gold-500); background: transparent; }
.main-nav a[aria-current="page"] { color: var(--c-gold-500); }

@media (min-width: 1100px) {
  .call-bar { display: flex; }
  .main-nav { margin-inline-start: auto; align-self: center; }
  .main-nav > ul { gap: var(--sp-2); }
  .main-nav li > ul { background: var(--c-navy-900); border-color: rgba(255,255,255,.15); }
  .main-nav li > ul a { color: rgba(255,255,255,.9); }
  .main-nav li > ul a:hover { color: var(--c-gold-500); }
}
@media (max-width: 1099px) {
  .main-nav[data-open="true"] { background: var(--c-navy-900); border-bottom: 1px solid rgba(255,255,255,.15); }
  .main-nav > ul > li { border-bottom-color: rgba(255,255,255,.12); }
}
/* בנייד: בלוקי הטלפון יורדים מתחת לכותרת ברצועה */
@media (max-width: 1099px) {
  .site-header + .call-bar-mobile { display: flex; }
}

/* ==========================================================================
   כותרת — גרסה סופית: רצועת טלפונים מלאה למעלה, כותרת לבנה מתחת
   (מחליף את הגרסה הכהה שמעל)
   ========================================================================== */
.call-bar {
  display: flex;
  flex-wrap: wrap;
  margin-inline-start: 0;
  width: 100%;
}
.call-link { flex: 1 1 240px; justify-content: center; padding: var(--sp-2) var(--sp-4); min-height: 46px; }

.site-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner { min-height: 60px; }

.brand-logo { width: 46px; height: 46px; border-radius: var(--r-full); object-fit: contain; }
.brand-name { color: var(--c-navy-900); font-size: var(--fs-xs); font-weight: var(--fw-black); }

.nav-toggle { border-color: var(--border); color: var(--c-navy-900); }

/* ניווט על רקע בהיר */
.main-nav a { color: var(--c-navy-900); font-size: var(--fs-xs); }
.main-nav a:hover { color: var(--c-gold-600); background: var(--c-gold-050); }
.main-nav a[aria-current="page"] { color: var(--c-gold-600); }

@media (min-width: 1100px) {
  .main-nav li > ul { background: var(--c-white); border-color: var(--border); }
  .main-nav li > ul a { color: var(--c-navy-900); }
}
@media (max-width: 1099px) {
  .main-nav[data-open="true"] { background: var(--c-white); border-bottom: 1px solid var(--border); }
  .main-nav > ul > li { border-bottom-color: var(--border); }
}

/* תוכן צפוף יותר — פחות גלילה */
.legacy .section,
.legacy .content-section { padding-block: clamp(var(--sp-6), 3vw, var(--sp-8)); }
.legacy h2 { margin-top: var(--sp-6); }
.legacy p { font-size: var(--fs-sm); }
.lead-card { padding: clamp(var(--sp-5), 3vw, var(--sp-6)); }

/* ==========================================================================
   סרגל טלפונים — רקע כחול, כפתורים לבנים
   (מחליף את גרסת הבלוקים הירוק/תכלת שמעל)
   ========================================================================== */
.call-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  width: 100%;
  background: linear-gradient(90deg, var(--c-navy-950), var(--c-navy-800));
  padding: var(--sp-2) var(--gutter);
}

.call-link {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  min-height: 42px;
  background: #fff;
  color: var(--c-navy-900);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--r-full);
  text-decoration: none;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .35);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.call-link:hover {
  color: var(--c-navy-950);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .45);
  background: #fff;
}
.call-link--th, .call-link--il { background: #fff; }

/* אייקון עגול צבעוני — ירוק לתאילנד, תכלת לישראל */
.call-icon {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  color: #fff;
}
.call-link--th .call-icon { background: #1aa260; }
.call-link--il .call-icon { background: #2f8fd4; }

.call-text { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.call-primary {
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.call-number {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--c-navy-900);
  direction: ltr; unicode-bidi: isolate;
}

@media (max-width: 560px) {
  .call-bar { justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .call-link { flex: 1 1 auto; justify-content: center; padding: var(--sp-2) var(--sp-3); }
  .call-primary { display: none; }   /* בנייד משאירים את המספר בלבד */
  .call-number { font-size: var(--fs-sm); }
}

/* ==========================================================================
   סקשן לידים — פרופורציות הדוקות
   ========================================================================== */
.lead-card { max-width: 660px; padding: clamp(var(--sp-4), 2.5vw, var(--sp-6)); }
.lead-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-1); }
.lead-sub { font-size: var(--fs-xs); margin-bottom: var(--sp-4); }
.lead-eyebrow { font-size: var(--fs-3xs); margin-bottom: var(--sp-1); }

.lead-choice { gap: var(--sp-2); margin-bottom: var(--sp-4); }
.lead-opt { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); min-height: 44px; }

.lead-grid { gap: var(--sp-3); }
.lead-field label { font-size: var(--fs-xs); margin-bottom: var(--sp-1); }
.lead-field input, .lead-field textarea { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); min-height: 42px; }
.lead-field textarea { min-height: 76px; }

.lead-more-toggle { margin-top: var(--sp-3); font-size: var(--fs-xs); }
.lead-more { gap: var(--sp-3); margin-top: var(--sp-3); }

.lead-consent { margin-top: var(--sp-4); font-size: var(--fs-3xs); }
.lead-consent input { width: 17px; height: 17px; }

.lead-actions { margin-top: var(--sp-4); }
.lead-submit { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-5); min-height: 46px; }
.lead-alt { font-size: var(--fs-xs); }

/* ==========================================================================
   כותרת מאוחדת — רצועה כחולה אחת: טלפונים, לוגו וניווט
   (מבטל את הרצועה הלבנה הנפרדת)
   ========================================================================== */
.call-bar {
  background: var(--c-navy-950);
  padding-block: var(--sp-2) 0;
  border-bottom: 0;
}

.site-header {
  background: linear-gradient(90deg, var(--c-navy-950), var(--c-navy-800));
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.brand-name { color: #fff; }
.brand-logo {
  background: #fff;
  padding: 2px;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .5);
}

.nav-toggle {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}

/* ניווט: לבן, כתום בריחוף ובפריט הפעיל */
.main-nav a { color: #fff; }
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--c-gold-500); background: transparent; }
.main-nav a[aria-current="page"] { color: var(--c-gold-500); }

@media (min-width: 1100px) {
  .main-nav li > ul {
    background: var(--c-navy-900);
    border-color: rgba(255, 255, 255, .15);
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .6);
  }
  .main-nav li > ul a { color: rgba(255, 255, 255, .92); }
  .main-nav li > ul a:hover { color: var(--c-gold-500); background: rgba(255, 255, 255, .06); }
}
@media (max-width: 1099px) {
  .main-nav[data-open="true"] {
    background: var(--c-navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }
  .main-nav > ul > li { border-bottom-color: rgba(255, 255, 255, .12); }
}

/* פירורי לחם על רקע כהה כשהם צמודים לכותרת */
.breadcrumbs { background: var(--c-surface); }

/* ==========================================================================
   "הוספת פרטים" — אקורדיון אמיתי
   display:grid דרס את התכונה hidden, ולכן השדות הופיעו תמיד פתוחים.
   ========================================================================== */
.lead-more[hidden] { display: none !important; }

.lead-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--c-navy-800);
  border: 1px dashed var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  min-height: 40px;
}
.lead-more-toggle:hover { color: var(--c-cta-600); border-color: var(--c-cta-600); }
.lead-more-toggle::after {
  content: "";
  width: 8px; height: 8px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.lead-more-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }

.lead-more {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--sp-4);
}

/* ---------- "הוספת פרטים": קישור פשוט, כמו בעיצוב המקור ---------- */
.lead-more-toggle {
  border: 0;
  padding: 0;
  min-height: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: .22em;
  color: var(--text-body);
  font-weight: var(--fw-semibold);
}
.lead-more-toggle::after { content: none; }
.lead-more-toggle:hover { color: var(--c-cta-600); border: 0; }
.lead-more { border: 0; background: none; padding: 0; }

/* ==========================================================================
   כרטיסי טיולים ואטרקציות
   ========================================================================== */
.tour-section { background: var(--c-surface); }

.tour-filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.tour-filter {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  min-height: 38px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.tour-filter:hover { border-color: var(--c-cta-600); color: var(--c-cta-600); }
.tour-filter.is-active {
  background: var(--c-navy-900);
  border-color: var(--c-navy-900);
  color: #fff;
}

.tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--sp-4);
}

.tour-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}
a.tour-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-cta-600);
  box-shadow: var(--shadow-lg);
}
.tour-card[hidden] { display: none; }

.tour-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: #eceff3; }
.tour-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
a.tour-card:hover .tour-card__media img { transform: scale(1.06); }
.tour-card__media--none {
  background: linear-gradient(135deg, var(--c-sea-050), var(--c-gold-050));
  aspect-ratio: 3 / 2;
}

.tour-card__body {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  flex: 1;
}
.tour-card__type {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--c-sea-600);
  background: var(--c-sea-050);
  border-radius: var(--r-full);
  padding: 2px var(--sp-2);
}
.tour-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  margin: 0;
}
.tour-card__note { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }

.tour-card__foot {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.tour-card__price {
  display: inline-flex; flex-direction: column;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: #fff;
  background: var(--c-cta-600);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  direction: ltr; unicode-bidi: isolate;
  line-height: 1.25;
}
.tour-card__price small { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); opacity: .92; }
.tour-card__rating {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-gold-600);
  direction: ltr; unicode-bidi: isolate;
}

/* ==========================================================================
   כותרת סופית — סרגל אחד: לוגו, ניווט וטלפונים על אותו רקע
   ========================================================================== */
.site-header {
  background: linear-gradient(90deg, var(--c-navy-950), var(--c-navy-800));
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 64px;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* הסרגל כבר לא רצועה נפרדת — רק קבוצת כפתורים בקצה */
.call-bar {
  display: none;
  width: auto;
  background: none;
  padding: 0;
  margin-inline-start: auto;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.call-link {
  padding: var(--sp-1) var(--sp-3);
  min-height: 38px;
  gap: var(--sp-2);
  box-shadow: none;
  border-color: rgba(255, 255, 255, .35);
}
.call-icon { width: 24px; height: 24px; }
.call-primary { font-size: 10px; }
.call-number { font-size: var(--fs-3xs); }

.main-nav { margin-inline-start: 0; }

@media (min-width: 1200px) {
  .call-bar { display: flex; }
  .main-nav { margin-inline-start: var(--sp-5); }
  .main-nav > ul { gap: 2px; }
  .main-nav a { padding: var(--sp-2); font-size: var(--fs-3xs); }
}

/* מתחת ל-1200: הטלפונים יורדים לרצועה משלהם מתחת לכותרת */
@media (max-width: 1199px) {
  .site-header + .call-bar,
  .header-inner .call-bar { display: none; }
  .nav-toggle { margin-inline-start: auto; }
}

/* ==========================================================================
   כוונון גודל טקסט — העלאה קלה אחרי ההקטנה הגורפת
   ========================================================================== */
@media (min-width: 1200px) {
  .main-nav a { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); }
}
.brand-name { font-size: var(--fs-sm); }
.call-primary { font-size: var(--fs-3xs); }
.call-number { font-size: var(--fs-xs); }

.legacy p,
.legacy li { font-size: var(--fs-md); }
.legacy [class$="-description"],
.legacy [class$="-desc"],
.legacy [class$="-text"] { font-size: var(--fs-sm); }
.tour-card__title { font-size: var(--fs-lg); }
.tour-card__price { font-size: var(--fs-md); }
.lead-field input, .lead-field textarea { font-size: var(--fs-md); }
.lead-opt { font-size: var(--fs-sm); }

/* ==========================================================================
   ניווט — פריט בשורה אחת
   "מלונות מומלצים" נשבר לשתי שורות ושיבר את גובה הסרגל.
   ========================================================================== */
@media (min-width: 1200px) {
  .main-nav a {
    white-space: nowrap;
    font-size: var(--fs-2xs);
    padding: var(--sp-2) var(--sp-2);
  }
  .main-nav > ul { gap: 0; flex-wrap: nowrap; }
  .header-inner { gap: var(--sp-3); }
  .call-link { padding: var(--sp-1) var(--sp-2); }
  .call-number { font-size: var(--fs-3xs); }
}
@media (min-width: 1440px) {
  .main-nav a { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); }
  .call-number { font-size: var(--fs-2xs); }
}

/* ==========================================================================
   ניווט ראשי — אינטראקציה
   --------------------------------------------------------------------------
   קו מתחת שנפתח מהמרכז החוצה, הארה עדינה מאחורי הטקסט, והרמה של פיקסל.
   שלושת האפקטים רצים יחד על אותו עקום האטה, כך שזה נקרא כתנועה אחת.
   ========================================================================== */
@media (min-width: 1200px) {
  .main-nav > ul > li > a {
    position: relative;
    isolation: isolate;
    display: inline-block;
    transition: color var(--dur-mid) var(--ease),
                transform var(--dur-mid) var(--ease);
  }

  /* הארה רכה מאחורי הטקסט */
  .main-nav > ul > li > a::before {
    content: "";
    position: absolute;
    inset: 4px -2px;
    z-index: -1;
    border-radius: var(--r-sm);
    background: radial-gradient(60% 120% at 50% 100%,
                rgba(240, 168, 26, .28) 0%,
                rgba(240, 168, 26, 0) 70%);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--dur-mid) var(--ease),
                transform var(--dur-mid) var(--ease);
  }

  /* הקו: נפתח מהמרכז לשני הכיוונים */
  .main-nav > ul > li > a::after {
    content: "";
    position: absolute;
    inset-inline: 50%;
    bottom: 2px;
    height: 2px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg,
                rgba(240, 168, 26, 0),
                var(--c-gold-500) 22%,
                #ffd97a 50%,
                var(--c-gold-500) 78%,
                rgba(240, 168, 26, 0));
    transition: inset-inline var(--dur-mid) var(--ease);
  }

  .main-nav > ul > li > a:hover,
  .main-nav > ul > li > a:focus-visible {
    color: var(--c-gold-500);
    transform: translateY(-1px);
  }
  .main-nav > ul > li > a:hover::after,
  .main-nav > ul > li > a:focus-visible::after,
  .main-nav > ul > li:focus-within > a::after { inset-inline: 6px; }

  .main-nav > ul > li > a:hover::before,
  .main-nav > ul > li > a:focus-visible::before { opacity: 1; transform: translateY(0); }

  /* פריט פעיל — קו קבוע, עדין יותר מאשר בריחוף */
  .main-nav > ul > li > a[aria-current="page"] { color: var(--c-gold-500); }
  .main-nav > ul > li > a[aria-current="page"]::after {
    inset-inline: 8px;
    background: var(--c-gold-500);
    opacity: .75;
  }

  /* חץ עדין לפריט עם תפריט משנה */
  .main-nav > ul > li:has(ul) > a { padding-inline-end: var(--sp-4); }
  .main-nav > ul > li:has(ul) > a::first-line { }
  .main-nav > ul > li:has(ul) > a > span.caret,
  .main-nav > ul > li:has(ul) > a::marker { display: none; }

  /* תפריט משנה — נכנס ברכות */
  .main-nav li > ul {
    padding: var(--sp-2);
    border-radius: var(--r-md);
    transform: translateY(-8px) scale(.98);
    transition: opacity var(--dur-mid) var(--ease),
                transform var(--dur-mid) var(--ease),
                visibility var(--dur-mid);
  }
  .main-nav li:hover > ul,
  .main-nav li:focus-within > ul { transform: translateY(0) scale(1); }
  .main-nav li > ul a {
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                padding-inline-start var(--dur-fast) var(--ease);
  }
  .main-nav li > ul a:hover {
    background: rgba(240, 168, 26, .12);
    color: var(--c-gold-500);
    padding-inline-start: var(--sp-4);
  }
}

/* כפתורי הטלפון — משוב מגע עדין */
.call-link { position: relative; overflow: hidden; }
.call-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(240,168,26,0), rgba(240,168,26,.18), rgba(240,168,26,0));
  transform: translateX(-120%);
  transition: transform 600ms var(--ease);
}
.call-link:hover::after { transform: translateX(120%); }

/* הלוגו — סיבוב זעיר בריחוף */
.brand-logo { transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); }
.brand:hover .brand-logo { transform: rotate(-4deg) scale(1.04); box-shadow: 0 6px 18px -4px rgba(240,168,26,.5); }
.brand-name { transition: color var(--dur-fast) var(--ease); }
.brand:hover .brand-name { color: var(--c-gold-500); }

/* ==========================================================================
   עמוד מלון
   ========================================================================== */
.hotel-page { padding-block: var(--sp-6); }

.hotel-page__head { margin-bottom: var(--sp-5); }
.hotel-page__category {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--c-navy-900);
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-2);
}
.hotel-page h1 { margin-bottom: var(--sp-2); }
.hotel-page__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-size: 0.82rem; color: var(--text-muted);
}
.hotel-page__stars {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;
  color: var(--c-gold-500);
  letter-spacing: .08em;
  direction: ltr; unicode-bidi: isolate;
}
.hotel-page__score {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--c-navy-900);
  background: var(--c-gold-200);
  border-radius: var(--r-sm);
  padding: 2px var(--sp-2);
  direction: ltr; unicode-bidi: isolate;
}

.hotel-page__media {
  margin: 0 0 var(--sp-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #eceff3;
}
.hotel-page__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.hotel-page__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.hotel-page__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }

.hotel-page__body { max-width: 72ch; }
.hotel-page__lede { font-size: 0.95rem; line-height: 1.75; color: var(--text-body); }

.hotel-page__features h2,
.hotel-page__note h2,
.hotel-page__related h2 { font-size: 1.1rem; margin-top: var(--sp-6); margin-bottom: var(--sp-3); }

.hotel-page__features ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.hotel-page__features li {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  color: var(--c-sea-600);
  background: var(--c-sea-050);
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  margin: 0;
}

.hotel-page__note {
  background: var(--c-gold-050);
  border: 1px solid var(--c-gold-200);
  border-inline-start: 4px solid var(--c-gold-500);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-top: var(--sp-5);
}
.hotel-page__note h2 { margin-top: 0; }
.hotel-page__note p { font-size: 0.85rem; margin: 0; }
/* שתי פסקאות בקופסה הזהובה נדבקות זו לזו בלי זה */
.hotel-page__note p + p { margin-top: var(--sp-3); }

.hotel-page__related { margin-top: var(--sp-7); }

/* ---------- גוף העמוד: הסבר, התאמה, חדרים ותהליך ---------- */
.hotel-page__intro h2,
.hotel-page__fit h2,
.hotel-page__rooms h2,
.hotel-page__how h2,
.hotel-page__nearby h2,
.hotel-page__guide h2 { font-size: 1.1rem; margin-top: var(--sp-6); margin-bottom: var(--sp-3); }

.hotel-page__intro p,
.hotel-page__fit p,
.hotel-page__rooms p,
.hotel-page__nearby p,
.hotel-page__guide p { font-size: 0.9rem; line-height: 1.75; color: var(--text-body); margin: 0 0 var(--sp-3); }

.hotel-page__rooms ul,
.hotel-page__how ul {
  margin: 0 0 var(--sp-4);
  padding-inline-start: var(--sp-5);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-body);
}
.hotel-page__rooms li,
.hotel-page__how li { margin-bottom: var(--sp-1); }

/* כיתוב שמבהיר שהתמונה היא של היעד ולא של המלון — חייב להיקרא, לא להסתתר */
.hotel-page__media-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-neutral-050, #f6f7f9);
}

/* ---------- אינדקס מלונות ---------- */
.hotel-index { padding-block: var(--sp-6); }
.hotel-index__lede { font-size: 0.9rem; color: var(--text-muted); max-width: 70ch; margin-bottom: var(--sp-6); }
.hotel-index__group { margin-bottom: var(--sp-7); }
.hotel-index__group h2 { font-size: 1.15rem; margin-bottom: var(--sp-3); }

/* ---------- כפתור בכרטיס מלון ---------- */
.legacy .hotel-card__cta,
.hotel-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  align-self: stretch;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--c-navy-800);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  min-height: 40px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.legacy .hotel-card__cta:hover,
.hotel-card__cta:hover { background: var(--c-gold-500); color: var(--c-navy-950); }

/* ==========================================================================
   בלוק "קשור" — הלולאה שממשיכה את הגלילה
   ========================================================================== */
.related { background: var(--c-surface); }
.related__block { margin-bottom: var(--sp-6); }
.related__block:last-child { margin-bottom: 0; }
.related__block h2 { font-size: 1.05rem; margin-bottom: var(--sp-3); }

.related-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.related-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  color: var(--c-navy-800);
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  min-height: 40px;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
}
.related-chip:hover {
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
  color: var(--c-navy-950);
  transform: translateY(-1px);
}

/* ==========================================================================
   תמונות חשופות בתוכן — תקרת גובה
   תמונה בלי מחלקה תפסה 669px ודחפה את כל העמוד.
   ========================================================================== */
.legacy > img,
.legacy p > img,
.legacy div > img:only-child:not([class]) {
  max-height: 420px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--r-md);
}

/* ==========================================================================
   גלולת מחיר — שורה אחת, בלי שבירה על הסימן ฿
   --------------------------------------------------------------------------
   "2,500 ฿" נשבר לשתי שורות כי הרווח לפני הסימן נחשב נקודת שבירה.
   ========================================================================== */
.tour-card__price,
.tour-card__price * {
  white-space: nowrap;
}
.tour-card__price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.3;
  padding: var(--sp-1) var(--sp-3);
  text-align: start;
}
.tour-card__price small {
  display: block;
  font-size: 0.66rem;
  opacity: .95;
  white-space: nowrap;
}

/* תחתית הכרטיס — המחיר לא נדחס והדירוג לא נדחף החוצה */
.tour-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: nowrap;
}
.tour-card__rating { flex-shrink: 0; white-space: nowrap; }
.tour-card__enquire {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: var(--fw-semibold);
  color: var(--c-sea-600);
  white-space: nowrap;
}

/* כרטיס צר מדי לשתי עמודות — המחיר עובר לשורה משלו */
@container (max-width: 210px) {
  .tour-card__foot { flex-wrap: wrap; }
}

/* ==========================================================================
   עמוד בהכנה — כרטיסים אמיתיים במקום קישורים בתיבות ריקות
   ========================================================================== */
.stub { padding-block: var(--sp-5); }
.stub__note {
  background: var(--c-gold-050);
  border: 1px solid var(--c-gold-200);
  border-inline-start: 4px solid var(--c-gold-500);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  max-width: 72ch;
}
.stub__note h2 { font-size: 1.05rem; margin: 0 0 var(--sp-2); }
.stub__note p { font-size: 0.85rem; color: var(--text-body); margin-bottom: var(--sp-4); }
.stub__heading { font-size: 1.05rem; margin-bottom: var(--sp-3); }

/* ==========================================================================
   סרגל נגישות
   ========================================================================== */
.a11y-toggle {
  position: fixed;
  inset-inline-start: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-sticky);
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: var(--c-navy-800);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.a11y-toggle:hover { background: var(--c-gold-500); color: var(--c-navy-950); transform: translateY(-2px); }

/* ---------------------------------------------------------------- חזרה לראש
 *
 * ‼️ הכפתור הזה הגיע מוורדפרס **בלי שום כלל CSS משלנו.**
 *
 * מדדתי אותו ב-‎/יעדים/פוקט‎ ברוחב 375 וקיבלתי את ברירות המחדל
 * של הדפדפן, מילה במילה:
 *
 *     26x21           גודל
 *     border          2px outset rgb(0,0,0)
 *     background      rgb(240,240,240)
 *     position        static
 *     padding         1px 6px
 *
 * כלומר כפתור אפור עם מסגרת משופעת בסגנון תשעים, יושב **בתוך
 * זרימת התוכן** ולא מקובע בפינה כמו שכפתור "חזרה לראש" אמור.
 * ‎polish.js‎ נגע בו רק כדי לתת לו ‎aria-label‎ — הוא טיפל
 * בנגישות ולא בעיצוב, ובצדק, כי זה לא תפקידו.
 *
 * זו אינה תקלת נייד. הוא נראה כך בכל רוחב, ולכן הכלל כאן ולא
 * ב-‎mobile.css‎.
 *
 * ‼️ ולמה זו העתקה של ‎.a11y-toggle‎ ולא עיצוב חדש: יש כבר דפוס
 * בית לכפתור אייקון עגול מקובע, והוא 48x48. המצאת וריאנט שני
 * הייתה יוצרת שני כפתורים עגולים שנראים כמעט אותו דבר.
 * ‎inset-inline-end‎ ולא ‎start‎ כדי שלא יתנגש בכפתור הנגישות.
 */
.back-to-top {
  position: fixed;
  inset-inline-end: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-sticky);
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: var(--c-navy-800);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.back-to-top:hover { background: var(--c-gold-500); color: var(--c-navy-950); transform: translateY(-2px); }
.back-to-top i { font-size: 1.05rem; line-height: 1; }

.a11y-panel {
  position: fixed;
  inset-inline-start: var(--sp-4);
  bottom: calc(var(--sp-4) + 58px);
  z-index: var(--z-modal);
  width: min(300px, calc(100vw - var(--sp-6)));
  max-height: min(70vh, 540px);
  overflow-y: auto;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
}
.a11y-panel[hidden] { display: none; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.a11y-panel__head h2 { font-size: 1rem; margin: 0; }
.a11y-close { background: none; border: 0; font-size: 1rem; cursor: pointer; color: var(--text-muted); padding: var(--sp-1); }

.a11y-group { margin-bottom: var(--sp-4); }
.a11y-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.a11y-row { display: flex; gap: var(--sp-2); }
.a11y-row--stack { flex-direction: column; }
.a11y-panel button[data-a11y] {
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  background: var(--c-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  min-height: 42px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.a11y-panel button[data-a11y]:hover { border-color: var(--c-navy-800); }
.a11y-panel button[aria-pressed="true"] {
  background: var(--c-navy-800);
  border-color: var(--c-navy-800);
  color: #fff;
}
.a11y-reset { width: 100%; margin-bottom: var(--sp-2); }
.a11y-statement { display: block; text-align: center; font-size: 0.82rem; color: var(--text-muted); }

/* ---------- מצבי הנגישות עצמם ---------- */
html { font-size: calc(16px * var(--a11y-font-scale, 1)); }

.a11y-contrast { filter: contrast(1.35); }
.a11y-invert { filter: invert(1) hue-rotate(180deg); }
.a11y-invert img, .a11y-invert video { filter: invert(1) hue-rotate(180deg); }
.a11y-grayscale { filter: grayscale(1); }
.a11y-contrast.a11y-grayscale { filter: contrast(1.35) grayscale(1); }

.a11y-links a { text-decoration: underline !important; text-underline-offset: .2em; font-weight: var(--fw-bold) !important; }
.a11y-readable, .a11y-readable * { font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing: .01em; }
.a11y-spacing p, .a11y-spacing li { line-height: 2.1 !important; letter-spacing: .04em; word-spacing: .12em; }
.a11y-stop-motion *, .a11y-stop-motion *::before, .a11y-stop-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* עמוד הצהרת נגישות */
.a11y-statement-page { padding-block: var(--sp-6); }
.a11y-statement-page h2 { font-size: 1.15rem; margin-top: var(--sp-6); }
.a11y-statement-page li { margin-bottom: var(--sp-2); }

/* ==========================================================================
   כרטיס אטרקציה — גרסת 2027
   --------------------------------------------------------------------------
   תגית קטגוריה על התמונה, כותרת בשתי שורות, שורת מטא (יעד ומשך),
   ומחיר בולט. הכל בגובה אחיד, כך שהשורה נקראת כטבלה ולא כערימה.
   ========================================================================== */
/*
 * גודל כרטיס אחד לכל האתר.
 *
 * ---------------------------------------------------------------------------
 * היו שתי הגדרות לאותה רשת: כאן 224 פיקסלים עם ארבעה או חמישה
 * טורים קבועים, וב-legacy-patterns 244 עם ‎auto-fill‎. הרשתות
 * שבתוך ‎#te-main‎ קיבלו את השנייה, והרשתות בבלוק "קשור" שמתחתיו
 * את הראשונה.
 *
 * התוצאה נראתה באותו מסך: "אטרקציות נוספות בפוקט" עם כרטיסים
 * ברוחב אחד, ומיד מתחתיו "מלונות מומלצים בפוקט" ו"אטרקציות
 * ביעדים נוספים" ברוחב אחר. שלוש רשתות של אותו רכיב, שלושה
 * גדלים.
 *
 * כאן נשאר מספר אחד. כללי השורה היתומה ב-legacy-patterns
 * נטענים אחרי הקובץ הזה וממשיכים לקבוע את מספר הטורים לפי
 * מספר הכרטיסים בפועל.
 * ---------------------------------------------------------------------------
 */
.tour-grid {
  /*
   * רוחב קבוע ולא ‎1fr‎.
   *
   * עם ‎1fr‎ הכרטיס נמתח למלא את הטור, ולכן רוחבו נגזר ממספר
   * הכרטיסים ברשת: חמישה נתנו 340 פיקסלים, ארבעה נתנו 251.
   * שלוש רשתות של אותו רכיב באותו מסך, שלושה גדלים.
   *
   * ‎--card-w‎ קובע את הרוחב, והשורה ממורכזת. כרטיס נראה אותו
   * דבר בכל מקום באתר, וגם שורה חלקית נקראת כבחירה.
   */
  --card-w: 288px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), var(--card-w)));
  justify-content: center;
}

.tour-card__media { position: relative; aspect-ratio: 16 / 10; }

.tour-card__badge {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: 1;
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-cta-600);
  color: var(--c-cta-ink);
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  line-height: 1.7;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .35);
}

.tour-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); gap: var(--sp-2); }

.tour-card__title {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  /* שתי שורות בדיוק — כך כל הכרטיסים בשורה מיושרים */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * var(--fs-sm) * 1.3);
}

.tour-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-3xs);
  color: var(--text-muted);
}
.tour-card__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.tour-card__meta-item svg { flex-shrink: 0; opacity: .75; }

.tour-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.tour-card__price {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--c-cta-700);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
}
.tour-card__price-alt,
.tour-card__price-sub {
  font-size: var(--fs-3xs);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}
.tour-card__rating { margin-inline-start: auto; }

/* ==========================================================================
   עמוד חוף ואינדקס החופים
   המבנה זהה לעמוד מלון, ולכן גם הכללים — נשמר שם מחלקה נפרד כדי
   ששינוי בעמודי המלונות לא יזלוג לחופים ולהפך.
   ========================================================================== */
.beach-page { padding-block: var(--sp-6); }

.beach-page__head { margin-bottom: var(--sp-5); }
.beach-page__dest-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--c-sea-600);
  background: var(--c-sea-050);
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.beach-page h1 { margin-bottom: var(--sp-2); }
.beach-page__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.beach-page__media {
  margin: 0 0 var(--sp-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #eceff3;
}
.beach-page__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* כיתוב שמבהיר שהתמונה היא של היעד ולא של החוף — חייב להיקרא, לא להסתתר */
.beach-page__media-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-neutral-050, #f6f7f9);
}

/*
 * רוחב הקריאה מוגבל על הטקסט עצמו ולא על כל הגוף.
 * ‎max-width‎ על ‎__body‎ היה חונק גם את רשתות הכרטיסים של האטרקציות
 * והמלונות לשתי עמודות — ילד לא יכול לחרוג מרוחב ההורה שלו.
 */
.beach-page__lede,
.beach-page__intro,
.beach-page__features,
.beach-page__plan,
.beach-page__transfer,
.beach-page__guide,
.beach-page__note,
.beach-page__nearby > p,
.beach-page__stay > p { max-width: 72ch; }

.beach-page__lede { font-size: 0.95rem; line-height: 1.75; color: var(--text-body); }

.beach-page__intro h2,
.beach-page__features h2,
.beach-page__plan h2,
.beach-page__nearby h2,
.beach-page__stay h2,
.beach-page__transfer h2,
.beach-page__guide h2 { font-size: 1.1rem; margin-top: var(--sp-6); margin-bottom: var(--sp-3); }

.beach-page__intro p,
.beach-page__plan p,
.beach-page__nearby p,
.beach-page__stay p,
.beach-page__transfer p,
.beach-page__guide p { font-size: 0.9rem; line-height: 1.75; color: var(--text-body); margin: 0 0 var(--sp-3); }

.beach-page__nearby .btn,
.beach-page__stay .btn { margin-top: var(--sp-3); }

/* התגיות של הכרטיס המקורי — שבבים, לא רשימת תבליטים */
.beach-page__features ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.beach-page__features li {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  color: var(--c-sea-600);
  background: var(--c-sea-050);
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  margin: 0;
}

.beach-page__plan ul {
  margin: 0 0 var(--sp-4);
  padding-inline-start: var(--sp-5);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-body);
}
.beach-page__plan li { margin-bottom: var(--sp-1); }

.beach-page__note {
  background: var(--c-gold-050);
  border: 1px solid var(--c-gold-200);
  border-inline-start: 4px solid var(--c-gold-500);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-top: var(--sp-5);
}
.beach-page__note h2 { margin-top: 0; font-size: 1.1rem; margin-bottom: var(--sp-3); }
.beach-page__note p { font-size: 0.85rem; margin: 0; }
.beach-page__note p + p { margin-top: var(--sp-3); }

/* ---------- אינדקס החופים ---------- */
.beach-index { padding-block: var(--sp-6); }
.beach-index__lede { font-size: 0.9rem; color: var(--text-muted); max-width: 70ch; margin-bottom: var(--sp-6); }
.beach-index__group { margin-bottom: var(--sp-7); }
.beach-index__group h2 { font-size: 1.15rem; margin-bottom: var(--sp-3); }
.beach-index__group .btn { margin-top: var(--sp-3); }

/* ---------- כפתור בכרטיס חוף שבעמוד היעד ---------- */
.legacy .beach-card__cta,
.beach-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-3);
  align-self: stretch;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--c-navy-800);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  min-height: 40px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.legacy .beach-card__cta:hover,
.beach-card__cta:hover { background: var(--c-gold-500); color: var(--c-navy-950); }

/* הכרטיס המקורי לא תוכנן עם כפתור — בלי עמודה גמישה הוא נדחס לצד התגיות */
.legacy .beach-card [class*="content"],
.legacy .activity-card [class*="content"] { display: flex; flex-direction: column; }

/* ==========================================================================
   קרוסלת לוגואים — רצועת השותפים
   --------------------------------------------------------------------------
   רשת סטטית של לוגואים היא שטח מת בעמוד. רצועה שרצה לאט מראה שיש
   עוד שותפים בלי להוסיף גובה, ונעצרת בריחוף כדי שאפשר יהיה להסתכל.
   האנימציה מבוטלת למי שביקש פחות תנועה במערכת ההפעלה.
   ========================================================================== */
.logo-marquee {
  display: block;
  overflow: hidden;
  padding-block: var(--sp-4);
  /* דהייה בקצוות — הרצועה נראית אינסופית ולא נחתכת */
  -webkit-mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  width: max-content;
  animation: logo-scroll 38s linear infinite;
}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track { animation-play-state: paused; }

.logo-marquee__track > * {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
}
.logo-marquee__track img {
  /*
   * ‼️ הגובה עלה מ-38 ל-54.
   *
   * הלוגואים מנורמלים לשטח אופטי שווה על קנבס מרופד, כלומר הסמל
   * עצמו תופס כשני שליש מהתיבה. ב-38 פיקסלים הכיתוב בתוך הלוגו
   * ירד מתחת לעשרה פיקסלים ונראה ככתם. שי אמר את זה ישירות:
   * "תגדיל אותם קצת כי הקטנת אותם ממש".
   */
  height: 54px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  /*
   * לבן אחיד ולא גווני אפור.
   *
   * הלוגואים מגיעים בצבעים רחוקים זה מזה — אדום של אמירייטס, כחול
   * של אל על, סגול של תאי. ‎grayscale‎ השאיר אותם בבהירויות שונות,
   * והשורה נראתה כמו אוסף ולא כמו רצועה אחת. ‎brightness(0)‎ מאפס
   * לשחור ו-‎invert(1)‎ הופך ללבן מלא, ולכן כולם באותו משקל בדיוק.
   *
   * ‼️ זה עובד רק על קובץ עם שקיפות. קובץ עם רקע יוצא ריבוע לבן —
   * ולכן brand-logos.js פוסל קובץ בלי ערוץ אלפא לפני שהוא נכנס.
   */
  filter: brightness(0) invert(1);
  opacity: .78;
  transition: opacity var(--dur-mid) var(--ease);
}
.logo-marquee__track > *:hover img { opacity: 1; }

/*
 * הרשתות שאין להן קובץ לוגו.
 *
 * שורה אחת שקטה ולא רצועת צ'יפים. המידע נכון — לכל שם כאן יש
 * מלון באתר — אבל הוא לא שווה חצי מסך, וזה בדיוק מה שקרה בגרסה
 * הקודמת.
 */
.chain-names {
  margin: var(--sp-5) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, .58);
}
.chain-names a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chain-names a:hover,
.chain-names a:focus-visible { color: var(--c-gold-500); border-bottom-color: currentColor; }

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }

  /*
   * ‼️ זה הבאג ששי ראה: "זה שבור לגמרי יש כפילות וזה תופס את כל העמוד".
   *
   * העותקים הכפולים קיימים **רק** כדי שהגלילה האינסופית תיסגר בלי
   * חלל. כשהאנימציה כבויה אין גלילה, ושלושת העותקים נפרשים כרשת:
   * כל לוגו שלוש פעמים, מסך שלם של כפילות. הם כבר מסומנים
   * ‎aria-hidden‎ כי הם חזרה ולא תוכן, וזה בדיוק הסלקטור.
   */
  .logo-marquee__track > [aria-hidden="true"] { display: none; }
}

@media (max-width: 640px) {
  .logo-marquee__track { gap: var(--sp-5); animation-duration: 26s; }
  .logo-marquee__track img { height: 40px; max-width: 140px; }
}

/* ==========================================================================
   תפריט משנה — פאנל כהה, תואם לסרגל
   --------------------------------------------------------------------------
   הפאנל הקודם היה מלבן לבן שנפתח מתוך סרגל כחול כהה: ניגוד חד,
   בלי המשכיות, ורשימה שטוחה בלי סימון פריט פעיל. כאן הוא נמשך
   מהסרגל עצמו, עם גשר בלתי נראה שמונע סגירה כשהעכבר חוצה את
   הרווח, וסימון כתום בריחוף — אותו קוד צבע של הסרגל.
   ========================================================================== */
@media (min-width: 1024px) {
  .main-nav li > ul {
    inset-inline-start: 50%;
    transform: translate(50%, -8px) scale(.98);
    transform-origin: top center;
    min-width: 248px;
    padding: var(--sp-2);
    background: linear-gradient(180deg, var(--c-navy-900), var(--c-navy-950));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 48px -20px rgba(4, 24, 46, .65),
                0 2px 8px rgba(4, 24, 46, .3);
    transition: opacity 160ms var(--ease), transform 200ms var(--ease), visibility 160ms;
  }
  .main-nav li:hover > ul,
  .main-nav li:focus-within > ul { transform: translate(50%, 0) scale(1); }

  /* גשר מעל הרווח שבין הפריט לפאנל */
  .main-nav li > ul::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    height: 12px;
  }
  /* חץ קטן שמצביע על פריט התפריט */
  .main-nav li > ul::after {
    content: "";
    position: absolute;
    top: -5px;
    inset-inline-start: 50%;
    width: 10px; height: 10px;
    transform: translateX(50%) rotate(45deg);
    background: var(--c-navy-900);
    border-inline-start: 1px solid rgba(255, 255, 255, .1);
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .main-nav li > ul a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
    position: relative;
    transition: background 140ms var(--ease), color 140ms var(--ease), padding-inline-start 140ms var(--ease);
  }
  .main-nav li > ul a:hover,
  .main-nav li > ul a:focus-visible {
    background: rgba(255, 255, 255, .07);
    color: var(--c-gold-500);
    padding-inline-start: var(--sp-4);
  }
  /* קו כתום קצר שנכנס מהצד בריחוף */
  .main-nav li > ul a::before {
    content: "";
    position: absolute;
    inset-inline-start: var(--sp-2);
    top: 50%;
    width: 0; height: 2px;
    border-radius: var(--r-full);
    background: var(--c-gold-500);
    transform: translateY(-50%);
    transition: width 160ms var(--ease);
  }
  .main-nav li > ul a:hover::before { width: 8px; }
  .main-nav li > ul a[aria-current="page"] { color: var(--c-gold-500); background: rgba(240, 168, 26, .1); }
}

/* ==========================================================================
   כרטיסי מידע — "מה כדאי לדעת"
   --------------------------------------------------------------------------
   מחליפים את שני הסקשנים הישנים ("סוגי אטרקציות" ו-"מידע חשוב"),
   שהגיעו עם מסגרות וכותרות ענק ששייכות לעמוד הישן. אותו תוכן,
   באותה שפת עיצוב של שאר האתר.
   ========================================================================== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease);
}
.info-card:hover {
  border-color: var(--c-sea-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.info-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
}
/* נקודה קטנה במקום אייקון — מסמנת פריט בלי להוסיף רעש */
.info-card__title::before {
  content: "";
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: var(--c-gold-500);
}

.info-card__body { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); }
.info-card__body > :first-child { margin-top: 0; }
.info-card__body > :last-child { margin-bottom: 0; }
.info-card__body p { margin: 0 0 var(--sp-2); }
.info-card__body a {
  color: var(--c-sea-600);
  font-weight: var(--fw-semibold);
  text-decoration-color: var(--c-sea-200);
  text-underline-offset: 0.2em;
}
.info-card__body a:hover { color: var(--c-gold-700); }

/*
 * שורה אחת — רק כשיש מעט פריטים.
 *
 * ‎minmax(0, 1fr)‎ בלי תקרה דוחס כל מספר פריטים לשורה אחת: רשימה של
 * 12 אזורים בפוקט יצאה 12 טורים ברוחב 60 פיקסל עם טקסט אנכי.
 * עד חמישה פריטים נכנסים לשורה; מעבר לזה הרשת עוברת לגלישה רגילה
 * עם רוחב מינימלי שמאפשר לקרוא.
 */
@media (min-width: 1100px) {
  .info-grid:not(:has(> :nth-child(6))) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
/*
 * בלי קו מתחת לכותרת הסקשן הזה.
 * הקו הוא סימון של סקשן ראשי; כאן הוא חוצץ בין הכותרת לכרטיסים
 * ומוסיף רעש לבלוק שכל תפקידו להיקרא מהר.
 */
.info-section-new .section-head h2::after { content: none; }
.info-section-new .section-head h2 { padding-bottom: 0; }

/* ==========================================================================
   תפריט מובייל — אקורדיון
   --------------------------------------------------------------------------
   רשימה שטוחה של 40 פריטים באותו משקל לא נותנת לגולש שום מושג מה
   שייך למה. כאן כל קטגוריה נפתחת בלחיצה על החץ, והשם עצמו נשאר
   קישור לעמוד הקטגוריה.
   ========================================================================== */
@media (max-width: 1023px) {
  .main-nav li[data-has-sub] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .main-nav li[data-has-sub] > a { grid-column: 1; }

  .nav-sub-toggle {
    grid-column: 2;
    display: inline-grid;
    place-items: center;
    width: 42px; height: 42px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-sm);
    color: inherit;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .nav-sub-toggle:hover { background: rgba(255, 255, 255, .12); }
  .main-nav li[data-sub-open="true"] > .nav-sub-toggle { transform: rotate(180deg); }

  /*
   * הקיפול לפי ‎max-height‎ ולא לפי ‎grid-template-rows: 0fr‎.
   *
   * טריק ה-‎0fr‎ מקפל שורה אחת בלבד, והוא עובד רק כשלתוכן יש
   * ילד יחיד. כאן ה-‎<ul>‎ מחזיק 15 ‎<li>‎, ולכן ‎0fr‎ קיפל את
   * הראשון בלבד — "פוקט" קיבל גובה 0 וישב בדיוק על "קו סמוי",
   * ושאר 14 הפריטים נשארו פתוחים. תת-התפריט של "יעדים" נראה
   * כמו רשימה פתוחה עם שורה דרוסה.
   *
   * ‎max-height‎ מקפל את הרשימה כולה ואינו תלוי במספר הילדים.
   * הערך הפתוח גדול מכל תת-תפריט באתר (15 פריטים × 48 פיקסל),
   * ולכן אף פריט לא נחתך.
   */
  .main-nav li[data-has-sub] > ul {
    grid-column: 1 / -1;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms var(--ease);
  }
  .main-nav li[data-sub-open="true"] > ul { max-height: 900px; }

  .main-nav li[data-has-sub] > ul li a {
    padding-inline-start: var(--sp-6);
    font-size: var(--fs-sm);
    opacity: .88;
  }
  /* קו דק שמסמן שייכות לקטגוריה שמעל */
  .main-nav li[data-has-sub] > ul {
    border-inline-start: 2px solid rgba(255, 255, 255, .12);
    margin-inline-start: var(--sp-3);
  }
}

/* בדסקטופ הכפתור מיותר — הפתיחה בריחוף */
@media (min-width: 1024px) {
  .nav-sub-toggle { display: none; }
}

/* ==========================================================================
   מובייל — שני כרטיסים בשורה
   --------------------------------------------------------------------------
   כרטיס אחד ברוחב מסך נותן גלילה ארוכה ומעט מידע במבט. שניים בשורה
   מראים שיש בחירה, ועדיין משאירים את התמונה והמחיר קריאים.
   ========================================================================== */
@media (max-width: 720px) {
  .tour-grid,
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

  .tour-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); gap: 4px; }
  .tour-card__title { font-size: var(--fs-2xs); min-height: calc(2 * var(--fs-2xs) * 1.3); }
  /*
   * ‼️ ארבעה ערכי פיקסל קשיחים מתחת לרצפה של המערכת עצמה.
   *
   * --fs-3xs הוא 12px, וכאן ישבו 11px ו-10px. כלומר הברייקפוינט
   * שהוא מאה אחוז מהתנועה קיבל את הטקסט הקטן ביותר באתר, קטן
   * ממה שהגדרנו לעצמנו כמינימום. יש כבר הערה ב-legacy-patterns
   * שמתייחסת ל-10.88px כאל באג; כאן זה פשוט נכתב ביד.
   *
   * והחמור מכולם היה .tour-card__rating — הוא מחזיק את המחיר.
   * דנה מדדה תשעה מופעים של "החל מ-2,400" ב-11px בעמוד אחד.
   * זה המספר שמחליט אם לוחצים, והוא היה הטקסט הקטן על המסך.
   *
   * התג נשאר קטן יותר מהשאר דרך ריפוד ולא דרך גופן: תג הוא סימן
   * ולא טקסט קריאה, וריפוד מוקטן משיג את אותו אפקט בלי לרדת
   * מתחת לרצפה.
   */
  .tour-card__meta { font-size: var(--fs-3xs); gap: 2px var(--sp-2); }
  .tour-card__price { font-size: var(--fs-sm); }
  .tour-card__price-alt, .tour-card__price-sub { font-size: var(--fs-3xs); }
  .tour-card__badge { font-size: var(--fs-3xs); padding: 1px var(--sp-1); }
  .tour-card__foot { gap: 2px var(--sp-1); padding-top: var(--sp-1); }
  .tour-card__rating { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }

  .info-card { padding: var(--sp-3); }
  .info-card__title { font-size: var(--fs-sm); }
  .info-card__body { font-size: var(--fs-xs); }
}

/*
 * רק במסכים הקטנים באמת — כרטיס אחד.
 * הסף הקודם היה 380px, כלומר אייפון סטנדרטי (375px) קיבל טור אחד.
 * 330px הוא הגבול שבו שני כרטיסים באמת נהיים צרים מדי.
 */
@media (max-width: 330px) {
  .tour-grid, .info-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ריחוף בהירו — אותו קוד צבע כתום של הסרגל
   --------------------------------------------------------------------------
   הכלל חל רק על אלמנט עלה (בלי ילדים) או על קישור. בלי ההגבלה הזו
   הסלקטור תפס גם את המיכל של הצ'יפים — שם המחלקה שלו מכיל "pill" —
   וההדגשה הכתומה צבעה פס ברוחב מלא במקום את הצ'יפ שמתחת לעכבר.
   ========================================================================== */
.hero .pill:not(:has(*)),
.hero [class*="chip"]:not(:has(*)),
.hero [class*="tag"]:not(:has(*)),
.hero__facts .hero__fact,
.legacy [class*="hero"] [class*="badge"]:not(:has(*)),
.legacy [class*="hero"] [class*="pill"]:not(:has(*)),
.legacy [class*="hero"] [class*="chip"]:not(:has(*)),
.legacy .hero-badges > *:not(:has(*)),
.legacy .hero-content [class*="badge"]:not(:has(*)) {
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.hero .pill:not(:has(*)):hover,
.hero [class*="chip"]:not(:has(*)):hover,
.hero [class*="tag"]:not(:has(*)):hover,
.hero__facts .hero__fact:hover,
.legacy [class*="hero"] [class*="badge"]:not(:has(*)):hover,
.legacy [class*="hero"] [class*="pill"]:not(:has(*)):hover,
.legacy [class*="hero"] [class*="chip"]:not(:has(*)):hover,
.legacy .hero-badges > *:not(:has(*)):hover,
.legacy .hero-content [class*="badge"]:not(:has(*)):hover {
  color: var(--c-gold-500);
  border-color: var(--c-gold-500);
  background: rgba(240, 168, 26, .14);
  box-shadow: 0 0 0 1px rgba(240, 168, 26, .4),
              0 8px 22px -10px rgba(240, 168, 26, .7);
  transform: translateY(-1px);
}

/* קישור בהירו — כתום, עם קו זהב שנפתח מתחת לטקסט עצמו */
.hero a:not(.btn),
.legacy [class*="hero"] a:not([class*="btn"]) {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.hero a:not(.btn)::after,
.legacy [class*="hero"] a:not([class*="btn"])::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 0; height: 2px;
  border-radius: var(--r-full);
  background: var(--c-gold-500);
  transition: width var(--dur-mid) var(--ease);
}
.hero a:not(.btn):hover,
.legacy [class*="hero"] a:not([class*="btn"]):hover { color: var(--c-gold-500); }
.hero a:not(.btn):hover::after,
.legacy [class*="hero"] a:not([class*="btn"]):hover::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .hero .pill:hover, .hero [class*="chip"]:hover, .hero [class*="tag"]:hover { transform: none; }
}

/* ==========================================================================
   אזורים ביעד — כרטיסי .info-card עם שורת קישורים
   --------------------------------------------------------------------------
   הכרטיס עצמו כבר מעוצב למעלה. מה שחסר לו כאן הוא שני דברים בלבד:
   פסקת פתיחה לסקשן, ושורת קישורים שמתנהגת כרשימה ולא כפסקה — קישורים
   שנשברים באמצע שורה קשים לסריקה בדיוק בבלוק שכל תפקידו להיסרק מהר.
   ========================================================================== */
.area-section__lede {
  max-width: 68ch;
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* מרווח אנכי אמיתי בין הקישורים כשהם נשברים לכמה שורות */
.area-card__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--sp-1);
  margin: var(--sp-2) 0 0 !important;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
}

/*
 * הכרטיס מותח את גובהו כדי ששורת הקישורים תיישר בין הכרטיסים.
 * ממודר ל-.info-card--area בלבד: .info-card משמש גם את הסקשנים
 * הישנים ("מה כדאי לדעת"), ושינוי גלובלי שם הוא רגרסיה בעמודים
 * שלא נגענו בהם.
 */
.info-card--area { height: 100%; }
.info-card--area .info-card__body { display: flex; flex-direction: column; flex: 1; }
.info-card--area .area-card__links { margin-top: auto !important; }

/* ==========================================================================
   קרוסלה — גלילה מקורית של הדפדפן, בלי ספרייה
   --------------------------------------------------------------------------
   מחליפה את Swiper בכל האתר. הגלילה רצה בקומפוזיטור ולא ב-JS, ולכן
   אין תקיעות; ‎align-items: stretch‎ מיישר את כל הכרטיסים לאותו גובה;
   ו-‎scroll-snap‎ עוצר בדיוק על פריט ולא באמצע.
   ========================================================================== */
.carousel { position: relative; }

.carousel__track {
  display: flex;
  align-items: stretch;          /* כל הכרטיסים באותו גובה */
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  /*
   * ‎proximity‎ ולא ‎mandatory‎, ו-‎scroll-behavior‎ נשאר ‎auto‎.
   * הצירוף ‎mandatory + scroll-behavior: smooth‎ חוסם ‎scrollTo‎
   * מתוך JavaScript: הדפדפן מבטל את הגלילה המבוקשת ומחזיר לנקודת
   * ההצמדה הנוכחית, והחצים פשוט לא עובדים. החלקה מתבצעת דרך
   * ‎behavior: 'smooth'‎ בקריאה עצמה.
   */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--sp-2) 2px var(--sp-4);
  /* מרחב לצל של הכרטיס בריחוף, אחרת הוא נחתך */
  margin-inline: -2px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--c-sea-500); outline-offset: 4px; border-radius: var(--r-md); }

.carousel__item {
  flex: 0 0 auto;
  width: calc((100% - var(--sp-4) * 2) / 3);
  scroll-snap-align: start;
  display: flex;
  min-height: 0;
}
/* הכרטיס שבתוך הפריט ממלא אותו — זה מה שמיישר גבהים */
.carousel__item > * { width: 100%; height: 100%; display: flex; flex-direction: column; }

@media (min-width: 1280px) { .carousel__item { width: calc((100% - var(--sp-4) * 3) / 4); } }
@media (min-width: 1600px) { .carousel__item { width: calc((100% - var(--sp-4) * 4) / 5); } }
@media (max-width: 900px)  { .carousel__item { width: calc((100% - var(--sp-4)) / 2); } }
@media (max-width: 420px)  { .carousel__item { width: 78%; } }

/* --- פקדים --- */
.carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.carousel.is-static .carousel__nav { display: none; }

.carousel__btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--c-white);
  color: var(--c-navy-800);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.carousel__btn:hover:not(:disabled) {
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
  color: var(--c-navy-950);
  transform: translateY(-1px);
}
.carousel__btn:disabled { opacity: .3; cursor: default; }
/* החץ פונה לכיוון הקריאה */
.carousel__btn svg { transform: scaleX(-1); }

.carousel__dots { display: flex; align-items: center; gap: 6px; }
.carousel__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--c-ink-400, #9aa4b2);
  opacity: .4;
  cursor: pointer;
  transition: width var(--dur-mid) var(--ease), opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.carousel__dot:hover { opacity: .75; }
.carousel__dot.is-active { width: 24px; opacity: 1; background: var(--c-gold-500); }

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  .carousel__btn:hover:not(:disabled) { transform: none; }
}

/* ==========================================================================
   כרטיס לחיץ בכל שטחו
   --------------------------------------------------------------------------
   שכבת קישור שקופה מעל הכרטיס. הכפתור הגלוי נשאר מעליה ועדיין
   נלחץ ישירות, וכל שאר השטח — תמונה, שם, תיאור — הפך ללחיץ גם הוא.
   ========================================================================== */
.is-linked { position: relative; }
.card-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  font-size: 0;
  background: none;
  border: 0;
  /* אף פילטר לא עובר לשכבה הזו, אחרת היא מטשטשת את הכרטיס */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/*
 * רק קישורים וכפתורים אמיתיים עולים מעל השכבה.
 *
 * הרמת *כל* הילדים מעל הכיסוי חסמה אותו לגמרי — התמונה והטקסט ישבו
 * מעליו, והלחיצה על גוף הכרטיס לא הגיעה לשום מקום. שאר התוכן נשאר
 * ללא מיקום, ולכן הכיסוי מעליו והכרטיס כולו לחיץ.
 */
.is-linked a:not(.card-cover),
.is-linked button,
.is-linked input,
.is-linked select { position: relative; z-index: 2; }

.is-linked { cursor: pointer; }
.is-linked:hover { border-color: var(--c-sea-200); }

/* ==========================================================================
   כרטיסים מעט קטנים יותר — יותר פריטים במבט אחד
   ========================================================================== */
@media (min-width: 900px) {
  .legacy :is([class$="-card"],[class*="-card "]) [class$="-content"],
  .legacy :is([class$="-card"],[class*="-card "]) [class$="-body"],
  .legacy :is([class$="-card"],[class*="-card "]) [class$="-info"] { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .legacy :is([class$="-card"],[class*="-card "]) h3,
  .legacy :is([class$="-card"],[class*="-card "]) h4 { font-size: var(--fs-sm); }
  .legacy :is([class$="-card"],[class*="-card "]) p { font-size: var(--fs-xs); }
  .legacy :is([class$="-card"],[class*="-card "]) [class*="btn"] {
    padding: var(--sp-2) var(--sp-4);
    min-height: 38px;
    font-size: var(--fs-xs);
  }
}

/* ==========================================================================
   צ'יפים בהירו של דף הבית
   --------------------------------------------------------------------------
   ה-CSS של דף הבית מגדיר את צבעם דרך ‎#te-hero‎ — סלקטור מזהה, שגובר
   על כל סלקטור מחלקות. לכן כלל הריחוף הכללי צבע את המסגרת אבל לא את
   הטקסט. כאן הסגוליות מותאמת: מזהה ועוד שתי מחלקות.
   ========================================================================== */
.legacy #te-hero .chip,
.legacy #te-hero .badge,
#te-hero .chip,
#te-hero .badge {
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              transform var(--dur-fast) var(--ease);
  cursor: default;
}
.legacy #te-hero .chip:hover,
.legacy #te-hero .badge:hover,
#te-hero .chip:hover,
#te-hero .badge:hover {
  color: var(--c-gold-500);
  border-color: var(--c-gold-500);
  background: rgba(240, 168, 26, .16);
  box-shadow: 0 0 0 1px rgba(240, 168, 26, .45),
              0 10px 26px -12px rgba(240, 168, 26, .8);
  transform: translateY(-1px);
}

/* כותרת ותת-כותרת ההירו — הארה זהובה עדינה */
.legacy #te-hero .hero-title:hover,
.legacy #te-hero .hero-subtitle:hover,
#te-hero .hero-title:hover,
#te-hero .hero-subtitle:hover {
  color: var(--c-gold-500);
  text-shadow: 0 3px 14px rgba(0, 0, 0, .55), 0 0 28px rgba(240, 168, 26, .5);
}
.legacy #te-hero .hero-title,
.legacy #te-hero .hero-subtitle,
#te-hero .hero-title,
#te-hero .hero-subtitle {
  transition: color var(--dur-mid) var(--ease), text-shadow var(--dur-mid) var(--ease);
}

/* ==========================================================================
   פריט ניווט ראשי — בלי רקע בריחוף
   --------------------------------------------------------------------------
   כשהתפריט הנפתח נפתח, הפריט שמעליו קיבל מלבן קרם בהיר: הוא נראה
   כמו כפתור לחוץ ומתחרה בפאנל עצמו. הסימון היחיד שצריך הוא צבע
   הטקסט והקו הזהוב שמתחתיו — בדיוק כמו בשאר הפריטים.
   ========================================================================== */
.main-nav > ul > li > a:hover,
.main-nav > ul > li:hover > a,
.main-nav > ul > li:focus-within > a {
  background: transparent;
  color: var(--c-gold-500);
}

/* פריטי התפריט הנפתח שומרים על ההדגשה העדינה שלהם */
@media (min-width: 1024px) {
  .main-nav li > ul a:hover { background: rgba(255, 255, 255, .07); }
}

/* ==========================================================================
   קישור שהוחייה — מתנהג בדיוק כמו העטיפה שהחליף
   --------------------------------------------------------------------------
   ה-‎<span class="was-link">‎ שעטף את כרטיס המלון היה אלמנט בלוק שקיבל
   את כל עיצוב הכרטיס מהגריד. ‎<a>‎ הוא inline כברירת מחדל ונושא קו
   תחתון וצבע קישור, ולכן ברגע ההמרה הכרטיסים איבדו את הרקע, את
   הגובה האחיד ואת היישור. כאן הוא מוחזר להתנהגות של בלוק ניטרלי.
   ========================================================================== */
.revived-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
  overflow: hidden;
}
.revived-link:hover { color: inherit; }
/* קו תחתון ירש גם לטקסט שבתוכו */
.revived-link * { text-decoration: none; }
.revived-link [class$="-content"],
.revived-link [class$="-body"] { flex: 1; }

/* הכרטיס שהוחייה מקבל את מראה הכרטיס של האתר */
.legacy [class*="grid"] > .revived-link {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}
.legacy [class*="grid"] > .revived-link:hover {
  transform: translateY(-3px);
  border-color: var(--c-sea-200);
  box-shadow: var(--shadow-md);
}
.legacy [class*="grid"] > .revived-link img { border-radius: 0; }


/* ==========================================================================
   רצועת השותפים — פס נייבי
   --------------------------------------------------------------------------
   דף הבית כולו בהיר, ורצועת השותפים ישבה עליו בלי שום הבדל: היא
   נבלעה ברקע האפור של ‎#te-main‎ ונראתה כמו שטח מת. פס נייבי באותו
   צבע של הכותרת והפוטר נותן לעמוד קצב, והלוגואים הלבנים עליו
   בולטים במקום להיטשטש.
   ‎#te-main‎ בסלקטור כי ה-CSS של דף הבית משתמש במזהה וגובר בלעדיו.
   ========================================================================== */
.legacy #te-main .te-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;
}
/* זוהר עדין שמונע מהפס להיראות כמו מלבן שטוח */
.legacy #te-main .te-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%);
}
.legacy #te-main .te-strip.te-strip .container { position: relative; }

.legacy #te-main .te-strip.te-strip .section-title {
  font-size: var(--fs-2xl);
  color: var(--text-on-dark);
  margin-bottom: var(--sp-2);
}
.legacy #te-main .te-strip.te-strip .section-title::after { background: var(--c-gold-500); }
.legacy #te-main .te-strip.te-strip .section-subtitle {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .72);
  max-width: 60ch;
  margin-inline: auto;
}

/* --- רצועת הלוגואים --- */
.legacy #te-main .partners-grid.logo-marquee {
  display: block;
  overflow: hidden;
  padding-block: var(--sp-5) var(--sp-4);
  margin: 0;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
}
.legacy #te-main .logo-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  width: max-content;
  animation: logo-scroll 40s linear infinite;
}
.legacy #te-main .logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.legacy #te-main .logo-marquee__track > * {
  flex: 0 0 auto;
  width: auto; min-width: 0; min-height: 0;
  padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  display: grid; place-items: center;
}
/*
 * הלוגואים מגיעים בצבעים שונים על רקע לבן. על פס כהה הם מוצגים
 * כסילואט לבן — כך הרצועה אחידה ואף לוגו לא "צועק" על השכן שלו.
 */
.legacy #te-main .logo-marquee__track > * {
  padding: var(--sp-3) var(--sp-5);
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .8);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.legacy #te-main .logo-marquee__track > *:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9);
}
.legacy #te-main .logo-marquee__track img {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease);
}
.legacy #te-main .logo-marquee__track > *:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   רשתות המלונות
   --------------------------------------------------------------------------
   אין לנו קובצי לוגו של הרשתות, ולוגו משוחזר ביד הוא זיוף של זהות
   מותג. במקומו שם הרשת בטיפוגרפיה נקייה על הפס הכהה, מקושר
   למלונות שלה שקיימים באתר. ברגע שיגיעו קובצי לוגו, מחליפים את
   תוכן הצ'יפ ב-‎<img>‎ והעיצוב סביבו נשאר כפי שהוא.
   ========================================================================== */
.chain-marquee {
  overflow: hidden;
  margin-top: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
}
.chain-marquee__lede {
  margin: 0 0 var(--sp-3);
  text-align: center;
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.chain-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 3vw, var(--sp-6));
  width: max-content;
  animation: logo-scroll 60s linear infinite reverse;
}
.chain-marquee:hover .chain-marquee__track { animation-play-state: paused; }
.chain-marquee__track > span { display: contents; }

.chain-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}
.chain-chip:hover {
  color: var(--c-gold-500);
  border-color: rgba(240, 168, 26, .55);
  background: rgba(240, 168, 26, .12);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -14px rgba(240, 168, 26, .8);
}
/* לוגו אמיתי, כשיגיע — מחליף את הטקסט בלי לשנות את המסגרת */
.chain-chip img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
.chain-chip:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .legacy #te-main .logo-marquee__track,
  .chain-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .legacy #te-main .partners-grid.logo-marquee,
  .chain-marquee { -webkit-mask-image: none; mask-image: none; }

  /*
   * ‼️ העותקים הכפולים קיימים רק כדי שהלולאה תיסגר בלי חלל.
   *
   * כשהאנימציה כבויה אין לולאה, והם הופכים לרשת שבה כל חברת
   * תעופה וכל רשת מלונות מופיעה **שלוש פעמים**. מי שביקש
   * הפחתת תנועה קיבל עד עכשיו 84 צ'יפים במקום 28.
   *
   * הם כבר מסומנים ‎aria-hidden‎ כי הם חזרה ולא תוכן, וזה בדיוק
   * הסלקטור שצריך כאן.
   */
  .chain-marquee__track > [aria-hidden="true"],
  .legacy #te-main .logo-marquee__track > [aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .chain-chip { font-size: var(--fs-xs); padding: 4px var(--sp-3); }
}

/* ==========================================================================
   כרטיסי דף הבית — אטרקציות ויעדים
   --------------------------------------------------------------------------
   הם היו הרכיב היחיד בדף הבית שנשאר בעיצוב הישן: תמונה, כותרת,
   פסקה וכפתור, בלי היררכיה ובלי תגובה למגע. כאן הם מקבלים את אותה
   שפה של כרטיס האטרקציה שבשאר האתר — תמונה שמתקרבת בריחוף, כותרת
   בשתי שורות קבועות, וקישור זהוב עם חץ שנע.
   ‎#te-main‎ בסלקטור כי ה-CSS של דף הבית משתמש במזהה.
   ========================================================================== */
.legacy #te-main #attractions .card,
.legacy #te-main #destinations .card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transition: transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}
.legacy #te-main #attractions .card:hover,
.legacy #te-main #destinations .card:hover {
  transform: translateY(-4px);
  border-color: var(--c-sea-200);
  box-shadow: 0 18px 40px -22px rgba(4, 24, 46, .55);
}

.legacy #te-main #attractions .card-media,
.legacy #te-main #destinations .card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  height: auto;
  overflow: hidden;
  background: var(--c-ink-100, #eceff3);
}
.legacy #te-main #attractions .card-media img,
.legacy #te-main #destinations .card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.legacy #te-main #attractions .card:hover .card-media img,
.legacy #te-main #destinations .card:hover .card-media img { transform: scale(1.07); }

/* הצללה עדינה בתחתית התמונה — מחברת בין הצילום לגוף הכרטיס */
.legacy #te-main #attractions .card-media::after,
.legacy #te-main #destinations .card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(4, 24, 46, .35), transparent);
  pointer-events: none;
}

.legacy #te-main #attractions .card-body,
.legacy #te-main #destinations .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.legacy #te-main #attractions .card-title,
.legacy #te-main #destinations .card-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-navy-900);
  /* שתי שורות קבועות — כל הכרטיסים בשורה מיושרים */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * var(--fs-md) * 1.25);
  transition: color var(--dur-fast) var(--ease);
}
.legacy #te-main #attractions .card:hover .card-title,
.legacy #te-main #destinations .card:hover .card-title { color: var(--c-sea-600); }

.legacy #te-main #attractions .card-desc,
.legacy #te-main #destinations .card-desc {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* הכפתור הופך לקישור זהוב עם חץ שנע — פחות רעש, יותר כיוון */
.legacy #te-main #attractions .card-cta,
.legacy #te-main #destinations .card-cta {
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.legacy #te-main #attractions .card-cta .btn,
.legacy #te-main #attractions .card-cta > span,
.legacy #te-main #destinations .card-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  min-height: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-gold-700);
  transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.legacy #te-main #attractions .card-cta .btn::after,
.legacy #te-main #attractions .card-cta > span::after,
.legacy #te-main #destinations .card-cta .btn::after {
  content: "←";
  font-size: var(--fs-sm);
  line-height: 1;
}
.legacy #te-main #attractions .card:hover .card-cta .btn,
.legacy #te-main #attractions .card:hover .card-cta > span,
.legacy #te-main #destinations .card:hover .card-cta .btn { gap: 12px; color: var(--c-gold-500); }

/* ==========================================================================
   ‎#about‎ — "צוות שמלווה אתכם"
   ==========================================================================
   מה שהיה: פס ברוחב מלא בגרדיאנט כחול-לתכלת, כל הטקסט לבן, וכרטיס
   זכוכית מטושטש בצד. שני דברים לא עבדו בו. הראשון, הגרדיאנט הזה הוא
   ברירת המחדל של כל תבנית: הוא לא אומר תאילנד ולא אומר את המותג.
   השני, מרגע שהסקשן עלה לראש העמוד הוא נחת ישר מתחת לתמונת הכותרת,
   ומיד אחריו הגיעו עוד פסים צבעוניים — שלושה משטחים רוויים ברצף.

   מה שיש עכשיו: סקשן פתוח על משטח השמנת של האתר. הטיעון נקרא
   כטקסט, וארבעת השלבים עוברים מ"ארבעה סימני וי" ל"ארבעה שלבים
   ממוספרים" — כי זה מה שהם: תהליך עם סדר, לא רשימת הבטחות.
   הפס הכהה היחיד בעמוד נשאר אצל השותפים, ולכן הוא בולט.
   ========================================================================== */
.legacy #te-main #about.about-section,
.about-team {
  background: var(--c-surface) !important;
  box-shadow: none;
  border-block: 1px solid var(--border);
  padding-block: clamp(var(--sp-7), 6vw, 4.5rem);
}
.legacy #te-main #about.about-section *,
.about-team * { color: var(--text-body) !important; }

.legacy #te-main #about .about-grid,
.about-team .about-grid {
  /*
   * ‼️ ‎display: grid‎ מוצהר כאן במפורש, ואינו מיותר.
   *
   * בדף הבית הוא לא בא מכללי הסקשן בכלל אלא מכלל גנרי —
   * ‎.legacy [class$="-grid"] { display: grid }‎ — כלומר כל
   * אלמנט שמחלקתו נגמרת ב-‎-grid‎ **בתוך העטיפה הישנה**.
   *
   * הסקשן המוזרק יושב מחוץ ל-‎.legacy‎, ולכן קיבל
   * ‎grid-template-columns‎ בלי ‎display: grid‎: שתי הצהרות
   * שמגיעות משני מקורות, ורק אחת מהן הגיעה. התוצאה היא רשת
   * שהוגדרה ולא הופעלה — שני הטורים נערמו זה מתחת לזה.
   *
   * זה גם הסימן שחשף את זה: ‎display: block‎ לצד
   * ‎grid-template-columns: 1fr 0.82fr‎ באותו אלמנט.
   */
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(var(--sp-6), 4vw, 3.25rem);
  align-items: start;
}

/* גג הסקשן: שורת עילה קצרה וקו זהב, במקום גלולה מטושטשת */
.legacy #te-main #about .about-kicker,
.about-team .about-kicker {
  background: none;
  border: 0;
  backdrop-filter: none;
  padding: 0;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--c-sea-600) !important;
}
.legacy #te-main #about .about-kicker i,
.about-team .about-kicker i { color: var(--c-gold-600) !important; }
.legacy #te-main #about .about-kicker::after,
.about-team .about-kicker::after {
  content: "";
  width: 42px;
  height: 2px;
  background: var(--c-gold-500);
  border-radius: 2px;
}

.legacy #te-main #about .about-title,
.about-team .about-title {
  font-size: var(--fs-4xl);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-navy-950) !important;
  text-shadow: none;
  margin-bottom: var(--sp-4);
  max-width: 17em;
}
.legacy #te-main #about .about-text,
.about-team .about-text {
  font-size: var(--fs-lg);
  line-height: 1.85;
  max-width: 58ch;
  margin-bottom: var(--sp-5);
}

/* ארבעת התחומים — שבבים שקטים, האייקון נושא את הצבע */
.legacy #te-main #about .about-pills,
.about-team .about-pills { gap: var(--sp-2); }
.legacy #te-main #about .about-pills .pill,
.about-team .about-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-800) !important;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.legacy #te-main #about .about-pills .pill i,
.about-team .about-pills .pill i { color: var(--c-gold-600) !important; }

/* הצד: כרטיס תהליך לבן */
.legacy #te-main #about .about-side,
.about-team .about-side {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
}
.legacy #te-main #about .about-side h3,
.about-team .about-side h3 {
  font-size: var(--fs-xl);
  color: var(--c-navy-950) !important;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.legacy #te-main #about .about-side ul,
.about-team .about-side ul { counter-reset: step; gap: 0; }
.legacy #te-main #about .about-side li,
.about-team .about-side li {
  counter-increment: step;
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--sp-4) 0;
  gap: var(--sp-4);
  align-items: flex-start;
}
.legacy #te-main #about .about-side li + li,
.about-team .about-side li + li { border-top: 1px solid var(--border); }
.legacy #te-main #about .about-side li:first-child,
.about-team .about-side li:first-child { padding-top: 0; }
.legacy #te-main #about .about-side li:last-child,
.about-team .about-side li:last-child { padding-bottom: 0; }

/*
 * מספר השלב מחליף את סימן הווי.
 * ארבעה סימני וי זהים אומרים "ארבע הבטחות"; ‎1-2-3-4‎ אומר שיש כאן
 * סדר,
וזה בדיוק מה שהטקסט מתאר — מה קורה קודם ומה אחר כך.
 */
.legacy #te-main #about .about-side li i,
.legacy #te-main #about .about-side li br,
.about-team .about-side li br,
.about-team .about-side li i { display: none; }
.legacy #te-main #about .about-side li::before,
.about-team .about-side li::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900) !important;
  background: var(--c-gold-200);
  border-radius: var(--r-full);
}
.legacy #te-main #about .about-side li b,
.about-team .about-side li b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--c-navy-950) !important;
  margin-bottom: 3px;
}
.legacy #te-main #about .about-side li span,
.about-team .about-side li span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted) !important;
  opacity: 1 !important;
  line-height: 1.7;
}

@media (max-width: 880px) {
  .legacy #te-main #about .about-grid,
.about-team .about-grid { grid-template-columns: 1fr; }
  .legacy #te-main #about .about-title,
.about-team .about-title { max-width: none; }
  .legacy #te-main #about .about-kicker,
.about-team .about-kicker { width: auto; justify-content: flex-start; }
}

/* ==========================================================================
   שורת היעדים בתוך כרטיס הליד
   ==========================================================================
   הצ'יפים ירדו לכאן מהסקשן "יעדים נוספים בתאילנד" שישב מיד מעל
   הטופס. שתי תיבות שביקשו שתי פעולות מתחרות הפכו לתיבה אחת עם
   דרך ראשית — השארת פרטים — ודרך משנית למי שעדיין מתלבט לאן.
   ========================================================================== */
.lead-destinations {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.lead-destinations__lede {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.lead-destinations .related-chip {
  min-height: 34px;
  font-size: .78rem;
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-surface);
}

/* ==========================================================================
   קצב המשטחים בדף הבית
   ==========================================================================
   בוורדפרס הרקע המתחלף נקבע ב-‎.section:nth-child(even)‎ ובצבע
   ‎#f6f8fb‎ — אפור כחלחל וקר. משני הצדדים שלו יושבים משטחים בשמנת
   החמה של האתר (‎#f7f5f1‎), וההפרש בין השניים הוא בדיוק ה"אפור
   נוראי" שנראה כאילו משהו לא נטען. שני לבנים שונים באותו מסך הם
   תמיד תקלה בעיני הקורא, גם כשהוא לא יודע להצביע עליה.

   מעבר לכך, ‎nth-child‎ נשבר ברגע שסדר הסקשנים נקבע בבנייה: סקשן
   שהוזז החליף גוון עם שכנו והקצב נשבר באמצע העמוד. לכן ההקצאה
   כאן מפורשת לפי שם הסקשן, ולא לפי מיקומו.

   שני גוונים בלבד — לבן ושמנת — לסירוגין, ופס כהה אחד אצל
   השותפים. משטח כהה שמופיע פעם אחת קורא לעצמו תשומת לב; משטח
   כהה שחוזר הוא רק עוד רקע.
   ========================================================================== */
.legacy #te-main { background: var(--c-surface); }

.legacy #te-main > #about.section,
.legacy #te-main > #attractions.section,
.legacy #te-main > #testimonials.section,
.legacy #te-main > #seo.section,
.legacy #te-main > #contact.section { background: var(--c-surface); }

.legacy #te-main > #destinations.section,
.legacy #te-main > #hotels.section,
.legacy #te-main > #magazine.section { background: var(--c-white); }

/*
 * ‎#why‎ מחזיק גרדיאנט רדיאלי משלו ולכן מקבל רק בסיס נקי מתחתיו,
 * בלי לדרוס את הגרדיאנט.
 */
.legacy #te-main > #why.section.premium { background-color: var(--c-white); }

/* גבול דק בין שני משטחים באותו גוון, כדי שהמעבר לא ייעלם */
.legacy #te-main > #seo.section { border-top: 1px solid var(--border); }

/* ==========================================================================
   אריחי הלוגו — מידה אחידה
   ==========================================================================
   הלוגואים חתוכים עכשיו לפי הסימן עצמו, ולכן יחסי הצורה שלהם שונים
   מאוד זה מזה: אחד רחב ונמוך, אחר כמעט מרובע. אריח שנצמד לרוחב
   התמונה נותן רצועה של מלבנים בשבעה גדלים. האריח מקבל מידה קבועה
   והלוגו מתמרכז בתוכו — מה שמשתנה בין אריח לאריח הוא הלוגו, לא
   המסגרת.
   ========================================================================== */
.legacy #te-main .logo-marquee__track > * {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 152px;
  block-size: 66px;
  padding: var(--sp-3) var(--sp-4);
}
.legacy #te-main .logo-marquee__track img {
  max-inline-size: 100%;
  max-block-size: 100%;
  height: auto;
  width: auto;
}

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

   • שלושה שחורים שונים לכותרות — ‎#111111‎ ברוב הסקשנים,
     ‎#0b1220‎ בקריאה לפעולה, וכחול כהה ב"מי אנחנו".
   • ארבעה גדלי כותרת — ‎30.2px‎, ‎26.9px‎, ‎26.1px‎, ‎40px‎.
   • ריווח אנכי קבוע של ‎44px‎ בכל רוחב מסך, גם ב-‎1600px‎.

   אף אחד מהם אינו נראה כשגיאה בפני עצמו, וביחד הם מה שגורם לדף
   להיראות מורכב מחלקים ולא מעוצב כיחידה.
   ========================================================================== */

/* כותרת סקשן אחת: אותו צבע, אותו גודל, בכל הדף */
.legacy #te-main > .section > .container > h2,
.legacy #te-main > .section > .container > .section-title,
.legacy #te-main > .section .section-title {
  font-size: var(--fs-3xl);
  color: var(--c-navy-950);
  letter-spacing: -.01em;
}
/* הפס הכהה הפוך: כותרת לבנה על נייבי */
.legacy #te-main > .te-strip.te-strip.section .section-title,
.legacy #te-main > .te-strip.te-strip.section h2 { color: var(--c-white); }

/*
 * הכותרת הפותחת נשארת גדולה מהשאר.
 * היא המשפט הראשון של העסק ולא כותרת של רשימה, ולכן היא מקבלת
 * את הדרגה שמעל — זה הבדל מכוון, בניגוד לשלושת הקודמים.
 */
.legacy #te-main > #about.section .about-title { font-size: var(--fs-4xl); }

/* ריווח אנכי שנושם במסך רחב ואינו משתנה במובייל */
.legacy #te-main > .section.section { padding-block: clamp(2.75rem, 4.5vw, 4.25rem); }
.legacy #te-main > .te-strip.te-strip.section.section { padding-block: clamp(2.25rem, 3.5vw, 3.25rem); }

/*
 * שלושה משטחי שמנת ברצף בתחתית הדף — ‎#seo‎, הקריאה לפעולה
 * וטופס הליד — נמחקו זה לתוך זה לגוש אחד ארוך בלי גבול.
 * הקריאה לפעולה עוברת ללבן ומפרידה ביניהם.
 */
.legacy #te-main > #contact.section { background: var(--c-white); }
.lead-section { border-top: 1px solid var(--border); }

/* אריח לוגו נמוך יותר — הסימן היה בגובה 28px בתוך אריח של 82px */
.legacy #te-main .logo-marquee__track > * { block-size: 70px; }

/* כותרת הפס הכהה בגודל הכותרות האחרות — הבדל הגודל היה שריד, לא כוונה */
.legacy #te-main > .te-strip.te-strip.section .section-title { font-size: var(--fs-3xl); }

/* ==========================================================================
   ‎#contact‎ — הקריאה לפעולה שסוגרת את הדף
   ==========================================================================
   מה שהיה: פס ברוחב מלא בגרדיאנט תכלת-בהיר (‎#cfefff→#eaf6ff‎) עם
   הילה רדיאלית, ומיד אחריו טופס הליד. שני משטחים צבעוניים שונים
   שמבקשים את אותו דבר, זה מתחת לזה, וביניהם אין היררכיה.

   מה שיש עכשיו: לוח אחד ממורכז בשפה של כרטיס הליד שמתחתיו —
   משטח שמנת, מסגרת דקה, אותה פינה. שני הבלוקים נקראים כסוגריים
   של אותו רגע: "דברו איתנו עכשיו" ו"או השאירו פרטים".
   ‎!important‎ כאן אינו קיצור דרך: בקוד המקורי יושב
   ‎.footer-cta *{color:inherit !important}‎, ובלעדיו הכותרת נשארת
   בשחור-כחלחל שלה.
   ========================================================================== */
.legacy #te-main > #contact.footer-cta {
  background: var(--c-white);
  color: var(--text-body);
}
.legacy #te-main > #contact.footer-cta::before { display: none; }
.legacy #te-main > #contact.footer-cta > .container {
  max-width: 880px;
  background: var(--c-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--sp-6), 4vw, 3rem) clamp(var(--sp-5), 4vw, 2.5rem);
}
.legacy #te-main > #contact.footer-cta h2 {
  font-size: var(--fs-3xl);
  color: var(--c-navy-950) !important;
  margin-bottom: var(--sp-3);
}
.legacy #te-main > #contact.footer-cta p {
  font-size: var(--fs-md);
  color: var(--text-muted) !important;
  opacity: 1;
  line-height: 1.8;
}

/* ==========================================================================
   גובה אחיד ברצועת המלונות
   ==========================================================================
   הכרטיסים נמדדו בין ‎303‎ ל-‎323‎ פיקסלים: מלון עם שם שנשבר לשתי
   שורות, או תיאור באורך אחר, משך את הכרטיס שלו כלפי מטה והשורה
   נראתה מרופטת. העמודה נמתחת לגובה השורה, והתיאור מוגבל לשתי
   שורות — אותו מבנה שכבר עובד בכרטיסי האטרקציות והיעדים.
   ========================================================================== */
.legacy #te-main #hotels .hotels-grid { align-items: stretch; }
.legacy #te-main #hotels .hotels-grid > * { block-size: 100%; }
.legacy #te-main #hotels .hotel-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.legacy #te-main #hotels .hotel-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: 2.6em;
}
.legacy #te-main #hotels .card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* הכפתור נצמד לתחתית הכרטיס בכל הכרטיסים באותה שורה */
.legacy #te-main #hotels .card-cta { margin-block-start: auto; }

/* ==========================================================================
   ‎#about‎ — הקטנה וליטוש התהליך
   ==========================================================================
   הסקשן תפס מסך שלם: כותרת ב-‎40px‎, טקסט ב-‎17px‎ עם ריווח שורות
   ‎1.85‎, וכרטיס עם ריפוד של ‎34px‎. הוא הראשון אחרי תמונת הכותרת,
   ולכן הוא גם הראשון שדוחף את היעדים אל מתחת לקיפול.

   רשימת השלבים עוברת מ"ארבע שורות עם עיגול" לציר זמן: קו אנכי
   דק אחד שמחבר את ארבעת השלבים, והספרות יושבות עליו כנקודות
   ציון. זה מה שהופך רשימה לתהליך גם בלי לקרוא מילה.
   ========================================================================== */
.legacy #te-main > #about.about-section {
  padding-block: clamp(2.25rem, 3.5vw, 3.25rem);
}
.legacy #te-main #about .about-grid,
.about-team .about-grid {
  grid-template-columns: 1fr .82fr;
  gap: clamp(var(--sp-5), 3vw, 2.5rem);
}
.legacy #te-main > #about.section .about-title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-3);
  max-width: 20em;
}
.legacy #te-main #about .about-text,
.about-team .about-text {
  font-size: var(--fs-md);
  line-height: 1.75;
  max-width: 62ch;
  margin-bottom: var(--sp-4);
}
.legacy #te-main #about .about-kicker,
.about-team .about-kicker { margin-bottom: var(--sp-3); }
.legacy #te-main #about .about-pills .pill,
.about-team .about-pills .pill {
  font-size: var(--fs-3xs);
  padding: 6px var(--sp-3);
}

.legacy #te-main #about .about-side,
.about-team .about-side { padding: clamp(var(--sp-4), 2vw, var(--sp-6)); }
.legacy #te-main #about .about-side h3,
.about-team .about-side h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
}

/*
 * ציר הזמן.
 * הקו יורד מהספרה הראשונה לאחרונה בצד ההתחלה של הכיווניות, ולכן
 * הוא נכתב ב-‎inset-inline-start‎ ולא ב-‎right‎: באתר עברי הוא יעמוד
 * מימין, ובכל עמוד לטיני שישתמש באותו רכיב — משמאל, בלי כלל נוסף.
 */
.legacy #te-main #about .about-side ul,
.about-team .about-side ul {
  position: relative;
  padding-inline-start: var(--sp-6);
}
.legacy #te-main #about .about-side ul::before,
.about-team .about-side ul::before {
  content: "";
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 13px;
  inline-size: 2px;
  background: linear-gradient(var(--c-gold-200), var(--c-sea-200));
  border-radius: 2px;
}
.legacy #te-main #about .about-side li,
.about-team .about-side li {
  position: relative;
  padding: var(--sp-3) 0;
  gap: 0;
  border: 0;
}
.legacy #te-main #about .about-side li + li,
.about-team .about-side li + li { border-top: 0; }
.legacy #te-main #about .about-side li::before,
.about-team .about-side li::before {
  position: absolute;
  inset-inline-start: calc(-1 * var(--sp-6));
  inset-block-start: var(--sp-3);
  inline-size: 28px;
  height: 28px;
  font-size: var(--fs-3xs);
  color: var(--c-gold-700) !important;
  background: var(--c-white);
  border: 2px solid var(--c-gold-200);
  box-shadow: 0 0 0 4px var(--c-white);
}
.legacy #te-main #about .about-side li b,
.about-team .about-side li b { font-size: var(--fs-sm); }
.legacy #te-main #about .about-side li span,
.about-team .about-side li span { font-size: var(--fs-2xs); line-height: 1.6; }

/* הנקודה הפעילה נצבעת במעבר עכבר על השלב */
.legacy #te-main #about .about-side li:hover::before,
.about-team .about-side li:hover::before {
  color: var(--c-navy-950) !important;
  border-color: var(--c-gold-500);
  background: var(--c-gold-050);
}

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

   קודם הוא לא היה מיותר אלא הכרחי: קובצי הלוגו נשמרו על בד לבן
   אטום, ולכן הלבן היה חלק מהתמונה עצמה — להסיר את האריח היה משאיר
   מלבן לבן בדיוק באותו מקום. ‎trim-logos.js‎ מנקה עכשיו את הרקע
   במילוי משטח מהדפנות, כך שהקובץ מכיל רק את הסימן, והאריח באמת
   מיותר.

   הסימן מוצג בלבן מלא. ‎brightness(0) invert(1)‎ על קובץ עם רקע
   שקוף צובע רק את הפיקסלים של הלוגו — זה בדיוק מה שנכשל קודם,
   כשהמסנן צבע את הבד כולו והתוצאה הייתה מלבן לבן ריק.

   צבעי המותג אינם אפשריים על הרקע הזה: אמירייטס ‎#8b0930‎, בנגקוק
   איירווייז ‎#49498d‎ ואל על כהים ברובם — ‎98%‎, ‎93%‎ ו-‎45%‎
   מהפיקסלים מתחת לסף הכהות — וכהה על כהה אינו נקרא. לוגו בצבע
   דורש משטח בהיר מתחתיו.
   ========================================================================== */
.legacy #te-main .logo-marquee .partner-logo,
.legacy #te-main .logo-marquee__track > .partner-logo,
.legacy #te-main .logo-marquee__track > * {
  background: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 0 var(--sp-5);
  inline-size: auto;
  min-inline-size: 128px;
  block-size: 56px;
  display: grid;
  place-items: center;
}
.legacy #te-main .logo-marquee__track > *:hover {
  transform: none;
  box-shadow: none;
}
.legacy #te-main .logo-marquee__track img {
  max-inline-size: 100%;
  max-block-size: 40px;
  inline-size: auto;
  block-size: auto;
  filter: brightness(0) invert(1);
  opacity: .78;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.legacy #te-main .logo-marquee__track > *:hover img {
  opacity: 1;
  transform: scale(1.05);
}

/* ==========================================================================
   ‎#about‎ — תיקוני מידה וציר
   ========================================================================== */
/*
 * הקו של ציר הזמן נגמר מתחת לספרה האחרונה ומעליה מתחיל לפני
 * הראשונה — שני זנבות תלויים באוויר. מרכז העיגול יושב ‎26px‎
 * מראש הפריט (‎12px‎ ריפוד + מחצית מ-‎28px‎), ולכן זה גם המרחק
 * שבו הקו צריך להתחיל ולהסתיים.
 */
.legacy #te-main #about .about-side ul::before,
.about-team .about-side ul::before { inset-block: 26px; }

/*
 * שתי העמודות בגבהים שונים, ולכן הצד הקצר השאיר חלל מת בתחתיתו.
 * מרכוז אנכי מחלק את ההפרש לשני הצדדים במקום לערום אותו בצד אחד.
 */
.legacy #te-main #about .about-grid,
.about-team .about-grid { align-items: center; }

/* הסקשן עדיין תפס יותר מדי גובה ביחס למה שהוא אומר */
.legacy #te-main > #about.about-section { padding-block: clamp(2rem, 3vw, 2.75rem); }
.legacy #te-main #about .about-text,
.about-team .about-text { line-height: 1.7; margin-bottom: var(--sp-4); }
.legacy #te-main #about .about-side,
.about-team .about-side { padding: clamp(var(--sp-4), 1.8vw, var(--sp-5)); }
.legacy #te-main #about .about-side li,
.about-team .about-side li { padding: 10px 0; }
.legacy #te-main #about .about-side li::before,
.about-team .about-side li::before { inset-block-start: 10px; }
.legacy #te-main #about .about-side ul::before,
.about-team .about-side ul::before { inset-block: 24px; }

/*
 * הקו עובר מהרשימה אל הפריטים.
 * קו אחד על ה-‎ul‎ חייב לדעת היכן יושב מרכז העיגול האחרון, וזה
 * נתון שתלוי באורך הטקסט של השלב האחרון — שתי שורות או שלוש
 * מזיזות אותו. התוצאה הייתה זנב שממשיך מתחת לספרה 4 באוויר.
 *
 * כאן כל שלב מותח מקטע אל השלב הבא: מתחתית העיגול שלו ועד ראש
 * העיגול הבא. לשלב האחרון אין מקטע, ולכן הקו נגמר בדיוק על 4
 * בכל אורך טקסט.
 */
.legacy #te-main #about .about-side ul::before,
.about-team .about-side ul::before { display: none; }
.legacy #te-main #about .about-side li:not(:last-child)::after,
.about-team .about-side li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--sp-6) + 13px);
  inset-block-start: 38px;
  inset-block-end: -10px;
  inline-size: 2px;
  background: linear-gradient(var(--c-gold-200), var(--c-sea-200));
  border-radius: 2px;
}

/* ==========================================================================
   "איך זה עובד אצלנו בפועל" — צמצום
   ==========================================================================
   הכרטיס החזיק ארבעה שלבים ב-292 פיקסלים, כשרובם ריווח ולא טקסט:
   ריפוד של 10 פיקסלים מעל ומתחת לכל שלב, מרווח של 28 פיקסלים
   לעמודת הספרות, וריווח שורות 1.6 על תיאור בן שתי שורות.

   המידות כאן נכתבות בפיקסלים ולא בטוקנים, כי ארבע מהן תלויות זו
   בזו: רוחב העמודה, מיקום העיגול בתוכה, קוטרו, ותחילת המקטע
   שמחבר אותו לבא אחריו. טוקן שישתנה בעתיד היה מפרק את החיבור
   בין הספרה לקו. העמודה 30, העיגול 24 במרכזה (‎30-24+18=24‎),
   והמקטע יוצא מתחתיתו ב-‎30‎ ונעצר בראש הבא.
   ========================================================================== */
.legacy #te-main #about .about-side,
.about-team .about-side { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.legacy #te-main #about .about-side h3,
.about-team .about-side h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
}
.legacy #te-main #about .about-side ul,
.about-team .about-side ul { padding-inline-start: 30px; }
.legacy #te-main #about .about-side li,
.about-team .about-side li { padding: 6px 0; }
.legacy #te-main #about .about-side li::before,
.about-team .about-side li::before {
  inset-inline-start: -30px;
  inset-block-start: 6px;
  inline-size: 24px;
  height: 24px;
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--c-white);
}
.legacy #te-main #about .about-side li:not(:last-child)::after,
.about-team .about-side li:not(:last-child)::after {
  inset-inline-start: -19px;
  inset-block-start: 30px;
  inset-block-end: -6px;
}
.legacy #te-main #about .about-side li b,
.about-team .about-side li b { margin-bottom: 1px; }
.legacy #te-main #about .about-side li span,
.about-team .about-side li span { line-height: 1.45; }

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

   אל על הוא היוצא מן הכלל, ולא לפי טעם: הסימן שלו כחול כהה
   (‎#1b2a5e‎ בערך) על רקע ‎#072742‎ — אותה משפחת גוונים ואותה רמת
   כהות. צבע לא יעזור לו כאן, ולכן הוא נשאר לבן. הבורר נשען על
   ה-‎alt‎ ולא על שם הקובץ, כי שם הקובץ הוא ‎5-c57c2de258.webp‎
   וישתנה בכל ייצוא מחדש, בעוד שם חברת התעופה לא.
   ========================================================================== */
.legacy #te-main .logo-marquee__track img {
  filter: brightness(1.28) saturate(1.15) contrast(1.05);
  opacity: .95;
}
.legacy #te-main .logo-marquee__track > *:hover img {
  filter: brightness(1.4) saturate(1.25) contrast(1.05);
  opacity: 1;
}
.legacy #te-main .logo-marquee__track img[alt*="אל על"],
.legacy #te-main .logo-marquee__track img[alt*="אלעל"] {
  filter: brightness(0) invert(1);
  opacity: .9;
}
.legacy #te-main .logo-marquee__track > *:hover img[alt*="אל על"],
.legacy #te-main .logo-marquee__track > *:hover img[alt*="אלעל"] {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* ==========================================================================
   השותפים ו"מגיע לכם יותר" — צמצום לגלילה אחת
   ==========================================================================
   שני הסקשנים תפסו יחד כ-1,380 פיקסלים: 441 לפס השותפים ו-940
   לסקשן שמתחתיו. הם טוענים את אותה טענה משני צדדים — "עם מי
   אנחנו עובדים" ו"איך אנחנו עובדים" — ולכן עדיף שייקראו כרצף
   אחד ולא כשתי עצירות.

   מה שיורד הוא ריווח וגדלים, לא תוכן: אף כרטיס, שורה או משפט
   אינם מוסרים.
   ========================================================================== */
.legacy #te-main > .te-strip.te-strip.section.section { padding-block: clamp(1.5rem, 2.4vw, 2.1rem); }
.legacy #te-main .te-strip.te-strip .section-title { margin-bottom: var(--sp-1); }
.legacy #te-main .te-strip.te-strip .section-subtitle {
  font-size: var(--fs-2xs);
  margin-bottom: var(--sp-3);
}
.legacy #te-main .te-strip.te-strip .logo-marquee { margin-block: var(--sp-2); }
.legacy #te-main .logo-marquee__track > * { block-size: 48px; }
.legacy #te-main .te-strip.te-strip .chain-marquee {
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
}
.legacy #te-main .te-strip.te-strip .chain-marquee__lede { margin-bottom: var(--sp-2); }
.legacy #te-main .te-strip.te-strip .chain-chip { font-size: var(--fs-2xs); padding: 5px var(--sp-4); }

/* "מגיע לכם יותר" */
.legacy #te-main > #why.section.section { padding-block: clamp(1.75rem, 2.6vw, 2.4rem); }
.legacy #te-main #why .section-subtitle {
  font-size: var(--fs-2xs);
  margin-bottom: var(--sp-4);
}
.legacy #te-main #why .premium-shell { padding: var(--sp-4); }
.legacy #te-main #why .premium-head { gap: var(--sp-4); margin-bottom: var(--sp-4); }
.legacy #te-main #why .premium-title { font-size: var(--fs-lg); line-height: 1.35; margin-bottom: var(--sp-2); }
.legacy #te-main #why .premium-lead { font-size: var(--fs-2xs); line-height: 1.6; }
.legacy #te-main #why .proof { padding: var(--sp-2) var(--sp-3); }
.legacy #te-main #why .proof b { font-size: var(--fs-2xs); }
.legacy #te-main #why .proof small { font-size: var(--fs-3xs); }
.legacy #te-main #why .premium-grid { gap: var(--sp-2); }
.legacy #te-main #why .feature { padding: var(--sp-3); }
.legacy #te-main #why .feature-top { margin-bottom: var(--sp-2); }
.legacy #te-main #why .feature-icon { inline-size: 30px; block-size: 30px; font-size: var(--fs-2xs); }
.legacy #te-main #why .feature h3 { font-size: var(--fs-sm); margin-bottom: 3px; }
.legacy #te-main #why .feature p { font-size: var(--fs-3xs); line-height: 1.55; }

/* ==========================================================================
   כרטיס עלייה למטוס — ליד "כבר יש לכם כרטיס טיסה?"
   ========================================================================== */
.lead-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.lead-head__text { min-inline-size: 0; }
.lead-head .lead-sub { margin-bottom: 0; }

.boarding-pass {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  inline-size: 224px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(145deg, var(--c-navy-900), var(--c-navy-800));
  color: var(--c-white);
  box-shadow: 0 14px 30px -16px rgba(4, 24, 46, .75);
  transform: rotate(-2deg);
  transition: transform var(--dur-mid) var(--ease);
}
.lead-card:hover .boarding-pass { transform: rotate(0deg) translateY(-2px); }

/* הספח: פס זהב עם קו הניקוב שמפריד בינו לגוף */
.boarding-pass__stub {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: var(--sp-3) var(--sp-2);
  background: linear-gradient(160deg, var(--c-gold-500), var(--c-gold-600));
  color: var(--c-navy-950);
  border-inline-end: 2px dashed rgba(4, 24, 46, .35);
}
.boarding-pass__label {
  font-size: 8px;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.boarding-pass__code {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  letter-spacing: .06em;
}

.boarding-pass__body {
  flex: 1 1 auto;
  padding: var(--sp-3) var(--sp-4);
  display: grid;
  gap: 5px;
}
/* קודי שדות התעופה נקראים משמאל לימין גם בעמוד עברי */
.boarding-pass__route {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.boarding-pass__iata {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: .04em;
  line-height: 1;
}
.boarding-pass__plane { color: var(--c-gold-500); transform: rotate(90deg); }
.boarding-pass__meta {
  direction: ltr;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, .62);
}
/* פס הברקוד — גרדיאנט חוזר, בלי קובץ ובלי בקשת רשת */
.boarding-pass__barcode {
  block-size: 16px;
  margin-block-start: 2px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .85) 0 2px,
    transparent 2px 4px,
    rgba(255, 255, 255, .85) 4px 5px,
    transparent 5px 8px
  );
  opacity: .5;
}

@media (max-width: 720px) {
  .lead-head { display: block; }
  .lead-head .lead-sub { margin-bottom: var(--sp-4); }
  /* במובייל הכרטיס עובר מתחת לכותרת ומתיישר לצד הקריאה */
  .boarding-pass { inline-size: 200px; transform: rotate(-1.5deg); }
}

/* ==========================================================================
   עמוד הטיסות
   ==========================================================================
   הכותרת היא פס כהה ברוחב מלא עם קשת טיסה מונפשת, וכרטיס הטופס
   עולה עליו ומכסה חלק מתחתיתו. החפיפה היא מה שמחבר בין השניים:
   הגולש רואה את הבקשה כבר בקיפול הראשון, לא אחרי גלילה.
   ========================================================================== */
.flights-hero {
  position: relative;
  background: linear-gradient(155deg, var(--c-navy-900) 0%, var(--c-navy-950) 55%, #04162a 100%);
  color: var(--text-on-dark);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
}
/* זוהר שמונע מהפס להיראות כמלבן שטוח */
.flights-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 110% at 12% 0%, rgba(18, 160, 179, .26), transparent 62%),
    radial-gradient(45% 100% at 88% 100%, rgba(240, 168, 26, .16), transparent 60%);
}
.flights-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(var(--sp-5), 4vw, 3rem);
  align-items: center;
}
.flights-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  color: var(--c-gold-500);
  margin-bottom: var(--sp-3);
}
.flights-hero h1 {
  font-size: var(--fs-4xl);
  line-height: 1.18;
  color: var(--c-white);
  margin-bottom: var(--sp-4);
  max-width: 15em;
}
.flights-hero__lede {
  font-size: var(--fs-md);
  line-height: 1.75;
  color: rgba(255, 255, 255, .78);
  max-width: 54ch;
  margin-bottom: var(--sp-5);
}
.flights-hero__points {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  padding: 0;
  margin: 0;
}
.flights-hero__points li {
  position: relative;
  padding-inline-start: 26px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .88);
}
/* סימן וי מצויר ב-CSS — בלי גופן אייקונים ובלי בקשת רשת */
.flights-hero__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: .45em;
  inline-size: 9px;
  block-size: 5px;
  /*
   * גבולות פיזיים ולא לוגיים.
   * סימן וי הוא צורה, לא טקסט: ‎border-inline-start‎ מתהפך לימין
   * בעמוד עברי, והצורה שהתקבלה הייתה חץ ‎>‎ ולא וי.
   */
  border-left: 2px solid var(--c-gold-500);
  border-bottom: 2px solid var(--c-gold-500);
  transform: rotate(-45deg);
}

/* ---- קשת המסלול ---- */
.flight-route { position: relative; }
.flight-route__svg { inline-size: 100%; block-size: auto; color: var(--c-gold-500); }
.flight-route__path {
  stroke: rgba(255, 255, 255, .34);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
}
.flight-route__dot { fill: var(--c-sea-400); }
.flight-route__ends {
  display: flex;
  justify-content: space-between;
  direction: ltr;
  margin-top: -14px;
  padding-inline: 10px;
}
.flight-route__end { display: grid; justify-items: center; gap: 2px; }
.flight-route__end b {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: .05em;
  color: var(--c-white);
  line-height: 1;
}
.flight-route__end small { font-size: var(--fs-3xs); color: rgba(255, 255, 255, .6); }

@media (prefers-reduced-motion: reduce) {
  .flight-route__plane animateMotion { display: none; }
  .flight-route__plane { display: none; }
}

/* ---- כרטיס הטופס, עולה על הפס הכהה ---- */
.flights-form-section { padding-block-start: 0; background: var(--c-surface); }
.flights-form-section .container { position: relative; }
.flight-card {
  margin-block-start: clamp(-3.5rem, -5vw, -2rem);
  max-width: 900px;
}
.flight-form .lead-grid { grid-template-columns: repeat(2, 1fr); }
.flight-form select {
  inline-size: 100%;
  min-block-size: 46px;
  padding: 0 var(--sp-3);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.flight-form select:focus-visible {
  outline: 2px solid var(--c-sea-500);
  outline-offset: 1px;
  border-color: var(--c-sea-500);
}

/* ---- חברות התעופה ---- */
.flights-airlines { background: var(--c-white); }
.flights-airlines .partners-grid { margin-block-start: var(--sp-4); }
.flights-airlines .logo-marquee__track > * { block-size: 56px; }
.flights-airlines .logo-marquee__track img {
  max-block-size: 40px;
  inline-size: auto;
  block-size: auto;
  filter: grayscale(1);
  opacity: .7;
  transition: filter var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease);
}
.flights-airlines .logo-marquee__track > *:hover img { filter: none; opacity: 1; }

/* ---- ארבעת השלבים ---- */
.flights-steps { background: var(--c-surface); }
.flight-steps {
  list-style: none;
  counter-reset: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  padding: 0;
  margin: var(--sp-5) 0 0;
}
.flight-steps li {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.flight-steps li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.flight-step__num {
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--c-gold-700);
  background: var(--c-gold-050);
  border: 2px solid var(--c-gold-200);
  border-radius: var(--r-full);
}
.flight-steps li:hover .flight-step__num {
  color: var(--c-white);
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
}
.flight-steps b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--c-navy-950);
  margin-bottom: 3px;
}
.flight-steps span:not(.flight-step__num) {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- שבבי היעדים ---- */
.flights-dests { background: var(--c-white); }
.flights-dests__chips { margin-block-start: var(--sp-4); justify-content: center; }

@media (max-width: 900px) {
  .flights-hero__inner { grid-template-columns: 1fr; }
  .flights-hero h1 { max-width: none; }
  .flight-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .flight-form .lead-grid { grid-template-columns: 1fr; }
  .flight-steps { grid-template-columns: 1fr; }
  .flight-card { margin-block-start: -1.5rem; }
}

/* ==========================================================================
   לשונית כרטיס הטיסה ומגירת הטופס
   ==========================================================================
   הלשונית נעוצה לדופן המסך בגובה האמצע, והטופס נפתח ממנה כמגירה.
   הטופס עצמו לא שוכפל ולא הוסתר — הוא אותו ‎.lead-section‎, מוזז
   מחוץ למסך ב-‎translate‎ ולא ב-‎display:none‎, ולכן הוא נשאר בזרימת
   הקריאה של גוגל.

   הצד: הלשונית בשמאל, כי הוואטסאפ הצף יושב בשמאל למטה ווידג'ט
   הנגישות בימין למטה; אמצע-שמאל הוא המקום היחיד שאינו מתנגש.
   ========================================================================== */
/*
 * המיקום הקבוע עבר מהלשונית אל העטיפה שלה.
 *
 * הלשונית הייתה ‎position: fixed‎, כלומר מחוץ לזרימת המסמך, ולכן
 * ה-‎<div>‎ שעוטף אותה היה תיבה בגודל 0×0 במקום כלשהו בגוף העמוד.
 * כפתור הסגירה, שממוקם מוחלט מול העטיפה, נחת באותה נקודה — הרחק
 * מהלשונית הנראית — ו-‎.flight-tab-wrap:hover‎ לא נורה מעולם כי
 * לעטיפה לא היה שטח.
 *
 * כשהעטיפה היא הקבועה והלשונית ילד רגיל בתוכה, שתיהן תופסות את
 * אותו מקום על המסך, הכפתור יושב על הפינה שלה והריחוף עובד.
 */
.flight-tab-wrap {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 0;
  transform: translateY(-50%);
  z-index: 60;
}

.flight-tab {
  position: relative;
  transform: translateX(calc(-1 * var(--tab-hide, 0px)));
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  font: inherit;
  color: var(--c-white);
  background: linear-gradient(145deg, var(--c-navy-900), var(--c-navy-950));
  border: 0;
  border-start-end-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
  box-shadow: 0 12px 34px -14px rgba(4, 24, 46, .85);
  cursor: pointer;
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.flight-tab:hover { transform: translateX(4px); }
.flight-tab:focus-visible { outline: 3px solid var(--c-gold-500); outline-offset: 3px; }

/* הטקסט אנכי, כדי שהלשונית תישאר צרה ולא תכסה תוכן */
.flight-tab__label {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  writing-mode: vertical-rl;
  white-space: nowrap;
  color: var(--c-gold-500);
}
/* הכרטיס שבתוך הלשונית — מוקטן, בלי צל וההטיה שלו */
.flight-tab .boarding-pass {
  inline-size: 118px;
  transform: none;
  box-shadow: none;
  border-radius: var(--r-sm);
}
.flight-tab .boarding-pass__stub { padding: var(--sp-2) 5px; }
.flight-tab .boarding-pass__body { padding: var(--sp-2) var(--sp-3); gap: 3px; }
.flight-tab .boarding-pass__iata { font-size: var(--fs-sm); }
.flight-tab .boarding-pass__meta,
.flight-tab .boarding-pass__label { display: none; }
.flight-tab .boarding-pass__barcode { block-size: 10px; }

/* ---- המגירה ---- */
.flight-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 70;
  inline-size: min(560px, 100vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-surface);
  box-shadow: 0 0 60px -10px rgba(4, 24, 46, .55);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform var(--dur-slow, .32s) var(--ease), visibility 0s linear .32s;
}
.flight-drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(4, 24, 46, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease), visibility 0s linear .25s;
}
.flight-open .flight-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow, .32s) var(--ease), visibility 0s;
}
.flight-open .flight-drawer__scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
/* הלשונית מתחבאת כשהמגירה פתוחה — היא מתחתיה ממילא */
.flight-open .flight-tab { --tab-hide: 120px; }

.flight-drawer__close {
  position: sticky;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  margin: var(--sp-3) var(--sp-3) calc(-1 * var(--sp-5));
  font-size: 22px;
  line-height: 1;
  color: var(--text-body);
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.flight-drawer__close:hover { background: var(--c-surface); color: var(--c-navy-950); }
.flight-drawer__close:focus-visible { outline: 2px solid var(--c-sea-500); outline-offset: 2px; }

/* בתוך המגירה הכרטיס ממלא את הרוחב ואינו מרחף */
.flight-drawer .lead-section { border-top: 0; padding-block: var(--sp-5) var(--sp-6); }
.flight-drawer .lead-card {
  max-width: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0 var(--sp-5);
}
.flight-drawer .lead-grid { grid-template-columns: 1fr; }
.flight-drawer .lead-choice { grid-template-columns: 1fr; }

/* גלילת הרקע נעצרת כשהמגירה פתוחה */
.flight-open body { overflow: hidden; }

@media (max-width: 560px) {
  .flight-tab { padding: var(--sp-2); }
  .flight-tab .boarding-pass { inline-size: 92px; }
  .flight-tab__label { font-size: var(--fs-3xs); }
  .flight-drawer { inline-size: 100vw; }
}
/*
 * ‼️ ההחלטה המותנית שלא חלה — ומה באמת קרה בגללה.
 *
 * ‎.flight-drawer‎ בתוך שאילתת המדיה הוא ‎(0,1,0)‎, ואילו
 * ‎.flight-open .flight-drawer‎ הוא ‎(0,2,0)‎. **שאילתת מדיה אינה
 * מוסיפה סגוליות**, ולכן הכלל המותנה הפסיד בדיוק במצב שבו הוא
 * נועד לפעול — כשהמגירה נפתחת. אותה משפחה של ‎grid--2‎.
 *
 * ‼️ אבל הנזק שהיה צפוי לא קרה, ושווה לדעת למה:
 * ‎tokens.css:149‎ מחזיק ‎transition-duration: 0.01ms !important‎ על
 * ‎*‎, ו-‎!important‎ מנצח כל סגוליות. כלומר המשתמש **לא** קיבל את
 * ההנפשה המלאה — הוא קיבל הנפשה של 0.01ms. הכלל כאן היה מת, לא
 * מזיק.
 *
 * מה כן נשאר: ‎transition-delay‎ אינו ברשימת ה-‎!important‎, ולכן
 * ההשהיה של ‎visibility 0s linear .32s‎ שרדה. המגירה נסגרת מיד
 * ונשארת ‎visible‎ עוד 320ms — מכסה מסך ותופסת פוקוס אחרי שכבר
 * "נסגרה". קטן, אמיתי, והפוך בדיוק ממה שהכלל ביקש.
 *
 * התיקון מוסיף את שני הסלקטורים של המצב הפתוח. ‎transition: none
 * מאפס גם את ההשהיה.
 */
@media (prefers-reduced-motion: reduce) {
  .flight-tab,
  .flight-drawer,
  .flight-drawer__scrim,
  .flight-open .flight-drawer,
  .flight-open .flight-drawer__scrim { transition: none; }
}

/* ==========================================================================
   עיגון הלשונית והמגירה — לדופן ימין, במפורש
   ==========================================================================
   ‎inset-inline-start‎ מתורגם בעמוד עברי לימין, ולכן הלשונית נחתה
   בימין — וזה המקום הנכון: הוואטסאפ הצף תופס את שמאל-למטה.
   הבעיה הייתה ש-‎translateX‎ הוא פיזי ואינו מתהפך: ‎-102%‎ הזיז את
   המגירה הסגורה שמאלה, כלומר אל תוך המסך במקום החוצה, ורק
   ‎visibility:hidden‎ הסתיר אותה. האנימציה הייתה נפתחת מהכיוון
   ההפוך.

   לכן העיגון כאן פיזי ומפורש — ‎right‎ ולא ‎inset-inline-start‎ —
   כך שכיוון ההחלקה וכיוון העיגון מדברים באותה שפה ואי אפשר
   שייפרדו שוב.
   ========================================================================== */
/*
 * ההצמדה לדופן הימנית חלה על העטיפה, לא על הלשונית.
 *
 * כל עוד הלשונית עצמה נשאה ‎right: 0‎ ו-‎translateY(-50%)‎, היא
 * ציירה את עצמה במקום אחר מהעטיפה שמחזיקה את כפתור הסגירה —
 * הפרש של 41 פיקסל במדידה. הכפתור ריחף באוויר במקום על הפינה.
 * כאן שתיהן חולקות בדיוק את אותו מלבן.
 */
.flight-tab-wrap {
  inset-inline-start: auto;
  right: 0;
  left: auto;
}
.flight-tab {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  border-radius: var(--r-md) 0 0 var(--r-md);
  transform: translateX(var(--tab-hide, 0px));
}
.flight-tab:hover { transform: translateX(-4px); }
.flight-open .flight-tab-wrap { --tab-hide: 130px; }
.flight-open .flight-tab { --tab-hide: 130px; }

.flight-drawer {
  inset-inline-start: auto;
  right: 0;
  left: auto;
  transform: translateX(102%);
}
.flight-open .flight-drawer { transform: translateX(0); }

.flight-drawer__close {
  inset-inline-start: auto;
  margin-inline: auto var(--sp-3);
}

/*
 * המגירה מעל הכותרת.
 * ‎.site-header‎ דביקה עם ‎z-index:100‎, והמגירה ישבה על ‎70‎ — ולכן
 * הכותרת נשארה מעליה וכפתור הסגירה, שנמצא בראש המגירה, היה מכוסה
 * על ידה ולא ניתן ללחיצה. מגירה מודאלית חייבת לכסות את כל מה
 * שמתחתיה, כולל הניווט.
 */
.flight-drawer { z-index: 120; }
.flight-drawer__scrim { z-index: 115; }

/* ==========================================================================
   פרישת יעדי הפנים מבנגקוק
   ==========================================================================
   הקווים אינם רצים במקביל לטיסה אלא מחכים לה: המחזור הוא 9 שניות,
   המטוס מגיע ל-BKK ב-44% ממנו, והציור של כל קו מתחיל רק אחרי.
   ‎--i‎ נותן לכל קו השהיה משלו כך שהם נפתחים בזה אחר זה ולא בבת
   אחת — זה מה שהופך את זה לפרישה ולא להבזק.
   ========================================================================== */
.flight-route__fan {
  stroke: rgba(45, 190, 208, .55);
  stroke-width: 1.5;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: te-fan-draw 9s var(--ease) infinite;
  animation-delay: calc(var(--i) * .16s);
}
.flight-route__fan-dot {
  fill: var(--c-gold-500);
  opacity: 0;
  animation: te-fan-pop 9s var(--ease) infinite;
  animation-delay: calc(var(--i) * .16s);
}
.flight-route__fan-label {
  fill: rgba(255, 255, 255, .8);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  opacity: 0;
  animation: te-fan-pop 9s var(--ease) infinite;
  animation-delay: calc(var(--i) * .16s + .1s);
}

/* הפעימה סביב בנגקוק — רגע הנחיתה */
.flight-route__pulse {
  fill: none;
  stroke: var(--c-sea-400);
  stroke-width: 2;
  opacity: 0;
  animation: te-hub-pulse 9s var(--ease) infinite;
}

.flight-route__code {
  fill: var(--c-white);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-black);
  letter-spacing: .05em;
}
.flight-route__city {
  fill: rgba(255, 255, 255, .6);
  font-family: var(--font-body);
  font-size: 11px;
}

@keyframes te-fan-draw {
  0%, 44%   { stroke-dashoffset: 260; }
  62%, 90%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes te-fan-pop {
  0%, 56%   { opacity: 0; transform: scale(.6); }
  66%, 90%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; }
}
@keyframes te-hub-pulse {
  0%, 40%  { opacity: 0; r: 9; }
  46%      { opacity: .9; r: 9; }
  60%      { opacity: 0; r: 26; }
  100%     { opacity: 0; r: 9; }
}

@media (prefers-reduced-motion: reduce) {
  .flight-route__fan { stroke-dashoffset: 0; animation: none; }
  .flight-route__fan-dot, .flight-route__fan-label { opacity: 1; animation: none; }
  .flight-route__pulse { animation: none; }
}

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

   כאן אין לוח בכלל: הלשונית היא שני הכרטיסים עצמם, מוטים אחד
   מאחורי השני כמו זוג כרטיסים שמונחים על שולחן. הכותרת מופיעה
   רק בריחוף, והשם הנגיש יושב על הכפתור ולכן קורא מסך שומע אותו
   תמיד.
   ========================================================================== */
.flight-tab {
  right: var(--sp-2);
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  gap: var(--sp-3);
  align-items: center;
  filter: drop-shadow(0 14px 26px rgba(4, 24, 46, .5));
}
.flight-tab:hover { background: none; }

.flight-tab__stack {
  position: relative;
  display: block;
  inline-size: 112px;
  block-size: 82px;
  flex: 0 0 auto;
}
.flight-tab .boarding-pass {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 112px;
  box-shadow: 0 8px 18px -10px rgba(4, 24, 46, .9);
  transition: transform var(--dur-mid) var(--ease);
}
/* האחורי מציץ מתחת לקדמי — הטיה גדולה יותר והסטה קלה */
.flight-tab .boarding-pass--back {
  transform: translateY(-50%) rotate(-15deg) translate(-7px, 5px);
  opacity: .6;
}
.flight-tab .boarding-pass:not(.boarding-pass--back) {
  transform: translateY(-50%) rotate(-6deg);
}
.flight-tab:hover .boarding-pass--back {
  transform: translateY(-50%) rotate(-19deg) translate(-11px, 7px);
}
.flight-tab:hover .boarding-pass:not(.boarding-pass--back) {
  transform: translateY(-50%) rotate(-3deg) translate(2px, -2px);
}

/* פנים הכרטיס בקנה מידה קטן */
.flight-tab .boarding-pass__stub { padding: 5px 4px; }
.flight-tab .boarding-pass__code { font-size: 9px; }
.flight-tab .boarding-pass__body { padding: 6px 8px; gap: 2px; }
.flight-tab .boarding-pass__iata { font-size: 13px; }
.flight-tab .boarding-pass__plane { inline-size: 13px; block-size: 13px; }
.flight-tab .boarding-pass__meta { display: none; }
.flight-tab .boarding-pass__label { display: none; }
.flight-tab .boarding-pass__barcode { block-size: 8px; }

/* הכותרת — נפתחת בריחוף ובמיקוד מקלדת בלבד */
.flight-tab__label {
  order: -1;
  max-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  writing-mode: horizontal-tb;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--c-navy-950);
  background: var(--c-white);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  padding: 0;
  transition: max-inline-size var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease),
              padding var(--dur-mid) var(--ease);
}
.flight-tab:hover .flight-tab__label,
.flight-tab:focus-visible .flight-tab__label {
  max-inline-size: 15em;
  opacity: 1;
  padding: var(--sp-2) var(--sp-4);
}

@media (max-width: 560px) {
  .flight-tab { right: 4px; }
  .flight-tab__stack { inline-size: 88px; block-size: 66px; }
  .flight-tab .boarding-pass { inline-size: 88px; }
  .flight-tab .boarding-pass__iata { font-size: 11px; }
  /* במסך צר אין מקום לכותרת שנפתחת */
  .flight-tab__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flight-tab .boarding-pass { transition: none; }
}

/* הציור נדחף שמאלה ומקבל עוד רוחב — הוא היה צמוד מדי לטור הטקסט */
.flights-hero__inner { grid-template-columns: 1fr 1.02fr; }
.flight-route { transform: translateX(-28px); }
@media (max-width: 900px) { .flight-route { transform: none; } }

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

   ‎.is-gated‎ מתווסף ב-JS ולא קיים ב-HTML הסטטי — בלי JS הטופס
   נשאר פתוח ושמיש, במקום להיחסם לצמיתות.
   ========================================================================== */
.lead-form.is-gated .lead-grid,
.lead-form.is-gated .lead-more-toggle,
.lead-form.is-gated .lead-more,
.lead-form.is-gated .lead-consent,
.lead-form.is-gated .lead-actions { display: none; }

.lead-form.is-gated.is-open .lead-grid { display: grid; }
.lead-form.is-gated.is-open .lead-more-toggle { display: inline-flex; }
.lead-form.is-gated.is-open .lead-consent { display: flex; }
.lead-form.is-gated.is-open .lead-actions { display: flex; }

/* השדות שנפתחו מקבלים כניסה עדינה, כדי שהמעבר ייקרא כהמשך */
.lead-form.is-gated.is-open .lead-grid,
.lead-form.is-gated.is-open .lead-more-toggle,
.lead-form.is-gated.is-open .lead-consent,
.lead-form.is-gated.is-open .lead-actions {
  animation: te-reveal var(--dur-mid) var(--ease) both;
}
.lead-form.is-gated.is-open .lead-more-toggle { animation-delay: .04s; }
.lead-form.is-gated.is-open .lead-consent { animation-delay: .08s; }
.lead-form.is-gated.is-open .lead-actions { animation-delay: .12s; }

@keyframes te-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* רמז קצר מתחת לכפתורים, עד שנבחרת תשובה */
.lead-form.is-gated .lead-choice::after {
  content: "בחרו אחת מהאפשרויות כדי להמשיך";
  display: block;
  margin-block-start: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  text-align: center;
}
.lead-form.is-gated.is-open .lead-choice::after { display: none; }

/* האפשרות שנבחרה — סימון ברור שהיא זו שנרשמה */
.lead-opt.is-active {
  color: var(--c-navy-950);
  background: var(--c-gold-050);
  border-color: var(--c-gold-500);
  box-shadow: inset 0 0 0 1px var(--c-gold-500);
}

@media (prefers-reduced-motion: reduce) {
  .lead-form.is-gated.is-open .lead-grid,
  .lead-form.is-gated.is-open .lead-more-toggle,
  .lead-form.is-gated.is-open .lead-consent,
  .lead-form.is-gated.is-open .lead-actions { animation: none; }
}

/* ==========================================================================
   ריצוד בריחוף — אלמנט שזז מתחת לסמן
   ==========================================================================
   כשריחוף מזיז את האלמנט שעליו מרחפים, נוצרת לולאה: הסמן נמצא
   בשוליים, האלמנט זז, הסמן כבר לא עליו, ‎:hover‎ מתבטל, האלמנט
   חוזר למקומו, ‎:hover‎ חוזר — עשרות פעמים בשנייה. זה מה שנראה
   כמו הבהוב או פתיחה-וסגירה מהירה.

   שלושה מקרים כאלה היו כאן, וכולם נפתרים באותו עיקרון: מה שזז
   הוא התוכן הפנימי, ולא האלמנט שמחזיק את ה-‎:hover‎. שטח הלחיצה
   נשאר קבוע לחלוטין, ולכן אין ממה לצאת.
   ========================================================================== */

/*
 * לשונית הטיסה — המקרה החמור.
 * היא ‎fixed‎ בדופן המסך, וההזזה של 4 פיקסלים הוציאה את הסמן
 * מרצועה של 4 פיקסלים בקצה. הכרטיסים שבתוכה ממילא נפרשים
 * בריחוף, וזו משוב חזותי מספיק.
 */
.flight-tab:hover,
.flight-tab:focus-visible { transform: translateX(var(--tab-hide, 0px)); }

/*
 * שלבי "איך זה עובד" וכרטיסי עמוד הטיסות — ההרמה עוברת לשכבה
 * פנימית שמצוירת מאחורי התוכן,
כך שהתיבה עצמה אינה זזה.
 */
.legacy #te-main #about .about-side ul li:hover,
.legacy #te-main #about .about-side ul li:focus-within,
.about-team .about-side ul li:focus-within,
.about-team .about-side ul li:hover { transform: none; }

.flight-steps li {
  position: relative;
  transform: none !important;
}
.flight-steps li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c-white);
  box-shadow: none;
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.flight-steps li:hover::before {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* שבבי השירות — הרמה של פיקסל אחד על רקע שבב קטן, מקור ריצוד נוסף */
.legacy #te-main #about .about-pills a.pill:hover,
.about-team .about-pills a.pill:hover { transform: none; }

/* ==========================================================================
   רצועת פתיחה לעמוד עם כותרת משלו
   ==========================================================================
   תמונה בלבד, בלי כותרת וטקסט, לעמוד שכבר מחזיק ‎<h1>‎ ולכן אינו
   מקבל הירו. היא נותנת לעמוד פתיחה חזותית בלי ליצור כותרת שנייה.
   ========================================================================== */
.cover-strip {
  position: relative;
  /*
   * גובה מינימלי ולא גובה קבוע.
   *
   * ‎block-size‎ הופך את הגובה לסופי, וקונטיינר ‎flex‎ עם גובה
   * סופי אינו גדל לפי תוכנו — הוא גולש, ו-‎overflow: hidden‎
   * שמתחת חותך את מה שגלש. כך נעלמה הכותרת בטלפון: הטקסט הגיע
   * ל-229 פיקסלים בתוך רצועה של 200, והחלק העליון פשוט נחתך.
   */
  min-block-size: clamp(160px, 26vw, 300px);
  overflow: hidden;
  background: var(--c-navy-900);
}
.cover-strip img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* הצללה בתחתית, כדי שהמעבר לתוכן לא ייחתך כקו חד */
.cover-strip::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 45%;
  background: linear-gradient(to top, var(--bg-page), transparent);
  pointer-events: none;
}

/* ==========================================================================
   טקסט על רצועת הפתיחה
   ==========================================================================
   הרצועה הייתה תמונה בלבד, והעמוד נפתח בלי מילה אחת עד שהגולש
   גלל. הטקסט יושב עליה עם הצללה מלמטה, כך שהוא נקרא על כל תמונה
   — בהירה או כהה — בלי להסתמך על מזל.
   ========================================================================== */
/*
 * ‎min-block-size‎ ולא ‎block-size‎.
 *
 * הגובה היה נעול. כל עוד הרצועה החזיקה כותרת ותקציר זה עבד, אבל
 * ברגע שנוספו לה שני כפתורי עוגן ב-‎/מסיבות-פול-מון‎ גובה הטקסט
 * הגיע ל-229 פיקסלים בתוך רצועה של 200 — והכותרת נדחפה אל מעבר
 * לשפה העליונה ונחתכה. בטלפון היא פשוט נעלמה מתחת לתפריט.
 *
 * גובה מינימלי שומר על אותה פרופורציה כשאין תוכן נוסף, ונותן
 * לרצועה לגדול כשיש.
 */
.cover-strip {
  display: flex;
  align-items: flex-end;
  min-block-size: clamp(230px, 34vw, 400px);
}
.cover-strip img { position: absolute; inset: 0; }

/*
 * ההצללה מתחת לטקסט מתווספת לדהייה שכבר קיימת אל רקע העמוד.
 * ‎::after‎ נשאר הדהייה, וכאן נוספת שכבה כהה רק בשליש התחתון.
 */
.cover-strip::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 78%;
  background: linear-gradient(to top, rgba(4, 24, 46, .82), rgba(4, 24, 46, .45) 45%, transparent);
  pointer-events: none;
}
.cover-strip::after { block-size: 26%; }

.cover-strip__text {
  position: relative;
  z-index: 2;
  inline-size: min(100% - 2 * var(--sp-5), 1180px);
  margin-inline: auto;
  padding-block-end: clamp(var(--sp-5), 4vw, var(--sp-7));
  color: var(--c-white);
}
.cover-strip__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  color: var(--c-gold-500);
  margin-bottom: var(--sp-2);
}
.cover-strip__title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: 1.15;
  color: var(--c-white);
  margin: 0 0 var(--sp-2);
  text-shadow: 0 2px 18px rgba(4, 24, 46, .5);
  max-width: 18em;
}
.cover-strip__lede {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
  margin: 0;
  max-width: 56ch;
}

@media (max-width: 560px) {
  .cover-strip { min-block-size: clamp(200px, 52vw, 280px); }
  .cover-strip__lede { display: none; }
  /* בטלפון הכפתורים נערמים ותופסים את כל הרוחב */
  .cover-strip__ctas { flex-direction: column; align-items: stretch; }
}

/*
 * מרווח בצד שבו יושבת לשונית הטיסה.
 * הלשונית נעוצה לדופן ימין באמצע המסך, והכותרת בעמוד עברי
 * מתחילה בדיוק שם — כך שהן נחתו זו על זו. המרווח פיזי ולא לוגי,
 * כי הלשונית עצמה מעוגנת פיזית לימין.
 */
@media (min-width: 900px) {
  .cover-strip__text { padding-right: 130px; }
}

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

   שני תיקונים: הטקסט מורם מעל אזור הדהייה, והדהייה הבהירה מצטמצמת
   לשוליים התחתונים בלבד. ההצללה הכהה נשארת מתחת לטקסט עצמו.
   ========================================================================== */
.cover-strip::after { block-size: 16%; }
.cover-strip::before { block-size: 85%; }
.cover-strip__text { padding-block-end: clamp(var(--sp-7), 6vw, 3.5rem); }
.cover-strip__lede {
  color: #fff;
  text-shadow: 0 1px 10px rgba(4, 24, 46, .75);
}
.cover-strip__eyebrow { text-shadow: 0 1px 8px rgba(4, 24, 46, .6); }

/*
 * הצללה שמכסה את כל גובה הרצועה ולא רק את תחתיתה.
 *
 * הגרדיאנט הקודם היה חזק בתחתית ודהה כלפי מעלה, והטקסט — שיושב
 * בשליש האמצעי — נפל בדיוק באזור החלש שלו. בתמונות בהירות, כמו
 * מים וחול בפוקט, לבן על בהיר כמעט לא נקרא.
 *
 * ארבע נקודות עצירה במקום שלוש: כהה בתחתית, עדיין כהה באזור
 * הטקסט, ומתבהר רק בשליש העליון שבו אין טקסט.
 */
.cover-strip::before {
  block-size: 100%;
  background: linear-gradient(
    to top,
    rgba(4, 24, 46, .88) 0%,
    rgba(4, 24, 46, .72) 38%,
    rgba(4, 24, 46, .42) 68%,
    rgba(4, 24, 46, .12) 100%
  );
}

/* ==========================================================================
   באנר הודעה בתוך תוכן ישן
   ==========================================================================
   הטקסט נשאר כפי שהוא; מה שמוחלף הוא העיצוב שהגיע בתגי ‎style‎.
   זו הודעת שירות, לא קריאה לפעולה — ולכן היא שקטה: רקע חול חם,
   קו זהב בצד ההתחלה, בלי פעימה ובלי סגול.
   ========================================================================== */
.legacy #te-main .notification-banner {
  margin-block: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-gold-050);
  border: 1px solid var(--c-gold-200);
  border-inline-start: 3px solid var(--c-gold-500);
  border-radius: var(--r-md);
  color: var(--text-body);
  text-align: start;
  box-shadow: none;
  animation: none;
}
.legacy #te-main .notification-banner > div {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: flex-start;
}
.legacy #te-main .notification-banner h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--c-navy-950);
  margin: 0;
}
.legacy #te-main .notification-banner i {
  font-size: var(--fs-lg);
  color: var(--c-gold-600);
}
.legacy #te-main .notification-banner p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
  margin: var(--sp-2) 0 var(--sp-3);
}
.legacy #te-main .notification-banner a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--c-navy-950);
  background: var(--c-white);
  border: 1px solid var(--c-gold-500);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
}
.legacy #te-main .notification-banner a:hover { background: var(--c-gold-500); }

/* שדות מותנים — נפתחים באותה תנועה כמו שאר הטופס */
.lead-when { animation: te-reveal var(--dur-mid) var(--ease) both; }
.lead-when .lead-grid { margin-top: var(--sp-3); }
.lead-form.is-gated:not(.is-open) .lead-when { display: none; }
@media (prefers-reduced-motion: reduce) { .lead-when { animation: none; } }

/* ==========================================================================
   כרטיס בלי תמונה
   ==========================================================================
   לשלושה יעדים — קו טאו, קו צ'אנג ופאי — אין אף תצלום מקומי
   באתר, ולא לקחנו תמונות ממקורות שאינם שלנו. מלבן אפור ריק נראה
   כמו תקלת טעינה, ולכן המקום מקבל משטח מכוון: גוון נייבי־ים עם
   סימן גל עדין. זה אומר "אין כאן תצלום" ולא "משהו נשבר".
   ========================================================================== */
.tour-card__media--none {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(18, 160, 179, .28), transparent 60%),
    linear-gradient(160deg, var(--c-navy-800), var(--c-navy-950));
}
.tour-card__media--none::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  inset-block-end: 26%;
  block-size: 34px;
  border-radius: 50%;
  border-block-start: 2px solid rgba(255, 255, 255, .22);
  border-inline: 2px solid transparent;
  transform: rotate(-4deg);
}
/* התגית נשארת קריאה גם על הרקע הכהה */
.tour-card__media--none .tour-card__badge {
  background: var(--c-gold-500);
  color: var(--c-navy-950);
}

/* ==========================================================================
   גלריית "בתמונות" — תאים שווים
   ==========================================================================
   שש תמונות ברוחבים שונים יצרו שורה של ארבע ושורה של שתיים,
   כשהשנייה מיושרת לאמצע. יחס צורה קבוע לכל תא מיישר את הרשת,
   והתמונה ממלאת אותו במקום להכתיב את גודלו.
   ========================================================================== */
.legacy #te-main .guide-gallery,
.guide-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-2);
  align-items: stretch;
}
.guide-gallery img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}
@media (min-width: 900px) { .guide-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .guide-gallery { grid-template-columns: repeat(2, 1fr); } }

/*
 * כרטיס מלון בלי תצלום — משטח עם שם, לא מלבן ריק.
 *
 * ---------------------------------------------------------------------------
 * ‎tour-card__media--none‎ לבדו הוא גרדיאנט חלק. הוא נכתב לכרטיס
 * בודד שחסרה לו תמונה בתוך רשת מלאה, ושם הוא עובד. מה שהוא לא
 * תוכנן אליו הוא המקרה של קו פנגן: **חמישה כרטיסי מלון ברצף,
 * כולם בלי תצלום** — לאף אחד מששת המלונות של האי אין תמונה
 * באתר, והרצועה כולה נקראה כרשת תמונות שלא נטענה.
 *
 * עם שם המלון על המשטח, ובקו זהב דק שמפריד אותו מגוף הכרטיס,
 * הוא נקרא כבחירה עיצובית. ראה ‎hotel-photos.js‎ להסבר מלא ולדרך
 * להחליף אותו בתצלום אמיתי.
 */
.tour-card__media--named {
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  position: relative;
  /*
   * אותה פרופורציה בדיוק כמו משטח עם תצלום.
   *
   * ‎--none‎ כבר מגדיר ‎3 / 2‎, אבל הריפוד שנוסף כאן נמדד *מעבר*
   * לגובה שה-‎aspect-ratio‎ קבע — ולכן כרטיס הפלייסהולדר יצא
   * גבוה בכ-32 פיקסלים מהשכן שלו שיש לו תצלום, ובשורה מעורבת
   * נוצר מדרג. ‎border-box‎ מכניס את הריפוד פנימה.
   */
  aspect-ratio: 3 / 2;
  box-sizing: border-box;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(45, 190, 208, .16), transparent 70%),
    linear-gradient(135deg, var(--c-navy-900), var(--c-navy-800));
}
.tour-card__media--named::after {
  content: "";
  position: absolute;
  inset-inline: 22%;
  inset-block-end: var(--sp-3);
  block-size: 2px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, transparent, var(--c-gold-500), transparent);
}
.tour-card__media--named > span {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  color: rgba(255, 255, 255, .92);
  /* שם לטיני בתוך עמוד עברי — מבודד כדי שלא יישבר בכיווניות */
  direction: ltr;
  unicode-bidi: isolate;
  text-wrap: balance;
}
a.tour-card:hover .tour-card__media--named::after {
  inset-inline: 12%;
  transition: inset-inline var(--dur-mid) var(--ease);
}

/* ==========================================================================
   בורר בדיקת זמינות

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

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

.booking {
  margin-block: var(--sp-5);
}

/*
 * המסגרת הבהירה היא של הגרסה הישנה, שבה הבורר היה רצועה
 * ברוחב מלא. מאז הוא קיבל משטח כהה משלו ב-‎.booking__inner‎,
 * ושתי המסגרות יחד נראו ככרטיס בתוך כרטיס.
 *
 * ‎:not(:has())‎ ולא מחיקה: עמוד שעדיין מגיש את הבורר בלי
 * המשטח הפנימי ממשיך לקבל את המסגרת שהייתה לו.
 */
.booking .container:not(:has(> .booking__inner)) {
  padding: var(--sp-4);
  background: var(--c-sea-050);
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-md);
}

.booking__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-block-end: var(--sp-3);
}

.booking__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--c-navy-900);
}
.booking__lede {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/*
 * שורה אחת במסך רחב.
 *
 * שני הבוררים רחבים כי שמות האטרקציות ארוכים; המספרים והתאריך
 * צרים. ‎auto-fit‎ מקפל לעמודה אחת בטלפון בלי media query.
 */
.booking__form {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.2fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.1fr) auto;
  gap: var(--sp-2);
  align-items: end;
}

.booking__field {
  display: grid;
  gap: 3px;
  min-inline-size: 0;
}
.booking__field[hidden] { display: none !important; }

.booking__label {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  color: var(--c-sea-600);
}

.booking__input {
  inline-size: 100%;
  min-block-size: 40px;
  padding: 6px var(--sp-3);
  background: var(--c-white);
  color: var(--c-ink-900);
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.booking__input:focus-visible {
  outline: 2px solid var(--c-sea-500);
  outline-offset: 1px;
}

/* חץ הבורר בצד הפתיחה בעברית */
.booking select.booking__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-sea-600) 50%),
                    linear-gradient(135deg, var(--c-sea-600) 50%, transparent 50%);
  background-position: calc(var(--sp-3) - 2px) calc(50% + 1px), calc(var(--sp-3) + 3px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: var(--sp-6);
  text-overflow: ellipsis;
}

.booking__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 40px;
  padding: 0 var(--sp-4);
  background: #25d366;
  color: #062e16;
  border-radius: var(--r-sm);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-mid) var(--ease);
}
.booking__send:hover { background: #1eb955; color: #062e16; }
.booking__send i { font-size: 1.15em; }

/*
 * תצוגה מקדימה של ההודעה.
 * הלקוח רואה בדיוק מה יישלח לפני שהוא לוחץ על כפתור שפותח
 * אפליקציה אחרת.
 */
.booking__note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-3xs);
  line-height: 1.45;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .booking__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking__field:nth-child(1),
  .booking__field:nth-child(2) { grid-column: 1 / -1; }
  .booking__send { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .booking__form { grid-template-columns: 1fr 1fr; }
}

/*
 * שבבי עמודי הריכוז שמתחת לרשת האטרקציות.
 *
 * "אטרקציות נוספות בפוקט" ו"אטרקציות נוספות בתאילנד" היו קודם
 * שני כרטיסים בגודל מלא שתפסו את כל הסקשן. הם תפריט ולא תוכן,
 * ולכן הם יורדים לשורת שבבים מתחת לאטרקציות עצמן.
 */
.related-chips--after {
  margin-block-start: var(--sp-5);
  justify-content: center;
}

/* ==========================================================================
   המלצות לקוחות — רכיב עצמאי

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

   התלות הזו הייתה שגויה מלכתחילה. בלוק המלצות אינו שריד
   מוורדפרס אלא רכיב של האתר, ומקומו כאן: ללא תחילית, כך שהוא
   עובד בכל מקום שבו יציבו אותו. בתוך ‎#te-main‎ הכללים הישנים
   עדיין גוברים בסגוליות ונותנים תוצאה זהה, ולכן אין שבירה
   בעמודים שבהם הסקשן לא זז.
   ========================================================================== */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-4);
}

.review-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  text-align: start;
  background: var(--c-surface-raised, #fff);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
}

.review-card .review-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
}

/*
 * אווטר עם האות הראשונה של השם.
 *
 * אות ולא תצלום סתמי של אדם: היא ממלאת את המקום בכוונה ואינה
 * טוענת דבר שצריך לאמת.
 */
.review-card .review-avatar {
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
}
.review-card .review-avatar--letter {
  display: grid;
  place-items: center;
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.review-card .review-author {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-strong);
  line-height: 1.3;
}
.review-card .review-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.review-card .review-stars {
  color: var(--c-gold-500);
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  margin: 0;
}

/*
 * הציטוט במלואו.
 *
 * כרטיס תקציר נחתך אחרי שלוש שורות כי הוא מזמין ללחוץ. המלצה
 * היא היעד עצמו — אין לאן ללחוץ, ומשפט שנגמר בשלוש נקודות הוא
 * פשוט טקסט חסר.
 */
.review-card > p,
.review-card .review-text {
  margin: 0;
  font-style: normal;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* גרש פתיחה כסימן, לא כקישוט — מאחורי הטקסט ולא מולו */
.review-card > p::before,
.review-card .review-text::before {
  content: "”";
  float: inline-start;
  margin-inline-end: .25rem;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: .9;
  color: var(--c-sea-200);
}

/* ------------------------------------------------ כותרת הסקשן שיצא מ-legacy */

.section-header {
  margin-block-end: var(--sp-6);
  text-align: center;
}
.section-header .section-badge {
  display: inline-block;
  margin-block-end: var(--sp-3);
  padding: .35em .9em;
  background: var(--c-sea-050);
  color: var(--c-sea-700);
  border-radius: var(--r-full, 999px);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
}
.section-header .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.section-header .section-title::after {
  content: "";
  display: block;
  inline-size: 56px;
  block-size: 2px;
  margin: var(--sp-4) auto 0;
  background: var(--c-sea-500);
  border-radius: 2px;
}
.section-header .section-description {
  margin: var(--sp-4) auto 0;
  max-inline-size: 62ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/*
 * ארבע המלצות — שתיים על שתיים.
 *
 * ‎auto-fit‎ מוצא שלוש עמודות ברוחב הזה, והרביעית נשארת לבדה
 * בשורה שנייה עם שני שלישים ריקים לצידה. זו אותה שורה יתומה
 * שתוקנה בכרטיסי הטיולים, ואותו פתרון.
 */
@media (min-width: 62rem) {
  .reviews-grid:has(> :last-child:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   רצועת הלוגואים — תיקון

   שי צילם את "השותפים שלנו" ובתצלום הלוגואים יושבים זה על זה
   בערימה, בגדלים שונים ובשתי שורות חופפות.

   הסיבה: ‎.logo-marquee__track > *‎ קובע ‎display: grid‎, והכלל
   הזה חל גם על ה-‎<span aria-hidden>‎ שעוטף את העותק המשוכפל.
   הספאן הפך לתא רשת יחיד ושישה הלוגואים שבתוכו נערמו לגובה
   במקום להמשיך את השורה.

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

.logo-marquee__track > span,
.chain-marquee__track > span {
  display: contents;
}

/*
 * הלולאה זזה שליש ולא חצי.
 *
 * ‎partners.js‎ בונה שלושה עותקים (‎logoHtml + logoCopy + logoCopy‎),
 * ולכן ‎translateX(-50%)‎ עצר באמצע העותק השני וקפץ. שליש הוא
 * בדיוק רוחב עותק אחד, והתפר נופל על גבול ולא באמצע לוגו.
 */
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

/*
 * תיבה אחידה לכל לוגו.
 *
 * הלוגואים הגיעו ביחסי גובה-רוחב רחוקים זה מזה — 844×203 מול
 * 750×647 מול 1600×781. גובה אחיד לבדו הותיר אחד רחב כפליים
 * מחברו, והרצועה נקראה כאוסף ולא כשורה. תיבה בגודל קבוע עם
 * ‎object-fit: contain‎ נותנת לכל אחד את אותו שטח, וכל לוגו
 * ממלא אותו כמיטב יחסיו.
 */
/*
 * התיבה היא 3:1, כמו הקנבס שאליו הלוגואים מנורמלים.
 *
 * קודם היא הייתה 132×46 — יחס של 2.9:1 — וכל לוגו נדחס אליה
 * לפי גובה. עכשיו הקנבס עצמו אחיד ואין מה לדחוס: התמונה ממלאת
 * את התיבה והמרווח סביב הלוגו כבר מובנה בקובץ.
 */
.logo-marquee__track .partner-logo {
  inline-size: clamp(120px, 14vw, 168px);
  aspect-ratio: 320 / 120;
  block-size: auto;
  display: grid;
  place-items: center;
}
.logo-marquee__track .partner-logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
}

@media (max-width: 640px) {
  .logo-marquee__track .partner-logo { inline-size: 104px; }
}

/* ==========================================================================
   בלוקי "קשור" בנייד — רצועה נגללת, לא רשת

   שי ביקש לקצר את הגלילה בנייד. מדדתי על
   ‎/טיול-אופנועי-ים-בפוקט‎ ב-375: העמוד 14,353 פיקסל, ובלוקי
   ה-related שבתחתיתו תופסים כ-3,700 מהם.

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

   רצועה נגללת לרוחב שומרת על **כל** הקישורים ומורידה כל בלוק
   לשורה אחת. זו גם השפה שכבר קיימת בגלריית התצלומים, ששי
   ביקש במפורש ("קרוסלה קו אחת נחמדה").

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

@media (max-width: 999px) {
  .related__block .tour-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    grid-template-columns: none;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    /*
     * הרצועה נמתחת לשולי המסך והריפוד מחזיר את הכרטיס הראשון
     * למקומו. בלי זה הכרטיס האחרון נחתך בדיוק בקצה ונראה כאילו
     * נגמר, במקום שיהיה ברור שאפשר להמשיך.
     */
    margin-inline: calc(var(--sp-4) * -1);
    padding-inline: var(--sp-4);
    padding-block-end: var(--sp-2);
  }
  .related__block .tour-grid::-webkit-scrollbar { display: none; }
  .related__block .tour-card { scroll-snap-align: start; }

  /*
   * שבבי היעדים נשארים רשת — הם טקסט קצר, ושורה נגללת של
   * שבבים קטנים קשה יותר לתפעול מאשר שתי שורות שרואים במלואן.
   */
  .related__block--chips .related-chips { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .related__block .tour-grid { scroll-snap-type: none; }
}

/* ==========================================================================
   לשונית כרטיס הטיסה — הגעה מושהית

   שי ביקש שהיא תופיע רק אחרי חמש-עשרה שניות, בהנפשה שמושכת את
   העין בלי להיות מוגזמת, כדי שיקלטו שהיא הגיעה.

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

   ההנפשה רצה **פעם אחת לביקור**. ה-JS מסמן ב-sessionStorage
   שהכרטיס כבר נחת, ובעמוד הבא הוא פשוט שם. "הגיע משהו חדש"
   שקורה בכל עמוד מחדש הוא רעש, לא סימן.
   ========================================================================== */

/*
 * לפני הנחיתה — מחוץ למסך לגמרי ולא לחיץ.
 *
 * visibility ולא display: אלמנט ב-display:none אינו יכול
 * להנפיש כניסה, והמעבר היה קופץ במקום לנחות.
 */
.flight-tab-wrap[data-arrival="waiting"] {
  visibility: hidden;
  pointer-events: none;
  transform: translateX(140%) rotate(8deg);
  opacity: 0;
}

/*
 * שני מצבים ולא אחד.
 *
 * ‎landed‎ — נחת עכשיו, עם ההנפשה. ‎present‎ — כבר היה כאן
 * בביקור הזה, ולכן הוא פשוט שם.
 *
 * בלי ההפרדה ההנפשה רצה שוב בכל טעינת עמוד: הסימון
 * ב-sessionStorage מנע את ההשהיה אבל לא את ההצגה, והכרטיס
 * "נחת" מחדש בכל ניווט. זה בדיוק הרעש ששי ביקש להימנע ממנו.
 */
.flight-tab-wrap[data-arrival="present"] {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

.flight-tab-wrap[data-arrival="landed"] {
  visibility: visible;
  pointer-events: auto;
  animation: flight-tab-land 900ms cubic-bezier(.22, 1.2, .36, 1) both;
}

@keyframes flight-tab-land {
  0%   { opacity: 0; transform: translateX(140%) rotate(8deg); }
  /* עובר מעט את היעד — זה מה שעושה את זה לנחיתה ולא להחלקה */
  70%  { opacity: 1; transform: translateX(-10px) rotate(-2deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}

/*
 * הבהוב אחד אחרי הנחיתה, ואחד בלבד.
 *
 * הוא זה שגורם לעין לחזור לשם אחרי שהתנועה נגמרה. חוזר פעמיים
 * ונעצר — סימן שממשיך לפעום הופך לרעש שמתעלמים ממנו.
 */
.flight-tab-wrap[data-arrival="landed"] .flight-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--c-gold-500);
  animation: flight-tab-ping 1.6s ease-out 900ms 2 both;
  pointer-events: none;
}

@keyframes flight-tab-ping {
  0%   { box-shadow: 0 0 0 0 rgba(240, 168, 26, .55); }
  100% { box-shadow: 0 0 0 18px rgba(240, 168, 26, 0); }
}

/*
 * מי שביקש פחות תנועה מקבל את הלשונית בלי הנחיתה — אבל כן
 * מקבל אותה. ההשהיה נשארת; היא החלטת תזמון ולא אנימציה.
 */
@media (prefers-reduced-motion: reduce) {
  .flight-tab-wrap[data-arrival="landed"] { animation: none; }
  .flight-tab-wrap[data-arrival="landed"] .flight-tab::after { animation: none; }
}

/* ==========================================================================
   לשונית הכרטיס — מתכנסת לצד אחרי שעשתה את שלה

   שי: "אחרי שהם נחתו והמשתמש כבר ריחף וקרא את הטקסט או לחץ —
   כל עוד לא הוריד את זה, שיהיה צמוד לצד."

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

   ‎data-seen="1"‎ נכתב ב-JS ברגע שהגולש ריחף, מיקד במקלדת או
   לחץ. הריחוף עצמו ממשיך לפתוח את הכותרת המלאה — הכלי לא
   נעלם, הוא רק מפסיק להתנפח.
   ========================================================================== */

.flight-tab-wrap[data-seen="1"] .flight-tab__stack {
  transform: scale(.82);
  transform-origin: 100% 50%;
  transition: transform var(--dur-mid) var(--ease);
}

/*
 * נצמדת לקצה ממש.
 *
 * במצב הרגיל יש לה ריפוד שמרחיק אותה מהשוליים כדי שתיראה
 * כמונחת; אחרי שנראתה, הריפוד בצד החיצוני יורד לאפס והיא
 * יושבת על הקצה.
 */
.flight-tab-wrap[data-seen="1"] .flight-tab {
  padding-inline-end: 0;
  opacity: .88;
}
.flight-tab-wrap[data-seen="1"] .flight-tab:hover,
.flight-tab-wrap[data-seen="1"] .flight-tab:focus-visible {
  opacity: 1;
}
/* בריחוף היא יוצאת שוב לגודל מלא — הכלי זמין, לא מוקטן לצמיתות */
.flight-tab-wrap[data-seen="1"] .flight-tab:hover .flight-tab__stack,
.flight-tab-wrap[data-seen="1"] .flight-tab:focus-visible .flight-tab__stack {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .flight-tab-wrap[data-seen="1"] .flight-tab__stack { transition: none; }
}


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

   הצבע הוא הזהב של המותג בשקיפות נמוכה, לא מילוי מלא: בתפריט
   כהה מילוי מלא מושך את העין חזק מדי ומתחרה בפריט הפעיל.
   ========================================================================== */
.nav-badge {
  display: inline-block;
  margin-inline-start: var(--sp-2);
  padding: 1px 7px;
  border-radius: var(--r-full);
  border: 1px solid rgba(240, 168, 26, .45);
  background: rgba(240, 168, 26, .12);
  color: var(--c-gold-500);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  line-height: 1.6;
  vertical-align: middle;
  /* התג אינו יעד לחיצה נפרד — הקישור כולו הוא היעד */
  pointer-events: none;
}
.main-nav li > ul a:hover .nav-badge,
.main-nav li > ul a:focus-visible .nav-badge {
  border-color: rgba(240, 168, 26, .75);
  background: rgba(240, 168, 26, .2);
}


/* ==========================================================================
   עמוד 404
   --------------------------------------------------------------------------
   מה שהוגש קודם היה ברירת המחדל של השרת: 4,511 תווים שרובם גיליון
   סגנון של Angular, בלי עברית, בלי ניווט ובלי דרך להמשיך.

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

   הכתובות בכרטיסים נגזרות מהעמודים שנבנו בפועל ומדורגות לפי
   קליקים, ולכן אין כאן קישור שיישבר כשעמוד ישתנה.
   ========================================================================== */
.nf {
  padding-block: clamp(3rem, 8vw, 6rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(16, 60, 92, .55), transparent 70%),
    var(--c-navy-900, #0b1b2b);
  color: #fff;
  text-align: center;
}

/*
 * המספר גדול אבל כבוי. הוא נותן לעמוד עוגן חזותי בלי להפוך את
 * השגיאה לנושא — הכותרת והקישורים הם מה שצריך למשוך את העין.
 */
.nf-code {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .10);
}

.nf-title {
  margin: clamp(-1.6rem, -3vw, -1rem) 0 var(--sp-3);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  color: #fff;
}

.nf-lede {
  margin: 0 auto;
  max-width: 54ch;
  color: rgba(255, 255, 255, .72);
  line-height: 1.75;
}

.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-block: var(--sp-6) var(--sp-8);
}

.nf-group { margin-block-start: var(--sp-7); }
.nf-group h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gold-500);
}

/*
 * ‎auto-fit‎ ולא מספר עמודות קבוע: הקבוצות מחזיקות בין ארבעה
 * לשישה פריטים, ורשת קבועה הייתה משאירה חור בשורה האחרונה.
 */
.nf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  max-width: 60rem;
  margin-inline: auto;
}

.nf-card {
  display: grid;
  place-items: center;
  min-block-size: 64px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg, 14px);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  text-decoration: none;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.nf-card:hover,
.nf-card:focus-visible {
  border-color: rgba(240, 168, 26, .55);
  background: rgba(240, 168, 26, .10);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .nf-card:hover, .nf-card:focus-visible { transform: none; }
}

@media (max-width: 640px) {
  .nf-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .nf-card { min-block-size: 56px; font-size: var(--fs-sm); }
}


/* ==========================================================================
   באנר ההסכמה
   --------------------------------------------------------------------------
   ‼️ שלושה כללי עיצוב שאינם אסתטיקה אלא תוקף ההסכמה:

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

   2. אין X ואין סגירה בלחיצה בחוץ. סגירה בלי בחירה אינה הסכמה,
      ואם נחשיב אותה ככזו הבאנר חסר משמעות.

   3. תיבות הסימון מתחילות **ריקות**. תיבה מסומנת מראש היא
      ההפך מהסכמה מדעת.

   הבאנר יושב למטה ולא באמצע המסך: הוא חוסם את המעקב, לא את
   הקריאה. גולש שרוצה לקרוא לפני שהוא מחליט — יכול.
   ========================================================================== */
.cc {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9000;
  padding: var(--sp-4);
  background: rgba(8, 20, 33, .97);
  backdrop-filter: blur(10px);
  border-block-start: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -16px 48px -20px rgba(0, 0, 0, .8);
  color: #fff;
  animation: cc-in var(--dur-mid) var(--ease);
}
@keyframes cc-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cc { animation: none; } }

.cc__box { max-width: 62rem; margin-inline: auto; }
.cc__title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); color: #fff; }
.cc__text { margin: 0 0 var(--sp-4); color: rgba(255, 255, 255, .78); line-height: 1.7; }
.cc__text strong { color: var(--c-gold-500); font-weight: var(--fw-bold); }

.cc__opts {
  display: grid;
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
}
.cc__opt {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg, 12px);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  line-height: 1.6;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .82);
}
.cc__opt:hover { border-color: rgba(240, 168, 26, .4); }
.cc__opt input { inline-size: 20px; block-size: 20px; margin-block-start: 2px; flex: 0 0 auto; accent-color: var(--c-gold-500); }
.cc__opt strong { color: #fff; }

.cc__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* ‼️ אותו רוחב מינימלי לשני הכפתורים הראשיים. ראה כלל 1 למעלה */
.cc__btn { min-inline-size: 150px; justify-content: center; }

.cc__fine { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); }
.cc__fine a { color: var(--c-gold-500); }

@media (max-width: 640px) {
  .cc { padding: var(--sp-3); max-block-size: 82vh; overflow-y: auto; }
  .cc__btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   מציין מקום לתוכן שממתין להסכמה.
   הוא לא מתנצל ולא מסביר מה זה GDPR — הוא אומר מה חסר, למה,
   ונותן קישור ישיר למי שרוצה בכל זאת.
   -------------------------------------------------------------------------- */
.cc-placeholder {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  min-block-size: 180px;
  padding: var(--sp-5);
  border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: var(--r-lg, 12px);
  background: rgba(16, 32, 48, .5);
  text-align: center;
}
.cc-placeholder p { margin: 0; max-inline-size: 42ch; color: var(--text-muted, rgba(255,255,255,.7)); font-size: var(--fs-sm); line-height: 1.6; }

/* מסגרת שממתינה להסכמה תופסת מקום ריק — אין טעם להציג אותה */
iframe[data-consent-src] { display: none; }


/* ==========================================================================
   ‼️ הבאנר — קטן יותר, בלי לוותר על תוקף ההסכמה
   --------------------------------------------------------------------------
   שי: "הוא ממש גדול".

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

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

   ‼️ מה שלא קטן, ולא יקטן:
   שני כפתורי הבחירה נשארים זהים בגודל ובצבע, התיבות נשארות
   ריקות, ואין X. זה לא עיצוב — זה מה שהופך את הבאנר להסכמה
   ולא לאישור שנכפה.
   ========================================================================== */
.cc {
  inset-inline: auto var(--sp-4);
  bottom: var(--sp-4);
  padding: var(--sp-4);
  max-inline-size: 46rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85);
}

.cc__title { font-size: var(--fs-md); margin-block-end: var(--sp-1); }
.cc__text {
  margin-block-end: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.cc__opts { gap: var(--sp-1); margin-block-end: var(--sp-3); }
.cc__opt {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
  align-items: center;
}
.cc__opt input { inline-size: 17px; block-size: 17px; margin-block-start: 0; }

.cc__actions { gap: var(--sp-2); }
.cc__btn {
  min-inline-size: 120px;
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
}

.cc__fine { margin-block-start: var(--sp-3); font-size: 11px; line-height: 1.5; }

/*
 * בנייד הוא חוזר להיות רצועה על כל הרוחב — בפינה הוא היה נדחס
 * לעמודה צרה מדי, והכפתורים היו נערמים אחד על השני.
 */
@media (max-width: 720px) {
  .cc {
    inset-inline: 0;
    bottom: 0;
    max-inline-size: none;
    border-inline: 0;
    border-block-end: 0;
    border-radius: 0;
    padding: var(--sp-3);
  }
  .cc__btn { flex: 1 1 calc(50% - var(--sp-2)); min-inline-size: 0; }
}


/* ==========================================================================
   פאנל העדפות העוגיות בעמוד הפרטיות
   --------------------------------------------------------------------------
   שי ביקש שאפשר יהיה "לעיין ולערוך". הסכמה שאי אפשר למשוך אינה
   הסכמה, ולכן זה לא נוחות אלא חלק מהתוקף.

   הטבלה נגזרת מסריקה של כל עמודי האתר בכל בנייה. הכוונה שלא
   תתיישן: מסמך פרטיות שמתאר מצב ישן הוא מידע שגוי, לא ניסוח.
   ========================================================================== */
.cc-panel {
  max-inline-size: 70rem;
  margin: var(--sp-8) auto;
  padding: var(--sp-6);
  border: 1px solid var(--border, rgba(0, 0, 0, .1));
  border-radius: var(--r-lg, 14px);
  background: var(--surface, #fff);
  /* גלילה מעוגן: הכותרת לא נחתכת מתחת לכותרת הדביקה */
  scroll-margin-top: calc(var(--header-h, 66px) + var(--sp-5));
}
.cc-panel h2 { margin-block-start: 0; }
.cc-panel h3 { margin-block-start: var(--sp-6); font-size: var(--fs-md); }

.cc-panel__state {
  padding: var(--sp-4);
  border-radius: var(--r-md, 10px);
  background: var(--surface-2, rgba(0, 0, 0, .035));
}
.cc-panel__state ul { margin: 0; padding-inline-start: var(--sp-5); line-height: 1.9; }
.cc-panel__state code { font-size: var(--fs-xs); opacity: .75; }

.cc-panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block: var(--sp-4) 0; }
.cc-panel__note { color: var(--text-muted); font-size: var(--fs-sm); margin-block: var(--sp-2) var(--sp-4); }

/* טבלה רחבה בנייד גולשת — גלילה אופקית עדיפה על טקסט דחוס */
.cc-panel__tablewrap { overflow-x: auto; }
.cc-panel__table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cc-panel__table th,
.cc-panel__table td {
  padding: var(--sp-3);
  text-align: start;
  border-block-end: 1px solid var(--border, rgba(0, 0, 0, .08));
  vertical-align: top;
}
.cc-panel__table th { font-weight: var(--fw-bold); white-space: nowrap; }
.cc-panel__table tbody tr:last-child td { border-block-end: 0; }

.cc-panel__none { margin: 0; padding-inline-start: var(--sp-5); line-height: 1.9; color: var(--text-muted); }
.cc-panel__ver { margin-block-start: var(--sp-5); font-size: var(--fs-xs); color: var(--text-muted); }

@media (max-width: 640px) {
  .cc-panel { padding: var(--sp-4); margin-inline: var(--sp-3); }
  .cc-panel__table { font-size: var(--fs-xs); }
}

/* ==========================================================================
   ‼️ תפריט "שמירת תמונה" — מוסר מכל תמונה באתר
   --------------------------------------------------------------------------
   שי, 24.9.2026: *"צילום מסך, Ctrl+U, כלי מפתחים — אין בעיה, זה
   לא מטריד אותי. אבל פתיחת הכתובת ישירות אני רוצה שלא תהיה להם
   האפשרות. כמו התמונות בריחוף — גם אם אני עומד עליהן, מקש ימני
   ואין אופציה להעתיק."*

   --------------------------------------------------------------------------
   למה **שם** זה כבר עובד, ולמה זה לא היה בכל האתר

   התמונות במפת היאכטה הן ‎background-image‎ ב-CSS ולא ‎<img>‎.
   לרקע אין תפריט תמונה — הדפדפן מציג את תפריט העמוד הרגיל,
   בדיוק כמו בצילום.

   ‼️ **ולא נכון להפוך את כל תמונות האתר לרקע.** ‎<img>‎ הוא מה
   שגוגל תמונות סורק, ו-‎alt‎ הוא מה שקורא מסך מקריא. המרה
   גורפת הייתה מוחקת את שניהם — כלומר פוגעת בדיוק במה שביקשת
   להשיג בעלייה.

   --------------------------------------------------------------------------
   מה שנעשה במקום

   שכבה שקופה מעל כל תמונה. הלחיצה הימנית פוגעת בה ולא בתמונה,
   ולכן הדפדפן מציג את תפריט העמוד. התמונה נשארת ‎<img>‎ עם ‎alt‎,
   וגוגל ממשיך לראות אותה.

   ‼️ **ומה שזה לא עושה, ואני אומר את זה כדי שלא יהיה ביטחון
   בלי כיסוי:** כלי מפתחים, ‎Ctrl+U‎ וצילום מסך ממשיכים לעבוד.
   שי אמר במפורש שזה בסדר. **אי אפשר למנוע הורדת קובץ שהדפדפן
   חייב להוריד כדי להציג.**
   ========================================================================== */

/*
 * המיכל מקבל מיקום יחסי רק אם יש בתוכו תמונה — ‎:has()‎ מונע
 * שינוי התנהגות על אלפי אלמנטים שאין להם קשר.
 */
:is(figure, picture, .tour-card, .hotel-card, .price-card, .package-card,
    .ticket-card, .pricing-card, [class$="__media"], [class*="-media"],
    [class*="gallery"] > *, .hero, .card):has(> img, > picture > img) {
  position: relative;
}

:is(figure, picture, .tour-card, .hotel-card, .price-card, .package-card,
    .ticket-card, .pricing-card, [class$="__media"], [class*="-media"],
    [class*="gallery"] > *, .hero, .card):has(> img, > picture > img)::after {
  content: "";
  position: absolute;
  inset: 0;
  /*
   * ‼️ ‎pointer-events: auto‎ ולא ‎none‎ — זו כל הנקודה.
   *
   * השכבה **חייבת** לקבל את האירוע כדי שהתמונה לא תקבל אותו.
   * ‎none‎ היה עושה בדיוק את ההפך ממה שנדרש.
   */
  pointer-events: auto;
  /* שקופה לגמרי ואינה מוסיפה דבר לעין */
  background: transparent;
  /*
   * מתחת לכל תוכן שצריך להיות לחיץ — כפתור, קישור, תווית.
   * ‎z-index: 1‎ מכסה את התמונה בלבד.
   */
  z-index: 1;
}

/*
 * ‼️ כרטיס שכולו קישור — השכבה לא חוסמת את הלחיצה.
 *
 * ב-‎<a class="tour-card">‎ השכבה יושבת **בתוך** הקישור, ולכן
 * לחיצה עליה עדיין מפעילה אותו. נבדק: הכרטיסים נשארים לחיצים.
 *
 * הכלל כאן נשאר לתיעוד — הוא מסביר למה לא נדרש חריג.
 */

/* התמונה עצמה לא נגררת לשולחן העבודה */
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* ==========================================================================
   ‼️ גובה ההירו — היה 622 פיקסל ותפס מסך שלם
   --------------------------------------------------------------------------
   שי: "זה תופס עמוד שלם." מדדתי ברוחב 830: **622 פיקסל גובה**,
   בזמן שגובה החלון 417. הגולש רואה תצלום ותו לא, וצריך לגלול כדי
   להגיע לכותרת.

   --------------------------------------------------------------------------
   ‼️ והתיקון הראשון שלי היה במקום הלא נכון

   הגבלתי גובה על ה-‎<img>‎. אבל המבנה כאן הוא:

       .hero__media { position: absolute; inset: 0 }
       .hero__media img { width: 100%; height: 100% }

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

   מה שקובע את הגובה הוא ‎.hero__inner‎ עם
   ‎padding-block: clamp(sp-9, 12vw, sp-12)‎ — **‎12vw‎ גדל עם רוחב
   המסך.** ברוחב 830 זה כמעט 100 פיקסל מכל צד; במסך 27 אינץ׳ זה 300.

   ‼️ ולכן לא הייתה כאן שגיאה ולא חריגה: היחס נכון, התמונה נטענת,
   הכל "עובד". רק שהעמוד מתחיל אחרי מסך שלם.
   ========================================================================== */

.hero {
  /* תקרה מוחלטת, בלי קשר לרוחב המסך */
  max-block-size: min(62dvh, 460px);
  overflow: hidden;
}

.hero__inner {
  /*
   * ‎8vw‎ במקום ‎12vw‎, ותקרה נמוכה יותר. הריפוד עדיין נושם
   * במסכים קטנים ומפסיק לגדול במסכים גדולים.
   */
  padding-block: clamp(var(--sp-7), 8vw, var(--sp-10));
}

@media (max-width: 700px) {
  .hero { max-block-size: min(46dvh, 320px); }
  .hero__inner { padding-block: var(--sp-7); }
}


/* ==========================================================================
   related-grid-fit — מספר העמודות נגזר ממספר הכרטיסים

   ‼️ שי, 25.9.2026: *"והגודל של אטרקציות במקומות נוספים לא נכון
   חייב לסדר הכל"*.

   --------------------------------------------------------------------------
   מה שנמדד ב-304 עמודים, לפני שכתבתי שורה

       1 כרטיס    ×  18     ‼️ רבע רוחב, שלושה רבעים ריקים
       2 כרטיסים  ×  48     ‼️ חצי ריק
       3 כרטיסים  ×   9     ‼️ רבע ריק
       4 כרטיסים  × 182     מלא
       5 כרטיסים  × 243     ‼️ אחד לבד בשורה שנייה  ← מה ששי צילם
       6 כרטיסים  × 240     ‼️ שניים לבד בשורה שנייה
       7 כרטיסים  ×   1

   כלומר **751 רצועות מתוך 741+** — הרוב המוחלט — מסתיימות בשורה
   חלקית. ‼️ ו-182 שנראות מושלמות הן שיעור של פחות מרבע.

   --------------------------------------------------------------------------
   ולמה מיפוי ולא ‎auto-fit‎

   ‎repeat(auto-fit, minmax(220px, 1fr))‎ הוא התשובה המתבקשת, והוא
   **אינו פותר את זה**: הוא קובע כמה עמודות נכנסות ברוחב, ולא כמה
   מסתדרות בלי שארית. חמישה כרטיסים בארבע עמודות נשארים 4+1.

   המיפוי נגזר מהספירה, ולכן הוא **נכון בהגדרה** ולא מקרי:

       1 → 1 עמודה, ברוחב מוגבל (כרטיס בודד ברוחב מלא נראה שגוי גם הוא)
       2 → 2 · 3 → 3 · 4 → 4 (כמו היום) · 5 → 5
       6 → 3, כלומר **שתי שורות מלאות** ולא שש צרות

   --------------------------------------------------------------------------
   ‼️ והרצועה הנגללת נמתחת עד 999

   בטווח 721–999 חמישה כרטיסים אינם מסתדרים באף מספר עמודות סביר:
   5 עמודות שם הוא 170px לכרטיס. הרצועה האופקית — שכבר עובדת
   ומוכחת במובייל — פותרת את הטווח הזה במקום להמציא לו כלל.

   ‎:has()‎ נתמך: נמדד ‎CSS.supports('selector(:has(> a))') === true‎
   בדפדפן שבו זה נבדק. בדפדפן ישן הכלל פשוט אינו חל, והתצוגה
   חוזרת בדיוק למה שהיה — כלומר **אין מסלול שבור חדש**.
   ========================================================================== */

@media (min-width: 1000px) {
  .related__block .tour-grid:has(> :first-child:last-child) {
    grid-template-columns: minmax(0, 360px);
  }
  /*
   * שניים — עם תקרה, אחרת הכרטיס יוצא 518px.
   *
   * שי ביקש במפורש גודל אחיד לכרטיסים. שתי עמודות על 1280
   * נותנות כרטיס כפול מזה של ארבע, וזה נראה כמו רכיב אחר ולא
   * כמו אותה רצועה עם פחות פריטים.
   *
   * 720px נותן ~346, כלומר בדיוק הרוחב של שלוש ושל שש.
   */
  .related__block .tour-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 720px;
  }
  .related__block .tour-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .related__block .tour-grid:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  /* שש → שתי שורות של שלוש, ולא שורה אחת צרה */
  .related__block .tour-grid:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   ‼️ כיסוי כרטיס — רשת ביטחון למיקום ההורה
   --------------------------------------------------------------------------
   שי, 28.9.2026, עם צילום מסך של /אטרקציות-בפוקט:

     *"למרות שאני עומד על טיול 4 האיים, זה מראה למטה ניתוב לפנטזי.
     בלייב זה ממש מרצד ומתחלף בין הכותרת הנכונה לבין זה."*

   נמדד בדפדפן:

       a.card-cover → /מופע-פנטזי-פוקט/
       position: absolute · inset: 0 · z-index: 1
       ‼️ box: 1227 × 914 פיקסל, מפינת העמוד
       מכסה שלושה כרטיסי אטרקציה אחרים

   --------------------------------------------------------------------------
   ‼️ השורש: ‎inset: 0‎ נמדד מול **האב הממוקם הקרוב ביותר**.

   ‎.is-linked { position: relative }‎ הוא שנותן אותו. הכיסוי הזה
   נחת בתוך ‎.info-card__body‎, ששום אב שלו אינו ממוקם — ולכן
   ‎inset: 0‎ נמדד מול הדף כולו והשכבה התפרשה על המסך.

   ואיך הוא הגיע לשם: ‎polish‎ הוסיף כיסוי לכרטיס, ואז
   ‎legacy-sections‎ קצר את ה-HTML הפנימי שלו ועטף אותו מחדש
   ב-‎.info-card__body‎ — **הכיסוי נסע עם התוכן, וה-‎is-linked‎
   נשאר מאחור.** אותה משפחה שחזרה כאן כל היום: החלטה שנקבעת
   בשלב אחד ונקראת בשלב אחר, אחרי שהתוכן זז בין השניים.

   --------------------------------------------------------------------------
   ‼️ ולמה הכלל הזה ולא תיקון נקודתי

   תיקון ב-‎legacy-sections‎ סוגר את המקרה הזה. **הכלל הזה סוגר
   את המחלקה**: כל כיסוי שיגיע אי־פעם לאב לא ממוקם — מכל מעבר,
   קיים או עתידי — ייעצר בגבול ההורה שלו ולא יתפרש על הדף.

   ‼️ והריצוד ששי תיאר הוא בדיוק הסימן: העכבר עובר בין הקישור
   האמיתי (z-index 2) לבין הכיסוי הענק (z-index 1), ושורת המצב
   מתחלפת. **התסמין נראה כמו תקלת רינדור, והוא היה שכבה.**
   ========================================================================== */
:has(> .card-cover) { position: relative; }

/* ------------------------------------------------------------------ */
/* בורר שפה — ראה scripts/i18n.js ו-renderLangSwitch ב-templates.js   */
/* ‼️ מוצג רק כשלעמוד יש יותר משפה אחת. פקד בלי בחירה אינו פקד.       */
/* ------------------------------------------------------------------ */
.lang-switch { position: relative; display: flex; align-items: center; }

.lang-switch__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 700;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lang-switch__btn:hover,
.lang-switch__btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .55);
}
.lang-switch__btn:focus-visible { outline: 2px solid var(--c-gold-500); outline-offset: 2px; }
.lang-switch__code { line-height: 1; }

.lang-switch__menu {
  position: absolute; inset-block-start: calc(100% + 8px);
  /* ‼️ inset-inline-end ולא right — האתר RTL, ואנגלית תהיה LTR.
     right היה מצמיד את התפריט לצד הלא נכון בדיוק בשפה שבגללה
     בנינו את הפקד. */
  inset-inline-end: 0;
  z-index: 60;
  margin: 0; padding: 6px;
  list-style: none;
  min-inline-size: 170px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}
.lang-switch__menu[hidden] { display: none; }

.lang-switch__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--c-navy-950, #10233a);
  text-decoration: none;
  font-size: .95rem;
}

/*
 * ‼️ הדגל ברוחב קבוע, והשם תופס את השאר.
 *
 * בלי ‎flex-shrink:0‎ הדגל נדחס כשהשם ארוך, והוא הופך לפס צבע
 * בלי צורה. ובלי ‎margin-inline-start:auto‎ על השם — התפריט מחזיק
 * שלוש שפות בשלושה כיווני כתיבה, והשמות היו מתיישרים כל אחד
 * לכיוון שלו. הדגלים בטור אחד והשמות בטור אחד, בלי קשר ל-dir
 * של הפריט.
 */
.lang-switch__menu .lang-flag {
  width: 22px;
  height: 15px;
  flex: 0 0 22px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
  display: block;
}
.lang-switch__menu .lang-name { flex: 1 1 auto; }

/* הדגל על הכפתור עצמו — קטן יותר, לצד קוד השפה */
.lang-switch__btn .lang-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
  display: block;
}
.lang-switch__menu a:hover { background: #f1f4f8; }
.lang-switch__menu a[aria-current="true"] { font-weight: 800; background: #f1f4f8; }

/* ‼️ בנייד הפקד נשאר גלוי ואינו נדחף לתפריט הנפתח — החלפת שפה */
/* היא הדבר הראשון שמישהו שלא קורא עברית מחפש.                   */
@media (max-width: 719px) {
  .lang-switch__btn { padding: var(--sp-1) var(--sp-2); min-height: 36px; }
  .lang-switch__menu { min-inline-size: 150px; }
}