/* ==========================================================================
   הערה על הבורר [class$="-card"]
   --------------------------------------------------------------------------
   הבורר הזה בודק את מחרוזת ה-class כולה ולא מחלקה בודדת בתוכה.
   כרטיס שקיבל מחלקה נוספת אחרי שם הסוג, כמו
   class="shopping-card is-linked", נגמר ב-"is-linked" ולכן לא
   נתפס — 409 כרטיסים באתר, בהם כל הכרטיסים שהפכו ללחיצים.
   בפועל זה אומר שכל כלל הגודל והחיתוך פשוט לא חל עליהם, והם
   נשארו בגובה 529 פיקסל ליד כרטיסים של 420.

   לכן כל המופעים הוחלפו ב-:is([class$="-card"],[class*="-card "])
   שתופס גם כרטיס עם מחלקה נוספת. כל בורר חדש שנכתב כאן צריך
   להשתמש באותה צורה.
   ========================================================================== */
/* ==========================================================================
   Legacy Patterns
   --------------------------------------------------------------------------
   באתר הישן יש 814 שמות מחלקה ייחודיים, כי כל עמוד נכתב בנפרד.
   עיצוב לפי שם מחלקה לא יכסה אותם לעולם, וכל מחלקה שלא כוסתה
   נותנת עמוד שטוח או חור של אלפי פיקסלים.

   הקובץ הזה מעצב לפי *דפוס השם* ולא לפי שם מדויק:
   כל ‎*-grid‎ הוא גריד, כל ‎*-card‎ הוא כרטיס, כל ‎*-price‎ הוא מחיר.
   כך מכוסות גם מחלקות שלא ראינו מעולם.

   סדר הטעינה: אחרי legacy-skin.css, כדי שעיצוב ספציפי יגבר על דפוס.
   ========================================================================== */

/* ==========================================================================
   גרידים — כל מה שנגמר ב-grid / cards / list-ים של כרטיסים
   ========================================================================== */
.legacy [class$="-grid"],
.legacy [class*="-grid "],
.legacy [class$="-cards"],
.legacy [class$="-container"]:has(> :is([class$="-card"],[class*="-card "])),
.legacy [class$="-wrapper"]:has(> :is([class$="-card"],[class*="-card "])) {
/*
 * צפיפות הגריד.
 * כרטיס של 280px מייצר 3 בשורה במסך רגיל, וכל שורה תופסת גובה מסך שלם —
 * הגולש רואה שלושה פריטים ומגלגל. 224px נותן 4–5 בשורה באותו רוחב,
 * כך שהיצע העמוד נקרא במבט אחד במקום בשש גלילות.
 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 224px), 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
  padding: 0;
  list-style: none;
  align-items: stretch;
}

/* גריד של פריטים רחבים (מלונות, חבילות) — פחות עמודות */
.legacy [class*="hotel"][class$="-grid"],
.legacy [class*="package"][class$="-grid"],
.legacy [class*="room"][class$="-grid"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

/* ==========================================================================
   כרטיסים — כל *-card
   ========================================================================== */
.legacy :is([class$="-card"],[class*="-card "]),
.legacy [class*="-card "] {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  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);
}
.legacy a:is([class$="-card"],[class*="-card "]):hover,
.legacy :is([class$="-card"],[class*="-card "]):hover {
  transform: translateY(-3px);
  border-color: var(--c-sea-200);
  box-shadow: var(--shadow-md);
}

/* תוכן הכרטיס */
.legacy [class$="-content"],
.legacy [class$="-body"],
.legacy [class$="-info"] {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
/* אלא אם זה סקשן ולא כרטיס */
.legacy section[class$="-content"],
.legacy :is([class$="-card"],[class*="-card "]) > [class$="-content"] ~ [class$="-content"] { padding: 0; }

/* ==========================================================================
   מדיה בכרטיס — כל *-image / *-media / *-photo / *-thumb
   ========================================================================== */
/*
 * ‎hero--photo‎ אינו מיכל מדיה.
 *
 * -------------------------------------------------------------------------
 * ‎[class$="-photo"]‎ בודק את תכונת ה-class כמחרוזת שלמה, ולכן
 * ‎class="hero hero--photo"‎ נתפס — המחרוזת באמת נגמרת ב-‎-photo‎.
 *
 * ההירו קיבל מכאן שני דברים: רקע שלד בהיר, שנצבע בנייבי על ידי
 * שכבת ההצללה ולכן נראה כמו בלוק כהה ריק, ו-‎aspect-ratio: 4/3‎
 * שמתח את התצלום ל-756 פיקסלים בתוך כותרת בגובה 420.
 *
 * התוצאה: בכל עמוד אטרקציה עם תצלום הירו, התצלום היה שם, נטען
 * במלואו, ולא נראה. ‎/מופע-פנטזי-פוקט‎ הוא זה שהתגלה, אבל זה
 * היה נכון לכל העמודים מהסוג הזה.
 * -------------------------------------------------------------------------
 */
.legacy [class$="-image"]:not(img):not(picture):not([class*="hero"]),
.legacy [class$="-media"]:not(img):not(picture):not([class*="hero"]),
.legacy [class$="-photo"]:not(img):not(picture):not([class*="hero"]),
.legacy [class$="-thumb"]:not(img):not(picture):not([class*="hero"]),
.legacy [class$="-img"]:not(img):not(picture):not([class*="hero"]) {
  position: relative;
  overflow: hidden;
  /* רקע שלד בהיר: תמונה שטרם נטענה לא צריכה להיראות כמו מלבן שבור */
  background: linear-gradient(110deg, #eceff3 25%, #f6f8fa 45%, #eceff3 65%);
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  margin: 0;
}
.legacy [class$="-image"]:not([class*="hero"]) > img,
.legacy [class$="-media"]:not([class*="hero"]) > img,
.legacy [class$="-photo"]:not([class*="hero"]) > img,
.legacy [class$="-thumb"]:not([class*="hero"]) > img,
.legacy [class$="-img"]:not([class*="hero"]) > img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  transition: transform 600ms var(--ease);
}
.legacy :is([class$="-card"],[class*="-card "]):hover [class$="-image"] > img,
.legacy :is([class$="-card"],[class*="-card "]):hover [class$="-media"] > img { transform: scale(1.05); }

/* מכל מדיה שנשאר בלי תמונה (התמונה נכשלה) — לא משאירים מלבן ריק */
/*
 * מכל מדיה שנשאר בלי תמונה — מוסתר.
 * ‎:not(img,picture,svg,video)‎ הוא קריטי: התמונות עצמן נושאות לפעמים
 * מחלקה כמו ‎date-image‎, ו-<img> לעולם לא מכיל <img> — בלי החרגה
 * הכלל הזה מסתיר את התמונות במקום את המסגרות הריקות.
 */
.legacy [class$="-image"]:not(:has(img)):not(img):not(picture):not(svg):not(video),
.legacy [class$="-media"]:not(:has(img)):not(img):not(picture):not(svg):not(video),
.legacy [class$="-photo"]:not(:has(img)):not(img):not(picture):not(svg):not(video),
.legacy [class$="-thumb"]:not(:has(img)):not(img):not(picture):not(svg):not(video) { display: none; }

/* ==========================================================================
   טיפוגרפיה בכרטיס
   ========================================================================== */
.legacy [class$="-title"],
.legacy [class$="-name"],
.legacy [class$="-heading"] {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  margin: 0;
}
.legacy [class$="-description"],
.legacy [class$="-desc"],
.legacy [class$="-text"],
.legacy [class$="-subtitle"] {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  margin: 0;
}

/* ==========================================================================
   מחיר — גלולה בולטת. זו העובדה שהלקוח מחפש.
   ========================================================================== */
.legacy [class$="-price"],
.legacy [class*="price-amount"],
.legacy [class$="-cost"] {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-md);
  color: var(--c-navy-950);
  background: var(--c-gold-500);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}
/* מחיר קודם שבוטל */
.legacy [class$="-original"],
.legacy [class*="old-price"],
.legacy del {
  text-decoration: line-through;
  color: var(--text-muted);
  background: none;
  font-weight: var(--fw-regular);
  padding: 0;
  font-size: var(--fs-sm);
}

/* ==========================================================================
   דירוג כוכבים
   ========================================================================== */
.legacy [class$="-rating"],
.legacy [class$="-stars"],
.legacy [class$="-score"] {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--c-gold-600);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  direction: ltr;
  unicode-bidi: isolate;
  background: none;
  padding: 0;
}

/* ==========================================================================
   אייקונים ותגיות
   ========================================================================== */
.legacy [class$="-icon"]:not(:empty) {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-size: var(--fs-xl);
  line-height: 1;
}

/*
 * אייקוני Font Awesome.
 * שמות המחלקה נשארו בתוכן אבל גיליון הסגנונות של הספרייה לא נטען
 * (ובכוונה — הוא כבד ולא נחוץ). בלי הכלל הזה נשארים עיגולים ריקים
 * בגודל 48px פזורים על פני העמוד.
 */
/*
 * אייקון של Font Awesome הוא תמיד <i> ריק מטקסט — הגליף מגיע מ-::before.
 * כלל שמסתיר ‎:empty‎ מסתיר לכן את כל האייקונים באתר.
 * לכן מסתירים רק מכל אייקון שאין בתוכו שום דבר: לא <i>, לא תמונה ולא svg.
 */
/*
 * הכוונה שמתוארת למעלה לא הייתה כתובה בבורר עצמו.
 *
 * ‎<i class="fas fa-map-marker-alt fact-icon">‎ הוא אייקון פונט
 * אמיתי: המחלקה שלו מסתיימת ב-‎-icon‎ והוא ריק מטקסט, ולכן הכלל
 * הסתיר אותו. כך נעלמו ארבעת האייקונים ברצועת העובדות בכל עמוד
 * יעד (מיקום, אוכלוסייה, מזג אוויר, זמן טיסה), ואיתם כל אייקון
 * אחר באתר שהמחלקה שלו מסתיימת כך.
 *
 * ‎:not([class*="fa-"])‎ מחריג בדיוק את המקרה הזה. מה שנשאר מוסתר
 * הוא מה שהכלל באמת נועד לו: מיכל אייקון שאין בו לא גליף, לא
 * תמונה ולא svg.
 */
.legacy [class$="-icon"]:empty:not([class*="fa-"]) { display: none; }
.legacy i[class*="fa-"] { font-style: normal; line-height: 1; }
.legacy [class$="-badge"],
.legacy [class$="-tag"],
.legacy [class$="-label"],
.legacy [class$="-category"],
.legacy [class$="-type"] {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  border: 1px solid var(--c-sea-200);
  white-space: nowrap;
}

/* ==========================================================================
   רשימות מאפיינים (מה כלול / מתקנים)
   ========================================================================== */
.legacy [class$="-features"],
.legacy [class$="-includes"],
.legacy [class$="-amenities"],
.legacy [class$="-options"] {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.legacy [class$="-features"] > li,
.legacy [class$="-includes"] > li,
.legacy [class$="-amenities"] > li {
  font-size: var(--fs-xs);
  background: var(--c-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  margin: 0;
}

/* ==========================================================================
   הירו של העמוד — מוצג.
   התבנית מוסיפה הירו משלה רק כשלעמוד אין H1. לכן הסתרה כאן משאירה
   עמודים שלמים בלי כותרת ובלי תמונת פתיחה.
   ========================================================================== */
.legacy [class*="hero-banner"],
.legacy [class*="hero-content"],
.legacy [class*="hero-title"],
.legacy [class*="hero-subtitle"] { display: revert; }

.legacy [class*="hero-banner"] {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-7);
}
.legacy [class*="hero-title"] {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
}
.legacy [class*="hero-subtitle"],
.legacy [class*="hero-description"] { font-size: var(--fs-lg); opacity: .92; margin: 0; }

/* ==========================================================================
   קרוסלות
   --------------------------------------------------------------------------
   Swiper נטען מחדש ומנהל את הפריסה בעצמו. כל ניסיון לכפות עליו גריד
   מייצר שתי מנועי פריסה על אותו אלמנט — והתוצאה היא עמודה אחת שבורה.
   לכן רק נפילה חזרה: אם Swiper לא הספיק לאתחל, השקופיות עדיין קריאות.
   ========================================================================== */
.legacy .swiper:not(.swiper-initialized) > .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-5);
}
.legacy .swiper { overflow: hidden; max-width: 100%; }

/* ==========================================================================
   שאלות נפוצות — כל וריאציות השמות באתר (faq-q/faq-a, faq-question/answer)
   --------------------------------------------------------------------------
   ה-JS שפתח וסגר אותן הוסר, ולכן כל התשובות מוצגות פתוחות וקריאות.
   זה גם טוב יותר ל-SEO: גוגל רואה את הטקסט בלי להריץ סקריפט.
   ========================================================================== */
.legacy [class$="faq"],
.legacy [class*="faq-container"] { display: grid; gap: var(--sp-3); margin-block: var(--sp-6); }

.legacy [class*="faq-item"] {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}

.legacy [class*="faq-q"],
.legacy [class*="faq-question"] {
  display: block;
  width: 100%;
  text-align: start;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  cursor: default;
}

.legacy [class*="faq-a"],
.legacy [class*="faq-answer"] {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
  margin: 0;
  padding: 0;
  max-height: none;
  overflow: visible;
  opacity: 1;
}

/* ==========================================================================
   תוכן עניינים
   ========================================================================== */
.legacy [class$="toc"],
.legacy [class$="-toc"] {
  background: var(--c-sea-050);
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-block: var(--sp-6);
}
.legacy [class$="toc-list"] { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.legacy [class$="toc-item"] { margin: 0; }
.legacy [class$="toc-link"] { color: var(--c-navy-800); text-decoration: none; font-weight: var(--fw-semibold); }
.legacy [class$="toc-link"]:hover { color: var(--c-sea-600); text-decoration: underline; }

/* ==========================================================================
   עובדות מהירות / סטטיסטיקות
   ========================================================================== */
.legacy [class$="quick-facts"],
.legacy [class$="-stats"],
.legacy [class$="-facts"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-block: var(--sp-5);
  list-style: none;
  text-align: center;
}
.legacy [class$="quick-facts"] > * { display: grid; gap: var(--sp-1); align-content: start; }

/* ==========================================================================
   וידאו רספונסיבי
   ========================================================================== */
/*
 * ‎video-wrapper‎ נוסף למשפחה.
 *
 * ---------------------------------------------------------------------------
 * הכלל תפס ‎video-container‎ ו-‎-video‎, ולא ‎video-wrapper‎ —
 * ולכן ביונה ביץ׳ ה-‎iframe‎ נשאר עם ‎width="560" height="315"‎
 * הנוקשים שלו בתוך עטיפה ברוחב 658. הסרטון נדחף לצד אחד,
 * נפער רווח של כמעט מאה פיקסלים לצידו, והסקשן יצא 560 פיקסלים
 * גובה עבור 324 של תוכן.
 *
 * ‎max-inline-size‎ וממורכז: סרטון ברוחב מלא של מיכל אינו טוב
 * יותר, הוא רק גדול יותר.
 * ---------------------------------------------------------------------------
 */
.legacy [class$="video-container"],
.legacy [class$="video-wrapper"],
.legacy [class$="-video"] {
  position: relative;
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  max-inline-size: 760px;
  margin-inline: auto;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-block: var(--sp-4);
  background: var(--c-navy-950);
}
.legacy [class$="video-container"] > iframe,
.legacy [class$="video-wrapper"] > iframe,
.legacy [class$="-video"] > iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* ==========================================================================
   קישור מת שנוטרל — נשאר טקסט קריא, בלי מראה של קישור
   ========================================================================== */
.legacy .was-link { color: inherit; font-weight: inherit; }

/* ==========================================================================
   לוגו בתוך התוכן — לא אמור לתפוס רוחב מלא
   ========================================================================== */
.legacy [class$="logo"] img,
.legacy img[class*="logo"] { max-height: 56px; width: auto; object-fit: contain; }

/* ==========================================================================
   כותרות סקשן שנשארו בלי עיצוב
   ========================================================================== */
.legacy [class$="-header"]:not([class*="card"]):not([class*="hotel"]) {
  margin-bottom: var(--sp-5);
  max-width: 64ch;
}
.legacy [class$="section-content"] { margin-block: var(--sp-4); }

/* ==========================================================================
   פריטי תוכן שאינם "card" בשם אבל כן בתפקיד
   --------------------------------------------------------------------------
   למשל ‎.feature‎ ו-‎.benefit‎: קבוצת אחים זהים תחת אותו הורה, שכל אחד
   מהם נושא כותרת וטקסט. בלי הכלל הזה הם נערמים והתגיות מרחפות מנותקות.
   ========================================================================== */
.legacy .feature,
.legacy .benefit,
.legacy .service,
.legacy .step,
.legacy .item:has(h3, h4) {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.legacy .feature > h3,
.legacy .benefit > h3 { margin: 0; font-size: var(--fs-lg); }

/* הורה של שלושה אחים זהים ומעלה — גריד, גם אם אין לו שם "grid" */
.legacy div:has(> .feature + .feature),
.legacy div:has(> .benefit + .benefit),
.legacy div:has(> .step + .step) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-5);
  margin-block: var(--sp-6);
}

/* תגית בתוך כרטיס — בראש הכרטיס, לא מרחפת */
.legacy :is([class$="-card"],[class*="-card "]) > [class$="-badge"],
.legacy .feature > [class$="-badge"],
.legacy .feature > [class$="-tag"] { order: -1; }

/* ==========================================================================
   המלצות לקוחות
   --------------------------------------------------------------------------
   ‎[class*="testimonial"]‎ לבדו תופס גם את הסליידר, גם את שורת הכוכבים
   וגם את פסקת הציטוט — וכולם קיבלו מסגרת של כרטיס. התוצאה: קווים
   מיותרים סביב כל רכיב. כאן מעוצב רק הכרטיס עצמו, וכל שאר החלקים
   מנוקים ממסגרת במפורש.
   ========================================================================== */
.legacy [class*="testimonial"][class*="card"],
.legacy [class*="testimonial"][class*="item"],
.legacy .swiper-slide > [class*="testimonial"],
.legacy [class*="review"][class*="card"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* כל שאר חלקי ההמלצה — בלי מסגרת, בלי רקע, בלי ריפוד משלהם */
.legacy [class*="testimonial"]:not([class*="card"]):not([class*="item"]),
.legacy [class*="review"]:not([class*="card"]) {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  width: auto;
  max-width: 100%;
}

/* תצלום הממליץ — עיגול, לא תמונת נוף */
.legacy [class*="testimonial"] img,
.legacy [class*="review"] img {
  width: 72px;
  height: 72px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-full);
  border: 2px solid var(--c-sea-200);
}
.legacy [class*="testimonial"][class*="image"],
.legacy [class*="testimonial"][class*="avatar"] {
  width: auto;
  flex: 0 0 auto;
  background: none;
  border: 0;
}

/* הציטוט */
.legacy [class*="testimonial"] p,
.legacy [class*="review"] p {
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  font-style: italic;
}

/* שם ופרטי הטיול */
.legacy [class*="testimonial"][class*="name"],
.legacy [class*="testimonial"][class*="author"] {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-strong);
  font-style: normal;
}
.legacy [class*="testimonial"][class*="trip"],
.legacy [class*="testimonial"][class*="meta"] {
  font-size: var(--fs-xs);
  color: var(--c-sea-600);
  font-style: normal;
}

/* שורת הכוכבים */
.legacy [class*="testimonial"][class*="rating"],
.legacy [class*="testimonial"][class*="stars"] {
  display: inline-flex;
  gap: 1px;
  color: var(--c-gold-500);
  letter-spacing: 1px;
}

/* ==========================================================================
   נייד
   ========================================================================== */
@media (max-width: 640px) {
  .legacy [class$="-grid"],
  .legacy [class$="-cards"],
  .legacy .swiper,
  .legacy [class*="swiper-wrapper"] { grid-template-columns: 1fr; gap: var(--sp-4); }
  .legacy img { max-height: 340px; }
  .legacy [class$="-icon"] { width: 40px; height: 40px; font-size: var(--fs-lg); }
}

/* ==========================================================================
   ריחוף — כתום, כמו באתר הקיים
   ========================================================================== */
.legacy a:hover,
.legacy :is([class$="-card"],[class*="-card "]):hover [class$="-title"],
.legacy :is([class$="-card"],[class*="-card "]):hover [class$="-name"],
.legacy .card:hover .card-title,
.legacy [class$="toc-link"]:hover { color: var(--c-gold-600); }

.legacy :is([class$="-card"],[class*="-card "]):hover,
.legacy .card:hover,
.legacy .feature:hover { border-color: var(--c-gold-500); }

.legacy .btn:hover,
.legacy [class*="btn-"]:hover,
.legacy .book-button:hover,
.legacy .cta-button:hover { background: var(--c-gold-500); color: var(--c-navy-950); border-color: var(--c-gold-500); }

.main-nav a:hover { color: var(--c-gold-600); background: var(--c-gold-050); }
.breadcrumbs a:hover { color: var(--c-gold-600); }
.site-footer a:hover { color: var(--c-gold-500); }
a:hover { color: var(--c-gold-600); }

/* ==========================================================================
   ליטוש הקרוסלה — חצים, נקודות וכרטיסים
   ========================================================================== */
.legacy .swiper { padding-block: var(--sp-2) var(--sp-4); }

/* חצים: עיגול לבן עם צל וחץ נראה. באתר הישן האייקון לא נטען והם נראו ריקים. */
.legacy .nav-btn,
.legacy [class*="swiper-button"] {
  width: 46px; height: 46px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--c-white);
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.legacy .nav-btn:hover,
.legacy [class*="swiper-button"]:hover {
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
  transform: translateY(-2px);
}
.legacy .nav-btn i { color: var(--c-navy-800); font-size: 17px; }
.legacy .nav-btn:hover i { color: var(--c-navy-950); }

/*
 * חץ גיבוי — רק כשאין אייקון בכלל.
 * התנאי הקודם בדק ‎i:not(:empty)‎, אבל אייקון של Font Awesome הוא תמיד
 * ‎<i>‎ ריק. התוצאה הייתה שהגיבוי נוסף גם כשהאייקון קיים — חץ בתוך חץ.
 */
.legacy .nav-btn:not(:has(i)):not(:has(svg))::after { content: "‹"; font-size: 26px; line-height: 1; color: var(--c-navy-800); }
.legacy [class*="-next"]:not(:has(i)):not(:has(svg))::after { content: "›"; }

/* נקודות עימוד */
.legacy .swiper-pagination-bullet {
  width: 9px; height: 9px;
  background: var(--c-ink-400);
  opacity: .4;
  transition: all var(--dur-fast) var(--ease);
}
.legacy .swiper-pagination-bullet-active {
  opacity: 1;
  width: 26px;
  border-radius: var(--r-full);
  background: var(--c-gold-500);
}

/* כרטיס בקרוסלה */
.legacy .swiper-slide .card {
  height: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.legacy .swiper-slide .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-gold-500);
}
.legacy .swiper-slide .card-cta .btn {
  background: var(--c-gold-500);
  color: var(--c-navy-950) !important;
  box-shadow: none;
}
.legacy .swiper-slide .card-cta .btn:hover { background: var(--c-gold-600); }

/* ==========================================================================
   תמונה בתוך כרטיס — מידות אחידות
   ========================================================================== */
.legacy img[class$="-image"],
.legacy img[class$="-media"],
.legacy img[class$="-photo"],
.legacy img[class$="-thumb"] {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  max-height: none;
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
}

/* ==========================================================================
   שאלות נפוצות — ריווח הדוק, שאלה ותשובה צמודות
   ========================================================================== */
.legacy [class*="faq-item"] {
  padding: 0;
  overflow: hidden;
}
.legacy [class*="faq-q"],
.legacy [class*="faq-question"] {
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
  min-height: 0;
}
.legacy [class*="faq-a"],
.legacy [class*="faq-answer"] {
  padding: 0 var(--sp-4) var(--sp-3);
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}
.legacy [class*="faq-item"] + [class*="faq-item"] { margin-top: var(--sp-2); }

/* ==========================================================================
   תוכן עניינים — קומפקטי ורב-טורי
   רשימה אנכית של 10+ פריטים תופסת מסך שלם וגורמת לגלילה מיותרת.
   ========================================================================== */
.legacy [class$="toc"],
.legacy [class$="-toc"] {
  padding: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-5);
}
.legacy [class$="toc"] > h2,
.legacy [class$="toc"] > h3,
.legacy [class$="-toc"] > h2,
.legacy [class$="-toc"] > h3 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-3);
}
.legacy [class$="toc-list"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-1) var(--sp-4);
}
.legacy [class$="toc-item"] { margin: 0; }
.legacy [class$="toc-link"] {
  display: block;
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}

/* ==========================================================================
   פרופורציות עמוד — פחות אוויר מת בין סקשנים
   ========================================================================== */
.legacy [class$="-header"] { margin-bottom: var(--sp-4); }
.legacy [class$="-grid"],
.legacy [class$="-cards"] { margin-block: var(--sp-4); }
.legacy [class*="important-notice"],
.legacy [class*="highlight-box"] { padding: var(--sp-4); margin-block: var(--sp-4); }
.legacy [class$="quick-facts"] { padding: var(--sp-4); margin-block: var(--sp-4); }
.legacy h2 { margin-top: var(--sp-5); }
.legacy h3 { margin-top: var(--sp-4); }
.legacy .container > :first-child { margin-top: 0; }

/* ==========================================================================
   כוכבי דירוג
   --------------------------------------------------------------------------
   Heebo ו-Assistant לא מכילים את התו ★ (U+2605), והדפדפן נופל לפונט
   שמציג אותו כסימן שקל. מחסנית פונטים מפורשת פותרת את זה בלי לגעת בתוכן.
   ========================================================================== */
.legacy .stars,
.legacy [class$="-stars"],
.legacy [class*="rating"] .stars {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2",
               "DejaVu Sans", "Arial Unicode MS", sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  color: var(--c-gold-500);
  direction: ltr;
  unicode-bidi: isolate;
  line-height: 1;
}
.legacy .numeric-rating {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-sm);
  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;
}

/* ==========================================================================
   כרטיסי מלונות ומסעדות
   ========================================================================== */
.legacy .hotels-grid,
.legacy .restaurants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}

.legacy .hotel-card,
.legacy .restaurant-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}
.legacy .hotel-card:hover,
.legacy .restaurant-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-gold-500);
}

.legacy .hotel-card > img,
.legacy .restaurant-card > img,
.legacy .hotel-card [class*="image"] img,
.legacy .restaurant-card [class*="image"] img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  max-height: none;
}

/* תגית קטגוריה על התמונה */
.legacy .hotel-category {
  position: absolute;
  top: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 2;
  background: rgba(4, 24, 46, .85);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  border: 0;
  white-space: nowrap;
}

.legacy .hotel-content,
.legacy .restaurant-content {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.legacy .hotel-title,
.legacy .restaurant-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin: 0;
}

/* תגיות מאפיינים */
.legacy .hotel-features,
.legacy .restaurant-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.legacy .hotel-feature,
.legacy .restaurant-features > * {
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  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: 2px var(--sp-2);
  white-space: nowrap;
}

.legacy .hotel-description,
.legacy .restaurant-card p {
  font-size: var(--fs-sm);
  color: var(--text-body);
  line-height: var(--lh-normal);
  margin: 0;
}

/* כפתור הכרטיס — תמיד בתחתית, ברוחב מלא */
.legacy .hotel-card .btn,
.legacy .hotel-card a[class*="btn"],
.legacy .restaurant-card .btn,
.legacy .restaurant-card a[class*="btn"] {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  background: var(--c-navy-800);
  color: #fff;
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  min-height: 42px;
  font-size: var(--fs-sm);
}
.legacy .hotel-card .btn:hover,
.legacy .hotel-card a[class*="btn"]:hover,
.legacy .restaurant-card .btn:hover,
.legacy .restaurant-card a[class*="btn"]:hover {
  background: var(--c-gold-500);
  color: var(--c-navy-950);
}

/* ==========================================================================
   קנה מידה של תוכן — 80%
   --------------------------------------------------------------------------
   ההקטנה חלה על גוף האתר בלבד. הכותרת העליונה מוגדרת בנפרד
   ב-components.css ולא מושפעת, כדי שהניווט יישאר כפי שהוא.
   ========================================================================== */
main {
  font-size: 0.8rem;
}
.legacy,
.legacy p,
.legacy li,
.legacy td,
.legacy th,
.prose p,
.prose li {
  font-size: 0.85rem;
  line-height: 1.7;
}

.legacy h1, .hero h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); }
.legacy h2, .legacy .section-title, .section-head h2 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); }
.legacy h3 { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem); }
.legacy h4 { font-size: 1rem; }

.legacy .section-description,
.legacy [class$="-description"],
.legacy [class$="-desc"],
.legacy [class$="-text"],
.legacy [class$="-subtitle"] { font-size: 0.82rem; }

.legacy [class$="-title"],
.legacy [class$="-name"],
.legacy .hotel-title,
.legacy .card-title { font-size: 0.95rem; }

.legacy [class$="-price"],
.legacy [class*="price-amount"] { font-size: 0.88rem; }
.legacy [class$="-badge"],
.legacy [class$="-tag"],
.legacy [class$="-category"],
.legacy .hotel-feature { font-size: 0.68rem; }

.legacy .btn,
.legacy [class*="btn-"],
.legacy .book-button { font-size: 0.82rem; padding: var(--sp-2) var(--sp-4); min-height: 40px; }

.legacy [class*="faq-q"],
.legacy [class*="faq-question"] { font-size: 0.88rem; }
.legacy [class*="faq-a"],
.legacy [class*="faq-answer"] { font-size: 0.82rem; }

.legacy [class$="toc-link"] { font-size: 0.82rem; }

/* רכיבים שנבנו על ידינו — מיושרים לאותו קנה מידה */
.tour-card__title { font-size: 0.92rem; }
.tour-card__price { font-size: 0.85rem; }
.tour-card__note,
.tour-card__type { font-size: 0.7rem; }
.lead-title { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
.lead-sub { font-size: 0.8rem; }
.lead-field label { font-size: 0.78rem; }
.lead-field input, .lead-field textarea { font-size: 0.85rem; }
.lead-opt { font-size: 0.8rem; }
.breadcrumbs { font-size: 0.75rem; }
.site-footer { font-size: 0.8rem; }

/* ==========================================================================
   הגנה מגלישה אופקית
   --------------------------------------------------------------------------
   בתוכן הישן יש רוחבים קשיחים, טבלאות ואלמנטים ממוקמים שדוחפים
   את העמוד מעבר לרוחב המסך, והטקסט נחתך בקצה.
   ========================================================================== */
.legacy { overflow-x: clip; max-width: 100%; }
.legacy * { max-width: 100%; }
.legacy [style*="width"],
.legacy [width] { max-width: 100% !important; }

/*
 * אלמנט ממוקם מוחלטית בלי הורה יחסי בורח מהעמוד.
 *
 * ‎.card-cover‎ יוצא מן הכלל, ולא בגלל פינה נדירה: הוא הקישור
 * הפרוש שהופך כרטיס שלם ללחיץ, והוא חייב להיות ‎absolute‎ עם
 * ‎inset:0‎. השם שלו מכיל ‎card‎, ולכן הכלל הזה — שסגוליותו גבוהה
 * יותר והוא נטען מאוחר יותר — החזיר אותו ל-‎relative‎. התוצאה:
 * גובה ‎0‎, שטח לחיצה אפס, ו-334 כרטיסים בכל האתר שנראו לחיצים
 * ולא הגיבו לשום לחיצה מחוץ לכפתור הקטן שבתוכם.
 */
.legacy [class*="section"],
.legacy [class*="container"],
.legacy [class*="grid"],
.legacy [class*="card"]:not(.card-cover) { position: relative; }

/* תמונות צפות בתחתית — מוחזרות לזרימה כגריד */
.legacy [class*="gallery"]:not(:has(> img + img)) > img,
.legacy [class*="images"] > img {
  float: none;
  position: static;
}

/* רצף תמונות ישירות בתוך סקשן → גריד, לא ערימה או ציפה */
.legacy section:has(> img + img) > img,
.legacy div:has(> img + img) > img { float: none; }

.legacy [class*="float"],
.legacy img[align] { float: none !important; }

/* טקסט לא נחתך בגבול המכל */
.legacy p, .legacy li, .legacy h1, .legacy h2, .legacy h3, .legacy h4 {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ==========================================================================
   בלוק מקום/מועדון — טקסט לצד גלריה
   --------------------------------------------------------------------------
   ‎.club-content‎ הוא flex עם ‎.club-info‎ ו-‎.club-images‎, אבל הגלריה
   קיבלה עמודה אחת ותמונות במידות קשיחות 120×90 — ולכן נערמה כעמודה
   צרה של תמונות זעירות בצד הטקסט.
   ========================================================================== */
.legacy [class$="-content"]:has(> [class$="-images"]),
.legacy .club-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin-block: var(--sp-5);
}
@media (min-width: 900px) {
  .legacy [class$="-content"]:has(> [class$="-images"]),
  .legacy .club-content { grid-template-columns: 1.15fr 1fr; }
}

.legacy [class$="-images"],
.legacy .club-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  height: auto;
}
.legacy [class$="-images"] > img,
.legacy .club-images > img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  max-height: none;
  border-radius: var(--r-sm);
  margin: 0;
}
/* תמונה בודדת — רוחב מלא של העמודה */
.legacy [class$="-images"]:has(> img:only-child) { grid-template-columns: 1fr; }

.legacy [class$="-info"] { min-width: 0; }
.legacy [class$="-info"] > :first-child { margin-top: 0; }

/* ==========================================================================
   עמודי אטרקציות — ניקוי שאריות מהמימוש הישן
   --------------------------------------------------------------------------
   בעמודים האלה הכרטיסים נבנו ב-JS לתוך #attractions-container, והסינון
   נעשה בשדות HTML גולמיים. הרשת הסטטית שלנו מחליפה את שניהם:
   היא נראית טוב יותר, ובניגוד למקור גם גוגל רואה אותה.
   ========================================================================== */
.legacy #attractions-container:empty,
.legacy [id$="-container"]:empty { display: none; }

/* המסננים הישנים — הוחלפו בצ'יפים של .tour-filters */
.legacy .filters,
.legacy .filters-grid,
.legacy [class$="filters"]:has(select),
.legacy [class$="filter-group"] { display: none; }

/* כרטיסי קטגוריה */
.legacy .categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}
.legacy .category-card {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}
.legacy .category-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-gold-500);
  box-shadow: var(--shadow-md);
}
.legacy .category-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  margin: 0;
  color: var(--text-strong);
}
.legacy .category-card p { font-size: 0.82rem; line-height: 1.7; margin: 0; color: var(--text-body); }
.legacy .category-card a { color: var(--c-sea-600); font-weight: var(--fw-semibold); }
.legacy .category-card a:hover { color: var(--c-gold-600); }

/* ==========================================================================
   איורי CSS דקורטיביים
   --------------------------------------------------------------------------
   בעמוד ההעברות יש רכב ועשן מצוירים ב-CSS עם אנימציה. הם נשענים על
   מידות מוחלטות שהכללים הגלובליים שלנו משנים, והתוצאה היא צורות כהות
   ענקיות באמצע העמוד. הם דקורציה בלבד ולכן מוסרים.
   ========================================================================== */
.legacy #car,
.legacy #smoke,
.legacy #road,
.legacy [id$="-animation"] { display: none !important; }

/* ==========================================================================
   באנר הירו של העמוד — בלי תמונה הוא מלבן אפור ריק
   ========================================================================== */
.legacy [class*="hero-banner"] {
  background-size: cover;
  background-position: center;
  min-height: 0;
}
.legacy [class*="hero-banner"]:not([style*="url"]):not([class*="has-image"]) {
  background-image: none !important;
  background-color: transparent;
  padding: 0;
}

/* ==========================================================================
   סטנדרט אחיד לכל הכרטיסים באתר
   --------------------------------------------------------------------------
   באתר הישן יש כעשרה סוגי כרטיסים שנכתבו בנפרד, וכל אחד מהם מתנהג
   אחרת: גבהים שונים, יחסי תמונה שונים, כותרות שצפות. הכלל הזה מיישר
   את כולם למבנה אחד — תמונה ביחס קבוע, גוף שנמתח, פעולה בתחתית.
   ========================================================================== */
.legacy .destination-card,
.legacy .attraction-card,
.legacy .activity-card,
.legacy .package-card,
.legacy .hotel-card,
.legacy .restaurant-card,
.legacy .feature-card,
.legacy .tip-card,
.legacy .info-card,
.legacy .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* התמונה תמיד ראשונה וביחס קבוע — זה מה שמיישר את הגבהים */
.legacy .destination-card > img,
.legacy .attraction-card > img,
.legacy .activity-card > img,
.legacy .card > img,
.legacy :is([class$="-card"],[class*="-card "]) > img:first-child {
  order: -1;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  max-height: none;
  margin: 0;
  border-radius: 0;
}

/* כל שאר התוכן בכרטיס מקבל ריפוד אחיד */
.legacy :is([class$="-card"],[class*="-card "]) > :not(img):not([class*="image"]):not([class*="media"]) {
  padding-inline: var(--sp-4);
}
.legacy :is([class$="-card"],[class*="-card "]) > :not(img):first-of-type { padding-top: var(--sp-3); }
.legacy :is([class$="-card"],[class*="-card "]) > :not(img):last-child { padding-bottom: var(--sp-4); }

/* כותרת בכרטיס — לא צפה, לא נחתכת */
.legacy :is([class$="-card"],[class*="-card "]) h3,
.legacy :is([class$="-card"],[class*="-card "]) h4,
.legacy :is([class$="-card"],[class*="-card "]) [class$="-title"] {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0 0 var(--sp-1);
}

/* הגריד מותח את כל הכרטיסים לאותו גובה */
.legacy [class$="-grid"],
.legacy [class$="-cards"],
.legacy .categories-grid,
.legacy .destinations-grid { align-items: stretch; }

/* ==========================================================================
   שאריות קרוסלה בלי קרוסלה
   כשה-JS לא נטען נשארים חצים ונקודות מרחפים בלי תפקיד.
   ========================================================================== */
.legacy .swiper:not(.swiper-initialized) [class*="swiper-button"],
.legacy .swiper:not(.swiper-initialized) [class*="swiper-pagination"],
.legacy .slider-controls:not(:has(+ .swiper-initialized)),
.legacy [class*="carousel-control"]:not(:has(~ [class*="carousel-item"])) { display: none; }

.legacy .nav-btn:not(:has(i)):empty,
.legacy [class*="slider-controls"]:empty { display: none; }

/* ==========================================================================
   קו ההדגשה מתחת לכותרת סקשן — מתרחב בריחוף
   --------------------------------------------------------------------------
   הקו הקצר שמתחת לכותרות הוא כבר חלק מהעיצוב הקיים. כאן הוא הופך
   לרכיב חי: מתרחב ומקבל גוון זהב כשעוברים מעל הסקשן.
   ========================================================================== */
.legacy .section-title,
.legacy [class$="-title"]:not([class*="card"]):not([class*="hotel"]):not([class*="price"]) {
  position: relative;
}

/*
 * הקו נשאר בזרימת המסמך (block + margin auto) ולא מקבל position: absolute.
 * מיקום מוחלט חייב padding-bottom בכותרת כדי שיהיה לו מקום; בלעדיו הקו
 * נחת על הטקסט עצמו ונראה כמו קו מחיקה. זרימה רגילה נכונה בכל כותרת,
 * בכל מספר שורות ובשני כיווני כתיבה.
 */
.legacy .section-title::after {
  content: "";
  display: block;
  position: static;
  width: 72px;
  height: 3px;
  margin: var(--sp-4) auto 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-sea-500), var(--c-sea-400));
  transition: width var(--dur-mid) var(--ease),
              background var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}

/* הרחבה כשעוברים מעל הסקשן כולו, לא רק מעל הקו עצמו */
.legacy .section:hover .section-title::after,
.legacy .content-section:hover .section-title::after,
.legacy .section-title:hover::after {
  width: 150px;
  background: linear-gradient(90deg, var(--c-gold-500), #ffd97a, var(--c-gold-500));
  box-shadow: 0 4px 14px -4px rgba(240, 168, 26, .6);
}

/* אותו אפקט לכותרות שהתבנית שלנו מייצרת */
.section-head h2 { position: relative; padding-bottom: var(--sp-3); }
.section-head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 56px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--c-sea-500);
  transition: width var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease);
}
.section:hover .section-head h2::after { width: 120px; background: var(--c-gold-500); }

/* ==========================================================================
   רשתות כרטיסים — 4 בשורה במסך רחב
   ========================================================================== */
@media (min-width: 1280px) {
  .legacy [class$="-grid"],
  .legacy [class$="-cards"],
  .legacy .categories-grid,
  .legacy .destinations-grid,
  .tour-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* פריטים רחבים נשארים 3 בשורה כדי שהטקסט יינשם */
  .legacy [class*="hotel"][class$="-grid"],
  .legacy [class*="package"][class$="-grid"] { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1700px) {
  .tour-grid { grid-template-columns: repeat(5, 1fr); }
}

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

   השכבות עולות מאפס ומעלה ולא בז-אינדקס שלילי: ‎isolation: isolate‎
   יוצר הקשר ערימה, ובתוכו ילד עם ז-אינדקס שלילי מצויר *מתחת* לרקע
   של ההורה — כך התמונה נעלמה מאחורי הכרטיס הבהיר.
   ========================================================================== */
.legacy .destination-card.destination-card,
.legacy .category-card.category-card:has(img),
.legacy .city-card.city-card:has(img),
.tour-card--visual {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 250px;
  background: var(--c-navy-900);   /* נראה מתחת לתמונה בזמן טעינה */
  box-shadow: var(--shadow-md);
}

/*
 * התמונה ממלאת את הכרטיס — בשתי צורות ה-DOM שקיימות באתר:
 * ‎<img>‎ כילד ישיר, או ‎<img>‎ עטוף ב-‎<div class="…-image">‎.
 */
.legacy .destination-card.destination-card > img,
.legacy .destination-card.destination-card > img,
.legacy .category-card.category-card:has(img) > img,
.legacy .city-card.city-card:has(img) > img,
.legacy .destination-card.destination-card > [class*="image"],
.legacy .destination-card.destination-card > [class*="img"],
.legacy .destination-card.destination-card > figure,
.legacy .destination-card.destination-card > [class*="image"],
.legacy .category-card.category-card:has(img) > [class*="image"],
.legacy .category-card.category-card:has(img) > figure,
.legacy .city-card.city-card:has(img) > [class*="image"] {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: auto !important;
  object-fit: cover;
  background: none;
  border-radius: 0;
  overflow: hidden;
  transition: transform 700ms var(--ease);
}
.legacy .destination-card.destination-card > [class*="image"] > img,
.legacy .destination-card.destination-card > [class*="img"] > img,
.legacy .destination-card.destination-card > figure > img,
.legacy .destination-card.destination-card > [class*="image"] > img,
.legacy .category-card.category-card:has(img) > [class*="image"] > img,
.legacy .category-card.category-card:has(img) > figure > img,
.legacy .city-card.city-card:has(img) > [class*="image"] > img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  aspect-ratio: auto !important;
}

/* שכבת ההצללה — בלעדיה הטקסט הלבן נעלם על תמונה בהירה */
.legacy .destination-card.destination-card::after,
.legacy .category-card.category-card:has(img)::after,
.legacy .city-card.city-card:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(4, 24, 46, .93) 0%,
    rgba(4, 24, 46, .62) 42%,
    rgba(4, 24, 46, .10) 78%);
  transition: opacity var(--dur-mid) var(--ease);
}
.legacy .destination-card.destination-card:hover > img,
.legacy .destination-card.destination-card:hover > [class*="image"],
.legacy .destination-card.destination-card:hover > [class*="image"],
.legacy .category-card.category-card:has(img):hover > img { transform: scale(1.06); }

/* התוכן — מעל ההצללה, נצמד לתחתית */
.legacy .destination-card.destination-card > :not(img),
.legacy .destination-card.destination-card > :not(img),
.legacy .category-card.category-card:has(img) > :not(img),
.legacy .city-card.city-card:has(img) > :not(img) {
  position: relative;
  z-index: 2;
  background: none;
  padding: var(--sp-3) var(--sp-4);
  color: #fff;
}
.legacy .destination-card.destination-card > [class*="image"],
.legacy .destination-card.destination-card > [class*="img"],
.legacy .destination-card.destination-card > figure,
.legacy .destination-card.destination-card > [class*="image"],
.legacy .category-card.category-card:has(img) > [class*="image"],
.legacy .category-card.category-card:has(img) > figure { padding: 0; }

.legacy .destination-card.destination-card h2,
.legacy .destination-card.destination-card h3,
.legacy .destination-card.destination-card h4,
.legacy .destination-card.destination-card [class$="-title"],
.legacy .destination-card.destination-card h3,
.legacy .category-card.category-card:has(img) h3,
.legacy .city-card.city-card:has(img) h3 {
  color: #fff;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  margin: 0 0 var(--sp-1);
}
.legacy .destination-card.destination-card p,
.legacy .destination-card.destination-card p,
.legacy .category-card.category-card:has(img) p,
.legacy .city-card.city-card:has(img) p {
  color: rgba(255, 255, 255, .9);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  margin: 0;
}

/* כפתור על כרטיס תמונה — זכוכית, לא מלבן צהוב */
.legacy .destination-card .btn,
.legacy .destination-card [class*="btn"],
.legacy .category-card:has(img) [class*="btn"] {
  align-self: flex-start;
  margin-top: var(--sp-2);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(8px);
  color: #fff;
}
.legacy .destination-card:hover .btn,
.legacy .destination-card:hover [class*="btn"],
.legacy .category-card:has(img):hover [class*="btn"] {
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
  color: var(--c-navy-950);
}

/* ==========================================================================
   גודל טקסט — כיול סופי
   --------------------------------------------------------------------------
   ההקטנה הקודמת ל-0.8rem הרחיקה לכת: טקסט גוף מתחת ל-15px נקרא קשה
   בעברית, במיוחד בפסקאות ארוכות. כאן נקבע גודל קריא שעדיין קומפקטי
   יותר מברירת המחדל.
   ========================================================================== */
main { font-size: 1rem; }

.legacy,
.legacy p,
.legacy li,
.legacy td,
.legacy th,
.prose p,
.prose li {
  font-size: 0.95rem;
  line-height: 1.75;
}

.legacy .section-description,
.legacy [class$="-description"],
.legacy [class$="-desc"],
.legacy [class$="-text"],
.legacy [class$="-subtitle"] { font-size: 0.9rem; line-height: 1.7; }

.legacy [class$="-title"],
.legacy [class$="-name"],
.legacy .hotel-title,
.legacy .card-title { font-size: 1.05rem; }

.legacy h1, .hero h1 { font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.4rem); }
.legacy h2, .legacy .section-title, .section-head h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem); }
.legacy h3 { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); }
.legacy h4 { font-size: 1.05rem; }

.legacy [class$="-price"],
.legacy [class*="price-amount"] { font-size: 0.95rem; }
.legacy [class$="-badge"],
.legacy [class$="-tag"],
.legacy [class$="-category"],
.legacy .hotel-feature { font-size: 0.75rem; }

.legacy .btn,
.legacy [class*="btn-"],
.legacy .book-button { font-size: 0.88rem; min-height: 42px; }

.legacy [class*="faq-q"],
.legacy [class*="faq-question"] { font-size: 0.95rem; }
.legacy [class*="faq-a"],
.legacy [class*="faq-answer"] { font-size: 0.9rem; line-height: 1.75; }
.legacy [class$="toc-link"] { font-size: 0.88rem; }

/* הירו — תת-כותרת קריאה, לא שורה דקה */
.hero__lede,
.legacy [class*="hero-subtitle"],
.legacy [class*="hero-description"] {
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
  line-height: 1.65;
  max-width: 62ch;
}

/* רכיבים שלנו */
.tour-card__title { font-size: 1rem; }
.tour-card__price { font-size: 0.92rem; }
.tour-card__note { font-size: 0.82rem; }
.tour-card__type { font-size: 0.74rem; }
.lead-sub { font-size: 0.9rem; }
.lead-field label { font-size: 0.85rem; }
.lead-field input, .lead-field textarea { font-size: 0.95rem; }
.lead-opt { font-size: 0.88rem; }
.breadcrumbs { font-size: 0.82rem; }
.site-footer { font-size: 0.88rem; }
.related__block h2 { font-size: 1.2rem; }
.related-chip { font-size: 0.88rem; }

/* ==========================================================================
   כרטיס מלון — תמונה מלאה, פרטים גלויים, פעולה ברורה
   --------------------------------------------------------------------------
   הכרטיסים הוצגו עם ריפוד לבן סביב התמונה, טקסט ממורכז וכפתור חיוור,
   וכך נראו ריקים. כאן התמונה ממלאת את ראש הכרטיס והפרטים חוזרים לזרימה.
   ========================================================================== */
.legacy .hotel-card,
.legacy .restaurant-card {
  padding: 0;
  text-align: start;
  gap: 0;
}

/* התמונה — רוחב מלא, בלי ריפוד או מסגרת */
.legacy .hotel-card > img,
.legacy .hotel-card [class*="image"],
.legacy .hotel-card [class*="image"] > img,
.legacy .restaurant-card > img,
.legacy .restaurant-card [class*="image"] > img {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  max-height: none;
}
.legacy .hotel-card [class*="image"] { aspect-ratio: 16 / 10; overflow: hidden; }

/* גוף הכרטיס */
.legacy .hotel-card > :not(img):not([class*="image"]),
.legacy .restaurant-card > :not(img):not([class*="image"]) {
  padding-inline: var(--sp-4);
}
.legacy .hotel-card [class*="content"],
.legacy .hotel-card [class*="info"],
.legacy .restaurant-card [class*="content"] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}

.legacy .hotel-card h3,
.legacy .hotel-card [class*="title"],
.legacy .restaurant-card h3 {
  text-align: start;
  font-size: 1.05rem;
  margin: 0;
}
.legacy .hotel-card p,
.legacy .restaurant-card p { text-align: start; font-size: 0.88rem; margin: 0; }

/* דירוג ותגיות — גלויים, לא נבלעים */
.legacy .hotel-card [class*="rating"],
.legacy .hotel-card .stars { align-self: flex-start; font-size: 0.95rem; }
.legacy .hotel-card [class*="features"] { margin-top: var(--sp-1); }

/* כפתור — מלא רוחב בתחתית */
.legacy .hotel-card [class*="btn"],
.legacy .hotel-card .hotel-card__cta,
.legacy .restaurant-card [class*="btn"] {
  margin: auto var(--sp-4) var(--sp-4);
  align-self: stretch;
  justify-content: center;
  background: var(--c-navy-800);
  color: #fff;
  border: 0;
  font-size: 0.88rem;
  min-height: 42px;
}
.legacy .hotel-card:hover [class*="btn"],
.legacy .hotel-card:hover .hotel-card__cta {
  background: var(--c-gold-500);
  color: var(--c-navy-950);
}

/* מפריד עדין בין התמונה לגוף */
.legacy .hotel-card [class*="content"],
.legacy .hotel-card [class*="info"] { border-top: 1px solid var(--border); }

/* ==========================================================================
   אייקונים — גודל וצבע אחידים
   ========================================================================== */
.legacy [class$="-icon"] i,
.legacy [class$="-icon"] svg { font-size: 1.1rem; line-height: 1; }

.legacy .feature-icon,
.legacy .benefit-icon,
.legacy .tip-icon,
.legacy .stage-icon,
.legacy .list-icon,
.legacy .call-icon {
  color: var(--c-sea-600);
  background: var(--c-sea-050);
}
.legacy .list-icon { width: 22px; height: 22px; font-size: 0.75rem; }
.legacy .list-icon i { font-size: 0.75rem; }

/* אייקון בתוך כפתור או קישור — יורש את הצבע שסביבו */
.legacy .btn i,
.legacy a i,
.legacy [class*="btn"] i { color: inherit; background: none; width: auto; height: auto; }

/* אייקון "כלול" ירוק, "לא כלול" אפור */
.legacy .included-list .list-icon,
.legacy [class*="check"] { color: var(--c-success); }
.legacy .excluded-list .list-icon { color: var(--c-ink-500); }

/* ==========================================================================
   אקורדיון תוכן — ‎.acc‎
   --------------------------------------------------------------------------
   נוצר בזמן הבנייה מאקורדיונים של Elementor, שהגיעו לכאן בלי ה-JS
   שסוגר אותם. ‎<details>‎ נותן את אותה התנהגות בלי סקריפט, עובד
   במקלדת ובקורא מסך, והתוכן שבפנים נשאר קריא לגוגל.
   ========================================================================== */
.legacy .acc {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-block: var(--sp-2);
  overflow: hidden;
}
.legacy .acc + .acc { margin-top: calc(var(--sp-2) * -1 + var(--sp-2)); }
.legacy .acc[open] { border-color: var(--c-sea-300); box-shadow: var(--shadow-sm); }

.legacy .acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--text-strong);
  transition: background var(--dur-fast) var(--ease);
}
.legacy .acc__q::-webkit-details-marker { display: none; }
.legacy .acc__q:hover { background: var(--c-sea-050); }
.legacy .acc__q::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);
}
.legacy .acc[open] .acc__q::after { content: "−"; }
/* הכותרות שבתוך ה-summary כבר לא צריכות להיות כותרות מסמך */
.legacy .acc__q h1, .legacy .acc__q h2, .legacy .acc__q h3,
.legacy .acc__q h4, .legacy .acc__q p {
  margin: 0; font-size: inherit; font-weight: inherit; color: inherit;
}
.legacy .acc__a {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-body);
}
.legacy .acc__a > :first-child { margin-top: 0; }
.legacy .acc__a > :last-child { margin-bottom: 0; }

/* ==========================================================================
   גבול עליון למדיה — אחד הכללים הבודדים עם ‎!important‎
   --------------------------------------------------------------------------
   בעמודי חיי הלילה יש תמונות שנשמרו ברוחב 1600px, וה-CSS של אותם
   עמודים מבטל את ה-‎max-width‎ הגלובלי. התוצאה: גלילה אופקית בכל
   העמוד ותמונות שיוצאות מהמסך. אף תמונה לא אמורה לחרוג מרוחב
   המכל שלה בשום מצב, ולכן כאן ‎!important‎ מוצדק — זה לא עיצוב,
   זו מניעת שבירה.
   ========================================================================== */
.legacy img,
.legacy picture,
.legacy video,
.legacy iframe,
.legacy svg,
.legacy canvas,
.legacy table {
  max-width: 100% !important;
}
.legacy img:not([width]):not([height]) { height: auto; }

/* גלריית תמונות בתוך בלוק תוכן — רשת במקום ערימה */
.legacy [class$="-gallery"],
.legacy [class$="-images"],
.legacy [class$="-photos"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-4);
}
.legacy [class$="-gallery"] > img,
.legacy [class$="-images"] > img,
.legacy [class$="-photos"] > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
}

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

   הסלקטורים כפולים בכוונה (‎.x.x‎) כדי לעלות בסגוליות על ה-CSS של
   העמוד, שנטען אחרי הגיליון הזה ומנצח בתיקו.
   ========================================================================== */

/* ריווח אנכי אחיד — הסקשנים היו מגיעים ל-120px ריפוד לכל כיוון */
.legacy .intro-section.intro-section,
.legacy .categories-section.categories-section,
.legacy .info-section.info-section,
.legacy .attractions-section.attractions-section {
  padding-block: var(--sp-7);
  margin-block: 0;
}
.legacy .intro-section.intro-section { padding-block: var(--sp-6); }
.legacy .intro-section.intro-section p {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* סוגי אטרקציות — כרטיס אמיתי במקום מלבן אפור */
.legacy .categories-grid.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}
.legacy .category-card.category-card:not(:has(img)) {
  position: static;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 0;
  padding: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--c-sea-500);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease);
}
.legacy .category-card.category-card:not(:has(img))::after { content: none; }
.legacy .category-card.category-card:not(:has(img)):hover {
  border-inline-start-color: var(--c-gold-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.legacy .category-card.category-card:not(:has(img)) h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  text-shadow: none;
  margin: 0;
}
.legacy .category-card.category-card:not(:has(img)) p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  text-shadow: none;
  margin: 0;
}
.legacy .category-card.category-card:not(:has(img)) a {
  color: var(--c-sea-600);
  font-weight: var(--fw-semibold);
  text-decoration-color: var(--c-sea-200);
  text-underline-offset: 0.2em;
}
.legacy .category-card.category-card:not(:has(img)) a:hover { color: var(--c-gold-700); }

/*
 * מידע חשוב — זוגות של כותרת ופסקה.
 * בעמוד המקורי הם נראים כמו טקסט רץ בלי היררכיה. הפיכתם לרשימת
 * מפרט קצרה נותנת לגולש לסרוק במקום לקרוא הכל.
 */
.legacy .info-section.info-section > .container > h3,
.legacy .info-content.info-content > h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  margin: var(--sp-5) 0 var(--sp-2);
}
.legacy .info-section.info-section > .container > h3::before,
.legacy .info-content.info-content > h3::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--c-gold-500);
  flex-shrink: 0;
}
.legacy .info-section.info-section > .container > p,
.legacy .info-content.info-content > p {
  margin: 0 0 var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--border);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* ==========================================================================
   רשימות תגיות — ‎*-features‎ / ‎*-tags‎ / ‎*-amenities‎
   --------------------------------------------------------------------------
   ה-span-ים האלה הם תגיות קצרות ("מאכלי ים", "ספא", "נוף לים"), אבל
   כיוון ששמם מכיל ‎feature‎ הם נתפסו בכלל הכרטיסים והפכו לגלולות
   ברוחב מלא זו מתחת לזו — שורה שלמה לכל מילה, וכרטיס פי שלושה מגובהו.
   ========================================================================== */
.legacy [class$="-features"],
.legacy [class$="-tags"],
.legacy [class$="-amenities"],
.legacy [class$="-badges"],
.legacy [class$="-labels"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
  margin: 0 0 var(--sp-2);
  background: none;
  border: 0;
  box-shadow: none;
  min-height: 0;
}
.legacy [class$="-features"] > *,
.legacy [class$="-tags"] > *,
.legacy [class$="-amenities"] > *,
.legacy [class$="-badges"] > *,
.legacy [class$="-labels"] > * {
  display: inline-flex;
  align-items: center;
  width: auto;
  flex: 0 0 auto;
  min-height: 0;
  padding: 2px var(--sp-3);
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-full);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  line-height: 1.7;
  white-space: nowrap;
  box-shadow: none;
  flex-direction: row;
}

/* ==========================================================================
   צפיפות כרטיסי מלון ומסעדה — שתי שורות בגלילה אחת
   ========================================================================== */
.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);
  gap: var(--sp-2);
}
.legacy :is([class$="-card"],[class*="-card "]) [class$="-image"]:not(img):not(picture),
.legacy :is([class$="-card"],[class*="-card "]) [class$="-media"]:not(img):not(picture) {
  aspect-ratio: 16 / 10;
}
.legacy :is([class$="-card"],[class*="-card "]) p {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  /* תיאור ארוך מותח כרטיס אחד ומשאיר חורים בשכנים */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.legacy :is([class$="-card"],[class*="-card "]) h3,
.legacy :is([class$="-card"],[class*="-card "]) h4 { font-size: var(--fs-md); }

/* ==========================================================================
   תמונה בכרטיס — ממלאת את המסגרת
   --------------------------------------------------------------------------
   חלק מהעמודים מגדירים לתמונה ‎object-fit: contain‎ או ‎max-height‎,
   ואז התמונה יושבת קטנה באמצע מסגרת אפורה. התמונה אמורה למלא את
   המסגרת — המסגרת קובעת את הפרופורציה, לא התמונה.
   ========================================================================== */
.legacy :is([class$="-card"],[class*="-card "]) [class$="-image"] > img,
.legacy :is([class$="-card"],[class*="-card "]) [class$="-media"] > img,
.legacy :is([class$="-card"],[class*="-card "]) [class$="-img"] > img,
.legacy :is([class$="-card"],[class*="-card "]) [class$="-photo"] > img,
.legacy :is([class$="-card"],[class*="-card "]) [class$="-thumb"] > img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* ==========================================================================
   רשימת "מה כלול" — שורות קומפקטיות, לא גלולה לכל פריט
   ========================================================================== */
.legacy :is([class$="-card"],[class*="-card "]) ul,
.legacy [class*="package"] ul,
.legacy [class*="included"] ul {
  display: grid;
  gap: 2px;
  margin: var(--sp-2) 0;
  padding: 0;
  list-style: none;
}
.legacy :is([class$="-card"],[class*="-card "]) ul > li,
.legacy [class*="package"] ul > li,
.legacy [class*="included"] ul > li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 0;
  padding: 3px var(--sp-2);
  margin: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-body);
  box-shadow: none;
}
.legacy :is([class$="-card"],[class*="-card "]) ul > li:nth-child(odd),
.legacy [class*="package"] ul > li:nth-child(odd) { background: var(--c-ink-050, #f6f7f9); }

/* ==========================================================================
   כרטיס חבילה — פרופורציה אחידה
   ========================================================================== */
.legacy [class*="package"][class*="card"],
.legacy [class*="pkg"][class*="card"] { padding: 0; }
.legacy [class*="package"][class*="card"] > [class*="image"],
.legacy [class*="package"][class*="card"] > [class*="media"] {
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  background: var(--c-ink-100, #eceff3);
}

/* ==========================================================================
   רשת יעדים קומפקטית — הכל במסך אחד
   --------------------------------------------------------------------------
   14 יעדים בכרטיסים של 250px גובה ו-3 בשורה = חמש גלילות רק כדי
   לראות את הרשימה. זו רשימת ניווט, לא גלריה: תפקידה לתת לגולש
   לבחור יעד במבט אחד. אריח נמוך יותר ויותר עמודות עושים בדיוק את זה.
   ========================================================================== */
.legacy .destinations-grid.destinations-grid,
.legacy .categories-grid.categories-grid:has(> [class*="destination"]) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-3);
}
@media (min-width: 1100px) {
  .legacy .destinations-grid.destinations-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1500px) {
  .legacy .destinations-grid.destinations-grid { grid-template-columns: repeat(6, 1fr); }
}

.legacy .destination-card.destination-card { min-height: 168px; }
.legacy .destination-card.destination-card > :not(img) { padding: var(--sp-2) var(--sp-3); }
.legacy .destination-card.destination-card h2,
.legacy .destination-card.destination-card h3,
.legacy .destination-card.destination-card h4,
.legacy .destination-card.destination-card [class$="-title"] {
  font-size: var(--fs-sm);
  margin-bottom: 0;
}
/* התיאור מוסתר באריח — הוא חוזר בעמוד היעד עצמו */
.legacy .destination-card.destination-card p { display: none; }
/* כפתור "גלה עוד" מיותר: כל האריח כבר קישור */
.legacy .destination-card.destination-card [class*="btn"] { display: none; }

/*
 * הצללה עדינה יותר באריח קומפקטי.
 * הגרדיאנט נבנה לכרטיס בגובה 250px עם כותרת ותיאור. באריח של 168px
 * הוא מכסה כמעט את כל התמונה, והרשת יוצאת כהה ואחידה. כאן הוא נשאר
 * רק בשליש התחתון — מספיק כדי שהכותרת הלבנה תהיה קריאה.
 */
.legacy .destination-card.destination-card::after {
  background: linear-gradient(to top,
    rgba(4, 24, 46, .88) 0%,
    rgba(4, 24, 46, .45) 32%,
    rgba(4, 24, 46, 0) 62%);
}

/*
 * גוף האריח לא מתמתח.
 * כלל הכרטיסים הכללי נותן ל-‎*-content‎ ערך ‎flex: 1‎ כדי שכרטיסים
 * בשורה יהיו באותו גובה. באריח יעד זה גורם לגוף למלא את כל הגובה,
 * והכותרת נדבקת לראש האריח — מעל החלק הבהיר של התמונה במקום על
 * ההצללה שבתחתית.
 */
.legacy .destination-card.destination-card > :not(img) {
  flex: 0 0 auto;
  margin-top: auto;
}

/* ==========================================================================
   האריח כולו לחיץ
   --------------------------------------------------------------------------
   הקישור היחיד באריח היעד היה כפתור "גלה עוד" בתחתית. הסתרת הכפתור
   הפכה את האריח ללא לחיץ בכלל. במקום להסתיר, הקישור נמתח על כל
   שטח האריח: הטקסט שלו נעלם, השטח הלחיץ גדל מכפתור קטן לאריח שלם,
   והמבנה ב-DOM נשאר כפי שהוא — כולל ה-href שגוגל עוקב אחריו.
   ========================================================================== */
.legacy .destination-card.destination-card a,
.legacy .destination-card.destination-card [class*="btn"] {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  /* הטקסט נשאר לקוראי מסך ולגוגל, ורק לא נראה */
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.legacy .destination-card.destination-card a::after,
.legacy .destination-card.destination-card a::before { content: none; }

/* תמונת אריח — מלבן, לא עיגול */
.legacy .destination-card.destination-card img,
.legacy .destination-card.destination-card [class*="image"] {
  border-radius: 0 !important;
  clip-path: none;
}

/*
 * שטח הלחיצה חייב גובה.
 * ‎font-size: 0‎ על הקישור איפס גם את גובהו כשהוא נמתח, ולכן
 * ‎inset: 0‎ לבדו לא הספיק. גובה ורוחב מפורשים מבטיחים שטח לחיצה
 * בגודל האריח בכל דפדפן.
 */
.legacy .destination-card.destination-card > a.tile-link,
.legacy .destination-card.destination-card > a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  display: block;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/*
 * הקישור המתוח הוא שטח לחיצה בלבד — לא כפתור זכוכית.
 * הכפתור "גלה עוד" קיבל ‎backdrop-filter: blur(8px)‎ כשהיה גלולה
 * קטנה בפינה. אחרי שנמתח על כל האריח, אותו טשטוש הוחל על כל
 * התמונה שמתחתיו וכל הרשת יצאה מטושטשת.
 */
.legacy .destination-card.destination-card > a,
.legacy .destination-card.destination-card > a.tile-link,
.legacy .destination-card.destination-card > [class*="btn"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   רצועת ה-SEO ורצועת המגזין בדף הבית — קומפקטיות
   --------------------------------------------------------------------------
   שני הסקשנים האלה מסבירים ומפנים, הם לא המוצר. בגודלם המקורי כל
   אחד תפס גלילה שלמה: כותרת ענקית, פסקאות ברוחב מלא, צ'יפים גדולים
   ושאלות פתוחות. כאן הם מכווצים לגודל שמתאים לתפקידם.
   ========================================================================== */
.legacy #seo.section,
.legacy #magazine.section,
.legacy [id*="magazine"].section {
  padding-block: var(--sp-6);
}

.legacy #seo .section-title,
.legacy #magazine .section-title,
.legacy [id*="magazine"] .section-title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
}
.legacy #seo .section-subtitle,
.legacy #magazine .section-subtitle {
  font-size: var(--fs-sm);
  max-width: 62ch;
  margin-inline: auto;
}

/* הקופסה: פחות ריפוד, טקסט קטן יותר, כותרות משנה צנועות */
.legacy #seo .seo-box {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  max-width: 900px;
  margin-inline: auto;
}
.legacy #seo .seo-box h3 {
  font-size: var(--fs-md);
  margin: var(--sp-4) 0 var(--sp-1);
}
.legacy #seo .seo-box > h3:first-child { margin-top: 0; }
.legacy #seo .seo-box p {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-2);
}

/* צ'יפים של ביטויי חיפוש — קטנים, הם משרתים גוגל ולא את העין */
.legacy #seo .seo-kws { gap: 6px; margin-block: var(--sp-3); }
.legacy #seo .seo-kws > * {
  padding: 2px var(--sp-3);
  font-size: var(--fs-3xs);
  line-height: 1.8;
  min-height: 0;
}

/* שאלות ותשובות בתוך הרצועה — שורות צרות */
.legacy #seo details,
.legacy #seo .faq-item,
.legacy #seo .acc { margin-block: 2px; }
.legacy #seo summary,
.legacy #seo .acc__q {
  padding: var(--sp-2) var(--sp-4);
  min-height: 40px;
  font-size: var(--fs-sm);
}
.legacy #seo .acc__a { padding: 0 var(--sp-4) var(--sp-3); font-size: var(--fs-xs); }

/*
 * רצועת ה-SEO בשתי עמודות.
 *
 * גם אחרי ההקטנה היא נשארה טור אחד באורך 1,270 פיקסלים. ‎column-count‎
 * מחלק את התוכן לשתי עמודות מאוזנות בלי לשנות את סדר ה-DOM ובלי
 * להסתיר דבר מגוגל. ‎break-inside: avoid‎ מונע משאלה להיחתך באמצע
 * בין עמודה לעמודה.
 */
@media (min-width: 1000px) {
  .legacy #seo .seo-box {
    max-width: 1080px;
    column-count: 2;
    column-gap: var(--sp-7);
  }
  .legacy #seo .seo-box > * { break-inside: avoid; }
  .legacy #seo .seo-box > h3 { break-after: avoid; margin-top: var(--sp-3); }
  .legacy #seo .seo-box > h3:first-child { margin-top: 0; }
}

/* ==========================================================================
   שאלות ותשובות ברצועת ה-SEO — שתי עמודות, שורות קלילות
   --------------------------------------------------------------------------
   שש שאלות בטור אחד, כל אחת בקופסה של 85 פיקסלים עם מרווח, נתנו
   בלוק של כמעט 600 פיקסלים לתוכן שהוא משני. שתי עמודות ושורה
   נמוכה יותר מחזירות אותו לפרופורציה של שאר האתר.
   ========================================================================== */
@media (min-width: 900px) {
  .legacy #seo .faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-4);
    align-items: start;
  }
}

.legacy #seo .faq-item {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--c-white);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.legacy #seo .faq-item:hover { border-color: var(--c-sea-200); box-shadow: var(--shadow-sm); }

.legacy #seo .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: none;
  border: 0;
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  cursor: pointer;
}
.legacy #seo .faq-q:hover { color: var(--c-sea-600); }
.legacy #seo .faq-q i {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-size: 11px;
  transition: transform var(--dur-mid) var(--ease);
}
.legacy #seo .faq-item.is-open .faq-q i,
.legacy #seo .faq-item[open] .faq-q i { transform: rotate(180deg); }

.legacy #seo .faq-a {
  padding: 0 var(--sp-4) var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* כותרת "שאלות ותשובות" — צנועה, היא לא כותרת סקשן */
.legacy #seo h3 + .faq,
.legacy #seo .faq { margin-top: var(--sp-2); }

/*
 * השאלות פורסות על רוחב הקופסה כולה.
 * הקופסה עצמה היא שתי עמודות, ובלי ‎column-span‎ רשת השאלות נדחסה
 * לתוך עמודה אחת ברוחב 214 פיקסלים — כל שאלה נשברה לשלוש שורות
 * וההקטנה התבטלה.
 */
@media (min-width: 900px) {
  .legacy #seo .seo-box > .faq,
  .legacy #seo .seo-box > h3:has(+ .faq) {
    column-span: all;
  }
  .legacy #seo .seo-box > .faq { margin-top: var(--sp-3); }
}

/* צ'יפ ביטוי חיפוש שהפך לקישור — נראה לחיץ ומגיב */
.legacy .kw-chip {
  text-decoration: none;
  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);
}
.legacy .kw-chip:hover {
  background: var(--c-gold-050, #fdf6e8);
  border-color: var(--c-gold-500);
  color: var(--c-gold-700);
  transform: translateY(-1px);
}

/* ==========================================================================
   שלושת הסקשנים הגדולים בדף הבית — ‎#why‎, ‎#hotels‎, ‎#magazine‎
   --------------------------------------------------------------------------
   כל אחד מהם תפס מסך שלם ויותר. הם חשובים, אבל הם לא צריכים להיות
   גדולים כדי להיות ברורים: כרטיס נמוך יותר, טקסט מרוסן, ויותר
   פריטים בשורה מראים את אותו מידע בשליש מהגובה.
   ========================================================================== */
.legacy #why.section,
.legacy #hotels.section,
.legacy #magazine.section { padding-block: var(--sp-6); }

.legacy #why .section-title,
.legacy #hotels .section-title,
.legacy #magazine .section-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.legacy #why .section-subtitle,
.legacy #hotels .section-subtitle,
.legacy #magazine .section-subtitle { font-size: var(--fs-sm); max-width: 62ch; margin-inline: auto; }

/* --- מגיע לכם יותר --- */
.legacy #why .premium-grid { gap: var(--sp-3); margin-block: var(--sp-4); }
.legacy #why .premium-grid > * { padding: var(--sp-4); }
.legacy #why .premium-grid h3,
.legacy #why .premium-grid [class$="-title"] { font-size: var(--fs-sm); }
.legacy #why .premium-grid p { font-size: var(--fs-xs); line-height: var(--lh-normal); }
@media (min-width: 1100px) {
  .legacy #why .premium-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- מלונות מומלצים --- */
.legacy #hotels .hotels-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-3);
}
@media (min-width: 1280px) { .legacy #hotels .hotels-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .legacy #hotels .hotels-grid { grid-template-columns: repeat(5, 1fr); } }

.legacy #hotels .hotel-image { aspect-ratio: 16 / 10; }
.legacy #hotels .hotel-content { padding: var(--sp-3) var(--sp-4) var(--sp-4); gap: var(--sp-1); }
.legacy #hotels .hotel-title { font-size: var(--fs-sm); }
.legacy #hotels .card-desc {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  min-height: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.legacy #hotels .hotel-rating { font-size: var(--fs-2xs); }
.legacy #hotels .card-cta { margin-top: var(--sp-2); }
.legacy #hotels .card-cta .btn { padding: var(--sp-2) var(--sp-4); min-height: 36px; font-size: var(--fs-xs); }

/* --- מגזין תאילנד --- */
.legacy #magazine .magazine-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--sp-3);
}
@media (min-width: 1280px) { .legacy #magazine .magazine-grid { grid-template-columns: repeat(5, 1fr); } }
.legacy #magazine .article-image { aspect-ratio: 16 / 10; }
.legacy #magazine .article-content { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.legacy #magazine .article-title { font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.legacy #magazine .article-excerpt {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.legacy #magazine .read-more { font-size: var(--fs-xs); margin-top: var(--sp-2); }

/*
 * סגוליות מול ה-CSS של דף הבית.
 * הוא כותב ‎.legacy #te-main .hotels-grid‎ — מזהה ועוד שתי מחלקות.
 * כלל עם מזהה אחד בלבד לא גובר עליו, ולכן ההקטנה הקודמת לא נכנסה
 * לתוקף בכלל. כאן שני המזהים נכללים יחד.
 */
.legacy #te-main #hotels .hotels-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-3);
}
.legacy #te-main #magazine .magazine-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-3);
}
@media (min-width: 1200px) {
  .legacy #te-main #hotels .hotels-grid,
  .legacy #te-main #magazine .magazine-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 720px) {
  .legacy #te-main #hotels .hotels-grid,
  .legacy #te-main #magazine .magazine-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
}

/* המעטפת של "מגיע לכם יותר" — פחות ריפוד ומסגרת */
.legacy #te-main .premium-shell { padding: var(--sp-4); border-radius: var(--r-lg); }
.legacy #te-main .premium-grid { gap: var(--sp-3); margin-top: var(--sp-3); }

/* כרטיסי המלונות והמגזין בדף הבית — נמוכים יותר (‎#te-main‎ לסגוליות) */
.legacy #te-main #hotels .hotel-image { height: auto; aspect-ratio: 16 / 10; }
.legacy #te-main #hotels .hotel-content { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.legacy #te-main #hotels .hotel-title { font-size: var(--fs-sm); }
.legacy #te-main #hotels .card-desc {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.legacy #te-main #hotels .card-cta .btn { padding: var(--sp-2) var(--sp-4); min-height: 34px; font-size: var(--fs-xs); }
.legacy #te-main #magazine .article-image { height: auto; aspect-ratio: 16 / 10; }
.legacy #te-main #magazine .article-content { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

/* "מגיע לכם יותר" — שש תכונות, שלוש בשורה, כרטיס נמוך */
.legacy #te-main #why .premium-grid > .feature { padding: var(--sp-3) var(--sp-4); }
.legacy #te-main #why .feature h3 { font-size: var(--fs-sm); margin: var(--sp-1) 0; }
.legacy #te-main #why .feature p {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.legacy #te-main #why .feature-icon { width: 34px; height: 34px; font-size: var(--fs-sm); }

/* ==========================================================================
   הקו מתחת לכותרת סקשן — מגיב לריחוף גם בדף הבית
   --------------------------------------------------------------------------
   הכלל הכללי נכתב עם מחלקות בלבד, ו-CSS של דף הבית מגדיר את הקו דרך
   ‎#te-main‎ — מזהה, שגובר. התוצאה: בכל האתר הקו מתרחב בריחוף, ובדף
   הבית דווקא לא. כאן אותה סגוליות.
   ========================================================================== */
.legacy #te-main .section-title::after {
  transition: width var(--dur-mid) var(--ease),
              background var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}
.legacy #te-main .section:hover .section-title::after,
.legacy #te-main .section-title:hover::after {
  width: 130px;
  background: linear-gradient(90deg, var(--c-gold-500), #ffd97a, var(--c-gold-500));
  box-shadow: 0 4px 16px -4px rgba(240, 168, 26, .7);
}
/* על הפס הכהה הקו מתחלף לזהב מלא */
.legacy #te-main .te-strip.te-strip.section:hover .section-title::after {
  width: 130px;
  background: linear-gradient(90deg, var(--c-gold-500), #ffe09a, var(--c-gold-500));
  box-shadow: 0 4px 18px -4px rgba(240, 168, 26, .9);
}

/* גם הכותרת עצמה מגיבה — סימון עדין שהסקשן חי */
.legacy #te-main .section-title { transition: color var(--dur-mid) var(--ease); }
.legacy #te-main .section:hover .section-title { color: var(--c-navy-950); }
.legacy #te-main .te-strip.te-strip.section:hover .section-title { color: #fff; }

/* ==========================================================================
   "מגיע לכם יותר מחופשה על אוטומט" — צמצום
   ==========================================================================
   הכללים האלה יושבים בקובץ הזה ולא ב-components.css מסיבה אחת:
   שם כבר קיים ‎.legacy #te-main #why .feature p‎ באותה סגוליות
   בדיוק, והקובץ הזה נטען אחריו. שני כללים זהים בסגוליות מוכרעים
   לפי סדר הטעינה, ולכן הגרסה שנכתבה ב-components.css לא נכנסה
   לתוקף כלל.

   הסקשן והפס שמעליו אמורים להיקרא כרצף אחד ולא כשתי עצירות.
   התוכן נשאר במלואו — שישה כרטיסים, שלוש הוכחות וכל הטקסט.
   ========================================================================== */
.legacy #te-main > #why.section.section { padding-block: clamp(1.75rem, 2.6vw, 2.4rem); }
.legacy #te-main #why .section-title { margin-bottom: var(--sp-2); }
.legacy #te-main #why .section-subtitle {
  font-size: var(--fs-2xs);
  line-height: 1.6;
  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); line-height: 1.4; }

/*
 * שלוש עמודות מ-900 פיקסלים ומעלה.
 * שישה כרטיסים בשתי עמודות הם שלוש שורות; בשלוש עמודות הם שתיים,
 * וזו שורה שלמה של גובה שנחסכת בלי להוריד ולו כרטיס אחד.
 */
.legacy #te-main #why .premium-grid { gap: var(--sp-2); }
@media (min-width: 900px) {
  .legacy #te-main #why .premium-grid { grid-template-columns: repeat(3, 1fr); }
}
.legacy #te-main #why .feature { padding: var(--sp-3); }
.legacy #te-main #why .feature-top { margin-bottom: var(--sp-2); gap: var(--sp-2); }
.legacy #te-main #why .feature-icon {
  inline-size: 28px;
  block-size: 28px;
  font-size: var(--fs-3xs);
}
.legacy #te-main #why .feature-tag { font-size: var(--fs-3xs); }
.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; }

/* פס השותפים — אותו היגיון, אותו קובץ */
.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-chip { font-size: var(--fs-2xs); padding: 5px var(--sp-4); }

/*
 * המדידה הצביעה על שני מוקדים שבלעו את רוב הגובה, ושניהם ריווח:
 * מעטפת רצועת הלוגואים החזיקה 122 פיקסלים סביב שורה בגובה 48,
 * ושישה כרטיסי "מגיע לכם" הגיעו ל-174 פיקסלים לשורה בגלל תיאור
 * שנפרש על ארבע שורות. הגבלה לשלוש שורות מיישרת את גובה כל
 * הכרטיסים באותה שורה ומורידה שורה שלמה.
 */
.legacy #te-main .te-strip.te-strip .logo-marquee {
  padding: 0;
  margin-block: var(--sp-2);
}
.legacy #te-main .te-strip.te-strip .section-title { padding-bottom: var(--sp-2); }
.legacy #te-main .te-strip.te-strip .chain-marquee__lede { margin-bottom: var(--sp-2); }

.legacy #te-main #why .feature p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.legacy #te-main #why .feature h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * ‎min-height:170px‎ על הכרטיס היה הגורם האמיתי לגובה הרשת.
 * התוכן בפועל מגיע ל-117 פיקסלים, וההפרש היה אוויר שנכפה על כל
 * שישה הכרטיסים. הגובה האחיד נשמר ממילא על ידי הגריד, שמותח את
 * כל התאים באותה שורה לגובה הגבוה שבהם.
 */
.legacy #te-main #why .feature { min-height: 0; }
.legacy #te-main #why .premium-grid { align-items: stretch; }

/* תת-כותרת בשורה אחת במסך רחב במקום שתיים */
.legacy #te-main .te-strip.te-strip .section-subtitle { max-width: 78ch; }

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

   1. שאר השלבים נמוגים ל-45%. הדימום הוא מה שהופך ריחוף להתמקדות:
      העין רואה שלב אחד ולא ארבעה.
   2. העיגול מתמלא בזהב והספרה מתהפכת ללבן.
   3. המקטע שיוצא ממנו אל השלב הבא נצבע במלואו — הקו "מתקדם".
   4. השורה נעה שני פיקסלים לכיוון הקריאה, והכותרת עוברת לזהב כהה.

   ‎:focus-within‎ לצד ‎:hover‎ כדי שמי שמנווט במקלדת יקבל את אותה
   הדגשה; ‎prefers-reduced-motion‎ משאיר את הצבעים ומבטל תנועה.
   ========================================================================== */
.legacy #te-main #about .about-side li,
.about-team .about-side li {
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.legacy #te-main #about .about-side ul:hover li,
.legacy #te-main #about .about-side ul:focus-within li,
.about-team .about-side ul:hover li,
.about-team .about-side ul:focus-within li { opacity: .45; }

.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:hover,
.about-team .about-side ul li:focus-within {
  opacity: 1;
  /* הסטה קלה הלאה מהציר — השורה "נפתחת" ואינה נדחפת אל העיגול */
  transform: translateX(-2px);
}

/* העיגול מתמלא */
.legacy #te-main #about .about-side li::before,
.about-team .about-side li::before {
  transition: background var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.legacy #te-main #about .about-side li:hover::before,
.legacy #te-main #about .about-side li:focus-within::before,
.about-team .about-side li:hover::before,
.about-team .about-side li:focus-within::before {
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
  color: var(--c-white) !important;
  transform: scale(1.12);
}

/* הקו אל השלב הבא מתקדם */
.legacy #te-main #about .about-side li:not(:last-child)::after,
.about-team .about-side li:not(:last-child)::after {
  transition: background var(--dur-mid) var(--ease);
}
.legacy #te-main #about .about-side li:hover:not(:last-child)::after,
.legacy #te-main #about .about-side li:focus-within:not(:last-child)::after,
.about-team .about-side li:hover:not(:last-child)::after,
.about-team .about-side li:focus-within:not(:last-child)::after {
  background: var(--c-gold-500);
}

.legacy #te-main #about .about-side li b,
.about-team .about-side li b {
  transition: color var(--dur-fast) var(--ease);
}
.legacy #te-main #about .about-side li:hover b,
.legacy #te-main #about .about-side li:focus-within b,
.about-team .about-side li:hover b,
.about-team .about-side li:focus-within b { color: var(--c-gold-700) !important; }

@media (prefers-reduced-motion: reduce) {
  .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:hover,
.about-team .about-side ul li:focus-within { transform: none; }
  .legacy #te-main #about .about-side li:hover::before,
.legacy #te-main #about .about-side li:focus-within::before,
.about-team .about-side li:hover::before,
.about-team .about-side li:focus-within::before { transform: none; }
}

/*
 * ארבעת השבבים הפכו מ-‎<span>‎ ל-‎<a>‎, ולכן הם יורשים עכשיו את
 * עיצוב הקישורים — צבע וקו תחתון. הם צריכים להיראות בדיוק כפי
 * שנראו, רק להגיב.
 */
.legacy #te-main #about .about-pills a.pill,
.about-team .about-pills a.pill {
  text-decoration: none;
  color: var(--c-navy-800) !important;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.legacy #te-main #about .about-pills a.pill:hover,
.about-team .about-pills a.pill:hover {
  border-color: var(--c-gold-500);
  background: var(--c-gold-050);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.legacy #te-main #about .about-pills a.pill:hover i,
.about-team .about-pills a.pill:hover i { color: var(--c-gold-700) !important; }

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

   שלוש בעיות נמדדו בכרטיס:
   • מיכל התמונה ‎301×150‎ אבל התמונה בתוכו ‎207×138‎ — פסי רקע
     אפורים משני הצדדים ומלמעלה, כי למיכל יש ריפוד והתמונה אינה
     ממלאת אותו.
   • הכרטיס ‎303×391‎ — גובה של כמעט ארבע מאות פיקסלים לכותרת בת
     שורה, תיאור בן שלוש ומחיר.
   • רקע הסקשנים ‎#f8f9fa‎, אפור קר, לצד השמנת החמה של שאר האתר.
   ========================================================================== */

/* משטחים: שני גוונים חמים לסירוגין, כמו בדף הבית */
.legacy #te-main .section { background: var(--c-white); }
.legacy #te-main .section:nth-of-type(even) { background: var(--c-surface); }
.legacy #te-main .section.section { padding-block: var(--section-pad); }

/* ---- מיכל התמונה: ממלא, לא מרופד ---- */
.legacy #te-main .attraction-image,
.legacy #te-main .tour-card__media,
.legacy #te-main .hotel-image {
  position: relative;
  padding: 0;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: 0;
}
.legacy #te-main .attraction-image img,
.legacy #te-main .hotel-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow, .4s) var(--ease);
}
.legacy #te-main .attraction-card:hover .attraction-image img,
.legacy #te-main .hotel-card:hover .hotel-image img { transform: scale(1.06); }

/* ---- הכרטיס ---- */
.legacy #te-main .attraction-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.legacy #te-main .attraction-card:hover {
  border-color: var(--c-gold-200);
  box-shadow: var(--shadow-md);
}
.legacy #te-main .attraction-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.legacy #te-main .attraction-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-950);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.legacy #te-main .attraction-description {
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* שורת הפרטים נצמדת לתחתית — כל הכרטיסים בשורה מסתיימים יחד */
.legacy #te-main .attraction-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
  font-size: var(--fs-3xs);
}
.legacy #te-main .attraction-price {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--c-navy-950);
  background: var(--c-gold-500);
  border-radius: var(--r-full);
  padding: 5px var(--sp-3);
}
.legacy #te-main .attraction-duration {
  color: var(--text-muted);
  font-size: var(--fs-3xs);
}

/* ---- הרשת ---- */
.legacy #te-main .attractions-grid,
.legacy #te-main [class*="attraction"][class*="grid"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: var(--sp-3);
  align-items: stretch;
}
@media (min-width: 1200px) {
  .legacy #te-main .attractions-grid,
  .legacy #te-main [class*="attraction"][class*="grid"] { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .legacy #te-main .attractions-grid,
  .legacy #te-main [class*="attraction"][class*="grid"] { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .legacy #te-main .attraction-content { padding: var(--sp-3); }
}

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

   הכללים כאן ולא ב-components.css: שם כבר קיימים בוררים זהים
   בסגוליות, והקובץ הזה נטען אחריו.
   ========================================================================== */
.legacy #te-main > .te-strip.te-strip.section.section {
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
}
.legacy #te-main .te-strip.te-strip .section-subtitle {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}

/* הלוגואים — גדולים, עם אוויר סביבם */
.legacy #te-main .te-strip.te-strip .logo-marquee { margin-block: var(--sp-5); }
.legacy #te-main .te-strip.te-strip .logo-marquee__track > * {
  block-size: 84px;
  min-inline-size: 176px;
  padding: 0 var(--sp-6);
}
.legacy #te-main .te-strip.te-strip .logo-marquee__track img {
  max-block-size: 56px;
  opacity: .85;
}
.legacy #te-main .te-strip.te-strip .logo-marquee__track > *:hover img { opacity: 1; }

/* שמות הרשתות — שורה שנייה, באותו קנה מידה */
.legacy #te-main .te-strip.te-strip .chain-marquee {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid rgba(255, 255, 255, .14);
}
.legacy #te-main .te-strip.te-strip .chain-marquee__lede {
  font-size: var(--fs-2xs);
  margin-bottom: var(--sp-4);
}
.legacy #te-main .te-strip.te-strip .chain-chip {
  font-size: var(--fs-lg);
  letter-spacing: .16em;
  padding: var(--sp-3) var(--sp-5);
}

@media (max-width: 720px) {
  .legacy #te-main .te-strip.te-strip .logo-marquee__track > * {
    block-size: 60px;
    min-inline-size: 128px;
    padding: 0 var(--sp-4);
  }
  .legacy #te-main .te-strip.te-strip .chain-chip { font-size: var(--fs-sm); }
}

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

   הכלל הקודם שכתבתי פספס כי הוא פנה ל-‎.guide-gallery‎, והמחלקה
   בפועל היא ‎.hotel-page__gallery‎. כאן הוא פונה לשם הנכון.

   שלוש עמודות ביחס 4:3 נותנות שתי שורות מלאות לשש תמונות, בלי
   שורה קטועה, ובגובה סביר.
   ========================================================================== */
.hotel-page__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  align-items: stretch;
  margin-block-start: var(--sp-4);
}
.hotel-page__gallery img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
  max-block-size: 190px;
}
@media (min-width: 1100px) { .hotel-page__gallery { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 720px)  { .hotel-page__gallery { grid-template-columns: repeat(2, 1fr); } }

/*
 * ריווח הסקשנים בעמודי המדריך.
 * ‎section--tight‎ ירש ריווח שנקבע לעמודים אחרים, והתוצאה בעמוד
 * אטרקציות ארוך היא מסך שלם בין בלוק לבלוק.
 */
.legacy #te-main .section--tight,
#main > .section--tight { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
#main > .section--tight > .container > h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-3);
}

/* ==========================================================================
   הקטנה בפועל — סגוליות ומידות
   ==========================================================================
   המידה שקבעתי לגלריה לא נכנסה לתוקף: ב-legacy-skin.css יושב
   ‎.legacy div:has(> img + img) > img { max-height: none }‎, ובורר
   עם שלוש מחלקות ואלמנטים גובר על ‎.hotel-page__gallery img‎ גם
   כשהקובץ שלי נטען אחריו. כאן הבורר מקבל את אותה דרגה ועוד אחת.

   בנוסף, כרטיס ה-‎tour-card‎ עמד על 309 פיקסלים ושלושה בלוקים
   כאלה הגיעו יחד ל-2,360. הקטנת חלון התמונה והצמדת הטקסט
   מורידות את הכרטיס בכ-70 פיקסלים, וזה מצטבר על פני כל העמוד.
   ========================================================================== */
.legacy .hotel-page__gallery.hotel-page__gallery > img,
.hotel-page__gallery.hotel-page__gallery > img {
  max-height: 170px;
  max-block-size: 170px;
}

/* כרטיס קומפקטי בבלוקים הקשורים */
#main .related__block .tour-card__media,
.legacy #te-main .related__block .tour-card__media { aspect-ratio: 16 / 10; }

#main .related__block .tour-card__body,
.legacy #te-main .related__block .tour-card__body {
  padding: var(--sp-3);
  gap: 4px;
}
#main .related__block .tour-card__title { font-size: var(--fs-sm); line-height: 1.3; }
#main .related__block .tour-card__note {
  font-size: var(--fs-3xs);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ריווח בין הבלוקים */
#main .related__block + .related__block { margin-block-start: var(--sp-5); }
#main .related__block > h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }

/*
 * רצועת השותפים: אותו מבנה, קנה מידה קטן יותר.
 * הגרסה המוגדלת הייתה גדולה מדי — לוגו בגובה 56 פיקסלים בתוך
 * אריח של 84 תפס יותר נוכחות מהכותרת שמעליו.
 */
.legacy #te-main > .te-strip.te-strip.section.section {
  padding-block: clamp(1.9rem, 3.2vw, 2.9rem);
}
.legacy #te-main .te-strip.te-strip .logo-marquee { margin-block: var(--sp-4); }
.legacy #te-main .te-strip.te-strip .logo-marquee__track > * {
  block-size: 58px;
  min-inline-size: 132px;
  padding: 0 var(--sp-5);
}

.legacy #te-main .te-strip.te-strip .chain-marquee {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
}
.legacy #te-main .te-strip.te-strip .chain-chip {
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  padding: var(--sp-2) var(--sp-4);
}
.legacy #te-main .te-strip.te-strip .section-subtitle { margin-bottom: var(--sp-4); }

@media (max-width: 720px) {
  .legacy #te-main .te-strip.te-strip .logo-marquee__track > * {
    block-size: 46px; min-inline-size: 104px; padding: 0 var(--sp-3);
  }
  .legacy #te-main .te-strip.te-strip .chain-chip { font-size: var(--fs-2xs); }
}

/* עוד סיבוב הקטנה ברצועת השותפים, לפי משוב */
.legacy #te-main .te-strip.te-strip .logo-marquee__track > * {
  block-size: 46px;
  min-inline-size: 112px;
  padding: 0 var(--sp-4);
}
.legacy #te-main .te-strip.te-strip .chain-chip {
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
  padding: 6px var(--sp-3);
}
.legacy #te-main > .te-strip.te-strip.section.section {
  padding-block: clamp(1.6rem, 2.6vw, 2.3rem);
}

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

   שלושת הגורמים לגובה, לפי סדר התרומה שלהם:
     1. תגיות שיורדות שורה כל אחת, כי הכרטיס צר מדי בשבילן
     2. תיאור בלי הגבלת שורות
     3. ריפוד sp-4 מכל צד ועוד כפתור בגובה 42

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

/* עמודה רחבה יותר: תגית נכנסת לשורה במקום ליפול ממנה */
.legacy .hotels-grid,
.legacy .beaches-grid,
.legacy .restaurants-grid,
.legacy .shopping-grid,
.legacy .nightlife-grid,
.legacy .attractions-grid,
.legacy .tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

/* גוף הכרטיס: ריפוד אחד, לא ריפוד לכל ילד */
.legacy .hotel-card [class*="content"],
.legacy .hotel-card [class*="info"],
.legacy .restaurant-card [class*="content"],
.legacy .beach-card .beach-content,
.legacy .revived-link .hotel-content {
  gap: var(--sp-2);
  padding: var(--sp-3);
}

/* תגיות: קטנות, ובשורה אחת עד שנגמר המקום */
.legacy .beach-features,
.legacy .hotel-features,
.legacy .restaurant-features,
.legacy .nightlife-features,
.legacy .shopping-features {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legacy .beach-feature,
.legacy .hotel-feature,
.legacy .beach-features > *,
.legacy .restaurant-features > *,
.legacy .nightlife-features > *,
.legacy .shopping-features > * {
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--c-sea-600);
  background: var(--c-sea-050);
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-full);
  padding: 1px var(--sp-2);
  white-space: nowrap;
}

/*
 * התיאור נחתך לשלוש שורות.
 * line-clamp הוא חיתוך ויזואלי: הטקסט המלא נשאר ב-DOM, נקרא
 * במסך קורא ונסרק בגוגל. כרטיס אינו המקום לקרוא בו פסקה, הוא
 * המקום להחליט בו אם להיכנס.
 */
.legacy :is([class$="-card"],[class*="-card "]) p,
.legacy .revived-link .card-desc,
.legacy .hotel-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--fs-2xs);
  line-height: 1.55;
  margin: 0;
}

/* כותרת כרטיס */
.legacy .hotel-card h3,
.legacy .hotel-card [class*="title"],
.legacy .restaurant-card h3,
.legacy .beach-card .beach-title,
.legacy .revived-link .hotel-title {
  font-size: var(--fs-sm);
  line-height: 1.35;
  margin: 0;
}

/* כוכבי דירוג: שורה דקה, לא בלוק */
.legacy .hotel-rating { font-size: var(--fs-3xs); line-height: 1; margin: 0; }
.legacy .hotel-rating i { font-size: var(--fs-3xs); }

/*
 * הכפתור בתחתית: שורה אחת.
 * "להזמנה ופרטים נוספים" נשבר לשתי שורות ולקח 60 פיקסל מגובה כל
 * כרטיס. הטקסט נשאר כפי שהוא, רק גודל הגופן והריפוד יורדים כדי
 * שייכנס בשורה.
 */
.legacy .hotel-card .btn,
.legacy .hotel-card a[class*="btn"],
.legacy .restaurant-card .btn,
.legacy .restaurant-card a[class*="btn"],
.legacy .revived-link .card-cta .btn,
.legacy .beach-card .beach-card__cta {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  text-align: center;
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-3);
  min-height: 34px;
  font-size: var(--fs-3xs);
  line-height: 1.2;
}
.legacy .revived-link .card-cta { margin-top: auto; padding: 0; }

/* התמונה: יחס שטוח יותר, כך שהכרטיס כולו נמוך */
.legacy .hotel-card [class*="image"],
.legacy .hotel-card > img,
.legacy .restaurant-card [class*="image"],
.legacy .beach-card .beach-image,
.legacy .revived-link .card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.legacy .beach-card .beach-image img,
.legacy .revived-link .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  max-height: none;
}

/*
 * revived-link הוא <a> שעוטף כרטיס מלון שלם, ובלי הכלל הזה
 * הוא נשאר display:inline, ולכן התמונה והגוף לא נערמו והכרטיס
 * קיבל גובה שרירותי.
 */
.legacy .revived-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}
.legacy .revived-link .hotel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ==========================================================================
   תוכן עניינים
   --------------------------------------------------------------------------
   מה שהיה: רשימת קישורים שחורים על מלבן לבן, פרושים בארבע עמודות
   בלי סדר קריאה ברור ובלי סימן שהם קישורים. זה נראה כמו טבלה של
   מילים ולא כמו מפת העמוד.
   ========================================================================== */
.dest-toc,
.legacy .toc {
  margin-block: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--c-gold-500);
  border-radius: var(--r-md);
}
.dest-toc__title,
.legacy .toc > h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}
.dest-toc__title::after,
.legacy .toc > h2::after { display: none; }

.dest-toc__list,
.legacy .toc ol,
.legacy .toc ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 2px var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.dest-toc__list li,
.legacy .toc li { margin: 0; padding: 0; list-style: none; counter-increment: toc; }

.dest-toc__list a,
.legacy .toc li a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-800);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
/* המספר נותן לרשימה סדר קריאה, וגם מבדיל אותה מפסקת קישורים */
.dest-toc__list a::before,
.legacy .toc li a::before {
  content: counter(toc);
  flex: none;
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--c-gold-700);
}
.dest-toc__list a:hover,
.legacy .toc li a:hover {
  color: var(--c-sea-600);
  border-bottom-color: var(--c-sea-200);
}

/* ==========================================================================
   עובדות מהירות: האייקון חוזר להיראות
   --------------------------------------------------------------------------
   האייקונים כתובים ב-HTML מאז ומתמיד (fa-map-marker-alt, fa-users,
   fa-temperature-high, fa-plane) אבל ישבו בלי גודל ובלי צבע משלהם,
   ולכן נבלעו בטקסט. כאן הם מקבלים עיגול משלהם מעל הכותרת.
   ========================================================================== */
.legacy [class$="quick-facts"] .fact-item,
.legacy [class$="-facts"] .fact-item {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  align-content: start;
}
.legacy .fact-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-size: 1rem;
}
.legacy [class$="quick-facts"] .fact-item h3,
.legacy [class$="-facts"] .fact-item h3 {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  letter-spacing: .02em;
  margin: 0;
}
.legacy [class$="quick-facts"] .fact-item p,
.legacy [class$="-facts"] .fact-item p {
  font-size: var(--fs-sm);
  color: var(--text-body);
  margin: 0;
}
.legacy [class$="quick-facts"] { padding: var(--sp-4) var(--sp-5); }

/* ==========================================================================
   הכרטיס הקומפקטי גובר על ה-CSS המוטבע
   --------------------------------------------------------------------------
   הבלוק שלמעלה נכתב בבוררים מסוג ".legacy .hotel-feature", ואותה
   ספציפיות בדיוק (0,2,0) קיימת גם ב-<style> המוטבע שוורדפרס מביא
   איתו. המוטבע נטען אחרון, ולכן הוא ניצח: התגיות נשארו בגודל
   0.9rem עם ריפוד 5px 15px, ולכן כל אחת מהן תפסה שורה משלה. שלוש
   תגיות = 121 פיקסל בתוך כרטיס בגובה 596.

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

   מדידה לפני: מלון 596, מסעדה 491, חוף 387.
   ========================================================================== */

/* תגיות: קטנות, צמודות, ובשורה אחת */
.legacy #te-main [class$="-features"],
.legacy #te-main .hotel-features,
.legacy #te-main .beach-features {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.legacy #te-main .hotel-feature,
.legacy #te-main .beach-feature,
.legacy #te-main [class$="-features"] > * {
  font-size: var(--fs-3xs);
  line-height: 1.45;
  padding: 2px var(--sp-2);
  min-height: 0;
  border-radius: var(--r-full);
}

/*
 * התיאור: שלוש שורות.
 * המוטבע נתן לו 0.95rem בלי הגבלת שורות, ולכן פסקה בת ארבע שורות
 * לקחה 99 פיקסל. הטקסט עצמו לא נגזר — רק מוצג חתוך.
 */
.legacy #te-main .hotel-card p,
.legacy #te-main .restaurant-card p,
.legacy #te-main .beach-card p,
.legacy #te-main .hotel-content p,
.legacy #te-main .hotel-description,
.legacy #te-main .revived-link .card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--fs-2xs);
  line-height: 1.5;
  margin: 0;
}

/*
 * הכפתור: שורה אחת.
 * "להזמנה ופרטים נוספים" קיבל 61 פיקסל כי הוא נשבר לשתי שורות.
 */
.legacy #te-main .hotel-card__cta,
.legacy #te-main .beach-card__cta,
.legacy #te-main .restaurant-card__cta,
.legacy #te-main .hotel-card .btn,
.legacy #te-main .revived-link .card-cta .btn {
  min-height: 32px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-3xs);
  line-height: 1.2;
  border-radius: var(--r-full);
}

/*
 * "להזמנה ופרטים נוספים" פעמיים.
 *
 * span.was-link הוא שריד של קישור שהומר לטקסט בשלב החילוץ, והוא
 * אומר בדיוק את מה שכתוב על הכפתור שמתחתיו. הוא מוסתר רק כשיש
 * כפתור באותו כרטיס, כדי שלא ייעלם קישור שהוא הדרך היחידה להמשיך.
 */
.legacy #te-main :is([class$="-card"],[class*="-card "]) .was-link:has(+ a),
.legacy #te-main .hotel-content .was-link:has(+ a) { display: none; }

/* גוף הכרטיס: ריפוד ומרווח אחידים */
.legacy #te-main .hotel-content,
.legacy #te-main .beach-content,
.legacy #te-main .restaurant-content {
  gap: var(--sp-2);
  padding: var(--sp-3);
}
.legacy #te-main .hotel-card h3,
.legacy #te-main .beach-card h3,
.legacy #te-main .restaurant-card h3,
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class$="-title"] {
  font-size: var(--fs-sm);
  line-height: 1.35;
  margin: 0;
}

/* תג הקטגוריה שמעל התמונה */
.legacy #te-main [class$="-category"],
.legacy #te-main .hotel-category {
  font-size: var(--fs-3xs);
  padding: 2px var(--sp-2);
  min-height: 0;
  line-height: 1.5;
}

/* התמונה: יחס שטוח, כך שכל הכרטיס יורד */
.legacy #te-main .hotel-card .activity-image,
.legacy #te-main .hotel-card [class$="-image"],
.legacy #te-main .beach-card [class$="-image"],
.legacy #te-main .restaurant-card [class$="-image"],
.legacy #te-main .revived-link .card-media {
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  position: relative;
}
.legacy #te-main .hotel-card .activity-image > img,
.legacy #te-main .hotel-card [class$="-image"] > img,
.legacy #te-main .beach-card [class$="-image"] > img,
.legacy #te-main .restaurant-card [class$="-image"] > img,
.legacy #te-main .revived-link .card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  max-height: none;
}

/* ==========================================================================
   רשתות הכרטיסים גוברות על ה-CSS המוטבע
   --------------------------------------------------------------------------
   אותה בעיית ספציפיות כמו בכרטיס עצמו: ה-<style> המוטבע מגדיר
   ‎.beaches-grid { grid-template-columns: repeat(2,1fr); gap: 30px }‎
   ומנצח, ולכן חוף אחד תופס 424 פיקסל רוחב ו-402 גובה — כרטיס
   בגודל של חצי מסך לפריט אחד ברשימה של חמישה.

   שתי עמודות ברוחב 1024 פיקסל הן החלטה שנלקחה מול תוכן אחר.
   ‎auto-fill‎ עם מינימום קבוע נותן שלוש או ארבע עמודות במסך רחב
   ואחת בטלפון, בלי לקבוע מספר עמודות מראש.
   ========================================================================== */
.legacy #te-main .beaches-grid,
.legacy #te-main .hotels-grid,
.legacy #te-main .restaurants-grid,
.legacy #te-main .shopping-grid,
.legacy #te-main .nightlife-grid,
.legacy #te-main .attractions-grid,
.legacy #te-main .activities-grid,
.legacy #te-main .areas-grid,
.legacy #te-main .tour-grid {
  display: grid;
  --card-w: 288px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), var(--card-w)));
  justify-content: center;
  gap: var(--sp-4);
  align-items: stretch;
}

/*
 * הכרטיס לא נמתח לגובה השכן הגבוה ביותר יותר מהנדרש.
 * ‎margin-top:auto‎ על הכפתור דוחף אותו לתחתית, וכשהשורה נמתחת
 * לגובה הכרטיס הארוך ביותר נוצר חלל לבן בכל השאר. יישור לראש
 * השורה משאיר כל כרטיס בגובה התוכן שלו.
 */
.legacy #te-main .hotel-content,
.legacy #te-main .beach-content,
.legacy #te-main .restaurant-content { justify-content: flex-start; }

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

   הכפתור גלוי תמיד ולא רק בריחוף: כפתור שמתגלה רק כשעוברים מעליו
   אינו קיים בשביל מי שלא ניחש שהוא שם, ובמסך מגע אין ריחוף בכלל.
   הוא קטן ומאופק, ולכן אינו מתחרה בלשונית עצמה.
   ========================================================================== */
.flight-tab__close {
  position: absolute;
  inset-block-start: -9px;
  inset-inline-end: -9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-full);
  background: var(--c-navy-950);
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(4, 24, 46, .9);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  z-index: 2;
}
.flight-tab__close:hover,
.flight-tab__close:focus-visible {
  color: #fff;
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
  color: var(--c-navy-950);
}
.flight-tab__close:focus-visible { outline: 2px solid var(--c-gold-500); outline-offset: 2px; }

/* אחרי סגירה הלשונית נעלמת עד לטעינה הבאה של העמוד */
.flight-tab-wrap[hidden] { display: none !important; }

/* ==========================================================================
   כפתורי הכרטיסים חוזרים לפלטה של האתר
   --------------------------------------------------------------------------
   ‎.btn-cta‎ הגיע מוורדפרס עם ‎background:#007bff‎ — הכחול הדיפולטי
   של Bootstrap. הוא יושב על כרטיסי האטרקציות והפעילויות בכל עמודי
   היעד, וליד הכחול־נייבי והזהב של האתר הוא נקרא כרכיב מאתר אחר.
   הטקסט על הכפתור לא משתנה, רק הצבע והגודל.
   ========================================================================== */
.legacy #te-main .btn-cta,
.legacy #te-main .activity-card .btn-cta,
.legacy #te-main :is([class$="-card"],[class*="-card "]) .btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  background: var(--c-navy-800);
  color: #fff;
  border: 0;
  border-radius: var(--r-full);
  min-height: 32px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.legacy #te-main .btn-cta:hover,
.legacy #te-main .btn-cta:focus-visible {
  background: var(--c-gold-500);
  color: var(--c-navy-950);
}

/* כרטיס הפעילות מקבל את אותו ריפוד ואותו חיתוך תיאור כמו השאר */
.legacy #te-main .activity-card .activity-content,
.legacy #te-main .activity-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  flex: 1;
}
.legacy #te-main .activity-card p,
.legacy #te-main .activity-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--fs-2xs);
  line-height: 1.5;
  margin: 0;
}
.legacy #te-main .activity-card h3,
.legacy #te-main .activity-content h3 {
  font-size: var(--fs-sm);
  line-height: 1.35;
  margin: 0;
}

/*
 * תג המחיר ותג משך הזמן שמעל התמונה.
 * הם עובדה עסקית ונשארים מילה במילה; רק הגודל יורד כדי שלא
 * יתחרו בתמונה שמתחתיהם.
 */
.legacy #te-main .activity-image [class*="price"],
.legacy #te-main .activity-image [class*="duration"],
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class*="badge"] {
  font-size: var(--fs-3xs);
  padding: 3px var(--sp-2);
  line-height: 1.4;
  min-height: 0;
}

/* ==========================================================================
   טיפים למטייל
   --------------------------------------------------------------------------
   מה שהיה: ‎.tips-container‎ בלי שום כלל, כלומר ‎display:block‎. שלוש
   קטגוריות (בטיחות, חיסכון בכסף, תרבות מקומית) נערמו זו מתחת לזו
   ברוחב מלא, כל אחת עם ‎<ul>‎ מנוקד ברירת מחדל, וכותרת הקטגוריה
   ישבה ב-‎<div class="tip-title">‎ שאינו כותרת ולכן לא קיבל שום
   טיפוגרפיה. התוצאה: עמודה אחת ארוכה של טקסט קטן עם נקודות שחורות,
   בכל אחד מעמודי היעד.

   כאן זו רשת של שלושה כרטיסים, כל אחד עם אייקון בראשו ורשימה
   שסומנה בסימן משלנו. הטקסט עצמו, כולל כל טיפ וטיפ, לא נגע.
   ========================================================================== */
.legacy #te-main .tips-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
}

.legacy #te-main .tip-category {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.legacy #te-main .tip-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  margin: 0;
}

.legacy #te-main .tip-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-size: 0.8rem;
}

/*
 * הרשימה מקבלת סימן משלה.
 * נקודה שחורה של הדפדפן היא ברירת מחדל ולא החלטה, והיא נראית
 * כמו טקסט שלא עוצב. הסימן כאן באותו זהב של שאר האתר.
 */
/*
 * ‎min-width: 0‎ ולא רק ‎max-width: 100%‎.
 *
 * ‎.tip-category‎ הוא ‎flex column‎, ולפריט flex יש ‎min-width: auto‎
 * — כלומר הוא מסרב להצטמצם מתחת לרוחב התוכן שלו. הרשימה יצאה
 * ברוחב 404 פיקסל בתוך כרטיס של 280, והטקסט גלש אל מחוץ למסגרת
 * בכל שלושת הכרטיסים. האיפוס כאן מחזיר לו את היכולת לשבור שורה.
 */
.legacy #te-main .tip-category ul {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  min-width: 0;
  list-style: none;
}
.legacy #te-main .tip-category > * { min-width: 0; }
/*
 * גם ה-‎<li>‎ וגם ה-‎<ul>‎.
 * הרשימה עצמה היא ‎grid‎, ולכן כל ‎<li>‎ הוא פריט grid — ולפריט
 * grid יש ‎min-width: auto‎ בדיוק כמו לפריט flex. בלי האיפוס הזה
 * הפריט מסרב לרדת מתחת לרוחב השורה המלאה, והטקסט ממשיך לגלוש.
 */
.legacy #te-main .tip-category li {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.legacy #te-main .tip-category li {
  position: relative;
  margin: 0;
  padding-inline-start: var(--sp-4);
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: var(--text-body);
  list-style: none;
}
.legacy #te-main .tip-category li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--c-gold-500);
}

/* ==========================================================================
   כלל אחד לכל סוגי הכרטיסים, במקום רשימה שרודפת אחרי כל סוג
   --------------------------------------------------------------------------
   הכללים הקודמים מנו את הסוגים בשמם: hotel-card, beach-card,
   restaurant-card, activity-card. ‎.shopping-card‎ לא היה ברשימה,
   ולכן הוא נשאר עם כותרת בגודל 20.6 פיקסל, פסקה בת שש שורות בלי
   חיתוך וריפוד 24 — 529 פיקסל גובה, בעוד כרטיס מלון לידו הוא 420.
   ‎.nightlife-card‎ ו-‎.market-card‎ היו באותו מצב.

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

/* גוף הכרטיס: כל עטיפה פנימית, ולא רק אלה שנקראו בשם */
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-content"],
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-body"],
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-info"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-2);
  padding: var(--sp-3);
  min-width: 0;
}

/* כותרת */
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-content"] > h3,
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-body"] > h3,
.legacy #te-main :is([class$="-card"],[class*="-card "]) h3 {
  font-size: var(--fs-sm);
  line-height: 1.35;
  margin: 0;
}

/* תיאור: שלוש שורות, הטקסט המלא נשאר ב-DOM */
.legacy #te-main :is([class$="-card"],[class*="-card "]) p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--fs-2xs);
  line-height: 1.5;
  margin: 0;
}

/*
 * שורות מאפיין קצרות בתוך כרטיס — שעות פתיחה, טווח מחירים, מרחק.
 * הן עובדה עסקית ונשארות מילה במילה; רק הגודל יורד.
 */
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class*="hours"],
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class*="price"],
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class*="distance"],
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class*="duration"] {
  font-size: var(--fs-3xs);
  line-height: 1.5;
  margin: 0;
}

/*
 * ‎span.was-link‎ הוא שריד של קישור שהומר לטקסט בשלב החילוץ.
 * כשהכרטיס כולו כבר לחיץ, הוא שורה מיותרת בגובה 24 פיקסל בכל
 * כרטיס. הוא מוסתר רק בכרטיס שיש בו קישור אמיתי.
 */
.legacy #te-main :is([class$="-card"],[class*="-card "]).is-linked .was-link,
.legacy #te-main a:is([class$="-card"],[class*="-card "]) .was-link { display: none; }

/* התמונה בראש הכרטיס — יחס אחיד לכל הסוגים */
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-image"],
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-media"],
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-thumb"] {
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  position: relative;
  flex: none;
}
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-image"] > img,
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-media"] > img,
.legacy #te-main :is([class$="-card"],[class*="-card "]) > [class$="-thumb"] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  max-height: none;
}

/* תגיות מאפיין בכל סוג כרטיס */
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class$="-features"],
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class$="-tags"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  min-width: 0;
  list-style: none;
}
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class$="-features"] > *,
.legacy #te-main :is([class$="-card"],[class*="-card "]) [class$="-tags"] > * {
  font-size: var(--fs-3xs);
  line-height: 1.45;
  padding: 2px var(--sp-2);
  min-height: 0;
  border-radius: var(--r-full);
  white-space: nowrap;
}

/* ==========================================================================
   חיי לילה — רשת המקומות
   --------------------------------------------------------------------------
   ‎/חיי-לילה-בתאילנד‎ מחזיק תוכן אמיתי ועשיר: שבעה יעדים, עשרים
   מקומות עם תיאור, שורת מיקום, קישור ו-58 תמונות. אבל המחלקות
   שהוא בנוי מהן — ‎.location‎, ‎.club‎, ‎.club-content‎, ‎.club-info‎,
   ‎.club-images‎ — לא הופיעו באף גיליון סגנונות באתר.

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

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

/* כל יעד הוא בלוק, והמקומות שבתוכו רשת */
.legacy #te-main .location {
  margin-block: var(--sp-6);
}
.legacy #te-main .location > h2,
.legacy #te-main .location-header h2 {
  margin-bottom: var(--sp-4);
}

/*
 * הרשת עוטפת את הכרטיסים שאחרי הכותרת.
 * ‎.club‎ אינו יושב במיכל משלו בתוכן המקורי, ולכן הרשת מוגדרת על
 * ‎.location‎ עצמו ובאמצעות ‎display: contents‎ על הכותרת, כדי לא
 * לשנות את ה-DOM.
 */
/*
 * ‎auto-fit‎ ולא ‎auto-fill‎.
 *
 * מספר המועדונים ביעד נע בין שניים לארבעה, והרשת רחבה מספיק
 * לשלוש עמודות. ‎auto-fill‎ משאיר את העמודה השלישית פתוחה וריקה,
 * ולכן בנגקוק, קראבי וקו טאו נראו כאילו כרטיס נשמט מהם.
 * ‎auto-fit‎ מקפל את העמודות הריקות, ושני כרטיסים נמתחים על כל
 * הרוחב.
 */
.legacy #te-main .location {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}
.legacy #te-main .location > h2,
.legacy #te-main .location > .location-header,
.legacy #te-main .location > p {
  grid-column: 1 / -1;
}

.legacy #te-main .club {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.legacy #te-main .club > h3 {
  order: 2;
  margin: 0;
  padding: var(--sp-3) var(--sp-3) 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.legacy #te-main .club-content {
  order: 3;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-2);
  padding: var(--sp-3);
  min-width: 0;
}

.legacy #te-main .club-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
}

/* התיאור: שלוש שורות. הטקסט המלא נשאר ב-DOM ונסרק בגוגל */
.legacy #te-main .club-info > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: 1.55;
}

/*
 * שורת המיקום היא עובדה ולא תיאור, ולכן היא נשארת שלמה ומקבלת
 * סימון משלה במקום להיראות כמו עוד פסקה.
 */
.legacy #te-main .club-info > p:has(strong) {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: var(--fs-3xs);
  color: var(--text-muted);
}
.legacy #te-main .club-info > p > strong {
  color: var(--c-navy-800);
  font-weight: var(--fw-semibold);
}

/* הקישור בתחתית הכרטיס, בצורת הכפתור של שאר האתר */
.legacy #te-main .club-info > a {
  margin-top: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-navy-800);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.legacy #te-main .club-info > a:hover,
.legacy #te-main .club-info > a:focus-visible {
  background: var(--c-gold-500);
  color: var(--c-navy-950);
}

/*
 * התמונות עולות לראש הכרטיס.
 *
 * במקור הן יושבות אחרי הטקסט, כל אחת בגודל הקובץ המקורי — 768,
 * 670 ו-284 פיקסל זו מתחת לזו. כאן הראשונה היא כותרת הכרטיס
 * ביחס 16:9, והשאר רצועת ממוזערות מתחתיה.
 */
/*
 * ‎order: -1‎ ולא ‎1‎.
 *
 * ‎.club-images‎ הוא אח של ‎.club-info‎ בתוך ‎.club-content‎, ולכן
 * ‎order: 1‎ הציב אותו *אחרי* הטקסט: הכרטיס נפתח בפסקה ורק
 * בתחתיתו הופיעה התמונה. ערך שלילי מעלה אותו מעל הטקסט, מיד
 * מתחת לכותרת, כמו בכל שאר כרטיסי האתר.
 */
.legacy #te-main .club-images {
  order: -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.legacy #te-main .club-images img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  max-height: none;
}
/* התמונה הראשונה על כל הרוחב; הבאות בזוגות מתחתיה */
.legacy #te-main .club-images img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
/*
 * תמונה אחת לכל כרטיס מועדון.
 *
 * קודם הכרטיס הציג קולאז׳: תמונה רחבה ומתחתיה עוד שתיים קטנות.
 * מספר התמונות משתנה ממועדון למועדון — לחלק יש שלוש ולרובם יש
 * אחת — ולכן בקו פנגן ובפוקט הכרטיסים יצאו בגובה 558 פיקסלים
 * ובשאר היעדים 264. באותו עמוד, זה ליד זה, כרטיס אחד גבוה פי
 * שניים מהשני. זה מה שנראה שבור.
 *
 * הקולאז׳ גם לא הוסיף מידע: שלוש תמונות של אותה מסיבה, שתיים
 * מהן בגודל אגודל. תמונה אחת ברוחב מלא נותנת את אותה מסיבה
 * גדולה יותר, וכל הכרטיסים באותו גובה.
 *
 * התמונות הנוספות נשארות ב-HTML ולא נמחקות: הן תוכן אמיתי של
 * העמוד, והחלטה ויזואלית אינה סיבה למחוק אותו מהמקור.
 */
.legacy #te-main .club-images {
  grid-template-columns: 1fr;
}
.legacy #te-main .club-images img:nth-child(n + 2) { display: none; }
.legacy #te-main .club-images img:first-child { aspect-ratio: 16 / 9; }

@media (max-width: 560px) {
  .legacy #te-main .location { grid-template-columns: 1fr; }
}


/* ==========================================================================
   כרטיס חיי לילה שאינו בתוך בלוק יעד
   --------------------------------------------------------------------------
   שלושה מתוך עשרים המקומות אינם יושבים בתוך ‎.location‎ אלא ישירות
   בגוף העמוד, ולכן הם לא היו פריטי רשת ונשארו ברוחב מלא. התמונה
   הראשית שלהם יצאה 983 פיקסל רוחב ו-553 גובה, והכרטיס כולו 1,124
   פיקסל — פי שניים מהשכנים שלו.

   כאן כל רצף של כרטיסים כאלה הופך לרשת בזכות עצמו, בלי לשנות את
   ה-DOM: הם עוטפים את עצמם בזכות ‎display: grid‎ על ההורה הישיר
   שלהם כשהוא מכיל כרטיסים.
   ========================================================================== */
.legacy #te-main .container > div:has(> .club),
.legacy #te-main .section-content:has(> .club) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

/*
 * רשת ביטחון: גם אם כרטיס נשאר ברוחב מלא, תמונותיו אינן גדלות
 * ללא גבול. זה מה שהופך שורת תמונות ל-862 פיקסל גובה.
 */
.legacy #te-main .club-images img { max-height: 220px; }
.legacy #te-main .club-images img:first-child { max-height: 260px; }

/* תוכן העניינים גם כשהוא יושב מחוץ ל-.legacy */
.dest-toc__list { display: grid; }

/* קישור הכרטיס שנבנה מחדש — אותה צורה כמו קישור שהיה תקין מלכתחילה */
.legacy #te-main .club-info > .club-cta {
  margin-top: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-navy-800);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.legacy #te-main .club-info > .club-cta:hover,
.legacy #te-main .club-info > .club-cta:focus-visible {
  background: var(--c-gold-500);
  color: var(--c-navy-950);
}


/* ==========================================================================
   עמודי המסיבות — פול מון והלף מון

   שלושת העמודים האלה נבנו בוורדפרס כמערכת עצמאית: ‎hero-section‎,
   ‎section-light‎, ‎section-dark‎, ‎cta-section‎, ‎callout‎, ‎gallery‎.
   הסגנון שלהם ישב ב-‎<style>‎ בתוך העמוד, והוא הוסר בייבוא יחד עם
   שאר ה-‎<head>‎. שום כלל לא נכתב במקומו, ולכן העמודים הגיעו
   לדפדפן בלי עיצוב כלל: טקסט על רקע לבן, רווחים אקראיים
   וכותרת ראשית בשחור על גבי תצלום לילה.

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

/* --------------------------------------------------------------- הירו */

/*
 * הכותרת הייתה בלתי קריאה.
 *
 * ‎.hero-section‎ מגדיר ‎color: #fff‎, אבל ‎.hero-title‎ הוא ‎h1‎
 * והכלל הגלובלי שלנו על ‎h1‎ צובע אותו ‎--text-strong‎, כלומר
 * ‎#14181d‎. הצבע הכהה ניצח בגלל סדר הכללים, והתוצאה הייתה
 * כותרת כמעט-שחורה על תצלום לילה — הגולש פשוט לא ראה אותה.
 *
 * הצבע נקבע כאן על הכותרת עצמה ולא בירושה מההורה, כי ירושה
 * היא בדיוק מה שנכשל כאן.
 */
.legacy #te-main .hero-section {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: clamp(340px, 46vh, 520px);
  padding-block: var(--sp-10);
  padding-inline: var(--gutter);
  background-size: cover;
  background-position: center;
  text-align: center;
  isolation: isolate;
}

/*
 * שכבת הכהות.
 *
 * התצלום הוא קהל בלילה עם אורות ניאון — הוא בהיר ורועש בדיוק
 * במרכז, במקום שבו הכותרת יושבת. שכבה אחידה לא הספיקה; מעבר
 * שמתחזק כלפי מטה משאיר את החלק העליון של התמונה גלוי ונותן
 * לטקסט רקע יציב.
 */
.legacy #te-main .hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(4, 24, 46, .45) 0%,
    rgba(4, 24, 46, .72) 55%,
    rgba(4, 24, 46, .88) 100%
  );
}

.legacy #te-main .hero-content {
  max-inline-size: 46rem;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-5);
}

.legacy #te-main .hero-section .hero-title,
.legacy #te-main .hero-section h1 {
  margin: 0;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(4, 24, 46, .55);
}

.legacy #te-main .hero-section .hero-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  text-wrap: balance;
}

.legacy #te-main .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* כפתור על רקע כהה: הראשי מלא, המשני קו בלבד */
.legacy #te-main .hero-section .btn-outline {
  background: transparent;
  color: var(--c-white);
  border: 1.5px solid rgba(255, 255, 255, .7);
}
.legacy #te-main .hero-section .btn-outline:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--c-white);
}

/* ------------------------------------------------------------ הסקשנים */

/*
 * קצב אנכי אחיד.
 *
 * בלי הכללים האלה כל שנים-עשר הסקשנים נערמו בלי ריווח משלהם,
 * והמרווחים שנראו בעמוד הגיעו מה-‎margin‎ של הפסקאות בלבד. זה
 * מה שיצר את הרושם של "מלא רווחים": פערים בגדלים אקראיים,
 * כי הם נגזרו ממה שבמקרה היה בראש הסקשן ובסופו.
 */
.legacy #te-main .section-light,
.legacy #te-main .section-dark,
.cta-section {
  padding-block: clamp(var(--sp-8), 5vw, var(--sp-11));
  margin: 0;
}

.legacy #te-main .section-light {
  background: var(--c-surface-raised);
}

/*
 * הסקשן הכהה.
 *
 * הוא מה שמונע מהעמוד להיראות כמו מסמך לבן אחד ארוך: הוא חותך
 * אותו לפרקים שאפשר לזהות בגלילה מהירה. בלעדיו כל שנים-עשר
 * הסקשנים היו לבנים זה אחרי זה, וזה בדיוק מה שנראה בצילום.
 */
.legacy #te-main .section-dark {
  background: var(--c-navy-900);
  color: rgba(255, 255, 255, .9);
}
.legacy #te-main .section-dark h2,
.legacy #te-main .section-dark h3,
.legacy #te-main .section-dark h4,
.legacy #te-main .section-dark strong {
  color: var(--c-white);
}
.legacy #te-main .section-dark a {
  color: var(--c-sea-200);
}
.legacy #te-main .section-dark a:hover {
  color: var(--c-white);
}

.legacy #te-main .content-section > h2:first-child,
.legacy #te-main .section-light > .container > h2:first-child,
.legacy #te-main .section-dark > .container > h2:first-child {
  margin-block-start: 0;
}

/*
 * עמודת טקסט אחת ברוחב קריא.
 *
 * הכלל הקודם הגביל רק ‎<p>‎ ל-68 תווים, והשאיר את הרשימות
 * והכותרות שלידן נמתחות על כל 1053 הפיקסלים של המכל. במסך רחב
 * זה יצר את מה שנראה כמו "מלא רווחים": כל פסקה 509 פיקסלים עם
 * 544 פיקסלים ריקים לצידה, ומיד מתחתיה רשימה שתופסת את השורה
 * כולה. הטקסט קפץ פנימה והחוצה לאורך כל העמוד.
 *
 * המידה חלה עכשיו על כל אלמנטי הטקסט יחד, כך שהם מתיישרים לקו
 * אחד. רשתות ותמונות אינן כאן ונשארות ברוחב המלא.
 *
 * ‎76ch‎ ולא ‎68ch‎: עברית צרה יותר מאנגלית באותו מספר תווים,
 * והמידה הצרה יצרה שורות קצרות מדי בעמודי המסיבות.
 */
.legacy #te-main .content-section > p,
.legacy #te-main .content-section > ul,
.legacy #te-main .content-section > ol,
.legacy #te-main .content-section > h3,
.legacy #te-main .content-section > h4,
.legacy #te-main .content-section > blockquote {
  max-inline-size: 76ch;
  /*
   * מיושרת לקו הפתיחה, לא ממורכזת.
   *
   * בהתחלה מירכזתי אותה כדי שלא יישאר חלל בצד אחד. זה עבד כל
   * עוד כל התוכן היה טקסט. מרגע שהרשימות הפכו לרשתות שנמתחות
   * על כל רוחב המכל, המרכוז יצר בדיוק את הרושם ההפוך: פסקה
   * שמתחילה ב-187 פיקסלים, מתחתיה רשימה שמתחילה באפס, ומתחתיה
   * שוב פסקה — הטקסט קפץ פנימה והחוצה לאורך כל הסקשן.
   *
   * יישור לאותו קו פתיחה כמו הרשימות מייצר עמוד אחד ישר. הפסקה
   * פשוט נגמרת מוקדם יותר, וזה איך שנראית עמודת טקסט קריאה.
   */
}
.legacy #te-main .content-section > p {
  line-height: var(--lh-relaxed);
}

/* ------------------------------------------------------------- קאלאאוט */

/*
 * תיבת "ידעת?".
 *
 * בצילום היא תיבה בתכלת בהיר עם פינות חדות וקו כחול בצד —
 * הדפוס של תוספי וורדפרס משנת 2015. כאן היא נקייה: משטח אחד,
 * קו מבטא בצד הפתיחה, בלי צל ובלי מסגרת מסביב.
 */
.legacy #te-main .callout {
  margin-block: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-sea-050);
  border-radius: var(--r-md, 12px);
  border-inline-start: 3px solid var(--c-sea-500);
}
.legacy #te-main .callout .callout-title {
  margin: 0 0 var(--sp-2);
  color: var(--c-sea-600);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.legacy #te-main .callout p:last-child { margin-bottom: 0; }

/* בתוך סקשן כהה התיבה הופכת לשקופה, אחרת היא כתם תכלת */
.legacy #te-main .section-dark .callout {
  background: rgba(255, 255, 255, .06);
  border-inline-start-color: var(--c-sea-400);
}
.legacy #te-main .section-dark .callout .callout-title { color: var(--c-sea-200); }

/* ------------------------------------------------------------- גלריה */

/*
 * ארבע התמונות היו בגדלים שונים לגמרי — אחת ‎201×251‎ ואחת
 * ‎1600×1067‎ — והן הוצגו כל אחת בגודלה, עם ריבוע לבן מסביב
 * לקטנה. רשת עם יחס קבוע ו-‎object-fit: cover‎ נותנת ארבע
 * תמונות באותו גודל בלי למתוח אף אחת מהן.
 */
.legacy #te-main .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-7);
}
.legacy #te-main .gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md, 12px);
  background: var(--c-navy-950);
}
.legacy #te-main .gallery-item img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0;
  max-block-size: none;
}

/* -------------------------------------------------------------- טבלאות */

/*
 * טבלת התאריכים היא הסיבה שרוב הגולשים מגיעים לעמוד הזה, והיא
 * הוצגה כטבלת ברירת המחדל של הדפדפן: בלי ריווח בתאים, בלי
 * הפרדה בין שורות, ובנייד היא דחפה את כל העמוד לרוחב.
 *
 * ‎overflow-x‎ על העוטף ולא על הטבלה: טבלה שגוללת בתוך עצמה
 * מוסתרת מהגולש בנייד, כי שום דבר לא מרמז שיש עוד עמודות.
 */
.legacy #te-main .table-scroll {
  overflow-x: auto;
  margin-block: var(--sp-6);
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--border);
  background: var(--c-surface-raised);
}
.legacy #te-main .section-dark .table-scroll {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
}

.legacy #te-main table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.legacy #te-main table th {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-navy-800);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
  text-align: start;
  white-space: nowrap;
}
.legacy #te-main table td {
  padding: var(--sp-3) var(--sp-4);
  border-block-start: 1px solid var(--border);
  vertical-align: top;
  line-height: var(--lh-normal);
}
.legacy #te-main table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--c-surface) 55%, transparent);
}
.legacy #te-main .section-dark table td {
  border-block-start-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .88);
}
.legacy #te-main .section-dark table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, .04);
}
/* עמודת התאריך היא העוגן של השורה */
.legacy #te-main table td:first-child {
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* -------------------------------------------------------------- רשימות */

.legacy #te-main .content-section ul {
  display: grid;
  gap: var(--sp-2);
  margin-block: var(--sp-5);
  padding-inline-start: 0;
  list-style: none;
}
.legacy #te-main .content-section ul > li {
  position: relative;
  padding-inline-start: var(--sp-5);
  line-height: var(--lh-relaxed);
}
/*
 * הנקודה מצוירת ולא ‎list-style‎: ברשימה עם ‎<strong>‎ בתחילת כל
 * פריט, הנקודה של הדפדפן מיושרת לשורה הראשונה של הטקסט ונראית
 * תלויה באוויר כשהפריט נשבר לשתי שורות.
 */
.legacy #te-main .content-section ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--sp-2);
  inset-block-start: .62em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--c-sea-500);
}
.legacy #te-main .section-dark .content-section ul > li::before {
  background: var(--c-sea-400);
}

/* ---------------------------------------------------------- רצועת סיום */

.cta-section {
  background: linear-gradient(135deg, var(--c-navy-900), var(--c-navy-700));
  color: var(--c-white);
  text-align: center;
}
.cta-section h2,
.cta-section h3 {
  color: var(--c-white);
  margin-block-start: 0;
}
.cta-section p {
  max-inline-size: 44rem;
  margin-inline: auto;
  color: rgba(255, 255, 255, .88);
}

@media (max-width: 560px) {
  .legacy #te-main .hero-section {
    min-block-size: clamp(280px, 40vh, 380px);
    padding-block: var(--sp-8);
  }
  .legacy #te-main .hero-buttons .btn { inline-size: 100%; }
}


/* ==========================================================================
   סקשן התאריכים — כרטיסי כניסה

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

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

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

.legacy #te-main .party-dates {
  margin-block: var(--sp-6);
}

.legacy #te-main .party-dates__lede {
  max-inline-size: 76ch;
  margin-inline: auto;
  margin-block-end: var(--sp-6);
  opacity: .85;
}

.legacy #te-main .date-year + .date-year {
  margin-block-start: var(--sp-8);
}

.legacy #te-main .date-year__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: .18em;
  color: var(--c-gold-500);
}
.legacy #te-main .date-year__title::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(to left, currentColor, transparent);
  opacity: .4;
}

.legacy #te-main .date-tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 276px), 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------ הכרטיס */

.legacy #te-main .date-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  background: linear-gradient(145deg, var(--c-navy-900), var(--c-navy-800));
  color: var(--c-white);
  box-shadow: 0 10px 24px -18px rgba(4, 24, 46, .8);
  /*
   * גובה אחיד.
   *
   * בלעדיו הגובה נקבע לפי אורך ההערה, וכרטיסים בשורות שונות
   * יצאו 86, 103, 105 ו-123. שורת כרטיסים אינה טבלה, אבל גם
   * אינה אמורה להיראות כמו ערימה לא מיושרת.
   */
  min-block-size: 104px;
  transition: transform var(--dur-mid, .2s) var(--ease, ease),
              box-shadow var(--dur-mid, .2s) var(--ease, ease);
}
.legacy #te-main .date-ticket::before { content: none; }
.legacy #te-main .date-ticket:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(4, 24, 46, .9);
}

/* הספח: פס זהב וקו ניקוב, כמו בכרטיס הטיסה בדף הבית */
.legacy #te-main .date-ticket__stub {
  display: grid;
  place-content: center;
  gap: 1px;
  padding: var(--sp-3) var(--sp-1);
  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);
  text-align: center;
}
.legacy #te-main .date-ticket__day {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.legacy #te-main .date-ticket__month {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  opacity: .85;
  white-space: nowrap;
}

/*
 * חורי הניקוב.
 *
 * שני עיגולים בצבע הרקע של הסקשן, חצי בפנים וחצי בחוץ, בדיוק
 * על קו התפר. בלעדיהם זה מלבן מחולק לשניים; איתם זה כרטיס.
 */
.legacy #te-main .date-ticket::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(3.6rem - 5px);
  inset-block: -5px;
  inline-size: 10px;
  background:
    radial-gradient(circle at 50% 0, var(--ticket-punch, var(--c-surface)) 5px, transparent 5.5px) top / 10px 10px no-repeat,
    radial-gradient(circle at 50% 100%, var(--ticket-punch, var(--c-surface)) 5px, transparent 5.5px) bottom / 10px 10px no-repeat;
  pointer-events: none;
}
/* הסקשן הכהה קובע את צבע החורים */
.legacy #te-main .section-dark .date-ticket { --ticket-punch: var(--c-navy-900); }
.legacy #te-main .section-light .date-ticket { --ticket-punch: var(--c-surface-raised); }

/* ------------------------------------------------------------- הגוף */

.legacy #te-main .date-ticket__body {
  position: relative;
  display: grid;
  gap: 2px;
  align-content: center;
  padding: var(--sp-3) var(--sp-4);
  min-inline-size: 0;
}

.legacy #te-main .date-ticket__flag {
  /* תשע נקודות היו מתחת לסף הקריאות; עשר עם ריווח אותיות נקראות */
  font-size: 10px;
  font-weight: var(--fw-black);
  letter-spacing: .12em;
  color: var(--c-gold-500);
  margin-block-end: 1px;
}
.legacy #te-main .date-ticket__date {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--c-white);
}
.legacy #te-main .date-ticket__weekday {
  font-size: var(--fs-3xs);
  color: rgba(255, 255, 255, .62);
}
.legacy #te-main .date-ticket__note {
  margin: 0;
  font-size: var(--fs-3xs);
  line-height: 1.4;
  color: rgba(255, 255, 255, .72);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * כרטיס עם תצלום.
 *
 * התצלום הוא רקע ולא אריח נפרד: הוא ממלא את גוף הכרטיס מתחת
 * לשכבת נייבי כבדה, כך שהטקסט נשאר קריא והתמונה נותנת עומק
 * במקום לתפוס שורה.
 */
.legacy #te-main .date-ticket--shot .date-ticket__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to left, rgba(4, 24, 46, .93), rgba(4, 24, 46, .74)), var(--shot);
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.legacy #te-main .date-ticket--shot .date-ticket__body { isolation: isolate; }

/* הקרוב ביותר */
.legacy #te-main .date-ticket--next {
  outline: 2px solid var(--c-gold-500);
  outline-offset: -2px;
}
.legacy #te-main .date-ticket--next .date-ticket__date { color: var(--c-gold-200); }

/* מועד שאינו ירח מלא — ערב ראש השנה */
.legacy #te-main .date-ticket--special .date-ticket__stub {
  background: linear-gradient(160deg, var(--c-sea-400), var(--c-sea-600));
  color: var(--c-white);
}

.legacy #te-main .date-ticket__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  margin-block-start: var(--sp-2);
  padding: 5px var(--sp-3);
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  border-radius: 999px;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background var(--dur-mid, .2s) var(--ease, ease);
}
.legacy #te-main .date-ticket__buy:hover {
  background: var(--c-gold-400, var(--c-gold-200));
  color: var(--c-navy-950);
}

@media (max-width: 420px) {
  .legacy #te-main .date-tickets { grid-template-columns: 1fr; }
}


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

/*
 * שני הכפתורים שנשלפו מההירו הישן. הם יושבים בתוך ‎.cover-strip__
 * text‎, שהוא שכבה מעל התצלום, ולכן המשני הוא קו לבן ולא כפתור
 * בצבע המותג — כפתור כהה על תצלום לילה נבלע בו.
 */
.legacy #te-main .cover-strip__ctas,
.cover-strip__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
}
/*
 * הכפתורים משתמשים בווריאנטים של האתר, ולכן אין כאן כלל צבע
 * משלהם. רק הפריסה.
 */

@media (max-width: 560px) {
  .cover-strip__ctas { inline-size: 100%; }
  .cover-strip__ctas .btn { flex: 1 1 auto; justify-content: center; }
}


/* ==========================================================================
   המחלקות שנשארו מהתבנית הישנה

   עמודי המסיבות נשמרו עם גיליון סגנונות שלם בתוך העמוד: כחול
   ‎#007bff‎, אפור ‎#f8f9fa‎, פינות ‎15px‎, צללים ב-‎rgba(0,0,0,.1)‎
   וכפתורים ב-‎border-radius: 50px‎. זו תבנית בוטסטראפ משנת 2015,
   והיא זו שנראתה מיושנת — לא חוסר עיצוב אלא עיצוב אחר שמתחרה
   בשלנו על אותם אלמנטים.

   הגיליון ההוא מוסר בבנייה, והכללים כאן תופסים את מקומו. המבנה
   נשאר זהה — ‎row‎, ‎col‎, ‎card‎ — ורק השפה מתחלפת.
   ========================================================================== */

/* ---------------------------------------------------- רשת של שורה ועמודות */

/*
 * ‎row‎/‎col‎ הוא בוטסטראפ, ובוטסטראפ אינו נטען כאן. במקום לשחזר
 * אותו, שלוש המחלקות ממופות לרשת אחת שמתנהגת נכון לבד: העמודה
 * קובעת רוחב מינימלי, והרשת מחליטה כמה נכנסות בשורה.
 */
.legacy #te-main .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
  margin: 0;
}
.legacy #te-main .row > .col-12,
.legacy #te-main .row > .col-md-6,
.legacy #te-main .row > .col-lg-4 {
  inline-size: auto;
  padding: 0;
  min-inline-size: 0;
}
/* עמודה מלאה נשארת מלאה */
.legacy #te-main .row > .col-12 { grid-column: 1 / -1; }

/* ------------------------------------------------------------ כרטיס כללי */

.legacy #te-main .card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  margin: 0;
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  box-shadow: none;
  overflow: hidden;
  transition: border-color var(--dur-mid, .2s) var(--ease, ease),
              transform var(--dur-mid, .2s) var(--ease, ease);
}
/*
 * ההרמה הייתה עשרה פיקסלים עם צל שמתפשט. בשאר האתר כרטיס עולה
 * שני פיקסלים והקו שלו מתחלף בצבע. אותו רמז, בלי הדרמה.
 */
.legacy #te-main .card:hover {
  transform: translateY(-2px);
  border-color: var(--c-sea-400);
  box-shadow: none;
}
.legacy #te-main .card-image {
  position: relative;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.legacy #te-main .card-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  max-block-size: none;
  transition: transform var(--dur-slow, .4s) var(--ease, ease);
}
.legacy #te-main .card:hover .card-image img { transform: scale(1.04); }

.legacy #te-main .card-content {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-4);
  flex: 1;
}
.legacy #te-main .card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--lh-snug);
}
.legacy #te-main .card-content p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-body);
  line-height: var(--lh-normal);
}

.legacy #te-main .price {
  font-weight: var(--fw-bold);
  color: var(--c-sea-600);
}
.legacy #te-main .stars { color: var(--c-gold-500); }

/* ------------------------------------------------------- כותרת סקשן */

/*
 * הקו התכלת מתחת לכותרת היה ‎100px‎ ברוחב ו-‎#007bff‎ בצבע,
 * ממורכז. הוא נשאר כסימן אבל בצבע המבטא של האתר, ובעובי של קו
 * ולא של פס.
 */
.legacy #te-main .section-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  margin-block: 0 var(--sp-7);
  text-wrap: balance;
}
.legacy #te-main .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;
}
.legacy #te-main .section-dark .section-title::after { background: var(--c-sea-400); }

/* ---------------------------------------------------------- המלצות */

.legacy #te-main .review-card {
  margin: 0;
  padding: var(--sp-5);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  box-shadow: none;
}
.legacy #te-main .section-dark .review-card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
.legacy #te-main .review-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}
.legacy #te-main .review-avatar {
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
}
.legacy #te-main .review-avatar img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  border-radius: 0; max-block-size: none;
}
.legacy #te-main .review-author { font-weight: var(--fw-semibold); color: inherit; }
.legacy #te-main .review-date { font-size: var(--fs-xs); color: var(--text-muted); }
.legacy #te-main .section-dark .review-date { color: rgba(255, 255, 255, .6); }
.legacy #te-main .review-stars { color: var(--c-gold-500); }

/* ------------------------------------------------------ רצועה נגללת */

/*
 * כפתורי החיצים הופעלו בסקריפט שהוסר בייבוא, ולכן הם אינם
 * מגיבים. הרצועה עצמה נגללת במגע ובגלגלת, ולכן החיצים מוסתרים
 * ולא משוחזרים: פקד שאינו עושה דבר גרוע מהיעדרו.
 */
.legacy #te-main .scroll-nav,
.legacy #te-main .scroll-prev,
.legacy #te-main .scroll-next { display: none; }

.legacy #te-main .scroll-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.legacy #te-main .scroll-item {
  scroll-snap-align: start;
  margin: 0;
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  box-shadow: none;
  overflow: hidden;
}
.legacy #te-main .scroll-item-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.legacy #te-main .scroll-item-image img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  border-radius: 0; max-block-size: none;
}
.legacy #te-main .scroll-item-content {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
}

/* ------------------------------------------------ מפה וקישורים נוספים */

.legacy #te-main .map-container {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
}
.legacy #te-main .map-container iframe {
  display: block;
  inline-size: 100%;
  border: 0;
}

.related-links {
  padding: var(--sp-5);
  background: var(--c-sea-050);
  border: 0;
  border-radius: var(--r-md, 12px);
}
.section-dark .related-links {
  background: rgba(255, 255, 255, .06);
}
.related-links-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.related-link-item {
  padding-block: var(--sp-2);
  border-block-start: 1px solid var(--border);
}
.related-link-item:first-of-type { border-block-start: 0; }
.section-dark .related-link-item {
  border-block-start-color: rgba(255, 255, 255, .12);
}

/* ---------------------------------------------- שאלות ותשובות ישנות */

/*
 * ‎.faq-answer‎ הוסתר ב-‎display: none‎ ונפתח בסקריפט. הסקריפט
 * איננו, ולכן כל התשובות היו בלתי נגישות לגמרי — גם לגולש וגם
 * לגוגל. כאן הן פשוט גלויות.
 */
.legacy #te-main .faq-answer { display: block; }
.legacy #te-main .faq-question { cursor: auto; }
.legacy #te-main .faq-question::after { content: none; }
.legacy #te-main .faq-item {
  padding-block-end: var(--sp-4);
  margin-block-end: var(--sp-4);
  border-block-end: 1px solid var(--border);
}
.legacy #te-main .section-dark .faq-item { border-block-end-color: rgba(255, 255, 255, .12); }

.legacy #te-main .table-container { overflow-x: auto; }


/* ==========================================================================
   כפתור וואטסאפ בכרטיס מלון, ותמונת לוח התאריכים
   ========================================================================== */

/*
 * הכפתור יושב בתחתית הכרטיס ותופס את כל רוחבו: זו הפעולה
 * היחידה בכרטיס, ואין מה להתחרות בה על תשומת לב.
 *
 * ירוק וואטסאפ ולא צבע המותג — זה הצבע שהמשתמש מזהה כ"זה ייפתח
 * בוואטסאפ", והוא הרמז היחיד שאומר לאן הלחיצה מובילה.
 */
.legacy #te-main .hotel-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: #25d366;
  color: #062e16;
  border-radius: 999px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--dur-mid, .2s) var(--ease, ease);
}
.legacy #te-main .hotel-wa:hover {
  background: #1eb955;
  color: #062e16;
}
.legacy #te-main .hotel-wa i { font-size: 1.15em; }

/* הכרטיס נמתח כך שהכפתור יישב בתחתית גם כשהתיאורים באורך שונה */
.legacy #te-main .accommodation-card {
  display: flex;
  flex-direction: column;
}
.legacy #te-main .accommodation-card .hotel-wa { margin-block-start: auto; }

/* כותרת הכרטיס כקישור — אותו צבע, בלי קו תחתון עד ריחוף */
.legacy #te-main .card-link {
  color: inherit;
  text-decoration: none;
}
.legacy #te-main .card-link:hover { text-decoration: underline; }

/*
 * תמונת לוח התאריכים.
 *
 * זהו לוח השנה הרשמי של הפסטיבל, ובו כל החודשים בטורים משני
 * צדי התמונה. ‎object-fit: cover‎ חתך בדיוק את הטורים האלה —
 * מה שנשאר במסך היה הכותרת "2026" והטורים נעלמו. תמונה שכל
 * תוכנה הוא המידע שבה חייבת להיראות במלואה.
 */
.legacy #te-main .calendar-images img,
.legacy #te-main .card-cover img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: auto;
  object-fit: contain;
  max-block-size: none;
  border-radius: var(--r-md, 12px);
}
.legacy #te-main .calendar-images {
  margin-block: var(--sp-6);
}

/* ==========================================================================
   צמצום הסקשנים בעמודי המסיבות

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

/*
 * ריווח כפול ברשימות.
 *
 * הרשימה היא ‎grid‎ עם ‎gap: 8px‎, ובמקביל כל ‎<li>‎ נושא
 * ‎margin-bottom: 8px‎ שהגיע מהתבנית הישנה. השניים מצטברים:
 * פריט בגובה 25 פיקסלים תפס 41. על פני תשעה פריטים אלה 144
 * פיקסלים של אוויר שאיש לא ביקש.
 */
.legacy #te-main .content-section ul > li,
.legacy #te-main .content-section ol > li {
  margin-block-end: 0;
}

/*
 * רשימה ארוכה בשתי עמודות.
 *
 * תשעה טיפים בני שורה אחת, זה מתחת לזה, יוצרים עמודה של תשע
 * שורות בתוך רוחב שיכול להכיל שתיים. שתי עמודות חוסכות כמחצית
 * מהגובה בלי לגעת במילה אחת מהתוכן.
 *
 * ‎auto-fill‎ ולא מספר קבוע: בטלפון נשארת עמודה אחת מעצמה.
 */
/*
 * הפריסה נקבעת לפי סוג הרשימה ולא באופן גורף.
 * הסיווג נעשה בזמן בנייה — ראה ‎list-layout.js‎.
 */
.legacy #te-main .content-section > ul,
.legacy #te-main .content-section > ol {
  row-gap: var(--sp-2);
  margin-block: var(--sp-4);
}

/*
 * הריווח האנכי של הסקשן.
 *
 * ‎sp-11‎ הוא 5rem, כלומר 160 פיקסלים בין סקשן לסקשן. זה נכון
 * לעמוד שיווקי עם סקשן אחד גדול, ולא לעמוד מדריך עם שנים-עשר
 * סקשנים שהגולש גולל ביניהם.
 */
.legacy #te-main .section-light,
.legacy #te-main .section-dark,
.cta-section {
  padding-block: clamp(var(--sp-7), 3vw, var(--sp-9));
}

/* הכותרת קרובה יותר למה שהיא מכותרת */
.legacy #te-main .section-title {
  font-size: var(--fs-2xl);
  margin-block-end: var(--sp-5);
}
.legacy #te-main .section-title::after {
  margin-block-start: var(--sp-3);
}

.legacy #te-main .content-section > h3 {
  margin-block: var(--sp-6) var(--sp-2);
  font-size: var(--fs-lg);
}
.legacy #te-main .content-section > h4 {
  margin-block: var(--sp-4) var(--sp-2);
  font-size: var(--fs-md);
}
/* אחרי כותרת אין צורך בריווח נוסף מעל הפסקה */
.legacy #te-main .content-section > :is(h3, h4) + p { margin-block-start: 0; }
.legacy #te-main .content-section > p {
  margin-block: 0 var(--sp-3);
}
.legacy #te-main .callout {
  margin-block: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
}

/* ==========================================================================
   כרטיס בתוך סקשן כהה

   ‎.section-dark‎ צובע כל ‎h2/h3/h4/strong‎ שתחתיו בלבן, כדי
   שהטקסט ייקרא על הנייבי. אבל ‎.scroll-item‎ ו-‎.card‎ מביאים
   משטח לבן משלהם — והכותרת שלהם יצאה לבן על לבן. ברצועת
   "מלונות מומלצים לתקופת הפול מון" ארבעת שמות המלונות פשוט לא
   היו שם, ובמקומם שטח לבן ריק.

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

.legacy #te-main .section-dark .scroll-item,
.legacy #te-main .section-dark .card,
.legacy #te-main .section-dark .tip-card,
.legacy #te-main .section-dark .stage-card,
.legacy #te-main .section-dark .accommodation-card,
.legacy #te-main .section-dark .testimonial-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .88);
  box-shadow: none;
}
.legacy #te-main .section-dark .scroll-item h3,
.legacy #te-main .section-dark .scroll-item h4,
.legacy #te-main .section-dark .card .card-title,
.legacy #te-main .section-dark .card h3,
.legacy #te-main .section-dark .tip-card h3,
.legacy #te-main .section-dark .stage-card h3,
.legacy #te-main .section-dark .accommodation-card h3 {
  color: var(--c-white);
}
.legacy #te-main .section-dark .scroll-item p,
.legacy #te-main .section-dark .card p,
.legacy #te-main .section-dark .tip-card p,
.legacy #te-main .section-dark .stage-card p {
  color: rgba(255, 255, 255, .75);
}

/*
 * הרצועה הנגללת.
 *
 * בלי ריווח בקצוות הכרטיס הראשון נצמד לדופן ונראה חתוך, כאילו
 * חסר לו חלק. ‎scroll-padding‎ גורם לו לעצור עם אוויר סביבו.
 */
.legacy #te-main .scroll-container {
  scroll-padding-inline: var(--sp-1);
  padding-inline: 1px;
}

/*
 * שורות ריקות בתוך הכרטיס.
 *
 * ‎.scroll-item-content‎ הוא ‎grid‎ עם ‎gap‎, ובתוכו יושבים
 * אלמנטים ריקים שנשארו מהתבנית — הם תפסו שורה שלמה כל אחד
 * ויצרו את השטחים הלבנים בין הכוכבים למחיר.
 */
.legacy #te-main .scroll-item-content > :empty,
.legacy #te-main .card-content > :empty {
  display: none;
}

/* ==========================================================================
   ריווח כפול בתוך כרטיס

   כל מיכלי התוכן של הכרטיסים הם ‎grid‎ עם ‎gap‎, ובתוכם יושבים
   אלמנטים שנושאים ‎margin‎ משלהם מהתבנית הישנה. השניים מצטברים.

   ב-‎.scroll-item‎ הפער היה מדיד: התוכן עצמו 164 פיקסלים,
   והמיכל 292. מאה ועשרים ושמונה פיקסלים בכל כרטיס, בארבעה
   כרטיסים, בכל רצועה בעמוד.

   ה-‎gap‎ הוא שקובע, והוא היחיד. זה גם הכלל הנכון: המיכל מחליט
   על הקצב, לא הילדים.
   ========================================================================== */

.legacy #te-main .scroll-item-content > *,
.legacy #te-main .card-content > *,
.legacy #te-main .mini-card__body > *,
.legacy #te-main .tip-card > *,
.legacy #te-main .stage-card > *,
.legacy #te-main .accommodation-card > * {
  margin-block: 0;
}

/* הכרטיס מתהדק: פחות ריפוד, ריווח קטן יותר בין השורות */
.legacy #te-main .scroll-item-content,
.legacy #te-main .card-content {
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.legacy #te-main .scroll-item-content h3,
.legacy #te-main .card-content .card-title {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.legacy #te-main .scroll-item-content p,
.legacy #te-main .card-content p {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
/* הכפתור נדחף לתחתית כדי שכל הכרטיסים ייגמרו באותו קו */
.legacy #te-main .scroll-item-content .btn,
.legacy #te-main .card-content .btn {
  margin-block-start: var(--sp-1);
  justify-self: stretch;
  text-align: center;
}

/* ==========================================================================
   קבוצות קצרות כרשת כרטיסים
   ראה ‎group-cards.js‎ להסבר על מה הומר ולמה.
   ========================================================================== */

.legacy #te-main .mini-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 244px), 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-5);
  /* הרשת חורגת מעמודת הטקסט הצרה ותופסת את רוחב המכל */
  max-inline-size: none;
}

.legacy #te-main .mini-card {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-4);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
}
.legacy #te-main .section-dark .mini-card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}

.legacy #te-main .mini-card__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.legacy #te-main .section-dark .mini-card__title { color: var(--c-white); }

/* בתוך כרטיס הרשימה חוזרת לעמודה אחת — הכרטיס כבר צר */
.legacy #te-main .mini-card__body ul,
.legacy #te-main .mini-card__body ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}
.legacy #te-main .mini-card__body li {
  position: relative;
  padding-inline-start: var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.legacy #te-main .mini-card__body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: .62em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--c-sea-500);
}
.legacy #te-main .section-dark .mini-card__body li::before { background: var(--c-sea-400); }
.legacy #te-main .mini-card__body p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ==========================================================================
   רצועה נגללת → רשת רגילה

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

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

.legacy #te-main .scroll-container {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  grid-auto-columns: auto;
  gap: var(--sp-3);
  overflow: visible;
  padding-inline: 0;
  scroll-snap-type: none;
}
.legacy #te-main .scroll-section { position: static; }

/* ==========================================================================
   פריסת רשימות לפי סוג

   הסיווג נעשה בזמן בנייה ב-‎list-layout.js‎, לפי מה שבאמת יש
   בפריטים. כאן רק הפריסה.
   ========================================================================== */

/*
 * ‎list--compact‎ — פריטים קצרים בלי קישור.
 *
 * תשעה טיפים בני שורה אחת, זה מתחת לזה, תופסים תשע שורות בתוך
 * רוחב שיכול להכיל שלוש. הם נקראים באותה מהירות בשלוש עמודות
 * ותופסים שליש מהגובה.
 */
/*
 * עמודות מאוזנות, לא רשת.
 *
 * ברשת יש מושג של "שורה אחרונה", ולכן כל מספר פריטים שאינו
 * מתחלק במספר העמודות משאיר יתום: תשעה פריטים בארבע עמודות
 * משאירים אחד, וארבעה בשלוש משאירים אחד. אין רוחב מינימלי
 * שפותר את זה לכל מספר.
 *
 * ‎columns‎ מחלק את הפריטים בין העמודות ומאזן את גובהן מעצמו.
 * אין שורה אחרונה ואין יתום, בכל מספר פריטים.
 *
 * ‎break-inside: avoid‎ מונע מפריט להישבר באמצע בין שתי עמודות.
 */
.legacy #te-main ul.list--compact,
.legacy #te-main ol.list--compact {
  display: block;
  columns: 3 248px;
  column-gap: var(--sp-6);
  max-inline-size: none;
}
.legacy #te-main .list--compact > li {
  break-inside: avoid;
  margin-block-end: var(--sp-2);
}

/*
 * ‎list--cards‎ — לכל פריט תווית או קישור.
 *
 * זה הסוג שהרס את העמוד קודם. "המלצות לינה לפי תקציב ואזור"
 * היא רשימה שבכל פריט שלה שם מלון, קישור, תווית תקציב ותיאור —
 * ובשתי עמודות צרות היא הפכה לקיר טקסט רצוף בלי היררכיה.
 *
 * ככרטיס כל פריט מקבל גבול משלו, והתווית המודגשת שבראשו הופכת
 * לכותרת שלו. אותו תוכן בדיוק, עם מבנה.
 */
.legacy #te-main ul.list--cards,
.legacy #te-main ol.list--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: var(--sp-3);
  max-inline-size: none;
  margin-block: var(--sp-5);
}
.legacy #te-main ul.list--cards > li,
.legacy #te-main ol.list--cards > li {
  padding: var(--sp-4);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  padding-inline-start: var(--sp-4);
}
/* הנקודה מיותרת בכרטיס — הגבול כבר מפריד */
.legacy #te-main ul.list--cards > li::before,
.legacy #te-main ol.list--cards > li::before { content: none; }

/* התווית המודגשת היא כותרת הכרטיס */
.legacy #te-main .list--cards > li > strong:first-child,
.legacy #te-main .list--cards > li > b:first-child {
  display: block;
  margin-block-end: var(--sp-1);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.legacy #te-main .list--cards > li a {
  font-weight: var(--fw-semibold);
}

.legacy #te-main .section-dark ul.list--cards > li,
.legacy #te-main .section-dark ol.list--cards > li {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
.legacy #te-main .section-dark .list--cards > li > strong:first-child,
.legacy #te-main .section-dark .list--cards > li > b:first-child {
  color: var(--c-white);
}

/* הערת התאריך בשורה אחת, כדי שהכרטיסים יישארו באותו גובה */
.legacy #te-main .party-dates .date-card__note {
  -webkit-line-clamp: 1;
}

/* ==========================================================================
   כרטיס המלצה

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

.legacy #te-main .testimonial-grid,
.legacy #te-main .reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-5);
}

.legacy #te-main .review-card {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-5);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  box-shadow: none;
  margin: 0;
}

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

/*
 * אווטר עם האות הראשונה.
 *
 * הוא מחליף את התו התקוע ואת המלבן הריק. אות אינה מתחזה לתצלום
 * של אדם, ולכן אין בה שום טענה שצריך לאמת.
 */
.legacy #te-main .review-avatar {
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
}
.legacy #te-main .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;
}
.legacy #te-main .section-dark .review-avatar--letter {
  background: rgba(255, 255, 255, .1);
  color: var(--c-sea-200);
}

.legacy #te-main .review-author {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--text-strong);
  line-height: 1.3;
}
.legacy #te-main .review-date {
  font-size: var(--fs-3xs);
  color: var(--text-muted);
}
.legacy #te-main .review-stars {
  color: var(--c-gold-500);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  margin: 0;
}

/*
 * גוף ההמלצה.
 *
 * הוא היה נטוי במלואו. כתב נטוי בעברית נקרא לאט יותר, ופסקה
 * שלמה בו נראית כמו הערת שוליים ולא כמו ציטוט. המרכאות כבר
 * מסמנות שזה ציטוט.
 */
.legacy #te-main .review-card p {
  margin: 0;
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.legacy #te-main .section-dark .review-card p { color: rgba(255, 255, 255, .8); }
.legacy #te-main .section-dark .review-author { color: var(--c-white); }
.legacy #te-main .section-dark .review-date { color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   "מדריכים נוספים" — כרטיסים ריבועיים

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

   ככרטיסים ריבועיים הוא קורא כמו שאר האתר, ולכל קישור יש שטח
   לחיצה אמיתי.
   ========================================================================== */

.related-links {
  padding: 0;
  background: none;
  border: 0;
}
.related-links-title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  text-align: center;
}

/* ה-‎row/col‎ של בוטסטראפ מוחלף ברשת אחת */
.related-links .row {
  display: contents;
}
.related-links .col-md-6,
.related-links .col-lg-4,
.related-links .col-12 {
  display: contents;
}
.related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr));
  gap: var(--sp-3);
}
.related-links-title {
  grid-column: 1 / -1;
}

/*
 * הכרטיס הריבועי.
 *
 * ‎aspect-ratio: 1‎ עם הטקסט בתחתית — צורה שמזוהה מיד כרכיב
 * ניווט, ולא עוד שורה ברשימה.
 */
.related-link-item {
  display: grid;
  align-content: end;
  aspect-ratio: 1;
  margin: 0;
  padding: var(--sp-4);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-block-start: 0;
  border-radius: var(--r-md, 12px);
  transition: border-color var(--dur-mid, .2s) var(--ease, ease),
              transform var(--dur-mid, .2s) var(--ease, ease);
}
.related-link-item:hover {
  border-color: var(--c-sea-400);
  transform: translateY(-2px);
}
.related-link-item::before {
  /* חץ קטן בפינה העליונה, כרמז שזה קישור */
  content: "↗";
  align-self: start;
  justify-self: start;
  font-size: var(--fs-lg);
  color: var(--c-sea-500);
  opacity: .7;
}
.related-link-item a {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;
  color: var(--text-strong);
}
.related-link-item a:hover { text-decoration: underline; }

.section-dark .related-link-item,
.section-dark .related-links {
  background: none;
}
.section-dark .related-link-item {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
.section-dark .related-link-item a { color: var(--c-white); }
.section-dark .related-link-item::before { color: var(--c-sea-200); }

/* ==========================================================================
   תיבות הדגשה

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

   האימוג׳י נשלף לאלמנט משלו ב-‎callouts.js‎ ומוצג כאן כתג עגול,
   והצבע נגזר מסוג התיבה.
   ========================================================================== */

.legacy #te-main .callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  align-items: start;
  margin-block: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-sea-050);
  border: 0;
  border-inline-start: 3px solid var(--c-sea-500);
  border-radius: var(--r-md, 12px);
  max-inline-size: none;
}

.legacy #te-main .callout-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: var(--c-white);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 8px -4px rgba(4, 24, 46, .5);
}

.legacy #te-main .callout .callout-title,
.legacy #te-main .callout > h3,
.legacy #te-main .callout > h4 {
  margin: 0;
  align-self: center;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-sea-600);
  line-height: 1.3;
}
.legacy #te-main .callout p {
  margin: 0;
  grid-column: 2;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  max-inline-size: 74ch;
}
.legacy #te-main .callout p + p { margin-block-start: var(--sp-2); }

/* טיפ — זהב, כמו שאר הרמזים המועילים באתר */
.legacy #te-main .callout--tip {
  background: var(--c-gold-050);
  border-inline-start-color: var(--c-gold-500);
}
.legacy #te-main .callout--tip .callout-title { color: var(--c-gold-700); }

/* אזהרה — אדום, ורק כשבאמת מדובר באזהרה */
.legacy #te-main .callout--warn {
  background: color-mix(in srgb, var(--c-danger) 7%, var(--c-surface-raised));
  border-inline-start-color: var(--c-danger);
}
.legacy #te-main .callout--warn .callout-title { color: var(--c-danger); }

/* על רקע כהה כל השלוש הופכות לשקופות */
.legacy #te-main .section-dark .callout {
  background: rgba(255, 255, 255, .06);
}
.legacy #te-main .section-dark .callout p { color: rgba(255, 255, 255, .8); }
.legacy #te-main .section-dark .callout-icon { background: rgba(255, 255, 255, .12); }
.legacy #te-main .section-dark .callout .callout-title { color: var(--c-sea-200); }
.legacy #te-main .section-dark .callout--tip .callout-title { color: var(--c-gold-200); }
.legacy #te-main .section-dark .callout--warn .callout-title { color: #ff9a92; }

/* ---- הכרטיסים הריבועיים מתכווצים ---- */

/*
 * ‎306×306‎ לשמונה כרטיסים הם שלוש שורות ותשע מאות פיקסלים —
 * יותר משטח מאשר לסקשן תוכן שלם. כרטיס ניווט צריך להיות מזוהה,
 * לא דומיננטי.
 */
.related-links {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr));
  gap: var(--sp-2);
}
.related-link-item {
  aspect-ratio: 4 / 3;
  padding: var(--sp-3);
}
.related-link-item a { font-size: var(--fs-sm); }
.related-link-item::before { font-size: var(--fs-md); }

/* ==========================================================================
   רשימת ציוד עם אייקונים

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

/*
 * שלוש עמודות ולא ארבע.
 *
 * תשעה פריטים בארבע עמודות משאירים כרטיס בודד בשורה שלישית
 * ושלושה מקומות ריקים לצידו. בשלוש עמודות זה נחלק בדיוק לשלוש
 * שורות מלאות.
 */
.legacy #te-main ul.list--items,
.legacy #te-main ol.list--items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-2);
  max-inline-size: none;
  margin-block: var(--sp-4);
}

.legacy #te-main .list--items > li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  padding-inline-start: var(--sp-3);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.legacy #te-main .list--items > li::before { content: none; }

.legacy #te-main .item-icon {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-size: 14px;
}

.legacy #te-main .list--items > li > strong:first-of-type,
.legacy #te-main .list--items > li > b:first-of-type {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

.legacy #te-main .section-dark .list--items > li {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
.legacy #te-main .section-dark .item-icon {
  background: rgba(255, 255, 255, .1);
  color: var(--c-sea-200);
}
.legacy #te-main .section-dark .list--items > li > strong:first-of-type { color: var(--c-white); }

/* ---- כרטיסי האטרקציות מתכווצים ---- */

/*
 * ‎303×374‎ לשישה כרטיסי ניווט זה שני מסכים. הכרטיס צריך להיות
 * מזוהה ולחיץ, לא דומיננטי.
 */
/*
 * הכלל הזה נכתב לכרטיסי האטרקציות, והוא תפס גם את ה-‎.row‎
 * שבתוך "מדריכים נוספים". שם ‎.row‎ ו-‎.col‎ מוגדרים
 * ‎display: contents‎ כדי שהכרטיסים ייפלו ישירות לרשת של
 * ההורה; הפיכתם לרשת בעצמם ניתקה את השרשרת, והכרטיסים נערמו
 * בעמודה אחת בצד אחד של המסך.
 */
.legacy #te-main .row {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr));
  gap: var(--sp-3);
}
/*
 * ‎.legacy #te-main‎ בתחילת הסלקטור אינו קישוט: בלעדיו הכלל
 * מפסיד בספציפיות ל-‎.legacy #te-main .row‎ שמעליו, והשורה
 * נשארת רשת בתוך רשת. הכרטיסים נערמו אז בעמודה אחת בגובה
 * 1,176 פיקסלים.
 */
.legacy #te-main .related-links .row,
.legacy #te-main .related-links [class*="col-"],
.related-links .row,
.related-links [class*="col-"] {
  display: contents;
}
.legacy #te-main .card-image { aspect-ratio: 16 / 11; }
.legacy #te-main .card-content { padding: var(--sp-3); gap: var(--sp-1); }
.legacy #te-main .card-content .card-title { font-size: var(--fs-md); }
.legacy #te-main .card-content p {
  font-size: var(--fs-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.legacy #te-main .card-content .btn {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
}

/* ==========================================================================
   פריט רשימה בתוך כרטיס

   ה-‎<li>‎ בתוך ‎.mini-card‎ ירש ‎display: flex‎, ולכן ה-‎<strong>‎
   שבתחילתו היה פריט גמיש שהתכווץ ל-41 פיקסלים — "טיסה +
   מעבורת" נשבר לשלוש שורות אנכיות בעוד ההמשך שלו זרם לצידו.

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

.legacy #te-main .mini-card__body li,
.legacy #te-main .list--cards > li {
  display: block;
}
.legacy #te-main .mini-card__body li > strong,
.legacy #te-main .mini-card__body li > b {
  display: inline;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.legacy #te-main .section-dark .mini-card__body li > strong,
.legacy #te-main .section-dark .mini-card__body li > b { color: var(--c-white); }

/* בכרטיס הרשימה התווית נשארת כותרת, אבל הטקסט זורם תחתיה */
.legacy #te-main .list--cards > li > strong:first-child,
.legacy #te-main .list--cards > li > b:first-child {
  display: block;
}

/* ==========================================================================
   שורה אחרונה עם כרטיס בודד

   הביקורת על 252 העמודים מצאה 229 מופעים ב-153 עמודים, ורובם
   המוחלט אותו דפוס אחד: חמישה כרטיסים בארבע עמודות (176
   מופעים) או ארבעה בשלוש (30 מופעים). בשני המקרים נשאר כרטיס
   אחד לבד בשורה האחרונה עם שלושה מקומות ריקים לצידו.

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

   ‎:has()‎ מאפשר לבחור מספר עמודות לפי מספר הכרטיסים בפועל, בלי
   לגעת ב-HTML: חמישה מתחלקים ל-3+2, ארבעה לשורה אחת.

   הכללים חלים רק מעל 760 פיקסלים. בטלפון ממילא עמודה אחת.
   ========================================================================== */

/*
 * ‎.tour-grid‎ אינו נמנה כאן יותר.
 *
 * הכללים האלה קובעים מספר טורים כדי למנוע שורה יתומה, ובכך
 * הם גם קובעים את רוחב הכרטיס — ארבעה טורים במיכל צר נותנים
 * 251 פיקסלים, שלושה במיכל רחב נותנים 288. באותו מסך הופיעו
 * שלוש רשתות של אותו רכיב בשני רוחבים.
 *
 * ‎.tour-grid‎ עבר לרוחב קבוע עם ‎justify-content: center‎:
 * הכרטיס תמיד באותו גודל, ושורה חלקית ממורכזת ונקראת
 * כבחירה. שאר המשפחות נשארות כאן.
 */
@media (min-width: 760px) {
  /* חמישה כרטיסים — שלוש עמודות, 3+2 */
  .attractions-grid:has(> :nth-child(5):last-child),
  .activities-grid:has(> :nth-child(5):last-child),
  .restaurants-grid:has(> :nth-child(5):last-child),
  .shopping-grid:has(> :nth-child(5):last-child),
  .nightlife-grid:has(> :nth-child(5):last-child),
  .beaches-grid:has(> :nth-child(5):last-child),
  .hotels-grid:has(> :nth-child(5):last-child),
  .rooms-grid:has(> :nth-child(5):last-child),
  ul.list--cards:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(3, minmax(0, var(--card-w, 288px)));
  }

  /* תשעה כרטיסים — שלוש עמודות, שלוש שורות מלאות */
  .attractions-grid:has(> :nth-child(9):last-child),
  .activities-grid:has(> :nth-child(9):last-child),
  ul.list--cards:has(> :nth-child(9):last-child) {
    grid-template-columns: repeat(3, minmax(0, var(--card-w, 288px)));
  }
}

@media (min-width: 980px) {
  /*
   * ארבעה כרטיסים — שורה אחת.
   * מעל 980 פיקסלים ארבע עמודות נותנות כרטיס של כ-240 פיקסלים,
   * שזה רוחב סביר. מתחת לזה עדיף 2+2.
   */
  .features-grid:has(> :nth-child(4):last-child),
  .highlights-grid:has(> :nth-child(4):last-child),
  .tickets-grid:has(> :nth-child(4):last-child),
  .benefits-grid:has(> :nth-child(4):last-child),
  ul.list--cards:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, var(--card-w, 288px)));
  }

  /*
   * שישה — שלוש עמודות, 3+3.
   *
   * שישה היה חסר מהמשפחה, ורשת "אטרקציות נוספות בפוקט" יצאה
   * 4+2: שורה שנייה שחצייה ריק, בדיוק הדפוס שהבלוק הזה קיים
   * כדי למנוע.
   *
   * הסלקטור נושא את ‎.legacy #te-main‎ כי שם מוגדרת הרשת
   * עצמה — בלעדיו הוא מפסיד בסגוליות והכלל לא נכנס לתוקף.
   */
  .attractions-grid:has(> :nth-child(6):last-child),
  .activities-grid:has(> :nth-child(6):last-child),
  .hotels-grid:has(> :nth-child(6):last-child),
  ul.list--cards:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, var(--card-w, 288px)));
  }

  /* שמונה — ארבע עמודות, 4+4 */
  .attractions-grid:has(> :nth-child(8):last-child),
  .hotels-grid:has(> :nth-child(8):last-child) {
    grid-template-columns: repeat(4, minmax(0, var(--card-w, 288px)));
  }

  /* שבעה — ארבע עמודות, 4+3 */
  .tour-grid:has(> :nth-child(7):last-child),
  .attractions-grid:has(> :nth-child(7):last-child) {
    grid-template-columns: repeat(4, minmax(0, var(--card-w, 288px)));
  }
}

@media (min-width: 760px) and (max-width: 979px) {
  .features-grid:has(> :nth-child(4):last-child),
  .highlights-grid:has(> :nth-child(4):last-child),
  .tickets-grid:has(> :nth-child(4):last-child),
  .benefits-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, var(--card-w, 288px)));
  }
}

/*
 * תווית הקטגוריה בעמוד מלון.
 * ‎0.68rem‎ יוצא 10.88 פיקסלים — מתחת לסף שהצבנו לעצמנו.
 */
.legacy #te-main .hotel-page__category { font-size: var(--fs-3xs); }

/* ==========================================================================
   ‎list--cards--tight‎ — כרטיס צפוף

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

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

.legacy #te-main ul.list--cards--tight,
.legacy #te-main ol.list--cards--tight {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}
.legacy #te-main .list--cards--tight > li {
  padding: var(--sp-3);
  border-radius: var(--r-sm, 6px);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}
.legacy #te-main .list--cards--tight > li > strong:first-child,
.legacy #te-main .list--cards--tight > li > b:first-child {
  font-size: var(--fs-sm);
  margin-block-end: 2px;
}

/* ==========================================================================
   שדרוג עמודי המסיבות — כרטיסים במקום רשימות שטוחות
   ראה ‎list-layout.js‎ לסיווג ו-‎testimonials.js‎ למונוגרמה.
   ========================================================================== */

/*
 * ‎list--cards--tight‎ — תווית קצרה והסבר קצר.
 *
 * תשעת טיפי הבטיחות בעמוד הפול מון הם בדיוק המקרה הזה. בווריאנט
 * הרגיל הם יצאו תשע תיבות גדולות שדוחפות את הסקשן למסך וחצי;
 * כאן העמודה צרה יותר, הריפוד קטן יותר והתווית יושבת באותה
 * שורה עם ההסבר כשיש מקום.
 */
.legacy #te-main ul.list--cards--tight,
.legacy #te-main ol.list--cards--tight {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}
.legacy #te-main ul.list--cards--tight > li,
.legacy #te-main ol.list--cards--tight > li {
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  /* פס מבטא בקצה הפתיחה — הוא מה שהופך שורה לכרטיס במבט ראשון */
  border-inline-start: 3px solid var(--c-sea-400);
}
.legacy #te-main .list--cards--tight > li > strong:first-child,
.legacy #te-main .list--cards--tight > li > b:first-child {
  font-size: var(--fs-sm);
  margin-block-end: 2px;
}
.legacy #te-main .section-dark ul.list--cards--tight > li,
.legacy #te-main .section-dark ol.list--cards--tight > li {
  border-inline-start-color: var(--c-gold-500);
}

/*
 * ‎mini-card‎ — כרטיסים באותו גובה.
 *
 * "הגעה לקופנגן" הוא שלושה כרטיסים שבראשון שלוש שורות ובשלישי
 * אחת. ‎align-content: start‎ השאיר לכל אחד את הגובה שלו, והשורה
 * יצאה מדורגת — מה שנקרא כתקלה ולא כתוכן קצר. ‎stretch‎ משווה
 * את הגובה, וה-‎body‎ תופס את מה שנשאר.
 */
.legacy #te-main .mini-cards { align-items: stretch; }
.legacy #te-main .mini-card {
  align-content: stretch;
  grid-template-rows: auto 1fr;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.legacy #te-main .mini-card:hover {
  border-color: var(--c-sea-400);
  box-shadow: var(--shadow-md);
}
/*
 * הכותרת ממוספרת בעצמה ("1. מבנגקוק"), ולכן המספר נשלף לעיגול
 * ומפסיק להיות חלק מהמשפט. הקוד נשאר טקסט — ‎::first-line‎ אינו
 * יכול לעשות זאת — ולכן הטיפול הוא בטיפוגרפיה בלבד.
 */
.legacy #te-main .mini-card__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid var(--border);
}
.legacy #te-main .section-dark .mini-card__title {
  border-block-end-color: rgba(255, 255, 255, .14);
}

/*
 * מונוגרמה בכרטיס המלצה בלי תצלום.
 * אותו ריבוע, אותו גובה, ובמפורש לא תמונה. ראה ‎testimonials.js‎.
 */
.testimonial-image--monogram {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-3xl);
  letter-spacing: var(--ls-tight);
  user-select: none;
}
.testimonial-image--monogram[data-tone="0"] { background: var(--c-sea-050);  color: var(--c-sea-600); }
.testimonial-image--monogram[data-tone="1"] { background: var(--c-gold-050); color: var(--c-gold-700); }
.testimonial-image--monogram[data-tone="2"] { background: #eef2f7;           color: var(--c-navy-700); }

/* ==========================================================================
   שמות הכפתורים של בוטסטראפ

   ‎.btn-primary‎, ‎.btn-secondary‎ ו-‎.btn-outline‎ הם שמות של
   בוטסטראפ, ובוטסטראפ אינו נטען כאן. מערכת העיצוב שלנו משתמשת
   בקו כפול — ‎.btn--primary‎ — ולכן לשמות האלה אין שום כלל.

   הביקורת על 252 העמודים תפסה את התוצאה: בדף הבית שנים-עשר
   כפתורי "גלה עוד" יצאו ‎color: #fff‎ על כרטיס לבן, בלי רקע
   ובלי מסגרת. טקסט לבן על לבן — הכפתור היה שם ואי אפשר היה
   לראות אותו.

   203 מופעים ב-37 עמודים. הכללים כאן ממפים את השמות הישנים
   לווריאנטים של האתר במקום לשכפל אותם.
   ========================================================================== */

.btn-primary {
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  border: 0;
}
.btn-primary:hover {
  background: var(--c-gold-600);
  color: var(--c-navy-950);
}

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

/*
 * ‎.btn-outline‎ יושב כמעט תמיד על תצלום כהה, ולכן הוא לבן.
 * במקום שבו הוא על רקע בהיר, הכלל שאחריו מחזיר אותו לנייבי.
 */
.btn-outline {
  background: transparent;
  color: var(--c-white);
  border: 1.5px solid rgba(255, 255, 255, .7);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--c-white);
}
.section-light .btn-outline,
.legacy #te-main .section-light .btn-outline {
  color: var(--c-navy-900);
  border-color: var(--c-navy-800);
}
.section-light .btn-outline:hover,
.legacy #te-main .section-light .btn-outline:hover {
  background: var(--c-navy-900);
  color: var(--c-white);
}

.btn-sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
}

/*
 * ביטול פס הזברה בתוך ‎mini-card‎.
 *
 * ---------------------------------------------------------------------------
 * זה מה שגרם ל"הגעה לקופנגן" להיראות שבור לגמרי.
 *
 * הכלל ‎.legacy :is([class$="-card"],…) ul > li:nth-child(odd)‎
 * נכתב לכרטיסי חבילה, שם הפסים מסייעים לסרוק רשימת "כלול /
 * לא כלול" ארוכה. אלא ש-‎mini-card‎ נגמרת ב-‎-card‎ והיא נתפסת
 * בו גם כן — ובסקשן כהה התוצאה היא מלבן בהיר סביב כל פריט אי-זוגי
 * בלבד: שלושה פריטים, ורק הראשון והשלישי בתוך תיבה לבנה. זה
 * נקרא כשרידים של עיצוב אחר, כי זה בדיוק מה שזה היה.
 *
 * ‎.mini-card__body‎ כבר מגדיר לפריטים האלה נקודה, ריפוד וגודל —
 * מערכת שלמה. כאן רק מוסר מה שמתנגש בה.
 */
.legacy #te-main .mini-card ul > li,
.legacy #te-main .mini-card ul > li:nth-child(odd) {
  background: none;
  border-radius: 0;
  padding: 0;
  padding-inline-start: var(--sp-4);
}


/*
 * צבע הטקסט בכרטיס על רקע כהה.
 *
 * ---------------------------------------------------------------------------
 * זו הייתה הבעיה החמורה יותר באותו כלל זברה, והיא לא נראתה עד
 * שהסתכלנו על הסקשן בגודל מלא: אותה שורה שנתנה לפריטים רקע לבן
 * קובעת גם ‎color: var(--text-body)‎ — ‎#33404d‎, אפור־פחם. הוא
 * נכתב לכרטיס לבן, ועל הנייבי של ‎section-dark‎ הוא כמעט בלתי
 * קריא: יחס הניגודיות יוצא סביב 1.6:1 במקום 4.5:1.
 *
 * מה שהסתיר את זה: ה-‎<strong>‎ בראש כל פריט כבר קיבל ‎--c-white‎
 * בכלל נפרד, ולכן התווית נראתה מצוין וההסבר שאחריה נעלם. במבט
 * חטוף הכרטיס נראה "מעוצב אבל דהוי", ולא כמו טקסט שאי אפשר
 * לקרוא.
 *
 * ‎.82‎ ולא לבן מלא: ההסבר הוא טקסט משני, והתווית שמעליו צריכה
 * להישאר ההיררכיה החזקה בכרטיס.
 */
.legacy #te-main .section-dark .mini-card ul > li,
.legacy #te-main .section-dark .mini-card ul > li:nth-child(odd),
.legacy #te-main .section-dark .mini-card__body p,
.legacy #te-main .section-dark .mini-card__body {
  color: rgba(255, 255, 255, .82);
}

/*
 * שורת כרטיסים אחת, בגובה אחד.
 *
 * הניסיון הראשון כאן היה להשאיר לכל כרטיס את גובה התוכן שלו,
 * בנימוק ש"כרטיס קצר הוא תוכן קצר". בגודל מלא זה נראה כמו
 * מדרגות: שלושה כרטיסים, שלושה גבהים, שלושה קווי תחתית שונים
 * באותה שורה. גובה אחיד קורא כרצועה אחת מכוונת.
 *
 * ‎align-content: start‎ בתוך הכרטיס שומר שהתוכן יישאר צמוד
 * לראשו ולא יתפזר לאורך הגובה החדש.
 */
.legacy #te-main .mini-cards { align-items: stretch; }
.legacy #te-main .mini-card {
  align-content: start;
}


/* ==========================================================================
   אריח יעד — שפת הכרטיס
   ========================================================================== */

/*
 * האריח מאמץ את שפת ה-‎boarding-pass‎.
 *
 * ---------------------------------------------------------------------------
 * מה היה: מלבן נייבי כהה בפינות חדות. התצלום תפס 148 פיקסלים
 * בראשו, ‎min-height: 250px‎ קבע גובה אחיד, וההפרש נשאר שטח ריק
 * בצבע ‎--c-navy-900‎. זה מה שנקרא "שחור מדי ומרובע מדי" — ובצדק:
 * זה לא רקע מעוצב אלא החלק שהתצלום לא כיסה.
 *
 * הכרטיס שכבר קיים באתר — זה שצמוד לצד המסך ובטופס הליד —
 * מחזיק שפה שלמה: ספח זהב, קו ניקוב מקווקו שמפריד אותו מהגוף,
 * פינות מעוגלות, צל עמוק ורך, ונטייה קלה. היא מזוהה מיד כ"כרטיס
 * נסיעה", וזה בדיוק מה שאריח יעד אמור להיות.
 *
 * מה עובר לכאן, ומה לא:
 *
 *   ✓ קו הניקוב המקווקו — כאן הוא מפריד את התצלום מהטקסט
 *     במקום את הספח מהגוף.
 *   ✓ שני חורי הניקוב בשוליים, בדיוק על הקו. הם מה שהופך מלבן
 *     לכרטיס במבט ראשון.
 *   ✓ ספח הזהב, כפס אנכי בקצה הפתיחה של אזור הטקסט.
 *   ✓ הצל העמוק והרך, והפינות ב-‎--r-lg‎.
 *
 *   ✗ הנטייה (‎rotate(-2deg)‎). היא עובדת על כרטיס בודד; על רשת
 *     של 15 אריחים היא קוראת כתקלת פריסה.
 *   ✗ הרקע הכהה. גוף הכרטיס עובר ללבן, והטקסט לדיו — זה מה
 *     שמוציא את השחור מהרשת.
 */

/* גובה החורים והקו — מקום אחד שקובע לשניהם */
.legacy #te-main .destination-card.destination-card,
.legacy #te-main .category-card.category-card:has(img),
.legacy #te-main .city-card.city-card:has(img) {
  --tile-notch: 9px;

  position: relative;
  min-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface-raised);
  border: 0;
  box-shadow: 0 14px 30px -18px rgba(4, 24, 46, .55);
  transition: transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}
.legacy #te-main .destination-card.destination-card:hover,
.legacy #te-main .category-card.category-card:has(img):hover,
.legacy #te-main .city-card.city-card:has(img):hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -18px rgba(4, 24, 46, .6);
}

/*
 * התצלום — פרופורציה אחת לכל האריחים.
 * בלעדיה לכל תצלום גובה משלו, ורשת של שישה יוצאת עם שישה קווי
 * הפרדה בגבהים שונים.
 */
.legacy #te-main .destination-card.destination-card > [class*="image"],
.legacy #te-main .destination-card.destination-card > figure,
.legacy #te-main .category-card.category-card:has(img) > [class*="image"],
.legacy #te-main .city-card.city-card:has(img) > [class*="image"] {
  position: relative;
  aspect-ratio: 16 / 10 !important;
  inline-size: 100%;
  block-size: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--c-navy-900);
}
.legacy #te-main .destination-card.destination-card > [class*="image"] > img,
.legacy #te-main .destination-card.destination-card > figure > img,
.legacy #te-main .category-card.category-card:has(img) > [class*="image"] > img,
.legacy #te-main .city-card.city-card:has(img) > [class*="image"] > img {
  inline-size: 100%;
  block-size: 100%;
  max-block-size: none;
  object-fit: cover;
  border-radius: 0;
  aspect-ratio: auto !important;
  transition: transform 700ms var(--ease);
}
.legacy #te-main .destination-card.destination-card:hover > [class*="image"] > img {
  transform: scale(1.05);
}

/*
 * ההצללה של העיצוב הקודם מיותרת.
 * היא נועדה להפריד טקסט לבן מתצלום בהיר כשהטקסט ישב *על*
 * התצלום. כאן הוא יושב מתחתיו, והיא רק מכהה את שוליו.
 */
.legacy #te-main .destination-card.destination-card::after,
.legacy #te-main .category-card.category-card:has(img)::after,
.legacy #te-main .city-card.city-card:has(img)::after {
  content: none;
}

/* ---------- אזור הטקסט: גוף הכרטיס ---------- */

.legacy #te-main .destination-card.destination-card .destination-content {
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4);
  padding-inline-start: calc(var(--sp-4) + 7px);
  background: var(--c-surface-raised);
  color: var(--text-body);
}

/*
 * ספח הזהב — פס אנכי בקצה הפתיחה.
 * אותו גרדיאנט של ‎boarding-pass__stub‎, בלי הטקסט האנכי שבו:
 * באריח אין מה לכתוב עליו, והפס לבדו נושא את הזיהוי.
 */
.legacy #te-main .destination-card.destination-card .destination-content::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 5px;
  background: linear-gradient(160deg, var(--c-gold-500), var(--c-gold-600));
}

/*
 * קו הניקוב — בדיוק בגבול שבין התצלום לטקסט.
 * מקווקו כמו ‎border-inline-end: 2px dashed‎ שמפריד את הספח בכרטיס
 * המקורי, ובאותו עובי.
 */
.legacy #te-main .destination-card.destination-card .destination-content::before {
  content: "";
  position: absolute;
  inset-inline: var(--sp-3);
  inset-block-start: 0;
  block-size: 0;
  border-block-start: 2px dashed var(--c-line);
}

/*
 * שני חורי הניקוב, על הקו עצמו.
 *
 * הם נצבעים בצבע רקע העמוד ולא נחתכים באמת מהכרטיס: חיתוך אמיתי
 * דורש ‎mask‎, והוא נשבר כשהרשת יושבת מעל רקע שאינו אחיד. שני
 * עיגולים בצבע ‎--bg-page‎ נותנים את אותה תוצאה בדיוק על הרקע
 * שהרשת הזו באמת יושבת עליו.
 */
.legacy #te-main .destination-card.destination-card > [class*="image"]::before,
.legacy #te-main .destination-card.destination-card > [class*="image"]::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset-block-end: calc(var(--tile-notch) * -1);
  inline-size: calc(var(--tile-notch) * 2);
  block-size: calc(var(--tile-notch) * 2);
  border-radius: 50%;
  background: var(--bg-page);
}
.legacy #te-main .destination-card.destination-card > [class*="image"]::before {
  inset-inline-start: calc(var(--tile-notch) * -1);
}
.legacy #te-main .destination-card.destination-card > [class*="image"]::after {
  inset-inline-end: calc(var(--tile-notch) * -1);
}

/* ---------- טיפוגרפיה על גוף בהיר ---------- */

.legacy #te-main .destination-card.destination-card h3,
.legacy #te-main .destination-card.destination-card [class$="-title"] {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-shadow: none;
}

/*
 * שלוש שורות תיאור.
 *
 * ‎line-clamp‎ ולא חיתוך בבנייה: הטקסט המלא נשאר ב-DOM, כך
 * שגוגל וקורא מסך מקבלים את המשפט השלם והגולש מקבל תקציר.
 *
 * ה-‎#te-main‎ בבורר הוא עניין של סגוליות ולא של הקשר: הכלל
 * ‎.legacy #te-main :is([class$="-card"]…) p‎ קובע ‎line-clamp: 3‎,
 * ומזהה יחיד גובר על כל מספר של מחלקות.
 *
 * ---------------------------------------------------------------------------
 * ‼️ היה 2, ושי דיווח על זה כרגרסיה
 *
 * ציון מדד ב-‎/יעדים‎ ואני אישרתי בנפרד:
 *
 *     6 כרטיסי יעד   ‎clientHeight 40‎ מול ‎scrollHeight 60‎
 *
 * כלומר **שורה אחת בדיוק** נחתכה בכל אחד מהם. לא חצי משפט ולא
 * פסקה — משפט שנגמר באמצע.
 *
 * ‼️ ו-60 הוא **בדיוק שלוש שורות** ב-‎line-height: 1.55‎. כלומר
 * הטקסט נכתב לשלוש שורות מלכתחילה, והכלל חתך אותו לשתיים.
 *
 * "תקציר" שנחתך באמצע מילה אינו תקציר — הוא נראה כמו תקלה,
 * והוא בדיוק מה ששי ראה.
 *
 * ---------------------------------------------------------------------------
 * ומה שנשאר נכון מההחלטה הקודמת
 *
 * הגבול **נשאר**, ולא בוטל. כרטיס שיקבל מחר תיאור בן שש שורות
 * עדיין ייחתך, ונכון שכך — אחרת הרשת מתפרקת. מה שהשתנה הוא
 * המספר, והוא נגזר עכשיו ממה שנמדד ולא מהערכה.
 * ---------------------------------------------------------------------------
 */
.legacy #te-main .destination-card.destination-card p,
.legacy #te-main .category-card.category-card:has(img) p,
.legacy #te-main .city-card.city-card:has(img) p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: 1.55;
  color: var(--text-muted);
  text-shadow: none;
}

/*
 * הכפתור — רק זה שבתוך אזור הטקסט.
 *
 * ---------------------------------------------------------------------------
 * הגרסה הראשונה של הכלל הזה נכתבה
 * ‎.legacy #te-main .destination-card .btn, … [class*="btn"]‎ —
 * והיא שברה את האריח.
 *
 * הסיבה: הקישור "גלה עוד" אינו כפתור. בבנייה הוא מועבר להיות
 * ילד ישיר של האריח ונמתח עליו כשכבת לחיצה שקופה
 * (‎position: absolute; inset: 0; font-size: 0; color: transparent‎),
 * כדי שכל האריח יהיה לחיץ. הכלל למעלה, שנושא ‎#te-main‎ וגובר
 * בסגוליות, החזיר לו ‎font-size‎ ו-‎color‎ — והטקסט "גלה עוד" צף
 * בחזרה, הפעם על גבי התצלום.
 *
 * הבורר מצומצם לכן ל-‎.destination-content‎ בלבד: שם יושבים
 * כפתורים אמיתיים, ושכבת הלחיצה לעולם אינה שם.
 */
.legacy #te-main .destination-card.destination-card .destination-content .btn,
.legacy #te-main .destination-card.destination-card .destination-content [class*="btn"] {
  align-self: flex-start;
  margin-block-start: var(--sp-3);
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  color: var(--c-sea-600);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/*
 * הירו של וורדפרס עם תצלום.
 *
 * ה-‎<img>‎ נשתל בבנייה (ראה ‎hero--photo‎ ב-‎build-site.js‎) והוא
 * נמתח על כל הכותרת מאחורי הטקסט. שכבת ההצללה מעליו היא אותה
 * שכבה שבה משתמש ההירו של האתר — כך ששני סוגי ההירו נראים כמו
 * אותו רכיב, ולא כמו שני עיצובים שנפגשו בטעות.
 */
.legacy #te-main .hero.hero--photo,
.legacy #te-main .hero-section.hero--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.legacy #te-main .hero--photo > .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: none;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto !important;
}
.legacy #te-main .hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(4, 24, 46, .92) 0%, rgba(4, 24, 46, .66) 45%, rgba(4, 24, 46, .42) 100%);
}
/* התוכן מעל שתי השכבות */
.legacy #te-main .hero--photo > :not(.hero__bg) {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   כרטיס המלצה — תיקון שני

   שי הצביע על הסקשן ואמר שהוא עדיין לא נראה כמו שצריך, ושתי
   הסיבות לא היו בעיצוב:

   1. הציטוט נחתך אחרי שלוש שורות ונגמר בשלוש נקודות. הכלל
      ‎.legacy #te-main :is([class$="-card"]…) p‎ נכתב לכרטיס
      תקציר — כזה שמזמין ללחוץ. המלצה היא היעד עצמו: אין לאן
      ללחוץ, ומשפט חתוך באמצע הוא פשוט טקסט חסר.

   2. הכרטיס ירש ‎text-align: center‎ מכלל רחב של המלצות.
      פסקה מרוכזת בעברית נקראת לאט: לכל שורה התחלה אחרת,
      והעין מחפשת אותה מחדש בכל פעם.

   הסגוליות כאן היא ‎.review-card.review-card‎ ולא ‎!important‎ —
   אותה שיטה שנקבעה ב-‎--section-pad‎: מנצחים בבורר, לא בסימן
   קריאה שאי אפשר לבטל אחר כך.
   ========================================================================== */

.legacy #te-main .review-card.review-card {
  text-align: start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  /* האווטר למעלה, הציטוט ממלא את השאר, כך שכרטיסים שכנים
     נגמרים באותו קו גם כשהטקסט באורך שונה */
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
}

/* הציטוט במלואו */
.legacy #te-main .review-card.review-card p {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
  text-overflow: clip;
  max-block-size: none;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/*
 * גרש פתיחה כסימן ולא כקישוט.
 *
 * הוא יושב מאחורי הטקסט בשקיפות נמוכה ומסמן "זה ציטוט" בלי
 * להתחרות בו. ‎aria-hidden‎ אינו נדרש: תוכן ‎::before‎ אינו
 * מוקרא ממילא בדפדפנים הנפוצים.
 */
.legacy #te-main .review-card.review-card p::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 #te-main .review-card .review-header {
  align-items: center;
  text-align: start;
}
.legacy #te-main .review-card .review-stars {
  font-size: var(--fs-sm);
  letter-spacing: 2px;
}

/* ‎.review-text‎ הוא שם המחלקה בתבנית השנייה. אותו טיפול */
.legacy #te-main .review-card .review-text {
  margin: 0;
  font-style: normal;
}


/* ==========================================================================
   לוגואי רצועת השותפים — מקור יחיד
   --------------------------------------------------------------------------
   ‼️ לפני זה ישבו על האלמנט הזה **שתים-עשרה** הצהרות בשני קבצים:
   34px, ואז 40px, ואז 38px, ואז 30px, ועוד אחת ב-34 שכבר לא
   הגיעה לשום מקום. כל אחת נוספה בסבב משוב אחר ולא ביטלה את
   קודמתה, ולכן כל ניסיון להגדיל "לא עבד" — הכלל האחרון בקובץ
   האחרון תמיד ניצח, והוא היה 30 פיקסלים.

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

   הלוגואים מנורמלים לשטח אופטי שווה על קנבס מרופד, ולכן הסמל
   תופס כשני שליש מהתיבה: 54 פיקסלים כאן הם כ-36 פיקסלים של סמל.
   ========================================================================== */
.logo-marquee__track img,
.legacy #te-main .logo-marquee__track img,
.legacy #te-main .te-strip.te-strip .logo-marquee__track img {
  block-size: 54px;
  max-block-size: 54px;
  inline-size: auto;
  max-inline-size: 150px;
  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,
.legacy #te-main .logo-marquee__track > *:hover img,
.legacy #te-main .te-strip.te-strip .logo-marquee__track > *:hover img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/*
 * ‼️ עותקי הלולאה חייבים ‎display: contents‎.
 *
 * כל עותק עטוף ב-‎<span aria-hidden>‎, ו-‎.logo-marquee__track > *‎
 * נותן לילדי הרצועה ‎display: grid‎. כלומר הספן הפך לרשת בעמודה
 * אחת ו**ערם עשרים לוגואים אנכית** — הסקשן קפץ מ-327 פיקסלים
 * ל-1,885. עד עכשיו זה הוסתר רק כי גובה הילדים היה נעול על 46
 * פיקסלים עם ‎overflow: hidden‎, כלומר הבאג היה שם כל הזמן ורק
 * נחתך מהעין.
 *
 * ‎contents‎ מוציא את הספן מהפריסה ומחבר את הלוגואים שבתוכו
 * ישירות לשורת ה-flex. זה גם מה שצריך מלכתחילה: הספן הוא סימון
 * "זו חזרה", לא תיבה.
 */
.logo-marquee__track > span[aria-hidden="true"],
.legacy #te-main .logo-marquee__track > span[aria-hidden="true"],
.legacy #te-main .te-strip.te-strip .logo-marquee__track > span[aria-hidden="true"] {
  display: contents;
}

/*
 * ‼️ הרצועה חייבת ‎max-content‎.
 *
 * כלל ישן נעל אותה על רוחב המיכל (1,160 פיקסלים). האנימציה
 * מזיזה ‎translateX(-50%)‎, כלומר חצי מ**רוחב הרצועה** — וכשהרוחב
 * הוא רוחב המיכל ולא רוחב התוכן, החצי הזה אינו העותק הראשון,
 * והלולאה קופצת במקום להיסגר.
 */
.logo-marquee__track,
.legacy #te-main .logo-marquee__track,
.legacy #te-main .te-strip.te-strip .logo-marquee__track {
  inline-size: max-content;
  max-inline-size: none;
  flex-wrap: nowrap;
}

/*
 * ‼️ שתי רצועות נגדיות, ובאותה מהירות.
 *
 * שי: "צריך להיות 2 רשימות שזזות אחת נגד השניה ובמהירות נורמלית".
 *
 * המהירות היא הנקודה העדינה. ‎logo-scroll‎ מזיז ‎-50%‎ מרוחב
 * הרצועה, כלומר עותק שלם — ומשך קבוע על שתי שורות באורך שונה
 * נותן שתי מהירויות שונות: שורה של שש חברות תעופה הייתה דוהרת
 * מול שורה של ארבע-עשרה רשתות שזוחלת.
 *
 * ‎--n‎ הוא מספר הפריטים בעותק, נכתב בבנייה, והמשך נגזר ממנו.
 *
 * 5.5 שניות לפריט ≈ **30 פיקסלים בשנייה** בשתי השורות.
 *
 * המספר כוון ארבע פעמים לפי משוב, וכל פעם ירד: 200 → 72 → 47 → 30.
 * בקצב הזה לוגו נשאר בשדה הראייה כחמש שניות, וזה מה שמבדיל בין
 * רצועה שנקראת לבין רצועה שרק זזה.
 *
 * ההיסטוריה של המספר הזה, כי הוא כוון שלוש פעמים:
 *   1.15s = 200 פיקסלים בשנייה — סרט נע בתעשייה
 *   3.2s  =  72 פיקסלים בשנייה — עדיין מהיר לטעמו של שי
 *   4.8s  =  48 פיקסלים בשנייה — לוגו נשאר בשדה הראייה כשלוש שניות,
 *                                 מספיק כדי לזהות מותג ולא רק להבחין בתנועה.
 */
.logo-marquee__track,
.legacy #te-main .te-strip.te-strip .logo-marquee__track {
  animation-duration: calc(var(--n, 12) * 5.5s);
}

@keyframes logo-scroll-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.logo-marquee--rev .logo-marquee__track,
.legacy #te-main .te-strip.te-strip .logo-marquee--rev .logo-marquee__track {
  animation-name: logo-scroll-rev;
}

/* שתי הרצועות צמודות זו לזו ולא שני סקשנים נפרדים */
.legacy #te-main .te-strip.te-strip .logo-marquee + .logo-marquee { margin-block-start: var(--sp-2); }

/*
 * הרווח בין הלוגואים.
 *
 * ‎clamp(sp-5, 4vw, sp-8)‎ נתן על מסך רחב קרוב ל-64 פיקסלים בין
 * פריט לפריט, ועוד ‎min-inline-size: 150px‎ סביב לוגו שרוחבו 80.
 * התוצאה היא בדיוק מה ששי ראה: "יותר מידי רווח בין הלוגואים" —
 * ארבעה לוגואים על מסך שלם.
 */
.logo-marquee__track,
.legacy #te-main .logo-marquee__track,
.legacy #te-main .te-strip.te-strip .logo-marquee__track {
  gap: clamp(10px, 1vw, 16px);
}

/* התיבה סביב הלוגו — גדלה איתו, אחרת היא חותכת */
.legacy #te-main .te-strip.te-strip .logo-marquee__track > * {
  block-size: auto;
  min-inline-size: 92px;
}

@media (prefers-reduced-motion: reduce) {
  /*
   * בלי אנימציה אין לולאה, והעותקים הופכים לרשת של כפילויות —
   * זה מה ששי ראה: "יש כפילות וזה תופס את כל העמוד".
   * הכלל הזה חייב לשבת **אחרי** ה-contents שלמעלה כדי לגבור עליו.
   */
  .logo-marquee__track > span[aria-hidden="true"],
  .legacy #te-main .logo-marquee__track > span[aria-hidden="true"],
  .legacy #te-main .te-strip.te-strip .logo-marquee__track > span[aria-hidden="true"] {
    display: none;
  }

  /*
   * וכאן הרצועה כן עוטפת: אין גלילה, ולכן ‎max-content‎ היה
   * מוציא את רוב הלוגואים מחוץ למסך עם ‎overflow: hidden‎ —
   * כלומר חצי מהשותפים פשוט לא היו נראים.
   */
  .logo-marquee__track,
  .legacy #te-main .logo-marquee__track,
  .legacy #te-main .te-strip.te-strip .logo-marquee__track {
    inline-size: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .logo-marquee__track img,
  .legacy #te-main .logo-marquee__track img,
  .legacy #te-main .te-strip.te-strip .logo-marquee__track img {
    block-size: 40px;
    max-block-size: 40px;
    max-inline-size: 140px;
  }
  .legacy #te-main .te-strip.te-strip .logo-marquee__track > * { min-inline-size: 112px; }
}


/* ==========================================================================
   ‼️ הרצועה ב-RTL — הבאג ששבר אותה מההתחלה
   --------------------------------------------------------------------------
   שי אמר שוב ושוב שהרצועה לא נראית נכון ושיש בה רווחים ענקיים.
   הוא צדק, והסיבה לא הייתה עיצובית אלא כיוונית.

   נמדד על הסאב-דומיין, לא בהערכה:

     שורה 1  translateX: 0          12 תמונות, **2 נראות**
     שורה 2  translateX: -3223px    28 תמונות, **0 נראות**

   בעמוד RTL הרצועה מיושרת לימין: הקצה הימני שלה נצמד לקצה הימני
   של המיכל, והתוכן נמשך שמאלה. כלומר העותק השני יושב **משמאל**
   לעותק הראשון.

   logo-scroll מזיז translateX ל-50%- , כלומר עוד שמאלה — אל מחוץ
   למסך. אין שום תוכן מימין למיכל שייכנס במקומו, ולכן החלון
   מתרוקן. זה מקור ה"יותר מדי רווח": לא רווח, אלא היעדר תוכן
   בחצי מהמחזור.

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

     0     אל  +50%    התוכן נע ימינה
     +50%  אל  0       התוכן נע שמאלה

   שתי השורות משתמשות באותו טווח בכיוונים הפוכים, וזה בדיוק מה
   ששי ביקש: שתי רשימות שזזות זו נגד זו.
   ========================================================================== */
@keyframes logo-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
@keyframes logo-scroll-rtl-rev {
  from { transform: translateX(50%); }
  to   { transform: translateX(0); }
}

.logo-marquee__track,
.legacy #te-main .logo-marquee__track,
.legacy #te-main .te-strip.te-strip .logo-marquee__track {
  animation-name: logo-scroll-rtl;
}
.logo-marquee--rev .logo-marquee__track,
.legacy #te-main .logo-marquee--rev .logo-marquee__track,
.legacy #te-main .te-strip.te-strip .logo-marquee--rev .logo-marquee__track {
  animation-name: logo-scroll-rtl-rev;
}

/*
 * הגודל, אחרי שהוסר כלל של 40 פיקסלים ששרד בקובץ אחר.
 * הוא היה הסיבה לכך שהלוגואים נשארו קטנים אחרי שהגדלתי אותם —
 * כלל אחד ששכחתי, בקובץ שלא חיפשתי בו.
 */
.logo-marquee__track img,
.legacy #te-main .logo-marquee__track img,
.legacy #te-main .te-strip.te-strip .logo-marquee__track img {
  block-size: 54px;
  max-block-size: 54px;
}
@media (max-width: 640px) {
  .logo-marquee__track img,
  .legacy #te-main .logo-marquee__track img,
  .legacy #te-main .te-strip.te-strip .logo-marquee__track img {
    block-size: 40px;
    max-block-size: 40px;
  }
}


/* ==========================================================================
   התיבה סביב הלוגו — מקור ה"יותר מדי רווח"
   --------------------------------------------------------------------------
   נמדד: הלוגו עצמו 144 פיקסלים רוחב, והתיבה שמסביבו **219**.
   כלומר 75 פיקסלים של אוויר לכל פריט, ועוד 14 של מרווח ביניהם.
   על מסך של 1,440 זה חמישה לוגואים במקום תשעה.

   שי אמר "יותר מידי רווח בין הלוגואים" שלוש פעמים. הרווח לא היה
   ב-gap — הוא היה בתוך התיבה, ושם לא חיפשתי.

   התיבה נועדה רק למרכז את הלוגו. רוחב קבוע אינו נחוץ לה, כי
   הלוגואים כבר מנורמלים לשטח אופטי שווה — הנרמול עושה בדיוק את
   העבודה שהרוחב הקבוע ניסה לעשות, ועושה אותה טוב יותר.
   ========================================================================== */
.logo-marquee__track .partner-logo,
.legacy #te-main .logo-marquee__track .partner-logo,
.legacy #te-main .te-strip.te-strip .logo-marquee__track .partner-logo {
  /*
   * ‼️ רוחב מפורש, ולא auto.
   *
   * auto נותן לתיבה את רוחב ה-max-content של התמונה, וזה **רוחב
   * התכונה** width="200" ולא הגודל שמוצג בפועל (144). כלומר
   * התיבה נשארה 219 פיקסלים גם אחרי שביטלתי כל רוחב קבוע.
   *
   * כאן רוחב קבוע דווקא נכון: כל הלוגואים מנורמלים לאותו קנבס
   * ולאותו שטח אופטי, ולכן תיבה אחידה היא בדיוק מה שצריך.
   */
  inline-size: 150px;
  min-inline-size: 0;
  max-inline-size: none;
  padding-inline: 0;
  padding-block: 0;
}

@media (max-width: 640px) {
  .logo-marquee__track .partner-logo,
  .legacy #te-main .logo-marquee__track .partner-logo,
  .legacy #te-main .te-strip.te-strip .logo-marquee__track .partner-logo { inline-size: 104px; }
}


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

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

   ‎50%‎ אינו רוחב עותק אחד. הרצועה היא ‎flex‎ עם ‎gap‎, ולכן:

     סך הרצועה  =  2n פריטים + (2n-1) מרווחים
     חצי ממנה   =   n פריטים + (n - 0.5) מרווחים
     עותק אחד   =   n פריטים +  n מרווחים

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

   הפתרון: לחשב את רוחב העותק מהמספרים עצמם. ‎--n‎ נכתב בבנייה,
   והרוחב והמרווח קבועים כאן — ולכן ההזזה מדויקת לפיקסל ואין תפר.

   ‎gap‎ חייב להיות ערך קבוע ולא ‎clamp‎: ערך שמשתנה עם רוחב המסך
   שובר את החישוב בכל שינוי גודל חלון.
   ========================================================================== */
.logo-marquee__track,
.legacy #te-main .logo-marquee__track,
.legacy #te-main .te-strip.te-strip .logo-marquee__track {
  --item: 150px;
  --gapx: 16px;
  --copy: calc(var(--n, 12) * (var(--item) + var(--gapx)));
  gap: var(--gapx);
}

@keyframes logo-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--copy)); }
}
@keyframes logo-scroll-rtl-rev {
  from { transform: translateX(var(--copy)); }
  to   { transform: translateX(0); }
}

/*
 * ‎linear‎ ולא ברירת המחדל.
 *
 * ‎animation-timing-function‎ ברירת המחדל היא ‎ease‎, כלומר הרצועה
 * מאיצה בתחילת כל סיבוב ומאטה בסופו. על לולאה אינסופית זה נקרא
 * כנשימה ולא כתנועה רציפה, ומחזק את תחושת ה"מתחיל מחדש".
 */
.logo-marquee__track,
.legacy #te-main .logo-marquee__track,
.legacy #te-main .te-strip.te-strip .logo-marquee__track {
  animation-timing-function: linear;
}

@media (max-width: 640px) {
  .logo-marquee__track,
  .legacy #te-main .logo-marquee__track,
  .legacy #te-main .te-strip.te-strip .logo-marquee__track {
    --item: 104px;
    --gapx: 10px;
  }
}


/* ==========================================================================
   ‼️ התפר — הפתרון הסופי: אין gap בכלל
   --------------------------------------------------------------------------
   הניסיון הקודם חישב את רוחב העותק מתוך ‎--n‎, רוחב הפריט והמרווח.
   נמדד: הוא יצא 2,061 פיקסלים במקום 1,992. כלומר גם החישוב הזה
   לא תאם את המציאות, כי רוחב הפריט בפועל אינו בדיוק מה שכתוב —
   ריפוד, גבולות ועיגולים מזיזים אותו בכמה פיקסלים.

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

   ‎gap‎ יורד לאפס, והמרווח עובר לריפוד **בתוך** הפריט. אז:

     סך הרצועה  =  2n פריטים, בלי מרווחים
     חצי ממנה   =   n פריטים  =  **בדיוק עותק אחד**

   ‎translateX(50%)‎ מדויק מתמטית, בלי קשר לכמה פריטים יש, כמה
   רחב כל אחד, או מה קורה בעתיד. זה גם הפתרון הפשוט מבין השניים.
   ========================================================================== */
.logo-marquee__track,
.legacy #te-main .logo-marquee__track,
.legacy #te-main .te-strip.te-strip .logo-marquee__track {
  gap: 0;
}

/*
 * הריפוד הוא המרווח. ‎border-box‎ כבר מוגדר, ולכן 166 פיקסלים
 * כוללים אותו והלוגו מקבל 150 — בדיוק כמו קודם לעין.
 */
.logo-marquee__track .partner-logo,
.legacy #te-main .logo-marquee__track .partner-logo,
.legacy #te-main .te-strip.te-strip .logo-marquee__track .partner-logo {
  inline-size: 166px;
  padding-inline: 8px;
}

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

@media (max-width: 640px) {
  .logo-marquee__track .partner-logo,
  .legacy #te-main .logo-marquee__track .partner-logo,
  .legacy #te-main .te-strip.te-strip .logo-marquee__track .partner-logo {
    inline-size: 114px;
    padding-inline: 5px;
  }
}


/* ==========================================================================
   ‼️ בן ישיר מול צאצא — הבאג שחצה את הרצועה לשניים
   --------------------------------------------------------------------------
   נמדד: 12 פריטים ברוחב 166 פיקסלים ו-12 ברוחב 219, באותה רצועה.

   העותק השני עטוף ב-span שמקבל display: contents. הוא נעלם
   **מהפריסה**, ולכן הפריטים שבתוכו הם פריטי flex של הרצועה —
   אבל הוא **אינו נעלם מעץ ה-DOM**, ולכן סלקטור עם > לא מגיע
   אליהם. הם נשארו ברוחב הישן.

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

   הכלל: ברצועה הזו לעולם לא משתמשים ב-> . העותק תמיד עטוף.
   ========================================================================== */


/* ==========================================================================
   שם רשת ברצועה — "גם וגם"
   --------------------------------------------------------------------------
   שי: "המטרה שלי שיהיה הכל לא או או אלא גם וגם".

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

   השם יושב באותה תיבה של 166 פיקסלים ובאותו גובה, ולכן הוא לא
   שובר את חישוב הלולאה ולא בולט מהשורה. הוא מקבל את אותה
   אטימות של הלוגואים שסביבו, כי הוא באותו מעמד בדיוק.

   ‎letter-spacing‎ ואותיות גדולות הם מה שגורם לשם להיקרא כמותג
   ולא כמילה בטקסט — זה מה שמשווה אותו אופטית ללוגו לידו.
   ========================================================================== */
.partner-logo--text,
.legacy #te-main .partner-logo--text {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.partner-logo--text span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  opacity: .78;
  transition: opacity var(--dur-mid) var(--ease);
  /* שם ארוך לא יוצא מהתיבה ולא דוחף את השכן */
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}
.partner-logo--text:hover span,
.partner-logo--text:focus-visible span { opacity: 1; }

@media (max-width: 640px) {
  .partner-logo--text span { font-size: 10px; letter-spacing: .08em; }
}

/*
 * שורת השמות שמתחת לרצועה כבר אינה נחוצה: כל רשת מופיעה ברצועה
 * עצמה. להשאיר אותה פירושו להציג את אותם שמות פעמיים, וזו בדיוק
 * הכפילות ששי ביקש להסיר.
 */
.chain-names { display: none; }


/* ==========================================================================
   ‼️ הקו מתחת לכותרת — למה הוא "נשבר הצידה"
   --------------------------------------------------------------------------
   שי: "הקו שמתחת לכותרת ההנפשה שלו שבורה, שעוברים עליו הוא נשבר
   הצידה ולא נפתח יפה".

   הסיבה: הקו היה ‎position: absolute‎ עם ‎inset-inline-start: 0‎,
   כלומר מעוגן לקצה ההתחלה של ה-h2 — והכותרת עצמה **ממורכזת**.
   ה-h2 תופס את כל רוחב המיכל, ולכן הקו ישב הרחק מהכותרת, ובריחוף
   הוא גדל מ-56 ל-120 פיקסלים **לכיוון אחד בלבד**. זה נקרא כזחילה
   הצידה ולא כפתיחה.

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

   ‎translate‎ כתכונה נפרדת ולא ‎transform‎: אחרת כל אנימציה עתידית
   על ‎transform‎ תדרוס את המרכוז.
   ========================================================================== */
.section-head h2::after,
.legacy #te-main .section-head h2::after {
  inset-inline-start: auto;
  left: 50%;
  translate: -50% 0;
  transition: width var(--dur-mid) var(--ease),
              background var(--dur-mid) var(--ease);
}

/*
 * הריחוף על הסקשן כולו ולא על הכותרת.
 *
 * גולש שמזיז את העכבר בשולי הסקשן מפעיל את האנימציה בלי לדעת
 * למה, והקו קופץ כשהוא בכלל קורא משהו אחר. הריחוף עובר לכותרת
 * עצמה, שזה גם מה שהמשתמש מצפה לו.
 */
.section:hover .section-head h2::after { width: 56px; }
.section-head:hover h2::after,
.section-head h2:hover::after {
  width: 120px;
  background: var(--c-gold-500);
}

@media (prefers-reduced-motion: reduce) {
  .section-head h2::after { transition: none; }
}


/* ==========================================================================
   ‼️ הקו מתחת לכותרת — מקור יחיד
   --------------------------------------------------------------------------
   שי: "הקו שמתחת לכותרת, ההנפשה שלו שבורה — שעוברים עליו הוא נשבר
   הצידה ולא נפתח יפה".

   נמדד על העמוד החי: ‎position: absolute‎, ‎left: 580px‎,
   ‎width: 96px‎, ‎translate: none‎.

   זה מסביר הכל. חמישה כללים שונים מתחרים על ‎.section-title::after‎
   בארבעה קבצים, ואחד מהם הופך אותו ל-‎absolute‎. ברגע שהוא
   ‎absolute‎, ה-‎margin: auto‎ שמרכז אותו מפסיק לפעול, והוא נעצר
   במיקום הסטטי שלו — קצה ההתחלה. ואז ההנפשה מגדילה את הרוחב
   **לכיוון אחד בלבד**, וזה נראה כזחילה הצידה ולא כפתיחה.

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

   הכלל כאן מנצח בספציפיות (‎.container‎ נוסף) ולא בסדר הטעינה,
   כדי שלא יישבר כשמישהו יוסיף קובץ CSS חדש אחרי attractions.
   ========================================================================== */
.container .section-title::after,
.legacy .container .section-title::after,
.legacy #te-main .container .section-title::after {
  /* חוזרים לזרימה. absolute הוא מה ששבר את המרכוז */
  position: static;
  display: block;
  inline-size: 56px;
  block-size: 3px;
  margin: var(--sp-4) auto 0;
  border-radius: var(--r-full);
  background: var(--c-sea-500);
  translate: none;
  transform: none;
  transition: inline-size var(--dur-mid) var(--ease),
              background var(--dur-mid) var(--ease);
}

/*
 * ‎margin-inline: auto‎ בזרימה מרכז את הקו, ולכן הגדלת הרוחב
 * פותחת אותו **משני הצדדים במקביל**. אותה אנימציה, אותם מספרים,
 * וזה ההבדל בין "נשבר" לבין "נפתח".
 */
.container .section-title:hover::after,
.legacy .container .section-title:hover::after,
.legacy #te-main .container .section-title:hover::after,
.legacy #te-main .section:hover .container .section-title::after {
  inline-size: 132px;
  background: linear-gradient(90deg, var(--c-gold-500), #ffd97a, var(--c-gold-500));
}

@media (prefers-reduced-motion: reduce) {
  .container .section-title::after,
  .legacy #te-main .container .section-title::after { transition: none; }
}



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

   הפתרון אינו להגדיל את הנקודה אלא להגדיל את **השטח סביבה**:
   הריפוד מרחיב את יעד המגע ל-28 פיקסלים, ו-background-clip
   משאיר את הצבע על הנקודה עצמה בלבד.
   ========================================================================== */
/*
 * ‼️ הגדלת יעדי המגע היא **מובייל בלבד**.
 *
 * שי: "דגש לא לפגוע בדסקטופ".
 *
 * 28 פיקסלים סביב נקודת קרוסלה הם הכרח באצבע ועודף בעכבר —
 * בדסקטופ הם היו מרחיבים את שורת הנקודות ומזיזים את הפריסה
 * סביבה. עכבר מדייק לפיקסל, אצבע לא.
 *
 * תיבת הכפתור עצמה **אינה** בתוך שאילתת המדיה: 48 פיקסלים הם
 * מה ש-.btn כבר נותן בכל רוחב, ולכן זה יישור לקיים ולא שינוי
 * של הדסקטופ.
 */
@media (max-width: 900px) {
  .carousel__dot {
    /*
     * מידה מפורשת ולא padding.
     *
     * ‎box-sizing: content-box‎ הפסיד לכלל ספציפי יותר, והנקודה
     * נשארה 20 פיקסלים במקום 28 — כלומר התיקון "עבד" לפי הקוד
     * ונכשל לפי המסך. ‎min-inline-size‎ אינו תלוי במודל הקופסה.
     */
    min-inline-size: 28px;
    min-block-size: 28px;
    padding: 10px;
    background-clip: content-box;
    border: 0;
  }

  .flight-tab__close,
  .flight-drawer__close,
  .mapdlg__x {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-grid;
    place-items: center;
  }
}


/* ==========================================================================
   ‼️ ההחלטה המותנית, בסגוליות של הדורס

   ‎.section-head h2::after‎ מצהיר ‎transition: none‎ תחת
   ‎prefers-reduced-motion‎. הוא ‎(0,1,1)‎.
   ‎.legacy #te-main .section-head h2::after‎ הוא ‎(1,2,1)‎ ומצהיר
   מעבר מלא. **שאילתת מדיה אינה מוסיפה סגוליות**, אז ההחלטה
   המותנית מעולם לא חלה על העמודים האלה.

   --------------------------------------------------------------------------
   ולמה זה לא נתפס כנזק עד עכשיו

   בקובץ הזה כתוב, מהפעם הקודמת שהגלאי דיווח עליו:

       "מדדתי, ומצאתי שאף אלמנט באתר אינו תואם לו —
        118 עמודים מחזיקים .section-head h2, 0 מהם בתוך .legacy"

   **המדידה הייתה נכונה, והיא מיושנת.** היום:

       129 עמודים עם .section-head h2
        24 מהם בתוך .legacy #te-main  ← כולל דף הבית

   ‼️ כלומר "ממצא שווא מתועד" הפך לממצא אמיתי כשהתוכן השתנה,
   וההערה בקובץ המשיכה להרגיע. **תיעוד של מדידה אינו תחליף
   למדידה**, והתאריך שלו הוא חלק ממנו.

   --------------------------------------------------------------------------
   ‎transition: none‎ ולא ‎transition-duration: 0‎ — כי האיפוס
   הגלובלי ב-‎tokens.css‎ אוכף ‎transition-duration‎ ב-‎!important‎
   אבל **אינו נוגע ב-‎transition-delay‎**. קיצור מאפס את שניהם.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .legacy #te-main .section-head h2::after { transition: none; }
}