/* =============================================================
   ESHAL - blog.css  (always load AFTER eshal.css)
   [INDEX]    Blog hub - hero, pills, grid, cards, thumbnails
   [POST]     Individual article - prose, TOC, sidebar, progress
   [WIDGETS]  Pull-quote, stat-callout, key-points, callout
   [SHARED]   Related posts, newsletter
   ============================================================= */

/* ======================== [INDEX] =========================== */
.blog-hero { background:var(--bg-alt); padding:var(--s20) 0 0; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.blog-hero-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%); }
.blog-hero-glow { position:absolute;width:700px;height:400px;background:radial-gradient(ellipse,rgba(29,78,216,.08) 0%,transparent 70%);bottom:-120px;left:30%;pointer-events:none; }
.blog-hero-glow2 { position:absolute;width:360px;height:300px;background:radial-gradient(ellipse,rgba(0,191,99,.06) 0%,transparent 70%);top:0;right:8%;pointer-events:none; }
.blog-hero-inner { position:relative;z-index:1;padding-bottom:var(--s16); }
.blog-hero-eyebrow { display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);margin-bottom:var(--s5); }
.blog-hero-eyebrow em { color:var(--blue);font-style:normal; }
.blog-hero h1 { font-size:clamp(36px,5vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--black);margin-bottom:var(--s4);max-width:680px; }
.blog-hero h1 em { font-style:normal;color:var(--blue); }
.blog-hero-sub { font-size:16px;color:var(--gray-600);line-height:1.7;max-width:520px;margin-bottom:var(--s8); }

/* Search */
.blog-search { display:flex;align-items:center;gap:var(--s3);background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:10px 18px;max-width:380px;margin-bottom:var(--s8);transition:border-color 200ms,box-shadow 200ms; }
.blog-search:focus-within { border-color:var(--blue);box-shadow:var(--shadow-blue); }
.blog-search svg { width:16px;height:16px;flex-shrink:0;color:var(--gray-400); }
.blog-search input { background:none;border:none;outline:none;font-size:14px;color:var(--gray-900);width:100%;font-family:inherit; }
.blog-search input::placeholder { color:var(--gray-400); }

/* Floating pills */
.blog-pills { display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s10); }
.b-pill { font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-600);border:1px solid var(--border);background:var(--white);border-radius:var(--r-full);padding:5px 13px;cursor:default;transition:all 180ms; }
.b-pill:hover { color:var(--black);border-color:var(--gray-400); }
.b-pill.g { color:#006b37;border-color:rgba(0,191,99,.28);background:rgba(0,191,99,.07); }
.b-pill.b { color:var(--blue);border-color:var(--blue-border);background:var(--blue-bg); }

/* Stats strip */
.blog-stats { display:flex;border-top:1px solid var(--border);margin-top:var(--s10); }
.blog-stat { flex:1;padding:var(--s6) 0;border-right:1px solid var(--border); }
.blog-stat:last-child { border-right:none; }
.blog-stat-num { font-size:28px;font-weight:700;letter-spacing:-.04em;color:var(--black);line-height:1;margin-bottom:4px; }
.blog-stat-num sup { font-size:.65em;color:var(--green); }
.blog-stat-label { font-size:11px;color:var(--gray-500);letter-spacing:.04em; }
@media(max-width:640px){ .blog-stats{flex-wrap:wrap;} .blog-stat{min-width:50%;} }

/* Category tabs */
.blog-cats { display:flex;gap:var(--s2);flex-wrap:wrap;padding:var(--s4) 0;border-bottom:1px solid var(--border);margin-bottom:var(--s8);position:sticky;top:72px;background:var(--white);z-index:20; }
.b-cat { font-size:12px;font-weight:600;padding:6px 16px;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;color:var(--gray-600);cursor:pointer;transition:all 150ms;white-space:nowrap; }
.b-cat:hover { border-color:var(--blue);color:var(--blue); }
.b-cat.active { background:var(--blue);border-color:var(--blue);color:var(--white); }

/* Featured card */
.blog-featured { display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--r-2xl);overflow:hidden;text-decoration:none;margin-bottom:var(--s8);background:var(--white);transition:all 260ms var(--ease); }
.blog-featured:hover { transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-border); }
@media(max-width:760px){ .blog-featured{grid-template-columns:1fr;} }
.bf-thumb { min-height:300px;background:var(--black);position:relative;overflow:hidden; }
.bf-thumb svg { width:100%;height:100%;display:block; }
.bf-body { padding:var(--s8);display:flex;flex-direction:column;justify-content:center; }
.bf-tag { display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--blue);color:var(--white);border-radius:var(--r-full);padding:3px 11px;margin-bottom:var(--s4);width:fit-content; }
.bf-body h2 { font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--black);margin-bottom:var(--s4); }
.bf-body p { font-size:14px;color:var(--gray-600);line-height:1.7;margin-bottom:var(--s5); }
.bf-meta { display:flex;align-items:center;gap:var(--s3);font-size:12px;color:var(--gray-500);flex-wrap:wrap;margin-bottom:var(--s5); }
.bf-meta .dot { width:3px;height:3px;border-radius:50%;background:var(--gray-400); }
.bf-link { display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--blue); }
.bf-link svg { width:14px;height:14px;transition:transform 200ms; }
.blog-featured:hover .bf-link svg { transform:translateX(4px); }

/* Grid */
.blog-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5); }
@media(max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .blog-grid{grid-template-columns:1fr;} }

/* Post card */
.post-card { background:var(--white);border:1px solid var(--border);border-radius:var(--r-2xl);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:all 240ms var(--ease); }
.post-card:hover { transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.09);border-color:var(--blue-border); }
.post-thumb { height:160px;position:relative;overflow:hidden;background:var(--black);flex-shrink:0; }
.post-thumb svg { width:100%;height:100%;display:block;position:absolute;inset:0; }
.post-body { padding:var(--s5);display:flex;flex-direction:column;flex:1;gap:var(--s2); }
.chip { display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:var(--r-full);width:fit-content; }
.chip-arabic  { background:rgba(127,165,248,.12);color:#3d5fc4;border:1px solid rgba(127,165,248,.25); }
.chip-mena    { background:rgba(0,191,99,.08);color:#007840;border:1px solid rgba(0,191,99,.22); }
.chip-platform{ background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border); }
.chip-report  { background:rgba(217,119,6,.08);color:#b45309;border:1px solid rgba(217,119,6,.2); }
.chip-guide   { background:rgba(220,38,38,.07);color:#b91c1c;border:1px solid rgba(220,38,38,.15); }
.chip-compliance { background:rgba(139,92,246,.08);color:#7c3aed;border:1px solid rgba(139,92,246,.2); }
.post-body h3 { font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.35;color:var(--black);flex:1; }
.post-body p { font-size:13px;color:var(--gray-600);line-height:1.6; }
.post-footer { display:flex;align-items:center;justify-content:space-between;padding-top:var(--s4);border-top:1px solid var(--gray-100);margin-top:auto; }
.post-time { font-size:11px;color:var(--gray-500); }
.post-arrow { width:30px;height:30px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--gray-500);transition:all 150ms;flex-shrink:0; }
.post-card:hover .post-arrow { background:var(--blue);border-color:var(--blue);color:var(--white); }
.post-arrow svg { width:13px;height:13px; }

/* Newsletter strip */
.blog-nl { background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r-2xl);padding:var(--s10);display:grid;grid-template-columns:1fr auto;gap:var(--s8);align-items:center;margin-top:var(--s12); }
@media(max-width:640px){ .blog-nl{grid-template-columns:1fr;} }
.blog-nl h3 { font-size:20px;font-weight:700;color:var(--black);margin-bottom:6px; }
.blog-nl p { font-size:14px;color:var(--gray-600); }
.nl-form { display:flex;gap:var(--s2); }
.nl-form input { background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 16px;font-size:14px;color:var(--gray-900);font-family:inherit;outline:none;width:220px;transition:border-color 200ms,box-shadow 200ms; }
.nl-form input:focus { border-color:var(--blue);box-shadow:var(--shadow-blue); }
.nl-form input::placeholder { color:var(--gray-400); }
.nl-form button { background:var(--blue);border:none;border-radius:var(--r-lg);padding:10px 20px;font-size:13px;font-weight:700;color:var(--white);cursor:pointer;white-space:nowrap;font-family:inherit;transition:background 150ms; }
.nl-form button:hover { background:var(--blue-d); }

/* ======================== [POST] ============================ */
.read-progress { position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--green));z-index:999;width:0%;transition:width 60ms linear; }

.post-hero { background:var(--bg-alt);padding:var(--s16) 0 var(--s12);position:relative;overflow:hidden;border-bottom:1px solid var(--border); }
.post-hero-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%); }
.post-hero-glow { position:absolute;width:600px;height:400px;background:radial-gradient(ellipse,rgba(29,78,216,.08) 0%,transparent 70%);top:-80px;right:5%;pointer-events:none; }
.post-hero-inner { position:relative;z-index:1;max-width:780px; }
.post-bc { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-600);margin-bottom:var(--s5); }
.post-bc a { color:var(--gray-600);text-decoration:none;transition:color 150ms; }
.post-bc a:hover { color:var(--blue); }
.post-bc .sep { color:var(--gray-300); }
.post-bc strong { color:var(--black);font-weight:500; }
.post-hero h1 { font-size:clamp(26px,3.5vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--black);margin-bottom:var(--s5); }
.post-hero-meta { display:flex;align-items:center;gap:var(--s4);font-size:13px;color:var(--gray-600);flex-wrap:wrap;margin-bottom:var(--s6); }
.post-hero-meta .dot { width:3px;height:3px;border-radius:50%;background:var(--gray-400); }
.post-hero-meta .r-badge { background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);border-radius:var(--r-full);padding:2px 10px;font-size:11px;font-weight:700; }
.post-hero-lede { font-size:17px;color:var(--gray-700);line-height:1.7;max-width:660px; }

.post-layout { max-width:1100px;margin:0 auto;padding:var(--s12) var(--s6) var(--s20);display:grid;grid-template-columns:1fr 260px;gap:var(--s12);align-items:start; }
@media(max-width:900px){ .post-layout{grid-template-columns:1fr;} }

/* Prose */
.post-prose { min-width:0; }
.post-prose h2 { font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.025em;color:var(--black);margin:var(--s12) 0 var(--s4);padding-top:var(--s4);border-top:1px solid var(--gray-100); }
.post-prose h2:first-child { margin-top:0;border-top:none;padding-top:0; }
.post-prose h3 { font-size:17px;font-weight:700;color:var(--black);margin:var(--s8) 0 var(--s3); }
.post-prose p { font-size:15.5px;color:var(--gray-700);line-height:1.85;margin-bottom:var(--s5); }
.post-prose p strong { color:var(--black);font-weight:600; }
.post-prose a { color:var(--blue);text-decoration:underline;text-underline-offset:2px; }
.post-prose ul { list-style:none;padding-left:0;margin:var(--s5) 0;display:flex;flex-direction:column;gap:var(--s2); }
.post-prose ul li { position:relative;padding-left:22px;font-size:15px;color:var(--gray-700);line-height:1.7; }
.post-prose ul li::before { content:'';position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--blue); }
.post-prose ul li strong { color:var(--black);font-weight:600; }
/* Buttons inside prose must not inherit the prose link color/underline */
.post-prose .btn { text-decoration:none; }
.post-prose .btn-blue, .post-prose .btn-solid, .post-prose .btn-ghost-white { color:var(--white); }
.post-prose .btn-outline, .post-prose .btn-ghost { color:var(--gray-700); }
.post-prose .btn-white-blue { color:var(--blue); }
.post-prose ol { padding-left:var(--s6);margin:var(--s5) 0;display:flex;flex-direction:column;gap:var(--s3); }
.post-prose ol li { font-size:15px;color:var(--gray-700);line-height:1.7; }

/* Sidebar */
.post-sidebar { display:flex;flex-direction:column;gap:var(--s5);position:sticky;top:100px; }
.sb-card { background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5); }
.sb-card h4 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-500);margin-bottom:var(--s4); }
.toc { list-style:none;display:flex;flex-direction:column;gap:2px; }
.toc a { display:block;font-size:13px;color:var(--gray-600);text-decoration:none;padding:5px 8px;border-radius:var(--r-md);border-left:2px solid transparent;transition:all 150ms;line-height:1.4; }
.toc a:hover,.toc a.active { color:var(--blue);background:var(--blue-bg);border-color:var(--blue); }
.toc a.active { font-weight:600; }
.share-row { display:flex;gap:var(--s2); }
.sh-btn { flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;padding:8px 4px;border-radius:var(--r-md);border:1px solid var(--border);color:var(--gray-700);cursor:pointer;background:transparent;font-family:inherit;transition:all 150ms; }
.sh-btn:hover { background:var(--blue);border-color:var(--blue);color:var(--white); }
.sh-btn svg { width:14px;height:14px; }

/* ====================== [WIDGETS] ========================== */
.pull-quote { border-left:3px solid var(--blue);padding:var(--s5) var(--s6);background:var(--blue-bg);border-radius:0 var(--r-lg) var(--r-lg) 0;margin:var(--s8) 0; }
.pull-quote p { font-size:17px!important;font-style:italic;color:var(--gray-900)!important;line-height:1.65!important;margin-bottom:0!important; }
.pull-quote cite { display:block;font-size:12px;font-style:normal;font-weight:600;color:var(--gray-500);margin-top:var(--s3); }

.stat-callout { background:rgba(0,191,99,.05);border:1px solid rgba(0,191,99,.2);border-radius:var(--r-xl);padding:var(--s6);margin:var(--s8) 0;display:flex;gap:var(--s5);align-items:flex-start; }
.sc-num { font-size:clamp(36px,4vw,52px);font-weight:700;letter-spacing:-.05em;color:var(--green);line-height:1;flex-shrink:0;min-width:110px; }
.sc-label { font-size:14px;font-weight:700;color:var(--black);margin-bottom:4px; }
.sc-desc { font-size:13px;color:var(--gray-600);line-height:1.6; }
@media(max-width:560px){ .stat-callout{flex-direction:column;} }

.key-points { background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r-xl);padding:var(--s6);margin:var(--s8) 0; }
.kp-head { font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:var(--s4);display:flex;align-items:center;gap:8px; }
.kp-head::before { content:'';width:6px;height:6px;border-radius:50%;background:var(--green); }
.key-points-title { font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:var(--s4);display:flex;align-items:center;gap:8px; }
.key-points-title::before { content:'';width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block; }
.key-points ul,.key-points ol { list-style:none;padding-left:0;margin:0;display:flex;flex-direction:column;gap:var(--s4); }
.key-points ul li,.key-points ol li { font-size:14px;color:var(--gray-700);line-height:1.6;padding-left:0;position:static;display:block;overflow:hidden; }
.key-points ul li strong,.key-points ol li strong { color:var(--black);font-weight:700; }
.key-points ul li::before { content:'→';color:var(--blue);font-weight:700;float:left;margin-right:10px;line-height:1.6;position:static;width:auto;height:auto;border-radius:0;background:none;top:auto;left:auto; }
.key-points ol { counter-reset:kp; }
.key-points ol li::before { counter-increment:kp;content:counter(kp) '.';color:var(--blue);font-weight:700;float:left;margin-right:10px;line-height:1.6;position:static;width:auto;height:auto;border-radius:0;background:none; }

.callout { border-radius:var(--r-xl);padding:var(--s5);margin:var(--s8) 0;display:flex;gap:var(--s4);align-items:flex-start; }
.callout-blue { background:var(--blue-bg);border:1px solid var(--blue-border); }
.callout-green { background:rgba(0,191,99,.06);border:1px solid rgba(0,191,99,.2); }
.callout-amber { background:rgba(217,119,6,.06);border:1px solid rgba(217,119,6,.18); }
.callout svg { width:18px;height:18px;flex-shrink:0;margin-top:2px; }
.callout-blue svg { color:var(--blue); }
.callout-green svg { color:var(--green); }
.callout-amber svg { color:var(--amber); }
.callout p { font-size:14px!important;line-height:1.65!important;margin:0!important;color:var(--gray-700)!important; }

.post-table { width:100%;border-collapse:collapse;margin:var(--s8) 0;font-size:14px; }
.post-table th { background:var(--gray-50);color:var(--gray-700);text-align:left;padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border); }
.post-table td { padding:10px 14px;border-bottom:1px solid var(--gray-100);color:var(--gray-700);vertical-align:top; }
.post-table tr:hover td { background:var(--gray-50); }
.post-table .ck { color:var(--green);font-weight:700; }
.post-table .cx { color:var(--red);font-weight:700; }
.post-table .pt { color:var(--amber);font-weight:700; }

.inline-cta { background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r-2xl);padding:var(--s6) var(--s8);margin:var(--s10) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--s6); }
.inline-cta-text p { font-size:15px!important;font-weight:600!important;color:var(--black)!important;line-height:1.5!important;margin:0!important; }
.inline-cta-text span { display:block;font-size:13px;font-weight:400;color:var(--gray-600);margin-top:3px; }
@media(max-width:560px){ .inline-cta{flex-direction:column;} }

/* ======================= [SHARED] ========================== */
.related-posts { margin-top:var(--s16);padding-top:var(--s10);border-top:1px solid var(--border); }
.related-posts h2 { font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--black);margin-bottom:var(--s6); }
.related-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4); }
@media(max-width:700px){ .related-grid{grid-template-columns:1fr;} }
.rel-card { background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;text-decoration:none;transition:all 200ms; }
.rel-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-border); }
.rel-thumb { height:88px;position:relative;overflow:hidden;background:var(--black); }
.rel-thumb svg { width:100%;height:100%;display:block; }
.rel-body { padding:var(--s4); }
.rel-cat { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:3px; }
.rel-body h4 { font-size:13px;font-weight:700;color:var(--black);line-height:1.35; }