/* ============================================================
   DMA · Media & Agentic AI — Component library
   Section pages, lesson blocks, and interactive diagrams.
   Arabic-primary (RTL) by default; layers on site.css.
   ============================================================ */

/* ---------- Sub-hero (section / lesson header) ---------- */
.subhero{ position:relative; overflow:hidden; padding:50px 0 40px;
  background:linear-gradient(180deg,var(--mint-050),#fff); border-bottom:1px solid var(--line-200); }
.subhero__dots{ position:absolute; top:0; left:0; width:280px; height:220px; z-index:0;
  background-image:radial-gradient(var(--brand) 20%, transparent 21%); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle at top left,#000,transparent 70%); mask-image:radial-gradient(circle at top left,#000,transparent 70%); opacity:.34; }
body.lang-en .subhero__dots{ left:auto; right:0;
  -webkit-mask-image:radial-gradient(circle at top right,#000,transparent 70%); mask-image:radial-gradient(circle at top right,#000,transparent 70%); }
.subhero .container{ position:relative; z-index:1; }
.crumbs{ display:flex; align-items:center; gap:9px; font-size:calc(13px*var(--fs)); color:var(--ink-500); margin-bottom:18px; }
.crumbs a{ color:var(--ink-500); }
.crumbs a:hover{ color:var(--site-accent); }
.crumbs svg{ width:15px; height:15px; opacity:.6; }
body[dir="rtl"] .crumbs svg{ transform:scaleX(-1); }
.subhero__num{ font-size:calc(15px*var(--fs)); font-weight:700; color:var(--site-accent); letter-spacing:.04em; }
.subhero h1{ margin:6px 0 0; }
.subhero__ar{ font-size:calc(46px*var(--fs)); font-weight:700; line-height:1.08; color:var(--ink-900); }
.subhero__en{ font-size:calc(24px*var(--fs)); font-weight:500; color:var(--ink-500); margin-top:5px; }
body.lang-en .subhero h1{ display:flex; flex-direction:column; }
body.lang-en .subhero__ar{ font-size:calc(26px*var(--fs)); font-weight:500; color:var(--ink-500); order:2; margin-top:6px; }
body.lang-en .subhero__en{ font-size:calc(44px*var(--fs)); font-weight:700; color:var(--ink-900); order:1; }
.subhero__lead{ font-size:calc(18px*var(--fs)); font-weight:300; color:var(--ink-500); max-width:640px; margin:18px 0 0; line-height:1.55; }
.subhero__meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.metachip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line-200);
  border-radius:999px; padding:8px 15px; font-size:calc(13px*var(--fs)); font-weight:600; color:var(--ink-700); }
.metachip svg{ width:16px; height:16px; color:var(--site-accent); }

/* ---------- Section intro helper ---------- */
.sintro{ max-width:720px; }
.sintro .eyebrow{ margin-bottom:12px; }
.block{ padding:72px 0; }
.block--tint{ background:var(--mint-050); border-top:1px solid var(--line-200); border-bottom:1px solid var(--line-200); }

/* ---------- Lessons list ---------- */
.lesson-list{ display:flex; flex-direction:column; gap:14px; margin-top:36px; }
.lrow{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line-200);
  border-radius:18px; padding:18px 22px; text-decoration:none; transition:transform .16s, box-shadow .16s, border-color .16s; }
.lrow:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--mint-300); }
.lrow__n{ flex:none; width:46px; height:46px; border-radius:13px; background:var(--mint-100); color:var(--site-accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:calc(18px*var(--fs)); font-variant-numeric:tabular-nums; }
.lrow__body{ flex:1; min-width:0; }
.lrow__t{ font-size:calc(18px*var(--fs)); font-weight:700; color:var(--ink-900); }
.lrow__t .en{ font-weight:500; color:var(--site-accent); font-size:calc(13px*var(--fs)); margin-inline-start:9px; }
.lrow__d{ font-size:calc(13.5px*var(--fs)); color:var(--ink-500); margin-top:3px; }
.lrow__meta{ flex:none; display:flex; align-items:center; gap:16px; color:var(--ink-500); font-size:calc(13px*var(--fs)); }
.lrow__meta .dur{ display:inline-flex; align-items:center; gap:6px; }
.lrow__meta svg{ width:15px; height:15px; }
.lrow__status{ flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.lrow__status.done{ background:var(--site-accent); color:#fff; }
.lrow__status.todo{ border:2px solid var(--line-200); color:var(--ink-300); }
.lrow__status svg{ width:16px; height:16px; }
.lrow .go{ color:var(--ink-300); }
body[dir="rtl"] .lrow .go svg{ transform:scaleX(-1); }

/* ---------- Lesson body (reading column) ---------- */
.lesson-body{ max-width:760px; margin:0 auto; }
.lesson-body p{ font-size:calc(17px*var(--fs)); line-height:1.72; color:var(--fg-2); margin:0 0 1.1em; }
.lesson-body h2{ font-size:calc(28px*var(--fs)); margin:1.6em 0 .5em; color:var(--ink-900); }
.lesson-body h3{ font-size:calc(20px*var(--fs)); margin:1.4em 0 .4em; color:var(--ink-900); }
.lesson-body ul{ margin:0 0 1.2em; padding-inline-start:1.2em; }
.lesson-body li{ font-size:calc(17px*var(--fs)); line-height:1.7; margin-bottom:.5em; color:var(--fg-2); }
.lesson-body strong{ color:var(--ink-900); font-weight:700; }

.callout{ display:flex; gap:14px; border-radius:16px; padding:20px 22px; margin:26px 0;
  background:var(--mint-050); border:1px solid var(--line-200); }
.callout__ico{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--mint-100); color:var(--site-accent); }
.callout__ico svg{ width:19px; height:19px; }
.callout h4{ font-size:calc(15px*var(--fs)); margin:0 0 4px; color:var(--ink-900); }
.callout p{ font-size:calc(14.5px*var(--fs)); margin:0; line-height:1.6; color:var(--ink-700); }
.callout--tip{ background:rgba(0,185,179,.06); border-color:var(--mint-300); }
.callout--warn{ background:#FFF7ED; border-color:#FBD9A8; }
.callout--warn .callout__ico{ background:#FDE8CF; color:#B26B07; }

.keyterms{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:26px 0; }
.term{ background:#fff; border:1px solid var(--line-200); border-radius:14px; padding:18px; }
.term dt{ font-weight:700; color:var(--ink-900); font-size:calc(15px*var(--fs)); margin-bottom:5px; }
.term dd{ margin:0; font-size:calc(14px*var(--fs)); color:var(--ink-500); line-height:1.55; }

.figure{ margin:30px 0; }
.figure__slot{ background:var(--mint-100); border:1px dashed var(--mint-400); border-radius:18px;
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:var(--teal-800);
  font-size:calc(14px*var(--fs)); font-weight:600; text-align:center; padding:20px; }
.figure figcaption{ font-size:calc(13px*var(--fs)); color:var(--ink-500); margin-top:10px; text-align:center; }

.pullquote{ border-inline-start:4px solid var(--brand); padding:6px 0 6px 22px; margin:30px 0;
  font-size:calc(22px*var(--fs)); font-weight:300; color:var(--ink-700); line-height:1.5; }
body[dir="rtl"] .pullquote{ padding:6px 22px 6px 0; }

.lesson-nav{ display:flex; justify-content:space-between; gap:16px; max-width:760px; margin:46px auto 0;
  padding-top:28px; border-top:1px solid var(--line-200); }
.lesson-nav a{ display:flex; flex-direction:column; gap:3px; text-decoration:none; max-width:46%; }
.lesson-nav .lbl{ font-size:calc(12px*var(--fs)); color:var(--ink-300); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.lesson-nav .ttl{ font-size:calc(15px*var(--fs)); font-weight:700; color:var(--site-accent); }
.lesson-nav .next{ text-align:end; }

/* progress rail (lesson) */
.lprogress{ position:sticky; top:118px; }
.lprogress__bar{ height:6px; background:var(--mint-100); border-radius:999px; overflow:hidden; }
.lprogress__fill{ height:100%; background:var(--brand); border-radius:999px; transition:width .3s; }

/* ============================================================
   INTERACTIVE · Anatomy of an agent (sense → think → act loop)
   ============================================================ */
.loop{ display:grid; grid-template-columns:minmax(300px,420px) 1fr; gap:48px; align-items:center; margin-top:36px; }
.loopwrap{ position:relative; width:min(420px,100%); aspect-ratio:1; margin-inline:auto; }
.loop__svg{ position:absolute; inset:0; width:100%; height:100%; }
.loop__node{ position:absolute; transform:translate(-50%,-50%); width:108px; height:108px; border-radius:22px;
  background:#fff; border:1.5px solid var(--line-200); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  transition:transform .2s, box-shadow .2s, border-color .2s, background .2s; text-align:center; padding:6px; }
.loop__node .ico{ width:26px; height:26px; color:var(--site-accent); }
.loop__node .lab{ font-size:calc(12.5px*var(--fs)); font-weight:700; color:var(--ink-700); line-height:1.15; }
.loop__node.active{ background:var(--site-accent); border-color:var(--site-accent); box-shadow:var(--shadow-teal); transform:translate(-50%,-50%) scale(1.07); }
.loop__node.active .ico, .loop__node.active .lab{ color:#fff; }
.loop__center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%;
  background:var(--teal-900); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; z-index:2; box-shadow:var(--shadow-md); }
.loop__center .t{ font-size:calc(14px*var(--fs)); font-weight:700; }
.loop__center .s{ font-size:calc(10px*var(--fs)); opacity:.7; }
.loop__detail{ }
.loop__detail .step-no{ font-size:calc(13px*var(--fs)); font-weight:700; color:var(--site-accent); letter-spacing:.05em; }
.loop__detail h3{ font-size:calc(26px*var(--fs)); margin:6px 0 4px; color:var(--ink-900); }
.loop__detail .en{ font-size:calc(14px*var(--fs)); color:var(--ink-500); font-weight:600; }
.loop__detail p{ font-size:calc(16px*var(--fs)); color:var(--fg-2); line-height:1.65; margin:14px 0 16px; }
.loop__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.loop__tags span{ background:var(--mint-100); color:var(--teal-800); border-radius:999px; padding:6px 12px; font-size:calc(12.5px*var(--fs)); font-weight:600; }
.loop__ctl{ display:flex; align-items:center; gap:14px; margin-top:22px; }
.loop__play{ width:44px; height:44px; border-radius:50%; border:0; background:var(--site-accent); color:#fff; display:flex; align-items:center; justify-content:center; }
.loop__play svg{ width:20px; height:20px; }
.loop__dots{ display:flex; gap:8px; }
.loop__dots b{ width:9px; height:9px; border-radius:50%; background:var(--mint-300); cursor:pointer; transition:.2s; }
.loop__dots b.on{ background:var(--site-accent); transform:scale(1.25); }

/* ============================================================
   INTERACTIVE · Five types of AI agents
   ============================================================ */
.types{ margin-top:36px; }
.types__tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.tbtn{ border:1.5px solid var(--line-200); background:#fff; border-radius:999px; padding:11px 18px;
  font-size:calc(14px*var(--fs)); font-weight:700; color:var(--ink-700); display:inline-flex; align-items:center; gap:9px; transition:.16s; }
.tbtn .idx{ width:22px; height:22px; border-radius:50%; background:var(--mint-100); color:var(--site-accent); font-size:calc(12px*var(--fs)); display:flex; align-items:center; justify-content:center; }
.tbtn:hover{ border-color:var(--mint-300); }
.tbtn.active{ background:var(--site-accent); border-color:var(--site-accent); color:#fff; }
.tbtn.active .idx{ background:rgba(255,255,255,.22); color:#fff; }
.types__panel{ margin-top:24px; background:#fff; border:1px solid var(--line-200); border-radius:24px; padding:32px;
  display:grid; grid-template-columns:1.2fr 1fr; gap:36px; box-shadow:var(--shadow-sm); }
.types__panel h3{ font-size:calc(26px*var(--fs)); color:var(--ink-900); margin:0 0 2px; }
.types__panel .en{ font-size:calc(14px*var(--fs)); color:var(--site-accent); font-weight:600; }
.types__panel p{ font-size:calc(16px*var(--fs)); color:var(--fg-2); line-height:1.65; margin:14px 0 0; }
.types__verb{ display:inline-block; margin-top:16px; font-size:calc(13px*var(--fs)); font-weight:700; color:var(--teal-800); background:var(--mint-100); padding:6px 14px; border-radius:999px; }
.types__ex{ background:var(--mint-050); border:1px solid var(--line-200); border-radius:18px; padding:22px; align-self:start; }
.types__ex h4{ font-size:calc(13px*var(--fs)); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500); margin:0 0 10px; }
.types__ex .exrow{ display:flex; gap:12px; align-items:flex-start; }
.types__ex .exico{ width:42px; height:42px; border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); color:var(--site-accent); display:flex; align-items:center; justify-content:center; flex:none; }
.types__ex .exico svg{ width:23px; height:23px; }
.types__ex .extxt{ font-size:calc(15px*var(--fs)); color:var(--ink-700); line-height:1.5; }
.meter{ display:flex; gap:6px; margin-top:18px; }
.meter b{ width:26px; height:7px; border-radius:999px; background:var(--mint-200); }
.meter b.on{ background:var(--site-accent); }
.meter__lab{ font-size:calc(12px*var(--fs)); color:var(--ink-500); margin-top:8px; }

/* ============================================================
   INTERACTIVE · Multi-agent structures
   ============================================================ */
.magents{ display:grid; grid-template-columns:1fr 380px; gap:40px; margin-top:32px; align-items:start; }
.magents__stage{ background:var(--teal-900); border-radius:24px; padding:26px; position:relative; overflow:hidden; min-height:340px; }
.magents__seg{ display:inline-flex; background:rgba(255,255,255,.1); border-radius:999px; padding:4px; gap:4px; margin-bottom:18px; }
.magents__seg button{ border:0; background:transparent; color:rgba(255,255,255,.75); border-radius:999px; padding:8px 16px; font-size:calc(13px*var(--fs)); font-weight:700; white-space:nowrap; }
.magents__seg button.active{ background:#fff; color:var(--teal-900); }
.magents__svg{ width:100%; height:280px; }
.magents__info h3{ font-size:calc(22px*var(--fs)); color:var(--ink-900); margin:0 0 4px; }
.magents__info .en{ font-size:calc(13px*var(--fs)); color:var(--site-accent); font-weight:600; }
.magents__info p{ font-size:calc(15.5px*var(--fs)); color:var(--fg-2); line-height:1.6; margin:12px 0 18px; }
.prosc{ display:flex; flex-direction:column; gap:9px; }
.prosc div{ display:flex; gap:10px; align-items:flex-start; font-size:calc(14px*var(--fs)); color:var(--ink-700); }
.prosc .mk{ width:20px; height:20px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }
.prosc .mk svg{ width:12px; height:12px; }
.prosc .pro .mk{ background:var(--mint-100); color:var(--site-accent); }
.prosc .con .mk{ background:#FDEced; color:#C0445A; }

/* ============================================================
   INTERACTIVE · Agent vs Agentic AI vs RAG
   ============================================================ */
.compare{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.ccol{ background:#fff; border:1px solid var(--line-200); border-radius:22px; overflow:hidden; }
.ccol__head{ padding:22px 22px 18px; border-bottom:1px solid var(--line-200); }
.ccol__head .ico{ width:46px; height:46px; border-radius:13px; background:var(--mint-100); color:var(--site-accent); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.ccol__head .ico svg{ width:24px; height:24px; }
.ccol__head h3{ font-size:calc(19px*var(--fs)); color:var(--ink-900); margin:0 0 2px; }
.ccol__head .en{ font-size:calc(13px*var(--fs)); color:var(--ink-500); font-weight:600; }
.ccol--feature{ border-color:var(--teal-700); box-shadow:var(--shadow-md); }
.ccol--feature .ccol__head{ background:var(--teal-900); border-color:var(--teal-900); }
.ccol--feature .ccol__head h3{ color:#fff; } .ccol--feature .ccol__head .en{ color:var(--teal-400); }
.ccol--feature .ccol__head .ico{ background:rgba(255,255,255,.12); color:var(--teal-400); }
.ccol__rows{ padding:8px 22px 22px; }
.ccol__row{ padding:13px 0; border-bottom:1px dashed var(--line-200); }
.ccol__row:last-child{ border-bottom:0; }
.ccol__row .k{ font-size:calc(11.5px*var(--fs)); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-300); font-weight:700; }
.ccol__row .v{ font-size:calc(14.5px*var(--fs)); color:var(--ink-700); line-height:1.5; margin-top:3px; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .loop{ grid-template-columns:1fr; gap:30px; }
  .loopwrap{ margin:0 auto; }
  .types__panel{ grid-template-columns:1fr; gap:24px; }
  .magents{ grid-template-columns:1fr; }
  .compare{ grid-template-columns:1fr; }
  .keyterms{ grid-template-columns:1fr; }
  .subhero__ar{ font-size:calc(34px*var(--fs)); }
}