/* ===========================================================
   Serka Law — Blog archive (is_home posts page) card grid.
   Enqueued ONLY on the posts page, after chrome.css + content-skin.css.
   Uses the cinematic flipping tokens (chrome.css :root + html.light):
   --glass/--glass-2/--line/--gold/--gold-2/--text/--muted/--serif/--sans/--ease.
   RUCSS-excluded + safelisted (serka-cinematic-home.php). Manual ?ver bump on edit.
   Rollback: dequeue serka-cine-blog + remove the is_home template_include branch.
   =========================================================== */

.cine-blog{width:min(1200px,calc(100% - 40px));margin:0 auto;padding:6px 0 30px}

/* ---------- header ---------- */
.cine-blog-head{max-width:780px;margin:0 0 36px}
.cine-blog-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700;color:var(--gold);margin:0 0 12px}
.cine-blog-title{font-family:var(--serif);color:var(--text);font-size:clamp(34px,6vw,54px);line-height:1.05;letter-spacing:-.012em;margin:0 0 14px;font-weight:700}
.cine-blog-lead{font-family:var(--sans);color:var(--muted);font-size:clamp(15px,1.5vw,18px);line-height:1.62;margin:0;max-width:62ch}

/* ---------- grid ---------- */
.cine-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:1000px){.cine-blog-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:640px){.cine-blog-grid{grid-template-columns:1fr;gap:18px}}

/* ---------- card ---------- */
.cine-bcard{position:relative;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);border-radius:16px;overflow:hidden;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
html.light .cine-bcard{box-shadow:0 10px 30px rgba(120,90,40,.10)}
.cine-bcard:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 20px 46px rgba(0,0,0,.3)}
html.light .cine-bcard:hover{box-shadow:0 20px 46px rgba(120,90,40,.18)}

.cine-bcard-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,rgba(194,154,86,.16),rgba(16,12,8,.5));border-bottom:1px solid var(--line)}
.cine-bcard-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.cine-bcard:hover .cine-bcard-img{transform:scale(1.05)}
.cine-bcard-ph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(140% 120% at 28% 16%,rgba(232,202,123,.26),transparent 58%),linear-gradient(135deg,rgba(194,154,86,.18),rgba(10,7,5,.74))}
.cine-bcard-ph::after{content:"SERKA";font-family:var(--serif);font-weight:700;font-size:clamp(19px,2.6vw,28px);letter-spacing:.3em;text-indent:.3em;color:var(--gold-2);opacity:.24}

.cine-bcard-body{display:flex;flex-direction:column;gap:9px;padding:20px 20px 22px;flex:1}
.cine-bcard-cat{align-self:flex-start;font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:700;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:4px 11px;line-height:1.4}
.cine-bcard-title{font-family:var(--serif);font-size:20px;line-height:1.26;margin:2px 0 0;font-weight:700}
.cine-bcard-title a{color:var(--text);text-decoration:none;transition:color .2s}
.cine-bcard-title a:hover{color:var(--gold-2)}
/* stretched link → whole card clickable, single a11y target (image is decorative alt="") */
.cine-bcard-title a::after{content:"";position:absolute;inset:0;z-index:2}
.cine-bcard-excerpt{font-family:var(--sans);color:var(--muted);font-size:14px;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cine-bcard-meta{margin-top:auto;padding-top:8px;font-family:var(--sans);font-size:12.5px;color:var(--muted);opacity:.82}

/* ---------- numbered pagination ---------- */
.cine-pag{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin:42px 0 0}
.cine-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 13px;font-family:var(--sans);font-size:15px;color:var(--muted);border:1px solid var(--line);border-radius:12px;text-decoration:none;background:var(--glass-2);transition:border-color .2s,color .2s,background .2s}
.cine-pag a.page-numbers:hover{color:var(--gold-2);border-color:var(--gold)}
.cine-pag .page-numbers.current{color:#0a0705;background:linear-gradient(145deg,var(--gold-2),var(--gold));border-color:rgba(232,202,123,.5);font-weight:800}
html.light .cine-pag .page-numbers.current{color:#fffaf0;background:linear-gradient(145deg,var(--gold),var(--gold-3))}
.cine-pag .page-numbers.dots{border-color:transparent;background:transparent;min-width:24px}

/* ---------- show-all / paginated toggle ---------- */
.cine-blog-actions{display:flex;justify-content:center;margin:26px 0 6px}
.cine-blog-allbtn{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:700;font-size:14.5px;letter-spacing:.02em;color:var(--text);background:var(--glass-2);border:1px solid var(--line);border-radius:999px;padding:13px 28px;text-decoration:none;transition:border-color .2s,color .2s,transform .2s}
.cine-blog-allbtn:hover{border-color:var(--gold);color:var(--gold-2);transform:translateY(-2px)}

/* ---------- RTL (ar/he/fa) ---------- */
[dir=rtl] .cine-bcard-cat{align-self:flex-end}

@media(prefers-reduced-motion:reduce){
  .cine-bcard,.cine-bcard-img,.cine-blog-allbtn{transition:none!important}
  .cine-bcard:hover{transform:none!important}
  .cine-bcard:hover .cine-bcard-img{transform:none!important}
}