/* ==========================================================================
   مسابقات اليوم الوطني السعودي 96 — جامعة الملك فيصل
   نظام تصميم مبني على لغة "الفسيفساء البكسلية" لهوية اليوم الوطني
   ========================================================================== */

/* الخطوط: انظر css/fonts.css (الخط السعودي مضمّن base64) */

/* ---------------------------------------------------------------- الرموز */
:root {
  /* ===== لوحة دليل هوية اليوم الوطني =====
     خلفيتان فقط لجميع الأقسام، تتبادلان بالتناوب: */
  --bg-dark: #002628;
  /* bg-dark */
  --bg-green: #00343a;
  /* green  */

  /* أسماء --ink-* مبقّاة كأسماء بديلة حتى لا تتفرّق المراجع في الملف */
  --ink-0: var(--bg-dark);
  --ink-1: var(--bg-dark);
  --ink-2: var(--bg-green);

  /* سطح البطاقات: أبيض شفيف يعمل فوق الخلفيتين معًا */
  --surface: rgba(255, 255, 255, .055);

  /* الأخضر الوطني */
  --green: #00894a;
  --green-hi: #00a651;
  --lime: #5aba1c;
  --lime-hi: #7fe22e;

  /* القيم الستّ — من ألوان اللوحة الستّة */
  --c-vision: #7c5d21;
  --c-courage: #607c4f;
  --c-determination: #0050af;
  --c-authenticity: #5aba1c;
  --c-generosity: #00894a;
  --c-giving: #6565e0;

  --w: #ffffff;
  --w-80: rgba(255, 255, 255, .80);
  --w-55: rgba(255, 255, 255, .55);
  --w-35: rgba(255, 255, 255, .35);
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .06);

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 11px;

  --maxw: 1240px;
  --pad: clamp(18px, 4vw, 44px);

  /* --accent:var(--lime); */
  --accent: #00894a;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* الخطوط: السعودي للعناوين والإبرازات، وIBM Plex Sans Arabic للنصوص */
  --font-head: "Saudi", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Saudi", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-1);
  color: var(--w);
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* حبيبات ناعمة تكسر مسطّح اللون.
   سابقًا: mix-blend-mode:overlay على طبقة ثابتة بحجم الشاشة — يفرض على
   المتصفّح إعادة دمج الصفحة كاملةً مع كل إطار تمرير، وهو أثقل ما كان في
   الصفحة. الآن بلا دمج، ومرفوعة إلى طبقة عرض مستقلّة عبر translateZ فلا
   تُعاد رسمها أثناء التمرير إطلاقًا. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .06;
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none
}

img,
svg,
canvas {
  max-width: 100%;
  display: block
}

ul {
  margin: 0;
  padding: 0;
  list-style: none
}

p {
  margin: 0 0 1.1em
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em
}

/* الإبرازات: شعارات، أرقام عملاقة، قيم بارزة — كلها بالخط السعودي */
.h-display,
.h-sec,
.h-card,
.kicker,
.idx,
.cta__slogan,
.fig b,
.pod__val,
.crit__top span,
.phero__slug,
.ticker__set span,
.nav__id b,
.panel__h {
  font-family: var(--font-head)
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad)
}

.wrap--wide {
  max-width: 1500px
}

/* ------------------------------------------------------------ مساعدات */
.t-muted {
  color: var(--w-55)
}

.t-soft {
  color: var(--w-80)
}

.center {
  text-align: center
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .01em
}

/* رقم فهرسي عملاق */
.idx {
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  font-weight: 700;
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--w-35);
  letter-spacing: -.04em;
  user-select: none;
}

/* عنوان قسم */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 16px;
  margin-right: 1rem;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}

.h-display {
  font-size: clamp(2rem, 5vw, 3.9rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1
}

.h-sec {
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.18
}

.h-card {
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.015em
}

.lead {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--w-80);
  line-height: 1.85;
  max-width: 62ch
}

/* شريط الزخرفة */
.strip {
  height: 22px;
  background: repeat-x center/auto 100%;
  opacity: .9
}

.strip--1 {
  background-image: url("../assets/patterns/p1.svg")
}

.strip--2 {
  background-image: url("../assets/patterns/p2.svg");
  height: 16px
}

.strip--3 {
  background-image: url("../assets/patterns/p3.svg");
  height: 20px
}

/* ------------------------------------------------------------ الأزرار */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: scale(1);
  transition: transform .45s var(--ease), background .3s;
}

.btn:hover {
  transform: translateY(-2px)
}

.btn i {
  transition: transform .3s var(--ease)
}

.btn:hover i {
  transform: translateX(-4px)
}

.btn--fill {
  color: var(--bg-dark)
}

.btn--fill::before {
  background: var(--accent)
}

.btn--fill:hover::before {
  background: #fff
}

.btn--line {
  color: var(--w);
  border-color: var(--line)
}

.btn--line::before {
  background: rgba(255, 255, 255, .06)
}

.btn--line:hover {
  border-color: var(--w-35)
}

.btn--sm {
  padding: 11px 20px;
  font-size: .9rem
}

/* ------------------------------------------------------------ الترويسة */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
  background-color: transparent;
}

.nav.is-stuck {
  background-color: rgba(0, 38, 40, .82);
  border-bottom-color: var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav__in {
  /* شعار الجامعة مربّع: ارتفاعه = عرضه = --logo-h */
  --logo-h: 40px;
  /* ارتفاع شعار اليوم الوطني (الشعار العريض assets/brand-emblem2.svg) */
  --nd-h: 40px;
  /* المساحة الفارغة 2X: المربّع 10.84 وحدة وارتفاع الشعار 119.26،
     أي 2X = 21.68 = 18.1788% من الارتفاع. مربوطة بـ --nd-h فتتبعه. */
  --nd-clear: calc(var(--nd-h) * .181788);
  display: flex;
  align-items: center;
  gap: 20px;
  height: 82px
}

/* أعلى جهة اليمين: شعار اليوم الوطني وحده.
   الجانبان (.brand و.nav__kfu) يأخذان flex:1 بأساس صفر فيتقاسمان
   الفراغ بالتساوي، فتستقرّ القائمة في منتصف الشريط تمامًا. */
.brand {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0
}

/* محجوز حوله 2X من جميع الجهات فلا يدخلها أي عنصر */
.brand__nd {
  height: var(--nd-h);
  width: auto;
  flex: none;
  margin: var(--nd-clear);
}

/* أعلى جهة اليسار: شعار الجامعة ومعه اسم الموقع — آخر عنصر في الشريط
   فيستقرّ في الطرف المقابل لشعار اليوم الوطني */
.nav__kfu {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.nav__kfu img {
  width: var(--logo-h);
  height: var(--logo-h);
  flex: none;
  display: block;
  transition: transform .3s var(--ease);
}

/* رابط إلى موقع الجامعة — أثرٌ خفيف يدلّ على أنه قابل للنقر */
.nav__kfu:hover img {
  transform: scale(1.06)
}

.nav__kfu:hover .nav__id b {
  color: var(--lime-hi)
}

.nav__id b {
  transition: color .25s var(--ease)
}

.nav__id {
  min-width: 0
}

.nav__id b {
  display: block;
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  white-space: nowrap
}

.nav__id span {
  display: block;
  font-size: .7rem;
  color: var(--w);
  line-height: 1.3;
  white-space: nowrap
}

/* التدرّج: النص يختفي أولًا، ثم يصغر الشعاران.
   دون 1280 لا يتّسع الشريط لشعارين + نص + قائمة كاملة، فالنص أول ما يسقط. */
@media (max-width:1279px) {
  .nav__id {
    display: none
  }
}

@media (max-width:1023px) {
  .nav__in {
    --logo-h: 36px;
    --nd-h: 36px
  }

  /* القائمة تصير لوحًا ثابتًا، فيبقى زر القائمة وشعار الجامعة في الطرف المقابل */
  .nav__kfu {
    flex: none
  }
}

@media (max-width:480px) {
  .nav__in {
    --logo-h: 30px;
    --nd-h: 30px;
    gap: 12px
  }
}

.nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
}

.nav__menu a {
  position: relative;
  padding: 10px 15px;
  font-size: .94rem;
  color: var(--w-55);
  transition: color .25s var(--ease);
}

.nav__menu a::after {
  content: "";
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 15px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width .3s var(--ease);
}

.nav__menu a:hover,
.nav__menu a.is-active {
  color: var(--w)
}

.nav__menu a:hover::after,
.nav__menu a.is-active::after {
  width: calc(100% - 30px)
}

.burger {
  display: none;
  margin-inline-start: auto;
  width: 36px;
  height: 36px;
  flex: none;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--w);
  font-size: 1.15rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width:1023px) {
  .burger {
    display: inline-flex
  }

  .nav__menu {
    position: fixed;
    inset-block-start: 82px;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2);
    border-block: 1px solid var(--line);
    padding: 10px var(--pad) 22px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }

  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none
  }

  .nav__menu a {
    padding: 14px 4px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line-2)
  }

  .nav__menu a::after {
    display: none
  }
}

/* ------------------------------------------------------------ البطل */
.hero {
  position: relative;
  /* min-height: 100svh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px 0 40px;
  overflow: hidden;
  background: var(--ink-1);
}

/* فسيفساء بكسلية ثابتة (بلا حركة ولا canvas): نقشة SVG واحدة تُفكّ مرّة
   ويكرّرها المتصفّح، فلا رسم في كل إطار ولا إعادة رسم عند التمرير.
   القناع يكثّف النقشة أعلى اليمين كما في نسيج الهوية. */
.hero__mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .62;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22136%22%20height%3D%22136%22%20viewBox%3D%220%200%20136%20136%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%232f8f6b%22%20opacity%3D%220.76%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%224%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%237fe22e%22%20opacity%3D%220.67%22%2F%3E%3Crect%20x%3D%2255%22%20y%3D%224%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%232f8f6b%22%20opacity%3D%220.60%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%224%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%237fe22e%22%20opacity%3D%220.45%22%2F%3E%3Crect%20x%3D%2289%22%20y%3D%224%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.71%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%2221%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%237fe22e%22%20opacity%3D%220.54%22%2F%3E%3Crect%20x%3D%2289%22%20y%3D%2221%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%2300a651%22%20opacity%3D%220.28%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2238%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%2300a651%22%20opacity%3D%220.57%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%2238%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%237fe22e%22%20opacity%3D%220.79%22%2F%3E%3Crect%20x%3D%2255%22%20y%3D%2238%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%2300a651%22%20opacity%3D%220.68%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%2238%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.40%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%2255%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%2300a651%22%20opacity%3D%220.64%22%2F%3E%3Crect%20x%3D%2289%22%20y%3D%2255%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.56%22%2F%3E%3Crect%20x%3D%22106%22%20y%3D%2255%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%2300a651%22%20opacity%3D%220.57%22%2F%3E%3Crect%20x%3D%22123%22%20y%3D%2255%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.52%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2272%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.25%22%2F%3E%3Crect%20x%3D%22106%22%20y%3D%2272%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.53%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2289%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.31%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%2289%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.56%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%2289%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.38%22%2F%3E%3Crect%20x%3D%2289%22%20y%3D%2289%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%237fe22e%22%20opacity%3D%220.61%22%2F%3E%3Crect%20x%3D%22123%22%20y%3D%2289%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%232f8f6b%22%20opacity%3D%220.44%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%22106%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%2300a651%22%20opacity%3D%220.26%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%22106%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%232f8f6b%22%20opacity%3D%220.67%22%2F%3E%3Crect%20x%3D%2255%22%20y%3D%22106%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.60%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%22106%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%2300a651%22%20opacity%3D%220.58%22%2F%3E%3Crect%20x%3D%22123%22%20y%3D%22106%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%235aba1c%22%20opacity%3D%220.46%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%22123%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%237fe22e%22%20opacity%3D%220.75%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%22123%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%232f8f6b%22%20opacity%3D%220.32%22%2F%3E%3Crect%20x%3D%2255%22%20y%3D%22123%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%237fe22e%22%20opacity%3D%220.79%22%2F%3E%3Crect%20x%3D%2289%22%20y%3D%22123%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%232f8f6b%22%20opacity%3D%220.74%22%2F%3E%3Crect%20x%3D%22106%22%20y%3D%22123%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%232f8f6b%22%20opacity%3D%220.63%22%2F%3E%3Crect%20x%3D%22123%22%20y%3D%22123%22%20width%3D%228%22%20height%3D%228%22%20fill%3D%22%237fe22e%22%20opacity%3D%220.60%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 136px 136px;
  -webkit-mask-image: radial-gradient(95% 80% at 20% 10%, #000 0%, rgba(0, 0, 0, .32) 46%, transparent 78%);
  mask-image: radial-gradient(95% 80% at 20% 10%, #000 0%, rgba(0, 0, 0, .32) 46%, transparent 78%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(85% 70% at 88% 42%, var(--ink-1) 0%, rgba(0, 38, 40, .72) 45%, transparent 78%),
    linear-gradient(180deg, rgba(0, 38, 40, .55) 0%, transparent 26%, transparent 62%, var(--ink-1) 100%);
}

@media (max-width:639px) {
  .hero__mosaic {
    background-size: 96px 96px
  }
}

/* البطل عمودان: المحتوى في جهة، والرسم (vector) في الجهة المقابلة.
   في التخطيط RTL يأتي المحتوى يمينًا والرسم يسارًا تلقائيًا بحكم ترتيب DOM. */
.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding-block: clamp(20px, 5vh, 60px);
}

.hero__content {
  min-width: 0
}

.hero__vector {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* هالة داكنة خلف الرسم تفصله عن نقشة الفسيفساء فيبقى نظيفًا */
.hero__vector::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -12%;
  pointer-events: none;
  background: radial-gradient(closest-side circle, rgba(0, 38, 40, .9) 0%, rgba(0, 38, 40, .55) 58%, transparent 78%);
}

@media (max-width:1023px) {

  /* دون هذا العرض يصير العمودان أضيق من أن يتنفّس فيهما الرسم — عمود واحد،
     الرسم أعلى المحتوى ومحاذًى مع بداية السطر */
  .hero__in {
    grid-template-columns: 1fr;
    gap: clamp(24px, 6vw, 40px)
  }

  .hero__vector {
    order: -1;
    justify-content: flex-start
  }

  .hero__vector::before {
    inset: -14% -8%
  }
}

.hero__edge {
  position: absolute;
  inset-block: 110px 0;
  inset-inline-end: clamp(10px, 3vw, 46px);
  width: 26px;
  z-index: 2;
  background: url("../assets/patterns/p4.svg") repeat-y center/contain;
  opacity: .42;
  pointer-events: none;
}

@media (max-width:1199px) {
  .hero__edge {
    display: none
  }
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 38, 40, .45);
  backdrop-filter: blur(8px);
  font-size: .85rem;
  color: var(--w-80);
  margin-bottom: clamp(20px, 3vw, 34px);
}

.hero__tag i {
  color: var(--lime)
}

.hero h1 {
  margin-bottom: .24em
}

.hero__title {
  font-size: clamp(1.95rem, 4.4vw, 3.4rem);
  letter-spacing: -.03em;
  line-height: 1.16;
  /* تدرّج من الأبيض إلى أخضر الهوية — padding-block يمنع قصّ الحروف النازلة */
  /* 264deg يبدأ من اليمين حيث يبدأ النصّ في RTL: أبيض ← ليموني ← أخضر */
  /* background: linear-gradient(264deg, #fff 6%, var(--lime-hi) 54%, var(--green-hi) 98%); */
  background: linear-gradient(195deg, #fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block: .05em;
}

/* السطر الثاني من العنوان: «اليوم الوطني السعودي 96 في جامعة الملك فيصل».
   لو جاء بحجم السطر الأول لالتفّ على سطرين وثقُل البطل كلّه، فيُصغَّر
   قليلًا ليبقى جزءًا من العنوان لا عنوانًا ثانيًا. */
.hero__title2 {
  display: block;
  font-size: .68em;
  line-height: 1.3;
}

/* الشعار داخل جهة الرسم — بديل مؤقّت لريشة/رسم متجهي لاحقًا */
.hero__emblem {
  display: block;
  width: min(88%, 460px);
  height: auto
}

/* في العمود الواحد الرسم محاذًى لبداية السطر، فلا حاجة لهامش داخلي */
@media (max-width:1023px) {
  .hero__emblem {
    width: min(100%, 460px)
  }
}

.hero__lead {
  margin: clamp(18px, 3vw, 30px) 0 clamp(34px, 5vw, 54px);
}

.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center
}

/* شريط القيم المتحرك */
.ticker {
  position: relative;
  z-index: 2;
  margin-top: auto;
  border-block: 1px solid var(--line);
  padding: 15px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: slide 34s linear infinite;
  will-change: transform
}

.ticker:hover .ticker__track {
  animation-play-state: paused
}

.ticker__set {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-inline-end: 34px
}

.ticker__set span {
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 600;
  color: var(--w-55);
  white-space: nowrap;
  transition: color .3s;
}

.ticker__set span:hover {
  color: var(--w)
}

.ticker__set i {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  flex: none;
  display: block
}

@keyframes slide {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(50%)
  }
}



/* ------------------------------------------------------------ الأقسام */
.sec {
  position: relative;
  padding: clamp(72px, 10vw, 140px) 0
}

/* الأقسام تتناوب بين الخلفيتين فقط: الافتراضي bg-dark، و--tint هو green */
.sec--tint {
  background: var(--bg-green)
}

.sec__head {
  display: flex;
  gap: clamp(20px, 4vw, 60px);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: clamp(34px, 5vw, 62px)
}

.sec__head>div:first-child {
  flex: 1 1 380px
}

.sec__head p {
  margin: 14px 0 0
}

/* ------------------------------------------------ شبكة المسابقات (بنتو) */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 18px)
}

.tile {
  --accent: var(--lime);
  position: relative;
  grid-column: span 2;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}

.tile--xl {
  grid-column: span 4;
  min-height: 400px
}

.tile--lg {
  grid-column: span 3
}

@media (max-width:1023px) {
  .bento {
    grid-template-columns: repeat(4, 1fr)
  }

  .tile,
  .tile--lg {
    grid-column: span 2
  }

  .tile--xl {
    grid-column: span 4
  }
}

@media (max-width:639px) {
  .bento {
    grid-template-columns: 1fr
  }

  .tile,
  .tile--lg,
  .tile--xl {
    grid-column: span 1;
    min-height: 300px
  }
}

/* غسلة اللون التي تتمدد عند المرور */
.tile__wash {
  position: absolute;
  inset-block-end: -40%;
  inset-inline-end: -25%;
  z-index: -1;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  opacity: .20;
  filter: blur(10px);
  transition: transform .7s var(--ease), opacity .1s var(--ease);
}

.tile:hover {
  /* transform: translateY(-7px); */
  /* border-color: color-mix(in srgb, var(--accent) 55%, transparent); */
  /* box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--accent) 60%, transparent) */
}

.tile:hover .tile__wash {
  transform: scale(1.9) translate(-6%, -10%);
  opacity: .30
}

/* الفسيفساء الزخرفية داخل البطاقة */
.tile__mesh {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: -1;
  width: 190px;
  height: 190px;
  opacity: .30;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}

.tile:hover .tile__mesh {
  opacity: .62;
  transform: translate(-8px, 8px) rotate(6deg)
}

/* صورة المسابقة ملاصقةً لعنوانها */
.tile__titlerow {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: .45em;
}

.tile__titlerow h3 {
  margin: 0;
  min-width: 0;
}

.tile__img {
  flex: none;
  width: clamp(56px, 5.4vw, 74px);
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  transition: transform .5s var(--ease);
}

.tile:hover .tile__img {
  transform: scale(1.06) rotate(-2deg);
}

.tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px
}

.tile__trait {
  /* writing-mode: vertical-rl;
  transform: rotate(180deg); */
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--accent);
  white-space: nowrap;
}

.tile__body {
  margin-top: auto;
  padding-top: 24px
}

.tile h3 {
  margin-bottom: .45em
}

.tile p {
  color: var(--w-80);
  font-size: .95rem;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.tile--xl p {
  -webkit-line-clamp: 4;
  font-size: 1.02rem
}

.tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap
}

.tile__meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap
}

.pill {
  font-size: .76rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  color: var(--w-80);
  white-space: nowrap;
}

.pill--hot {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--w);
}

.tile__go {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: var(--w);
  font-size: 1.05rem;
  transition: background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease);
}

.tile:hover .tile__go {
  background: var(--accent);
  color: var(--bg-dark);
  border-color: var(--accent);
  transform: rotate(45deg)
}

.tile__link {
  position: absolute;
  inset: 0;
  z-index: 5
}

/* ------------------------------------------------------------ الأرقام */
.figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

/* على الأجهزة الوسطى: 2×2 بدل 3+1 المتروك في السطر الثاني */
@media (min-width:560px) and (max-width:1023px) {
  .figs {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* بطاقة رقم — على لغة بطاقات المسابقات نفسها: لون خاص، فسيفساء، غسلة، رفع عند المرور */
.fig {
  --accent: var(--lime);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}

.fig__wash {
  position: absolute;
  inset-block-end: -45%;
  inset-inline-end: -30%;
  z-index: -1;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  opacity: .26;
  filter: blur(10px);
  transition: transform .7s var(--ease), opacity .5s var(--ease);
}

.fig__mesh {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: -1;
  width: 112px;
  height: 112px;
  opacity: .17;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}

.fig:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--accent) 60%, transparent);
}

.fig:hover .fig__wash {
  transform: scale(1.8) translate(-6%, -10%);
  opacity: .42
}

.fig:hover .fig__mesh {
  opacity: .38;
  transform: translate(-8px, 8px) rotate(-6deg)
}

.fig__i {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1.1rem;
  /* الرمز يُخلط بالأبيض ليبقى مقروءًا فوق الخلفية الداكنة مهما كان لون المسابقة */
  color: color-mix(in srgb, var(--accent) 45%, #fff);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}

.fig b {
  display: block;
  margin-top: auto;
  padding-top: 22px;
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}

.fig span {
  display: block;
  margin-top: 9px;
  font-size: .9rem;
  color: var(--w-55);
  line-height: 1.5;
}

/* ------------------------------------------------------ الجدول الزمني */
/* عمودان: جهة للمحتوى وجهة لمحطّات الجدول الزمني */
.rail {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: start;
}

@media (max-width:1023px) {
  .rail {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 38px)
  }
}

/* جهة المحتوى تلتصق بينما تمرّ المحطّات إلى جانبها */
.rail__aside {
  position: sticky;
  inset-block-start: var(--rail-stick, 118px);
}

/* صفحات المسابقات فيها شريط تنقّل داخلي لاصق أسفل الترويسة (ينتهي عند 145px)،
   فتنزل نقطة الالتصاق تحته حتى لا يختفي العمود الجانبي خلفه */
.subnav~.sec .rail__aside {
  --rail-stick: 165px;
}

@media (max-width:1023px) {
  .rail__aside {
    position: static
  }
}

.rail__aside .lead {
  margin: 14px 0 0
}

.rail__note {
  margin: 22px 0 0;
  font-size: .87rem;
  color: var(--w-55);
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.rail__note i {
  color: var(--accent);
  flex: none;
  margin-top: .25em
}

.rail__items {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* صفحات المسابقات: الجدول الزمني في جهة وآلية التسليم في الجهة المقابلة */
.dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

@media (max-width:1023px) {
  .dates {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 42px)
  }
}

/* الجدول الزمني مكدّس داخل عموده: العنوان، ثم المحطّات، ثم الملاحظة */
.rail--stack {
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 26px);
}

.rail--stack .rail__aside {
  position: static
}

/* كل محطّة صفّ كامل العرض: علامة على حافة البداية، الرقم فوق،
   ثم العنوان في البداية والتاريخ في النهاية — فيمتلئ العمود كجدول مواعيد */
.step {
  position: relative;
  padding-inline-start: 44px;
  padding-block: 0 clamp(20px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "num num num" "title leader date";
  column-gap: 14px;
  align-items: baseline;
}

/* خطّ منقّط يربط العنوان بتاريخه عبر عرض العمود، كجدول مواعيد */
.step::after {
  content: "";
  grid-area: leader;
  height: 1px;
  align-self: center;
  background: repeating-linear-gradient(90deg, var(--w-35) 0 2px, transparent 2px 7px);
  opacity: .5;
}

.step:last-child {
  padding-block-end: 0
}

/* الخط الواصل بين العلامات — لا يُرسم بعد آخر محطّة */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  inset-block: 20px 0;
  width: 2px;
  background: linear-gradient(180deg, var(--line), var(--line-2));
}

.step__d {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 5px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: var(--ink-1);
  border: 2px solid var(--w-35);
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.step__n {
  grid-area: num;
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: 7px;
  font-variant-numeric: tabular-nums;
}

.step h4 {
  grid-area: title;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.step__date {
  grid-area: date;
  font-size: .88rem;
  color: var(--w-55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* على الشاشات الضيّقة ينزل التاريخ تحت العنوان بدل أن يزاحمه */
@media (max-width:559px) {
  .step {
    grid-template-columns: 1fr;
    grid-template-areas: "num" "title" "date";
    row-gap: 6px;
  }

  /* لا مجال للخطّ المنقّط حين ينزل التاريخ سطرًا مستقلًا */
  .step::after {
    display: none
  }
}

.step:hover .step__d {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 45%, var(--ink-1));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* محطّة لم يُحدَّد موعدها بعد */
.step--tbd .step__n {
  color: var(--w-35)
}

.step--tbd .step__date {
  color: var(--w-35)
}

.step--tbd .step__d {
  border-style: dashed
}

/* محطّة منتهية */
.step.is-done .step__d {
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 0 5px rgba(90, 186, 28, .15);
}

.step.is-done .step__n {
  color: var(--lime)
}

/* ------------------------------------------------------------ الجداول */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 560px
}

.tbl th,
.tbl td {
  padding: 16px 20px;
  text-align: start;
  border-bottom: 1px solid var(--line-2)
}

.tbl thead th {
  background: rgba(255, 255, 255, .05);
  font-weight: 600;
  font-size: .82rem;
  color: var(--w-80);
  letter-spacing: .06em;
  white-space: nowrap;
}

/* رؤوس المراكز: معيّن ملوّن بلون المركز (ذهبي/فضّي/برونزي) */
.tbl__rank {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tbl__rank::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  transform: rotate(45deg);
  background: var(--rank, var(--w-35));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rank, var(--w-35)) 18%, transparent);
}

/* نقطة بلون هوية كل مسابقة أمام اسمها */
.tbl__c {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tbl__c::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  transform: rotate(45deg);
  background: var(--c, var(--accent));
}

.tbl tbody tr {
  transition: background .25s
}

.tbl tbody tr:hover {
  background: rgba(255, 255, 255, .04)
}

.tbl tbody tr:last-child td {
  border-bottom: 0
}

/* عمود المركز الأول هو الأبرز، وعمود المجموع يحمل لون التمييز */
.tbl tbody td:nth-child(2) {
  color: var(--w);
  font-weight: 600;
  background: rgba(255, 255, 255, .022);
}

.tbl thead th:nth-child(2) {
  background: rgba(255, 255, 255, .075)
}

.tbl tbody td:last-child {
  color: var(--w);
  font-weight: 700;
}

.tbl tfoot td {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-weight: 700;
  font-size: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-bottom: 0;
}

.tbl tfoot td:last-child {
  color: color-mix(in srgb, var(--accent) 82%, #fff)
}

/* أشرطة معايير التحكيم */
.crit {
  display: grid;
  gap: 18px
}

.crit__row {
  display: grid;
  gap: 8px
}

.crit__top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline
}

.crit__top b {
  font-size: .96rem;
  font-weight: 500
}

.crit__top span {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent)
}

.crit__bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden
}

.crit__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff));
  transition: width 1.2s var(--ease);
}

/* ------------------------------------------------------------ الجوائز */
.podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  align-items: end;
}

.pod {
  --rank: var(--accent);
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  padding: clamp(26px, 3vw, 34px) 22px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}

/* هالة بلون المركز تتسع من أعلى البطاقة */
.pod__wash {
  position: absolute;
  inset-block-start: -45%;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: -1;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rank), transparent 62%);
  opacity: .15;
  filter: blur(14px);
  transition: opacity .5s var(--ease);
}

/* ميدالية معيّنة بلون المركز: ذهبي / فضّي / برونزي */
.pod__medal {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto clamp(14px, 1.6vw, 18px);
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--rank), color-mix(in srgb, var(--rank) 45%, #000));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--rank) 13%, transparent);
}

/* المركز الأول أعلى وأبرز — منصّة تتويج فعلية */
.pod--1 {
  padding-block: clamp(34px, 4.2vw, 52px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rank) 20%, transparent), rgba(255, 255, 255, .02));
  border-color: color-mix(in srgb, var(--rank) 45%, transparent);
}

.pod--1 .pod__medal {
  width: 30px;
  height: 30px
}

.pod:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--rank) 60%, transparent);
  box-shadow: 0 24px 55px -30px color-mix(in srgb, var(--rank) 60%, transparent);
}

.pod:hover .pod__wash {
  opacity: .28
}

.pod__rank {
  font-size: .84rem;
  color: var(--w-80);
  margin-bottom: 9px;
  letter-spacing: .05em;
}

.pod__val {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.pod__cur {
  font-size: .82rem;
  color: var(--w-55);
  margin-top: 7px;
}

/* شريط مجموع الجوائز — سطر واحد بعرض القسم بدل بطاقة رابعة مبتورة */
.pod-sum {
  margin-top: clamp(14px, 1.8vw, 20px);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: clamp(18px, 2vw, 24px) 26px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

.pod-sum span {
  font-size: .92rem;
  color: var(--w-80)
}

.pod-sum b {
  font-family: var(--font-head);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: color-mix(in srgb, var(--accent) 78%, #fff);
}

/* ------------------------------------------------------------ الألواح */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(24px, 2.6vw, 34px);
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
}

.panel+.panel {
  margin-top: 18px
}

/* لوح بلا إطار ولا خلفية — للاستخدام جنبًا إلى جنب مع محتوى آخر */
.panel--plain {
  border: 0;
  background: none;
  padding: 0;
}

/* عمود يحمل أكثر من لوح: يتكدّس رأسيًا بفراغ منتظم دون أن يطفح عن القسم */
.pstack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0
}

.pstack>.panel+.panel {
  margin-top: 0
}

.panel__h {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 18px
}

.panel__h i {
  color: var(--accent);
  font-size: 1.2rem
}

.list li {
  position: relative;
  padding-inline-start: 30px;
  margin-bottom: .75em;
  color: var(--w-80);
  font-size: .96rem
}

.list li:last-child {
  margin-bottom: 0
}

.list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: .68em;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--accent);
}

.list--ban li::before {
  background: #e2597f
}

.list--num {
  counter-reset: n
}

.list--num li {
  counter-increment: n;
  padding-inline-start: 38px
}

.list--num li::before {
  content: counter(n, decimal-leading-zero);
  width: auto;
  height: auto;
  transform: none;
  background: none;
  inset-block-start: 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px
}

.fact {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 15px 17px;
  background: rgba(255, 255, 255, .035)
}

.fact span {
  display: block;
  font-size: .76rem;
  color: var(--w-55);
  margin-bottom: 4px;
  letter-spacing: .04em
}

.fact b {
  font-size: .98rem;
  font-weight: 600
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

/* قسم الأهداف: لوح واحد يجمع الأهداف والمجالات والموضوعات،
   تفصل أجزاءه خطوط رفيعة بدل أن يكون ألواحًا متفرّقة */
.goals {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  overflow: hidden;
}

.goals__part {
  padding: clamp(24px, 2.8vw, 36px);
}

.goals__part+.goals__part {
  border-top: 1px solid var(--line);
}

.goals__h {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: clamp(16px, 1.8vw, 22px);
}

.goals__h i {
  color: var(--accent);
  font-size: 1.2rem;
}

/* الأهداف في عمودين على الشاشات الواسعة — قائمة واحدة لا بطاقات */
.goals__list {
  columns: 2;
  column-gap: clamp(26px, 3.4vw, 54px);
}

.goals__list li {
  break-inside: avoid;
}

@media (max-width:767px) {
  .goals__list {
    columns: 1
  }
}

/* المجالات: أعمدة بلا إطارات، يفصلها خط رفيع على الشاشات الواسعة */
.goals__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.goals__field {
  position: relative;
  min-width: 0;
}

.goals__field-n {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}

.goals__field h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: .5em;
}

.goals__field p {
  font-size: .92rem;
  color: var(--w-80);
  margin: 0;
  line-height: 1.75;
}

/* ------- بطل بصورة نازفة من الحافة ------- */
.hero--photo {
  /* الصورة تشغل النصف المقابل، فالمحتوى يبقى في نصفه */
  --hero-media: 52%;
}

.hero--photo .hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hero__media {
  position: absolute;
  inset-block: 0;
  /* في RTL يعني الحافة اليسرى — والمحتوى يمينًا */
  inset-inline-end: 0;
  width: var(--hero-media);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* يذوب الطرف المواجه للنصّ في خلفية القسم بدل حدٍّ قاطع،
     ويخفت أعلى وأسفل ليندمج مع الشريط والقسم التالي */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, .35) 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, .35) 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* أرقام سريعة تحت الأزرار */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
}

.hero__facts dt {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: color-mix(in srgb, var(--accent) 42%, #fff);
}

.hero__facts dd {
  margin: 6px 0 0;
  font-size: .84rem;
  color: var(--w-55);
}

@media (max-width:1023px) {

  /* عمود واحد: الصورة تغطّي البطل كلّه خلف النصّ بحجاب داكن */
  .hero--photo .hero__in {
    grid-template-columns: 1fr
  }

  .hero__media {
    width: 100%;
    opacity: .34;
  }

  .hero__media img {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent);
  }

  /* حجاب داخل حاوية الصورة — فيعلوها ويضمن قراءة النصّ فوقها */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 38, 40, .55), rgba(0, 38, 40, .8));
  }
}

/* ------- الحدث الرئيسي: حفل الجامعة الرسمي ------- */
.headline {
  position: relative;
  overflow: hidden;
}

.hl {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background:
    radial-gradient(120% 140% at 88% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
}

@media (max-width:899px) {
  .hl {
    grid-template-columns: 1fr;
    gap: clamp(22px, 4vw, 30px);
  }
}

.hl__body {
  min-width: 0
}

.hl__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  margin-bottom: 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--bg-dark);
  background: var(--accent);
}

.hl__t {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 6px 0 0;
}

.hl__sub {
  margin: .4em 0 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 500;
  color: color-mix(in srgb, var(--accent) 40%, #fff);
}

.hl__desc {
  margin: .7em 0 0;
  font-size: .97rem;
  color: var(--w-80);
  line-height: 1.85;
}

.hl__meta {
  display: grid;
  gap: 10px;
  margin: clamp(18px, 2.2vw, 24px) 0 clamp(20px, 2.4vw, 26px);
  padding-block: clamp(16px, 1.8vw, 20px);
  border-block: 1px solid var(--line);
}

.hl__meta li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .95rem;
  color: var(--w-80);
}

.hl__meta i {
  color: var(--accent);
  font-size: 1.05rem;
  flex: none;
}

.hl__art {
  position: relative;
  isolation: isolate;
}

.hl__glow {
  position: absolute;
  inset: -10% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 66%);
  opacity: .2;
  filter: blur(26px);
}

.hl__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ============================================ صفحة اليوم الوطني (الجذر) */

/* ------- الكلمة السامية: شريط جسر بين البطل وكلمة الرئيس -------
   ليس قسمًا متناوبًا (بلا .sec)، فخلفيته تنتقل من bg-dark إلى bg-green
   لتلتحم بما قبلها وما بعدها بلا حدٍّ قاطع. */
.royal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(66px, 8vw, 122px) 0;
  background: linear-gradient(180deg, var(--bg-dark) 0%, #002c30 52%, var(--bg-green) 100%);
  /* ذهب «عزّنا بالرؤية» مرفوعًا ليُقرأ على الخلفية الداكنة */
  --accent: color-mix(in srgb, var(--c-vision) 52%, #fff);
}

/* خيط ذهبي يفتح الشريط ويغلقه، فيُعلن أنه مقامٌ خاصّ لا امتداد للبطل */
.royal::before,
.royal::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--c-vision) 85%, transparent) 30%,
      color-mix(in srgb, var(--c-vision) 85%, transparent) 70%,
      transparent);
}

.royal::before {
  inset-block-start: 0
}

.royal::after {
  inset-block-end: 0;
  opacity: .5
}

/* فسيفساء بكسلية ذهبية تملأ ركن النصّ — من لغة الهوية نفسها */
.royal__mesh svg {
  width: 100%;
  height: 100%;
}

.royal__mesh {
  position: absolute;
  inset-block-start: clamp(18px, 3vw, 40px);
  inset-inline-start: clamp(18px, 4vw, 70px);
  z-index: 0;
  width: clamp(120px, 14vw, 200px);
  height: clamp(120px, 14vw, 200px);
  opacity: .22;
  pointer-events: none;
}

.royal__in {
  position: relative;
  z-index: 2;
  display: grid;
  /* النصّ في جهة القراءة (يمينًا)، واللوح في الجهة المقابلة — عكس ترتيب
     كلمة الرئيس تمامًا حتى لا يبدو القسمان صورتين من قالبٍ واحد */
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

@media (max-width:899px) {
  .royal__in {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }

  /* على الجوّال: الصورة أولًا كما في كلمة الرئيس */
  .royal__fig {
    order: -1
  }
}

.royal__body {
  min-width: 0
}

.royal__h {
  margin-bottom: clamp(20px, 2.6vw, 32px)
}

/* النصّ شِعريّ لا نثريّ: شطرٌ لكل سطر، بالخط السعودي، بحجمٍ أكبر من نصّ
   الكلمة الرسمية، ومسند إلى خطٍّ ذهبي يقوم مقام علامة الاقتباس. */
.royal__quote {
  margin: 0;
  padding-inline-start: clamp(16px, 2vw, 26px);
  border-inline-start: 2px solid color-mix(in srgb, var(--c-vision) 60%, transparent);
}

.royal__quote p {
  margin: 0 0 .32em;
  font-family: var(--font-head);
  font-size: clamp(1.08rem, 1.9vw, 1.6rem);
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: -.01em;
  color: var(--w);
  text-wrap: balance;
}

.royal__quote p:last-child {
  margin-bottom: 0
}

/* الفواصل «..» بلون الذهب: تفصل الشطر عن قرينه بلا علامة ترقيم ثقيلة */
.royal__dots {
  color: var(--accent);
  letter-spacing: .12em;
  padding-inline: .12em;
}

/* «عزّنا بطبعنا» يختم النصّ: شعار المناسبة بارزًا بالذهب */
.royal__slogan {
  display: inline-block;
  margin-top: .5em;
  font-size: 1.14em;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--accent);
}

/* ------- إطار الصورة -------
   صورة سموّه قصاصة بخلفية شفّافة، فهي تقف على خلفية الشريط مباشرة بلا لوح
   خلفها. يبقى الإطار الذهبي وحده يؤطّرها فتقرأ بورتريهًا رسميًّا مؤطَّرًا. */
.royal__fig {
  position: relative;
  margin: 0;
  isolation: isolate;
  justify-self: center;
  width: 100%;
  max-width: 360px;
}

.royal__glow {
  position: absolute;
  inset: -10% 0 -4%;
  z-index: -1;
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 38%, var(--c-vision), transparent 68%);
  opacity: .42;
  filter: blur(22px);
}

.royal__plate {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--c-vision) 55%, transparent);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .75);
}

/* الصورة 600×750 = 4:5، والإطار بالنسبة نفسها، فلا قصّ ولا تشويه.
   و multiply يمرّر وهج الذهب الذي خلفها إلى حوافّ القصاصة، فلا تبدو
   ملصقةً على الخلفية. */
.royal__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 0%;
  mix-blend-mode: multiply;
}

/* شريط ذهبي رفيع أسفل اللوح يربطه بلغة الهوية */
.royal__plate::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 6px;
  background: linear-gradient(90deg,
      var(--c-vision),
      color-mix(in srgb, var(--c-vision) 45%, #fff) 50%,
      var(--c-vision));
}

.royal__cap {
  margin-top: clamp(16px, 1.8vw, 20px);
  padding-inline-start: 14px;
  border-inline-start: 2px solid color-mix(in srgb, var(--c-vision) 65%, transparent);
}

.royal__role {
  display: block;
  font-size: .82rem;
  color: var(--w-55);
  letter-spacing: .04em;
}

.royal__name {
  display: block;
  margin-top: 5px;
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--accent);
}

/* ------- كلمة رئيس الجامعة: صورة سعادته ثم نصّ الكلمة ------- */
.pword {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: start;
}

@media (max-width:899px) {
  .pword {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 34px);
  }
}

/* بطاقة الصورة */
.pres {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.pres__glow {
  position: absolute;
  /* صفر أفقيًا: الإزاحة السالبة أفقيًا كانت تُحدث تمريرًا على الجوّال */
  inset: -12% 0 -6%;
  z-index: -1;
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 35%, var(--accent), transparent 68%);
  opacity: .2;
  filter: blur(18px);
}

/* الصورة أصلها 335px، فلا تُكبَّر أكثر لتبقى حادّة */
.pres__img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}

.pres__cap {
  margin-top: clamp(16px, 1.8vw, 20px);
  padding-inline-start: 14px;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.pres__role {
  display: block;
  font-size: .82rem;
  color: var(--w-55);
  letter-spacing: .04em;
}

.pres__name {
  display: block;
  margin-top: 5px;
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.5;
  color: color-mix(in srgb, var(--accent) 38%, #fff);
}

/* نصّ الكلمة: علامة اقتباس كبيرة تفتح النصّ */
.word {
  position: relative;
  min-width: 0;
}

.word__h {
  margin-bottom: clamp(18px, 2.2vw, 26px)
}

.word__body {
  position: relative;
  /* padding-top: clamp(30px, 3.4vw, 42px); */
}

/* .word__body::before {
  content: "\00AB";
  position: absolute;
  inset-block-start: -.18em;
  inset-inline-start: 0;
  font-family: var(--font-head);
  font-size: clamp(3rem, 5.2vw, 4.4rem);
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 34%, transparent);
  pointer-events: none;
} */

.word p {
  font-size: 1rem;
  color: var(--w-80);
  line-height: 1.95;
}

.word p:last-child {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--accent) 38%, #fff);
  font-family: var(--font-head);
  font-weight: 600;
}

/* ------- خارطة الفعاليات: مجموعات بالتواريخ ------- */
/* ------- خارطة الفعاليات: جدول مواعيد بصفّ لكل موعد -------
   كانت الخارطة سبع بطاقات في شبكة auto-fit، وأعداد فعالياتها متباينة
   (من 1 إلى 9)، فكان ارتفاع كل سطر شبكي = أطول بطاقة فيه، فتنشأ فراغات
   رأسية كبيرة. الآن صفّ واحد لكل موعد يأخذ ارتفاع محتواه، فلا فراغ. */
.ndmap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
}

.ndmap__row {
  display: grid;
  grid-template-columns: minmax(0, 208px) minmax(0, 1fr);
}

.ndmap__row+.ndmap__row {
  border-top: 1px solid var(--line)
}

/* خليّة الموعد */
.ndmap__when {
  padding: clamp(15px, 1.8vw, 20px) clamp(16px, 1.8vw, 20px);
  border-inline-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.ndmap__when b {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

.ndmap__note {
  display: block;
  margin-top: 5px;
  font-size: .82rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--accent) 38%, #fff);
}

.ndmap__count {
  display: block;
  margin-top: 9px;
  font-size: .76rem;
  color: var(--w-35);
  font-variant-numeric: tabular-nums;
}

/* فعاليات الموعد: تتوزّع على أعمدة بحسب المتاح */
.ndmap__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  align-content: start;
  gap: 2px;
  padding: 8px;
}

.ndmap__list a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--w-80);
  transition: color .25s var(--ease), background .25s var(--ease);
}

.ndmap__list a:hover {
  color: var(--w);
  background: rgba(255, 255, 255, .055);
}

/* رقم الفعالية بلون قيمتها */
.ndmap__n {
  flex: none;
  min-width: 30px;
  padding: 3px 0;
  text-align: center;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c) 30%, #fff);
  background: color-mix(in srgb, var(--c) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 48%, transparent);
}

@media (max-width:767px) {

  /* الموعد سطرٌ فوق فعالياته */
  .ndmap__row {
    grid-template-columns: 1fr
  }

  .ndmap__when {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
  }

  .ndmap__note,
  .ndmap__count {
    margin-top: 0
  }
}

/* ------- شريط القيم الستّ ------- */
.ndvals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: clamp(22px, 2.6vw, 30px);
  padding-bottom: clamp(18px, 2.2vw, 24px);
  border-bottom: 1px solid var(--line);
}

.ndval {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  color: var(--w-80);
}

.ndval i {
  width: 10px;
  height: 10px;
  flex: none;
  transform: rotate(45deg);
  background: var(--c);
}

/* ------- الفعاليات مجموعةً بالموعد (details/summary، بلا جافاسكربت) ------- */
.evgroups {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
}

.evgroup+.evgroup {
  border-top: 1px solid var(--line)
}

.evgroup__s {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: clamp(15px, 1.8vw, 20px) clamp(16px, 1.9vw, 22px);
  cursor: pointer;
  list-style: none;
  transition: background .25s var(--ease);
}

/* نُخفي مثلّث المتصفّح الافتراضي ونضع سهمًا خاصًّا */
.evgroup__s::-webkit-details-marker {
  display: none
}

.evgroup__s::marker {
  content: ""
}

.evgroup__s:hover {
  background: rgba(255, 255, 255, .03)
}

.evgroup[open] .evgroup__s {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-bottom: 1px solid var(--line);
}

.evgroup__d {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
}

.evgroup__note {
  font-size: .84rem;
  color: color-mix(in srgb, var(--accent) 40%, #fff);
}

.evgroup__c {
  font-size: .78rem;
  color: var(--w-55);
  font-variant-numeric: tabular-nums;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}

.evgroup__x {
  margin-inline-start: auto;
  color: var(--w-55);
  font-size: .9rem;
  transition: transform .3s var(--ease), color .25s var(--ease);
}

.evgroup[open] .evgroup__x {
  transform: rotate(180deg);
  color: color-mix(in srgb, var(--accent) 45%, #fff);
}

/* ------- بطاقات الفعاليات: مُقتصدة الارتفاع، ثلاثة أعمدة على الشاشات الواسعة ------- */
.evts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
  align-content: start;
  padding: clamp(12px, 1.4vw, 16px);
}

.evt {
  --accent: var(--green);
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.9vw, 22px);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014));
  scroll-margin-top: 110px;
  transition: transform .4s var(--ease), border-color .35s, box-shadow .4s var(--ease);
}

.evt:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow: 0 20px 46px -30px color-mix(in srgb, var(--accent) 58%, transparent);
}

.evt[hidden] {
  display: none
}

.evt__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.evt__n {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 46%, #fff);
}

/* القيمة: نقطة بلونها ثم اسمها */
.evt__value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--w-55);
}

.evt__value::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  transform: rotate(45deg);
  background: var(--accent);
}

.evt__t {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 .3em;
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.45;
}

.evt__t i {
  color: var(--accent);
  font-size: .92em;
  flex: none;
}

.evt__sub {
  margin: 0 0 .35em;
  font-size: .86rem;
  color: color-mix(in srgb, var(--accent) 32%, #fff);
}

.evt__desc {
  margin: 0 0 14px;
  font-size: .89rem;
  color: var(--w-55);
  line-height: 1.65;
  /* سطران كحدّ أقصى فلا تتفاوت أطوال البطاقات */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* الموعد والوقت والمكان في سطر متّصل يلتفّ عند الحاجة، بدل ثلاثة
   أسطر شبكية — كانت وحدها 106px من ارتفاع كل بطاقة */
.evt__meta {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  font-size: .81rem;
  color: var(--w-55);
  line-height: 1.5;
}

.evt__meta>span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.evt__meta .evt__where {
  flex-basis: 100%;
}

.evt__meta .evt__where b {
  font-weight: 400;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evt__meta i {
  color: color-mix(in srgb, var(--accent) 42%, #fff);
  margin-inline-end: 4px;
}

.evt__cta {
  margin-top: 12px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 42%, #fff);
  transition: gap .25s var(--ease);
}

.evt__cta:hover {
  gap: 12px
}

/* ------- التواصل: قائمة مرتّبة إلى جانب رسم الهوية، لا بطاقات ------- */
.cwrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

@media (max-width:899px) {
  .cwrap {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
  }
}

.cinfo {
  min-width: 0
}

.clist {
  margin: clamp(22px, 2.6vw, 32px) 0 clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
}

/* كل سطر: أيقونة، ثم التسمية فوق القيمة — بلا إطارات.
   عمود تسمية بعرض ثابت كان يترك فراغًا قبل القيمة، فالتكديس أنظف
   ويناسب القيم الطويلة كعنوان المبنى. */
.crow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 3px 14px;
  padding: clamp(13px, 1.5vw, 17px) 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.crow__i {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 1rem;
  color: color-mix(in srgb, var(--accent) 45%, #fff);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.crow__lb {
  grid-column: 2;
  font-size: .78rem;
  color: var(--w-55);
  letter-spacing: .04em;
}

.crow__v {
  grid-column: 2;
  font-size: .95rem;
  color: var(--w-80);
  line-height: 1.6;
  word-break: break-word;
}

.crow__v a:hover {
  color: var(--lime)
}

/* رسم الهوية بجانب القائمة */
.cart {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.cart__glow {
  position: absolute;
  inset: -8% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 66%);
  opacity: .16;
  filter: blur(24px);
}

.cart img {
  width: min(100%, 460px);
  height: auto;
  display: block;
}

/* ------------------------------------------------------ صفحة المسابقة */
.phero {
  position: relative;
  /* ترويسة مختصرة: الحدّ الأدنى يكفي لتجاوز الشريط الثابت (82px) وحسب */
  padding: clamp(108px, 10vw, 132px) 0 clamp(30px, 4vw, 46px);
  overflow: hidden;
  background: var(--ink-1);
}

.phero__glow {
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent), transparent 66%);
  opacity: .24;
  filter: blur(30px);
  pointer-events: none;
}

.phero__in {
  position: relative;
  z-index: 2
}

.crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem;
  color: var(--w-55);
  margin-bottom: clamp(18px, 2.2vw, 28px);
  flex-wrap: wrap
}

.crumb a:hover {
  color: var(--w)
}

/* عمودان: العنوان ووصفه يمينًا، والشعار والبيانات السريعة يسارًا */
.phero__row {
  display: flex;
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  flex-wrap: wrap;
}

/* صورة المسابقة بجانب عنوانها في ترويسة الصفحة */
.phero__img {
  flex: none;
  width: clamp(64px, 7vw, 88px);
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}

.phero__head {
  min-width: 0
}

.phero__main {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);

  flex: 1 1 380px;
  min-width: 0;
}

.phero h1 {
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  letter-spacing: -.03em;
  margin: 0;
}

/* سطر التصنيف تحت العنوان: الأيقونة في مربّع بلون التمييز، والوصف بجانبه.
   الفراغ من gap لا من مسافة نصّية، فلا يتغيّر بمقاس الخط أو الأيقونة. */
.phero__sub {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: clamp(13px, 1.5vw, 18px) 0 0;
  font-size: .98rem;
  color: var(--w-80);
  line-height: 1.6;
}

.phero__sub i {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 1rem;
  color: color-mix(in srgb, var(--accent) 42%, #fff);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
}

.phero__sub span {
  min-width: 0
}

/* الجهة اليسرى: يفصلها خطّ بلون التمييز فتبدو كتلة مقصودة لا فراغًا */
.phero__side {
  flex: 0 1 460px;
  min-width: 0;
  padding-inline-start: clamp(18px, 2.2vw, 28px);
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.phero__slug {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.45;
  color: color-mix(in srgb, var(--accent) 38%, #fff);
  margin: 0 0 clamp(14px, 1.8vw, 20px);
}

.phero__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

.phero__org {
  margin: clamp(13px, 1.6vw, 18px) 0 0;
  font-size: .81rem;
  color: var(--w-35);
  line-height: 1.65;
  /* يوازن طول السطرين فلا تنفرد كلمة واحدة في سطر */
  text-wrap: balance;
}

@media (max-width:767px) {

  /* عمود واحد: الخطّ الفاصل يصير علويًا */
  .phero__side {
    flex-basis: 100%;
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: clamp(18px, 4vw, 24px);
    border-block-start: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

/* شريط التنقّل الداخلي */
.subnav {
  position: sticky;
  inset-block-start: 82px;
  z-index: 100;
  background: rgba(0, 38, 40, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
}

.subnav__in {
  display: flex;
  align-items: center;
  gap: 18px
}

.subnav ul {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none
}

.subnav ul::-webkit-scrollbar {
  display: none
}

.subnav a {
  display: block;
  padding: 16px 14px;
  font-size: .9rem;
  white-space: nowrap;
  color: var(--w-55);
  border-bottom: 2px solid transparent;
  transition: color .25s, border-color .25s;
}

.subnav a:hover {
  color: var(--w)
}

.subnav a.is-active {
  color: var(--w);
  border-bottom-color: var(--accent)
}

.subnav__bar {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  height: 2px;
  background: var(--accent);
  width: 0
}

/* رأس القسم المرقّم */
.snum {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 40px);
  flex-wrap: wrap
}

.snum__n {
  font-size: .86rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums
}

.snum__l {
  flex: 1;
  height: 1px;
  background: var(--line);
  min-width: 40px
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 30px)
}

@media (min-width:992px) {
  .grid2 {
    grid-template-columns: 1fr 1fr
  }

  .grid2--73 {
    grid-template-columns: 1.35fr 1fr
  }

  .grid2--37 {
    grid-template-columns: 1fr 1.35fr
  }
}

/* --------------------------------------------------------- خاتمة ودعوة */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(60px, 9vw, 120px) 0;
  overflow: hidden;
  background: var(--ink-0);
}

.cta__glow {
  position: absolute;
  inset-block-start: -20%;
  inset-inline-start: 40%;
  transform: translateX(-50%);
  width: min(900px, 120%);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent), transparent 62%);
  opacity: .2;
  filter: blur(20px);
}

.cta__in {
  position: relative;
  z-index: 2
}

.cta__slogan {
  font-size: clamp(1.8rem, 5.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
  background: linear-gradient(96deg, #fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: .35em 0 .6em;
}

/* ------------------------------------------------------------ التواصل */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px)
}

@media (min-width:640px) {
  .contact {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (min-width:1000px) {
  .contact {
    grid-template-columns: repeat(3, 1fr)
  }
}

.ccard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 24px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .35s, background .35s, transform .35s var(--ease);
}

.ccard:hover {
  border-color: var(--w-35);
  background: rgba(255, 255, 255, .055);
  transform: translateY(-3px)
}

.ccard i {
  font-size: 1.4rem;
  color: var(--lime);
  display: block;
  margin-bottom: 14px
}

.ccard span {
  display: block;
  font-size: .78rem;
  color: var(--w-55);
  margin-bottom: 5px;
  letter-spacing: .05em
}

.ccard b {
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.6;
  word-break: break-word
}

/* ------------------------------------------------------------ التذييل */
/* التذييل على بنية الدليل الرقمي (DGA): شريط زخرفي، ثم أعمدة روابط
   بعناوين وخطوط فاصلة، ثم شريط سفلي فيه الحقوق يمينًا والشعارات يسارًا. */
.foot {
  background: var(--bg-green);
  border-top: 1px solid var(--line);
}

/* ------- أعمدة الروابط ------- */
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding-block: clamp(38px, 5vw, 62px) clamp(30px, 4vw, 48px);
}

.foot__col {
  min-width: 0
}

/* عنوان العمود يتبعه خطّ فاصل بعرض العمود — نمط DGA */
.foot h5 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--w);
  letter-spacing: 0;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.foot a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: .93rem;
  color: var(--w-80);
  transition: color .25s var(--ease);
}

.foot a:hover {
  color: var(--lime)
}

/* أيقونة الروابط الخارجية */
.foot a .bi-box-arrow-up-left {
  font-size: .82em;
  color: var(--w-35);
  flex: none;
  transition: color .25s var(--ease);
}

.foot a:hover .bi-box-arrow-up-left {
  color: var(--lime)
}

/* ------- صفّ أيقونات التواصل الاجتماعي (جاهز للاستخدام) ------- */
.foot__social {
  display: flex;
  gap: 10px;
  padding-top: 6px;
}

.foot__social a {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  font-size: 1.05rem;
  color: var(--w-80);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

.foot__social a:hover {
  color: var(--bg-dark);
  background: var(--lime);
  border-color: var(--lime);
}

/* ------- الشريط السفلي: الحقوق يمينًا والشعارات يسارًا ------- */
.foot__bot {
  border-top: 1px solid var(--line);
  padding-block: clamp(22px, 2.6vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}

.foot__legal {
  min-width: 0
}

.foot__legal p {
  margin: 0;
  font-size: .88rem;
  color: var(--w-80);
  line-height: 1.7;
}

.foot__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 10px;
}

.foot__legal-links a {
  padding: 0;
  font-size: .86rem;
  color: var(--w-55);
}

.foot__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 32px);
  /* flex:none كان يمنعها من الانكماش أو الالتفاف فتفيض على الشاشات الضيّقة */
  flex: 0 1 auto;
  min-width: 0;
}

.foot__logos img {
  display: block;
  width: auto;
  flex: none;
}

/* شعار الجامعة مربّع، وشعار اليوم الوطني يُحفظ حوله 2X كما في الترويسة */
.foot__logos .foot__kfu {
  height: 42px
}

.foot__logos .foot__nd {
  height: 42px;
  margin: calc(42px * .181788);
}

@media (max-width:400px) {

  /* شعار اليوم الوطني عريض (5.655:1)، فيصغر مع شعار الجامعة معًا */
  .foot__logos .foot__nd {
    height: 30px;
    margin: calc(30px * .181788);
  }

  .foot__logos .foot__kfu {
    height: 38px
  }
}

@media (max-width:639px) {
  .foot__bot {
    justify-content: center;
    text-align: center;
  }

  .foot__legal-links {
    justify-content: center
  }

  .foot__logos {
    justify-content: center;
    flex-wrap: wrap
  }
}

/* ------------------------------------------------------------ الحركة */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease)
}

.rv.in {
  opacity: 1;
  transform: none
}

.toTop {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-start: 26px;
  z-index: 180;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-green);
  color: var(--w);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s;
}

.toTop.on {
  opacity: 1;
  pointer-events: auto;
  transform: none
}

.toTop:hover {
  background: var(--lime);
  color: var(--bg-dark)
}

/* شريط تقدّم القراءة */
.prog {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 300;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--lime));
  transition: width .1s linear
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important
  }

  .rv {
    opacity: 1;
    transform: none
  }
}

/* ------------------------------------------------------------ الطباعة */
@media print {
  body {
    background: #fff;
    color: #000
  }

  body::after,
  .nav,
  .subnav,
  .toTop,
  .prog,
  .hero,
  .ticker,
  .scroll-cue,
  .strip {
    display: none !important
  }

  .panel,
  .tile,
  .goals {
    border-color: #ccc;
    background: #fff;
    color: #000;
    break-inside: avoid
  }

  .sec {
    padding: 18px 0
  }
}