/* ══════════════════════════════════════════
   WorldReach — Blog article template
   Shared by every post rendered from blog-post.ejs
   ══════════════════════════════════════════ */
:root{
  --art-c:#2B8EB7; --art-cdk:#0D5386;
  --art-ink:#152532; --art-body:#37474f; --art-mut:#66787f;
  --art-line:#e7eef3; --art-bg:#fff;
}

.art-main{ background:var(--art-bg); }

/* ── Hero ── */
.art-hero{
  background:linear-gradient(180deg,#f2f8fc 0%,#ffffff 100%);
  border-bottom:1px solid var(--art-line);
  padding:36px 0 44px;
}
.art-hero .art-w{ max-width:760px; margin:0 auto; padding:0 24px; }
.art-crumb{ font-size:.82rem; color:var(--art-mut); margin-bottom:22px; letter-spacing:.01em; }
.art-crumb a{ color:var(--art-c); text-decoration:none; }
.art-crumb a:hover{ text-decoration:underline; }
.art-crumb span.sep{ color:#b6c6cf; margin:0 8px; }
.art-crumb .cur{ color:var(--art-mut); }
.art-chip{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--art-cdk); background:rgba(43,142,183,.1);
  padding:6px 12px; border-radius:999px; margin-bottom:18px;
}
.art-hero h1{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(1.85rem,4.4vw,2.9rem); line-height:1.18; color:var(--art-ink);
  margin:0 0 22px; letter-spacing:-.01em;
}
.art-lede{ font-size:1.18rem; line-height:1.6; color:var(--art-mut); margin:0 0 26px; }

/* meta / byline row */
.art-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.art-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--art-c),var(--art-cdk));
  color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem;
  display:flex; align-items:center; justify-content:center; letter-spacing:.02em;
}
.art-byline{ line-height:1.35; }
.art-byline .art-author{ font-weight:700; color:var(--art-ink); font-size:.98rem; }
.art-byline .art-author a{ color:inherit; text-decoration:none; }
.art-byline .art-author a:hover{ color:var(--art-c); }
.art-byline .art-sub{ font-size:.85rem; color:var(--art-mut); }
.art-byline .art-sub .dot{ margin:0 7px; color:#c3d0d6; }

/* ── Featured image ── */
.art-figure{ max-width:900px; margin:0 auto; padding:0 24px; }
.art-figure img{
  width:100%; height:auto; border-radius:16px; margin-top:-24px;
  box-shadow:0 20px 50px rgba(20,40,55,.14); display:block;
}

/* ── Body / reading column ── */
.art-body-wrap{ padding:48px 0 8px; }
.art-body{ max-width:720px; margin:0 auto; padding:0 24px; }

/* Typography — generous paragraph spacing (the core of readable long-form) */
.art-body p{
  font-size:1.12rem; line-height:1.85; color:var(--art-body);
  margin:0 0 1.6em;
}
.art-body > *:first-child{ margin-top:0; }
.art-body h2{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.25; color:var(--art-ink);
  margin:2.4em 0 .7em; padding-top:.4em; letter-spacing:-.01em;
}
.art-body h3{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:1.28rem; line-height:1.35; color:var(--art-ink);
  margin:1.9em 0 .6em;
}
.art-body h2 + p, .art-body h3 + p{ margin-top:0; }

/* Links */
.art-body a{ color:var(--art-cdk); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; transition:color .15s; }
.art-body a:hover{ color:var(--art-c); }

/* Lists — spaced items */
.art-body ul, .art-body ol{ margin:0 0 1.6em; padding-left:0; }
.art-body ul li, .art-body ol li{
  font-size:1.12rem; line-height:1.75; color:var(--art-body);
  margin:0 0 .7em; padding-left:2rem; position:relative; list-style:none;
}
.art-body ul li::before{
  content:''; position:absolute; left:.35rem; top:.72em;
  width:8px; height:8px; border-radius:50%; background:var(--art-c);
}
.art-body ol{ counter-reset:art; }
.art-body ol li{ counter-increment:art; }
.art-body ol li::before{
  content:counter(art); position:absolute; left:0; top:.05em;
  width:26px; height:26px; border-radius:8px;
  background:linear-gradient(135deg,var(--art-c),var(--art-cdk)); color:#fff;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
}
.art-body li > ul, .art-body li > ol{ margin:.7em 0 0; }

/* Emphasis */
.art-body strong{ color:var(--art-ink); font-weight:700; }
.art-body em{ color:var(--art-body); }

/* Blockquote */
.art-body blockquote{
  margin:2em 0; padding:20px 26px;
  background:#f4f9fc; border-left:4px solid var(--art-c); border-radius:0 12px 12px 0;
  color:var(--art-ink); font-size:1.15rem; line-height:1.7; font-style:italic;
}
.art-body blockquote p{ margin:0; color:inherit; font-size:inherit; }
.art-body blockquote p + p{ margin-top:.8em; }

/* Images inside content */
.art-body img{ max-width:100%; height:auto; border-radius:12px; margin:1.8em 0; display:block; }
.art-body figure{ margin:2.2em 0; }
.art-body figure img{ margin:0; width:100%; box-shadow:0 12px 34px rgba(20,40,55,.10); }
/* Hover-to-enlarge on article images (desktop, hover-capable only) */
@media (hover:hover) and (min-width:1200px){
  .art-body figure img, .art-figure img{ transition:transform .35s ease, box-shadow .35s ease; cursor:zoom-in; position:relative; z-index:1; transform-origin:center; }
  .art-body figure img:hover, .art-figure img:hover{ transform:scale(1.5); z-index:40; box-shadow:0 34px 80px rgba(20,40,55,.34); }
}
.art-body figure figcaption{ margin-top:10px; font-size:.88rem; color:var(--art-mut); text-align:center; font-style:italic; }

/* Table of contents */
.art-toc{ background:#f7fafc; border:1px solid var(--art-line); border-radius:14px; padding:20px 24px 22px; margin:0 0 34px; }
.art-toc-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--art-mut); margin:0 0 12px; }
.art-body .art-toc ol{ list-style:none; counter-reset:toc; padding-left:0; margin:0; }
.art-body .art-toc li{ counter-increment:toc; position:relative; padding-left:2rem; margin:0 0 .55em; font-size:1rem; line-height:1.5; color:var(--art-body); }
.art-body .art-toc li:last-child{ margin-bottom:0; }
.art-body .art-toc li::before{ content:counter(toc) "."; position:absolute; left:0; top:0; width:auto; height:auto; background:none; border-radius:0; display:inline; color:var(--art-c); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; }
.art-body .art-toc a{ color:var(--art-cdk); text-decoration:none; }
.art-body .art-toc a:hover{ color:var(--art-c); text-decoration:underline; }
.art-body h2{ scroll-margin-top:24px; }

/* Tables inside content */
.art-body table{ width:100%; border-collapse:collapse; margin:1.8em 0; font-size:1rem; }
.art-body th, .art-body td{ padding:12px 16px; border:1px solid var(--art-line); text-align:left; color:var(--art-ink); }
.art-body tbody td{ color:var(--art-body); }
.art-body thead th{ background:#f4f9fc; color:var(--art-ink); font-weight:700; }

/* horizontal rule */
.art-body hr{ border:none; border-top:1px solid var(--art-line); margin:2.6em 0; }

/* ── Footer of article: divider, author card, nav ── */
.art-foot{ max-width:720px; margin:36px auto 0; padding:0 24px; }
.art-divider{ border:none; border-top:1px solid var(--art-line); margin:0 0 32px; }
.art-authorcard{
  display:flex; gap:16px; align-items:flex-start;
  background:#f7fafc; border:1px solid var(--art-line); border-radius:16px; padding:24px 26px;
}
.art-authorcard .art-avatar{ width:52px; height:52px; font-size:1.15rem; }
.art-authorcard b{ display:block; color:var(--art-ink); font-size:1.05rem; }
.art-authorcard .role{ font-size:.85rem; color:var(--art-c); font-weight:600; margin-bottom:6px; }
.art-authorcard p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--art-mut); }
.art-back{ display:inline-flex; align-items:center; gap:8px; margin-top:28px; color:var(--art-c); font-weight:700; text-decoration:none; font-size:1rem; }
.art-back:hover{ gap:12px; }

/* ── CTA ── */
.art-cta{ max-width:900px; margin:52px auto 72px; padding:0 24px; }
.art-cta-inner{
  background:linear-gradient(135deg,#0b2233,#123a52); border-radius:20px;
  padding:48px 40px; text-align:center; margin-bottom:56px;
}
.art-cta-inner h2{ font-family:'Space Grotesk',sans-serif; color:#fff; font-size:clamp(1.4rem,2.6vw,1.9rem); margin:0 0 12px; }
.art-cta-inner p{ color:rgba(255,255,255,.78); margin:0 auto 26px; max-width:540px; line-height:1.6; }
.art-cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.art-btn{
  display:inline-flex; align-items:center; gap:9px; padding:15px 30px; border-radius:9px;
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; transition:transform .2s, box-shadow .2s;
}
.art-btn-primary{ background:linear-gradient(130deg,#22d3ee,#06b6d4 45%,#0ea5e9); color:#fff; box-shadow:0 6px 22px rgba(6,182,212,.4); }
.art-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(6,182,212,.55); }
.art-btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25); }
.art-btn-ghost:hover{ background:rgba(255,255,255,.15); }

@media(max-width:640px){
  .art-body p, .art-body ul li, .art-body ol li{ font-size:1.06rem; }
  .art-figure img{ margin-top:-12px; border-radius:12px; }
  .art-cta-inner{ padding:36px 24px; }
}