/* Blog pages. Base styles come from /style.css */
.blog-main{background:var(--paper);color:var(--navy);padding:130px 0 100px;min-height:75vh}
.bwrap{max-width:780px;margin:0 auto;padding:0 24px}
.blog-main h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
html[lang="ar"] .blog-main h1{line-height:1.3;letter-spacing:0}
.blead{margin-top:16px;font-size:1.15rem;opacity:.8;max-width:34em}

.bgrid{display:grid;gap:22px;margin-top:48px}
.bcard{background:var(--white);border:1px solid rgba(5,10,48,.1);border-radius:20px;padding:28px;transition:transform .2s,box-shadow .2s}
.bcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(5,10,48,.5)}
.bcard time,.meta{font-size:.85rem;opacity:.6}
.bcard h2{font-size:1.5rem;line-height:1.25;margin:8px 0 10px;font-weight:800}
html[lang="ar"] .bcard h2{line-height:1.4}
.bcard h2 a{text-decoration:none}
.bcard h2 a:hover{text-decoration:underline}
.bcard p{opacity:.8;margin-bottom:14px}
.more{font-weight:700;text-decoration:underline;text-underline-offset:4px}

.crumb{display:inline-block;margin-bottom:22px;font-weight:600;text-decoration:none;opacity:.7}
.crumb:hover{opacity:1}
.meta{margin:16px 0 36px}
.post-body{font-size:1.1rem;line-height:1.85}
.post-body p{margin:0 0 1.2em}
.post-body h2{font-size:1.6rem;line-height:1.25;font-weight:800;margin:1.8em 0 .6em}
html[lang="ar"] .post-body{line-height:2}
.post-body ul{margin:0 0 1.4em;padding-inline-start:1.3em}
.post-body li{margin-bottom:.5em}

.ctabox{margin-top:56px;padding:32px;background:var(--navy);color:var(--sky);border-radius:22px}
.ctabox h2{color:var(--white);font-size:1.5rem;margin-bottom:8px}
.ctabox p{margin-bottom:20px;opacity:.85}
.morebox{margin-top:48px}
.morebox h2{font-size:1.2rem;margin-bottom:12px}
.morebox ul{list-style:none;display:grid;gap:10px}
.morebox a{font-weight:600;text-underline-offset:4px}

.langlink{border:1px solid rgba(202,232,255,.4);border-radius:999px;padding:7px 16px;opacity:1!important}