/* Yaldis Blog — editorial components. Loaded by the Blog Worker after /assets/site.css,
   which supplies the tokens, type, header, footer and night hero. Reading comes first:
   one comfortable column, generous leading, quiet chrome around the text. */

.blog-page main>section{padding-block:clamp(56px,7vw,104px)}
.blog-page .opp-sec{padding-block:clamp(56px,7vw,104px)}
.opp-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:var(--ink);color:var(--white);font-weight:600;font-size:15px;padding:10px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background-color .2s}
.opp-btn:hover{background:var(--night-4)}

/* ---------- index ---------- */
.blog-hero{padding-block:calc(var(--hd) + clamp(56px,7vw,104px)) clamp(80px,9vw,140px)!important}
.blog-hero h1{font-size:clamp(48px,8vw,128px);letter-spacing:-.05em;line-height:.92;max-width:none}
html[lang="fa"] .blog-hero h1{font-size:clamp(36px,6vw,84px);letter-spacing:0;line-height:1.3}
.blog-list{background:var(--day);border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:calc(-1*var(--r-xl));position:relative;z-index:1}
.blog-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:36px}
.blog-filter label{font-weight:600;font-size:14.5px;color:var(--slate)}
.blog-filter select{appearance:none;-webkit-appearance:none;min-height:46px;padding:10px 40px 10px 18px;border:1px solid var(--line-2);border-radius:999px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%230E1530' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat calc(100% - 16px) center/12px;max-width:100%;font-size:15px}
html[dir="rtl"] .blog-filter select{padding:10px 18px 10px 40px;background-position:16px center}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.blog-card{position:relative;height:100%;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.6vw,34px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--white);transition:transform .3s var(--ease),box-shadow .3s}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-card h2{font-size:clamp(23px,2vw,28px);line-height:1.15;letter-spacing:-.025em;margin:16px 0 12px;overflow-wrap:anywhere}
html[lang="fa"] .blog-card h2{font-size:21px;line-height:1.7;letter-spacing:0}
.blog-card h2 a{text-decoration:none}
.blog-card h2 a::after{content:"";position:absolute;inset:0}
.blog-card:has(h2 a:focus-visible){outline:2px solid var(--star-deep);outline-offset:3px}
.blog-card h2 a:focus-visible{outline:none}
.blog-sum{color:var(--slate);font-size:16px;margin-bottom:18px}
.blog-card .opp-btn{margin-top:auto;position:relative;z-index:1}
.blog-label{display:flex;flex-wrap:wrap;gap:6px}
.blog-label span{font-size:12.5px;font-weight:600;padding:3px 11px;border-radius:999px;background:var(--day);color:var(--ink)}
.blog-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--slate);margin:0 0 22px}
.blog-read::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--star);margin-inline-end:8px;vertical-align:middle}
/* the newest article leads */
.blog-list .blog-grid>li:first-child{grid-column:1/-1}
.blog-list .blog-grid>li:first-child .blog-card{background:var(--night);border-color:var(--night);color:var(--white);justify-content:flex-end;min-height:min(60vh,480px);padding:clamp(28px,4vw,56px);background-image:radial-gradient(700px 400px at 100% 0,rgba(246,177,61,.16),transparent 60%),radial-gradient(rgba(198,205,226,.14) 1px,transparent 1.5px);background-size:auto,24px 24px}
.blog-list .blog-grid>li:first-child .blog-card h2{font-size:clamp(30px,3.4vw,50px);line-height:1.04;letter-spacing:-.035em;max-width:18ch}
html[lang="fa"] .blog-list .blog-grid>li:first-child .blog-card h2{font-size:clamp(24px,2.6vw,36px);line-height:1.55;letter-spacing:0}
.blog-list .blog-grid>li:first-child .blog-sum{color:var(--night-text);font-size:17.5px;max-width:56ch}
.blog-list .blog-grid>li:first-child .blog-meta{color:var(--mist)}
.blog-list .blog-grid>li:first-child .blog-label span{background:rgba(255,255,255,.1);color:var(--white)}
.blog-list .blog-grid>li:first-child .opp-btn{background:var(--star);color:var(--ink);margin-top:0}
.blog-list .blog-grid>li:first-child .opp-btn:hover{background:var(--star-2)}
.blog-empty{max-width:60ch;margin-bottom:24px;font-size:19px;color:var(--slate)}
.blog-pagination{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:40px;font-weight:600}
.blog-pagination a{padding:10px 18px;border-radius:999px;border:1px solid var(--line-2);text-decoration:none}
.blog-pagination a:hover{border-color:var(--ink)}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr}.blog-list .blog-grid>li:first-child .blog-card{min-height:0}}

/* ---------- article ---------- */
.blog-ahero h1{font-size:clamp(38px,5.4vw,80px);line-height:1;letter-spacing:-.04em;max-width:20ch;margin-top:18px}
html[lang="fa"] .blog-ahero h1{font-size:clamp(28px,4vw,54px);line-height:1.45;letter-spacing:0}
.blog-ahero .blog-label span{background:rgba(255,255,255,.1);color:var(--white)}
.blog-ahero .sub{max-width:60ch}
.blog-facts{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:40px;padding-top:24px;border-top:1px solid var(--night-line)}
.blog-facts dt{font-size:13px;color:var(--mist)}
.blog-facts dd{font-size:15px;font-weight:600;color:var(--white)}
.blog-facts .blog-read::before{display:none}
.blog-article{padding-block:clamp(56px,7vw,96px);background:var(--white);border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:calc(-1*var(--r-xl));position:relative;z-index:1;max-width:none}
.blog-prose{max-width:68ch;margin-inline:auto;overflow-wrap:anywhere;font-size:19px;line-height:1.75;color:#262E47}
html[lang="fa"] .blog-prose{font-size:18px;line-height:2.05}
.blog-prose p,.blog-prose ul,.blog-prose blockquote{margin-bottom:1.15em}
.blog-prose>p:first-child{font-size:1.18em;line-height:1.6;color:var(--ink)}
.blog-prose a{color:var(--ink);font-weight:600;text-decoration-color:var(--star);text-decoration-thickness:2px}
.blog-prose ul{list-style:disc;padding-inline-start:1.3em}
.blog-prose li{margin-bottom:.45em}
.blog-prose li::marker{color:var(--star-deep)}
.blog-prose h2{font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.025em;margin:1.8em 0 .55em;color:var(--ink)}
html[lang="fa"] .blog-prose h2{line-height:1.6;letter-spacing:0}
.blog-prose blockquote{font:500 1.15em/1.5 var(--display);letter-spacing:-.01em;color:var(--ink);padding-inline-start:24px;border-inline-start:3px solid var(--star)}
.blog-note{background:var(--day);padding:20px 22px;border-radius:var(--r);margin:44px 0;font-size:15.5px;line-height:1.65;color:var(--slate);border-inline-start:3px solid var(--star)}
.blog-sources{margin-top:12px;padding:clamp(22px,3vw,34px);border-radius:var(--r-l);background:var(--night);color:var(--night-text)}
.blog-sources h2{font-size:15px!important;font-family:var(--sans)!important;letter-spacing:0!important;color:var(--white);margin:0 0 12px!important;font-weight:600}
.blog-sources ul{list-style:none;padding:0;margin:0}
.blog-sources li{font-size:15px;line-height:1.6;padding:12px 0;border-top:1px solid var(--night-line);margin:0}
.blog-sources li:first-child{border-top:0}
.blog-sources a{color:var(--star);text-decoration:none}
.blog-sources a:hover{text-decoration:underline}
.blog-related{background:var(--day)}
.blog-related>.wrap>h2{font-size:clamp(28px,3vw,40px);margin-bottom:28px}