/* =========================================================
   آرایه — بلاگ (blog.araaye.com)
   Builds on the brand tokens from styles.css.
   Editorial-luxury, RTL, content-first.
   ========================================================= */

/* ---------- Blog header tweaks ---------- */
.blog-header .header-nav a.is-active{color:var(--emerald)}
.blog-header .header-nav a.is-active::after{transform:scaleX(1)}

/* ---------- Blog hero ---------- */
.blog-hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 85% -10%,var(--navy-600) 0%,var(--navy-800) 45%,var(--navy-900) 100%);
  padding-block:clamp(56px,8vw,104px) clamp(40px,5vw,72px);
}
.blog-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:100% 34px;mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
}
.blog-hero .container{position:relative;z-index:2;max-width:760px;text-align:center}
.blog-hero .eyebrow{color:var(--emerald-soft);justify-content:center}
.blog-hero h1{
  margin-top:14px;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.3;letter-spacing:-.015em;
}
.blog-hero h1 .hl{color:var(--emerald-soft)}
.blog-hero p{margin-top:16px;font-size:clamp(1.02rem,1.8vw,1.18rem);color:rgba(255,255,255,.76)}

/* ---------- Topic chips ---------- */
.topics{padding-block:clamp(30px,4vw,48px) 0}
.topics-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.topic-chip{
  padding:9px 18px;border:1.5px solid var(--line);border-radius:var(--r-pill);
  font-size:.9rem;font-weight:600;color:var(--muted);background:var(--card);
  transition:border-color .2s,color .2s,transform .2s;
}
.topic-chip:hover,.topic-chip.is-active{border-color:var(--emerald);color:var(--emerald);transform:translateY(-2px)}

/* ---------- Post grid ---------- */
.post-grid-section{padding-block:clamp(36px,5vw,64px)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:transparent}
.post-card-cover{
  position:relative;aspect-ratio:16/9;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-800));overflow:hidden;
}
.post-card-cover::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(95,191,168,.5) 1.3px,transparent 1.3px);background-size:14px 14px;
  mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%);
}
.post-card-cat{
  position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2;
  padding:5px 12px;border-radius:var(--r-pill);font-size:.74rem;font-weight:700;
  background:rgba(46,125,107,.9);color:#fff;
}
.post-card-body{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;flex:1}
.post-card-body h2,.post-card-body h3{font-size:1.12rem;font-weight:700;line-height:1.55}
.post-card-body p{color:var(--muted);font-size:.92rem;margin-top:2px;flex:1}
.post-meta{display:flex;align-items:center;gap:14px;color:var(--muted-2);font-size:.8rem;font-weight:600}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted-2)}
.post-card-link{
  margin-top:6px;display:inline-flex;align-items:center;gap:6px;
  color:var(--emerald);font-weight:700;font-size:.92rem;
}
.post-card-link svg{width:16px;height:16px}

/* ---------- Featured post ---------- */
.post-featured{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);margin-bottom:24px;
}
.post-featured .post-card-cover{aspect-ratio:auto;min-height:280px}
.post-featured .post-card-body{padding:clamp(26px,4vw,44px);justify-content:center}
.post-featured .post-card-body h2{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.4}
@media (max-width:820px){.post-featured{grid-template-columns:1fr}.post-featured .post-card-cover{min-height:200px}}

/* ---------- Article (single post) ---------- */
.article-head{padding-block:clamp(40px,6vw,72px) clamp(20px,3vw,32px)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted-2);font-size:.85rem;font-weight:600}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--emerald)}
.breadcrumb .sep{opacity:.5}
.article-wrap{max-width:760px;margin-inline:auto}
.article-cat{display:inline-block;margin-top:18px;padding:5px 14px;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;background:rgba(46,125,107,.12);color:var(--emerald)}
.article-title{margin-top:16px;font-size:clamp(1.8rem,4.4vw,2.9rem);font-weight:800;line-height:1.32;letter-spacing:-.015em}
.article-lead{margin-top:18px;font-size:clamp(1.05rem,1.9vw,1.22rem);color:var(--muted);line-height:1.85}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px;color:var(--muted-2);font-size:.88rem;font-weight:600}
.article-cover{
  margin-block:clamp(28px,4vw,44px);aspect-ratio:16/7;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));position:relative;
}
.article-cover::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(95,191,168,.5) 1.3px,transparent 1.3px);background-size:16px 16px;
  mask-image:radial-gradient(circle at 75% 35%,#000,transparent 72%);
}

.article-body{max-width:760px;margin-inline:auto;padding-bottom:clamp(40px,6vw,72px)}
.article-body h2{font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:800;line-height:1.4;margin-top:clamp(34px,4vw,52px);margin-bottom:14px}
.article-body h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;line-height:1.45;margin-top:30px;margin-bottom:10px}
.article-body p{font-size:1.06rem;line-height:1.95;color:var(--ink);margin-bottom:18px}
.article-body ul,.article-body ol{margin:0 0 20px;padding-inline-start:26px;display:flex;flex-direction:column;gap:10px}
.article-body ul li{list-style:disc;color:var(--ink);line-height:1.85}
.article-body ol li{list-style:decimal;color:var(--ink);line-height:1.85}
.article-body strong{font-weight:700;color:var(--ink)}
.article-body a{color:var(--emerald);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{
  margin:24px 0;padding:18px 22px;border-inline-start:3px solid var(--emerald);
  background:var(--paper-2);border-radius:var(--r-sm);color:var(--muted);font-size:1.05rem;line-height:1.85;
}
.article-body .callout{
  margin:24px 0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(46,125,107,.06),transparent);
}
.article-body .callout h3{margin-top:0}

/* ---------- Inline CTA ---------- */
.blog-cta{
  margin-block:clamp(40px,6vw,72px);padding:clamp(32px,5vw,56px);border-radius:var(--r-xl);
  background:linear-gradient(170deg,var(--navy-700),var(--navy-900));color:#fff;text-align:center;
  position:relative;overflow:hidden;
}
.blog-cta::before{
  content:"";position:absolute;inset-inline-end:-10%;top:-30%;width:50%;height:160%;
  background:radial-gradient(circle,rgba(46,125,107,.34),transparent 62%);filter:blur(18px);pointer-events:none;
}
.blog-cta h2{position:relative;font-size:clamp(1.4rem,3vw,2.1rem);font-weight:800;line-height:1.4}
.blog-cta p{position:relative;margin-top:12px;color:rgba(255,255,255,.74);max-width:520px;margin-inline:auto}
.blog-cta .btn{position:relative;margin-top:22px}

/* ---------- Related posts ---------- */
.related{padding-block:clamp(36px,5vw,60px);border-top:1px solid var(--line)}
.related .post-grid{grid-template-columns:repeat(3,1fr)}

/* ---------- Newsletter ---------- */
.newsletter{padding-block:clamp(36px,5vw,60px)}
.newsletter-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,48px);text-align:center;
}
.newsletter-card h2{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800}
.newsletter-card p{margin-top:10px;color:var(--muted)}
.newsletter-form{display:flex;gap:10px;max-width:440px;margin:22px auto 0}
.newsletter-form input{
  flex:1;min-width:0;padding:13px 18px;border:1.5px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper);font-size:.95rem;
}
.newsletter-form input:focus{outline:none;border-color:var(--emerald)}

/* ---------- Cover images ---------- */
.post-card-cover img,
.article-cover img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}

/* ---------- Button reset inside article body ---------- */
.article-body .btn{text-decoration:none;color:#fff;font-weight:700}

/* ---------- Button on dark blog-cta background ---------- */
.blog-cta .btn-primary{
  background:#fff;color:var(--emerald);
  box-shadow:0 8px 28px rgba(0,0,0,.25);
}
.blog-cta .btn-primary:hover{
  background:var(--emerald-soft);color:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.35);transform:translateY(-2px);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){.post-grid,.related .post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .post-grid,.related .post-grid{grid-template-columns:1fr}
  .newsletter-form{flex-direction:column}
  .article-body p{font-size:1.02rem}
}