/* ============================================================
   BLOG — index + article styling. Built on the cinema tokens.
   ============================================================ */

/* ---------- shared sticky header / footer ---------- */
.blog-hdr{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad); background:rgba(14,17,22,.72); backdrop-filter:blur(16px); border-bottom:1px solid var(--hair-2); }
.blog-hdr .brand{ display:flex; align-items:center; gap:12px; }
.blog-hdr .mark{ width:36px; height:36px; border-radius:50%; overflow:hidden; border:1px solid var(--gold); background:#1b1e25; }
.blog-hdr .mark img{ width:100%; height:100%; object-fit:cover; }
.blog-hdr .name{ font-family:var(--serif); font-weight:800; font-size:1.1rem; }
.blog-back{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--paper-2); transition:color .3s; }
.blog-back:hover{ color:var(--gold); }
.blog-ftr{ text-align:center; padding:54px var(--pad); border-top:1px solid var(--hair); color:var(--paper-3); }
.blog-ftr a{ color:var(--gold); }

/* ---------- blog hero ---------- */
.blog-hero{ max-width:var(--container); margin-inline:auto; padding:clamp(56px,10vh,120px) var(--pad) clamp(28px,5vh,56px); }
.blog-hero .tag{ margin-bottom:1.1rem; }
.blog-hero h1{ font-family:var(--serif); font-weight:900; font-size:var(--d-lg); line-height:.96; }
.blog-hero h1 .dot{ color:var(--ink); }
.blog-hero p{ color:var(--paper-2); max-width:54ch; margin-top:1.2rem; font-size:1.12rem; }

/* ---------- post grid (index) ---------- */
.posts{ max-width:var(--container); margin:0 auto; padding:clamp(20px,4vh,40px) var(--pad) clamp(70px,10vh,130px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,38px); }
@media(max-width:900px){ .posts{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .posts{ grid-template-columns:1fr; } }

.pcard2{ display:flex; flex-direction:column; gap:14px; padding:30px; border:1px solid var(--hair);
  border-radius:var(--radius); background:rgba(20,26,35,.5); transition:transform .5s var(--ease), border-color .5s; }
.pcard2:hover{ transform:translateY(-5px); border-color:rgba(201,162,75,.4); }
.pcard2 .cat{ font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--gold); }
.pcard2 h2{ font-family:var(--serif); font-weight:800; font-size:1.5rem; line-height:1.12; }
.pcard2 p{ color:var(--paper-2); font-size:.98rem; line-height:1.7; }
.pcard2 .row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:10px; }
.pcard2 .date{ font-size:.82rem; color:var(--paper-3); }
.pcard2 .read{ font-weight:700; color:var(--gold); display:inline-flex; gap:.4em; align-items:center; }
.pcard2:hover .read .ar{ transform:translateX(-5px); }
.pcard2 .read .ar{ transition:transform .4s var(--ease); }

/* ---------- article (reading) ---------- */
.post{ max-width:760px; margin:0 auto; padding:clamp(50px,8vh,110px) var(--pad) clamp(60px,9vh,120px); }
.post__cat{ font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--gold); }
.post__title{ font-family:var(--serif); font-weight:900; font-size:clamp(2rem,5vw,3.4rem); line-height:1.02; margin:1rem 0 1.1rem; }
.post__meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; color:var(--paper-3); font-size:.9rem;
  padding-bottom:26px; margin-bottom:36px; border-bottom:1px solid var(--hair); }
.post__meta .by{ color:var(--paper-2); font-weight:600; }
.post__lead{ font-size:1.22rem; line-height:1.75; color:var(--paper); margin-bottom:1.6em; }

.post__body{ font-size:1.08rem; line-height:1.85; color:var(--paper-2); }
.post__body h2{ font-family:var(--serif); font-weight:800; color:var(--paper); font-size:1.7rem; line-height:1.18;
  margin:2.2em 0 .7em; }
.post__body h3{ font-weight:800; color:var(--paper); font-size:1.22rem; margin:1.8em 0 .5em; }
.post__body p{ margin:0 0 1.2em; }
.post__body strong{ color:var(--paper); font-weight:700; }
.post__body a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.post__body ul,.post__body ol{ margin:0 0 1.4em; padding-inline-start:1.3em; }
.post__body li{ margin-bottom:.55em; }
.post__body li::marker{ color:var(--gold); }
.post__body blockquote{ margin:1.6em 0; padding:1.1em 1.4em; border-inline-start:3px solid var(--gold);
  background:rgba(201,162,75,.06); border-radius:var(--radius); color:var(--paper); font-size:1.12rem; }
.post__body blockquote p:last-child{ margin-bottom:0; }

.post__cta{ margin-top:48px; padding:34px; border:1px solid var(--hair); border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(16,29,56,.6), rgba(20,26,35,.5)); text-align:center; }
.post__cta h3{ font-family:var(--serif); font-weight:800; font-size:1.5rem; margin-bottom:.5em; }
.post__cta p{ color:var(--paper-2); margin-bottom:1.4em; }

.post__more{ max-width:760px; margin:0 auto; padding:0 var(--pad) clamp(60px,9vh,120px); }
.post__more h4{ font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--gold); margin-bottom:18px; }
.post__more .links{ display:flex; flex-direction:column; gap:10px; }
.post__more .links a{ color:var(--paper); font-weight:600; display:inline-flex; gap:.5em; }
.post__more .links a:hover{ color:var(--gold); }

/* ============================================================
   BLOG UPGRADE — featured, filters, search, TOC, share, progress
   ============================================================ */
.blog-feat{ max-width:var(--container); margin:0 auto; padding:0 var(--pad); }
.pcard2--feat{ padding:clamp(30px,4vw,54px); background:linear-gradient(135deg, rgba(16,29,56,.6), rgba(20,26,35,.5)); border-color:rgba(201,162,75,.35); }
.pcard2--feat h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); max-width:24ch; }
.pcard2--feat p{ font-size:1.1rem; max-width:60ch; }
.pcard2--feat .cat::before{ content:"מאמר מוביל · "; color:var(--paper-3); }

.blog-tools{ max-width:var(--container); margin:clamp(26px,4vh,44px) auto 0; padding:0 var(--pad);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font:inherit; font-size:.9rem; font-weight:600; padding:.5em 1.1em; border-radius:var(--radius-pill); cursor:pointer;
  border:1px solid var(--hair-2); background:transparent; color:var(--paper-2); transition:all .3s var(--ease); }
.chip:hover{ border-color:var(--gold); color:var(--paper); }
.chip.on{ background:var(--gold); border-color:var(--gold); color:#12151b; }
.bsearch{ font:inherit; padding:.6em 1.1em; min-width:min(260px,100%); border-radius:var(--radius-pill);
  border:1px solid var(--hair-2); background:transparent; color:var(--paper); }
.bsearch:focus{ outline:none; border-color:var(--gold); }
.posts .empty{ grid-column:1/-1; text-align:center; color:var(--paper-3); padding:40px 0; }

.read-progress{ position:fixed; top:0; inset-inline:0; height:3px; z-index:60; background:var(--gold);
  transform-origin:right; transform:scaleX(0); }

.post__toc{ margin:0 0 2.2em; border:1px solid var(--hair); border-radius:var(--radius); padding:16px 22px; }
.post__toc summary{ cursor:pointer; font-weight:700; color:var(--gold); letter-spacing:.06em; }
.post__toc ol{ margin:14px 0 4px; padding-inline-start:1.3em; display:grid; gap:6px; }
.post__toc li::marker{ color:var(--gold); }
.post__toc a{ color:var(--paper-2); }
.post__toc a:hover{ color:var(--gold); }
.post__body h2{ scroll-margin-top:90px; }

.post__share{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:40px; color:var(--paper-3); font-size:.92rem; }
.post__share a,.post__share button{ font:inherit; font-weight:600; padding:.45em 1em; border-radius:var(--radius-pill);
  border:1px solid var(--hair-2); background:transparent; color:var(--paper-2); cursor:pointer; transition:all .3s; }
.post__share a:hover,.post__share button:hover{ border-color:var(--gold); color:var(--gold); }

.post__more{ max-width:var(--container); }
.posts--rel{ padding:0; }
.posts--rel .pcard2 h2{ font-size:1.25rem; }

/* light theme: replace the dark glass surfaces */
[data-theme="light"] .blog-hdr{ background:rgba(250,248,243,.85); }
[data-theme="light"] .pcard2{ background:#fff; box-shadow:0 1px 2px rgba(20,20,30,.04); }
[data-theme="light"] .pcard2:hover{ box-shadow:0 14px 34px -18px rgba(20,20,30,.25); }
[data-theme="light"] .pcard2--feat,
[data-theme="light"] .post__cta{ background:linear-gradient(135deg,#fff 0%, #f6efdf 100%); }
[data-theme="light"] .blog-hdr .mark{ background:#fff; }