/* styles/pages/related.css — בלוק "עוד תוכן" (22.7.2026)
   מלווה את template-parts/related-block.php, שמודפס בתוך <main> לפני סגירתו ב-footer.php.
   נטען אוטומטית (auto-enqueue של styles/pages/*.css לפי filemtime) — אין צורך ב-functions.php.

   רקע שנבחר: ללא רקע משלו — הסקשן יורש את רקע הגוף (--espresso), והכרטיסים הם
   --espresso-2 עם מסגרת --border. זהו בדיוק הדפוס המאושר של כרטיסי המתכונים
   (.rc-grid .sa-recipe-card). הסיבה: פס רקע נפרד היה משחזר בדיוק את התלונה של הלקוח
   ("רצועה מודבקת לפוטר") — בלי פס, הבלוק נקרא כתוכן העמוד. בנוסף, האתר כולו כהה,
   ולכן אין כאן מלכודת של טקסט בהיר על רקע בהיר.

   כל הסלקטורים מתחילים ב-.sa-related- — קרוסלה בעלת שם ייחודי משלה, לא סלקטור גלובלי
   (סלקטור קרוסלה גלובלי כבר שבר את האתר פעם אחת כששתי קרוסלות התקיימו יחד).
*/

.sa-related {
  padding-block: var(--section-pad);
  border-top: 1px solid var(--border);
  overflow-x: hidden;               /* גדר בטיחות — שום דבר לא זולג מהסקשן */
}
.sa-related > .container { max-width: var(--container); }

.sa-related-heading {
  font-family: var(--font-heading);
  color: var(--cream);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 700;
  margin-bottom: var(--sp-6);
}

/* ─── מסלול הכרטיסים: קרוסלה במובייל, גריד בדסקטופ ─── */
.sa-related-track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
  max-width: 100%;
}
.sa-related-track::-webkit-scrollbar { height: 6px; }
.sa-related-track::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-pill);
}

.sa-related-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(200px, 62vw, 270px);
  max-width: 100%;
  background: var(--espresso-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
@media (min-width: 480px) { .sa-related-card { width: clamp(220px, 42vw, 280px); } }
@media (hover: hover) {
  .sa-related-card:hover { border-color: var(--gold); transform: translateY(-3px); }
}

.sa-related-card img,
.sa-related-card-noimg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--espresso-3);
}

.sa-related-card-title {
  padding: var(--sp-4);
  font-size: .95rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--cream);
}

/* ─── דסקטופ: גריד אמיתי, בלי גלילה אופקית ─── */
@media (min-width: 1000px) {
  .sa-related-track {
    display: grid;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
  .sa-related-track .sa-related-card { width: auto; }
  .sa-related-track--3 { max-width: 860px; }
  .sa-related-track--4 { grid-template-columns: repeat(4, 1fr); }
  .sa-related-track--5,
  .sa-related-track--6 { grid-template-columns: repeat(3, 1fr); }
}

/* ─── הנעה לפעולה ─── */
.sa-related-cta {
  display: inline-block;
  margin-top: var(--sp-6);
  background: var(--gold);
  color: var(--espresso);
  font-weight: 700;
  padding: .7rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: .98rem;
  transition: var(--transition);
}
.sa-related-cta:hover { background: var(--gold-soft); color: var(--espresso); }

/* ─── אם בכל זאת יוצב אי-פעם על רקע בהיר (.section--soft) — צבעי טקסט כהים ─── */
.section--soft .sa-related-heading { color: #2a1c16; }
.section--soft .sa-related-card-title { color: #2a1c16; }

/* ─── תקן הקרוסלות ‎.sa-carousel‎ (22.7.2026) ───
   assets/components.css נטען לפני styles/pages/*.css, ולכן כלל בספציפיות
   שווה שם היה מפסיד. מעלים כאן ספציפיות בקובץ שלנו במקום לשנות סדר טעינה.
   ההצמדה הקשיחה (‎x mandatory‎) מבוטלת: הלקוחה ביקשה זרימה חופשית לשני
   הכיוונים בלי עצירה חדה, וההצמדה נלחמת גם בהנעה האוטומטית וגם בגרירה. */
.sa-related-track.sa-carousel { scroll-snap-type: none; }
.sa-related-track.sa-carousel > .sa-related-card { scroll-snap-align: none; }

/* בדסקטופ המסלול הוא גריד — הסקריפט מזהה שאין גלישה ולא מנגן, אבל מוודאים
   שגם סמן היד לא מופיע שם, כי אין מה לגרור. */
@media (min-width: 1000px) {
  .sa-related-track.sa-carousel { cursor: default; }
}

/* ═══════════════════════════════════════════════════════
   סבב תיקון — תיק 07 (29.07.2026)
   ═══════════════════════════════════════════════════════
   1. .sa-related-track--3 הוגדר עם max-width:860px בלי margin-inline:auto,
      ולכן המסלול נצמד לימין והכרטיס האחרון נראה חתוך. אותו באג מירכוז
      שחזר בכל האתר.
   2. יחס 4/3 חתך תמונות עטיפה שהן לאורך. יחס מרובע חותך פחות
      ומתאים לשלוש התמונות בפועל.
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  .sa-related-track,
  .sa-related-track--3,
  .sa-related-track--4,
  .sa-related-track--5,
  .sa-related-track--6 {
    margin-inline: auto;
  }
}
.sa-related-card img,
.sa-related-card-noimg {
  aspect-ratio: 1 / 1;
  object-position: center top;
}