/* ==========================================================================
   مركز الرأي الراشد — تخطيط الصفحة الرئيسية
   ترتيب الأقسام كما في التصميم: الهيرو، الأرقام، أحدث الإصدارات، الأخبار،
   الفعاليات، الاستشارات والتدريب، الموضوعات، عن المركز، الشركاء.
   (النشرة البريدية والتذييل والترويسة في components.css)
   ========================================================================== */

/* ---------- الهيرو ---------- */
.arc-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); color: var(--white); }
.arc-hero__bg { grid-area: 1 / 1; position: relative; overflow: hidden; background: var(--gradient-brand); }
.arc-hero__shape { position: absolute; inset-block: 0; pointer-events: none; }
.arc-hero__shape--a { inset-inline-start: -6%; width: 46%; background: rgba(255, 255, 255, 0.06); clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%); }
.arc-hero__shape--b { inset-inline-start: 34%; width: 34%; background: rgba(14, 20, 32, 0.1); clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); }
.arc-hero__ring {
  position: absolute; inset-block-start: -20%; inset-inline-end: 8%; width: 360px; height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-pill); pointer-events: none;
}

.arc-hero__inner {
  grid-area: 1 / 1; position: relative;
  padding-block: 72px 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-8); align-items: center;
}

.arc-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-block-end: var(--space-3);
  padding: 6px 14px; border: 1px solid var(--arc-on-dark-border); border-radius: var(--radius-pill);
  background: var(--arc-on-dark-line); color: var(--white);
  font-size: var(--fs-caption); line-height: 1.5;
}
.arc-badge::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--teal-300); border-radius: var(--radius-pill); }

.arc-hero__title { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-display); color: var(--white); text-wrap: pretty; }
.arc-hero__lead { margin-block-start: 20px; max-width: 560px; font-size: var(--arc-fs-lead); line-height: var(--lh-body); color: var(--arc-on-dark-88); text-wrap: pretty; }
.arc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: 36px; }

/* بطاقة الإصدار المميّز */
.arc-featured { padding: var(--space-3); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--arc-shadow-hero); color: var(--navy-900); }
.arc-featured__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 18px; font-size: var(--fs-caption); line-height: 1.5; }
.arc-featured__label { font-weight: 600; color: var(--teal-700); }
.arc-featured__date { color: var(--ink-500); }
.arc-featured__main { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; }
.arc-featured__title { margin-block-start: 10px; font-size: var(--arc-fs-h4); font-weight: 700; line-height: 1.35; color: var(--navy-900); text-wrap: pretty; }
.arc-featured__title a { color: inherit; }
.arc-featured__title a:hover { color: var(--teal-700); text-decoration: none; }
.arc-featured__byline { margin-block-start: 8px; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-500); }
.arc-featured__rule { height: 1px; margin-block: 20px; border: 0; background: var(--line-200); }
.arc-featured__hl-title { font-size: 1rem; line-height: 1.5; }
.arc-featured__hl-title > span { font-size: var(--fs-caption); font-weight: 600; color: var(--navy-900); }
.arc-featured__hl { display: flex; flex-direction: column; gap: 12px; margin-block-start: 14px; }
.arc-featured__hl li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-700); }
.arc-featured__hl li::before { content: ""; width: 6px; height: 6px; flex: none; margin-block-start: 7px; background: var(--teal-500); border-radius: 2px; }
.arc-featured__cta { margin-block-start: 20px; }

/* ---------- شريط الأرقام ---------- */
.arc-stats { background: var(--white); border-block-end: 1px solid var(--line-200); }
.arc-stats__grid { padding-block: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arc-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-inline: var(--space-3); border-inline-start: 1px solid var(--line-200); }
.arc-stat__num { font-family: var(--font-en); font-size: var(--arc-fs-stat); font-weight: 700; line-height: 1.2; color: var(--navy-900); }
.arc-stat__label { margin-block-start: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-500); }

/* ---------- الشبكات ---------- */
.arc-pubs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }

.arc-news__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3); }

.arc-events__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }

.arc-services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.arc-topics__title { margin-block-end: var(--space-4); }
.arc-topics__all { display: none; }

/* ---------- عن المركز (خلفية نمط الشعار الخفيف) ----------
   النمط الرسمي من دليل الهوية (ص 12): الرمز الكحلي على mist-100، يتكرر أفقياً كل 380 وحدة
   ورأسياً كل 240، ويُزاح كل صف 0.6 من التكرار. البلاطة: assets/img/pattern-symbol.svg (380×1200).
   الشفافية تجعله خلفية هادئة للنص؛ عدّل المتغيّرين التاليين لتغيير الحجم أو الوضوح. */
.arc-about {
  --arc-pattern-tile: 152px;      /* عرض البلاطة؛ عرض الرمز ≈ 58% منه */
  --arc-pattern-opacity: 0.06;
  position: relative;
  background-color: var(--mist-100);
  border-block: 1px solid var(--line-200);
}
.arc-about::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/pattern-symbol.svg") center top / var(--arc-pattern-tile) auto repeat;
  opacity: var(--arc-pattern-opacity);
}
.arc-about__inner { position: relative; padding-block: 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.arc-about__title { margin-block-start: 12px; font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-display); color: var(--navy-900); text-wrap: pretty; }
.arc-about__text { margin-block-start: 18px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-700); text-wrap: pretty; }
.arc-about__link { margin-block-start: 28px; gap: 10px; }
.arc-about__media { aspect-ratio: 3 / 2; border: 1px solid var(--line-200); border-radius: var(--radius-md); }
.arc-about__media .arc-ph__label { padding: 8px 14px; background: rgba(255, 255, 255, 0.85); }

/* ---------- الشركاء ---------- */
.arc-partners { padding-block: 56px; }
.arc-partners__caption { margin-block-end: 28px; text-align: center; font-size: var(--fs-small); font-weight: 400; line-height: 1.5; color: var(--ink-500); }

/* ==========================================================================
   اللوحي (768–1023px) — غير مرسوم في التصميم؛ حلّ وسط بين اللوحتين
   ========================================================================== */
@media (max-width: 1023px) {
  .arc-hero__inner { padding-block: 56px 64px; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .arc-featured__main { grid-template-columns: 112px minmax(0, 1fr); }
  .arc-pubs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc-news__grid { grid-template-columns: minmax(0, 1fr); }
  .arc-events__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc-topics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc-about__inner { padding-block: 56px; gap: var(--space-4); }
  .arc-partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 899px) {
  .arc-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .arc-hero__featured { max-width: 520px; }
}

/* ==========================================================================
   الهاتف (≤ 767px) — مطابق للوحة 390px
   ========================================================================== */
@media (max-width: 767px) {
  /* الهيرو: التدرّج خلف النص فقط، وبطاقة الإصدار المميّز تنزل إلى شريط أبيض تحته */
  .arc-hero__bg { background: var(--arc-gradient-brand-mobile); }
  .arc-hero__shape--a { inset-inline-start: -10%; width: 60%; clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }
  .arc-hero__shape--b, .arc-hero__ring { display: none; }
  .arc-hero__inner { display: contents; }
  .arc-hero__content { grid-area: 1 / 1; position: relative; padding: 36px 20px 40px; }
  .arc-hero__featured { grid-area: 2 / 1; padding: 20px; background: var(--white); border-block-end: 1px solid var(--line-200); }

  .arc-badge { gap: 7px; margin-block-end: 18px; padding: 5px 12px; }
  .arc-badge::before { width: 5px; height: 5px; }
  .arc-hero__lead { margin-block-start: 14px; font-size: var(--fs-body); text-wrap: wrap; }
  .arc-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-block-start: var(--space-3); }
  .arc-hero__actions .arc-btn { width: 100%; }
  .arc-hero__actions .arc-icon { display: none; }

  .arc-featured { padding: var(--space-2); background: var(--mist-100); box-shadow: none; }
  .arc-featured__top { margin-block-end: 14px; }
  .arc-featured__main { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .arc-featured .arc-cover { padding: 12px; }
  .arc-featured .arc-cover__symbol { height: 16px; }
  .arc-featured .arc-cover__title { font-size: var(--fs-caption); }
  .arc-featured .arc-cover__type { display: none; }
  .arc-featured .arc-tag { padding: 3px 9px; background: var(--white); }
  .arc-featured__title { margin-block-start: 8px; font-size: var(--fs-body); line-height: 1.45; }
  .arc-featured__byline { margin-block-start: 6px; font-size: var(--fs-caption); line-height: 1.5; }
  .arc-featured__rule, .arc-featured__hl-title, .arc-featured__hl { display: none; }
  .arc-featured__cta { margin-block-start: 14px; }

  /* الأرقام: شبكة 2×2 بفواصل متقاطعة */
  .arc-stats__grid { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc-stat { padding: 20px; border: 0; }
  .arc-stat:nth-child(even) { border-inline-start: 1px solid var(--line-200); }
  .arc-stat:nth-child(-n + 2) { border-block-end: 1px solid var(--line-200); }
  .arc-stat__num { line-height: 1.2143; }   /* 34px عند 28px كما في اللوحة */
  .arc-stat__label { margin-block-start: 4px; font-size: var(--fs-caption); }

  /* الإصدارات: التمرير الأفقي الوحيد في الصفحة */
  .arc-pubs > .arc-container { padding-inline: 0; }
  .arc-pubs .arc-section__head { padding-inline: 20px; }
  .arc-pubs__grid {
    display: flex; gap: 14px; overflow-x: auto; padding-inline: 20px; padding-block-end: 6px;
    scroll-snap-type: x proximity; scroll-padding-inline: 20px; -webkit-overflow-scrolling: touch;
  }
  .arc-pubs__grid > * { flex: none; width: 212px; scroll-snap-align: start; }

  .arc-news__list { gap: 12px; margin-block-start: 14px; }
  .arc-news__grid { gap: 0; }
  .arc-news__list > :nth-child(n + 4) { display: none; }

  .arc-events__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .arc-events__grid > :nth-child(n + 3) { display: none; }

  .arc-services__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .arc-topics__title { margin-block-end: 18px; }
  .arc-topics__grid { gap: 12px; }
  .arc-topics__grid > :nth-child(n + 5) { display: none; }
  .arc-topics__all { display: flex; margin-block-start: 14px; gap: 8px; }

  /* عن المركز: العنوان ثم الصورة ثم الفقرة ثم الرابط */
  .arc-about { --arc-pattern-tile: 126px; }   /* النسبة نفسها التي صغّر بها التصميم شبكته على الهاتف (40/48) */
  .arc-about__inner { padding-block: var(--space-4); display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .arc-about__body { display: contents; }
  .arc-about__title { order: 1; margin-block-start: 10px; font-size: 1.5rem; }
  .arc-about__media { order: 2; margin-block: 18px; }
  .arc-about__text { order: 3; margin-block-start: 0; font-size: var(--arc-fs-ui); }
  .arc-about__link { order: 4; margin-block-start: 18px; gap: 8px; align-self: flex-start; font-size: var(--arc-fs-ui); }
  .arc-about__link .arc-icon { display: block; }
  .arc-about__media .arc-ph__label { display: none; }

  .arc-partners { display: none; }
}