/**
 * === מפת CSS לעמוד הבית ===
 * קובץ זה קובע את סדר איחוד קבצי CSS של בלוקי עמוד הבית
 */

/* משתנים גלובליים לעמוד הבית */

/* ייבוא בלוקי עמוד הבית */
:root {
    /* צבעים */
    /* צבעי מותג בני ברק עכשיו */
    --primary-color-jhhd: #DE0100; /* צבע ראשי מתוג בני ברק עכשיו */
    --secondary-color-jhhd: #1B365D; /*  צבע משנה מתוג בני ברק עכשיו */
    --secondary-color-jhhd-bright: #FAFAFA; /*  צבע משני בהיר מותג בני ברק עכשיו */

    --primary-color: #8B4513;
    --secondary-color: #CD853F;
    --secondary-color-dark: #005f8c;
    --white: #ffffff;
    --gray-soft: #f7f7f7;
    --gray-mild: #e0e0e0;
    --gray-medium: #777777;
    --gray-dark: #444444;
    
    /* מרווחים */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 0;
    --space-xl: 3rem;
    
    /* צללים */
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* מעברים */
    --transition-default: all 0.3s ease;
    
    /* מרווחים בין עמודות במיכלים */
    --column-gap: 10px;
}


/* ===== _homepage-common.css ===== */
/**
 * === סגנונות משותפים לכל בלוקי עמוד הבית ===
 */

/* ================================
   === איפוס והגדרות בסיסיות ===
   ================================ */

.homepage-template {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.section-container {
  width: 100%;
  margin-bottom: 0;
  padding: 0 20px;
  box-sizing: border-box;
}



/* תיקון גלישה במובייל */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  .homepage-template {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 0 !important; /* ביטול מרווח במובייל */
  }

  /* מניעת גלישה של בלוקי עמוד הבית */
  [class*="-wrapper"],
  [class*="-container"]:not(.section-container) {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

.homepage-section-divider {
  display: none;
}

.section-title {
  font-family: 'Noto Sans Hebrew', 'Heebo', sans-serif;
  font-size: 1.8rem;
  color: #ffffff; /* טקסט לבן */
  background-color: var(--primary-color-jhhd); /* רקע אדום */
  margin-top: 0; /* ביטול - המרווח מעל הכותרת מנוהל ע"י margin-top של .section-container בקובץ הגלובלי */
  margin-bottom: var(--space-md); /* מרווח תחתון - בין הכותרת לפוסטים */
  padding: 12px 20px; /* מרווח פנימי */
  display: block; /* שינוי מ-inline-block ל-block כדי שימלא את הרוחב */
  width: 100%; /* רוחב מלא */
  box-sizing: border-box;
  text-align: right; /* יישור לימין לעברית */
  font-weight: 600; /* טקסט מודגש יותר */
}

/* הסרת הפס התחתון - לא נחוץ יותר */
.section-title:after {
  display: none;
}

/* סגנון בסיסי לקישור בכותרת הבלוק */
.section-title a {
  color: inherit;
  text-decoration: none;
}

/* כלל זה נמחק - העיטור הוסר לחלוטין */

/* כל הכללים של העיטור נמחקו לחלוטין */

/* =======================================
   === עקיפת מגבלות רוחב בעמוד הבית ===
   ======================================= */

/* הסרת מגבלת רוחב מקסימלית מכל האלמנטים בעמוד הבית */
body.home,
body.home .wp-site-blocks,
body.home #content,
body.home .site-content,
body.home .entry-content>*,
body.home .wp-block-group.alignwide,
body.home main>.wp-block-group,
body.home .wp-block-post-content>*,
body.home .wp-block-group>*,
body.home main>*,
body.home .section-container>* {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* וידוא שה-wrapper הראשי לא מגביל */
body.home .wp-site-blocks {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* התפרסות מלאה של התוכן */
body.home {
  width: 100vw !important;
  overflow-x: hidden !important;
}

/* הכותרת מנוהלת ב-CSS Compiler - אותו עיצוב לכל העמודים */

/* וידוא שהתוכן מתחיל מהתחלה ללא מרווח */
body.home .wp-site-blocks>*:first-child:not(header) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.home .wp-site-blocks,
body.home #content,
body.home .site-content {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* הגדרת מרווחי שוליים אחידים לכל תוכן האתר */
body.home .site-content,
body.home .homepage-template {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  /* padding עליון מטופל בנפרד */
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  /* הכותרת כעת צמודה לחלק העליון - אין צורך במרווח */
}

/* החרגת הפוטר בעמוד הבית - הכותרת מנוהלת ב-CSS Compiler */

body.home footer.wp-block-template-part,
body.home .wp-site-blocks>footer {
  max-width: 100% !important;
  width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* מניעת גלישה אופקית */
body.home {
  overflow-x: hidden !important;
}

/* ======================
   === נגישות ===
   ====================== */

/* ביטול מסגרת בכל הבלוקים בעמוד הבית */
body.home a,
body.home a:focus,
body.home a:active,
body.home .article-card a,
body.home .article-card a:focus,
body.home .article-card a:active,
body.home .article-card-square a,
body.home .article-card-square a:focus,
body.home .article-card-square a:active,
body.home .post-card a,
body.home .post-card a:focus,
body.home .post-card a:active,
body.home .headline-split-link,
body.home .headline-split-link:focus,
body.home .headline-split-link:active,
body.home .headline-split-link *,
body.home .headline-split-link *:focus,
body.home .headline-split-link *:active,
body.home .headline-split-super-link,
body.home .headline-split-super-link:focus,
body.home .headline-split-super-link:active,
body.home .headline-split-title,
body.home .headline-split-title:focus,
body.home .headline-split-title:active,
body.home button:focus,
body.home button:active,
body.home [role="button"]:focus,
body.home [role="button"]:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* שמירה על נגישות רק לניווט במקלדת - לא בלחיצת עכבר */
/* מסגרת פוקוס בולטת וברורה לניווט במקלדת */
body.home a:focus-visible,
body.home button:focus-visible,
body.home input:focus-visible,
body.home [role="button"]:focus-visible,
body.home .article-card a:focus-visible,
body.home .article-image-link:focus-visible,
body.home .block-category-link:focus-visible,
body.home .post-card a:focus-visible,
body.home .category-card a:focus-visible {
  outline: 3px solid var(--primary-color-jhhd) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ===== פוקוס על קישור כותרת הבלוק (קטגוריה אוטומטית) ===== */
/* כותרות הבלוקים הן על רקע אדום - צריך מסגרת לבנה */
body.home .section-title a {
  display: inline-block;
  padding: 2px 8px;
  margin: -2px -8px;
  border-radius: 4px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* מסגרת פוקוס לבנה בולטת על רקע אדום */
body.home .section-title a:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.35) !important;
  border-radius: 4px;
}

/* הסתרת פוקוס בלחיצת עכבר */
body.home .section-title a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* אפקט hover */
body.home .section-title a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* ===== ניווט Tab ברמת הכרטיס (מיכל הכתבה) ===== */
/* מיכל כתבה שמקבל tabindex="0" מה-JS */
body.home .article-card-square[tabindex="0"],
body.home .most-read-article[tabindex="0"],
body.home .main-post-card[tabindex="0"],
body.home .side-post-card[tabindex="0"],
body.home .headline-split-container[tabindex="0"] {
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* מסגרת פוקוס בולטת על מיכל הכתבה */
body.home .article-card-square[tabindex="0"]:focus-visible,
body.home .most-read-article[tabindex="0"]:focus-visible,
body.home .main-post-card[tabindex="0"]:focus-visible,
body.home .side-post-card[tabindex="0"]:focus-visible,
body.home .headline-split-container[tabindex="0"]:focus-visible {
  outline: 3px solid var(--primary-color-jhhd) !important;
  outline-offset: 4px !important;
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(200, 30, 30, 0.15);
  z-index: 10;
}

/* הסתרת פוקוס בלחיצת עכבר על מיכל הכתבה */
body.home .article-card-square[tabindex="0"]:focus:not(:focus-visible),
body.home .most-read-article[tabindex="0"]:focus:not(:focus-visible),
body.home .main-post-card[tabindex="0"]:focus:not(:focus-visible),
body.home .side-post-card[tabindex="0"]:focus:not(:focus-visible),
body.home .headline-split-container[tabindex="0"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none;
}

/* הסרת פוקוס מקישורים פנימיים במיכל (הם מקבלים tabindex="-1" מה-JS) */
body.home .article-card-square[tabindex="0"] a,
body.home .article-card-square[tabindex="0"] button,
body.home .most-read-article[tabindex="0"] a,
body.home .most-read-article[tabindex="0"] button,
body.home .main-post-card[tabindex="0"] a,
body.home .main-post-card[tabindex="0"] button,
body.home .side-post-card[tabindex="0"] a,
body.home .side-post-card[tabindex="0"] button,
body.home .headline-split-container[tabindex="0"] a,
body.home .headline-split-container[tabindex="0"] button {
  /* הקישורים הפנימיים לא יקבלו פוקוס - הניווט הוא ברמת המיכל */
}

/* אפקט hover על מיכל הכתבה */
body.home .article-card-square[tabindex="0"]:hover,
body.home .most-read-article[tabindex="0"]:hover,
body.home .main-post-card[tabindex="0"]:hover,
body.home .side-post-card[tabindex="0"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* בלוק כותרת ראשית - אפקט hover מיוחד (בלי הזזה כי הוא גדול) */
body.home .headline-split-container[tabindex="0"]:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* קונטרסט גבוה למצב נגישות */
@media (forced-colors: active) {

  .article-card,
  .opinion-card,
  .category-card,
  .most-read-article {
    border: 1px solid CanvasText;
  }
}

/* ========================
   === התאמות למובייל ===
   ======================== */

@media screen and (max-width: 768px) {

  /* מרווח עבור הכותרת הsticky במובייל */
  body.home .site-content,
  body.home .wp-site-blocks,
  body.home .entry-content,
  body.home main,
  body.home .homepage-template {
    padding-top: 0 !important;
    margin-top: 50px !important;
    /* מרווח עבור כותרת במובייל (גובה ~42px + מרווח) */
  }

  /* הקטנת גדלי טקסט */
  .section-title {
    font-size: 1.5rem;
    margin-top: 0; /* ביטול - המרווח מעל הכותרת מנוהל ע"י margin-top של .section-container */
    margin-bottom: calc(var(--space-sm) + 2px); /* מרווח תחתון - בין הכותרת לפוסטים + 2px נוסף */
    padding: 10px 15px; /* התאמת padding למובייל */
  }

  /* צמצום מרווחים */
  .homepage-section-divider {
    margin: var(--space-md) auto;
  }

  /* התאמת article-meta: הקטנת גופן אוטומטית כשאין מקום - הקטנה של 20% לבקשת המשתמש */
  .article-meta {
    font-size: 0.8rem !important; /* הקטנה ב-20% מ-1rem */
    line-height: 1.2 !important;
    white-space: nowrap;
  }
  .article-meta .author,
  .article-meta .date,
  .article-meta .separator {
    font-size: inherit !important;
  }

  /* הפיכת כרטיסים לקונטיינרים כדי להקטין רק כשהם צרים */
  body.home .article-card,
  body.home .article-card-square,
  body.home .grid-item,
  body.home .post-card,
  body.home .vertical-posts-column {
    container-type: inline-size;
  }

  /* הקטנה מדורגת לפי רוחב הקונטיינר - הקטנה של 20% נוספת לבקשת המשתמש */
  @container (max-width: 340px) {
    .article-meta { font-size: 0.76rem !important; } /* הקטנה ב-20% מ-0.95rem */
  }
  @container (max-width: 300px) {
    .article-meta { font-size: 0.7rem !important; } /* הקטנה ב-20% מ-0.875rem */
  }
  @container (max-width: 260px) {
    .article-meta { font-size: 0.64rem !important; } /* הקטנה ב-20% מ-0.8rem */
  }

  /* הקטנת מרווח אנכי בין הבלוקים במובייל */
  body.home .posts-vertical-section,
  body.home .all-posts-grid-section,
  body.home .posts-tabs-section,
  body.home .mixed-layout-section.section-container,
  body.home .featured-posts-split-section,
  body.home .popular-articles-section.section-container,
  body.home .leading-articles-section.section-container {
    margin: 0 auto !important;
  }
}

@media screen and (max-width: 480px) {

  /* הקטנת גדלי טקסט נוספת */
  .section-title {
    font-size: 1.3rem;
    margin-top: 0 !important; /* ביטול - המרווח מעל הכותרת מנוהל ע"י margin-top של .section-container */
    margin-bottom: calc(var(--space-xs) + 2px) !important; /* מרווח תחתון - בין הכותרת לפוסטים + 2px נוסף */
    padding: 8px 10px; /* התאמת padding למסכים קטנים */
  }
  /* הסרת הקו המפריד במובייל */
  .homepage-section-divider {
    display: none !important;
    /* הסתרה מוחלטת של הקו המפריד */
    margin: 0 !important;
  }

  /* צמצום נוסף למסכים קטנים מאוד - הקטנה של 20% לבקשת המשתמש */
  .article-meta {
    font-size: 0.76rem !important; /* הקטנה ב-20% מ-0.95rem */
  }

  /* מרווח קטן יותר מאוד במסכים קטנים מאוד */
  body.home .posts-vertical-section,
  body.home .all-posts-grid-section,
  body.home .posts-tabs-section,
  body.home .mixed-layout-section.section-container,
  body.home .featured-posts-split-section,
  body.home .popular-articles-section.section-container,
  body.home .leading-articles-section.section-container {
    margin: 0 auto !important;
  }
}

/* ===== _homepage-global-layout.css ===== */
/**
 * === הגדרות גלובליות לעמוד הבית ===
 * קובץ זה מכיל את ההגדרות המשותפות לכל הבלוקים של עמוד הבית:
 * - מגבלת רוחב מקסימלית (1200px)
 * - מרווחים בין בלוקים
 * - עיצוב כותרות בלוקים
 */

/* =======================================
   === מגבלת רוחב גלובלית לכל הבלוקים ===
   ======================================= */

/* כל ה-wrappers של הבלוקים */
.posts-tabs-wrapper:not(.full-width-container),
.posts-vertical-wrapper,
.posts-horizontal-wrapper,
.all-posts-grid-wrapper,
.featured-posts-split-wrapper,
.mixed-layout-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* בלוק הכותרת הראשית - ברוחב מלא */
.headline-text-image-split {
  width: 100vw;
  max-width: none;
}

/* עוקף כללים גלובליים בעמוד הבית שמאלצים רוחב מלא */
body.home .posts-tabs-wrapper:not(.full-width-container),
body.home .posts-vertical-wrapper,
body.home .posts-horizontal-wrapper,
body.home .all-posts-grid-wrapper,
body.home .featured-posts-split-wrapper,
body.home .mixed-layout-wrapper {
  max-width: 1200px !important;
  width: auto !important;
}

/* ===========================================
   === מרווחים בין הבלוקים ומרווח פנימי ===
   =========================================== */

/* מרווחים סטנדרטיים בין הבלוקים */
.posts-tabs-wrapper .posts-tabs-section,
.posts-vertical-wrapper .posts-vertical-section.section-container,
.posts-horizontal-wrapper .posts-horizontal-section.section-container,
.all-posts-grid-wrapper .all-posts-grid-section.section-container,
.featured-posts-split-wrapper .featured-posts-split-section.section-container,
.mixed-layout-wrapper .mixed-layout-section.section-container {
  margin-top: -15px; /* מרווח שלילי - מקטין את המרווח מעל מיכל הכותרת */
  margin-bottom: 40px; /* מרווח תחתון - מתחת למיכל הכותרת */
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  max-width: 1200px;
}

/* בלוק הכותרת הראשית - מרווחים נפרדים */
.headline-text-image-split {
  margin: 0 auto 40px auto;
  padding: 0;
}

/* בלוק הכותרת הראשית - מרווח עליון רק בדסקטופ */
@media screen and (min-width: 769px) {
  .headline-text-image-split {
    margin: 10px auto 40px auto;
  }
  
  body.home .headline-text-image-split {
    margin: 10px auto 40px auto !important;
  }
}

/* עוקף כללים גלובליים בעמוד הבית */
body.home .posts-tabs-wrapper .posts-tabs-section,
body.home .posts-vertical-wrapper .posts-vertical-section.section-container,
body.home .posts-horizontal-wrapper .posts-horizontal-section.section-container,
body.home .all-posts-grid-wrapper .all-posts-grid-section.section-container,
body.home .featured-posts-split-wrapper .featured-posts-split-section.section-container,
body.home .mixed-layout-wrapper .mixed-layout-section.section-container {
  margin-top: -15px !important; /* מרווח שלילי - מקטין את המרווח מעל מיכל הכותרת */
  margin-bottom: 40px !important; /* מרווח תחתון - מתחת למיכל הכותרת */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 20px !important;
  width: auto !important;
}

/* תיקון: במיכלים עם רקע, המרווח התחתון צריך להיות על המיכל החיצוני ולא על הפנימי */
body.home .posts-tabs-wrapper.has-background-container .posts-tabs-section,
body.home .posts-vertical-wrapper.has-background-container .posts-vertical-section.section-container,
body.home .posts-horizontal-wrapper.has-background-container .posts-horizontal-section.section-container,
body.home .all-posts-grid-wrapper.has-background-container .all-posts-grid-section.section-container,
body.home .featured-posts-split-wrapper.has-background-container .featured-posts-split-section.section-container,
body.home .mixed-layout-wrapper.has-background-container .mixed-layout-section.section-container {
  margin-bottom: 0 !important;
}

body.home .posts-tabs-wrapper.has-background-container,
body.home .posts-vertical-wrapper.has-background-container,
body.home .posts-horizontal-wrapper.has-background-container,
body.home .all-posts-grid-wrapper.has-background-container,
body.home .featured-posts-split-wrapper.has-background-container,
body.home .mixed-layout-wrapper.has-background-container {
  margin-bottom: 40px !important;
}

/* =====================================
   === חריגים מיוחדים ===
   ===================================== */

/* הבלוק הראשון בעמוד הבית - ללא מרווח עליון */
body.home .homepage-template > *:first-child,
body.home .site-content > *:first-child,
body.home .wp-site-blocks > *:first-child:not(header) {
  margin-top: 0 !important;
}

/* בלוק posts-tabs עם רקע ברוחב מלא */
.posts-tabs-wrapper.with-background-container.full-width-container {
  width: 100vw;
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

body.home .posts-tabs-wrapper.with-background-container.full-width-container {
  max-width: none !important;
  width: 100vw !important;
}

.posts-tabs-wrapper.full-width-container .posts-tabs-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===================================
   === התאמות רספונסיביות ===
   =================================== */

/* טאבלטים */
@media screen and (max-width: 1200px) {
  /* התאמת רוחב למסכים קטנים מ-1200px */
  .posts-tabs-wrapper:not(.full-width-container),
  .posts-vertical-wrapper,
  .posts-horizontal-wrapper,
  .all-posts-grid-wrapper,
  .featured-posts-split-wrapper,
  .mixed-layout-wrapper {
    max-width: 100%;
    padding: 0 20px;
  }
}

/* מובייל */
@media screen and (max-width: 768px) {
  /* כל ה-wrappers מתפרסים לרוחב מלא במובייל (כמו featured-posts-split) */
  body.home .posts-tabs-wrapper:not(.full-width-container),
  body.home .posts-vertical-wrapper,
  body.home .posts-horizontal-wrapper,
  body.home .all-posts-grid-wrapper:not(.full-width-container):not(.has-background-container),
  body.home .mixed-layout-wrapper {
    width: 100vw !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin-left: calc(-1 * (100vw - 100%) / 2) !important;
    margin-right: calc(-1 * (100vw - 100%) / 2) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    transform: none !important;
    padding: 0 !important;
  }
  
  /* ביטול padding של section-container */
  body.home .posts-tabs-wrapper .posts-tabs-section,
  body.home .posts-vertical-wrapper .posts-vertical-section.section-container,
  body.home .posts-horizontal-wrapper .posts-horizontal-section.section-container,
  body.home .all-posts-grid-wrapper:not(.full-width-container):not(.has-background-container) .all-posts-grid-section.section-container,
  body.home .mixed-layout-wrapper .mixed-layout-section.section-container {
    max-width: none !important;
    margin-top: 5px !important; /* ביטול המרווח השלילי - אין מרווח מעל מיכל הכותרת */
    margin-bottom: 20px !important; /* מרווח תחתון - מתחת למיכל הכותרת */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }
  
  /* מיכלי רקע במובייל - מרווח תחתון מוגדל */
  body.home .posts-tabs-wrapper.has-background-container,
  body.home .posts-vertical-wrapper.has-background-container,
  body.home .posts-horizontal-wrapper.has-background-container,
  body.home .all-posts-grid-wrapper.has-background-container,
  body.home .mixed-layout-wrapper.has-background-container {
    margin-bottom: 20px !important; /* מרווח תחתון במובייל למניעת גלישה של באנרים */
  }
  
  /* הכותרות מקבלות padding כמו התוכן */
  body.home .posts-tabs-wrapper .section-title,
  body.home .posts-vertical-wrapper .section-title,
  body.home .posts-horizontal-wrapper .section-title,
  body.home .all-posts-grid-wrapper:not(.full-width-container):not(.has-background-container) .section-title,
  body.home .mixed-layout-wrapper .section-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* התוכן של הבלוקים מקבל padding */
  body.home .posts-tabs-wrapper .posts-tabs-container,
  body.home .posts-vertical-wrapper .posts-vertical-container,
  body.home .posts-horizontal-wrapper .posts-horizontal-container,
  body.home .all-posts-grid-wrapper:not(.full-width-container):not(.has-background-container) .all-posts-grid-container,
  body.home .mixed-layout-wrapper .mixed-layout-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* הוספת padding תחתון לקונטיינרים במובייל (גם ללא מיכל רקע) */
  body.home .posts-vertical-wrapper:not(.has-background-container) .posts-vertical-container {
    padding-bottom: 20px !important;
  }
  
  /* חריג מיוחד: בלוק הכותרת הראשית צמוד לכותרת האתר במובייל */
  .headline-text-image-split,
  body.home .headline-text-image-split:first-child,
  body.home .wp-site-blocks > .headline-text-image-split:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* ביטול כל המרווחים מהאלמנטים המעטפים במובייל */
  body.home .site-content,
  body.home .homepage-template,
  body.home .wp-site-blocks,
  body.home main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* מסכים קטנים מאוד */
@media screen and (max-width: 480px) {
  /* ביטול padding של section-container */
  body.home .posts-tabs-wrapper .posts-tabs-section,
  body.home .posts-vertical-wrapper .posts-vertical-section.section-container,
  body.home .posts-horizontal-wrapper .posts-horizontal-section.section-container,
  body.home .all-posts-grid-wrapper:not(.full-width-container):not(.has-background-container) .all-posts-grid-section.section-container,
  body.home .mixed-layout-wrapper .mixed-layout-section.section-container {
    max-width: none !important;
    margin-top: 5px !important; /* ביטול המרווח השלילי - אין מרווח מעל מיכל הכותרת */
    margin-bottom: 15px !important; /* מרווח תחתון - מתחת למיכל הכותרת */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }
  
  /* מיכלי רקע במסכים קטנים - מרווח תחתון מוגדל */
  body.home .posts-tabs-wrapper.has-background-container,
  body.home .posts-vertical-wrapper.has-background-container,
  body.home .posts-horizontal-wrapper.has-background-container,
  body.home .all-posts-grid-wrapper.has-background-container,
  body.home .mixed-layout-wrapper.has-background-container {
    margin-bottom: 15px !important; /* מרווח תחתון במסכים קטנים למניעת גלישה של באנרים */
  }
  
  /* הכותרות מקבלות padding כמו התוכן */
  body.home .posts-tabs-wrapper .section-title,
  body.home .posts-vertical-wrapper .section-title,
  body.home .posts-horizontal-wrapper .section-title,
  body.home .all-posts-grid-wrapper:not(.full-width-container):not(.has-background-container) .section-title,
  body.home .mixed-layout-wrapper .section-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* התוכן של הבלוקים מקבל padding */
  body.home .posts-tabs-wrapper .posts-tabs-container,
  body.home .posts-vertical-wrapper .posts-vertical-container,
  body.home .posts-horizontal-wrapper .posts-horizontal-container,
  body.home .all-posts-grid-wrapper:not(.full-width-container):not(.has-background-container) .all-posts-grid-container,
  body.home .mixed-layout-wrapper .mixed-layout-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* הוספת padding תחתון לקונטיינרים במסכים קטנים (גם ללא מיכל רקע) */
  body.home .posts-vertical-wrapper:not(.has-background-container) .posts-vertical-container {
    padding-bottom: 15px !important;
  }
  
  /* חריג מיוחד: בלוק הכותרת הראשית צמוד לכותרת האתר במובייל */
  .headline-text-image-split,
  body.home .headline-text-image-split:first-child,
  body.home .wp-site-blocks > .headline-text-image-split:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* ביטול כל המרווחים מהאלמנטים המעטפים במובייל */
  body.home .site-content,
  body.home .homepage-template,
  body.home .wp-site-blocks,
  body.home main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}




/* ===== _headline-text-image-split.css ===== */
/* בלוק כותרת ראשית עם חלוקה לטקסט ותמונה */
.headline-text-image-split {
    position: relative;
    width: 100vw;
    margin-right: calc(-50vw + 50%);
    margin-left: calc(-50vw + 50%);
    margin-top: 0 !important; /* ללא מרווח במובייל */
    margin-bottom: 0;
    padding-top: 0;
}

/* מרווח מהכותרת העליונה רק בדסקטופ */
@media screen and (min-width: 769px) {
    .headline-text-image-split {
        margin-top: 10px !important; /* מרווח מהכותרת העליונה בדסקטופ */
    }
    
    body.home .headline-text-image-split:first-child,
    body.home .wp-site-blocks > .headline-text-image-split:first-child {
        margin-top: 10px !important; /* דורס את margin-top: 0 הגלובלי */
    }
}

.headline-split-container {
    display: flex;
    flex-direction: row; /* סדר טבעי - ימין לשמאל ב-RTL */
    width: 100%;
    max-width: 1200px; /* מגבלת רוחב כמו שאר הבלוקים */
    margin: 0 auto;
    gap: 10px; /* ריווח של 10px בין העמודות */
}

/* עמודת הטקסט - 40% */
.headline-split-text {
    flex: 0 0 calc(40% - 5px); /* 40% פחות מחצית ה-gap */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* מפריד בין התוכן העליון לתחתון */
    padding: 5px var(--space-lg, 2rem) 0 var(--space-lg, 2rem); /* ביטול padding תחתון - המרווחים מנוהלים בקובץ הגלובלי */
}

/* כותרת עילית */
.headline-split-super-link {
    text-decoration: none;
    display: inline-block;
    margin-bottom: 12px;
}

.headline-split-super-title {
    display: inline-block;
    background: #DE0100;
    color: #ffffff;
    padding: 6px 16px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    transition: opacity 0.3s ease;
}

.headline-split-super-link:hover .headline-split-super-title {
    opacity: 0.9;
}

.headline-split-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.headline-split-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0; /* אין מרווח - כותרת המשנה תופיע מיד אחרי */
    color: var(--secondary-color-jhhd, #1B365D);
    transition: color 0.3s ease;
}

.headline-split-link:hover .headline-split-title {
    color: #0f2340; /* גוון כהה יותר של הכחול - שינוי עדין */
}

.headline-split-subtitle {
    font-size: 1.4rem !important;
    line-height: 1.6;
    color: var(--gray-dark, #444444);
    margin: 0.5rem 0 0 0; /* מרווח קטן מהכותרת */
}

/* מידע תחתון - כתב ותאריך */
.headline-split-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    color: var(--gray-medium, #777777);
    margin-top: auto; /* דוחף למטה */
    padding-top: 1rem;
    border-top: 1px solid var(--gray-mild, #e0e0e0);
    width: fit-content; /* רוחב לפי התוכן */
}

.headline-split-author {
    font-weight: 600;
    color: var(--secondary-color-jhhd, #1B365D);
}

.headline-split-date {
    color: var(--gray-medium, #777777);
}

.headline-split-meta-separator {
    color: var(--gray-mild, #e0e0e0);
}

/* עמודת התמונה - 60% */
.headline-split-image-column {
    flex: 0 0 calc(60% - 5px); /* 60% פחות מחצית ה-gap */
    position: relative;
}

.headline-split-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.headline-split-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    /* גובה קבוע ביחס 16:9 */
    padding-top: 56.25%; /* יחס 16:9 (9/16 = 0.5625) */
    overflow: hidden;
    background-color: var(--gray-mild, #e0e0e0);
}

.headline-split-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.headline-split-image-link:hover .headline-split-image {
    transform: scale(1.05);
}

.headline-split-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

/* תצוגת טאבלט */
@media (max-width: 1024px) {
    .headline-split-text {
        padding: 5px var(--space-md, 1.5rem) 0 var(--space-md, 1.5rem); /* ביטול padding תחתון */
    }
    
    .headline-split-title {
        font-size: clamp(1.5rem, 2.5vw, 2rem);
    }
    
    .headline-split-subtitle {
        font-size: 1.15rem !important;
    }
    
    .headline-split-super-title {
        font-size: 15px;
        padding: 5px 14px;
    }
}

/* תצוגת מובייל */
@media (max-width: 768px) {
    /* ביטול המרווח העליון במובייל - התמונה צמודה לכותרת */
    .headline-text-image-split,
    body.home .headline-text-image-split:first-child,
    body.home .wp-site-blocks > .headline-text-image-split:first-child {
        margin-top: -10px !important; /* margin שלילי כדי לבטל לגמרי כל מרווח */
        margin-bottom: 20px !important; /* זהה לגלובלי - ללא הוספה */
        padding-top: 0 !important;
    }
    
    .headline-split-container {
        flex-direction: column;
        gap: 0; /* הסרת הגאפ במובייל */
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* במובייל: התמונה למעלה */
    .headline-split-image-column {
        flex: 0 0 auto;
        width: 100%;
        order: 1;
    }
    
    /* במובייל: הטקסט למטה */
    .headline-split-text {
        flex: 0 0 auto;
        width: 100%;
        order: 2;
        padding: 15px var(--space-md, 1.5rem) 0 var(--space-md, 1.5rem); /* ביטול padding תחתון */
    }
    
    /* במובייל: תמונה ביחס 16:9 */
    .headline-split-image-wrapper {
        padding-top: 56.25%; /* יחס 16:9 */
    }
    
    .headline-split-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        margin: 0; /* אין מרווח */
    }
    
    .headline-split-subtitle {
        font-size: 1.10rem !important;
        line-height: 1.5;
    }
    
    .headline-split-super-link {
        margin-bottom: 15px;
    }
    
    .headline-split-super-title {
        font-size: 14px;
        padding: 5px 12px;
    }
    
    .headline-split-meta {
        font-size: 0.85rem;
        gap: 0.75rem;
    }
}

/* תצוגת מובייל קטן */
@media (max-width: 480px) {
    /* הגדלת המרווח התחתון במסכים קטנים */
    .headline-text-image-split,
    body.home .headline-text-image-split:first-child,
    body.home .wp-site-blocks > .headline-text-image-split:first-child {
        margin-bottom: 15px !important; /* זהה לגלובלי - ללא הוספה */
    }
    
    .headline-split-text {
        padding: 15px var(--space-sm, 1rem) 0 var(--space-sm, 1rem); /* ביטול padding תחתון */
    }
    
    .headline-split-title {
        font-size: 1.25rem;
        margin: 0; /* אין מרווח */
    }
    
    .headline-split-subtitle {
        font-size: 1.05rem !important;
    }
    
    .headline-split-super-link {
        margin-bottom: 15px;
    }
    
    .headline-split-super-title {
        font-size: 13px;
        padding: 4px 10px;
    }
    
    .headline-split-meta {
        font-size: 0.8rem;
        gap: 0.5rem;
        padding-top: 0.75rem;
    }
}



/* ===== _posts-horizontal.css ===== */
/**
 * === בלוק רשימת כתבות אופקית ===
 * הערה: הגדרות רוחב ומרווחים עברו לקובץ הגלובלי _homepage-global-layout.css
 */

/* ביטול padding צידי - הכתבות יתחילו בדיוק מהקצה */
.posts-horizontal-wrapper .posts-horizontal-section.section-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.home .posts-horizontal-wrapper .posts-horizontal-section.section-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* מיכל עוטף למספר שורות */
.posts-horizontal-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  /* gap מוגדר inline בתג HTML מהגדרות המשתמש */
}

/* וידוא מגבלת רוחב גם בעמוד הבית */
body.home .posts-horizontal-wrapper:not(.full-width-container) {
    max-width: 1200px !important;
    margin: 0 auto;
}

/* מיכל רקע חיצוני (אופציונלי) */
.posts-horizontal-wrapper.has-background-container:not(.full-width-container) {
  padding: 40px 20px; /* 40px למעלה ולמטה, 20px בצדדים - כמו בבלוק posts-vertical */
  border-radius: 8px;
}

/* מיכל רקע מלא רוחב */
.posts-horizontal-wrapper.has-background-container.full-width-container {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  max-width: none !important; /* דורס את מגבלת הרוחב */
  border-radius: 0;
  padding: 40px 20px;
  box-sizing: border-box;
  /* margin מוגדר בקובץ הגלובלי */
}

/* התוכן עצמו צריך להישאר ממורכז ומוגבל ברוחב */
.posts-horizontal-wrapper.full-width-container .posts-horizontal-section {
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 !important; /* ללא padding - המרווחים מטופלים ברמת הרכיבים */
}

/* הכותרת במצב מלא רוחב */
.posts-horizontal-wrapper.has-background-container.full-width-container .posts-horizontal-section {
  margin: 0 auto !important;
  padding: 0 !important; /* ללא padding - המרווחים מטופלים ברמת הרכיבים */
}

@media (min-width: 769px) {
    .posts-horizontal-wrapper.has-background-container.full-width-container .posts-horizontal-section .section-title {
        max-width: 1200px;
        margin: 0 auto;
        margin-bottom: var(--space-md);
        padding: 0 20px; /* padding אופקי לכותרת */
        padding-bottom: 0.5rem; /* שמירה על המרווח בין הטקסט לפס כמו בשאר הבלוקים */
        box-sizing: border-box;
    }
    
    /* תיקון מיקום הפס הכחול במצב full-width */
    .posts-horizontal-wrapper.has-background-container.full-width-container .posts-horizontal-section .section-title:after {
        right: 20px; /* התאמת הפס ל-padding של הכותרת */
    }
}

/* הגריד עצמו במצב מלא רוחב */
.posts-horizontal-wrapper.full-width-container .posts-horizontal-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* padding אופקי לכתבות */
}

.posts-horizontal-wrapper.has-border {
  border-style: solid;
}

/* פינות מעוגלות למיכל רקע */
.popular-articles-section.section-container.rounded-container {
  border-radius: 8px;
}

/* מיכל רקע רק במובייל - מוסתר בדסקטופ */
.popular-articles-section.section-container.has-background-mobile-only {
  /* בדסקטופ - ללא רקע ו-padding */
  background: none !important;
  padding: 0 20px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* עקיפה ספציפית בעמוד הבית עבור ה-section */
body.home .popular-articles-section.section-container {
  max-width: 1200px !important;
  width: auto !important;
  /* margin מוגדר בקובץ הגלובלי */
  padding: 0 20px !important;
}

/* שמירת padding מלא כשיש מיכל רקע */
body.home .popular-articles-section.section-container.has-background-container {
  padding: 40px 20px !important; /* 40px למעלה ולמטה, 20px בצדדים */
}

/* התאמת מיכל רק במובייל בדסקטופ */
@media (min-width: 769px) {
  body.home .popular-articles-section.section-container.has-background-mobile-only {
    /* בדסקטופ - קיבול הערכים הרגילים */
    padding: 0 20px !important;
  }
}

/* מיכל הכתבות עם מרווח בין השורות */
.posts-horizontal-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* gap מוגדר inline בתג HTML מהגדרות המשתמש */
}

/* גריד הכתבות האופקיות */
.most-read-articles-grid {
  display: flex;
  flex-direction: row;
  gap: 15px;
  width: 100%;
}

/* התאמה דינמית למספר כתבות - כפיית רוחב מלא */
.most-read-articles-grid[data-columns="2"] .wp-block-column {
  flex: 1 1 calc(50% - 15px / 2);
  max-width: calc(50% - 15px / 2);
  min-width: calc(50% - 15px / 2);
}

.most-read-articles-grid[data-columns="3"] .wp-block-column {
  flex: 1 1 calc(33.333% - 15px * 2 / 3);
  max-width: calc(33.333% - 15px * 2 / 3);
  min-width: calc(33.333% - 15px * 2 / 3);
}

.most-read-articles-grid[data-columns="4"] .wp-block-column {
  flex: 1 1 calc(25% - 15px * 3 / 4);
  max-width: calc(25% - 15px * 3 / 4);
  min-width: calc(25% - 15px * 3 / 4);
}

/* כרטיסיית כתבה - מיכל אחד לתמונה ולטקסט */
.most-read-article {
  display: flex;
  flex-direction: row;
  gap: 0; /* ללא רווח בין התמונה לטקסט */
  width: 100%;
  min-width: 100%; /* כפיית רוחב מלא */
  height: 140px; /* גובה קבוע לכל הכרטיסיות */
  align-items: stretch; /* כדי שהטקסט יתאים לגובה התמונה */
  background: var(--bg-color, #fff);
  transition: all 0.3s ease;
  overflow: visible; /* שינוי ל-visible כדי שהכותרת העילית תוצג בשלמות */
  box-sizing: border-box; /* כדי שהמרווחים לא ישבשו את הרוחב */
}

/* כרטיסיה ריקה - placeholder - שומר על אותה פריסה */
.most-read-article.placeholder {
  opacity: 0.3; /* שקיפות קלה לכרטיסיות ריקות */
  pointer-events: none; /* ביטול אינטראקציה */
  background: #f5f5f5 !important; /* רקע אפור בהיר לכרטיסיות ריקות */
}

/* תמונה בכרטיסיה ריקה */
.most-read-article.placeholder .most-read-image {
  background: #e0e0e0; /* רקע אפור יותר כהה לתמונה */
}

/* טקסט בכרטיסיה ריקה */
.most-read-article.placeholder .most-read-title,
.most-read-article.placeholder .most-read-excerpt,
.most-read-article.placeholder .most-read-meta {
  color: #999 !important; /* צבע טקסט אפור */
}

/* ווידוא שהעמודות תופסות מקום גם כשריקות */
.most-read-articles-grid .wp-block-column {
  flex-shrink: 0; /* מונע כיווץ */
  box-sizing: border-box; /* כולל padding ו-border בחישוב הרוחב */
}

/* מסגרת עדינה (ברירת מחדל) */
.subtle-frame .most-read-article {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* מסגרת רגילה */
.most-read-articles-grid.regular-frame {
  border: none !important; /* וידוא שאין מסגרת על הקונטיינר */
}

.most-read-articles-grid.regular-frame .most-read-article {
  border: var(--frame-border-width, 1px) solid var(--frame-border-color, #e0e0e0) !important;
  box-shadow: none;
}

/* כיוון RTL - תמונה מימין */
.most-read-articles-grid.direction-rtl .most-read-article {
  flex-direction: row-reverse;
}

/* פינות מעוגלות לכרטיסיה */
.most-read-articles-grid.rounded-corners .most-read-article {
  border-radius: 8px;
}

/* Hover effects לפי סגנון מסגרת */
.subtle-frame .most-read-article:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

.most-read-articles-grid.regular-frame .most-read-article:hover {
  transform: translateY(-1px);
  border-color: var(--frame-border-color, #999) !important;
  background: var(--bg-color, #fff);
}

.most-read-image {
  margin: 0;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 100%; /* המיכל יימתח לרוחב העוגן */
  height: 100%; /* גובה מלא של הכרטיסיה */
}

/* אלמנט העוגן הוא פריט ה-flex בפועל */
.most-read-article > .most-read-image-link {
  display: block;
  height: 100%;
  flex-shrink: 0;
}

/* פינות מעוגלות - רק בצד שמאל לתמונה (LTR) */
.most-read-articles-grid.rounded-corners:not(.direction-rtl) .most-read-image {
  border-radius: 8px 0 0 8px;
}

.most-read-articles-grid.rounded-corners:not(.direction-rtl) .most-read-image img {
  border-radius: 8px 0 0 8px;
}

/* פינות מעוגלות - רק בצד ימין לתמונה (RTL) */
.most-read-articles-grid.rounded-corners.direction-rtl .most-read-image {
  border-radius: 0 8px 8px 0;
}

.most-read-articles-grid.rounded-corners.direction-rtl .most-read-image img {
  border-radius: 0 8px 8px 0;
}

/* איפוס מרווחים לאלמנט figure */
.most-read-image.wp-block-image,
.most-read-image-link,
.most-read-image-link > .most-read-image {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
}

.most-read-image figure {
  margin: 0;
  width: 100%;
  height: 100% !important;
  display: block;
}

.most-read-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  transition: var(--transition-default);
  display: block;
}

.most-read-article:hover .most-read-image img {
  transform: scale(1.03);
}

.most-read-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* תופס את כל המקום הנותר */
  min-width: 0; /* מאפשר כיווץ אם צריך */
  justify-content: space-between;
  padding: 5px 16px;
  margin: 0;
  height: 100%;
  overflow: visible; /* שינוי ל-visible כדי שהכותרת העילית תוצג בשלמות */
  box-sizing: border-box;
}

/* כותרת עלית (Super Title) - מעל הכותרת הראשית */
/* מיכל קבוע עם גובה מינימלי כדי שכל הכותרות יתחילו באותו גובה */
.most-read-articles-grid .super-title-container {
    min-height: 32px; /* גובה מינימלי - תופס מקום גם כשריק */
    display: block;
    margin-bottom: 0;
    overflow: visible; /* מאפשר לתוכן להיות גלוי בלי גלילה */
}

.most-read-articles-grid .super-title-link {
    text-decoration: none;
    display: inline-block;
    margin-bottom: 8px;
}

.most-read-articles-grid .super-title-tag {
    display: inline-block;
    background: #DE0100;
    color: #ffffff;
    padding: 3px 8px; /* גרסה מוקטנת */
    font-size: 0.7rem; /* תואם לבלוק כתבות אנכיות */
    font-weight: 600;
    border-radius: 2px;
    line-height: 1.4;
    letter-spacing: 0.2px;
    transition: opacity 0.3s ease;
}

.most-read-articles-grid .super-title-link:hover .super-title-tag {
    opacity: 0.9;
}

/* ללא מסגרת - רקע שקוף */
.most-read-articles-grid.no-frame .most-read-article {
  background: transparent;
  box-shadow: none;
  border: none;
}

.most-read-articles-grid.no-frame .most-read-article:hover {
  transform: translateY(-1px);
  box-shadow: none;
  border: none;
}

.most-read-articles-grid.no-frame:not(.direction-rtl) .most-read-content {
  padding: 0 0 0 12px;
}

.most-read-articles-grid.no-frame.direction-rtl .most-read-content {
  padding: 0 12px 0 0;
}

/* התאמות למיכל כותרת עלית בסגנון no-frame */
.most-read-articles-grid.no-frame .super-title-container {
    min-height: 32px; /* שומר על גובה אחיד גם ב-no-frame */
}

.most-read-articles-grid.no-frame .super-title-link {
    margin-bottom: 12px;
}

/* פינות מעוגלות לטקסט - רק בצד ימין (LTR) */
.most-read-articles-grid.rounded-corners:not(.direction-rtl) .most-read-content {
  border-radius: 0 8px 8px 0;
}

/* פינות מעוגלות לטקסט - רק בצד שמאל (RTL) */
.most-read-articles-grid.rounded-corners.direction-rtl .most-read-content {
  border-radius: 8px 0 0 8px;
}

/* איפוס מרווחים לכותרת h3 */
.most-read-title,
h3.most-read-title {
  font-size: 1.1rem;
  margin: 0 0 var(--space-xs) 0 !important;
  padding: 0;
  line-height: 1.3;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* חזרה ל-2 שורות */
  -webkit-box-orient: vertical;
}

/* תגית קטגוריה הישנה (כבר לא בשימוש - הוחלף בכותרת עילית) */
/* חריג: בבלוק mixed-layout התג בשימוש */
.most-read-articles-grid .most-read-content .category-tag,
.most-read-articles-grid .category-tag {
  display: none; /* מוסתר - לא בשימוש */
}

/* חריג: בבלוק mixed-layout התג צריך להיות מוצג */
.mixed-layout-container .most-read-articles-grid .category-tag {
  display: inline-block !important;
}

.most-read-excerpt {
  display: none;
  font-size: 1rem;
  margin-bottom: var(--space-xs);
}

.most-read-articles-grid .most-read-meta,
.most-read-content .most-read-meta {
  font-size: 0.7rem !important; /* הקטנת גודל פונט ב-30% (מ-1rem ל-0.7rem) */
  color: #666 !important;
  margin-top: auto !important; /* דחיפה לתחתית */
  margin-bottom: 0;
  padding-bottom: 0; /* ביטול המרווח התחתון - המרווחים בין הבלוקים מנוהלים בקובץ הגלובלי */
  line-height: 1.4;
}

.most-read-articles-grid .most-read-meta .separator,
.most-read-content .most-read-meta .separator {
  margin: 0 5px;
  color: #ccc !important;
}

.most-read-articles-grid .most-read-meta .date,
.most-read-content .most-read-meta .date {
  color: #888 !important;
}

/* התאמות למסכים בינוניים */
@media screen and (max-width: 1200px) {
  .most-read-articles-grid[data-columns="4"] .wp-block-column {
    flex-basis: 48% !important;
  }
  
  .most-read-article {
    height: 120px; /* גובה קטן יותר למסכים בינוניים */
  }
  
  .most-read-image {
    width: 160px; /* רוחב קטן יותר */
  }
  
  .most-read-articles-grid[data-aspect-ratio="16:9"] .most-read-image {
    width: 180px;
  }
  
  .most-read-articles-grid[data-aspect-ratio="1:1"] .most-read-image {
    width: 120px;
  }
  
  /* margin-bottom הוסר - מוגדר בקובץ הגלובלי */
}

/* טאבלטים */
@media screen and (max-width: 768px) {
  /* מיכל רקע מלא רוחב בטאבלט */
  .posts-horizontal-wrapper.has-background-container.full-width-container {
    padding: 30px 0;
  }
  
  body.home .posts-horizontal-wrapper.has-background-container.full-width-container {
    width: 100vw !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin-left: calc(-1 * (100vw - 100%) / 2) !important;
    margin-right: calc(-1 * (100vw - 100%) / 2) !important;
    padding: 30px 15px !important;
    border-radius: 0;
    box-sizing: border-box !important;
    transform: none !important; /* ביטול ה-transform מהדסקטופ */
    /* margin מוגדר בקובץ הגלובלי */
  }
  
  .posts-horizontal-wrapper.full-width-container .posts-horizontal-section {
    padding: 0 15px;
  }
  
  .posts-horizontal-wrapper.full-width-container .posts-horizontal-container {
    padding: 0;
  }
  
  /* מיכל רקע רק במובייל - מפעיל בטאבלט */
  .popular-articles-section.section-container.has-background-mobile-only {
    padding: 25px 15px !important;
    background-color: var(--mobile-bg-color, #f5f5f5) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    border-radius: 6px !important;
    box-sizing: border-box;
    max-width: calc(100% - 20px);
    /* margin מוגדר בקובץ הגלובלי */
  }
  
  body.home .popular-articles-section.section-container.has-background-mobile-only {
    padding: 25px 15px !important;
  }
  
  /* ביטול ה-padding הכפול כשיש מיכל רקע רק במובייל */
  .popular-articles-section.section-container.has-background-mobile-only .posts-horizontal-wrapper,
  body.home .popular-articles-section.section-container.has-background-mobile-only .posts-horizontal-wrapper {
    padding: 0 !important; /* ביטול padding כפול כשיש כבר padding במיכל החיצוני */
  }
  
  /* פינות מעוגלות למיכל בטאבלט */
  .popular-articles-section.section-container.has-background-mobile-only.rounded-container {
    border-radius: 8px !important;
  }
  
  /* אם אין פינות מעוגלות */
  .popular-articles-section.section-container.has-background-mobile-only:not(.rounded-container) {
    border-radius: 0 !important;
  }
  
  .most-read-articles-grid {
    flex-wrap: wrap;
  }
  
  /* 2 בשורה בטאבלט */
  .most-read-articles-grid[data-columns="3"] .wp-block-column,
  .most-read-articles-grid[data-columns="4"] .wp-block-column {
    flex-basis: 48% !important;
  }
  
  .most-read-article {
    height: 110px; /* גובה קטן יותר לטאבלטים */
  }
  
  .most-read-image {
    width: 140px;
  }
  
  /* margin-bottom הוסר - מוגדר בקובץ הגלובלי */
}

/* סגנון כהה */
.most-read-articles-grid.style-dark {
  --bg-color: #2a2a2a;
  --text-color: #ffffff;
  --meta-color: #cccccc;
  --separator-color: #666666;
}

/* כותרת עלית בסגנון כהה */
.most-read-articles-grid.style-dark .super-title-tag {
    background: #DE0100;
    color: #ffffff;
}

.most-read-articles-grid.style-dark .super-title-link:hover .super-title-tag {
    opacity: 0.9;
}

.most-read-articles-grid.style-dark .most-read-article {
  background: var(--bg-color);
}

/* מסגרת רגילה בסגנון כהה */
.most-read-articles-grid.style-dark.regular-frame {
  border: none !important; /* וידוא שאין מסגרת על הקונטיינר */
}

.most-read-articles-grid.style-dark.regular-frame .most-read-article {
  border: var(--frame-border-width, 1px) solid var(--frame-border-color, rgba(255, 255, 255, 0.2)) !important;
}

.most-read-articles-grid.style-dark.regular-frame .most-read-article:hover {
  border-color: var(--frame-border-color, rgba(255, 255, 255, 0.4)) !important;
}

.most-read-articles-grid.style-dark .most-read-title,
.most-read-articles-grid.style-dark .most-read-title a {
  color: var(--text-color);
}

.most-read-articles-grid.style-dark .most-read-excerpt {
  color: var(--meta-color);
}

.most-read-articles-grid.style-dark .most-read-meta {
  color: var(--meta-color) !important;
}

.most-read-articles-grid.style-dark .most-read-meta .separator {
  color: var(--separator-color) !important;
}

.most-read-articles-grid.style-dark .most-read-meta .date {
  color: var(--meta-color) !important;
}

/* סגנון בהיר (ברירת מחדל) */
.most-read-articles-grid.style-light {
  --bg-color: #ffffff;
  --text-color: #333333;
  --meta-color: #666666;
  --separator-color: #cccccc;
}

.most-read-articles-grid.style-light .most-read-article {
  background: var(--bg-color);
}

/* כותרת במצב בהיר - צבע secondary-color-jhhd */
.most-read-articles-grid.style-light .most-read-title,
.most-read-articles-grid.style-light .most-read-title a {
  color: var(--secondary-color-jhhd) !important;
  transition: color 0.3s ease;
}

/* כותרת במצב בהיר - צבע primary-color-jhhd בריחוף - specificity מוגברת */
.most-read-articles-grid.style-light .most-read-article .most-read-content .most-read-title a:hover,
.most-read-articles-grid.style-light .most-read-article:hover .most-read-content .most-read-title a,
.most-read-articles-grid.style-light .most-read-title a:hover {
  color: var(--primary-color-jhhd) !important;
}

/* יחסי תמונה - ברירת מחדל וספציפיים (על פריט ה-flex: העוגן) */
/* 16:9 - ברירת מחדל */
.most-read-articles-grid .most-read-image-link {
  aspect-ratio: 16 / 9;
  height: 100% !important;
  flex-basis: calc(140px * (16/9));
}

/* נתמך על ידי data-aspect-ratio ברמת המיכל */
.most-read-articles-grid[data-aspect-ratio="1:1"] .most-read-image-link {
  aspect-ratio: 1 / 1;
  height: 100% !important;
  flex-basis: 140px; /* שווה לגובה הכרטיסיה */
}

.most-read-articles-grid[data-aspect-ratio="3:2"] .most-read-image-link {
  aspect-ratio: 3 / 2;
  height: 100% !important;
  flex-basis: calc(140px * (3/2));
}

.most-read-articles-grid[data-aspect-ratio="4:3"] .most-read-image-link {
  aspect-ratio: 4 / 3;
  height: 100% !important;
  flex-basis: calc(140px * (4/3));
}

.most-read-articles-grid[data-aspect-ratio="16:9"] .most-read-image-link {
  aspect-ratio: 16 / 9;
  height: 100% !important;
  flex-basis: calc(140px * (16/9));
}

/* מובייל */
@media screen and (max-width: 480px) {
  /* תיקון overflow כללי למובייל כדי שהכותרת העילית לא תחתך */
  /* דריסה של WordPress .wp-block-group שמוסיף overflow: hidden */
  .most-read-articles-grid .wp-block-group.most-read-content {
    overflow: visible !important;
  }
  
  .most-read-articles-grid .most-read-content {
    overflow: visible !important;
  }
  
  /* תיקון גם למיכל הכללי */
  .most-read-articles-grid .wp-block-group.most-read-article {
    overflow: visible !important;
  }
  
  /* מיכל רקע מלא רוחב במובייל */
  .posts-horizontal-wrapper.has-background-container.full-width-container {
    padding: 20px 10px !important;
  }
  
  body.home .posts-horizontal-wrapper.has-background-container.full-width-container {
    width: 100vw !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin-left: calc(-1 * (100vw - 100%) / 2) !important;
    margin-right: calc(-1 * (100vw - 100%) / 2) !important;
    transform: none !important;
    /* margin מוגדר בקובץ הגלובלי */
  }
  
  /* התאמת המיכל העוטף למובייל */
  .posts-horizontal-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    /* gap כבר מוגדר inline בתג HTML אבל נדרוס אותו למובייל */
    gap: 0 !important;
    /* margin מוגדר בקובץ הגלובלי */
  }
  
  /* מרווח בין שורות (כל שורה היא most-read-articles-grid) */
  .posts-horizontal-wrapper .most-read-articles-grid:not(:last-child) {
    margin-bottom: 10px !important; /* אותו מרווח כמו בין הכתבות - לשנות ביחד עם שורה 438 */
  }
  
  /* התאמת כל שורת כתבות למובייל */
  .most-read-articles-grid {
    flex-direction: column !important; /* שינוי לכיוון אנכי */
    width: 100% !important;
    gap: 0px !important; /* רווח בין כתבות - ניתן לשינוי בקלות */
  }
  
  .most-read-articles-grid .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important; /* איפוס margin */
    padding: 0 !important; /* איפוס padding */
  }
  
  /* רווח בין כתבות - שימוש ב-margin-bottom במקום gap */
  .most-read-articles-grid .wp-block-column:not(:last-child) {
    margin-bottom: 10px !important; /* רווח בין כתבות - לשנות ביחד עם שורה 418 (רווח בין שורות) */
  }
  
  /* איפוס כללי של margins לכל הכרטיסיות */
  .most-read-articles-grid .most-read-article {
    margin: 0 !important;
  }
  
  /* === כתבה ראשונה - פריסה אנכית (תמונה מעל, טקסט מתחת) === */
  .most-read-articles-grid .wp-block-column:first-child .most-read-article {
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
  }
  
  .most-read-articles-grid .wp-block-column:first-child .most-read-image-link {
    aspect-ratio: unset !important;
    flex-basis: unset !important;
    width: 100% !important;
    height: 200px !important;
  }
  
  .most-read-articles-grid .wp-block-column:first-child .most-read-image {
    width: 100% !important;
    height: 200px !important;
    margin: 0;
  }
  
  .most-read-articles-grid .wp-block-column:first-child .most-read-content {
    width: 100%;
    padding: 12px !important;
    height: auto;
    overflow: visible; /* שינוי ל-visible כדי שהכותרת העילית לא תחתך */
  }
  
  /* מיכל כותרת עילית בכתבה הראשונה במובייל */
  .most-read-articles-grid .wp-block-column:first-child .super-title-container {
    min-height: 35px; /* גובה מעט גדול יותר לכתבה הראשונה */
    overflow: visible; /* מאפשר לתוכן להיות גלוי בלי גלילה */
  }
  
  .most-read-articles-grid .wp-block-column:first-child .super-title-tag {
    font-size: 0.7rem; /* קצת יותר גדול בכתבה הראשונה */
    padding: 4px 10px;
  }
  
  /* פינות מעוגלות לכתבה הראשונה */
  .most-read-articles-grid.rounded-corners .wp-block-column:first-child .most-read-image,
  .most-read-articles-grid.rounded-corners .wp-block-column:first-child .most-read-image img {
    border-radius: 8px 8px 0 0 !important;
  }
  
  .most-read-articles-grid.rounded-corners .wp-block-column:first-child .most-read-content {
    border-radius: 0 0 8px 8px !important;
  }
  
  /* === כל שאר הכתבות - פריסה אופקית (תמונה לצד טקסט) === */
  .most-read-articles-grid .wp-block-column:not(:first-child) .most-read-article {
    flex-direction: row !important; /* תמונה לצד טקסט */
    min-height: 120px !important; /* גובה מינימלי מוגדל ל-120px למקום לכותרת עילית */
    height: auto !important; /* גובה אוטומטי מתאים לתוכן */
    width: 100% !important;
  }
  
  /* עבור כיוון RTL - הפוך את הסדר */
  .most-read-articles-grid.direction-rtl .wp-block-column:not(:first-child) .most-read-article {
    flex-direction: row-reverse !important;
  }
  
  .most-read-articles-grid .wp-block-column:not(:first-child) .most-read-image-link {
    flex-basis: 120px !important; /* רוחב מוגדל ל-120px */
    width: 120px !important;
    min-height: 120px !important; /* גובה מינימלי מוגדל ל-120px */
    height: 100% !important; /* גובה מלא של המיכל */
    flex-shrink: 0;
  }
  
  .most-read-articles-grid .wp-block-column:not(:first-child) .most-read-image {
    width: 120px !important;
    height: 100% !important; /* גובה מלא של המיכל */
    margin: 0;
  }
  
  /* וידוא ש-figure ו-img ממלאים את כל הגובה */
  .most-read-articles-grid .wp-block-column:not(:first-child) .most-read-image figure,
  .most-read-articles-grid .wp-block-column:not(:first-child) .most-read-image.wp-block-image {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  
  .most-read-articles-grid .wp-block-column:not(:first-child) .most-read-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  
  .most-read-articles-grid .wp-block-column:not(:first-child) .most-read-content {
    flex: 1;
    padding: 8px 12px !important;
    height: 100%;
    overflow: visible; /* שינוי ל-visible כדי שהכותרת העילית לא תחתך */
  }
  
  /* מיכל כותרת עילית בכתבות האופקיות במובייל */
  .most-read-articles-grid .wp-block-column:not(:first-child) .super-title-container {
    min-height: 28px; /* גובה מתאים לכותרת עילית בלי גלילה - תואם לבלוק האנכי */
    overflow: visible; /* מאפשר לתוכן להיות גלוי בלי גלילה */
  }
  
  .most-read-articles-grid .wp-block-column:not(:first-child) .super-title-tag {
    font-size: 0.58rem; /* גודל קטן מאוד */
    padding: 2px 6px;
  }
  
  /* הקטנת גודל הכותרת בכתבות האופקיות */
  .most-read-articles-grid .wp-block-column:not(:first-child) .most-read-title {
    font-size: 1rem;
    -webkit-line-clamp: 2;
  }
  
  /* הסתרת תג הקטגוריה בכתבות האופקיות במובייל */
  .most-read-articles-grid .wp-block-column:not(:first-child) .category-tag {
    display: none !important;
  }
  
  /* חריג: בבלוק mixed-layout התג מוצג גם במובייל */
  .mixed-layout-container .most-read-articles-grid .wp-block-column .category-tag {
    display: inline-block !important;
  }
  
  /* פינות מעוגלות לכתבות האופקיות */
  .most-read-articles-grid.rounded-corners:not(.direction-rtl) .wp-block-column:not(:first-child) .most-read-image,
  .most-read-articles-grid.rounded-corners:not(.direction-rtl) .wp-block-column:not(:first-child) .most-read-image img {
    border-radius: 8px 0 0 8px !important;
  }
  
  .most-read-articles-grid.rounded-corners:not(.direction-rtl) .wp-block-column:not(:first-child) .most-read-content {
    border-radius: 0 8px 8px 0 !important;
  }
  
  /* פינות מעוגלות לכתבות האופקיות - כיוון RTL */
  .most-read-articles-grid.rounded-corners.direction-rtl .wp-block-column:not(:first-child) .most-read-image,
  .most-read-articles-grid.rounded-corners.direction-rtl .wp-block-column:not(:first-child) .most-read-image img {
    border-radius: 0 8px 8px 0 !important;
  }
  
  .most-read-articles-grid.rounded-corners.direction-rtl .wp-block-column:not(:first-child) .most-read-content {
    border-radius: 8px 0 0 8px !important;
  }
  
  /* ללא מסגרת במובייל */
  .most-read-articles-grid.no-frame .wp-block-column:first-child .most-read-content {
    padding: 12px 0 !important;
  }
  
  .most-read-articles-grid.no-frame:not(.direction-rtl) .wp-block-column:not(:first-child) .most-read-content {
    padding: 0 0 0 8px !important;
  }
  
  .most-read-articles-grid.no-frame.direction-rtl .wp-block-column:not(:first-child) .most-read-content {
    padding: 0 8px 0 0 !important;
  }
  
  /* התאמת המיכל החיצוני במובייל */
  .popular-articles-section.section-container {
    max-width: 100% !important;
    padding: 0 15px !important;
    /* margin מוגדר בקובץ הגלובלי */
  }
  
  body.home .popular-articles-section.section-container {
    max-width: 100% !important;
    padding: 0 15px !important;
    /* margin מוגדר בקובץ הגלובלי */
  }
  
  /* שמירת padding כשיש מיכל רקע */
  body.home .popular-articles-section.section-container.has-background-container {
    padding: 20px 15px !important;
    /* margin מוגדר בקובץ הגלובלי */
  }

  /* ביטול ה-padding הכפול כשיש מיכל רקע */
  .popular-articles-section.section-container.has-background-container .posts-horizontal-wrapper,
  body.home .popular-articles-section.section-container.has-background-container .posts-horizontal-wrapper {
    padding: 0 !important; /* ביטול padding כפול כשיש כבר padding במיכל החיצוני */
  }
  
  /* ביטול padding כפול מה-container כשיש רקע */
  .popular-articles-section.section-container.has-background-container .posts-horizontal-container,
  body.home .popular-articles-section.section-container.has-background-container .posts-horizontal-container {
    padding: 0 !important;
  }
  

  
  /* margin מוגדר בקובץ הגלובלי */
}


/* ===== _posts-vertical.css ===== */
/* בלוק כתבות אנכיות */
/* הערה: הגדרות רוחב ומרווחים עברו לקובץ הגלובלי _homepage-global-layout.css */

/* ביטול padding צידי לבלוק זה - כדי שהכתבות יתחילו בדיוק מהקצה */
.posts-vertical-wrapper .posts-vertical-section.section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.home .posts-vertical-wrapper .posts-vertical-section.section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Wrapper ראשי */
.posts-vertical-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

/* מיכל רקע */
.posts-vertical-wrapper.has-background-container {
    padding: 40px 25px 25px 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box; /* padding נספר בתוך מגבלת הרוחב */
}

/* ביטול הרקע האדום של הכותרת כשיש מיכל רקע */
.posts-vertical-wrapper.has-background-container .section-title {
    background-color: transparent !important;
    color: #FAFAFA !important;
    font-size: 2rem !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* מסגרת למיכל */
.posts-vertical-wrapper.has-border {
    border-style: solid;
}

/* פינות מעוגלות למיכל רקע - לא למיכל רוחב מלא */
.posts-vertical-wrapper.rounded-container:not(.full-width-container) {
    border-radius: 8px;
}

/* מיכל רקע רק במובייל - מוסתר בדסקטופ */
.posts-vertical-wrapper.has-background-mobile-only {
    /* בדסקטופ - ללא רקע ו-padding */
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* מיכל רקע ברוחב מלא */
.posts-vertical-wrapper.has-background-container.full-width-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    max-width: none !important; /* דורס את מגבלת הרוחב */
    border-radius: 0;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* התאמת התוכן הפנימי במיכל רוחב מלא */
.posts-vertical-wrapper.full-width-container .posts-vertical-section {
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0 20px;
}

/* התאמת section במיכל רוחב מלא */
.posts-vertical-wrapper.has-background-container.full-width-container .posts-vertical-section {
    margin: 0 auto !important;
    padding: 0 !important;
}

/* תיקון יישור הכותרת במיכל רוחב מלא - רק בדסקטופ */
@media (min-width: 769px) {
    .posts-vertical-wrapper.has-background-container.full-width-container .posts-vertical-section .section-title {
        max-width: 1200px;
        margin: 0 auto;
        margin-bottom: var(--space-md);
        padding: 0 20px;
        padding-bottom: 0.5rem; /* שמירה על המרווח המקורי בין הטקסט לפס */
        box-sizing: border-box;
    }
    
    /* תיקון יישור הפס מתחת לכותרת במיכל רוחב מלא */
    .posts-vertical-wrapper.has-background-container.full-width-container .posts-vertical-section .section-title:after {
        right: 20px;
    }
}

/* וידוא שה-container עצמו ממורכז */
.posts-vertical-wrapper.full-width-container .posts-vertical-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* עוקף את הכללים הגלובליים של עמוד הבית */
body.home .posts-vertical-wrapper:not(.full-width-container) {
    max-width: 1200px !important;
    width: auto !important;
}

/* מיכל ברוחב מלא - עוקף הגבלות */
body.home .posts-vertical-wrapper.full-width-container {
    max-width: none !important;
    width: 100vw !important;
}

/* התאמה כשיש מיכל רקע רגיל (לא רוחב מלא) */
body.home .posts-vertical-wrapper.has-background-container:not(.full-width-container) {
    max-width: 1200px !important; /* המיכל עצמו מוגבל, ה-padding בתוך ה-1200 */
    width: auto !important;
}

body.home .posts-vertical-section {
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: auto !important;
}

/* התאמה כשיש מיכל רקע רגיל (לא רוחב מלא) */
.posts-vertical-wrapper.has-background-container:not(.full-width-container) .posts-vertical-section {
    margin: 0 !important;
    padding: 0 !important;
}

/* התאמת section כשהמיכל רק במובייל - בדסקטופ */
@media (min-width: 769px) {
    .posts-vertical-wrapper.has-background-mobile-only .posts-vertical-section {
        /* בדסקטופ - חוזר להתנהגות רגילה */
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
}

/* התאמת section כשהמיכל רק במובייל - במובייל */
@media (max-width: 768px) {
    .posts-vertical-wrapper.has-background-mobile-only .posts-vertical-section {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* מיכל רקע ברוחב מלא במובייל - פתרון פשוט */
    body.home .posts-vertical-wrapper.has-background-container.full-width-container {
        width: 100vw !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        margin-left: calc(-1 * (100vw - 100%) / 2) !important;
        margin-right: calc(-1 * (100vw - 100%) / 2) !important;
        padding: 20px 15px !important; /* הוספת padding אופקי למיכל עצמו */
        border-radius: 0;
        box-sizing: border-box !important;
        transform: none !important; /* ביטול ה-transform מהדסקטופ */
    }
    
    body.home .posts-vertical-wrapper.full-width-container .posts-vertical-section {
        padding: 0 !important; /* ביטול padding כי הוא כבר במיכל */
        max-width: 100%;
        margin: 0 auto;
    }
    
    body.home .posts-vertical-wrapper.full-width-container .posts-vertical-container {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
}

.posts-vertical-section {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1200px;
}

/* הכותרת משתמשת בעיצוב המשותף מקובץ _homepage-common.css */

/* קונטיינר הגריד */
.posts-vertical-container {
    display: grid;
    gap: var(--grid-gap, 15px);
    margin: 0 auto;
}

/* וידוא שאין מסגרת על המיכל בכל מצב, במיוחד ב-regular-frame */
.posts-vertical-container,
.posts-vertical-container.regular-frame,
.posts-vertical-container.style-dark.regular-frame {
    border: none !important;
    outline: none !important;
    box-shadow: none;
}

/* הגדרת מספר עמודות לפי data attribute */
.posts-vertical-container[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.posts-vertical-container[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.posts-vertical-container[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.posts-vertical-container[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
}

/* כרטיסיית כתבה */
.article-card-square {
    background: var(--cards-bg-color, #fff);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* מסגרת עדינה (ברירת מחדל) */
.subtle-frame .article-card-square {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* מסגרת רגילה */
.regular-frame .article-card-square {
    border: var(--frame-border-width, 1px) solid var(--frame-border-color, #e0e0e0);
    box-shadow: none;
}

/* פינות מעוגלות */
.rounded-corners .article-card-square {
    border-radius: 8px;
}

.rounded-corners .square-image-container {
    border-radius: 8px 8px 0 0;
}

/* Hover effects לפי סגנון מסגרת */
.subtle-frame .article-card-square:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

.regular-frame .article-card-square:hover {
    transform: translateY(-3px);
    border-color: var(--frame-border-color, #c0c0c0);
    background: var(--cards-bg-color, #fff);
    filter: brightness(0.9);
}

/* קונטיינר לתמונה */
.square-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: var(--aspect-ratio, 1 / 1); /* יחס דינמי עם ברירת מחדל 1:1 */
    overflow: hidden;
    background-color: #f0f0f0;
}

.square-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* חיתוך התמונה למילוי הריבוע */
    object-position: center; /* מרכוז התמונה */
    transition: transform 0.3s ease;
}

.article-card-square:hover .square-image-container img {
    transform: scale(1.05);
}

/* תוכן הכתבה */
.article-content {
    padding: 12px 20px 0px 20px; /* ביטול המרווח התחתון לחלוטין */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* כותרת עלית (Super Title) - מעל הכותרת הראשית */
/* מיכל קבוע עם גובה מינימלי כדי שכל הכותרות יתחילו באותו גובה */
.posts-vertical-container .super-title-container {
    min-height: 32px; /* גובה מינימלי - תופס מקום גם כשריק */
    display: block;
    margin-bottom: 0;
}

.posts-vertical-container .super-title-link {
    text-decoration: none;
    display: inline-block;
    margin-bottom: 12px;
}

.posts-vertical-container .super-title-tag {
    display: inline-block;
    background: #DE0100;
    color: #ffffff;
    padding: 4px 10px; /* גרסה מוקטנת */
    font-size: 0.7rem; /* גודל קטן יותר */
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    transition: opacity 0.3s ease;
}

.posts-vertical-container .super-title-link:hover .super-title-tag {
    opacity: 0.9;
}

/* תגית קטגוריה הישנה (כבר לא בשימוש - הועבר ל-category-tag-meta) */
/* השארנו לתאימות לאחור במקרה של קוד ישן */
.posts-vertical-container .category-tag {
    display: none; /* מוסתר - לא בשימוש */
}

.article-card-square .article-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 12px 0;
    color: var(--secondary-color-jhhd, #8B4513);
    transition: color 0.2s ease;
    
    /* גובה קבוע של 3 שורות */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.2em; /* 3 שורות * 1.4 line-height */
}

.article-card-square a {
    text-decoration: none;
    color: inherit;
}

/* אפקט hover בוטל - הכותרת נשארת באותו צבע */
.article-card-square a:hover .article-title {
    color: inherit !important; /* שומר על הצבע המקורי */
    text-decoration: none !important;
    border-bottom: none !important;
}

.article-card-square a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* מטא-דאטה - מחבר ותאריך */
.posts-vertical-container .article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
    margin-bottom: 10px; /* הגדלת המרווח התחתון ב-10px */
    line-height: 1.2;
    flex-wrap: nowrap; /* וידוא שהתוכן נשאר בשורה אחת */
}

/* תג קטגוריה בשורת המטא-דטא */
.posts-vertical-container .article-meta .category-tag-meta {
    display: inline-block;
    background-color: transparent !important;
    color: var(--primary-color-jhhd) !important;
    border: 1px solid var(--primary-color-jhhd) !important;
    padding: 2px 6px; /* גרסה מוקטנת מאוד */
    border-radius: 2px;
    font-size: 0.65rem; /* גודל קטן מאוד כדי להתאים לשורה */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap; /* מונע שבירת שורה */
    flex-shrink: 0; /* מונע התכווצות */
}

.posts-vertical-container .article-meta .category-tag-meta:hover {
    background-color: var(--primary-color-jhhd) !important;
    color: #fff !important;
    border-color: var(--primary-color-jhhd) !important;
    transform: translateY(-1px);
}

.posts-vertical-container .article-meta .author-name {
    font-weight: 500;
    color: #888; /* התאמה לצבע התאריך */
    white-space: nowrap; /* מונע שבירת שורה */
}

.posts-vertical-container .article-meta .meta-separator {
    color: #ccc;
    margin: 0 2px;
    flex-shrink: 0; /* מונע התכווצות */
}

.posts-vertical-container .article-meta .publish-date {
    color: #888;
    white-space: nowrap; /* מונע שבירת שורה */
}

/* כרטיסיות placeholder */
.article-card-square.placeholder {
    opacity: 0.5;
    pointer-events: none;
}

.article-card-square.placeholder .square-image-container {
    background-color: #e0e0e0;
}

.article-card-square.placeholder img {
    opacity: 0.3;
}

/* רספונסיביות */
@media (max-width: 1024px) {
    .posts-vertical-container[data-columns="6"] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .posts-vertical-container[data-columns="5"] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* התאמת מיכל רקע בטאבלט */
    .posts-vertical-wrapper.has-background-container {
        padding: 30px 15px;
    }
}

@media (max-width: 768px) {
    /* הקטנת מרווח תחתון במובייל */
    .posts-vertical-wrapper .posts-vertical-section.section-container,
    body.home .posts-vertical-wrapper .posts-vertical-section.section-container {
        margin-bottom: 15px !important; /* הקטנה ב-5px מהגלובלי (20px - 5px) */
    }
    
    /* הקטנה נוספת של 5px כשאין מיכל רקע */
    .posts-vertical-wrapper:not(.has-background-container):not(.has-background-mobile-only) .posts-vertical-section.section-container,
    body.home .posts-vertical-wrapper:not(.has-background-container):not(.has-background-mobile-only) .posts-vertical-section.section-container {
        margin-top: 5px !important; /* מרווח מעל הכותרת - תואם לכלל הגלובלי */
        margin-bottom: 8px !important; /* הקטנה נוספת של 5px (15px - 5px) */
    }
    
    /* הוספת מרווח עליון לכותרת של הבלוק שאחרי פוסטים אנכיים */
    .posts-vertical-wrapper ~ * .section-title:first-of-type,
    body.home .posts-vertical-wrapper ~ * .section-title:first-of-type {
        margin-top: 14px !important; /* הזזת הכותרת למטה כדי למנוע חפיפה */
    }
    
    .posts-vertical-container[data-columns="6"],
    .posts-vertical-container[data-columns="5"],
    .posts-vertical-container[data-columns="4"] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .posts-vertical-container {
        gap: 15px;
    }
    
    .article-card-square .article-title {
        font-size: 1rem;
    }
    
    /* התאמת מיכל רקע במובייל */
    .posts-vertical-wrapper.has-background-container {
        padding: 25px 12px 35px 12px; /* מרווח תחתון מוגדל ל-35px למניעת גלישה */
        margin-top: 8px; /* מרווח ריק של 8px מעל מיכל הרקע */
        margin-bottom: 8px; /* מרווח ריק של 8px אחרי מיכל הרקע */
        border-radius: 6px;
    }
    
    /* מיכל רקע רק במובייל - מפעיל במובייל */
    .posts-vertical-wrapper.has-background-mobile-only {
        padding: 25px 12px 35px 12px !important; /* מרווח תחתון מוגדל ל-35px למניעת גלישה */
        margin-top: 8px !important; /* מרווח ריק של 8px מעל מיכל הרקע */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 8px !important; /* מרווח ריק של 8px אחרי מיכל הרקע */
        background-color: var(--mobile-bg-color, #f5f5f5) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
        border-radius: 6px !important;
        box-sizing: border-box;
        max-width: calc(100% - 20px);
    }
    
    /* פינות מעוגלות למיכל במובייל */
    .posts-vertical-wrapper.has-background-mobile-only.rounded-container {
        border-radius: 8px !important;
    }
    
    /* אם אין פינות מעוגלות */
    .posts-vertical-wrapper.has-background-mobile-only:not(.rounded-container) {
        border-radius: 0 !important;
    }
    
    body.home .posts-vertical-wrapper.has-background-container {
        max-width: calc(100% - 20px) !important;
        margin-top: 8px !important; /* מרווח ריק של 8px מעל מיכל הרקע */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 8px !important; /* מרווח ריק של 8px אחרי מיכל הרקע */
    }
}

@media (max-width: 600px) {
    .posts-vertical-container[data-columns="6"],
    .posts-vertical-container[data-columns="5"],
    .posts-vertical-container[data-columns="4"],
    .posts-vertical-container[data-columns="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* התאמת מיכל רקע רק במובייל במסכים קטנים */
    .posts-vertical-wrapper.has-background-mobile-only {
        padding: 20px 10px 30px 10px !important; /* מרווח תחתון מוגדל ל-30px למניעת גלישה */
        max-width: calc(100% - 10px);
        margin-top: 8px !important; /* מרווח ריק של 8px מעל מיכל הרקע */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 8px !important; /* מרווח ריק של 8px אחרי מיכל הרקע */
    }
    
    /* מרווחים למיכל רוחב מלא במובייל קטן */
    body.home .posts-vertical-wrapper.has-background-container.full-width-container {
        padding: 20px 10px !important; /* padding קטן יותר במסכים קטנים */
    }
    
    /* התאמת פינות מעוגלות במסכים קטנים */
    .posts-vertical-wrapper.has-background-mobile-only.rounded-container {
        border-radius: 6px !important;
    }
    
    /* הכתבה הראשונה תופסת את כל הרוחב במובייל */
    .posts-vertical-container .grid-item:first-child {
        grid-column: span 2;
    }
    
    /* עיצוב ייחודי לכתבה הראשונה במובייל */
    .posts-vertical-container.subtle-frame .grid-item:first-child .article-card-square {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .posts-vertical-container.regular-frame .grid-item:first-child .article-card-square {
        border-width: calc(var(--frame-border-width, 1px) + 1px);
        border-color: var(--frame-border-color, #d0d0d0);
    }
    
    /* תמונה גדולה יותר לכתבה הראשונה */
    .posts-vertical-container .grid-item:first-child .square-image-container {
        aspect-ratio: 16 / 9; /* יחס רחב יותר לכתבה הראשונה */
    }
    
    /* הגדלת הכותרת של הכתבה הראשונה */
    .posts-vertical-container .grid-item:first-child .article-title {
        font-size: 1.4rem;
        font-weight: 700;
        -webkit-line-clamp: 4; /* 4 שורות בכתבה הראשונה במובייל */
        min-height: auto; /* ביטול גובה מינימלי שיצר מרווח מיותר */
        margin-bottom: 8px; /* הקטנת המרווח התחתון משמעותית */
    }
    
    /* הגדלת התוכן של הכתבה הראשונה */
    .posts-vertical-container .grid-item:first-child .article-content {
        padding: 20px 20px 0px 20px; /* ביטול המרווח התחתון לחלוטין */
    }
    
    /* מיכל כותרת עלית בכתבה הראשונה במובייל */
    .posts-vertical-container .grid-item:first-child .super-title-container {
        min-height: 38px; /* גובה מעט גדול יותר בכתבה הראשונה */
    }
    
    /* כותרת עלית גדולה יותר בכתבה הראשונה */
    .posts-vertical-container .grid-item:first-child .super-title-tag {
        font-size: 0.75rem; /* קצת יותר גדול בכתבה הראשונה */
        padding: 5px 12px;
    }
    
    /* תג קטגוריה במטא-דטא בכתבה הראשונה במובייל */
    .posts-vertical-container .grid-item:first-child .article-meta .category-tag-meta {
        font-size: 0.68rem; /* קצת יותר גדול */
        padding: 2px 7px;
    }
    
    /* מטא-דאטה בכתבה הראשונה במובייל */
    .posts-vertical-container .grid-item:first-child .article-meta {
        font-size: 0.72rem; /* הקטנה ב-20% מ-0.9rem */
        margin-top: 12px;
        gap: 10px;
    }
    
    .posts-vertical-container .grid-item:first-child .article-meta .author-name {
        font-weight: 600;
    }
    
    /* הסתרת הכתבה האחרונה כאשר יש מספר זוגי של כתבות (ללא הראשונה) */
    .posts-vertical-container.hide-last-mobile .grid-item:last-child {
        display: none;
    }
    
    .posts-vertical-container {
        gap: 10px; /* הקטנת הרווח בין הכרטיסיות במובייל */
        padding-bottom: 20px; /* הוספת מרווח תחתון לגריד במובייל */
    }
    
    .posts-vertical-container .article-content {
        padding: 15px;
        padding-bottom: 0px; /* ביטול המרווח התחתון לחלוטין */
    }
    
    /* הקטנת padding לכרטיסיות הקטנות (לא הראשונה) */
    .posts-vertical-container .grid-item:not(:first-child) .article-content {
        padding: 12px 10px 0px 10px; /* ביטול המרווח התחתון לחלוטין */
    }
    
    /* מטא-דאטה בכרטיסיות הקטנות במובייל */
    .posts-vertical-container .grid-item:not(:first-child) .article-meta {
        font-size: 0.6rem; /* הקטנה ב-20% מ-0.75rem */
        margin-top: 6px;
        gap: 6px;
    }
    
    /* התאמות נוספות למסכים קטנים במיוחד (אייפון SE וכדומה) */
    @media (max-width: 380px) {
        .posts-vertical-container {
            gap: 8px; /* רווח קטן עוד יותר */
        }
        
        .posts-vertical-container .grid-item:not(:first-child) .article-content {
            padding: 10px 8px 0px 8px; /* ביטול המרווח התחתון לחלוטין */
        }
        
        .posts-vertical-container .grid-item:not(:first-child) .article-title {
            font-size: 1rem; /* כותרת קטנה יותר */
        }
        
        /* מיכל כותרת עלית בכרטיסיות הקטנות במסכים קטנים */
        .posts-vertical-container .grid-item:not(:first-child) .super-title-container {
            min-height: 28px; /* גובה קטן יותר לכרטיסיות קטנות */
        }
        
        /* כותרת עלית בכרטיסיות הקטנות במסכים קטנים */
        .posts-vertical-container .grid-item:not(:first-child) .super-title-tag {
            font-size: 0.6rem;
            padding: 3px 7px;
        }
        
        /* תג קטגוריה במטא-דטא בכרטיסיות הקטנות במסכים קטנים */
        .posts-vertical-container .grid-item:not(:first-child) .article-meta .category-tag-meta {
            font-size: 0.58rem;
            padding: 1px 5px;
        }
        
        /* מטא-דאטה במסכים קטנים מאוד */
        .posts-vertical-container .grid-item:not(:first-child) .article-meta {
            font-size: 0.56rem; /* הקטנה ב-20% מ-0.7rem */
            margin-top: 4px;
            gap: 4px;
        }
        
        .posts-vertical-container .grid-item:first-child .article-meta {
            font-size: 0.68rem; /* הקטנה ב-20% מ-0.85rem */
            margin-top: 8px;
            gap: 8px;
        }
        
        /* וודא שהכרטיסיות לא גולשות */
        .posts-vertical-container .grid-item {
            min-width: 0; /* מאפשר לכרטיסיות להתכווץ */
        }
        
        .posts-vertical-wrapper {
            overflow-x: hidden; /* מונע גלילה אופקית */
        }
    }
    
    /* התאמת מיכל רקע במסכים קטנים */
    .posts-vertical-wrapper.has-background-container {
        padding: 20px 10px 30px 10px; /* מרווח תחתון מוגדל ל-30px למניעת גלישה */
        margin-top: 8px; /* מרווח ריק של 8px מעל מיכל הרקע */
        margin-bottom: 8px; /* מרווח ריק של 8px אחרי מיכל הרקע */
    }
    
    /* התאמת מיכל רקע רק במובייל במסכים קטנים מאוד */
    .posts-vertical-wrapper.has-background-mobile-only {
        padding: 18px 10px !important;
    }
}

@media (max-width: 480px) {
    /* הקטנת מרווח תחתון במסכים קטנים */
    .posts-vertical-wrapper .posts-vertical-section.section-container,
    body.home .posts-vertical-wrapper .posts-vertical-section.section-container {
        margin-bottom: 10px !important; /* הקטנה ב-5px מהגלובלי (15px - 5px) */
    }
    
    /* הקטנה נוספת של 5px כשאין מיכל רקע */
    .posts-vertical-wrapper:not(.has-background-container):not(.has-background-mobile-only) .posts-vertical-section.section-container,
    body.home .posts-vertical-wrapper:not(.has-background-container):not(.has-background-mobile-only) .posts-vertical-section.section-container {
        margin-top: 5px !important; /* מרווח מעל הכותרת - תואם לכלל הגלובלי */
        margin-bottom: 5px !important; /* הקטנה נוספת של 5px (10px - 5px) */
    }
    
    /* הוספת מרווח עליון לכותרת של הבלוק שאחרי פוסטים אנכיים */
    .posts-vertical-wrapper ~ * .section-title:first-of-type,
    body.home .posts-vertical-wrapper ~ * .section-title:first-of-type {
        margin-top: 14px !important; /* הזזת הכותרת למטה כדי למנוע חפיפה */
    }
}

@media (max-width: 300px) {
    /* רק במסכים קטנים במיוחד - עמודה אחת */
    .posts-vertical-container {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    /* במסכים קטנים מאוד, הכתבה הראשונה כבר תופסת את כל הרוחב בגלל עמודה אחת */
    .posts-vertical-container .grid-item:first-child {
        grid-column: span 1; /* ביטול ה-span 2 מה-media query הקודם */
    }
    
    /* הסתרת הכתבה האחרונה במסכים קטנים מאוד - אותה לוגיקה */
    .posts-vertical-container.hide-last-mobile .grid-item:last-child {
        display: none;
    }
    
    /* מטא-דאטה במסכים קטנים מאוד (מתחת ל-300px) */
    .posts-vertical-container .article-meta {
        font-size: 0.6rem; /* הקטנה ב-20% מ-0.75rem */
        margin-top: 6px;
        gap: 6px;
    }
    
    /* התאמת מיכל רקע במסכים קטנים מאוד */
    .posts-vertical-wrapper.has-background-container {
        padding: 15px 8px 25px 8px; /* מרווח תחתון מוגדל ל-25px למניעת גלישה */
        margin-top: 8px; /* מרווח ריק של 8px מעל מיכל הרקע */
        margin-bottom: 8px; /* מרווח ריק של 8px אחרי מיכל הרקע */
        border-radius: 4px;
    }
    
    /* התאמת מיכל רקע רק במובייל במסכים קטנים מאוד */
    .posts-vertical-wrapper.has-background-mobile-only {
        padding: 15px 8px 25px 8px !important; /* מרווח תחתון מוגדל ל-25px למניעת גלישה */
        max-width: calc(100% - 10px) !important;
        margin-top: 8px !important; /* מרווח ריק של 8px מעל מיכל הרקע */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 8px !important; /* מרווח ריק של 8px אחרי מיכל הרקע */
    }
    
    /* התאמת פינות מעוגלות במסכים קטנים מאוד */
    .posts-vertical-wrapper.has-background-mobile-only.rounded-container {
        border-radius: 4px !important;
    }
    
    body.home .posts-vertical-wrapper.has-background-container {
        max-width: calc(100% - 10px) !important;
        margin-top: 8px !important; /* מרווח ריק של 8px מעל מיכל הרקע */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 8px !important; /* מרווח ריק של 8px אחרי מיכל הרקע */
    }
}

/* אנימציות לטעינה */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.article-card-square {
    animation: fadeIn 0.5s ease backwards;
}

/* עיכוב הדרגתי לאנימציה */
.grid-item:nth-child(1) .article-card-square { animation-delay: 0.05s; }
.grid-item:nth-child(2) .article-card-square { animation-delay: 0.1s; }
.grid-item:nth-child(3) .article-card-square { animation-delay: 0.15s; }
.grid-item:nth-child(4) .article-card-square { animation-delay: 0.2s; }
.grid-item:nth-child(5) .article-card-square { animation-delay: 0.25s; }
.grid-item:nth-child(6) .article-card-square { animation-delay: 0.3s; }

/* עיצוב נוסף לגריד עם מספר שורות */
.posts-vertical-container[data-rows="2"] {
    max-height: none;
}

.posts-vertical-container[data-rows="3"] {
    max-height: none;
}

.posts-vertical-container[data-rows="4"] {
    max-height: none;
}

/* התאמות למספר שורות במובייל */
@media (max-width: 768px) {
    /* במובייל, מגבילים את מספר השורות המוצגות */
    .posts-vertical-container[data-rows="4"] {
        max-height: 800px;
        overflow-y: auto;
    }
}

/* ========== סגנון כהה ========== */
.posts-vertical-container.style-dark .article-card-square .article-content {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);
    color: #fff;
    position: relative;
    transition: background 0.3s ease;
}

/* כותרת עלית בסגנון כהה */
.posts-vertical-container.style-dark .super-title-tag {
    background: #DE0100;
    color: #ffffff;
}

.posts-vertical-container.style-dark .super-title-link:hover .super-title-tag {
    opacity: 0.9;
}

/* מסגרת רגילה בסגנון כהה */
.posts-vertical-container.style-dark.regular-frame .article-card-square {
    border: var(--frame-border-width, 1px) solid var(--frame-border-color, rgba(255, 255, 255, 0.2));
}

.posts-vertical-container.style-dark.regular-frame .article-card-square:hover {
    border-color: var(--frame-border-color, rgba(255, 255, 255, 0.4));
    filter: brightness(1.1);
}

/* אפקט hover על הכרטיסייה בסגנון כהה */
.posts-vertical-container.style-dark .article-card-square:hover .article-content {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 1) 100%);
}

/* תגית קטגוריה בסגנון כהה (כבר לא בשימוש - מוסתר) */

/* כותרת בסגנון כהה */
.posts-vertical-container.style-dark .article-card-square .article-title {
    color: #fff;
}

/* אפקט hover בוטל גם בסגנון כהה */
.posts-vertical-container.style-dark .article-card-square a:hover .article-title {
    color: #fff !important; /* שומר על הצבע המקורי */
    text-decoration: none !important;
    border-bottom: none !important;
}

.posts-vertical-container.style-dark .article-card-square a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* מטא-דאטה בסגנון כהה */
.posts-vertical-container.style-dark .article-meta {
    color: rgba(255, 255, 255, 0.8);
}

.posts-vertical-container.style-dark .article-meta .author-name {
    color: rgba(255, 255, 255, 0.7); /* התאמה לצבע התאריך */
}

.posts-vertical-container.style-dark .article-meta .meta-separator {
    color: rgba(255, 255, 255, 0.5);
}

.posts-vertical-container.style-dark .article-meta .publish-date {
    color: rgba(255, 255, 255, 0.7);
}

/* תג קטגוריה במטא-דטא בסגנון כהה */
.posts-vertical-container.style-dark .article-meta .category-tag-meta {
    background-color: transparent !important;
    color: var(--primary-color-jhhd) !important;
    border: 1px solid var(--primary-color-jhhd) !important;
}

.posts-vertical-container.style-dark .article-meta .category-tag-meta:hover {
    background-color: var(--primary-color-jhhd) !important;
    color: #fff !important;
    border-color: var(--primary-color-jhhd) !important;
}

/* כרטיסיות placeholder בסגנון כהה */
.posts-vertical-container.style-dark .article-card-square.placeholder .article-content {
    background: rgba(0, 0, 0, 0.5);
}

.posts-vertical-container.style-dark .article-card-square.placeholder .article-title {
    color: rgba(255, 255, 255, 0.5);
}

/* מטא-דאטה ב-placeholder בסגנון כהה */
.posts-vertical-container.style-dark .article-card-square.placeholder .article-meta {
    color: rgba(255, 255, 255, 0.3);
}

.posts-vertical-container.style-dark .article-card-square.placeholder .article-meta .author-name {
    color: rgba(255, 255, 255, 0.3); /* התאמה לצבע התאריך */
}

/* ========== סגנון ללא מסגרת ========== */
.posts-vertical-container.no-frame .article-card-square {
    box-shadow: none;
    border: none;
    background: transparent;
}

/* שימוש בצבע רקע מותאם אישית גם במצב ללא מסגרת */
.posts-vertical-container.style-light.no-frame .article-card-square {
    background: var(--cards-bg-color, transparent);
}

.posts-vertical-container.no-frame .article-card-square:hover {
    transform: translateY(-2px);
    box-shadow: none;
    border: none;
}

.posts-vertical-container.no-frame .article-content {
    padding: 15px 0 0px 0; /* ביטול המרווח התחתון לחלוטין */
    background: transparent;
}

/* התאמות למיכל כותרת עלית בסגנון no-frame */
.posts-vertical-container.no-frame .super-title-container {
    min-height: 32px; /* שומר על גובה אחיד גם ב-no-frame */
}

.posts-vertical-container.no-frame .super-title-link {
    margin-bottom: 16px;
}

.posts-vertical-container.no-frame .article-card-square .article-title {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

/* מטא-דאטה בסגנון ללא מסגרת */
.posts-vertical-container.no-frame .article-meta {
    margin-top: 10px;
}

/* שילוב סגנון כהה עם ללא מסגרת */
.posts-vertical-container.style-dark.no-frame .article-content {
    background: transparent;
    color: inherit;
}

.posts-vertical-container.style-dark.no-frame .article-card-square .article-title {
    color: var(--primary-text-color, #1a1a1a);
}

/* אפקט hover בוטל גם בסגנון no-frame */
.posts-vertical-container.style-dark.no-frame .article-card-square a:hover .article-title {
    color: var(--primary-text-color, #1a1a1a) !important; /* שומר על הצבע המקורי */
    text-decoration: none !important;
    border-bottom: none !important;
}

.posts-vertical-container.style-dark.no-frame .article-card-square a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* מטא-דאטה בשילוב סגנון כהה ללא מסגרת */
.posts-vertical-container.style-dark.no-frame .article-meta {
    color: #666;
}

.posts-vertical-container.style-dark.no-frame .article-meta .author-name {
    color: #888; /* התאמה לצבע התאריך */
}

.posts-vertical-container.style-dark.no-frame .article-meta .publish-date {
    color: #888;
}

/* תג קטגוריה בסגנון no-frame (הוסר - כעת בשורת המטא) */



/* ===== _all-posts-grid.css ===== */
/* בלוק כל הכתבות באתר - גריד עם תמונות מרובעות */
/* הערה: הגדרות רוחב ומרווחים עברו לקובץ הגלובלי _homepage-global-layout.css */

/* ביטול padding צידי - הכתבות יתחילו בדיוק מהקצה */
.all-posts-grid-wrapper .all-posts-grid-section.section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.home .all-posts-grid-wrapper .all-posts-grid-section.section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Wrapper ראשי */
.all-posts-grid-wrapper {
    transition: all 0.3s ease;
}

/* מיכל רקע */
.all-posts-grid-wrapper.has-background-container {
    padding: 40px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box; /* padding נספר בתוך מגבלת הרוחב */
}

/* מסגרת למיכל */
.all-posts-grid-wrapper.has-border {
    border-style: solid;
}

/* פינות מעוגלות למיכל רקע - לא למיכל רוחב מלא */
.all-posts-grid-wrapper.rounded-container:not(.full-width-container) {
    border-radius: 8px;
}

/* מיכל רקע רק במובייל - מוסתר בדסקטופ */
.all-posts-grid-wrapper.has-background-mobile-only {
    /* בדסקטופ - ללא רקע ו-padding */
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* מיכל רקע ברוחב מלא */
.all-posts-grid-wrapper.has-background-container.full-width-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    border-radius: 0;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* התאמת התוכן הפנימי במיכל רוחב מלא */
.all-posts-grid-wrapper.full-width-container .all-posts-grid-section {
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0 20px;
}

/* התאמת section במיכל רוחב מלא */
.all-posts-grid-wrapper.has-background-container.full-width-container .all-posts-grid-section {
    margin: 0 auto !important;
    padding: 0 !important;
}

/* תיקון יישור הכותרת במיכל רוחב מלא - רק בדסקטופ */
@media (min-width: 769px) {
    .all-posts-grid-wrapper.has-background-container.full-width-container .all-posts-grid-section .section-title {
        max-width: 1200px;
        margin: 0 auto;
        margin-bottom: var(--space-md);
        padding: 0 20px;
        padding-bottom: 0.5rem; /* שמירה על המרווח המקורי בין הטקסט לפס */
        box-sizing: border-box;
    }
    
    /* תיקון יישור הפס מתחת לכותרת במיכל רוחב מלא */
    .all-posts-grid-wrapper.has-background-container.full-width-container .all-posts-grid-section .section-title:after {
        right: 20px;
    }
}

/* וידוא שה-container עצמו ממורכז */
.all-posts-grid-wrapper.full-width-container .all-posts-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* עוקף את הכללים הגלובליים של עמוד הבית */
body.home .all-posts-grid-wrapper:not(.full-width-container) {
    max-width: 1200px !important;
    width: auto !important;
}

/* מיכל ברוחב מלא - עוקף הגבלות */
body.home .all-posts-grid-wrapper.full-width-container {
    max-width: none !important;
    width: 100vw !important;
}

/* התאמה כשיש מיכל רקע רגיל (לא רוחב מלא) */
body.home .all-posts-grid-wrapper.has-background-container:not(.full-width-container) {
    max-width: 1200px !important; /* המיכל עצמו מוגבל, ה-padding בתוך ה-1200 */
    width: auto !important;
}

body.home .all-posts-grid-section {
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: auto !important;
}

/* התאמה כשיש מיכל רקע רגיל (לא רוחב מלא) */
.all-posts-grid-wrapper.has-background-container:not(.full-width-container) .all-posts-grid-section {
    margin: 0 !important;
    padding: 0 !important;
}

/* התאמת section כשהמיכל רק במובייל - בדסקטופ */
@media (min-width: 769px) {
    .all-posts-grid-wrapper.has-background-mobile-only .all-posts-grid-section {
        /* בדסקטופ - חוזר להתנהגות רגילה */
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
}

/* התאמת section כשהמיכל רק במובייל - במובייל */
@media (max-width: 768px) {
    .all-posts-grid-wrapper.has-background-mobile-only .all-posts-grid-section {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* מיכל רקע ברוחב מלא במובייל - פתרון פשוט */
    body.home .all-posts-grid-wrapper.has-background-container.full-width-container {
        width: 100vw !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        margin-left: calc(-1 * (100vw - 100%) / 2) !important;
        margin-right: calc(-1 * (100vw - 100%) / 2) !important;
        padding: 20px 15px !important; /* הוספת padding אופקי למיכל עצמו */
        border-radius: 0;
        box-sizing: border-box !important;
        transform: none !important; /* ביטול ה-transform מהדסקטופ */
    }
    
    body.home .all-posts-grid-wrapper.full-width-container .all-posts-grid-section {
        padding: 0 !important; /* ביטול padding כי הוא כבר במיכל */
        max-width: 100%;
        margin: 0 auto;
    }
    
    body.home .all-posts-grid-wrapper.full-width-container .all-posts-grid-container {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
}

.all-posts-grid-section {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1200px;
}

/* הכותרת משתמשת בעיצוב המשותף מקובץ _homepage-common.css */

/* קונטיינר הגריד */
.all-posts-grid-container {
    display: grid;
    gap: 15px;
    margin: 0 auto;
}

/* ביטול מסגרת על המיכל כאשר יש מסגרת רגילה לכרטיסיות */
.all-posts-grid-container,
.all-posts-grid-container.regular-frame,
.all-posts-grid-container.style-dark.regular-frame {
    border: none !important;
    outline: none !important;
    box-shadow: none;
}

/* הגדרת מספר עמודות לפי data attribute */
.all-posts-grid-container[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.all-posts-grid-container[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.all-posts-grid-container[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.all-posts-grid-container[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
}

/* כרטיסיית כתבה - עיצוב עם פינות ישרות */
.all-posts-grid-container .article-card-square {
    background: var(--cards-bg-color, #fff);
    /* ברירת מחדל ללא פינות מעוגלות */
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ========== סגנונות מסגרת טקסט ========== */
/* מסגרת עדינה - ברירת המחדל */
.all-posts-grid-container.subtle-frame .article-card-square {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.all-posts-grid-container.subtle-frame .article-card-square:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

/* מסגרת רגילה */
.all-posts-grid-container.regular-frame .article-card-square {
    border: var(--frame-border-width, 1px) solid var(--frame-border-color, #e0e0e0);
    box-shadow: none;
}

.all-posts-grid-container .article-card-square:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

.all-posts-grid-container.regular-frame .article-card-square:hover {
    transform: translateY(-3px);
    border-color: var(--frame-border-color, #c0c0c0);
    background: var(--cards-bg-color, #fff);
    filter: brightness(0.9);
    box-shadow: none;
}

/* קונטיינר לתמונה */
.all-posts-grid-container .square-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: var(--aspect-ratio, 1 / 1); /* יחס דינמי עם ברירת מחדל 1:1 */
    overflow: hidden;
    background-color: #f0f0f0;
}

.all-posts-grid-container .square-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* חיתוך התמונה למילוי הריבוע */
    object-position: center; /* מרכוז התמונה */
    transition: transform 0.3s ease;
}

.all-posts-grid-container .article-card-square:hover .square-image-container img {
    transform: scale(1.05);
}

/* תוכן הכתבה */
.all-posts-grid-container .article-content {
    padding: 20px 20px 0px 20px; /* ביטול המרווח התחתון לחלוטין */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* תגית קטגוריה */
.all-posts-grid-container .category-tag {
    display: inline-block;
    background-color: transparent !important;
    color: var(--primary-color-jhhd) !important;
    border: 1px solid var(--primary-color-jhhd) !important;
    padding: 3px 8px; /* הקטנת הpadding פרופורציונלית לגודל הפונט */
    /* ברירת מחדל ללא פינות מעוגלות */
    font-size: 0.7rem; /* הקטנת הגודל ב-30% (70% מהמקורי) */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px; /* הקטנת המרווח בין האותיות פרופורציונלית */
    margin-bottom: 20px; /* הכפלת המרווח כמו ב-posts-vertical */
    text-decoration: none;
    transition: all 0.2s ease;
    align-self: flex-start; /* יישור לימין בגלל שהאתר בעברית */
}

.all-posts-grid-container .category-tag:hover {
    background-color: var(--primary-color-jhhd) !important;
    color: #fff !important;
    border-color: var(--primary-color-jhhd) !important;
    transform: translateY(-1px);
}

.all-posts-grid-container .article-card-square .article-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 12px 0;
    color: var(--secondary-color-jhhd, #8B4513);
    transition: color 0.2s ease;
    
    /* גובה קבוע של 3 שורות */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.2em; /* 3 שורות * 1.4 line-height */
}

.all-posts-grid-container .article-card-square a {
    text-decoration: none;
    color: inherit;
}

/* אפקט hover בוטל - הכותרת נשארת באותו צבע */
.all-posts-grid-container .article-card-square a:hover .article-title {
    color: inherit !important; /* שומר על הצבע המקורי */
    text-decoration: none !important;
    border-bottom: none !important;
}

.all-posts-grid-container .article-card-square a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* מטא-דאטה - מחבר ותאריך */
.all-posts-grid-container .article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
    margin-bottom: 10px; /* הגדלת המרווח התחתון ב-10px */
    line-height: 1.2;
    flex-wrap: nowrap; /* וידוא שהתוכן נשאר בשורה אחת */
}

.all-posts-grid-container .article-meta .author-name {
    font-weight: 500;
    color: #888; /* התאמה לצבע התאריך */
    white-space: nowrap; /* מונע שבירת שורה */
}

.all-posts-grid-container .article-meta .meta-separator {
    color: #ccc;
    margin: 0 2px;
    flex-shrink: 0; /* מונע התכווצות */
}

.all-posts-grid-container .article-meta .publish-date {
    color: #888;
    white-space: nowrap; /* מונע שבירת שורה */
}

/* ========== סגנון כהה ========== */
.all-posts-grid-container.style-dark .article-card-square .article-content {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);
    color: #fff;
    position: relative;
    transition: background 0.3s ease;
}

/* מסגרת רגילה בסגנון כהה */
.all-posts-grid-container.style-dark.regular-frame .article-card-square {
    border: var(--frame-border-width, 1px) solid var(--frame-border-color, rgba(255, 255, 255, 0.2));
}

.all-posts-grid-container.style-dark.regular-frame .article-card-square:hover {
    border-color: var(--frame-border-color, rgba(255, 255, 255, 0.4));
    filter: brightness(1.1);
}

/* אפקט hover על הכרטיסייה בסגנון כהה */
.all-posts-grid-container.style-dark .article-card-square:hover .article-content {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 1) 100%);
}

/* תגית קטגוריה בסגנון כהה */
.all-posts-grid-container.style-dark .category-tag {
    background-color: transparent !important;
    color: var(--primary-color-jhhd) !important;
    border: 1px solid var(--primary-color-jhhd) !important;
}

.all-posts-grid-container.style-dark .category-tag:hover {
    background-color: var(--primary-color-jhhd) !important;
    color: #fff !important;
    border-color: var(--primary-color-jhhd) !important;
}

/* כותרת בסגנון כהה */
.all-posts-grid-container.style-dark .article-card-square .article-title {
    color: #fff;
}

/* אפקט hover בוטל גם בסגנון כהה */
.all-posts-grid-container.style-dark .article-card-square a:hover .article-title {
    color: #fff !important; /* שומר על הצבע המקורי */
    text-decoration: none !important;
    border-bottom: none !important;
}

.all-posts-grid-container.style-dark .article-card-square a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* מטא-דאטה בסגנון כהה */
.all-posts-grid-container.style-dark .article-meta {
    color: rgba(255, 255, 255, 0.8);
}

.all-posts-grid-container.style-dark .article-meta .author-name {
    color: rgba(255, 255, 255, 0.7); /* התאמה לצבע התאריך */
}

.all-posts-grid-container.style-dark .article-meta .meta-separator {
    color: rgba(255, 255, 255, 0.5);
}

.all-posts-grid-container.style-dark .article-meta .publish-date {
    color: rgba(255, 255, 255, 0.7);
}

/* כרטיסיות placeholder */
.all-posts-grid-container .article-card-square.placeholder {
    opacity: 0.5;
    pointer-events: none;
}

.all-posts-grid-container .article-card-square.placeholder .square-image-container {
    background-color: #e0e0e0;
}

.all-posts-grid-container .article-card-square.placeholder img {
    opacity: 0.3;
}

/* כרטיסיות placeholder בסגנון כהה */
.all-posts-grid-container.style-dark .article-card-square.placeholder .article-content {
    background: rgba(0, 0, 0, 0.5);
}

.all-posts-grid-container.style-dark .article-card-square.placeholder .article-title {
    color: rgba(255, 255, 255, 0.5);
}

/* מטא-דאטה ב-placeholder בסגנון כהה */
.all-posts-grid-container.style-dark .article-card-square.placeholder .article-meta {
    color: rgba(255, 255, 255, 0.3);
}

.all-posts-grid-container.style-dark .article-card-square.placeholder .article-meta .author-name {
    color: rgba(255, 255, 255, 0.3); /* התאמה לצבע התאריך */
}

/* קישור לכל הכתבות */
.all-posts-link-container {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #f0f0f0;
}

.view-all-posts-link {
    display: inline-block;
    padding: 14px 35px;
    background: #f7f7f7; /* רקע אפור בהיר מאוד */
    color: #000; /* טקסט שחור */
    text-decoration: none;
    /* ברירת מחדל ללא פינות מעוגלות */
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0; /* מסגרת אפורה כהה יותר מהרקע */
    position: relative;
    overflow: hidden;
}

.view-all-posts-link:hover {
    background: #ffffff; /* הבהרה עד לבן בהובר */
    color: #000; /* נשאר שחור */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.10);
    border-color: #d0d0d0; /* מעט כהה יותר בהובר */
}

/* אפקט חץ לכפתור */
.view-all-posts-link::after {
    content: "←";
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.view-all-posts-link:hover::after {
    transform: translateX(-5px);
}

/* רספונסיביות */
@media (max-width: 1024px) {
    .all-posts-grid-container[data-columns="6"] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .all-posts-grid-container[data-columns="5"] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .all-posts-grid-container[data-columns="6"],
    .all-posts-grid-container[data-columns="5"],
    .all-posts-grid-container[data-columns="4"] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .all-posts-grid-container {
        gap: 15px;
    }
    
    .all-posts-grid-container .article-card-square .article-title {
        font-size: 1rem;
    }
    
    /* מיכל רקע במובייל */
    .all-posts-grid-wrapper.has-background-container {
        padding: 20px 10px;
        margin: 0 10px;
    }
    
    /* מיכל רקע רק במובייל - מוצג במובייל */
    .all-posts-grid-wrapper.has-background-mobile-only {
        background-color: var(--mobile-bg-color) !important;
        padding: 20px 10px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
        margin: 0 10px !important;
    }
    
    .all-posts-grid-wrapper.has-background-mobile-only.rounded-container {
        border-radius: 8px !important;
    }
    
    /* וודא ש-border-radius לא מוחל אם אין rounded-container */
    .all-posts-grid-wrapper.has-background-mobile-only:not(.rounded-container) {
        border-radius: 0 !important;
    }
    
    body.home .all-posts-grid-wrapper.has-background-container {
        margin: 0 10px !important;
    }
}

@media (max-width: 600px) {
    .all-posts-grid-container[data-columns="6"],
    .all-posts-grid-container[data-columns="5"],
    .all-posts-grid-container[data-columns="4"],
    .all-posts-grid-container[data-columns="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* מיכל רקע במובייל קטן */
    .all-posts-grid-wrapper.has-background-container {
        padding: 15px 8px;
        margin: 0 5px;
    }
    
    /* מרווחים למיכל רוחב מלא במובייל קטן */
    body.home .all-posts-grid-wrapper.has-background-container.full-width-container {
        padding: 20px 10px !important; /* padding קטן יותר במסכים קטנים */
    }
    
    /* מיכל רקע רק במובייל - מוצג במובייל קטן */
    .all-posts-grid-wrapper.has-background-mobile-only {
        padding: 15px 8px !important;
        margin: 0 5px !important;
    }
    
    /* הכתבה הראשונה תופסת את כל הרוחב במובייל */
    .all-posts-grid-container .grid-item:first-child {
        grid-column: span 2;
    }
    
    /* עיצוב ייחודי לכתבה הראשונה במובייל */
    .all-posts-grid-container .grid-item:first-child .article-card-square {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    /* תמונה גדולה יותר לכתבה הראשונה */
    .all-posts-grid-container .grid-item:first-child .square-image-container {
        aspect-ratio: 16 / 9; /* יחס רחב יותר לכתבה הראשונה */
    }
    
    /* הגדלת הכותרת של הכתבה הראשונה */
    .all-posts-grid-container .grid-item:first-child .article-title {
        font-size: 1.4rem;
        font-weight: 700;
        -webkit-line-clamp: 4; /* 4 שורות בכתבה הראשונה במובייל */
        min-height: auto; /* ביטול גובה מינימלי שיצר מרווח מיותר */
        margin-bottom: 8px; /* הקטנת המרווח התחתון משמעותית */
    }
    
    /* הגדלת התוכן של הכתבה הראשונה */
    .all-posts-grid-container .grid-item:first-child .article-content {
        padding: 20px 20px 0px 20px; /* ביטול המרווח התחתון לחלוטין */
    }
    
    /* תגית קטגוריה גדולה יותר בכתבה הראשונה */
    .all-posts-grid-container .grid-item:first-child .category-tag {
        font-size: 0.7rem; /* הקטנת הגודל ב-30% גם בכתבה הראשונה במובייל */
        padding: 3px 10px; /* הקטנת הpadding פרופורציונלית */
        margin-bottom: 20px; /* שמירה על המרווח המוכפל גם בכתבה הראשונה במובייל */
    }
    
    /* מטא-דאטה בכתבה הראשונה במובייל */
    .all-posts-grid-container .grid-item:first-child .article-meta {
        font-size: 0.9rem;
        margin-top: 12px;
        gap: 10px;
    }
    
    .all-posts-grid-container .grid-item:first-child .article-meta .author-name {
        font-weight: 600;
    }
    
    /* הסתרת הכתבה האחרונה כאשר יש מספר זוגי של כתבות (ללא הראשונה) */
    .all-posts-grid-container.hide-last-mobile .grid-item:last-child {
        display: none;
    }
    
    .all-posts-grid-container {
        gap: 10px; /* הקטנת הרווח בין הכרטיסיות במובייל */
    }
    
    .all-posts-grid-container .article-content {
        padding: 15px;
        padding-bottom: 0px; /* ביטול המרווח התחתון לחלוטין */
    }
    
    /* הקטנת padding לכרטיסיות הקטנות (לא הראשונה) */
    .all-posts-grid-container .grid-item:not(:first-child) .article-content {
        padding: 12px 10px 0px 10px; /* ביטול המרווח התחתון לחלוטין */
    }
    
    /* מטא-דאטה בכרטיסיות הקטנות במובייל */
    .all-posts-grid-container .grid-item:not(:first-child) .article-meta {
        font-size: 0.75rem;
        margin-top: 6px;
        gap: 6px;
    }
    
    /* התאמות נוספות למסכים קטנים במיוחד (אייפון SE וכדומה) */
    @media (max-width: 380px) {
        .all-posts-grid-container {
            gap: 8px; /* רווח קטן עוד יותר */
        }
        
        .all-posts-grid-container .grid-item:not(:first-child) .article-content {
            padding: 10px 8px 0px 8px; /* ביטול המרווח התחתון לחלוטין */
        }
        
        .all-posts-grid-container .grid-item:not(:first-child) .article-title {
            font-size: 1rem; /* כותרת קטנה יותר */
        }
        
        .all-posts-grid-container .grid-item:not(:first-child) .category-tag {
            font-size: 0.5rem; /* הקטנת הגודל ב-30% (70% מ-0.7rem) */
            padding: 2px 6px; /* הקטנת הpadding פרופורציונלית */
            margin-bottom: 16px; /* הכפלת המרווח גם בכרטיסיות הקטנות */
        }
        
        /* מטא-דאטה במסכים קטנים מאוד */
        .all-posts-grid-container .grid-item:not(:first-child) .article-meta {
            font-size: 0.7rem;
            margin-top: 4px;
            gap: 4px;
        }
        
        .all-posts-grid-container .grid-item:first-child .article-meta {
            font-size: 0.85rem;
            margin-top: 8px;
            gap: 8px;
        }
        
        /* וודא שהכרטיסיות לא גולשות */
        .all-posts-grid-container .grid-item {
            min-width: 0; /* מאפשר לכרטיסיות להתכווץ */
        }
        
        .all-posts-grid-wrapper {
            overflow-x: hidden; /* מונע גלילה אופקית */
        }
    }
    
    .view-all-posts-link {
        padding: 12px 30px;
        font-size: 1rem;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 300px) {
    /* רק במסכים קטנים במיוחד - עמודה אחת */
    .all-posts-grid-container {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    /* מיכל רקע במסכים קטנים מאוד */
    .all-posts-grid-wrapper.has-background-container,
    .all-posts-grid-wrapper.has-background-mobile-only {
        padding: 10px 5px !important;
        margin: 0 2px !important;
    }
    
    .all-posts-grid-wrapper.has-background-mobile-only.rounded-container {
        border-radius: 5px !important;
    }
    
    body.home .all-posts-grid-wrapper.has-background-container {
        margin: 0 2px !important;
    }
    
    /* במסכים קטנים מאוד, הכתבה הראשונה כבר תופסת את כל הרוחב בגלל עמודה אחת */
    .all-posts-grid-container .grid-item:first-child {
        grid-column: span 1; /* ביטול ה-span 2 מה-media query הקודם */
    }
    
    /* הסתרת הכתבה האחרונה במסכים קטנים מאוד - אותה לוגיקה */
    .all-posts-grid-container.hide-last-mobile .grid-item:last-child {
        display: none;
    }
    
    /* מטא-דאטה במסכים קטנים מאוד (מתחת ל-300px) */
    .all-posts-grid-container .article-meta {
        font-size: 0.75rem;
        margin-top: 6px;
        gap: 6px;
    }
}

/* אנימציות לטעינה */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.all-posts-grid-container .article-card-square {
    animation: fadeIn 0.5s ease backwards;
}

/* עיכוב הדרגתי לאנימציה */
.all-posts-grid-container .grid-item:nth-child(1) .article-card-square { animation-delay: 0.05s; }
.all-posts-grid-container .grid-item:nth-child(2) .article-card-square { animation-delay: 0.1s; }
.all-posts-grid-container .grid-item:nth-child(3) .article-card-square { animation-delay: 0.15s; }
.all-posts-grid-container .grid-item:nth-child(4) .article-card-square { animation-delay: 0.2s; }
.all-posts-grid-container .grid-item:nth-child(5) .article-card-square { animation-delay: 0.25s; }
.all-posts-grid-container .grid-item:nth-child(6) .article-card-square { animation-delay: 0.3s; }
.all-posts-grid-container .grid-item:nth-child(7) .article-card-square { animation-delay: 0.35s; }
.all-posts-grid-container .grid-item:nth-child(8) .article-card-square { animation-delay: 0.4s; }
.all-posts-grid-container .grid-item:nth-child(9) .article-card-square { animation-delay: 0.45s; }
.all-posts-grid-container .grid-item:nth-child(10) .article-card-square { animation-delay: 0.5s; }

/* עיצוב נוסף לגריד עם מספר שורות */
.all-posts-grid-container[data-rows="2"],
.all-posts-grid-container[data-rows="3"],
.all-posts-grid-container[data-rows="4"],
.all-posts-grid-container[data-rows="5"],
.all-posts-grid-container[data-rows="6"] {
    max-height: none;
}

/* התאמות למספר שורות במובייל */
@media (max-width: 768px) {
    /* במובייל, מגבילים את מספר השורות המוצגות */
    .all-posts-grid-container[data-rows="5"],
    .all-posts-grid-container[data-rows="6"] {
        max-height: 1000px;
        overflow-y: auto;
        padding-left: 5px;
    }
    
    .all-posts-grid-container[data-rows="5"]::-webkit-scrollbar,
    .all-posts-grid-container[data-rows="6"]::-webkit-scrollbar {
        width: 6px;
    }
    
    .all-posts-grid-container[data-rows="5"]::-webkit-scrollbar-track,
    .all-posts-grid-container[data-rows="6"]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .all-posts-grid-container[data-rows="5"]::-webkit-scrollbar-thumb,
    .all-posts-grid-container[data-rows="6"]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    .all-posts-grid-container[data-rows="5"]::-webkit-scrollbar-thumb:hover,
    .all-posts-grid-container[data-rows="6"]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* פינות מעוגלות */
.all-posts-grid-container.rounded-corners .article-card-square {
    border-radius: 8px;
}

.all-posts-grid-container.rounded-corners .square-image-container {
    border-radius: 8px 8px 0 0;
}

/* ========== סגנון ללא מסגרת ========== */
.all-posts-grid-container.no-frame .article-card-square {
    box-shadow: none;
    /* שומרים על צבע הרקע שהוגדר במשתנה --cards-bg-color */
    /* background נשאר כפי שהוגדר בכלל הבסיסי */
}

.all-posts-grid-container.no-frame .article-card-square:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.all-posts-grid-container.no-frame .article-content {
    padding: 15px 20px 0px 20px; /* ביטול המרווח התחתון לחלוטין */
    /* שומרים על צבע הרקע במקום להפוך לשקוף */
    background: inherit;
}

.all-posts-grid-container.no-frame .category-tag {
    margin-bottom: 16px; /* הכפלת המרווח מ-8px ל-16px */
}

.all-posts-grid-container.no-frame .article-card-square .article-title {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

/* מטא-דאטה בסגנון ללא מסגרת */
.all-posts-grid-container.no-frame .article-meta {
    margin-top: 10px;
}

/* שילוב סגנון כהה עם ללא מסגרת */
.all-posts-grid-container.style-dark.no-frame .article-content {
    /* שומרים על הגרדיאנט הכהה של הסגנון הכהה גם בללא מסגרת */
    /* background נשאר כפי שהוגדר בסגנון הכהה */
    color: inherit;
}

.all-posts-grid-container.style-dark.no-frame .article-card-square .article-title {
    color: var(--primary-text-color, #1a1a1a);
}

/* אפקט hover בוטל גם בסגנון no-frame */
.all-posts-grid-container.style-dark.no-frame .article-card-square a:hover .article-title {
    color: var(--primary-text-color, #1a1a1a) !important; /* שומר על הצבע המקורי */
    text-decoration: none !important;
    border-bottom: none !important;
}

.all-posts-grid-container.style-dark.no-frame .article-card-square a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* מטא-דאטה בשילוב סגנון כהה ללא מסגרת */
.all-posts-grid-container.style-dark.no-frame .article-meta {
    color: #666;
}

.all-posts-grid-container.style-dark.no-frame .article-meta .author-name {
    color: #888; /* התאמה לצבע התאריך */
}

.all-posts-grid-container.style-dark.no-frame .article-meta .publish-date {
    color: #888;
}

.all-posts-grid-container.style-dark.no-frame .category-tag {
    background-color: transparent !important;
    color: var(--primary-color-jhhd) !important;
    border: 1px solid var(--primary-color-jhhd) !important;
}

.all-posts-grid-container.style-dark.no-frame .category-tag:hover {
    background-color: var(--primary-color-jhhd) !important;
    color: #fff !important;
    border-color: var(--primary-color-jhhd) !important;
}

/* התאמות למצב ללא מסגרת במובייל */
@media (max-width: 600px) {
    /* שמירה על padding מתאים במובייל גם במצב ללא מסגרת */
    .all-posts-grid-container.no-frame .article-content {
        padding: 15px;
        padding-bottom: 0px; /* ביטול המרווח התחתון לחלוטין */
    }
    
    /* הכתבה הראשונה במובייל - ללא מסגרת */
    .all-posts-grid-container.no-frame .grid-item:first-child .article-content {
        padding: 20px 20px 0px 20px; /* ביטול המרווח התחתון לחלוטין */
    }
    
    /* הכתבות הקטנות במובייל - ללא מסגרת */
    .all-posts-grid-container.no-frame .grid-item:not(:first-child) .article-content {
        padding: 12px 10px 0px 10px; /* ביטול המרווח התחתון לחלוטין */
    }
}

/* התאמות למסכים קטנים במיוחד - ללא מסגרת */
@media (max-width: 380px) {
    .all-posts-grid-container.no-frame .grid-item:not(:first-child) .article-content {
        padding: 10px 8px 0px 8px; /* ביטול המרווח התחתון לחלוטין */
    }
}

/* וידוא שהגריד לא גולש במובייל במצב ללא מסגרת */
@media (max-width: 768px) {
    .all-posts-grid-container.no-frame {
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden; /* מניעת גלילה אופקית */
    }
    
    .all-posts-grid-container.no-frame .grid-item {
        min-width: 0; /* מאפשר לכרטיסיות להתכווץ */
        width: 100%;
        box-sizing: border-box;
    }
}


/* ===== _posts-tabs.css ===== */
/**
 * === בלוק כתבות עם טאבים ===
 * הערה: הגדרות רוחב ומרווחים עברו לקובץ הגלובלי _homepage-global-layout.css
 */

/* Wrapper ראשי */
.posts-tabs-wrapper {
  position: relative;
}

/* מיכל רקע משותף */
.posts-tabs-wrapper.with-background-container:not(.mobile-only-bg) {
  background: var(--bg-color, #f5f5f5);
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: visible; /* מאפשר לכפתורים לבלוט מחוץ למיכל */
  /* margin מוגדר בקובץ הגלובלי */
}

/* מיכל רקע רק במובייל - ללא עיצוב בדסקטופ */
.posts-tabs-wrapper.with-background-container.mobile-only-bg {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  /* margin מוגדר בקובץ הגלובלי */
}

/* מיכל רקע ברוחב מלא */
.posts-tabs-wrapper.with-background-container.full-width-container {
  width: 100vw;
  position: relative;
  left: 0;
  right: 0;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: none;
  border-radius: 0;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* ההגדרה של full-width-container נמצאת בקובץ הגלובלי */

.posts-tabs-wrapper.with-background-container:not(.mobile-only-bg) .posts-tabs-section {
  background: transparent;
  margin: 0;
  padding: 0;
}

/* מיכל רקע עם פינות מעוגלות */
.posts-tabs-wrapper.with-background-container:not(.mobile-only-bg)[data-rounded="no"] {
  border-radius: 0;
}

/* הגדרות רוחב עברו לקובץ הגלובלי - נשארו רק הגדרות ספציפיות לרקע מלא */

/* === סרגל הטאבים === */
.posts-tabs-navigation {
  margin-bottom: 30px;
  border-bottom: none;
  position: relative;
}

.tabs-list {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
}

/* סגנון scrollbar למקרה של הרבה טאבים */
.tabs-list::-webkit-scrollbar {
  height: 6px;
}

.tabs-list::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.tabs-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.tabs-list::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* סגנון כל טאב */
.tab-item {
  flex-shrink: 0;
}

.tab-button {
  background: transparent; /* רקע שקוף תמיד */
  border: none;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  font-family: inherit;
  outline: none; /* הסרת קו המתאר */
}

.tab-button:hover {
  color: var(--primary-color-jhhd);
  background-color: transparent; /* רקע שקוף - נשאר צבע הרקע המקורי */
}

/* טאב פעיל */
.tab-item.active .tab-button {
  color: var(--secondary-color-jhhd);
  border-bottom-color: var(--secondary-color-jhhd);
  font-weight: 600;
  outline: none; /* הסרת קו המתאר גם בטאב פעיל */
}

/* מסגרת פוקוס בולטת לניווט במקלדת על הטאבים */
.tab-button:focus-visible {
  outline: 3px solid var(--primary-color-jhhd) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* הסתרת פוקוס בלחיצת עכבר */
.tab-button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* === תוכן הטאבים === */
.posts-tabs-content {
  position: relative;
  /* margin-top: 20px; */ /* הוסר - מרווח בין הכותרת לתוכן מטופל ע"י margin-bottom של הכותרת */
}

.tab-content {
  display: none;
  position: relative;
  align-items: center;
}

.tab-content.active {
  display: flex;
  justify-content: center; /* מרכז את הילדים באופק */
}

/* === כפתורי ניווט - עיצוב כפתור (ברירת מחדל) === */
.posts-tabs-wrapper.nav-button .nav-button {
  position: absolute;
  /* ממוקם במרכז התמונה - חישוב קבוע */
  top: 85px; /* מיקום קבוע שמתאים לרוב יחסי התמונה */
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 4px;
  width: 52px;  /* הגדלה ב-30% מ-40px */
  height: 78px; /* הגדלה ב-30% מ-60px */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: 42px; /* הגדלה ב-30% מ-32px */
  font-weight: 500;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1;
}

.posts-tabs-wrapper.nav-button .nav-button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%) scale(1.05);
}

.posts-tabs-wrapper.nav-button .nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.3);
}

/* === כפתורי ניווט - עיצוב חץ פשוט === */  
.posts-tabs-wrapper.nav-arrow .nav-button {
  position: absolute;
  /* ממוקם במרכז כל המיכל (תמונה + טקסט) */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  width: 40px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100; /* גבוה יותר כדי להיות מעל התוכן */
  color: var(--primary-color-jhhd);
  font-size: 100px;
  font-weight: bold;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1;
  box-shadow: none;
  outline: none; /* הסרת קו המתאר */
}

.posts-tabs-wrapper.nav-arrow .nav-button:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.2);
  color: var(--primary-color-jhhd);
  opacity: 0.8;
}

/* מסגרת פוקוס בולטת לניווט במקלדת על כפתורי הניווט */
.posts-tabs-wrapper.nav-arrow .nav-button:focus-visible {
  outline: 3px solid var(--primary-color-jhhd) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* הסתרת פוקוס בלחיצת עכבר */
.posts-tabs-wrapper.nav-arrow .nav-button:focus:not(:focus-visible),
.posts-tabs-wrapper.nav-arrow .nav-button:active {
  outline: none;
  box-shadow: none;
}

.posts-tabs-wrapper.nav-arrow .nav-button:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

/* === מיקום החיצים - עיצוב כפתור === */
.posts-tabs-wrapper.nav-button .nav-prev {
  left: -47px; /* 90% מהכפתור בחוץ (52px * 0.9) */
}

.posts-tabs-wrapper.nav-button .nav-next {
  right: -47px; /* 90% מהכפתור בחוץ (52px * 0.9) */
}

/* === מיקום החיצים - עיצוב חץ פשוט === */
.posts-tabs-wrapper.nav-arrow .nav-prev {
  left: -50px; /* מחוץ למיכל התוכן */
}

.posts-tabs-wrapper.nav-arrow .nav-next {
  right: -50px; /* מחוץ למיכל התוכן */
}

/* התאמת כפתורי ניווט במיכל רוחב מלא */
.posts-tabs-wrapper.full-width-container.nav-button .nav-prev {
  left: 10px; /* הכפתור בתוך המיכל */
}

.posts-tabs-wrapper.full-width-container.nav-button .nav-next {
  right: 10px; /* הכפתור בתוך המיכל */
}

/* מיקום הכפתורים מותאם לגובה התמונה */

/* === קרוסלת הכתבות === */
.posts-carousel {
  flex: 1;
  overflow: hidden;
  padding: 0;
  position: relative; /* הוספת position relative למיכל */
  margin: 0 auto;
  max-width: 100%;
  direction: ltr; /* כפה כיוון LTR על הקרוסלה עצמה */
}

.posts-track {
  display: flex; /* שינוי ל-flex רגיל */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  gap: var(--space-md);
  will-change: transform;
  flex-wrap: nowrap;
  padding: 0 10px; /* הוספת padding לקצוות המסילה */
}

/* גודל פריטים לפי מספר עמודות */
.posts-track[data-columns="3"] .carousel-item {
  flex: 0 0 calc(33.333% - var(--space-md) * 2 / 3);
}

.posts-track[data-columns="4"] .carousel-item {
  flex: 0 0 calc(25% - var(--space-md) * 3 / 4);
}

.posts-track[data-columns="5"] .carousel-item {
  flex: 0 0 calc(20% - var(--space-md) * 4 / 5);
}

.posts-track[data-columns="6"] .carousel-item {
  flex: 0 0 calc(16.666% - var(--space-md) * 5 / 6);
}

/* === כרטיסיית כתבה === */
.posts-tabs-wrapper .article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cards-bg-color, #fff);
  overflow: hidden;
  transition: all 0.3s ease;
  direction: rtl; /* החזרת כיוון RTL לתוכן */
}

/* מסגרת עדינה (ברירת מחדל) */
.posts-tabs-wrapper .article-card.subtle-frame {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* מסגרת רגילה */
.posts-tabs-wrapper .article-card.regular-frame {
  border: 1px solid #e0e0e0;
  box-shadow: none;
}

/* פינות מעוגלות */
.posts-tabs-wrapper .article-card.rounded-corners {
  border-radius: 8px;
}

.posts-tabs-wrapper .article-card.rounded-corners figure {
  border-radius: 8px 8px 0 0;
}

/* ללא מסגרת */
.posts-tabs-wrapper .article-card.no-frame {
  box-shadow: none;
  border: none;
  background: transparent;
}

/* Hover effects לפי סגנון מסגרת */
.posts-tabs-wrapper .article-card.subtle-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.posts-tabs-wrapper .article-card.regular-frame:hover {
  transform: translateY(-2px);
  border-color: #c0c0c0;
  background: #fff;
}

.posts-tabs-wrapper .article-card.no-frame:hover {
  transform: translateY(-2px);
  box-shadow: none;
  border: none;
}

.posts-tabs-wrapper .article-card figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--aspect-ratio, 3 / 2);
  width: 100%;
  position: relative;
  max-width: 100%;
  display: block;
  flex-shrink: 0; /* למנוע כיווץ של התמונה */
}

.posts-tabs-wrapper .article-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
  max-width: 100%;
  max-height: 100%;
}

.posts-tabs-wrapper .article-card:hover img {
  transform: scale(1.05);
}

.posts-tabs-wrapper .article-title {
  font-size: 1.1rem;
  margin: 15px 15px 8px; /* הוספת מרווח תחתון קטן לפני המטא-דאטה */
  line-height: 1.3;
  color: #222;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.6em;
}

.posts-tabs-wrapper .article-card a {
  text-decoration: none;
  color: inherit;
}

.posts-tabs-wrapper .article-card a:hover .article-title {
  color: var(--primary-color-jhhd);
}

/* מטא-דאטה - מחבר ותאריך */
.posts-tabs-wrapper .article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #666;
  margin: 0 15px 0; /* ביטול המרווח התחתון - המרווחים בין הבלוקים מנוהלים בקובץ הגלובלי */
  line-height: 1.2;
  flex-wrap: nowrap;
}

.posts-tabs-wrapper .article-meta .author-name {
  font-weight: 500;
  color: #888;
  white-space: nowrap;
}

.posts-tabs-wrapper .article-meta .meta-separator {
  color: #ccc;
  margin: 0 2px;
  flex-shrink: 0;
}

.posts-tabs-wrapper .article-meta .publish-date {
  color: #888;
  white-space: nowrap;
}

/* === סגנון כהה === */
.posts-tabs-wrapper.style-dark {
  color: #ecf0f1;
}

/* רקע כהה כשאין מיכל רקע */
.posts-tabs-wrapper.style-dark:not(.with-background-container) .posts-tabs-section {
  background: #2c3e50;
  padding: 30px 20px;
  border-radius: 8px;
}

.posts-tabs-wrapper.style-dark .section-title {
  color: #ffffff;
}

.posts-tabs-wrapper.style-dark .tab-button {
  color: #bdc3c7;
}

.posts-tabs-wrapper.style-dark .tab-button:hover {
  color: var(--primary-color-jhhd);
  background-color: transparent; /* רקע שקוף גם בסגנון כהה */
}

.posts-tabs-wrapper.style-dark .tab-item.active .tab-button {
  color: var(--secondary-color-jhhd);
  border-bottom-color: var(--secondary-color-jhhd);
}

.posts-tabs-wrapper.style-dark .article-card {
  background: var(--cards-bg-color, #34495e);
  color: #ecf0f1;
}

/* מסגרת עדינה בסגנון כהה */
.posts-tabs-wrapper.style-dark .article-card.subtle-frame {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.posts-tabs-wrapper.style-dark .article-card.subtle-frame:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* מסגרת רגילה בסגנון כהה */
.posts-tabs-wrapper.style-dark .article-card.regular-frame {
  border-color: rgba(255, 255, 255, 0.2);
}

.posts-tabs-wrapper.style-dark .article-card.regular-frame:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: #34495e;
}

.posts-tabs-wrapper.style-dark .article-title {
  color: #ffffff;
}

.posts-tabs-wrapper.style-dark .article-card a {
  color: inherit;
}

.posts-tabs-wrapper.style-dark .article-card a:hover .article-title {
  color: var(--secondary-color-jhhd);
}

/* מטא-דאטה בסגנון כהה */
.posts-tabs-wrapper.style-dark .article-meta {
  color: rgba(255, 255, 255, 0.8);
}

.posts-tabs-wrapper.style-dark .article-meta .author-name {
  color: rgba(255, 255, 255, 0.7);
}

.posts-tabs-wrapper.style-dark .article-meta .meta-separator {
  color: rgba(255, 255, 255, 0.5);
}

.posts-tabs-wrapper.style-dark .article-meta .publish-date {
  color: rgba(255, 255, 255, 0.7);
}

/* עיצוב כפתורי ניווט בסגנון כהה */
.posts-tabs-wrapper.style-dark.nav-button .nav-button {
  background: rgba(0, 0, 0, 0.8);
  border: none;
  color: #ffffff;
}

.posts-tabs-wrapper.style-dark.nav-button .nav-button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.posts-tabs-wrapper.style-dark.nav-button .nav-button:disabled {
  opacity: 0.3;
  background: rgba(0, 0, 0, 0.4);
}

/* עיצוב חיצים פשוטים בסגנון כהה */
.posts-tabs-wrapper.style-dark.nav-arrow .nav-button {
  color: #3498db; /* צבע כחול בסגנון כהה */
}

.posts-tabs-wrapper.style-dark.nav-arrow .nav-button:hover:not(:disabled) {
  color: #5dade2;
  opacity: 1;
}

/* === מיכל רקע עם סגנונות שונים === */
.posts-tabs-wrapper.with-background-container:not(.mobile-only-bg).style-dark {
  background: var(--bg-color, #2c3e50);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.posts-tabs-wrapper.with-background-container:not(.mobile-only-bg).style-light {
  background: var(--bg-color, #f8f9fa);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* סגנונות למיכל רקע רק במובייל */
@media screen and (max-width: 480px) {
  .posts-tabs-wrapper.with-background-container.mobile-only-bg.style-dark {
    background: var(--bg-color, #2c3e50);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .posts-tabs-wrapper.with-background-container.mobile-only-bg.style-light {
    background: var(--bg-color, #f8f9fa);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

/* === תיקונים נוספים לסגנון כהה עם ללא מסגרת === */
.posts-tabs-wrapper.style-dark .article-card.no-frame {
  background: transparent;
  box-shadow: none;
  border: none;
}

.posts-tabs-wrapper.style-dark .article-card.no-frame:hover {
  box-shadow: none;
  border: none;
}

/* === Responsive === */

/* טאבלטים */
@media screen and (max-width: 1024px) {
  .posts-tabs-wrapper {
    padding: 0 15px;
  }
  
  /* עיצוב כפתור */
  .posts-tabs-wrapper.nav-button .nav-button {
    width: 47px;  /* הגדלה ב-30% מ-36px */
    height: 70px; /* הגדלה ב-30% מ-54px */
    font-size: 36px; /* הגדלה ב-30% מ-28px */
    top: 75px; /* התאמה לטאבלט */
  }
  
  .posts-tabs-wrapper.nav-button .nav-prev {
    left: -42px; /* 90% מהכפתור בחוץ (47px * 0.9) */
  }
  
  .posts-tabs-wrapper.nav-button .nav-next {
    right: -42px; /* 90% מהכפתור בחוץ (47px * 0.9) */
  }
  
  /* עיצוב חץ פשוט נשאר כמו שהוא */
}

/* מסכים קטנים */
@media screen and (max-width: 768px) {
  /* נשאיר כאן רק עיצוב בסיסי, בלי התאמות מיוחדות */
  .posts-tabs-wrapper {
    padding: 0 10px;
  }
  
  /* הקטנת רווחים אנכיים בין הבלוקים במסכים קטנים */
  body.home .posts-tabs-wrapper .posts-tabs-section {
    margin: 0 auto !important;
  }
  
  .posts-tabs-wrapper.with-background-container:not(.mobile-only-bg) {
    padding: 16px 12px;
    /* margin מוגדר בקובץ הגלובלי */
  }
  
  .posts-tabs-navigation {
    margin-bottom: 10px;
  }
  
  /* התאמת מיקום חיצים פשוטים למסכים קטנים */
  .posts-tabs-wrapper.nav-arrow .nav-button {
    top: 50%; /* במרכז המיכל גם במסכים קטנים */
    font-size: 56px;
  }
  
  /* מסגרת פוקוס בולטת לניווט במקלדת גם בטאבלטים */
  .posts-tabs-wrapper.nav-arrow .nav-button:focus-visible {
    outline: 3px solid var(--primary-color-jhhd) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
  }
  
  /* הסתרת פוקוס בלחיצת עכבר בטאבלטים */
  .posts-tabs-wrapper.nav-arrow .nav-button:focus:not(:focus-visible),
  .posts-tabs-wrapper.nav-arrow .nav-button:active {
    outline: none;
    box-shadow: none;
  }
}

/* מובייל */
@media screen and (max-width: 480px) {
  .posts-tabs-wrapper {
    padding: 0;
    width: 100%;
    overflow: visible; /* מאפשר ללחצנים לבלוט מחוץ למיכל */
  }
  
  /* הקטנת רווחים אנכיים נוספת במסכים קטנים מאוד */
  body.home .posts-tabs-wrapper .posts-tabs-section {
    margin: 0 auto !important;
  }
  
  .posts-tabs-wrapper.with-background-container:not(.mobile-only-bg) {
    padding: 12px 8px;
    /* margin מוגדר בקובץ הגלובלי */
  }
  
  /* מיכל רקע רק במובייל - מפעיל את המיכל רקע */
  .posts-tabs-wrapper.with-background-container.mobile-only-bg {
    background: var(--bg-color, #f5f5f5);
    padding: 20px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* margin מוגדר בקובץ הגלובלי */
  }
  
  /* מיכל רקע רק במובייל ברוחב מלא */
  .posts-tabs-wrapper.with-background-container.mobile-only-bg.full-width-container {
    width: 100vw;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 10px;
    border-radius: 0;
    box-sizing: border-box;
  }
  
  /* מיכל רקע ברוחב מלא במובייל (כשהוא תמיד פעיל) */
  .posts-tabs-wrapper.with-background-container.full-width-container:not(.mobile-only-bg) {
    width: 100vw;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 0;
    border-radius: 0;
    box-sizing: border-box;
  }
  
  .posts-tabs-wrapper.full-width-container .posts-tabs-section {
    padding: 0 10px;
  }
  
  .posts-tabs-content {
    overflow: visible; /* מאפשר ללחצנים לבלוט */
  }
  
  /* תיקון מיקום מרכזי של הכתבות */
  .posts-carousel {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
  }
  
  .posts-track {
    display: flex;
    gap: 30px; /* רווח בין הכתבות */
    padding: 0 15px; /* padding לקצוות */
    width: auto;
  }
  
  /* כל כתבה תופסת רוחב מסך פחות padding של ה-track וmargin בטיחותי */
  .posts-track[data-columns] .carousel-item {
    flex: 0 0 calc(100vw - 60px) !important;
    width: calc(100vw - 60px) !important;
    min-width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    box-sizing: border-box;
  }
  
  /* התאמת הכרטיסיות - הכרטיס עצמו ממלא את כל רוחב ה-item */
  .posts-tabs-wrapper .article-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* חשוב למנוע חריגה של התוכן */
    box-sizing: border-box;
  }
  
  .posts-tabs-wrapper .article-card figure {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    /* יחס התמונה נשאר כמו שהוגדר בהגדרות הכלליות */
  }
  
  /* כותרת יותר קומפקטית */
  .posts-tabs-wrapper .article-title {
    font-size: 1rem;
    margin: 10px 12px 6px; /* מרווח קטן לפני המטא-דאטה */
    -webkit-line-clamp: 2;
  }
  
  /* מטא-דאטה במובייל */
  .posts-tabs-wrapper .article-meta {
    font-size: 0.75rem;
    margin: 0 12px 8px;
    gap: 6px;
  }
  
  /* === סרגל הטאבים - התאמה דינמית === */
  .posts-tabs-navigation {
    margin-bottom: 15px;
    padding: 0 10px;
    overflow: hidden;
  }
  
  .tabs-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    flex-wrap: nowrap; /* אסור לרדת לשורה הבאה */
    width: 100%;
  }
  
  /* הסתרת scrollbar */
  .tabs-list::-webkit-scrollbar {
    display: none;
  }
  
  .tabs-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .tab-item {
    flex: 1 1 auto;
    min-width: 0; /* מאפשר להתכווץ */
  }
  
  /* גודל פונט דינמי בהתאם למספר הטאבים */
  .tab-button {
    padding: 8px 4px;
    font-size: clamp(11px, 2.5vw, 14px); /* גודל דינמי */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
  }
  
  /* מסגרת פוקוס בולטת לניווט במקלדת גם במובייל */
  .tab-button:focus-visible {
    outline: 3px solid var(--primary-color-jhhd) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
  }
  
  /* הסתרת פוקוס בלחיצת עכבר במובייל */
  .tab-button:focus:not(:focus-visible),
  .tab-button:active,
  .tab-item.active .tab-button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
  
  /* התאמה למספר טאבים שונה */
  .tabs-list:has(.tab-item:nth-child(5)) .tab-button {
    font-size: 12px;
    padding: 8px 3px;
  }
  
  .tabs-list:has(.tab-item:nth-child(6)) .tab-button {
    font-size: 11px;
    padding: 8px 2px;
  }
  
  .tabs-list:has(.tab-item:nth-child(7)) .tab-button {
    font-size: 10px;
    padding: 8px 2px;
  }
  
  /* כפתורי ניווט מותאמים - עיצוב כפתור */
  .posts-tabs-wrapper.nav-button .nav-button {
    width: 42px;  /* הגדלה ב-30% מ-32px */
    height: 62px; /* הגדלה ב-30% מ-48px */
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 31px; /* הגדלה ב-30% מ-24px */
    top: 100px; /* מיקום מותאם למובייל */
    z-index: 10;
  }
  
  /* הלחצנים מתחילים מקצה המסך ממש */
  .posts-tabs-wrapper.nav-button .nav-prev {
    /* יציאה מה-padding של posts-tabs-section כדי להגיע לקצה המסך */
    left: -20px;
  }
  
  .posts-tabs-wrapper.nav-button .nav-next {
    /* יציאה מה-padding של posts-tabs-section כדי להגיע לקצה המסך */
    right: -20px;
  }
  
  /* כפתורי ניווט - עיצוב חץ פשוט במובייל */
  .posts-tabs-wrapper.nav-arrow .nav-button {
    width: 50px;
    height: 100px;
    font-size: 48px;
    top: 50%; /* במרכז המיכל גם במובייל */
  }
  
  /* מסגרת פוקוס בולטת לניווט במקלדת גם במובייל */
  .posts-tabs-wrapper.nav-arrow .nav-button:focus-visible {
    outline: 3px solid var(--primary-color-jhhd) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
  }
  
  /* הסתרת פוקוס בלחיצת עכבר במובייל */
  .posts-tabs-wrapper.nav-arrow .nav-button:focus:not(:focus-visible),
  .posts-tabs-wrapper.nav-arrow .nav-button:active {
    outline: none;
    box-shadow: none;
  }
  
  .posts-tabs-wrapper.nav-arrow .nav-prev {
    left: -30px; /* קרוב לקצה המסך */
  }
  
  .posts-tabs-wrapper.nav-arrow .nav-next {
    right: -30px; /* קרוב לקצה המסך */
  }
  
  /* התאמת המיכל הראשי */
  .posts-tabs-section {
    padding: 0 10px;
    overflow: visible; /* מאפשר ללחצנים לבלוט */
  }
  
  .section-title {
    font-size: 1.25rem;
    margin-bottom: 15px;
  }
}

/* === אנימציות === */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content.active .carousel-item {
  animation: slideIn 0.4s ease forwards;
  animation-delay: calc(var(--item-index, 0) * 0.05s);
}

/* === עיצוב נוסף לחווית משתמש === */

/* אינדיקטור טעינה */
.posts-tabs-wrapper.loading {
  opacity: 0.6;
  pointer-events: none;
}

.posts-tabs-wrapper.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--secondary-color, #435068);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* הדגשת טאב בעת מעבר */
.tab-item {
  position: relative;
}

.tab-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 3px;
  background: var(--secondary-color-jhhd);
  transition: transform 0.3s ease;
}

.tab-item:hover::after {
  transform: translateX(-50%) scaleX(0.8);
  background: var(--primary-color-jhhd);
}

.tab-item.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* ===== _featured-posts-split.css ===== */
/* בלוק פוסטים מובילים עם חלוקה - פוסט גדול ו-4 קטנים */
/* הערה: הגדרות רוחב ומרווחים עברו לקובץ הגלובלי _homepage-global-layout.css */

/* Wrapper ראשי */
.featured-posts-split-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* ביטול padding צידי - המיכל ימלא את כל רוחב הבלוק */
.featured-posts-split-wrapper .featured-posts-split-section.section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.home .featured-posts-split-wrapper .featured-posts-split-section.section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* הכותרת משתמשת בעיצוב המשותף מקובץ _homepage-common.css */

/* קונטיינר ראשי עם חלוקה */
.featured-posts-split-container {
    display: flex;
    gap: 15px;
    margin: 0 auto;
}

/* כאשר הפוסט הגדול בצד ימין - הפוך את הסדר */
.featured-posts-split-container.main-right {
    flex-direction: row-reverse;
}

/* עמודת הפוסט הראשי - 50% מהרוחב */
.main-post-column {
    flex: 1;
    width: 50%;
}

/* עמודת הפוסטים הקטנים - 50% מהרוחב */
.side-posts-column {
    flex: 1;
    width: 50%;
}

/* גריד לפוסטים הקטנים - 2x2 */
.side-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
    height: 100%;
}

/* כרטיסיית פוסט ראשי */
.main-post-card {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

/* כרטיסיית פוסט קטן */
.side-post-card {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.side-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

/* קונטיינר לתמונה עם יחס דינמי */
.post-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: var(--aspect-ratio, 1 / 1);
    overflow: hidden;
    background-color: #f0f0f0;
}

.post-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.main-post-card:hover .post-image-container img,
.side-post-card:hover .post-image-container img {
    transform: scale(1.05);
}

/* תוכן הפוסט */
.post-content {
    padding: 20px 20px 0 20px; /* ביטול המרווח התחתון - המרווחים בין הבלוקים מנוהלים בקובץ הגלובלי */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* תוכן הפוסט הגדול - ה-meta יהיה בתחתית */
.main-post-card .post-content {
    justify-content: space-between;
}

/* תוכן הפוסט הקטן - יותר קומפקטי */
.side-post-card .post-content {
    padding: 15px 15px 0 15px; /* ביטול המרווח התחתון - המרווחים בין הבלוקים מנוהלים בקובץ הגלובלי */
}

/* כותרת עלית (Super Title) - מעל הכותרת הראשית */
/* מיכל קבוע עם גובה מינימלי כדי שכל הכותרות יתחילו באותו גובה */
.featured-posts-split-container .super-title-container {
    min-height: 32px; /* גובה מינימלי - תופס מקום גם כשריק */
    display: block;
    margin-bottom: 0;
}

.featured-posts-split-container .super-title-link {
    text-decoration: none;
    display: inline-block;
    margin-bottom: 12px;
}

.featured-posts-split-container .super-title-tag {
    display: inline-block;
    background: #DE0100;
    color: #ffffff;
    padding: 4px 10px; /* גרסה מוקטנת */
    font-size: 0.7rem; /* גודל קטן יותר */
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    transition: opacity 0.3s ease;
}

.featured-posts-split-container .super-title-link:hover .super-title-tag {
    opacity: 0.9;
}

/* תגית קטגוריה הישנה (כבר לא בשימוש - הוחלף בכותרת עילית) */
.featured-posts-split-container .category-tag {
    display: none; /* מוסתר - לא בשימוש */
}

/* כותרת הפוסט הראשי */
.main-post-card .post-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px 0;
    color: var(--primary-text-color, #1a1a1a);
    transition: color 0.2s ease;
}

/* כותרת הפוסטים הקטנים */
.side-post-card .post-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 8px 0;
    color: var(--primary-text-color, #1a1a1a);
    transition: color 0.2s ease;
    
    /* גובה קבוע של 2 שורות */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

/* תקציר הפוסט הראשי */
.main-post-card .post-excerpt {
    font-size: 1.2rem; /* גדלה ב-20% מ-1rem */
    line-height: 1.5;
    color: #666;
    margin-bottom: 15px;
    
    /* הגבלה ל-5 שורות בדסקטופ */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* קישורים */
.main-post-card a,
.side-post-card a {
    text-decoration: none;
    color: inherit;
}

/* אפקט hover בוטל - הכותרת נשארת באותו צבע וללא קו תחתון */
.main-post-card a:hover .post-title,
.side-post-card a:hover .post-title {
    color: inherit !important; /* שומר על הצבע המקורי */
    text-decoration: none !important; /* ביטול קו תחתון */
    border-bottom: none !important; /* ביטול border תחתון */
}

.main-post-card a:hover,
.side-post-card a:hover {
    text-decoration: none !important; /* ביטול קו תחתון מהקישור */
    border-bottom: none !important; /* ביטול border תחתון מהקישור */
}

/* מטא-דאטה */
.post-meta {
    font-size: 1rem;
    color: #666;
    margin-top: auto;
    margin-bottom: 0; /* ביטול המרווח התחתון - המרווחים בין הבלוקים מנוהלים בקובץ הגלובלי */
    padding-top: 10px;
    padding-bottom: 5px; /* מרווח תחתון בדסקטופ */
    border-top: 1px solid #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.side-post-card .post-meta {
    font-size: 1rem;
    padding-top: 8px;
    padding-bottom: 5px; /* מרווח תחתון בדסקטופ */
}

.post-meta .author {
    font-weight: 500;
}

.post-meta .separator {
    color: #ccc;
}

.post-meta .date {
    color: #888;
}

/* סגנון כהה */
.featured-posts-split-container.style-dark {
    background: #2a2a2a;
    padding: 30px;
    border-radius: 8px;
    margin-top: -70px; /* הזזה למעלה כדי לכלול את הכותרת */
    padding-top: 80px; /* padding עליון מוגדל כדי לפנות מקום לכותרת */
}

/* ביטול הרקע האדום של הכותרת במצב כהה */
.featured-posts-split-section:has(.featured-posts-split-container.style-dark) .section-title {
    background-color: transparent !important;
    color: #FAFAFA !important;
    font-size: 2rem !important;
    padding-right: 30px !important; /* יישור עם הכתבות */
    padding-left: 30px !important; /* יישור עם הכתבות */
    margin-bottom: -5px !important; /* מרווח תחתון מוגדל */
    position: relative;
    z-index: 1; /* וידוא שהכותרת מעל הרקע */
}

.style-dark .main-post-card,
.style-dark .side-post-card {
    background: #333;
    color: #fff;
}

.style-dark .post-title {
    color: #fff;
}

.style-dark .post-excerpt,
.style-dark .post-meta {
    color: #ccc;
}

.style-dark .post-meta {
    border-top-color: #ccc;
}

/* כותרת עלית בסגנון כהה */
.featured-posts-split-container.style-dark .super-title-tag {
    background: #DE0100;
    color: #ffffff;
}

.featured-posts-split-container.style-dark .super-title-link:hover .super-title-tag {
    opacity: 0.9;
}

/* אפקט hover בוטל גם בסגנון כהה - הכותרת נשארת באותו צבע */
.featured-posts-split-container.style-dark a:hover .post-title {
    color: #fff !important; /* שומר על הצבע המקורי הלבן */
    text-decoration: none !important;
    border-bottom: none !important;
}

.featured-posts-split-container.style-dark a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* פינות מעוגלות */
.rounded-corners .main-post-card,
.rounded-corners .side-post-card {
    border-radius: 8px;
}

.rounded-corners .post-image-container {
    border-radius: 8px 8px 0 0;
}

/* כרטיסיות placeholder */
.main-post-card.placeholder,
.side-post-card.placeholder {
    opacity: 0.5;
    pointer-events: none;
}

.placeholder .post-image-container {
    background-color: #e0e0e0;
}

/* רספונסיביות */
@media (max-width: 1024px) {
    .featured-posts-split-container {
        gap: 20px;
    }
    
    .main-post-card .post-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    /* במובייל - הרקע מתפרש עד קצות המסך (כמו בבלוק all-posts-grid) */
    body.home .featured-posts-split-wrapper.full-width-container-mobile {
        width: 100vw !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        margin-left: calc(-1 * (100vw - 100%) / 2) !important;
        margin-right: calc(-1 * (100vw - 100%) / 2) !important;
        max-width: none !important;
        border-radius: 0;
        box-sizing: border-box !important;
        transform: none !important;
        padding: 0 !important;
    }
    
    /* ביטול הגדרות גלובליות של section-container */
    body.home .featured-posts-split-wrapper.full-width-container-mobile .wp-block-group.section-container,
    body.home .featured-posts-split-wrapper.full-width-container-mobile .featured-posts-split-section {
        max-width: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    /* במובייל - הפוסט הגדול למעלה, הקטנים למטה */
    .featured-posts-split-container {
        flex-direction: column;
        gap: 30px;
        padding: 20px var(--space-md, 1.5rem) 0; /* ביטול padding תחתון - המרווחים מנוהלים בקובץ הגלובלי */
        border-radius: 0 !important;
    }
    
    /* סגנון בהיר - רקע אפור בהיר */
    .featured-posts-split-container.style-light {
        background-color: #f8f8f8;
    }
    
    /* ביטול פינות עגולות במובייל */
    .featured-posts-split-container.style-dark {
        border-radius: 0 !important;
    }
    
    /* במובייל אין הבדל בין ימין לשמאל - תמיד עמודה */
    .featured-posts-split-container.main-right {
        flex-direction: column;
    }
    
    .main-post-column,
    .side-posts-column {
        width: 100%;
    }
    
    .side-posts-grid {
        gap: 15px;
    }
    
    /* התאמת מיכל כותרת עילית לכתבה הראשית במובייל */
    .main-post-card .super-title-container {
        min-height: 35px; /* גובה מעט גדול יותר לכתבה הראשית */
    }
    
    .main-post-card .super-title-tag {
        font-size: 0.75rem; /* גודל בינוני */
        padding: 4px 10px;
    }
    
    .main-post-card .post-title {
        font-size: 1.4rem;
    }
    
    .side-post-card .post-title {
        font-size: 1rem;
    }
    
    /* הקטנה של 30% בגודל הפונט של המטא-דאטה במובייל */
    .post-meta {
        font-size: 0.7rem;
        padding-bottom: 3px; /* מרווח תחתון במובייל */
    }
    
    .side-post-card .post-meta {
        font-size: 0.7rem;
        padding-bottom: 3px; /* מרווח תחתון במובייל */
    }
    
    /* הקטנת מרווחים במובייל */
    .featured-posts-split-section {
        padding: 0;
        /* margin מוגדר בקובץ הגלובלי */
    }
    
    /* הקטנת מרווח תחתון של הבלוק במובייל */
    .featured-posts-split-wrapper .featured-posts-split-section.section-container,
    body.home .featured-posts-split-wrapper .featured-posts-split-section.section-container {
        margin-bottom: 10px !important; /* הקטנה ב-10px מהגלובלי (20px - 10px) */
    }
    
    .post-content {
        padding: 5px 5px 0px 5px;
    }
    
    .side-post-card .post-content {
        padding: 5px 5px 0px 5px;
    }
    
    /* מרווח מעל wrapper כשיש style-dark - יוצר מרווח ריק מהבאנר שמעליו */
    .featured-posts-split-wrapper:has(.style-dark) {
        margin-top: 8px; /* מרווח ריק של 8px מהבאנר שמעליו */
    }
    
    /* עיצוב כהה במובייל - עדכון המרווחים */
    .featured-posts-split-container.style-dark {
        padding: 20px var(--space-md, 1.5rem) 30px; /* מרווח תחתון מוגדל ל-30px למניעת גלישה */
        margin-top: -70px; /* הזזה למעלה כדי לכלול את הכותרת */
        padding-top: 75px; /* padding עליון מוגדל כדי לפנות מקום לכותרת */
    }
    
    /* הוספת מרווח עליון לכותרת של הבלוק שאחרי פוסטים מובילים */
    .featured-posts-split-wrapper ~ * .section-title:first-of-type,
    body.home .featured-posts-split-wrapper ~ * .section-title:first-of-type {
        margin-top: 7px !important; /* הזזת הכותרת למטה - חצי מהמרווח הקודם */
    }
}

@media (max-width: 768px) {
    /* במובייל - פריסה מיוחדת ל-4 הכתבות הקטנות */
    .side-posts-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto;
        gap: 15px;
    }
    
    /* 2 הכתבות הראשונות - תופסות עמודה אחת כל אחת בשורה הראשונה */
    .side-posts-grid .side-post-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    
    .side-posts-grid .side-post-item:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }
    
    /* 2 הכתבות האחרונות - תופסות את כל הרוחב, כל אחת בשורה נפרדת */
    .side-posts-grid .side-post-item:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    
    .side-posts-grid .side-post-item:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
    }
    
    /* 2 הכתבות הראשונות - תצוגה אנכית (תמונה מעל, טקסט מתחת) */
    .side-posts-grid .side-post-item:nth-child(1) .side-post-card,
    .side-posts-grid .side-post-item:nth-child(2) .side-post-card {
        flex-direction: column;
        height: auto;
    }
    
    .side-posts-grid .side-post-item:nth-child(1) .post-image-container,
    .side-posts-grid .side-post-item:nth-child(2) .post-image-container {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: auto;
    }
    
    /* הקטנת padding ב-2 הכתבות הראשונות */
    .side-posts-grid .side-post-item:nth-child(1) .post-content,
    .side-posts-grid .side-post-item:nth-child(2) .post-content {
        padding: 5px 5px 0px 5px;
    }
    
    /* התאמת מיכל כותרת עילית ב-2 הכתבות הראשונות */
    .side-posts-grid .side-post-item:nth-child(1) .super-title-container,
    .side-posts-grid .side-post-item:nth-child(2) .super-title-container {
        min-height: 28px; /* גובה קטן יותר למובייל */
    }
    
    .side-posts-grid .side-post-item:nth-child(1) .super-title-tag,
    .side-posts-grid .side-post-item:nth-child(2) .super-title-tag {
        font-size: 0.65rem; /* גודל קטן יותר */
        padding: 3px 8px;
    }
    
    /* הקטנת כותרת ב-2 הכתבות הראשונות */
    .side-posts-grid .side-post-item:nth-child(1) .post-title,
    .side-posts-grid .side-post-item:nth-child(2) .post-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
        min-height: 2.5em;
    }
    
    /* 2 הכתבות האחרונות - תצוגה אופקית (תמונה לצד טקסט) */
    .side-posts-grid .side-post-item:nth-child(3) .side-post-card,
    .side-posts-grid .side-post-item:nth-child(4) .side-post-card {
        flex-direction: row;
        height: 120px; /* גובה קשיח של 120px */
    }
    
    /* הבטחת רוחב קבוע לאלמנט הקישור של התמונה */
    .side-posts-grid .side-post-item:nth-child(3) .image-link,
    .side-posts-grid .side-post-item:nth-child(4) .image-link {
        display: block;
        width: 120px; /* רוחב קשיח של 120px */
        height: 120px; /* גובה קשיח של 120px */
        flex-shrink: 0;
    }
    
    /* תמונה קטנה ריבועית לכתבות האופקיות */
    .side-posts-grid .side-post-item:nth-child(3) .post-image-container,
    .side-posts-grid .side-post-item:nth-child(4) .post-image-container {
        width: 120px; /* רוחב קשיח של 120px */
        height: 120px; /* גובה קשיח של 120px */
        flex-shrink: 0;
    }
    
    /* וידוא ש-img ממלא את כל הגובה */
    .side-posts-grid .side-post-item:nth-child(3) .post-image-container img,
    .side-posts-grid .side-post-item:nth-child(4) .post-image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }
    
    /* התאמת התוכן לכתבות האופקיות */
    .side-posts-grid .side-post-item:nth-child(3) .post-content,
    .side-posts-grid .side-post-item:nth-child(4) .post-content {
        padding: 5px 5px 0 5px; /* ביטול padding תחתון - המרווחים מנוהלים בקובץ הגלובלי */
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: visible; /* וידוא שהכותרת העילית לא נחתכת */
    }
    
    /* התאמת מיכל כותרת עילית בכתבות האופקיות - גובה מינימלי מותאם */
    .side-posts-grid .side-post-item:nth-child(3) .super-title-container,
    .side-posts-grid .side-post-item:nth-child(4) .super-title-container {
        min-height: 28px; /* גובה מתאים לכותרת עילית - תואם לבלוק האופקי */
        overflow: visible; /* וידוא שהכותרת העילית לא נחתכת */
    }
    
    /* הקטנת המרווח בין הכותרת העילית לכותרת הראשית */
    .side-posts-grid .side-post-item:nth-child(3) .super-title-link,
    .side-posts-grid .side-post-item:nth-child(4) .super-title-link {
        margin-bottom: 4px; /* הקטנה מ-12px ל-4px */
    }
    
    .side-posts-grid .side-post-item:nth-child(3) .super-title-tag,
    .side-posts-grid .side-post-item:nth-child(4) .super-title-tag {
        font-size: 0.6rem; /* גודל קטן מאוד */
        padding: 2px 6px;
    }
    
    /* הקטנת הכותרת בכתבות האופקיות */
    .side-posts-grid .side-post-item:nth-child(3) .post-title,
    .side-posts-grid .side-post-item:nth-child(4) .post-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
        min-height: 2.4em;
    }
    
    /* התאמת הפונט במטא-דאטה */
    .side-posts-grid .side-post-item:nth-child(3) .post-meta,
    .side-posts-grid .side-post-item:nth-child(4) .post-meta {
        font-size: 0.7rem;
        padding-top: 1px; /* הקטנה לחצי - מ-2px ל-1px */
        margin-bottom: 0; /* וידוא שאין מרווח תחתון */
    }
    
    /* פינות מעוגלות לכתבות האופקיות */
    .rounded-corners .side-posts-grid .side-post-item:nth-child(3) .post-image-container,
    .rounded-corners .side-posts-grid .side-post-item:nth-child(4) .post-image-container {
        border-radius: 8px 0 0 8px;
    }
    
    /* כותרת הפוסט הראשי */
    .main-post-card .post-title {
        font-size: 1.3rem;
    }
    
    .main-post-card .post-excerpt {
        font-size: 1rem; /* חזרה לגודל המקורי במובייל */
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    /* במובייל קטן מאוד - התאמות נוספות */
    
    .featured-posts-split-container {
        padding: 20px var(--space-sm, 1rem) 0; /* ביטול padding תחתון - המרווחים מנוהלים בקובץ הגלובלי */
        border-radius: 0 !important;
    }
    
    /* מרווח מעל wrapper כשיש style-dark - יוצר מרווח ריק מהבאנר שמעליו */
    .featured-posts-split-wrapper:has(.style-dark) {
        margin-top: 10px; /* מרווח ריק של 8px מהבאנר שמעליו */
    }
    
    /* עיצוב כהה במובייל קטן - אותם מרווחים */
    .featured-posts-split-container.style-dark {
        padding: 20px var(--space-sm, 1rem) 30px; /* מרווח תחתון מוגדל ל-30px למניעת גלישה */
        margin-top: -70px; /* הזזה למעלה כדי לכלול את הכותרת */
        padding-top: 75px; /* padding עליון מוגדל כדי לפנות מקום לכותרת */
        border-radius: 0 !important;
    }
    
    /* הקטנת מרווח תחתון של הבלוק במסכים קטנים */
    .featured-posts-split-wrapper .featured-posts-split-section.section-container,
    body.home .featured-posts-split-wrapper .featured-posts-split-section.section-container {
        margin-bottom: 7px !important; /* הקטנה ב-8px מהגלובלי (15px - 8px) */
    }
    
    /* הוספת מרווח עליון לכותרת של הבלוק שאחרי פוסטים מובילים */
    .featured-posts-split-wrapper ~ * .section-title:first-of-type,
    body.home .featured-posts-split-wrapper ~ * .section-title:first-of-type {
        margin-top: 7px !important; /* הזזת הכותרת למטה - חצי מהמרווח הקודם */
    }
    
    .main-post-card .post-title {
        font-size: 1.2rem;
    }
    
    .post-content {
        padding: 5px 5px 0px 5px;
    }
    
    /* הקטנת מרווחים נוספת במובייל קטן */
    .featured-posts-split-section {
        padding: 0;
        /* margin מוגדר בקובץ הגלובלי */
    }
    
    /* הקטנת הגודל של 2 הכתבות הראשונות */
    .side-posts-grid .side-post-item:nth-child(1) .post-title,
    .side-posts-grid .side-post-item:nth-child(2) .post-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
        min-height: 2.4em;
    }
    
    .side-posts-grid .side-post-item:nth-child(1) .post-content,
    .side-posts-grid .side-post-item:nth-child(2) .post-content {
        padding: 5px 5px 0px 5px;
    }
    
    .side-posts-grid .side-post-item:nth-child(1) .post-meta,
    .side-posts-grid .side-post-item:nth-child(2) .post-meta {
        font-size: 0.7rem;
    }
}

/* אנימציות לטעינה */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-post-card {
    animation: fadeInUp 0.5s ease backwards;
}

.side-post-card {
    animation: fadeInUp 0.5s ease backwards;
}

/* עיכוב הדרגתי לאנימציה של הפוסטים הקטנים */
.side-post-item:nth-child(1) .side-post-card { animation-delay: 0.1s; }
.side-post-item:nth-child(2) .side-post-card { animation-delay: 0.15s; }
.side-post-item:nth-child(3) .side-post-card { animation-delay: 0.2s; }
.side-post-item:nth-child(4) .side-post-card { animation-delay: 0.25s; }

/* התאמות ליחסי תמונה שונים */
.featured-posts-split-container[data-aspect-ratio="3:2"] .post-image-container {
    aspect-ratio: 3 / 2;
}

.featured-posts-split-container[data-aspect-ratio="4:3"] .post-image-container {
    aspect-ratio: 4 / 3;
}

/* במובייל - יחס תמונה קבוע לפוסט הראשי */
@media (max-width: 768px) {
    .main-post-card .post-image-container {
        aspect-ratio: 16 / 9;
    }
}



/* ===== _mixed-layout.css ===== */
/**
 * === בלוק פריסה משולבת ===
 * בלוק עם כתבות אנכיות בימין וכתבות אופקיות בשמאל
 * הערה: הגדרות רוחב ומרווחים עברו לקובץ הגלובלי _homepage-global-layout.css
 */

/* Wrapper ראשי */
.mixed-layout-wrapper {
    transition: all 0.3s ease;
}

/* מיכל רקע */
.mixed-layout-container.has-background-container {
    padding: 40px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    /* padding נספר בתוך מגבלת הרוחב */
    /* margin-top הוסר - מרווח מוגדר ברמת הגלובלי */
}

/* מסגרת למיכל */
.mixed-layout-container.has-border {
    border-style: solid;
}

/* הגדרות רוחב עברו לקובץ הגלובלי */

/* ביטול padding צידי - המיכל ימלא את כל רוחב הבלוק */
.mixed-layout-wrapper .mixed-layout-section.section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.home .mixed-layout-wrapper .mixed-layout-section.section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* התאמה כשיש מיכל רקע - לא צריך יותר שינויים מיוחדים */
.mixed-layout-container.has-background-container {
    /* הסגנונות כבר מוגדרים למעלה */
}

/* מיכל ראשי מחולק לשני חלקים */
.mixed-layout-container {
    display: flex;
    gap: 20px;
    width: 100%;
    /* margin-top הוסר - מרווח מוגדר ברמת הגלובלי */
    align-items: stretch;
}

/* כאשר layout_direction הוא ltr - הפוך את הסדר */
.mixed-layout-container.layout-ltr {
    flex-direction: row-reverse;
}

/* חלק ימני - כתבות אנכיות (דינמי לפי --split-ratio) */
.mixed-layout-container .vertical-posts-column {
    flex: 0 0 calc(var(--split-ratio, 50%) - 10px);
    width: calc(var(--split-ratio, 50%) - 10px);
    display: flex;
    align-items: flex-start;
}

/* חלק שמאלי - כתבות אופקיות (דינמי - השלמה ל-100%) */
.mixed-layout-container .horizontal-posts-column {
    flex: 0 0 calc((100% - var(--split-ratio, 50%)) - 10px);
    width: calc((100% - var(--split-ratio, 50%)) - 10px);
}

/* === חלק ימני - כתבות אנכיות === */
.vertical-posts-column .posts-vertical-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

/* תמיכה ב-3 כתבות */
.vertical-posts-column .posts-vertical-container.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* תמיכה ב-4 כתבות */
.vertical-posts-column .posts-vertical-container.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* כרטיסיית כתבה אנכית */
.vertical-posts-column .article-card-square {
    display: flex;
    flex-direction: column;
    background: var(--cards-bg-color, var(--white));
    transition: var(--transition-default);
    overflow: hidden;
}

.style-dark .vertical-posts-column .article-card-square {
    background: #545454;
    color: var(--white);
}

.vertical-posts-column .article-card-square:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}

/* תמונה בכרטיס אנכי */
.vertical-posts-column .square-image-container {
    aspect-ratio: var(--aspect-ratio, 1 / 1);
    overflow: hidden;
    width: 100%;
    flex-shrink: 0;
}

.vertical-posts-column .square-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-default);
}

.vertical-posts-column .article-card-square:hover img {
    transform: scale(1.05);
}

/* תוכן כרטיס אנכי */
.vertical-posts-column .article-content {
    padding: 12px 15px 0 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

/* התאמות ל-4 כתבות - פדינג קטן יותר */
.vertical-posts-column .posts-vertical-container.cols-4 .article-content {
    padding: 10px 10px 0 10px;
}

.vertical-posts-column .article-content.no-frame {
    padding: 12px 0 0 0;
}

.vertical-posts-column .article-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 12px 0;
    color: var(--heading-color, #333);

    /* הגבלה ל-3 שורות עם ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.75em; /* מקום ל-3 שורות */
}

/* התאמות ל-4 כתבות - כותרת קטנה יותר */
.vertical-posts-column .posts-vertical-container.cols-4 .article-title {
    font-size: 1rem;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 5.2em; /* מקום ל-4 שורות עם פונט קטן יותר */
}

.vertical-posts-column .article-meta {
    font-size: clamp(0.64rem, 1.53vw, 0.72rem);
    color: var(--gray-medium);
    margin-top: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    line-height: 1.1;
}

.style-dark .vertical-posts-column .article-meta {
    color: #ccc;
}

/* === חלק שמאלי - כתבות אופקיות === */
.horizontal-posts-column .posts-horizontal-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* כרטיסיית כתבה אופקית */
.horizontal-posts-column .most-read-articles-grid {
    display: flex;
    height: 155px;
    align-items: stretch;
}

.horizontal-posts-column .wp-block-column {
    width: 100%;
}

.horizontal-posts-column .most-read-article {
    display: flex;
    background: var(--cards-bg-color, var(--white));
    transition: var(--transition-default);
    overflow: hidden;
    align-items: stretch;
    height: 100%;
}

.style-dark .horizontal-posts-column .most-read-article {
    background: #545454;
    color: var(--white);
}

.horizontal-posts-column .most-read-article:hover {
    transform: translateX(-5px);
    box-shadow: var(--box-shadow);
}

/* כיוון תצוגה */
.horizontal-posts-column .direction-ltr .most-read-article {
    flex-direction: row;
}

.horizontal-posts-column .direction-rtl .most-read-article {
    flex-direction: row-reverse;
}

/* תמונה בכרטיס אופקי */
.horizontal-posts-column .most-read-image {
    flex: 0 0 40%;
    margin: 0;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.horizontal-posts-column .most-read-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: var(--transition-default);
}

.horizontal-posts-column .most-read-article:hover img {
    transform: scale(1.05);
}

/* תוכן כרטיס אופקי */
.horizontal-posts-column .most-read-content {
    flex: 1;
    padding: 5px 20px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.horizontal-posts-column .most-read-content.no-frame {
    padding: 5px 15px 0 15px;
}

.horizontal-posts-column .most-read-title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 10px 0;
    color: var(--heading-color, #333);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.6em; /* מקום לשתי שורות */
}

.horizontal-posts-column .most-read-excerpt {
    font-size: 0.9rem;
    color: var(--gray-dark);
    margin-bottom: 10px;
    line-height: 1.4;
}

.style-dark .horizontal-posts-column .most-read-excerpt {
    color: #ccc;
}

.horizontal-posts-column .most-read-meta {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    color: var(--gray-medium);
    margin-top: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    line-height: 1.2;
}

.style-dark .horizontal-posts-column .most-read-meta {
    color: #ccc;
}

/* כותרת עלית (Super Title) לכתבות אנכיות - מעל הכותרת הראשית */
.mixed-layout-container .vertical-posts-column .super-title-container {
    min-height: 32px;
    display: block;
    margin-bottom: 0;
}

.mixed-layout-container .vertical-posts-column .super-title-link {
    text-decoration: none;
    display: inline-block;
    margin-bottom: 12px;
}

.mixed-layout-container .vertical-posts-column .super-title-tag {
    display: inline-block;
    background: #DE0100;
    color: #ffffff;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    transition: opacity 0.3s ease;
}

.mixed-layout-container .vertical-posts-column .super-title-link:hover .super-title-tag {
    opacity: 0.9;
}

/* כותרת עילית לכתבות אופקיות - עיצוב אחיד עם הכתבות האנכיות */
.mixed-layout-container .category-tag {
    display: inline-block !important;
    background: #DE0100;
    color: #ffffff;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    text-decoration: none;
    transition: opacity 0.3s ease;
    align-self: flex-start !important; /* רוחב רק לפי התוכן */
    width: fit-content !important; /* תמיכה נוספת */
    max-width: fit-content !important; /* ודוא שאין דריסה */
    margin-right: 0 !important; /* יישור לימין (RTL) */
    margin-left: auto !important; /* דוחף את האלמנט לימין */
}

.mixed-layout-container .category-tag:hover {
    opacity: 0.9;
}

/* סגנון כהה - רקע כהה למיכל הראשי */
.mixed-layout-container.style-dark {
    background: #2a2a2a;
    padding: 30px;
    border-radius: 8px;
}

/* כותרת עילית בסגנון כהה */
.mixed-layout-container.style-dark .vertical-posts-column .super-title-tag {
    background: #DE0100;
    color: #ffffff;
}

.mixed-layout-container.style-dark .vertical-posts-column .super-title-link:hover .super-title-tag {
    opacity: 0.9;
}

/* כותרת עילית בסגנון כהה */
.mixed-layout-container.style-dark .category-tag {
    background: #DE0100;
    color: #ffffff;
}

.mixed-layout-container.style-dark .category-tag:hover {
    opacity: 0.9;
}

/* דריסה ממוקדת: תגיות בכתבות אופקיות בתוך mixed-layout יהיו זהות לאנכיות */
.mixed-layout-container .most-read-articles-grid .category-tag {
    display: inline-block !important;
    background: #DE0100;
    color: #ffffff;
    font-size: 0.7rem;
    padding: 4px 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    align-self: flex-start !important; /* רוחב רק לפי התוכן */
    width: fit-content !important; /* תמיכה נוספת */
    max-width: fit-content !important; /* ודוא שאין דריסה */
    margin-right: 0 !important; /* יישור לימין (RTL) */
    margin-left: auto !important; /* דוחף את האלמנט לימין */
}

.mixed-layout-container .most-read-articles-grid .category-tag:hover {
    opacity: 0.9;
}

/* תיקון סלקטור למצב כהה כשהמחלקות על אותו אלמנט */
.mixed-layout-container.style-dark .most-read-articles-grid .category-tag {
    display: inline-block !important;
    background: #DE0100;
    color: #ffffff;
    font-size: 0.7rem;
    padding: 4px 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    align-self: flex-start !important; /* רוחב רק לפי התוכן */
    width: fit-content !important; /* תמיכה נוספת */
    max-width: fit-content !important; /* ודוא שאין דריסה */
    margin-right: 0 !important; /* יישור לימין (RTL) */
    margin-left: auto !important; /* דוחף את האלמנט לימין */
}

.mixed-layout-container.style-dark .most-read-articles-grid .category-tag:hover {
    opacity: 0.9;
}

/* צבעי טקסט במצב כהה */
.style-dark .vertical-posts-column .article-title,
.style-dark .horizontal-posts-column .most-read-title {
    color: #fff;
}

.style-dark a:hover .article-title,
.style-dark a:hover .most-read-title {
    color: #4db8ff;
}

/* צבע אחיד לכותרות בקישורים */
a .vertical-posts-column .article-title,
a .horizontal-posts-column .most-read-title {
    color: var(--heading-color, #333);
}

a:hover .vertical-posts-column .article-title,
a:hover .horizontal-posts-column .most-read-title {
    color: var(--primary-color, #0073aa);
}

/* פינות מעוגלות */
.rounded-corners .article-card-square,
.rounded-corners .most-read-article {
    border-radius: 10px;
    overflow: hidden;
}

.rounded-corners .square-image-container,
.rounded-corners .most-read-image {
    border-radius: 0;
}

/* placeholder לכרטיסיות ריקות */
.mixed-layout-container .placeholder {
    opacity: 0.3;
    pointer-events: none;
}

/* הפרדה בין פריטים */
.mixed-layout-container .separator {
    margin: 0 8px;
    color: var(--gray-medium);
}

/* התאמת גובה לתמונות אופקיות לפי יחס */
.horizontal-posts-column [data-aspect-ratio="16:9"] .most-read-image {
    min-height: 120px;
}

.horizontal-posts-column [data-aspect-ratio="4:3"] .most-read-image {
    min-height: 140px;
}

.horizontal-posts-column [data-aspect-ratio="3:2"] .most-read-image {
    min-height: 130px;
}

.horizontal-posts-column [data-aspect-ratio="1:1"] .most-read-image {
    min-height: 160px;
}

/* === Responsive === */

/* התאמת מיכל רקע ועיצוב כהה בטאבלט */
@media (max-width: 1024px) {
    .mixed-layout-container.has-background-container {
        padding: 30px 15px;
    }

    .mixed-layout-container.style-dark {
        padding: 25px;
    }
}

/* טאבלט */
@media screen and (max-width: 1024px) {
    .mixed-layout-container {
        gap: 20px;
    }

    .vertical-posts-column .posts-vertical-container {
        gap: 15px;
    }

    .horizontal-posts-column .posts-horizontal-wrapper {
        gap: 15px;
    }
}

/* התאמת מיכל רקע ועיצוב כהה במובייל */
@media (max-width: 768px) {
    .mixed-layout-container.has-background-container {
        padding: 25px 12px;
        border-radius: 6px;
    }

    body.home .mixed-layout-container.has-background-container {
        max-width: 100% !important;
        width: auto !important;
    }

    .mixed-layout-container.style-dark {
        padding: 20px;
        border-radius: 6px;
    }
}

/* טאבלט קטן */
@media screen and (max-width: 768px) {
    .mixed-layout-container {
        flex-direction: column !important;
        /* חשוב: במובייל תמיד עמודה */
        gap: 10px;
    }

    .mixed-layout-container .vertical-posts-column,
    .mixed-layout-container .horizontal-posts-column {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* התאמה ל-3 כתבות בטאבלט - 2 עמודות */
    .vertical-posts-column .posts-vertical-container.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* התאמה ל-4 כתבות בטאבלט - 2 עמודות */
    .vertical-posts-column .posts-vertical-container.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* במובייל - התמונה באופקי תהיה מעל */
    .horizontal-posts-column .most-read-article {
        flex-direction: column !important;
    }

    .horizontal-posts-column .most-read-articles-grid {
        height: auto;
        /* בטל גובה קבוע במובייל */
        min-height: 250px;
    }

    .horizontal-posts-column .most-read-image {
        flex: 1 1 auto;
        width: 100%;
        height: 200px;
    }
}

/* התאמת מיכל רקע ועיצוב כהה במסכים קטנים */
@media (max-width: 600px) {
    .mixed-layout-container.has-background-container {
        padding: 20px 10px;
    }

    .mixed-layout-container.style-dark {
        padding: 15px;
    }
}

/* התאמת מיכל רקע ועיצוב כהה במסכים קטנים מאוד */
@media (max-width: 400px) {
    .mixed-layout-container.has-background-container {
        padding: 15px 8px;
        border-radius: 4px;
    }

    body.home .mixed-layout-container.has-background-container {
        max-width: 100% !important;
        width: auto !important;
    }

    .mixed-layout-container.style-dark {
        padding: 12px;
        border-radius: 4px;
    }
}

/* מובייל */
@media screen and (max-width: 480px) {
    .vertical-posts-column .posts-vertical-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* גם ב-3 כתבות - עדיין שתי עמודות במובייל קטן */
    .vertical-posts-column .posts-vertical-container.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* גם ב-4 כתבות - עדיין שתי עמודות במובייל קטן */
    .vertical-posts-column .posts-vertical-container.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .horizontal-posts-column .posts-horizontal-wrapper {
        gap: 20px;
    }

    .vertical-posts-column .article-content,
    .horizontal-posts-column .most-read-content {
        padding: 12px;
    }

    .vertical-posts-column .article-title,
    .horizontal-posts-column .most-read-title {
        font-size: 1rem;
    }

    .horizontal-posts-column .most-read-excerpt {
        font-size: 0.9rem;
    }
}

/* === מובייל משופר: פריסה כמו featured-posts-split (עד 768px) === */
@media (max-width: 768px) {

    /* חלק אנכי: הכתבה הראשונה גדולה, השתיים הבאות בשתי עמודות */
    .vertical-posts-column .posts-vertical-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        /* תאום ריווח עם האופקי */
    }

    /* פריט ראשון גדול ברוחב מלא */
    .vertical-posts-column .posts-vertical-container>*:first-child {
        grid-column: 1 / -1;
    }
    
    /* הוספת רקע לכל הכרטיסיות האנכיות במובייל */
    .vertical-posts-column .article-card-square {
        background: var(--cards-bg-color, #ffffff) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        border-radius: 8px !important;
    }

    .vertical-posts-column .posts-vertical-container>*:first-child .square-image-container {
        aspect-ratio: 16 / 9;
    }

    .vertical-posts-column .posts-vertical-container>*:first-child .article-title {
        font-size: 1.2rem;
        font-weight: 700;
        max-height: 4.2em;
    }

    /* פריטים 2-3 בעמודה כפולה (ברירת מחדל של repeat(2,1fr)) */
    .vertical-posts-column .posts-vertical-container>*:nth-child(2) .square-image-container,
    .vertical-posts-column .posts-vertical-container>*:nth-child(3) .square-image-container {
        aspect-ratio: 1 / 1;
    }

    .vertical-posts-column .posts-vertical-container>*:nth-child(2) .article-title,
    .vertical-posts-column .posts-vertical-container>*:nth-child(3) .article-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
        min-height: 2.8em;
    }

    .vertical-posts-column .posts-vertical-container>*:nth-child(2) .article-content,
    .vertical-posts-column .posts-vertical-container>*:nth-child(3) .article-content {
        padding: 12px;
    }

    /* חלק אופקי: כל שאר הכתבות אופקיות (תמונה 100px + טקסט) */
    .mixed-layout-container .horizontal-posts-column .posts-horizontal-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mixed-layout-container .horizontal-posts-column .most-read-articles-grid {
        flex-direction: column !important;
        gap: 10px !important;
        /* התאמת ריווח בין כתבות אופקיות */
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    .mixed-layout-container .horizontal-posts-column .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mixed-layout-container .horizontal-posts-column .most-read-article {
        flex-direction: row !important;
        /* לא להפוך את הראשונה לאנכית */
        height: 100px !important;
        margin: 0 !important;
        width: 100% !important;
        background: var(--cards-bg-color, #ffffff) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        border-radius: 8px !important;
    }

    .mixed-layout-container .horizontal-posts-column .most-read-image-link {
        aspect-ratio: 1 / 1 !important;
        flex-basis: 100px !important;
        width: 100px !important;
        height: 100px !important;
        flex-shrink: 0;
    }

    .mixed-layout-container .horizontal-posts-column .most-read-image {
        width: 100px !important;
        height: 100px !important;
        margin: 0 !important;
        border-radius: 8px 0 0 8px !important;
        overflow: hidden !important;
    }

    .mixed-layout-container .horizontal-posts-column .most-read-content {
        flex: 1;
        padding: 8px 12px !important;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* כותרות ומטא בכתבות האופקיות */
    .mixed-layout-container .horizontal-posts-column .most-read-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 2.4em; /* מקום לשתי שורות במובייל */
        margin: 0 0 6px 0 !important;
    }

    .mixed-layout-container .horizontal-posts-column .most-read-meta {
        font-size: clamp(0.7rem, 1.5vw, 0.8rem) !important;
        margin-top: auto !important;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
        line-height: 1.1;
    }

    /* דריסות ספציפיות: התמודדות עם כללי first-child שמקורם ב-_posts-horizontal.css */
    .mixed-layout-container .horizontal-posts-column .most-read-articles-grid .wp-block-column:first-child .most-read-article {
        flex-direction: row !important;
        height: 100px !important;
    }

    .mixed-layout-container .horizontal-posts-column .most-read-articles-grid .wp-block-column:first-child .most-read-image-link {
        aspect-ratio: 1 / 1 !important;
        flex-basis: 100px !important;
        width: 100px !important;
        height: 100px !important;
        flex-shrink: 0;
    }

    .mixed-layout-container .horizontal-posts-column .most-read-articles-grid .wp-block-column:first-child .most-read-image {
        width: 100px !important;
        height: 100px !important;
        margin: 0 !important;
    }

    .mixed-layout-container .horizontal-posts-column .most-read-articles-grid .wp-block-column:first-child .most-read-content {
        padding: 8px 12px !important;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .mixed-layout-container .horizontal-posts-column .most-read-articles-grid .wp-block-column:first-child .most-read-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 2.4em; /* מקום לשתי שורות במובייל */
        margin: 0 0 6px 0 !important;
    }

    /* === כלל חדש: החל מהפריט הרביעי בעמודה האנכית — העבר לאופקי ושורה מלאה === */
    .vertical-posts-column .posts-vertical-container>*:nth-child(n+4) {
        grid-column: 1 / -1;
        /* תופס שורה מלאה */
    }

    .vertical-posts-column .posts-vertical-container>*:nth-child(n+4) .article-card-square {
        flex-direction: row;
        /* אופקי */
        height: 100px;
        /* גובה קומפקטי */
    }

    .vertical-posts-column .posts-vertical-container>*:nth-child(n+4) .image-link {
        display: block;
        width: 100px;
        height: 100px;
        flex-shrink: 0;
    }

    .vertical-posts-column .posts-vertical-container>*:nth-child(n+4) .square-image-container {
        width: 100px;
        height: 100px;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }

    .vertical-posts-column .posts-vertical-container>*:nth-child(n+4) .article-content {
        flex: 1;
        padding: 8px 12px;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .vertical-posts-column .posts-vertical-container>*:nth-child(n+4) .article-title {
        font-size: 1rem;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0 0 6px 0;
    }

    .vertical-posts-column .posts-vertical-container>*:nth-child(n+4) .article-meta {
        font-size: clamp(0.7rem, 1.5vw, 0.8rem);
        margin-top: auto;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
        line-height: 1.1;
    }
}

/* ===== _dual-banner-display.css ===== */
/**
 * עיצוב בלוק זוג באנרים (דסקטופ + מובייל)
 * TTFC Homepage Manager
 */

/* === מיכל הבלוק === */
.dual-banner-display-wrapper {
    max-width: 1200px;
    margin: -20px auto 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dual-banner-display-block {
    margin-top: 5px;
    margin-bottom: 30px;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

/* תמיד ללא פינות עגולות */
.dual-banner-display-block .ttfc-banner,
.dual-banner-display-block .ttfc-banner-wrapper {
    border-radius: 0 !important;
}

/* מניעת מתיחה של התמונות והבאנרים */
.dual-banner-display-block .ttfc-banner {
    max-width: 100%;
    width: auto !important; /* שמירה על גודל מקורי */
    display: inline-block;
    margin: 0 auto;
}

.dual-banner-display-block .ttfc-banner img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

.dual-banner-display-block .ttfc-banner a {
    display: inline-block;
    max-width: 100%;
}

/* === זוג באנרים מוגדר מראש === */
/* הבאנרים הכפולים מהמערכת כבר מוגדרים עם ttfc-banner-responsive_* */
/* לא צריך CSS נוסף - המערכת כבר מטפלת בזה */

/* === זוג באנרים גמיש (custom) === */
.custom-dual-wrapper {
    position: relative;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.custom-dual-banner {
    position: relative;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

/* באנר דסקטופ - מוצג בדסקטופ - מוגבל לרוחב המקסימלי */
.custom-dual-banner .ttfc-banner-desktop {
    display: block;
    max-width: 1200px; /* מגביל לרוחב התוכן */
    width: 100%;
}

.custom-dual-banner .ttfc-banner-desktop .ttfc-banner {
    width: 100% !important;
    max-width: 100%;
}

.custom-dual-banner .ttfc-banner-desktop img {
    width: 100%; /* מלא את הרוחב הזמין */
    max-width: 100%;
    height: auto; /* שמירה על יחס גובה-רוחב */
    object-fit: contain; /* התאמה בתוך הגבולות */
}

/* באנר מובייל - מוסתר בדסקטופ */
.custom-dual-banner .ttfc-banner-mobile {
    display: none;
    max-width: 100%;
    width: auto;
}

.custom-dual-banner .ttfc-banner-mobile .ttfc-banner {
    width: auto !important;
    max-width: 100%;
}

.custom-dual-banner .ttfc-banner-mobile img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* מעבר למובייל */
@media (max-width: 768px) {
    /* הסתר דסקטופ */
    .custom-dual-banner .ttfc-banner-desktop {
        display: none;
    }
    
    /* הצג מובייל */
    .custom-dual-banner .ttfc-banner-mobile {
        display: block;
    }
}

/* === Placeholder === */
.dual-banner-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 20px;
    text-align: center;
    color: white;
    border-radius: 0;
}

.dual-banner-placeholder .placeholder-content h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: white;
}

.dual-banner-placeholder .placeholder-content p {
    font-size: 16px;
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.9);
}

/* === שגיאות === */
.banner-error {
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    margin: 10px 0;
}

/* === התאמות רספונסיביות === */
/* בדסקטופ - מגבלת רוחב של 1200px עם padding */
@media (min-width: 769px) {
    /* הגבלת רוחב לכל הבאנרים בדסקטופ */
    .dual-banner-display-wrapper {
        max-width: 1200px;
        width: 100%;
    }
    
    .dual-banner-display-block .ttfc-banner,
    .custom-dual-banner .ttfc-banner-desktop {
        max-width: 1200px;
    }
    
    .dual-banner-display-block .ttfc-banner img,
    .custom-dual-banner .ttfc-banner-desktop img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .dual-banner-display-wrapper {
        padding: 0 15px;
    }
}

/* במובייל - פריסה מלאה עם שוליים של 20px בצדדים (כמו בבלוקי הכתבות) */
@media (max-width: 768px) {
    .dual-banner-display-wrapper {
        padding: 0 20px; /* שוליים של 20px בצדדים - בדיוק כמו .section-container */
        margin-top: 0; /* שונה מ--20px למניעת גלישה למיכל רקע */
        margin-bottom: 0; /* מרווח אפס כברירת מחדל - שונה מ--5px */
        max-width: 100%;
        box-sizing: border-box; /* כדי שה-padding ייכלל ברוחב */
    }
    
    /* מרווח מוגדל בין באנר לבלוק הבא (במיוחד בלוקי כתבות) */
    .dual-banner-display-wrapper + .posts-vertical-wrapper,
    .dual-banner-display-wrapper + .posts-horizontal-wrapper,
    .dual-banner-display-wrapper + .posts-tabs-wrapper,
    .dual-banner-display-wrapper + .all-posts-grid-wrapper,
    .dual-banner-display-wrapper + .featured-posts-split-wrapper,
    .dual-banner-display-wrapper + .mixed-layout-wrapper {
        margin-top: 5px !important; /* מרווח נוסף של 5px מעל בלוק הכתבות */
    }
    
    /* תיקון מיוחד: כשהבלוק הבא הוא posts-vertical עם מיכל רקע */
    /* המרווח נמדד עד המיכל הרקע ולא עד הכותרת */
    .dual-banner-display-wrapper + .posts-vertical-wrapper.has-background-container,
    .dual-banner-display-wrapper + .posts-vertical-wrapper.has-background-mobile-only {
        margin-top: 20px !important; /* מרווח מוגדל למניעת גלישה למיכל הרקע */
    }
    
    /* מיכל הבאנרים המתחלפים */
    .rotating-banners {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* באנר בודד ברוטציה - ללא !important על display כדי לאפשר הסתרה/הצגה */
    .rotating-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* display מנוהל ע"י JavaScript - לא עוקפים! */
    }
    
    /* עטיפת הבאנר */
    .ttfc-banner-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* במובייל - הבאנרים ימלאו את כל הרוחב הפנוי (אחרי השוליים) */
    .ttfc-banner,
    .dual-banner-display-wrapper .ttfc-banner {
        width: 100% !important; /* רוחב מלא */
        max-width: 100% !important;
        display: block !important; /* חשוב! שינוי מ-inline-block ל-block */
        margin: 0 !important; /* ביטול margin: 0 auto */
    }
    
    /* זוג באנרים מותאם */
    .custom-dual-banner {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* באנר דסקטופ - מוסתר במובייל */
    .custom-dual-banner .ttfc-banner-desktop {
        display: none !important;
    }
    
    /* באנר מובייל - מוצג במובייל ברוחב מלא */
    .custom-dual-banner .ttfc-banner-mobile {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* תמונות הבאנרים */
    .dual-banner-display-wrapper img,
    .ttfc-banner img,
    .custom-dual-banner img,
    .ttfc-banner-mobile img {
        width: 100% !important; /* מתיחה לרוחב מלא */
        max-width: 100% !important;
        height: auto !important; /* שמירה על יחס גובה-רוחב */
        object-fit: cover; /* מילוי מלא עם שמירה על יחס */
        display: block !important;
        margin: 0 !important;
    }
    
    /* קישורים */
    .dual-banner-display-wrapper a,
    .ttfc-banner a {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .dual-banner-display-wrapper {
        padding: 0 15px; /* שוליים קטנים יותר למסכים צרים מאוד */
        margin-top: 0;
        margin-bottom: 0; /* מרווח אפס כברירת מחדל - שונה מ--5px */
        box-sizing: border-box;
    }
    
    /* מרווח מוגדל בין באנר לבלוק הבא (במיוחד בלוקי כתבות) */
    .dual-banner-display-wrapper + .posts-vertical-wrapper,
    .dual-banner-display-wrapper + .posts-horizontal-wrapper,
    .dual-banner-display-wrapper + .posts-tabs-wrapper,
    .dual-banner-display-wrapper + .all-posts-grid-wrapper,
    .dual-banner-display-wrapper + .featured-posts-split-wrapper,
    .dual-banner-display-wrapper + .mixed-layout-wrapper {
        margin-top: 5px !important; /* מרווח נוסף של 5px מעל בלוק הכתבות */
    }
    
    /* תיקון מיוחד: כשהבלוק הבא הוא posts-vertical עם מיכל רקע */
    /* המרווח נמדד עד המיכל הרקע ולא עד הכותרת */
    .dual-banner-display-wrapper + .posts-vertical-wrapper.has-background-container,
    .dual-banner-display-wrapper + .posts-vertical-wrapper.has-background-mobile-only {
        margin-top: 20px !important; /* מרווח מוגדל למניעת גלישה למיכל הרקע */
    }
    
    /* וידוא מתיחה מלאה גם במסכים קטנים מאוד */
    .rotating-banners {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* rotating-banner ללא !important על display */
    .rotating-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* שאר האלמנטים */
    .ttfc-banner-wrapper,
    .ttfc-banner,
    .custom-dual-banner,
    .custom-dual-banner .ttfc-banner-mobile,
    .dual-banner-display-wrapper img,
    .ttfc-banner img,
    .custom-dual-banner img {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
}