/* ============================================================
   /blog/ — Blog index + articles
   ------------------------------------------------------------
   בנוי על מערכת-העיצוב של האתר ("Precision Light"):
   tokens.css → base.css → public-shell.css → landing.css → blog.css
   ה-nav (.ld-nav) וה-footer (.pp-footer) מגיעים כמו-שהם מדפי-הנחיתה,
   כדי שהבלוג יהיה אותו אתר — לא אי-עיצובי.

   ⚠️ היסטוריה (17/07/2026): קובץ זה מחליף את css/blog.css הישן, שנכתב
   במרץ למבנה-HTML אחר ולא עודכן כשהבלוג נכתב מחדש ב-15/07 → 33 מחלקות
   נשארו בלי שום כלל CSS (תפריט כרשימת-נקודות, כרטיסים ללא מסגרת) +
   `img{height:auto}` דרס את height="36" של הלוגו → לוגו ענק.
   לכן: כל מחלקה כאן חייבת להתאים ל-HTML בפועל. שינית markup? עדכן כאן.

   הקובץ תומך בשני דורות-markup שחיים יחד בבלוג:
   · דור-א' (6 מאמרים, מרץ): .blog-article > h2/p ישירות, .blog-table
   · דור-ב' (index + cabinet-planning-guide, יולי): .blog-section, .blog-toc,
     .blog-tip-card, .blog-related-card, .blog-cta-box
   ============================================================ */

/* ===== Page ===== */
.blog-main {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-10);
}

/* ===== Breadcrumb ===== */
.blog-breadcrumb {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.blog-breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--t-fast);
}
.blog-breadcrumb a:hover { color: var(--accent); }
.blog-breadcrumb-sep { color: var(--ink-5); }

/* ===== Article shell ===== */
.blog-article {
  background: var(--surface-0);
  border: 1px solid var(--stroke);
  border-radius: var(--r-5);
  padding: var(--s-8) var(--s-7);
  box-shadow: var(--sh-1);
}
.blog-article-header { margin-bottom: var(--s-6); }
.blog-article h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0 0 var(--s-3);
}

/* מטא (מחבר · תאריך · זמן-קריאה) — דור-ב' */
.blog-article-meta,
.blog-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--t-small);
  color: var(--ink-3);
  margin: 0 0 var(--s-5);
}
.blog-meta-author strong { color: var(--ink-2); font-weight: 600; }
.blog-meta-sep { color: var(--ink-5); }

/* פסקת-פתיחה — גדולה יותר, מזמינה קריאה */
.blog-article-lead {
  font-size: var(--t-h4);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
  padding-inline-start: var(--s-4);
  border-inline-start: 3px solid var(--accent);
}

/* ===== Typography ===== */
.blog-article h2,
.blog-section h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: var(--s-8) 0 var(--s-3);
  scroll-margin-top: 80px; /* עוגני ה-TOC לא נחתכים מתחת ל-nav הדביק */
}
.blog-article h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink-1);
  margin: var(--s-6) 0 var(--s-2);
  scroll-margin-top: 80px;
}
.blog-article p {
  font-size: var(--t-body);
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0 0 var(--s-4);
}
.blog-article a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.blog-article a:hover {
  text-decoration: none;
  border-bottom-color: var(--accent);
}
.blog-article strong { color: var(--ink-1); font-weight: 600; }
.blog-article ul,
.blog-article ol {
  margin: 0 0 var(--s-4);
  padding-inline-start: var(--s-6);
}
.blog-article li {
  font-size: var(--t-body);
  line-height: 1.8;
  color: var(--ink-2);
  margin-bottom: var(--s-2);
}
.blog-article li::marker { color: var(--accent); }
.blog-section { margin: 0; }
.blog-section:first-of-type > h2 { margin-top: var(--s-6); }

/* תמונות: ללא height:auto גורף — ראה אזהרת-הלוגו בראש הקובץ.
   מוגבל ל-figure/תוכן-המאמר בלבד, לא ל-nav/footer. */
.blog-article > img,
.blog-section img,
.blog-article figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-4);
  border: 1px solid var(--stroke);
}

/* ===== TOC ===== */
.blog-toc {
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-4);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
}
.blog-toc-title {
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--ink-1);
  margin: 0 0 var(--s-3);
}
.blog-toc-list {
  margin: 0;
  padding-inline-start: var(--s-5);
  columns: 2;
  column-gap: var(--s-6);
}
.blog-toc-list li {
  margin-bottom: var(--s-2);
  font-size: var(--t-body);
  break-inside: avoid;
}
.blog-toc-list li::marker { color: var(--accent); font-weight: 600; }
.blog-toc-list a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-fast);
}
.blog-toc-list a:hover { color: var(--accent); }

/* ===== Tip (פסקה מודגשת) ===== */
.blog-tip {
  background: var(--accent-soft);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-3);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0 !important;
  color: var(--accent-ink) !important;
}
.blog-tip strong { color: var(--accent-ink) !important; }

/* ===== Tips grid (כרטיסי-טיפים) ===== */
.blog-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0;
}
.blog-tip-card {
  background: var(--surface-1);
  border: 1px solid var(--stroke);
  border-radius: var(--r-4);
  padding: var(--s-5);
  transition: all var(--t-base);
}
.blog-tip-card:hover {
  border-color: var(--accent);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.blog-tip-card h3 {
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--ink-1);
  margin: 0 0 var(--s-2);
}
.blog-tip-card p {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0;
}

/* ===== Table ===== */
.blog-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: var(--t-small);
  border: 1px solid var(--stroke);
  border-radius: var(--r-3);
  overflow: hidden;
}
.blog-table th {
  background: var(--surface-2);
  color: var(--ink-1);
  font-weight: 600;
  padding: var(--s-3) var(--s-4);
  text-align: start;
  border-bottom: 1px solid var(--stroke-strong);
}
.blog-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--stroke);
  color: var(--ink-2);
}
.blog-table tr:last-child td { border-bottom: none; }
.blog-table tbody tr:nth-child(even) { background: var(--surface-1); }

/* ============================================================
   כלי-מאמר אינטראקטיבי (.mod-calc) — 17/07/2026
   בשימוש: modular-cabinet-construction.html ("האם המודול עובר?").
   ⚠️ גבול-IP (RULE #8): כאן מותרת אך ורק מתמטיקה גנרית שאינה
   קניין-רוחני (פיתגורס, שטח×צפיפות). פיצול-למודולים / קינון /
   תמחור = מנוע-השרת — אסור בהחלט בצד-הלקוח.
   ============================================================ */
.mod-calc {
  background: var(--surface-2);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-4);
  padding: var(--s-5);
  margin: var(--s-5) 0;
}
.mod-calc__title {
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--ink-1);
  margin: 0 0 var(--s-1);
}
.mod-calc__sub {
  font-size: var(--t-small) !important;
  color: var(--ink-3) !important;
  margin: 0 0 var(--s-4) !important;
  line-height: 1.6 !important;
}
.mod-calc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.mod-calc__field { display: flex; flex-direction: column; gap: var(--s-1); }
.mod-calc__field label {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--ink-3);
}
.mod-calc__field input {
  font-family: inherit;
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: center;
  color: var(--ink-1);
  background: var(--surface-0);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-2);
  padding: 10px 8px;
  min-height: var(--touch-min);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mod-calc__field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--sh-focus);
}
.mod-calc__out {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.mod-calc__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
  background: var(--surface-0);
  border: 1px solid var(--stroke);
  border-inline-start: 3px solid var(--ink-5);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.6;
}
.mod-calc__row b { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.mod-calc__row--ok   { border-inline-start-color: var(--ok); }
.mod-calc__row--warn { border-inline-start-color: var(--warn); }
.mod-calc__row--err  { border-inline-start-color: var(--err); }
.mod-calc__note {
  font-size: var(--t-micro) !important;
  color: var(--ink-4) !important;
  margin: var(--s-3) 0 0 !important;
  line-height: 1.6 !important;
}

/* ===== CTA ===== */
.blog-cta-section { margin-top: var(--s-8); }
.blog-cta-box,
.blog-cta {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface-0) 65%);
  border: 1px solid var(--accent);
  border-radius: var(--r-5);
  padding: var(--s-7) var(--s-6);
  text-align: center;
}
.blog-cta-box h2,
.blog-cta h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--ink-1);
  margin: 0 0 var(--s-3) !important;
}
.blog-cta-box p,
.blog-cta p {
  color: var(--ink-2);
  margin: 0 auto var(--s-5);
  max-width: 520px;
}
.blog-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--surface-0) !important;
  padding: 14px 28px;
  border-radius: var(--r-3);
  font-size: var(--t-h4);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--accent) !important;
  min-height: 48px;
  transition: all var(--t-fast) var(--ease-smooth);
}
.blog-cta-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.blog-cta-note {
  font-size: var(--t-small) !important;
  color: var(--ink-3) !important;
  margin: var(--s-3) 0 0 !important;
}

/* ===== Related ===== */
.blog-related {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--stroke);
}
.blog-related h2,
.blog-related h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink-1);
  margin: 0 0 var(--s-4) !important;
}
.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-4);
}
.blog-related-card {
  display: block;
  background: var(--surface-0);
  border: 1px solid var(--stroke);
  border-radius: var(--r-4);
  padding: var(--s-5);
  text-decoration: none;
  border-bottom: 1px solid var(--stroke) !important;
  transition: all var(--t-base);
}
.blog-related-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.blog-related-tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--t-micro);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-2);
}
.blog-related-card h3 {
  font-size: var(--t-h4) !important;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
  margin: 0 0 var(--s-2) !important;
}
.blog-related-card p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}
/* דור-א': רשימת-קישורים פשוטה */
.blog-related-links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.blog-related-links a { font-size: var(--t-body); color: var(--accent); }

/* ===== Index page ===== */
.blog-index-header {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5) var(--s-6);
  text-align: center;
}
.blog-index-header h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0 0 var(--s-3);
}
.blog-index-header p {
  font-size: var(--t-h4);
  color: var(--ink-3);
  line-height: 1.6;
  margin: 0;
}
.blog-index-grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--s-5) var(--s-10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  border: 1px solid var(--stroke);
  border-radius: var(--r-5);
  padding: var(--s-6);
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: all var(--t-base);
}
.blog-card:hover {
  border-color: var(--accent);
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
  text-decoration: none;
}
.blog-card-tag {
  align-self: flex-start;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--t-micro);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
}
.blog-card h2 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-1);
  margin: 0 0 var(--s-2);
}
.blog-card p {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0 0 var(--s-4);
  flex: 1;
}
.blog-card-arrow {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--accent);
}
.blog-card:hover .blog-card-arrow { text-decoration: underline; }

/* ===== Mobile ===== */
@media (max-width: 720px) {
  .blog-main { padding: var(--s-5) var(--s-4) var(--s-8); }
  .blog-article {
    padding: var(--s-6) var(--s-5);
    border-radius: var(--r-4);
  }
  .blog-toc-list { columns: 1; }
  .blog-index-header { padding: var(--s-7) var(--s-4) var(--s-5); }
  .blog-index-grid { padding: 0 var(--s-4) var(--s-8); }
  /* טבלה רחבה גוללת בתוך עצמה — הדף עצמו לעולם לא גולל אופקית */
  .blog-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===== Print ===== */
@media print {
  .blog-toc, .blog-cta-section, .blog-related { display: none !important; }
  .blog-article { border: none; box-shadow: none; padding: 0; }
}