/* =============================================================================
   MSL CONTENT HUB — קובץ-קבוצה לעמודי-HUB של תוכן
   עמודים: /מאמרים/ (page-articles.php) · /ספרים/ (page-books.php)
   Source: design-kit/mockups/articles-system-2026-06-02/hub-demo.html
           design-kit/mockups/books-library-page-2026-06-02/book-shelf.css
   נוצר: 2026-06-03. Tokens only · RTL · 0 inline · 0 !important.

   🚩 FLAG TO יסוד-העיצוב:
   הרכיבים הבאים מוכנים לקיפול ל-kit-extensions.css כשהם מאושרים:
     — Section header: .msl-hub-sechd + .msl-hub-count
     — Featured card:  .msl-hub-feature + -body + -img + -side + -meta
     — Book shelf:     .msl-bookshelf + .msl-shelf-item + .msl-shelf-cover
                       + --ph + .msl-shelf-body + .msl-shelf-title
                       + .msl-shelf-meta + .msl-shelf-sechd
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   A. ARTICLES HUB — Layout A (magazine)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── category section header (title + article count) ── */
.msl-hub-sechd{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--msl-sp-4);
  margin: var(--msl-sp-8) 0 var(--msl-sp-4);
  border-bottom: 1px solid var(--msl-line);
  padding-bottom: var(--msl-sp-3);
}
.msl-hub-sechd h2{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h3);
  font-weight: var(--msl-w-heavy);
  color: var(--msl-ink-strong);
  margin: 0;
  letter-spacing: var(--msl-ls-tight);
}
.msl-hub-count{
  font-size: var(--msl-size-meta);
  color: var(--msl-muted);
  font-weight: var(--msl-w-bold);
  white-space: nowrap;
}

/* ── featured article card — 2-col: text body + image (or placeholder) ── */
.msl-hub-feature{
  display: grid;
  grid-template-columns: 1fr auto;
  overflow: hidden;
  margin-bottom: var(--msl-sp-6);
}
.msl-hub-feature-body{
  padding: var(--msl-sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--msl-sp-3);
  justify-content: center;
}
.msl-hub-feature-body .msl-h2{ margin: 0; }
.msl-hub-feature-body .msl-h2 a{ color: inherit; text-decoration: none; }
.msl-hub-feature-body .msl-h2 a:hover{ color: var(--msl-amber-deep); }
.msl-hub-feature-body .msl-body{ margin: 0; }
.msl-hub-feature-meta{
  font-size: var(--msl-size-meta);
  color: var(--msl-muted);
  margin: 0;
}
.msl-hub-feature-img{
  min-width: 220px;
  max-width: 280px;
}
.msl-hub-feature-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* placeholder when article has no thumbnail */
.msl-hub-feature-side{
  min-width: 180px;
  background: var(--msl-navy-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.3);
  font-size: 4rem;
  font-weight: 900;
}
@media (max-width: 680px){
  .msl-hub-feature{ grid-template-columns: 1fr; }
  .msl-hub-feature-img,
  .msl-hub-feature-side{ min-width: auto; max-width: 100%; min-height: 140px; }
  .msl-hub-feature-side{ font-size: 2.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   B. BOOKS SHELF — Cover-forward grid for /ספרים/ (Option A)
   Source: design-kit/mockups/books-library-page-2026-06-02/book-shelf.css
   ─────────────────────────────────────────────────────────────────────────── */

/* ── responsive cover grid — 4 → 3 → 2 columns ── */
.msl-bookshelf{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--msl-sp-7) var(--msl-sp-6);
  margin: var(--msl-sp-6) 0 0;
}
@media (max-width: 900px){ .msl-bookshelf{ grid-template-columns: repeat(3, 1fr); gap: var(--msl-sp-6) var(--msl-sp-5); } }
@media (max-width: 620px){ .msl-bookshelf{ grid-template-columns: repeat(2, 1fr); gap: var(--msl-sp-5) var(--msl-sp-4); } }

/* ── one book (link wrapping cover + text) ── */
.msl-shelf-item{
  display: flex;
  flex-direction: column;
  gap: var(--msl-sp-3);
  text-decoration: none;
}

/* cover frame — 3:4 aspect, image fills it, amber right-edge spine cue (RTL) */
.msl-shelf-cover{
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--msl-r);
  overflow: hidden;
  background: var(--msl-cream-2);
  box-shadow: var(--msl-shadow-2);
  border: 1px solid var(--msl-line);
  transition: transform .18s ease, box-shadow .18s ease;
}
.msl-shelf-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.msl-shelf-cover::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 6px;
  background: var(--msl-amber);
  opacity: .9;
}
.msl-shelf-item:hover .msl-shelf-cover{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(6,20,43,.34);
}

/* placeholder — navy spine + first letter when book has no cover image */
.msl-shelf-cover--ph{
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(212,160,74,.20), transparent 60%),
    linear-gradient(160deg, var(--msl-navy-2), var(--msl-navy));
}
.msl-shelf-cover--ph span{
  font-family: var(--msl-font);
  font-weight: var(--msl-w-black);
  font-size: var(--msl-size-num-xl);
  color: rgba(255,255,255,.55);
}

/* ── title + chapter-count under cover ── */
.msl-shelf-body{ display: flex; flex-direction: column; gap: 4px; }
.msl-shelf-title{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h4);
  font-weight: var(--msl-w-heavy);
  color: var(--msl-ink-strong);
  line-height: var(--msl-lh-snug);
  letter-spacing: var(--msl-ls-tight);
  margin: 0;
}
.msl-shelf-item:hover .msl-shelf-title{ color: var(--msl-amber-deep); }
.msl-shelf-meta{
  font-family: var(--msl-font);
  font-size: var(--msl-size-meta);
  font-weight: var(--msl-w-mid);
  color: var(--msl-muted);
  margin: 0;
}

/* ── subject section header — for grouped shelf variant (Option C) ── */
.msl-shelf-sechd{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--msl-sp-4);
  margin: var(--msl-sp-9) 0 var(--msl-sp-2);
  border-bottom: 1px solid var(--msl-line);
  padding-bottom: var(--msl-sp-3);
}
.msl-shelf-sechd h2{
  font-family: var(--msl-font);
  font-size: var(--msl-size-h3);
  font-weight: var(--msl-w-heavy);
  color: var(--msl-ink-strong);
  letter-spacing: var(--msl-ls-tight);
  margin: 0;
}
.msl-shelf-sechd .count{
  font-family: var(--msl-font);
  font-size: var(--msl-size-meta);
  font-weight: var(--msl-w-bold);
  color: var(--msl-muted);
  white-space: nowrap;
}

/* ── fold 2026-06-07 (SiteOps) · featured card without image —
      full-width, centered, slightly larger type ── */
.msl-hub-feature--noimg{
  display: block;
  text-align: center;
}
.msl-hub-feature--noimg .msl-hub-feature-body{
  max-width: 56rem;
  margin-inline: auto;
  align-items: center;
  padding: var(--msl-sp-8) var(--msl-sp-7);
}
.msl-hub-feature--noimg .msl-h2{
  font-size: calc(var(--msl-size-h2) * 1.12);
}
.msl-hub-feature--noimg .msl-body{
  font-size: calc(var(--msl-size-body) * 1.12);
}