/* blog-article.css — what the blog needs beyond the shared site stylesheets.
 *
 * The blog used to load blog.css, a second full copy of the site's CSS with its
 * own nav, its own fonts and its own background. It now loads the same
 * base / rail / foot / editorial sheets as the homepage plus this file, so the
 * blog is visibly the same site. */

main.blog-index{padding-block:clamp(24px,4vw,48px) clamp(56px,8vw,112px)}
.blog-index .sec-head{margin-bottom:clamp(28px,4vw,48px)}
.blog-index .sec-head h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.1;margin:0}
html[lang="en"] .blog-index .sec-head h1{font-family:var(--sora);text-transform:uppercase;font-weight:700;letter-spacing:-.025em}
html[lang="ar"] .blog-index .sec-head h1{font-weight:800;line-height:1.35}
.blog-index .sec-head .sub{max-width:62ch}

/* icons: one stroke weight everywhere; directional ones mirror in RTL */
.ico{flex:none;display:inline-block;vertical-align:-.18em}
html[dir="rtl"] .ico-dir{transform:scaleX(-1)}

/* posts: image-led cards. The newest post is featured and spans the grid. */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,32px);margin:0}
.post-card{min-width:0}
.post-card a{display:flex;flex-direction:column;height:100%;overflow:hidden;color:inherit;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 1px 0 rgba(var(--shadow-rgb),.03);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.post-card a:hover{transform:translateY(-4px);border-color:rgba(var(--teal-rgb),.3);background:var(--surface);
  box-shadow:0 26px 48px -30px rgba(var(--shadow-rgb),.45)}
.post-card a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.post-card a::before{content:none}
.post-cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--teal)}
.post-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card a:hover .post-cover img{transform:scale(1.04)}
.cover-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--teal-rgb),.86);color:var(--on-accent);box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  backdrop-filter:blur(4px);transition:transform .25s ease,background .25s ease}
.cover-play .ico{vertical-align:0;margin-inline-start:2px}
.post-card a:hover .cover-play{transform:scale(1.08);background:var(--coral)}
.cover-chips{position:absolute;inset-block-start:12px;inset-inline-start:12px;display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.94);
  color:var(--teal);font-size:12.5px;font-weight:600;line-height:1.6;backdrop-filter:blur(6px)}
.chip-solid{background:var(--coral);color:var(--on-accent)}
.post-body{display:flex;flex-direction:column;flex:1;min-width:0;padding:clamp(18px,2.4vw,26px)}
.post-kicker{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-bottom:12px;padding:4px 11px 4px 10px;
  border-radius:999px;background:rgba(var(--coral-rgb),.1);color:var(--coral);font-size:13px;font-weight:600;line-height:1.6}
html[dir="rtl"] .post-kicker{padding:4px 10px 4px 11px}
.post-card h2{margin:0 0 10px;font-family:var(--sora);font-size:clamp(19px,2vw,24px);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
html[lang="ar"] .post-card h2{font-family:Qomraa,"IBM Plex Sans Arabic",sans-serif;line-height:1.55;letter-spacing:0}
.post-card a:hover h2{color:var(--teal)}
.post-card p{margin:0;color:var(--ink-soft);line-height:1.75;max-width:64ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:auto;padding-top:18px;
  color:var(--ink-soft);font-size:13.5px}
.meta-item{display:inline-flex;align-items:center;gap:7px}
.meta-item .ico{color:var(--coral)}
.post-go{display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;color:var(--teal);font-weight:600}
.post-go .ico{transition:transform .25s ease}
.post-card a:hover .post-go .ico{transform:translateX(4px)}
html[dir="rtl"] .post-card a:hover .post-go .ico{transform:scaleX(-1) translateX(4px)}
.post-lang{display:none}

.post-card.is-featured{grid-column:1/-1}
@media (min-width:860px){
  .post-card.is-featured a{flex-direction:row;align-items:stretch}
  .post-card.is-featured .post-cover{flex:0 0 56%;aspect-ratio:auto;min-height:340px}
  .post-card.is-featured .post-body{justify-content:center;padding:clamp(28px,3.4vw,48px)}
  .post-card.is-featured h2{font-size:clamp(24px,2.5vw,34px)}
  .post-card.is-featured p{-webkit-line-clamp:4;font-size:16.5px}
  .post-card.is-featured .post-meta-row{margin-top:24px;padding-top:0}
}
@media (max-width:760px){
  .posts{grid-template-columns:minmax(0,1fr)}
  .cover-play{width:54px;height:54px}
}
@media (prefers-reduced-motion:reduce){
  .post-card a,.post-cover img,.cover-play,.post-go .ico{transition:none}
  .post-card a:hover,.post-card a:hover .post-cover img,.post-card a:hover .cover-play{transform:none}
}

/* article */
.article{max-width:760px;margin-inline:auto;padding-block:clamp(24px,4vw,48px) clamp(56px,8vw,112px)}
.article h1{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.15;margin:0 0 16px}
html[lang="en"] .article h1{font-family:var(--sora);letter-spacing:-.02em}
html[lang="ar"] .article h1{line-height:1.4}
.article h2{margin-top:2.2rem;font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.3}
html[lang="en"] .article h2{font-family:var(--sora);letter-spacing:-.015em}
.article h3{margin-top:1.4rem}
.article section{margin:2rem 0;padding:0}
.article p,.article li{color:var(--ink-soft);line-height:1.9;font-size:17px}
html[lang="ar"] .article p,html[lang="ar"] .article li{font-size:17.5px;max-width:none}
.article .lead{color:var(--ink);font-size:18.5px}
.article ul,.article ol{padding-inline-start:1.4rem;margin:.8rem 0}
.article li{margin-bottom:.5rem}
.article code{background:rgba(var(--ink-rgb),.06);border:1px solid var(--line);padding:.1rem .45rem;border-radius:6px;
  font-family:var(--mono);font-size:.88em;direction:ltr;unicode-bidi:embed}
.article pre{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;overflow-x:auto;direction:ltr;text-align:left}
.article pre code{background:none;border:0;padding:0}
.article h2,.article h3,.article p,.article li,.article code{overflow-wrap:anywhere}
.article pre code{overflow-wrap:normal}
.article a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.article .post-meta{color:var(--ink-soft);font-size:.9rem;margin-top:12px}
.video-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:1.5rem 0;
  box-shadow:0 24px 50px -28px rgba(var(--shadow-rgb),.4)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%}
.watch-link{margin-top:.5rem}.watch-link a{display:inline-flex;align-items:center;gap:8px}

.article .cta{background:var(--teal);color:var(--on-accent);border-radius:24px;padding:clamp(28px,4vw,44px);text-align:start}
.article .cta h2,.article .cta h3{color:var(--on-accent);margin-top:0}
.article .cta p{color:rgba(255,255,255,.86)}
.article .cta a{color:var(--on-accent)}

/* article header, hero and back link */
.art-back{margin:0 0 24px}
.art-back a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600}
.art-kicker{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:4px 12px;border-radius:999px;
  background:rgba(var(--coral-rgb),.1);color:var(--coral);font-size:13.5px;font-weight:600;line-height:1.6}
.article .post-meta-row{margin:18px 0 0;padding:0;gap:8px 20px;font-size:14px}
.art-hero{margin:1.6rem 0 2rem;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:22px;
  background:var(--teal);box-shadow:0 24px 50px -28px rgba(var(--shadow-rgb),.4)}
.art-hero img{display:block;width:100%;height:100%;object-fit:cover}
.watch-link a{align-items:center}