/* ============================================================
   مودّة — بوّابة الصفحة الرئيسيّة (Five-Worlds Portal)
   محايدة بهوية مودّة (توكنز)، ولكلّ بطاقة عالم لونها عبر [data-world].
   مبنيّة بالكامل على brand-tokens.css + world-themes.css. Mobile-first, RTL.
   ============================================================ */

.hp { color: var(--text-primary); background: var(--bg-canvas); }
.hp .hp-wrap { max-width: 1140px; margin-inline: auto; padding-inline: var(--space-4); }
.hp section { padding-block: var(--space-12); }
.hp h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); text-wrap: balance; margin: 0 0 var(--space-3); }
.hp .hp-eyebrow { display:inline-block; color: var(--primary); font-size: var(--t-label-size); font-weight:600; letter-spacing:.02em; margin-bottom: var(--space-2); }
.hp .hp-sub { color: var(--text-secondary); font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); max-width: 60ch; }
.hp .hp-head { text-align: center; margin-bottom: var(--space-8); }
.hp .hp-head .hp-sub { margin-inline: auto; }

/* ---- Hero ---- */
.hp-hero {
  background: linear-gradient(160deg, var(--primary-subtle), var(--bg-surface) 70%);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.hp-hero h1 {
  font-size: var(--t-display-size); line-height: var(--t-display-lh); font-weight: var(--t-display-weight);
  text-wrap: balance; margin: var(--space-3) auto var(--space-4); max-width: 18ch;
}
.hp-hero .hp-sub { margin-inline: auto; }
.hp-hero-cta { display:flex; gap: var(--space-3); justify-content:center; flex-wrap:wrap; margin-top: var(--space-6); }
.hp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill);
  font-weight:600; font-size: var(--t-button-size); text-decoration:none; cursor:pointer;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
  border: 1px solid transparent;
}
.hp-btn-primary { background: var(--primary); color: var(--text-on-primary); }
.hp-btn-primary:hover { background: var(--primary-hover); }
.hp-btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary-border); }
.hp-btn-ghost:hover { background: var(--primary-subtle); }
.hp-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- العوالم الخمسة ---- */
.hp-worlds-grid { display:grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 680px) { .hp-worlds-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .hp-worlds-grid { grid-template-columns: repeat(3, 1fr); }
  /* Life هي الأصل التاريخيّ — بطاقة أبرز */
  .hp-world-card.is-flagship { grid-column: span 2; }
}
.hp-world-card {
  display:flex; flex-direction:column; gap: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--world-border, var(--border-subtle));
  border-top: 4px solid var(--world-accent, var(--primary));
  border-radius: var(--radius-lg); padding: var(--space-6);
  text-decoration:none; color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hp-world-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hp-world-card:focus-visible { outline: 2px solid var(--world-accent, var(--focus-ring)); outline-offset: 3px; }
.hp-world-ico {
  width: 54px; height: 54px; border-radius: var(--radius-md);
  display:inline-flex; align-items:center; justify-content:center; font-size: 1.5rem;
  background: var(--world-accent-subtle); color: var(--world-accent);
}
.hp-world-card h3 { font-size: var(--t-h4-size); margin: var(--space-2) 0 0; }
.hp-world-card p { color: var(--text-secondary); font-size: var(--t-body-size); line-height: var(--t-body-lh); margin: 0; flex: 1; }
.hp-world-card .hp-world-go { color: var(--world-accent); font-weight:600; margin-top: var(--space-3); }
.hp-world-card.is-flagship .hp-world-ico { width: 64px; height: 64px; font-size: 1.9rem; }

/* ---- بطاقات الخدمات ---- */
.hp-services-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 900px) { .hp-services-grid { grid-template-columns: repeat(3, 1fr); } }
.hp-service {
  background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-5); text-decoration:none; color: var(--text-primary);
  display:flex; flex-direction:column; gap: var(--space-1);
  transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.hp-service:hover { border-color: var(--primary-border); transform: translateY(-2px); }
.hp-service:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hp-service .hp-service-ico { color: var(--primary); font-size: 1.3rem; }
.hp-service h3 { font-size: var(--t-h6-size); margin: var(--space-1) 0 0; }
.hp-service p { color: var(--text-muted); font-size: var(--t-body-sm-size); margin:0; }

/* ---- أقسام محايدة ---- */
.hp-alt { background: var(--bg-subtle); }
.hp-band {
  background: var(--primary-subtle); border:1px solid var(--primary-border); border-radius: var(--radius-xl);
  padding: var(--space-8); text-align:center;
}
.hp-two { display:grid; grid-template-columns: 1fr; gap: var(--space-6); align-items:center; }
@media (min-width: 860px){ .hp-two { grid-template-columns: 1fr 1fr; } }

/* ---- محتوى يستحق القراءة ---- */
.hp-links { display:flex; gap: var(--space-3); flex-wrap:wrap; }
.hp-linkcard { background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); text-decoration:none; color: var(--text-primary); font-weight:600; }
.hp-linkcard:hover { border-color: var(--primary-border); }

/* ---- الأسئلة الشائعة ---- */
.hp-faq { max-width: 820px; margin-inline:auto; }
.hp-faq details { background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); }
.hp-faq summary { cursor:pointer; font-weight:600; color: var(--text-primary); }
.hp-faq details[open] summary { color: var(--primary); margin-bottom: var(--space-2); }
.hp-faq p { color: var(--text-secondary); margin: 0; line-height: var(--t-body-lh); }

/* ---- الطباعة المتجاوبة للهيرو عبر التوكنز (تتكيّف تلقائيًّا) ---- */
@media (max-width: 768px) {
  .hp section { padding-block: var(--space-10); }
  .hp-hero { padding-block: var(--space-10); }
}