/* ============================================================
   مودّة الصغار — مكوّنات عالم الأطفال (التصميم المعتمد)
   بنفسجيّ #8650e9 من [data-world="kids"] + لمسات باستيل مرحة.
   يُكمّل world-landing.css (.wl-*). Mobile-first · RTL · أزرار كبيرة ودّية.
   ============================================================ */

/* ألوان باستيل للمراحل العمريّة (ديكور فقط، تتكيّف مع الثيم عبر color-mix) */
:root {
  --kid-pink: #ffe9f3; --kid-blue: #e8f0ff; --kid-lav: #f4eaff; --kid-cream: #fff8e9;
  --kid-pink-ink: #c43d7a; --kid-blue-ink: #2b6cb0; --kid-lav-ink: #7a3bc4;
}

.kids-hero {
  background: linear-gradient(160deg, var(--kid-lav), var(--kid-pink) 55%, var(--bg-surface) 100%);
  border-bottom: 4px solid var(--world-accent);
}
.kids-hero .wl-wrap { padding-block: var(--space-10); }
.kids-hero-grid { display:grid; grid-template-columns:1fr; gap: var(--space-6); align-items:center; }
@media (min-width: 920px){ .kids-hero-grid { grid-template-columns: 0.85fr 1.15fr; } }
.kids-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height:1.15; font-weight:800; margin: var(--space-2) 0 var(--space-3); text-wrap:balance; }
.kids-hero h1 .kid-accent { color: var(--world-accent); }
.kids-hero-media { border-radius: 28px; overflow:hidden; box-shadow: var(--shadow-lg); }
.kids-hero-media img { width:100%; height:100%; object-fit:cover; display:block; }
.kids-trust { display:flex; gap: var(--space-4); flex-wrap:wrap; margin-top: var(--space-5); }
.kids-trust span { display:inline-flex; align-items:center; gap: var(--space-2); font-size: var(--t-body-sm-size); color: var(--text-secondary); font-weight:600; }
.kids-trust i { color: var(--world-accent); }

/* أزرار مرحة أكبر وأكثر استدارة */
.kids-btn { display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2); min-height:54px; padding: 0 var(--space-7); border-radius: 99px; font-weight:800; font-size: 1.05rem; text-decoration:none; cursor:pointer; border:2px solid transparent; transition: transform var(--dur-fast) var(--ease-standard); }
.kids-btn-primary { background: var(--world-accent); color: var(--world-on-accent); }
.kids-btn-primary:hover { transform: translateY(-2px) scale(1.01); }
.kids-btn-ghost { background: var(--bg-surface); color: var(--world-accent-strong, var(--world-accent)); border-color: var(--world-border); }
.kids-btn:focus-visible { outline: 3px solid var(--world-accent); outline-offset: 3px; }

/* بطاقات المراحل العمريّة */
.kids-stages { display:grid; grid-template-columns:1fr; gap: var(--space-5); }
@media (min-width: 820px){ .kids-stages { grid-template-columns: repeat(3,1fr); } }
.kids-stage { border-radius: 24px; padding: var(--space-6); border:1px solid var(--border-subtle); background: var(--bg-surface); display:flex; flex-direction:column; gap: var(--space-2); }
.kids-stage.s-young { background: linear-gradient(170deg, var(--kid-pink), var(--bg-surface)); }
.kids-stage.s-mid   { background: linear-gradient(170deg, var(--kid-blue), var(--bg-surface)); }
.kids-stage.s-old   { background: linear-gradient(170deg, var(--kid-lav), var(--bg-surface)); }
.kids-stage img { width:96px; height:96px; object-fit:contain; align-self:center; }
.kids-stage .kids-age { align-self:flex-start; background: var(--world-accent); color:var(--world-on-accent); border-radius:99px; padding: 3px 14px; font-weight:700; font-size: var(--t-caption-size); }
.kids-stage h3 { font-size: var(--t-h4-size); margin: var(--space-1) 0 0; }
.kids-stage ul { list-style:none; padding:0; margin: var(--space-2) 0 0; display:grid; gap: var(--space-1); }
.kids-stage li { color: var(--text-secondary); font-size: var(--t-body-sm-size); padding-inline-start:20px; position:relative; }
.kids-stage li::before { content:"★"; position:absolute; inset-inline-start:0; color: var(--world-accent); }

/* بطاقات المرافقين (mascots) */
.kids-mascots { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
@media (min-width: 760px){ .kids-mascots { grid-template-columns: repeat(4,1fr); } }
.kids-mascot { background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: 22px; padding: var(--space-5); text-align:center; }
.kids-mascot img { width:92px; height:92px; object-fit:contain; margin-bottom: var(--space-2); }
.kids-mascot h3 { font-size: var(--t-h6-size); margin:0; }
.kids-mascot p { color: var(--text-muted); font-size: var(--t-body-sm-size); margin: var(--space-1) 0 0; }

/* بلاطات القيمة */
.kids-values { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
@media (min-width: 900px){ .kids-values { grid-template-columns: repeat(5,1fr); } }
.kids-value { text-align:center; padding: var(--space-4); }
.kids-value .kids-vico { width:56px; height:56px; border-radius:50%; background: var(--world-accent-subtle); color: var(--world-accent); display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom: var(--space-2); }
.kids-value h3 { font-size: var(--t-h6-size); margin:0; }
.kids-value p { color: var(--text-secondary); font-size: var(--t-body-sm-size); margin: var(--space-1) 0 0; }

/* قسم الأهل + الأمان */
.kids-split { display:grid; grid-template-columns:1fr; gap: var(--space-5); }
@media (min-width: 860px){ .kids-split { grid-template-columns:1fr 1fr; } }
.kids-panel { background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: 22px; padding: var(--space-6); }
.kids-panel.safe { background: linear-gradient(170deg, color-mix(in srgb, var(--c-nama-500,#2e9e6b) 10%, var(--bg-surface)), var(--bg-surface)); }
.kids-check { list-style:none; padding:0; margin: var(--space-3) 0 0; display:grid; gap: var(--space-2); }
.kids-check li { padding-inline-start:26px; position:relative; color: var(--text-secondary); font-size: var(--t-body-sm-size); }
.kids-check li::before { content:"✓"; position:absolute; inset-inline-start:0; color: var(--c-nama-600,#1f7d52); font-weight:800; }

@media (prefers-reduced-motion: reduce){ .kids-btn-primary:hover { transform:none; } }