/* ==========================================================================
   yom-yomi · מעטפת מדור  —  section shell
   --------------------------------------------------------------------------
   העתק מדויק של שפת העיצוב של "שאל את הרב": אותם משתני צבע, אותו סרגל
   pills, אותה פריסת 360px+1fr עם aside דביק, ואותם כרטיסי באנר 16/9.

   שים לב ל-reset: הוא עטוף ב-:where() כדי שספציפיותו תהיה אפס. בלי זה
   הכלל `body[data-shell] *` (0-1-1) גובר על כל מחלקה בודדת (0-1-0) ומאפס
   את כל ה-margin/padding של המעטפת — כל המרווחים בעמוד נעלמים.
   ========================================================================== */

/* ============ 1 · בסיס (ספציפיות אפס) ============ */
:where(body[data-shell="section"] *) { box-sizing: border-box; margin: 0; padding: 0 }
body[data-shell="section"] {
  --ink: #081421; --accent: #E70F57; --accent-d: #c20c49;
  --mut: #8395A7; --line: #C8D6E5; --bg: #FFFFFF; --soft: #F0F4F8;
  --f-head: 'Heebo', 'Assistant', sans-serif;
  --f-body: 'Open Sans Hebrew', 'Heebo', sans-serif;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg) !important;
  line-height: 1.6;
  font-size: 18px;
}
:where(body[data-shell="section"]) a { color: inherit; text-decoration: none; transition: color .2s, background .2s, border-color .2s }
:where(body[data-shell="section"]) img { display: block; max-width: 100% }
:where(body[data-shell="section"]) h1,
:where(body[data-shell="section"]) h2,
:where(body[data-shell="section"]) h3,
:where(body[data-shell="section"]) h4 { font-family: var(--f-head); line-height: 1.15 }
:where(body[data-shell="section"]) button { font-family: inherit; color: inherit }
body[data-shell="section"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }

/* ============ 2 · מעטפת ============ */
.sx { max-width: 1260px; margin: 0 auto; padding: 0 24px }
.sx-top { padding-top: 130px }

/* ============ 3 · ראש העמוד ============ */
.sx-crumb { padding: 22px 0 0; font-size: .92rem; color: var(--mut); font-weight: 600 }
.sx-crumb a { color: var(--accent) }
.sx-crumb a:hover { color: var(--accent-d) }
.sx-crumb .sep { color: var(--mut); margin: 0 6px }
.sx-h1 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(44px, 7vw, 76px); color: var(--ink);
  letter-spacing: -.02em; margin: 10px 0 14px;
}
.sx-sub { color: var(--mut); font-size: 1.05rem; line-height: 1.75; max-width: 66ch; margin: 0 0 26px }

/* ============ 4 · סרגל הנושאים ============ */
.sx-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 42px }
.sx-pill {
  background: var(--mut); color: #fff; font-weight: 600; font-size: .92rem;
  padding: 7px 15px; border-radius: 3px; border: none; font-family: inherit;
  cursor: pointer; transition: background .2s;
}
.sx-pill:hover, .sx-pill.active { background: var(--accent) }

/* ============ 5 · פריסה ============ */
.sx-layout {
  display: grid; grid-template-columns: 360px 1fr; gap: 46px;
  align-items: start; padding-bottom: 60px;
}
@media (max-width: 980px) {
  .sx-layout { grid-template-columns: 1fr; gap: 34px }
  .sx-layout aside { order: 2 }
  .sx-main { order: 1 }
}
.sx-main { min-width: 0 }

/* ============ 6 · קופסת הצד ============ */
.sx-box {
  background: var(--soft); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 24px; position: sticky; top: 18px;
}
@media (max-width: 980px) { .sx-box { position: static } }
.sx-box-h {
  display: flex; align-items: center; gap: 10px; font-family: var(--f-head);
  font-weight: 800; font-size: 1.55rem; color: var(--ink); margin: 0 0 10px;
}
.sx-box-h .mk {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--accent), #a87f23);
  display: grid; place-items: center; color: #fff; font-size: 1.1rem;
}
.sx-lead-tx { color: var(--mut); font-size: .95rem; margin: 0 0 18px; line-height: 1.7 }
.sx-box label { display: block; font-weight: 700; font-size: .92rem; margin: 14px 0 6px; color: var(--ink) }
.sx-box input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px;
  font-family: inherit; font-size: 16px; color: var(--ink); background: #fff;
  transition: border-color .2s;
}
.sx-box input:focus { outline: none; border-color: var(--accent) }
.sx-stats { display: flex; gap: 8px; margin: 22px 0 0 }
.sx-stat { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 12px 6px; text-align: center }
.sx-stat b { display: block; font-family: var(--f-head); font-size: 1.35rem; font-weight: 900; color: var(--accent); line-height: 1 }
.sx-stat span { display: block; font-size: .7rem; color: var(--mut); font-weight: 600; margin-top: 4px }
.sx-links { margin: 22px 0 0; border-top: 1px solid var(--line); padding-top: 8px }
.sx-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; font-size: .95rem; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid rgba(200, 214, 229, .55);
}
.sx-links a:last-child { border-bottom: none }
.sx-links a::after { content: "←"; color: var(--line); transition: transform .2s, color .2s }
.sx-links a:hover { color: var(--accent) }
.sx-links a:hover::after { color: var(--accent); transform: translateX(-4px) }

/* ============ 7 · כותרת מקטע ============ */
.sx-block { margin: 0 0 46px }
.sx-block:last-child { margin-bottom: 0 }
.sx-block-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 0 0 20px;
}
.sx-block-h h3 { font-family: var(--f-head); font-weight: 800; font-size: clamp(22px, 3vw, 30px); color: var(--ink) }
.sx-block-h a { color: var(--accent); font-weight: 700; font-size: .92rem }
.sx-block-h a:hover { color: var(--accent-d) }

/* ============ 8 · הכתבה הראשית ============ */
.sx-lead { margin: 0 0 46px }
.sx-lead-in {
  position: relative; display: flex; align-items: flex-end; width: 100%;
  aspect-ratio: 16/8; border-radius: 8px; overflow: hidden;
  background: #0e1a2b; border: none; padding: 0; font: inherit;
  text-align: start; cursor: pointer;
}
@media (max-width: 720px) { .sx-lead-in { aspect-ratio: 4/5 } }
.sx-lead-in .bg { position: absolute; inset: 0; background: center/cover no-repeat; transition: transform 6s ease-out }
.sx-lead-in:hover .bg { transform: scale(1.05) }
.sx-lead-in .ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,20,33,.94) 12%, rgba(8,20,33,.55) 48%, rgba(8,20,33,.12));
}
.sx-lead-b { position: relative; padding: clamp(20px, 3vw, 38px); width: 100%; max-width: 44em }
.sx-lead-b h2 {
  color: #fff; font-family: var(--f-head); font-weight: 800;
  font-size: clamp(26px, 4vw, 46px); line-height: 1.16; letter-spacing: -.015em;
  text-shadow: 0 2px 16px rgba(0,0,0,.45); margin: 0 0 12px; text-wrap: balance;
}
.sx-lead-b .deck {
  color: #dbe3ec; font-size: clamp(.98rem, 1.4vw, 1.1rem); line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0 0 16px;
}
@media (max-width: 720px) { .sx-lead-b .deck { -webkit-line-clamp: 4 } }

/* ============ 9 · תגי קטגוריה ============ */
.sx-tag {
  display: inline-block; font-family: var(--f-head); font-weight: 800;
  font-size: .72rem; letter-spacing: .03em; color: #fff;
  padding: 4px 12px; border-radius: 20px; margin: 0 0 10px;
  background: var(--accent);
}
.t-emuna { background: #6A4FBF } .t-midot   { background: #0E7C6B }
.t-mitzva { background: #A97514 } .t-torah   { background: #1C5FA8 }
.t-moed   { background: #B43A32 } .t-history { background: #5A6A7E }
.t-tzadik { background: #86611F } .t-family  { background: #B03A6B }
.t-news    { background: #0E7C6B } .t-recipe { background: #A97514 }
.t-mind    { background: #6A4FBF } .t-kids   { background: #1C5FA8 }
.t-sleep   { background: #5A6A7E }

/* ============ 10 · כרטיסי באנר ============ */
.sx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px }
@media (max-width: 768px) { .sx-grid { grid-template-columns: 1fr; gap: 28px } }
.sx-card {
  position: relative; display: flex; align-items: flex-end; width: 100%;
  aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: #0e1a2b; border: none; padding: 0; font: inherit;
  text-align: start; cursor: pointer;
}
.sx-card .bg { position: absolute; inset: 0; background: center/cover no-repeat; transition: transform .45s ease }
.sx-card:hover .bg { transform: scale(1.05) }
.sx-card .ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,20,33,.93) 10%, rgba(8,20,33,.3) 58%, transparent);
}
/* כרטיס בלי תמונה — רקע בצבע הקטגוריה, לא מלבן שחור ולא לוח אפור חוזר */
.sx-card.noimg { background: linear-gradient(145deg, #12233a, #081421) }
.sx-card.noimg .ov { background: linear-gradient(to top, rgba(8,20,33,.9) 10%, rgba(8,20,33,.25) 60%, transparent) }
.sx-card.noimg .mark {
  position: absolute; inset-inline-end: -14px; top: -22px;
  font-family: var(--f-head); font-weight: 900; font-size: clamp(72px, 11vw, 132px);
  color: rgba(255,255,255,.07); line-height: 1; letter-spacing: -.04em; pointer-events: none;
}
.sx-card-b { position: relative; padding: 18px 20px; width: 100% }
.sx-card-b h4 {
  color: #fff; font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.08rem, 1.8vw, 1.4rem); line-height: 1.32; margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sx-card-b .excerpt {
  color: #c4cfdb; font-size: .9rem; line-height: 1.65; margin: 8px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sx-rt {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2;
  background: rgba(8,20,33,.68); color: #fff; font-size: .74rem; font-weight: 700;
  padding: 4px 11px; border-radius: 20px;
}
.sx-go {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #fff; font-family: var(--f-head); font-weight: 800;
  font-size: .92rem; padding: 10px 22px; border-radius: 25px;
}
.sx-lead-in:hover .sx-go { background: var(--accent-d) }

/* ============ 11 · וידאו ============ */
.sx-vid {
  position: relative; display: flex; align-items: flex-end; width: 100%;
  aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #0e1a2b;
  border: none; padding: 0; text-align: start;
}
.sx-vid .bg { position: absolute; inset: 0; background: center/cover no-repeat; opacity: .9; transition: opacity .25s, transform .45s }
.sx-vid:hover .bg { opacity: 1; transform: scale(1.04) }
.sx-vid .play { position: absolute; inset: 0; display: grid; place-items: center }
.sx-vid .play span {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(231,15,87,.94); color: #fff;
  display: grid; place-items: center; font-size: 1.25rem; padding-inline-start: 4px; transition: transform .2s;
}
.sx-vid:hover .play span { transform: scale(1.09) }
.sx-vid-t {
  position: relative; width: 100%; padding: 26px 18px 16px;
  background: linear-gradient(to top, rgba(8,20,33,.94), transparent);
  color: #fff; font-family: var(--f-head); font-weight: 700; font-size: .98rem; line-height: 1.4;
}

/* ============ 12 · עוד / ריק ============ */
.sx-more {
  display: block; margin: 34px auto 0; background: #fff; border: 1px solid var(--line);
  color: var(--ink); border-radius: 25px; padding: 12px 34px; font: inherit;
  font-family: var(--f-head); font-weight: 800; cursor: pointer; transition: .18s;
}
.sx-more:hover { background: var(--accent); border-color: var(--accent); color: #fff }
.sx-empty, .sx-skel {
  grid-column: 1/-1; padding: 46px 20px; text-align: center;
  color: var(--mut); font-weight: 600;
}

/* ============ 13 · אנימציית כניסה ============ */
.sx-fade { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease }
.sx-fade.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  .sx-fade { opacity: 1; transform: none; transition: none }
  .sx-lead-in .bg, .sx-card .bg, .sx-vid .bg { transition: none }
}

/* ============ 14 · קורא הכתבה ============ */
.sx-lb {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: flex-start; justify-content: center;
  padding: clamp(12px, 4vh, 44px) clamp(12px, 4vw, 24px);
  background: rgba(8, 15, 22, .72); backdrop-filter: blur(6px);
}
.sx-lb.open { display: flex }
.sx-lb-in {
  background: #fff; border-radius: 16px; max-width: 780px; width: 100%;
  max-height: 100%; overflow: auto; position: relative;
}
.sx-prog { position: sticky; top: 0; height: 4px; background: rgba(200,214,229,.5); z-index: 3 }
.sx-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #f0c668); transition: width .12s linear }
.sx-lb-img { aspect-ratio: 16/7; background: #0e1a2b center/cover no-repeat }
.sx-lb-b { padding: clamp(24px, 4vw, 46px) }
.sx-lb-b h3 {
  font-family: var(--f-head); font-weight: 800; color: var(--ink);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.22;
  letter-spacing: -.018em; margin: 10px 0 0;
}
.sx-lb-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  color: var(--mut); font-size: .88rem; font-weight: 600;
  margin: 12px 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.sx-lb-body { color: #33424f; font-size: 1.14rem; line-height: 1.95 }
.sx-lb-body p { margin: 0 0 1.3em }
.sx-lb-body p:first-of-type { font-size: 1.2rem; color: #22303c }
.sx-lb-body h4 { font-family: var(--f-head); font-size: 1.28rem; font-weight: 800; color: var(--ink); margin: 1.8em 0 .55em }
.sx-lb-src { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--mut); line-height: 1.8 }
.sx-lb-src a { color: var(--accent); font-weight: 700 }
.sx-lb-x {
  position: absolute; top: 14px; inset-inline-start: 14px; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(8,20,33,.62); color: #fff; border: 0;
  font-size: 1.4rem; cursor: pointer; z-index: 4; line-height: 1;
}
.sx-lb-x:hover { background: var(--accent) }