:root{
  --uni-radius: 18px;
  --uni-shadow: 0 12px 28px rgba(0,0,0,.12);
  --uni-shadow-hover: 0 16px 36px rgba(0,0,0,.18);
  --uni-badge: #22c55e;
}

:root{
  --brand-1:#22c55e; /* green */
  --brand-2:#ef4444; /* red   */
  --brand-3:#f59e0b; /* amber */
  --ink:#0f172a;
}

 /* ===== Hero ===== */
  .app-hero{
    margin: 18px auto 28px; border-radius: 18px; overflow: hidden; position: relative;
    background: #0f172a url('../img/home/universities1.png') center/cover no-repeat;
    min-height: 60vh; display: grid; place-items: center; box-shadow: 0 18px 44px rgba(0,0,0,.18); isolation:isolate;
  }
  .app-hero::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(90% 70% at 20% 0%, rgba(34,197,94,.22), transparent 55%),
      linear-gradient(180deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.75) 100%);
    z-index:0;
  }
  .app-hero__inner{ position: relative; z-index: 1; color:#fff; text-align:center; padding: clamp(1rem,2.4vw,2rem); max-width: 900px; }
  .app-hero__title{
    font-weight: 900; font-size: clamp(1.6rem, 1.6vw + 1.2rem, 2.2rem); text-shadow: 0 6px 22px rgba(0,0,0,.35); margin-bottom:.65rem;
    opacity:0; transform: translateY(-14px); animation: fadeDown .8s ease forwards .05s;
  }
  .app-hero__lead{
    font-size: clamp(1rem, .6vw + .95rem, 1.15rem); opacity:.95;
    opacity:0; transform: translateY(14px); animation: fadeUp .8s ease forwards .15s;
  }
  @keyframes fadeUp { to { opacity:1; transform: translateY(0); } }
  @keyframes fadeDown { to { opacity:1; transform: translateY(0); } }

/* طبقة تدرّجات فوق الصورة (نفس صفحة الخطوات) */
.page-universities .hero-spot::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(34,197,94,.22), transparent 55%),
    linear-gradient(180deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.75) 100%);
}

/* النص */
.page-universities .hero-spot__cap{
  position: relative; z-index: 2;
  color:#fff; text-align:center;
  padding: clamp(16px, 2.4vw, 32px);
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.page-universities .hero-spot__title{
  font-weight: 900;
  font-size: clamp(1.6rem, 1.6vw + 1.2rem, 2.2rem);
  margin: 0 0 .4rem;
  opacity:0; transform: translateY(-14px);
  animation: heroFadeDown .8s ease forwards .05s;
}
.page-universities .hero-spot__desc{
  font-size: clamp(1rem, .6vw + .95rem, 1.15rem);
  opacity:.95; margin:0;
  opacity:0; transform: translateY(14px);
  animation: heroFadeUp .8s ease forwards .15s;
}

/* بارالاكس خفيف بالهوفر (اختياري) */
.page-universities .hero-spot:hover .hero-spot__img{ transform: scale(1.06); }

/* أنيميشن */
@keyframes heroFadeUp   { to { opacity:1; transform: translateY(0); } }
@keyframes heroFadeDown { to { opacity:1; transform: translateY(0); } }

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .page-universities .hero-spot__img{ transition:none !important; transform:none !important; }
  .page-universities .hero-spot__title,
  .page-universities .hero-spot__desc{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* موبايل */
@media (max-width: 575.98px){
  .page-universities .hero-spot{ border-radius: 14px; }
}


/* Toolbar */
.uni-toolbar .input-group-text{ background:#fff; border-right:0; }
.uni-toolbar .form-control, .uni-toolbar .form-select{
  border-radius: 10px; border-color: rgba(15,23,42,.12);
}
.uni-search-group .form-control{ border-left:0; }
.uni-sort-group { min-width: 220px; }

/* Card */
.page-universities .uni-card{
  position:relative; display:block; width:100%;
  border-radius: var(--uni-radius); overflow:hidden;
  box-shadow: var(--uni-shadow);
  background:#0f172a; aspect-ratio: 16/9; min-height:220px;
  transition: transform .25s ease, box-shadow .25s ease;
  border:1px solid rgba(255,255,255,.06);
}
.page-universities .uni-card:hover{ transform: translateY(-6px); box-shadow: var(--uni-shadow-hover); }

/* BG image */
.page-universities .uni-card .uni-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1); transition: transform .35s ease, filter .35s ease;
  filter: saturate(105%) contrast(102%);
}
.page-universities .uni-card:hover .uni-bg{ transform: scale(1.06); }

/* Overlay layers */
.page-universities .uni-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,23,42,.06) 10%, rgba(15,23,42,.15) 45%, rgba(15,23,42,.65) 100%);
}
.page-universities .uni-card::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(34,197,94,.14), rgba(239,68,68,.14));
  mix-blend-mode: overlay; pointer-events:none;
}

/* Badge top-left (أكثر احترافية من البادج الكبيرة بالنص) */
.page-universities .uni-badge{
  position:absolute; left:14px; top:14px; z-index:2;
  width:46px; height:46px; border-radius:12px;
  background: var(--uni-badge); color:#fff; display:grid; place-items:center;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}

/* Content */
.page-universities .uni-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 18px 18px 20px; color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.page-universities .uni-title{
  font-weight:800; letter-spacing:.2px; margin:0; line-height:1.25;
  font-size: clamp(1.02rem, 1.1vw + .9rem, 1.4rem);
}

/* Skeleton loading */
.page-universities .uni-skeleton{
  position:absolute; inset:0; background: linear-gradient( 90deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06) );
  background-size: 200% 100%; animation: uniShimmer 1.4s linear infinite;
}
@keyframes uniShimmer { 0%{ background-position: 0% 0; } 100%{ background-position: -200% 0; } }
.page-universities .uni-card.img-on .uni-skeleton{ display:none; }

/* Fallback بدون صورة */
.page-universities .uni-fallback{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #1f2937, #0f172a);
  color:#fff; z-index:0;
}
.page-universities .uni-fallback::before{
  content: attr(data-title);
  font-size: 42px; font-weight: 800; opacity:.9;
}
.page-universities .uni-card.no-img .uni-fallback{ display:flex; }

/* Reveal (ستاجر) */
.js-reveal .page-universities .uni-card{
  opacity:0; transform: translateY(16px) scale(.985);
  transition: opacity 520ms cubic-bezier(.2,.8,.2,1), transform 520ms cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal .page-universities .uni-card.reveal-in{ opacity:1; transform:none; }

.page-universities .uni-grid > [class*="col-"]{ --reveal-delay: 0ms; }
.page-universities .uni-grid > [class*="col-"]:nth-child(1){--reveal-delay:60ms}
.page-universities .uni-grid > [class*="col-"]:nth-child(2){--reveal-delay:110ms}
.page-universities .uni-grid > [class*="col-"]:nth-child(3){--reveal-delay:160ms}
.page-universities .uni-grid > [class*="col-"]:nth-child(4){--reveal-delay:210ms}
.page-universities .uni-grid > [class*="col-"]:nth-child(5){--reveal-delay:260ms}
.page-universities .uni-grid > [class*="col-"]:nth-child(6){--reveal-delay:310ms}
.page-universities .uni-grid > [class*="col-"]:nth-child(7){--reveal-delay:360ms}
.page-universities .uni-grid > [class*="col-"]:nth-child(8){--reveal-delay:410ms}
.page-universities .uni-grid > [class*="col-"]:nth-child(9){--reveal-delay:460ms}
.page-universities .uni-grid > [class*="col-"]:nth-child(10){--reveal-delay:510ms}

/* وصولية وتقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .page-universities .uni-card, .page-universities .uni-bg, .page-universities .uni-card::after{ transition:none !important; }
  .js-reveal .page-universities .uni-card{ opacity:1 !important; transform:none !important; }
}