/* ETHANNA blog pages (learn.ethanna.com/blog/), written by the hub at ethanna.com/admin.
   Large hero, category tabs, cards with the text over the image, side panel.
   Same tokens as the shared header and footer (chrome.css). Logical properties: RTL and LTR. */
:root{--bl-bg:#EDF2F4;--bl-fg:#2B2D42;--bl-muted:#5E6676;--bl-card:#FFFFFF;--bl-line:rgba(43,45,66,.12);--bl-red:#EF233C;--bl-red-deep:#D90429;--bl-soft:#E6ECEF;--bl-navy:#2B2D42;--bl-ink:#1E2432}
html[data-theme="dark"]{--bl-bg:#161B26;--bl-fg:#F2F5F7;--bl-muted:#A3ABBC;--bl-card:#1E2534;--bl-line:rgba(255,255,255,.10);--bl-soft:#131824}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bl-bg);color:var(--bl-fg);font:500 17px/1.85 'Tajawal',system-ui,sans-serif;padding-top:74px}
html[lang="fr"] body,html[lang="en"] body{font-family:'Tajawal','Poppins',system-ui,sans-serif}
a{color:inherit}
img{max-width:100%;height:auto}
.bl-main{padding:0 0 88px}
.bl-kicker{display:inline-block;font:700 12px/1.4 'Poppins','Tajawal',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--bl-red);text-decoration:none}
html[lang="ar"] .bl-kicker{letter-spacing:0;font-family:'Tajawal',sans-serif;font-size:14px}

/* ---------- hero ---------- */
.bl-hero{position:relative;overflow:hidden;color:#fff;min-height:400px;display:grid;place-items:center;text-align:center;padding:72px 24px;
  background:
    radial-gradient(ellipse 60% 70% at 78% 18%,rgba(239,35,60,.42),transparent 62%),
    radial-gradient(ellipse 55% 60% at 15% 90%,rgba(96,118,214,.30),transparent 60%),
    linear-gradient(160deg,#1E2432 0%,#2B2D42 52%,#141925 100%)}
.bl-hero::before{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='420' viewBox='0 0 1600 420' fill='none' stroke='%23ffffff' stroke-opacity='.10'%3E%3Cpath d='M0 300C200 220 360 360 560 280S900 140 1100 220 1400 330 1600 250'/%3E%3Cpath d='M0 330C220 250 380 390 580 310S920 170 1120 250 1420 360 1600 280'/%3E%3Cpath d='M0 360C240 280 400 420 600 340S940 200 1140 280 1440 390 1600 310'/%3E%3Cpath d='M0 270C180 190 340 330 540 250S880 110 1080 190 1380 300 1600 220'/%3E%3Cpath d='M0 240C160 160 320 300 520 220S860 80 1060 160 1360 270 1600 190'/%3E%3C/svg%3E") center/cover no-repeat}
.bl-hero-in{position:relative;max-width:820px}
.bl-hero .bl-kicker{color:#FF6B7D;margin-bottom:14px}
.bl-hero h1{margin:0 0 14px;font-size:clamp(36px,6vw,64px);line-height:1.2;font-weight:900;color:#fff}
.bl-hero p{margin:0 auto;max-width:640px;font-size:19px;color:rgba(255,255,255,.78)}

/* ---------- tabs ---------- */
.bl-tabs{display:flex;justify-content:center;gap:6px 28px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:34px 24px 30px}
.bl-tabs a{font-weight:700;font-size:16px;color:var(--bl-muted);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.bl-tabs a:hover{color:var(--bl-fg)}
.bl-tabs a[aria-current="page"]{color:var(--bl-fg);border-bottom-color:var(--bl-red)}

/* ---------- layout ---------- */
.bl-layout{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
@media(max-width:980px){.bl-layout{grid-template-columns:1fr}}
@media(max-width:600px){.bl-layout,.bl-tabs{padding-inline:20px}}

/* ---------- cards: text over the image ---------- */
.bl-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:640px){.bl-grid{grid-template-columns:1fr}}
.bl-card{position:relative;display:block;min-height:340px;border-radius:20px;overflow:hidden;text-decoration:none;color:#fff;background:var(--bl-ink);isolation:isolate;box-shadow:0 10px 28px rgba(20,25,37,.16);transition:transform .25s,box-shadow .25s}
.bl-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.bl-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,25,37,.10) 0%,rgba(20,25,37,.55) 45%,rgba(20,25,37,.94) 100%)}
.bl-card-plain{background:radial-gradient(ellipse 70% 80% at 85% 10%,rgba(239,35,60,.45),transparent 60%),linear-gradient(160deg,#1E2432,#2B2D42 60%,#161B26)}
.bl-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,25,37,.28)}
.bl-card:hover img{transform:scale(1.05)}
.bl-ov{position:absolute;inset:auto 0 0 0;padding:24px;display:flex;flex-direction:column;gap:8px}
.bl-card .bl-kicker{color:#FF8090}
.bl-card b{font-size:21px;line-height:1.4;font-weight:800}
.bl-card .bl-sum{font-size:15px;line-height:1.7;color:rgba(255,255,255,.80);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-card .bl-meta{font-size:13px;color:rgba(255,255,255,.62)}
.bl-card-big{grid-column:1/-1;min-height:420px}
.bl-card-big b{font-size:clamp(24px,3vw,32px)}
.bl-empty{padding:48px;border:1px dashed var(--bl-line);border-radius:20px;text-align:center;color:var(--bl-muted)}

/* ---------- side panel ---------- */
.bl-side{position:sticky;top:96px;display:grid;gap:26px}
@media(max-width:980px){.bl-side{position:static}}
.bl-side section{border-top:1px solid var(--bl-line);padding-top:20px}
.bl-side h2{margin:0 0 12px;font-size:19px;font-weight:800}
.bl-side ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.bl-cats a{display:flex;justify-content:space-between;gap:12px;padding:7px 0;color:var(--bl-muted);text-decoration:none;font-weight:600}
.bl-cats a span{font:600 13px/1.9 'Poppins',sans-serif;color:var(--bl-muted);opacity:.7}
.bl-cats a:hover,.bl-cats a[aria-current="page"]{color:var(--bl-fg)}
.bl-cats a[aria-current="page"]{font-weight:800}
.bl-recent a{display:grid;gap:2px;padding:8px 0;text-decoration:none;border-bottom:1px solid var(--bl-line)}
.bl-recent li:last-child a{border-bottom:0}
.bl-recent b{font-size:15px;line-height:1.55;font-weight:700}
.bl-recent a:hover b{color:var(--bl-red-deep)}
.bl-recent span{font-size:13px;color:var(--bl-muted)}
.bl-sidecta{background:var(--bl-card);border:1px solid var(--bl-line)!important;border-radius:18px;padding:22px!important;display:grid;gap:14px}
.bl-sidecta b{font-size:17px;line-height:1.5}

/* ---------- article ---------- */
.bl-ahead{max-width:900px;margin:0 auto;text-align:center;padding:56px 24px 30px}
.bl-ahead h1{font-size:clamp(30px,4.6vw,48px);line-height:1.28;margin:12px 0 12px;font-weight:900}
.bl-meta{color:var(--bl-muted);font-size:14px;margin:0}
.bl-coverwrap{max-width:1180px;margin:0 auto 44px;padding:0 24px}
.bl-cover{display:block;width:100%;aspect-ratio:1200/560;object-fit:cover;border-radius:22px;box-shadow:0 18px 44px rgba(20,25,37,.18)}
@media(max-width:600px){.bl-ahead{padding:36px 20px 22px}.bl-coverwrap{padding:0 20px;margin-bottom:30px}.bl-cover{border-radius:16px;aspect-ratio:16/10}}
.bl-article{min-width:0}
.bl-body{font-size:18px;line-height:1.95;max-width:740px}
.bl-body h2{font-size:28px;line-height:1.35;margin:42px 0 12px;font-weight:800}
.bl-body h2:first-child{margin-top:0}
.bl-body h3{font-size:22px;line-height:1.4;margin:32px 0 10px;font-weight:800}
.bl-body h4{font-size:19px;margin:26px 0 8px;font-weight:800}
.bl-body p{margin:0 0 18px}
.bl-body ul,.bl-body ol{margin:0 0 18px;padding-inline-start:1.5em}
.bl-body li{margin-bottom:6px}
.bl-body li::marker{color:var(--bl-red)}
.bl-body a{color:var(--bl-red-deep);text-underline-offset:3px}
.bl-body blockquote{margin:26px 0;padding:16px 22px;border-inline-start:4px solid var(--bl-red);background:var(--bl-card);border-start-end-radius:14px;border-end-end-radius:14px;font-weight:600}
.bl-body img{display:block;border-radius:16px;margin:26px auto}
.bl-body .ql-align-center{text-align:center}.bl-body .ql-align-right{text-align:right}.bl-body .ql-align-left{text-align:left}.bl-body .ql-align-justify{text-align:justify}
.bl-body .ql-direction-rtl{direction:rtl}
.bl-body .ql-indent-1{padding-inline-start:2em}.bl-body .ql-indent-2{padding-inline-start:4em}.bl-body .ql-indent-3{padding-inline-start:6em}
.bl-cta{margin:44px 0 0;padding:30px;border-radius:22px;color:#fff;
  background:radial-gradient(ellipse 70% 90% at 90% 0%,rgba(239,35,60,.40),transparent 60%),linear-gradient(160deg,#1E2432,#2B2D42)}
.bl-cta b{display:block;font-size:23px;line-height:1.4}
.bl-cta p{margin:6px 0 18px;color:rgba(255,255,255,.75)}
.bl-ctabtns{display:flex;gap:10px;flex-wrap:wrap}
.bl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--bl-line);font-weight:800;text-decoration:none;color:var(--bl-fg)}
.bl-cta .bl-btn{border-color:rgba(255,255,255,.35);color:#fff}
.bl-btn.bl-red{background:var(--bl-red);border-color:var(--bl-red);color:#fff}
.bl-btn.bl-red:hover{background:var(--bl-red-deep)}
.bl-more{margin-top:56px}
.bl-more h2{font-size:24px;margin:0 0 18px}
.bl-more .bl-card{min-height:280px}
@media(prefers-reduced-motion:reduce){.bl-card,.bl-card img,.bl-tabs a{transition:none}}