/* ============================================================
   BLOG — RTL / Arabic overrides (2026-07-22)
   Layered on top of style.css for Arabic blog pages only.
   ============================================================ */
.blog-ar {
  font-family: 'Tajawal', 'Bricolage Grotesque', system-ui, sans-serif;
  direction: rtl;
  text-align: right;
}

.blog-ar .blog-wrap,
.blog-ar .blog-wrap h1,
.blog-ar .blog-wrap h2,
.blog-ar .blog-wrap h3,
.blog-ar .blog-wrap p,
.blog-ar .blog-wrap li,
.blog-ar .blog-wrap span,
.blog-ar .blog-wrap div {
  font-family: 'Tajawal', 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: 0;                 /* Arabic doesn't want tracked letter-spacing */
}

.blog-ar .blog-title,
.blog-ar .blog-index-title {
  line-height: 1.35;                 /* Arabic characters need more line-height */
  letter-spacing: 0;
}

.blog-ar .blog-title em,
.blog-ar .blog-index-title em {
  font-family: 'Tajawal', serif;
  font-style: normal;                /* Arabic italic reads as noise */
  font-weight: 400;
  color: rgba(245, 247, 250, 0.72);
}

.blog-ar .blog-eyebrow,
.blog-ar .blog-breadcrumb,
.blog-ar .blog-meta,
.blog-ar .blog-index-eyebrow,
.blog-ar .reach-caption {
  letter-spacing: 0;                 /* clear tracked spacing on all-caps for Arabic */
  text-transform: none;              /* Arabic has no case */
}

/* Numbered lists: rank + text align right */
.blog-ar .blog-numlist,
.blog-ar .blog-list {
  padding-right: 22px;
  padding-left: 0;
}

/* Table: header alignment */
.blog-ar .blog-table th,
.blog-ar .blog-table td {
  text-align: right;
}

/* CTA button arrow — Arabic points ← (backwards), so hover shouldn't rotate */
.blog-ar .blog-cta-actions { justify-content: flex-start; }

/* Breadcrumb reversal */
.blog-ar .blog-breadcrumb { direction: rtl; }

/* Body content — better spacing for Arabic characters */
.blog-ar .blog-wrap p,
.blog-ar .blog-list,
.blog-ar .blog-numlist {
  line-height: 1.85;
  font-size: 17px;
}
.blog-ar .blog-lede {
  line-height: 1.75;
  font-size: 20px;
}

/* Nav — RTL alignment */
.blog-ar .ed-nav-inner { direction: rtl; }
.blog-ar .ed-nav-links { direction: rtl; gap: 20px; }
.blog-ar .ed-brand em { font-family: 'Tajawal', serif; font-style: normal; }

/* Footer */
.blog-ar .ed-footer-inner { direction: rtl; }

/* Preserve Latin numbers / brand names inline */
.blog-ar .num-en,
.blog-ar strong .num-en,
.blog-ar em .num-en {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Blog CTA hover — the → is a Latin glyph; in RTL context it's flipped by
   using ← in the HTML. Keep transform off. */
.blog-ar .blog-cta-btn { flex-direction: row; }

@media (max-width: 720px) {
  .blog-ar .blog-wrap p,
  .blog-ar .blog-list,
  .blog-ar .blog-numlist { font-size: 16px; line-height: 1.8; }
}

/* Minimalist SVG sector icons on case-study H2 headings (2026-07-22) */
.blog-ar .case-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  flex-shrink: 0;         /* icon never shrinks; text wraps around it */
}
.blog-ar .case-icon svg { width: 100%; height: 100%; display: block; }
.blog-ar h2 {
  display: flex;
  align-items: center;    /* center icon vertically with title text block */
  gap: 14px;
  flex-wrap: nowrap;
}
.blog-ar h2 > .case-icon { margin-top: 0; }

@media (max-width: 720px) {
  .blog-ar .case-icon { width: 36px; height: 36px; }
  .blog-ar h2 { gap: 10px; }
}

/* Notion-style scene illustrations per case study (2026-07-22)
   White paper tile with black hand-drawn line art + single lime accent */
.blog-ar .case-scene {
  margin: 28px 0 32px;
  padding: 24px 20px;
  border-radius: 16px;
  background: #FAFAF8;                             /* off-white Notion paper */
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.blog-ar .case-scene svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}
@media (max-width: 720px) {
  .blog-ar .case-scene {
    margin: 20px 0 24px;
    padding: 16px 12px;
    border-radius: 14px;
  }
}