/* ============================================================
 * PATCHES v1.3 — MSL Block Patterns Design System
 * 8 רכיבי תוכן חדשים לתמיכה בכל סוגי התוכן באתר.
 *
 * רכיבים:
 *   A. msl-stat       — Stat Block (מספר גדול)
 *   B. msl-step       — Step Block (שלב מספרי)
 *   C. msl-pros-cons  — Pros/Cons table
 *   D. msl-did-you-know — DidYouKnow box
 *   E. msl-chapter-header — Chapter Header (ספרים)
 *   F. msl-chapter-divider — Chapter Divider
 *   G. msl-key-concepts — Key Concepts box
 *   H. msl-card-grid  — Card Grid (hub pages)
 *
 * עקרונות:
 *   - אפס inline CSS — כל סגנון דרך קלאסים
 *   - RTL-first, mobile-first
 *   - Colors & spacing via CSS vars (fallback hardcoded)
 *   - לא שובר Cloudflare APO / cache
 * ============================================================ */

/* ===================================================================
 * A. STAT BLOCK — מספר גדול עם תווית ומקור
 *    שימוש: מחקרים, כלים, השוואות
 * =================================================================== */

.msl-stat {
  display: block;
  margin-block: 32px;
  padding: 28px 32px;
  border-radius: 16px;
  background: var(--msl-navy, #0B1E3F);
  color: var(--msl-cream, #FAF7F0);
  text-align: end;
  direction: rtl;
  border-inline-start: 6px solid var(--msl-amber, #F59E0B);
  box-sizing: border-box;
}

.msl-stat__value {
  display: block;
  font-family: "Heebo", sans-serif;
  font-size: clamp(44px, 8vw, 72px);
  font-weight: 900;
  color: var(--msl-amber, #F59E0B);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.msl-stat__label {
  display: block;
  font-family: "Heebo", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--msl-cream, #FAF7F0);
  opacity: 0.92;
  line-height: 1.5;
}

.msl-stat__source {
  display: block;
  margin-top: 12px;
  font-family: "Assistant", sans-serif;
  font-size: 12px;
  color: var(--msl-cream, #FAF7F0);
  opacity: 0.6;
  font-style: italic;
}

/* Inline variant — smaller, inside paragraph flow */
.msl-stat--inline {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--msl-navy, #0B1E3F);
  border-radius: 6px;
  font-family: "Heebo", sans-serif;
  font-weight: 800;
  font-size: inherit;
  border: none;
  text-align: start;
}

/* Stat Grid — 3-up stats row */
.msl-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-block: 32px;
}
.msl-stat-grid .msl-stat {
  margin: 0;
}

@media (max-width: 640px) {
  .msl-stat__value {
    font-size: 44px;
  }
  .msl-stat-grid {
    grid-template-columns: 1fr;
  }
}


/* ===================================================================
 * B. STEP BLOCK — שלב ממוספר לתהליכים ומדריכים
 *    שימוש: כלים, מדריך שימוש, workflow
 * =================================================================== */

.msl-steps {
  direction: rtl;
  margin-block: 32px;
  counter-reset: msl-step-counter;
}

.msl-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
  counter-increment: msl-step-counter;
}

.msl-step__number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--msl-navy, #0B1E3F);
  color: var(--msl-amber, #F59E0B);
  border-radius: 50%;
  font-family: "Heebo", sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  flex-direction: column;
}

/* Auto-number via CSS counter — use when .msl-step__number is empty */
.msl-step__number--auto::after {
  content: counter(msl-step-counter);
}

.msl-step__content {
  flex: 1;
  padding-top: 8px;
}

.msl-step__title {
  font-family: "Heebo", sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--msl-navy, #0B1E3F);
  margin: 0 0 8px;
  line-height: 1.3;
}

.msl-step__body {
  font-family: "Assistant", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--msl-body, #334155);
  margin: 0;
}

/* Connector line between steps */
.msl-steps .msl-step:not(:last-child) .msl-step__number::after {
  content: '';
  display: block;
  width: 2px;
  height: 24px;
  background: var(--msl-line, #E2E8F0);
  margin-top: 6px;
}

@media (max-width: 640px) {
  .msl-step {
    gap: 14px;
  }
  .msl-step__number {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .msl-step__title {
    font-size: 17px;
  }
}


/* ===================================================================
 * C. PROS/CONS TABLE — יתרונות וחסרונות בשני עמודות
 *    שימוש: כלים, השוואות, מדריכים
 * =================================================================== */

.msl-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block: 32px;
  direction: rtl;
}

.msl-pros-cons__col {
  padding: 20px 24px;
  border-radius: 12px;
  border-top: 4px solid transparent;
}

.msl-pros-cons__col--pros {
  background: #f0fdf4;
  border-top-color: #16a34a;
}

.msl-pros-cons__col--cons {
  background: #fef2f2;
  border-top-color: #dc2626;
}

.msl-pros-cons__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Heebo", sans-serif;
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.2;
}

.msl-pros-cons__col--pros .msl-pros-cons__title {
  color: #15803d;
}

.msl-pros-cons__col--cons .msl-pros-cons__title {
  color: #b91c1c;
}

.msl-pros-cons__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.msl-pros-cons__item {
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--msl-body, #334155);
  padding: 7px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.msl-pros-cons__item:last-child {
  border-bottom: none;
}

.msl-pros-cons__col--pros .msl-pros-cons__item::before {
  content: "✓";
  color: #16a34a;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.msl-pros-cons__col--cons .msl-pros-cons__item::before {
  content: "✗";
  color: #dc2626;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 640px) {
  .msl-pros-cons {
    grid-template-columns: 1fr;
  }
}


/* ===================================================================
 * D. DID YOU KNOW — תיבת עובדה מפתיעה
 *    שימוש: ספרים, מחקרים — בין פסקאות
 * =================================================================== */

.msl-did-you-know {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-block: 28px;
  padding: 20px 24px;
  background: #fffbeb;
  border: 1.5px solid var(--msl-amber, #F59E0B);
  border-radius: 12px;
  direction: rtl;
}

.msl-did-you-know__icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  user-select: none;
}

.msl-did-you-know__body {
  flex: 1;
}

.msl-did-you-know__title {
  display: block;
  font-family: "Heebo", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--msl-amber, #d97706);
  margin-bottom: 6px;
}

.msl-did-you-know__text {
  font-family: "Assistant", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--msl-navy, #0B1E3F);
  margin: 0;
}

.msl-did-you-know__source {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--msl-muted, #64748B);
  font-style: italic;
}


/* ===================================================================
 * E. CHAPTER HEADER — כותרת פרק (ספרים)
 *    שימוש: ~1,943 פרקי ספרים
 * =================================================================== */

.msl-chapter-header {
  margin-block: 0 32px;
  padding: 28px 32px;
  background: var(--msl-navy, #0B1E3F);
  color: var(--msl-cream, #FAF7F0);
  border-radius: 0 0 16px 16px;
  direction: rtl;
  text-align: end;
}

.msl-chapter-header__book {
  display: inline-block;
  font-family: "Heebo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--msl-amber, #F59E0B);
  margin-bottom: 12px;
}

.msl-chapter-header__num {
  display: block;
  font-family: "Heebo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(250, 247, 240, 0.6);
  margin-bottom: 8px;
}

.msl-chapter-header__title {
  font-family: "Heebo", sans-serif;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  color: var(--msl-cream, #FAF7F0);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.msl-chapter-header__meta {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
  font-family: "Assistant", sans-serif;
  font-size: 13px;
  color: rgba(250, 247, 240, 0.65);
}

.msl-chapter-header__meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}


/* ===================================================================
 * F. CHAPTER DIVIDER — מפריד בין סעיפי פרק
 *    שימוש: בין חלקי ספר, בין נושאים גדולים
 * =================================================================== */

.msl-chapter-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block: 40px;
  direction: rtl;
}

.msl-chapter-divider__line {
  flex: 1;
  height: 1px;
  background: var(--msl-line, #E2E8F0);
}

.msl-chapter-divider__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--msl-amber, #F59E0B);
  border-radius: 50%;
  flex-shrink: 0;
}

.msl-chapter-divider__mark::before {
  content: "✦";
  font-size: 12px;
  color: var(--msl-navy, #0B1E3F);
  line-height: 1;
}

/* Optional label variant */
.msl-chapter-divider__label {
  font-family: "Heebo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--msl-muted, #64748B);
  white-space: nowrap;
}


/* ===================================================================
 * G. KEY CONCEPTS — תיבת מושגי מפתח (סוף פרק)
 *    שימוש: ספרים, מחקרים
 * =================================================================== */

.msl-key-concepts {
  margin-block: 40px;
  padding: 24px 28px;
  background: var(--msl-cream, #FAF7F0);
  border: 2px solid var(--msl-navy, #0B1E3F);
  border-radius: 16px;
  direction: rtl;
}

.msl-key-concepts__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.msl-key-concepts__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.msl-key-concepts__title {
  font-family: "Heebo", sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: var(--msl-navy, #0B1E3F);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
}

.msl-key-concepts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.msl-key-concepts__item {
  padding: 10px 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--msl-line, #E2E8F0);
  font-family: "Heebo", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--msl-navy, #0B1E3F);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.msl-key-concepts__item a {
  color: inherit;
  text-decoration: none;
}

.msl-key-concepts__item:hover,
.msl-key-concepts__item a:hover {
  border-color: var(--msl-amber, #F59E0B);
  background: #fffbeb;
}

.msl-key-concepts__item__def {
  display: block;
  font-family: "Assistant", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--msl-body, #334155);
  margin-top: 3px;
}

@media (max-width: 640px) {
  .msl-key-concepts__list {
    grid-template-columns: 1fr;
  }
}


/* ===================================================================
 * H. CARD GRID — גריד כרטיסים לHub pages ולאגרגציות
 *    שימוש: /כלים/ hub, /מחקר/ hub, רשימות המלצות
 *    הערה: .msl-card קיים בpatches.css §23 — מרחיבים, לא כותבים מחדש
 * =================================================================== */

/* Generic card grid wrapper (שונה מ-.msl-hub__grid שמוגדר ל-hub ספציפי) */
.msl-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-block: 32px;
  direction: rtl;
}

/* Card inner layout — ה-card עצמו מגיע מ-patches.css §23 (.msl-card)
   כאן מוסיפים רק header ייעודי לPattern */
.msl-card-grid .msl-card {
  /* inherits all from patches.css .msl-card */
  display: flex;
  flex-direction: column;
}

/* Card grid — section header */
.msl-card-grid__header {
  margin-bottom: 16px;
  direction: rtl;
}

.msl-card-grid__title {
  font-family: "Heebo", sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--msl-navy, #0B1E3F);
  margin: 0 0 6px;
  line-height: 1.2;
}

.msl-card-grid__subtitle {
  font-family: "Assistant", sans-serif;
  font-size: 15px;
  color: var(--msl-body, #334155);
  margin: 0;
}

@media (max-width: 640px) {
  .msl-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ===================================================================
 * SHARED UTILITIES — עזר משותף
 * =================================================================== */

/* Force RTL on all MSL blocks */
.msl-stat,
.msl-steps,
.msl-pros-cons,
.msl-did-you-know,
.msl-chapter-header,
.msl-chapter-divider,
.msl-key-concepts,
.msl-card-grid {
  direction: rtl;
}

/* Print: collapse visually decorative elements */
@media print {
  .msl-stat { background: transparent; color: #000; border-color: #000; }
  .msl-stat__value { color: #000; font-size: 36px; }
  .msl-chapter-header { background: transparent; color: #000; }
  .msl-chapter-header__title { color: #000; }
  .msl-did-you-know { border-color: #ccc; background: #f9f9f9; }
}


/* ===================================================================
 * RESEARCH ARTICLE UTILITIES — כלים ייחודיים למאמרי מחקר
 *   I.  stat-card color variants — צבע מידע (לא קישוט)
 *   J.  chart-caption            — כיתוב מתחת לגרפים
 *   K.  sources-heading          — כותרת מקורות
 *
 * עקרון: red = "מצב קשה / מתחת לסטנדרט",
 *         amber = "ממוצע / נדרש תשומת לב",
 *         green = "מצב טוב / מעל בנצ'מרק"
 * =================================================================== */

/* --- I. Stat-card color variants ------------------------------------ */

.stat-card--red {
  border-inline-end: 4px solid var(--msl-red, #DC2626);
}
.stat-card--red .val {
  color: var(--msl-red, #DC2626);
}

.stat-card--amber {
  border-inline-end: 4px solid var(--msl-amber, #D97706);
}
.stat-card--amber .val {
  color: var(--msl-amber, #D97706);
}

.stat-card--green {
  border-inline-end: 4px solid var(--msl-green, #16A34A);
}
.stat-card--green .val {
  color: var(--msl-green, #16A34A);
}

/* --- J. Chart caption — כיתוב קטן מתחת לגרף ----------------------- */

.chart-caption {
  text-align: center;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--msl-gray-400, #94A3B8);
  margin-top: 8px;
  margin-bottom: 0;
  direction: rtl;
}

/* --- K. Sources heading — h2 ייחודי לסעיף מקורות ------------------ */

.sources-heading {
  display: block;
  border-top: 2px solid var(--msl-line, #E2E8F0);
  border-bottom: none;
  border-left: none;
  border-right: none;
  padding-top: 20px;
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--msl-navy, #0B1E3F);
  text-transform: uppercase;
}

/* --- L. Swatch color modifiers — Batch 2 (Phase D) ------------------ */

.swatch--blue  { background: var(--blue,  #2563EB); }
.swatch--amber { background: var(--amber, #D97706); }
.swatch--red   { background: var(--red,   #DC2626); }
.swatch--green { background: var(--green, #16A34A); }

/* --- M. Sankey diagram color modifiers — Batch 2 (Phase D) --------- */

.sankey-connector.sankey--blue  { background: var(--blue,  #2563EB); }
.sankey-connector.sankey--green { background: var(--green, #16A34A); }
.sankey-connector.sankey--amber { background: var(--amber, #D97706); }
.sankey-connector.sankey--red   { background: var(--red,   #DC2626); }

.sankey-bar.sankey--blue  { background: linear-gradient(to left, var(--blue,  #2563EB), rgba(37,99,235,0.3)); }
.sankey-bar.sankey--green { background: linear-gradient(to left, var(--green, #16A34A), rgba(5,150,105,0.3)); }
.sankey-bar.sankey--amber { background: linear-gradient(to left, var(--amber, #D97706), rgba(217,119,6,0.3)); }
.sankey-bar.sankey--red   { background: linear-gradient(to left, var(--red,   #DC2626), rgba(220,38,38,0.3)); }

.sankey-label.sankey--blue  { border-color: var(--blue,  #2563EB); color: var(--blue,  #2563EB); }
.sankey-label.sankey--green { border-color: var(--green, #16A34A); color: var(--green, #16A34A); }
.sankey-label.sankey--amber { border-color: var(--amber, #D97706); color: var(--amber, #D97706); }
.sankey-label.sankey--red   { border-color: var(--red,   #DC2626); color: var(--red,   #DC2626); }

/* --- N. Batch 3-5 structural modifiers (Phase D) -------------------- */

/* chart-canvas height variants (132020 — תעסוקה חרדים/ערבים) */
.chart-canvas--380 { height: 380px; position: relative; }
.chart-canvas--340 { height: 340px; position: relative; }
.chart-canvas--300 { height: 300px; position: relative; }

/* share section (132022 — תקציב מדינה) */
.share-section          { text-align: center; margin: 30px 0; }
.share-section__title   { font-family: 'Heebo', sans-serif; margin-bottom: 14px; }

/* stats grid (132081 — מדד ביג-מק) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin: 32px 0; }

/* insight-box + num color modifiers (132081) */
.insight-box--green { border-right-color: var(--green, #16A34A) !important; }
.insight-box--red   { border-right-color: var(--red,   #DC2626) !important; }
.num--green { color: var(--green, #16A34A); }
.num--red   { color: var(--red,   #DC2626); }

/* footnote + copyright utility classes (132082, 132084) */
.footnote-muted   { margin-top: 20px; font-size: 0.85rem; opacity: 0.7; }
.copyright-footer { margin-top: 20px; font-size: 0.8rem;  opacity: 0.6; }

/* centered block (132098) */
.centered-block { text-align: center; }

/* update footer text (132097 — מערכת המס) */
.update-footer { margin-top: 1rem; font-size: 0.9rem; color: #64748b; }

/* general list padding (132015 — ריכוזיות בנקים) */
.item-list { padding-right: 1.2rem; margin-top: 0.5rem; }

/* data footnote paragraph (132015) */
.data-note { margin-top: 0.75rem; }