/* ═══════════════════════════════════════════════════════════════════════════
   HERO UNIFIED SYSTEM - توحيد جميع Hero Sections
   ═══════════════════════════════════════════════════════════════════════════
   هذا الملف يوحد تنسيق جميع Hero Sections في الموقع
   يجب تحميله بعد جميع ملفات CSS الأخرى
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. UNIFIED HERO CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

.students-hero,
.page-hero,
.library-hero,
.contact-hero,
.about-hero {
  padding: var(--hero-padding-desktop);
  min-height: var(--hero-min-height-desktop);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. UNIFIED HERO ENTRANCE (Transition-based, smooth fade + rise)
   - Same proven pattern as home-page `.fade-in` system
   - Uses CSS `transition` (not keyframe `animation`) to avoid the
     "flash then animate" glitch that can occur when a section goes
     display:none → display:block during SPA navigation.
   - Trigger class `.hero-revealed` is toggled by navigation.service.js
     after a double-RAF so the initial hidden state is always painted first.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Initial state: hidden + transition pre-armed */
.page-section .page-hero .hero-content>*,
.page-section .students-hero .hero-content>*,
.page-section .contact-hero .hero-content>*,
.page-section .library-hero .hero-content>*,
.page-section .about-hero .hero-content>*,
.page-section#home #hero-section .banner-text>* {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity, transform;
}

/* Staggered transition-delay (same cadence as before: 0.2, 0.4, 0.6, 0.8, 1.0s) */
.page-section .page-hero .hero-content>*:nth-child(1),
.page-section .students-hero .hero-content>*:nth-child(1),
.page-section .contact-hero .hero-content>*:nth-child(1),
.page-section .library-hero .hero-content>*:nth-child(1),
.page-section .about-hero .hero-content>*:nth-child(1),
.page-section#home #hero-section .banner-text>*:nth-child(1) {
  transition-delay: 0.2s;
}

.page-section .page-hero .hero-content>*:nth-child(2),
.page-section .students-hero .hero-content>*:nth-child(2),
.page-section .contact-hero .hero-content>*:nth-child(2),
.page-section .library-hero .hero-content>*:nth-child(2),
.page-section .about-hero .hero-content>*:nth-child(2),
.page-section#home #hero-section .banner-text>*:nth-child(2) {
  transition-delay: 0.4s;
}

.page-section .page-hero .hero-content>*:nth-child(3),
.page-section .students-hero .hero-content>*:nth-child(3),
.page-section .contact-hero .hero-content>*:nth-child(3),
.page-section .library-hero .hero-content>*:nth-child(3),
.page-section .about-hero .hero-content>*:nth-child(3),
.page-section#home #hero-section .banner-text>*:nth-child(3) {
  transition-delay: 0.6s;
}

.page-section .page-hero .hero-content>*:nth-child(4),
.page-section .students-hero .hero-content>*:nth-child(4),
.page-section .contact-hero .hero-content>*:nth-child(4),
.page-section .library-hero .hero-content>*:nth-child(4),
.page-section .about-hero .hero-content>*:nth-child(4),
.page-section#home #hero-section .banner-text>*:nth-child(4) {
  transition-delay: 0.8s;
}

.page-section .page-hero .hero-content>*:nth-child(5),
.page-section .students-hero .hero-content>*:nth-child(5),
.page-section .contact-hero .hero-content>*:nth-child(5),
.page-section .library-hero .hero-content>*:nth-child(5),
.page-section .about-hero .hero-content>*:nth-child(5),
.page-section#home #hero-section .banner-text>*:nth-child(5) {
  transition-delay: 1s;
}

/* Revealed state: visible (JS adds `.hero-revealed` on the section after RAF) */
.page-section.active.hero-revealed .page-hero .hero-content>*,
.page-section.active.hero-revealed .students-hero .hero-content>*,
.page-section.active.hero-revealed .contact-hero .hero-content>*,
.page-section.active.hero-revealed .library-hero .hero-content>*,
.page-section.active.hero-revealed .about-hero .hero-content>*,
.page-section#home.active.hero-revealed #hero-section .banner-text>* {
  opacity: 1;
  transform: translateY(0);
}

/* While loading, keep hidden and kill any transitions — animation plays fresh after loader */
body.is-loading .page-section .hero-content>*,
body.is-loading .page-section .banner-text>* {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: none !important;
}

/* Respect reduced motion — reveal instantly without transform animation */
@media (prefers-reduced-motion: reduce) {

  .page-section .page-hero .hero-content>*,
  .page-section .students-hero .hero-content>*,
  .page-section .contact-hero .hero-content>*,
  .page-section .library-hero .hero-content>*,
  .page-section .about-hero .hero-content>*,
  .page-section#home #hero-section .banner-text>* {
    transition: none !important;
    transition-delay: 0s !important;
  }

  .page-section.active .page-hero .hero-content>*,
  .page-section.active .students-hero .hero-content>*,
  .page-section.active .contact-hero .hero-content>*,
  .page-section.active .library-hero .hero-content>*,
  .page-section.active .about-hero .hero-content>*,
  .page-section#home.active #hero-section .banner-text>* {
    opacity: 1;
    transform: none;
  }
}

/* Library baseline spacing: section itself should not add extra top padding */
#top-students.page-section,
#staff-section.page-section,
#library.page-section,
#activities.page-section,
#contact.page-section,
#about.page-section {
  padding-top: 0;
}

#home.page-section {
  padding: 0 !important;
  min-height: 0 !important;
}

#home .wrapper {
  height: auto !important;
  min-height: 0 !important;
}

/*
 * الرئيسية ≤991px (هاتف + تابلت عمودي): هيرو بارتفاع منطقة الرؤية + توسيط الهوية عند أول ظهور
 * (الديكور العائم يُخفى أدناه لتفادي فراغ WebKit؛ hero-disabled يُعالج في نهاية الملف)
 */
@media (max-width: 991px) {
  #home #hero-section.main-section:not(.hero-disabled) {
    height: auto !important;
    min-height: max(100vh, var(--hero-stack-safe-min, 27.5rem)) !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    box-sizing: border-box;
  }

  #home #hero-section.main-section:not(.hero-disabled) .main-banner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
  }

  #home #hero-section.main-section:not(.hero-disabled) .main-banner .banner-text {
    padding-bottom: clamp(1.25rem, 4vh, 2rem);
  }
}

@supports (height: 100dvh) {
  @media (max-width: 991px) {
    #home #hero-section.main-section:not(.hero-disabled) {
      min-height: max(100dvh, var(--hero-stack-safe-min, 27.5rem)) !important;
    }
  }
}

@supports (height: 100dvh) and (height: 100svh) {
  @media (max-width: 991px) {
    #home #hero-section.main-section:not(.hero-disabled) {
      min-height: max(min(100dvh, 100svh), var(--hero-stack-safe-min, 27.5rem)) !important;
    }
  }
}

/*
 * هيرو الصفحات الست — ارتفاع منطقة رؤية (dvh/svh).
 * الصفحة الرئيسية: ≤991 أعلاه؛ من 992px فأعلى في الميديا التالية.
 */
#top-students .students-hero,
#staff-section .page-hero,
#library .library-hero,
#activities .page-hero,
#contact .contact-hero,
#about .about-hero {
  height: auto !important;
  min-height: max(100vh, var(--hero-stack-safe-min, 27.5rem)) !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  justify-content: center !important;
  align-items: stretch !important;
  box-sizing: border-box;
}

@supports (height: 100dvh) {
  #top-students .students-hero,
  #staff-section .page-hero,
  #library .library-hero,
  #activities .page-hero,
  #contact .contact-hero,
  #about .about-hero {
    min-height: max(100dvh, var(--hero-stack-safe-min, 27.5rem)) !important;
  }
}

@supports (height: 100dvh) and (height: 100svh) {
  #top-students .students-hero,
  #staff-section .page-hero,
  #library .library-hero,
  #activities .page-hero,
  #contact .contact-hero,
  #about .about-hero {
    min-height: max(min(100dvh, 100svh), var(--hero-stack-safe-min, 27.5rem)) !important;
  }
}

@media (min-width: 1100px) and (min-height: 800px) {
  @supports (height: 100dvh) and (height: 100svh) {
    #top-students .students-hero,
    #staff-section .page-hero,
    #library .library-hero,
    #activities .page-hero,
    #contact .contact-hero,
    #about .about-hero {
      min-height: min(
        max(min(100dvh, 100svh), var(--hero-stack-safe-min, 27.5rem)),
        var(--hero-stack-cap-min, 52rem)
      ) !important;
    }
  }
}

/* الصفحة الرئيسية: هيرو بارتفاع الشاشة من 992px فأعلى (منفصل عن المجموعة أعلاه) */
@media (min-width: 992px) {
  #home #hero-section.main-section {
    height: auto !important;
    min-height: max(100vh, var(--hero-stack-safe-min, 27.5rem)) !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    justify-content: center !important;
    align-items: stretch !important;
    box-sizing: border-box;
  }
}

@supports (height: 100dvh) {
  @media (min-width: 992px) {
    #home #hero-section.main-section {
      min-height: max(100dvh, var(--hero-stack-safe-min, 27.5rem)) !important;
    }
  }
}

@supports (height: 100dvh) and (height: 100svh) {
  @media (min-width: 992px) {
    #home #hero-section.main-section {
      min-height: max(min(100dvh, 100svh), var(--hero-stack-safe-min, 27.5rem)) !important;
    }
  }
}

@media (min-width: 1100px) and (min-height: 800px) {
  @supports (height: 100dvh) and (height: 100svh) {
    #home #hero-section.main-section {
      min-height: min(
        max(min(100dvh, 100svh), var(--hero-stack-safe-min, 27.5rem)),
        var(--hero-stack-cap-min, 52rem)
      ) !important;
    }
  }
}

#home #hero-section.main-section {
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

#home #hero-section .main-banner {
  padding: 0;
  /* ≤991: flex 1 في الميديا أعلاه لتوسيط المحتوى؛ ≥992: يبقى تمدد المحتوى الافتراضي */
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP STUDENTS FULL SCREEN HERO - Same as Home
   ═══════════════════════════════════════════════════════════════════════════ */

#top-students.page-section {
  padding: 0 !important;
  min-height: 0 !important;
}

#top-students .students-hero {
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
  /* ارتفاع/حد أدنى: الكتلة الموحدة أعلاه */
}

#top-students .students-hero .container {
  width: 100%;
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
  padding: 0 15px;
}

#top-students .students-hero .hero-content {
  padding: var(--hero-padding-desktop);
  padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap, 1.75rem));
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAFF SECTION FULL SCREEN HERO
   ═══════════════════════════════════════════════════════════════════════════ */

#staff-section.page-section {
  padding: 0 !important;
  min-height: 0 !important;
}

#staff-section .page-hero {
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
  /* ارتفاع/حد أدنى: الكتلة الموحدة أعلاه */
}

#staff-section .page-hero .hero-content {
  padding: var(--hero-padding-desktop);
  padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap, 1.75rem));
  padding-inline: 20px;
  padding-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
LIBRARY FULL SCREEN HERO
══════════════════════════════════════════════════════════════════════════ */

#library.page-section {
  padding: 0 !important;
  min-height: 0 !important;
}

#library.page-section.hero-hidden {
  padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap, 1.75rem)) !important;
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
}

#library.hero-hidden > .main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#library.hero-hidden > .main-content > .container {
  flex: 1;
}

#library .library-hero {
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
  /* ارتفاع/حد أدنى: الكتلة الموحدة أعلاه */
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTIVITIES FULL SCREEN HERO
   ═══════════════════════════════════════════════════════════════════════════ */

#activities.page-section {
  padding: 0 !important;
  min-height: 0 !important;
}

#activities .page-hero {
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
  /* ارتفاع/حد أدنى: الكتلة الموحدة أعلاه */
}

#activities .page-hero .hero-content {
  padding: var(--hero-padding-desktop);
  padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap, 1.75rem));
  padding-inline: 20px;
  padding-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

/* Hero disabled — collapse to navbar spacer only */
#activities .page-hero.hero-disabled,
#staff-section .page-hero.hero-disabled,
#top-students .students-hero.hero-disabled,
#contact .contact-hero.hero-disabled,
#about .about-hero.hero-disabled,
#library .library-hero.hero-disabled,
#home #hero-section.main-section.hero-disabled {
  height: calc(var(--magic-nav-height, 70px) + 30px) !important;
  min-height: calc(var(--magic-nav-height, 70px) + 30px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT FULL SCREEN HERO
   ═══════════════════════════════════════════════════════════════════════════ */

#contact.page-section {
  padding: 0 !important;
  min-height: 0 !important;
}

#contact .contact-hero {
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
  /* ارتفاع/حد أدنى: الكتلة الموحدة أعلاه */
}

#contact .contact-hero .hero-content {
  padding: var(--hero-padding-desktop);
  padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap, 1.75rem));
  padding-inline: 20px;
  padding-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT FULL SCREEN HERO
   ═══════════════════════════════════════════════════════════════════════════ */

#about.page-section {
  padding: 0 !important;
  min-height: 0 !important;
}

#about .about-hero {
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
  /* ارتفاع/حد أدنى: الكتلة الموحدة أعلاه */
}

#about .about-hero .hero-content {
  padding: var(--hero-padding-desktop);
  padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap, 1.75rem));
  padding-inline: 20px;
  padding-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
}

#home #hero-section .main-banner .banner-text {
  text-align: center;
  max-width: var(--hero-content-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--hero-padding-desktop);
  padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap, 1.75rem));
  /* Unified with Library */
  padding-bottom: 80px;
  /* Unified with Library */
  width: 100%;
  box-sizing: border-box;
  gap: clamp(var(--space-8), 3vh, var(--space-16));
}

#home #hero-section .main-banner .banner-text>* {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. UNIFIED HERO CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

.students-hero .hero-content,
.page-hero .hero-content,
#contact .hero-content,
.about-hero .hero-content {
  text-align: center;
  max-width: var(--hero-content-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* توسيط عمودي للمحتوى داخل هيرو مرن */
#library .library-hero > .container,
#staff-section .page-hero > .container,
#activities .page-hero > .container,
#top-students .students-hero > .container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

#contact .contact-hero > .hero-content,
#about .about-hero > .container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

#library .library-hero .hero-content {
  padding: var(--hero-padding-desktop);
  padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap, 1.75rem));
  padding-inline: 20px;
  padding-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
}

#library .hero-content {
  text-align: center;
  max-width: var(--hero-content-max-width);
  margin: 0 auto;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  grid-template-columns: unset;
  gap: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. UNIFIED HERO BADGE
   ═══════════════════════════════════════════════════════════════════════════ */

#top-students .hero-badge,
#staff-section .hero-badge,
#library .hero-badge,
#activities .hero-badge,
#contact .hero-badge,
#about .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--hero-badge-padding);
  border-radius: var(--hero-badge-radius);
  font-size: var(--hero-badge-font-size);
  font-weight: var(--hero-badge-font-weight);
  margin-bottom: var(--hero-badge-margin-bottom);
  background: var(--dynamic-bg, var(--primary-color));
  color: var(--dynamic-color, var(--text-white));
  box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.3);
}

#top-students .hero-badge {
  background: var(--dynamic-bg, var(--students-hero-badge-bg, var(--primary-color)));
  color: var(--dynamic-color, var(--students-hero-badge-text, var(--text-white)));
}

/* #home .main-banner .hero-badge - تم نقله إلى hero.css لتجنب التعارض */

/* ═══════════════════════════════════════════════════════════════════════════
   4. UNIFIED HERO TITLE
   ═══════════════════════════════════════════════════════════════════════════ */

#top-students .hero-title,
#staff-section .hero-title,
#activities .hero-title,
#contact .hero-title {
  font-size: var(--hero-title-font-size);
  font-weight: var(--hero-title-font-weight);
  line-height: var(--hero-title-line-height);
  margin-bottom: var(--hero-title-margin-bottom);
  color: var(--text-primary);
  animation: none;
  background: none;
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: none;
  filter: none;
}

.hero-title-highlight {
  display: inline;
  background: linear-gradient(90deg, var(--primary-grad), var(--secondary-grad));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px var(--accent-shadow));
  -webkit-filter: drop-shadow(0 2px 8px var(--accent-shadow));
}

#top-students .hero-title .hero-title-secondary,
#staff-section .hero-title .hero-title-secondary {
  color: var(--text-secondary);
}

#top-students.page-section .students-hero .hero-content {
  animation: none;
}

#home .main-banner .banner-text>h2 {
  font-size: var(--hero-title-font-size);
  font-weight: var(--hero-title-font-weight);
  line-height: var(--hero-title-line-height);
  margin-bottom: var(--hero-title-margin-bottom);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. UNIFIED HERO SUBTITLE/DESCRIPTION
   ═══════════════════════════════════════════════════════════════════════════ */

#top-students .hero-subtitle,
#staff-section .hero-subtitle,
#activities .hero-description,
#activities .hero-subtitle,
#contact .hero-description,
#about .hero-subtitle {
  font-size: var(--hero-subtitle-font-size);
  font-weight: var(--hero-subtitle-font-weight);
  line-height: var(--hero-subtitle-line-height);
  max-width: var(--hero-subtitle-max-width);
  margin: 0 auto;
  color: var(--text-secondary);
  opacity: 0.9;
}

#home .main-banner .banner-text>p {
  font-size: var(--hero-subtitle-font-size);
  font-weight: var(--hero-subtitle-font-weight);
  line-height: var(--hero-subtitle-line-height);
  max-width: var(--hero-subtitle-max-width);
  margin: 0 auto;
  color: var(--text-secondary);
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. RESPONSIVE - TABLET (768px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* لا padding رأسي على الغلاف — يُحسب داخل .hero-content فقط (يتوافق مع التواصل ويتجنب التراكب) */
  .students-hero,
  .page-hero,
  .library-hero,
  .contact-hero,
  .about-hero {
    padding: 0;
    min-height: var(--hero-min-height-tablet);
  }

  #home .wrapper {
    height: auto !important;
    min-height: 0 !important;
  }

  /* الرئيسية: يملأ منطقة الرؤية + توسيط (القاعدة ≤991px) — لا نُصفّر min-height هنا */
  #home #hero-section .main-banner {
    padding: 0;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box;
  }

  #home #hero-section .main-banner .banner-text {
    padding: var(--hero-padding-tablet);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: clamp(1.25rem, 4vw, 1.75rem);
  }

  /* Top Students Tablet */
  #top-students .students-hero {
    height: auto !important;
    /* min-height: الكتلة الموحدة أعلاه */
  }

  #top-students .students-hero .hero-content {
    padding: var(--hero-padding-tablet);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
  }

  /* Staff Section Tablet */
  #staff-section .page-hero {
    height: auto !important;
  }

  #staff-section .page-hero .hero-content {
    padding: var(--hero-padding-tablet);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
  }

  /* Library Tablet */
  #library .library-hero {
    height: auto !important;
    padding: 0;
  }

  #library .library-hero .hero-content {
    padding: var(--hero-padding-tablet);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
  }

  /* Library Hero Capsules - 2x2 Grid Layout */
  #library .library-capsules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-inline: 10px;
    margin-top: 25px;
    width: 100%;
  }

  #library .library-hero .capsule {
    min-width: auto;
    width: 100%;
    padding: 15px 10px;
    font-size: 0.8rem;
    flex: none;
  }

  #library .library-hero .capsule i {
    font-size: 1.5rem;
    margin-bottom: 5px;
  }

  #library .library-hero .hero-badge {
    max-width: 90%;
  }

  #library .library-hero .hero-title {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  #library .library-hero .library-name {
    font-size: 2.2rem;
  }

  /* Activities Tablet */
  #activities .page-hero {
    height: auto !important;
    padding: 0;
  }

  #activities .page-hero .hero-content {
    padding: var(--hero-padding-tablet);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
    padding-inline: clamp(12px, 4vw, 20px);
  }

  /* Contact Tablet */
  #contact .contact-hero {
    height: auto !important;
  }

  #contact .contact-hero .hero-content {
    padding: var(--hero-padding-tablet);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
  }

  /* About Tablet */
  #about .about-hero {
    height: auto !important;
  }

  #about .about-hero .hero-content {
    padding: var(--hero-padding-tablet);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
    padding-inline: clamp(14px, 3vw, 24px);
  }

  #top-students .hero-badge,
  #staff-section .hero-badge,
  #library .hero-badge,
  #activities .hero-badge,
  #contact .hero-badge,
  #about .hero-badge {
    font-size: var(--hero-badge-font-size-tablet);
    padding: var(--hero-badge-padding-tablet);
    margin-bottom: var(--hero-badge-margin-bottom-tablet);
    background: var(--dynamic-bg, var(--primary-color));
    color: var(--dynamic-color, var(--text-white));
  }

  /* #home .main-banner .hero-badge - في hero.css */

  #top-students .hero-title,
  #staff-section .hero-title,
  #activities .hero-title,
  #contact .hero-title {
    font-size: var(--hero-title-font-size-tablet);
    margin-bottom: var(--hero-title-margin-bottom-tablet);
  }

  #home .main-banner .banner-text>h2 {
    font-size: var(--hero-title-font-size-tablet);
    margin-bottom: var(--hero-title-margin-bottom-tablet);
  }

  #top-students .hero-subtitle,
  #staff-section .hero-subtitle,
  #activities .hero-description,
  #activities .hero-subtitle,
  #contact .hero-description,
  #about .hero-subtitle {
    font-size: var(--hero-subtitle-font-size-tablet);
    max-width: 90%;
  }

  #home .main-banner .banner-text>p {
    font-size: var(--hero-subtitle-font-size-tablet);
    max-width: 90%;
  }
}

/* تابلت ضيق (769–991): نفس منطق ارتفاع الشاشة ≤991px أعلاه؛ هنا ضبط حشو إضافي فقط */
@media (min-width: 769px) and (max-width: 991px) {
  #home #hero-section .main-banner {
    flex: 1 1 auto !important;
  }

  #home #hero-section .main-banner .banner-text {
    padding-bottom: clamp(1.25rem, 4vw, 2rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. RESPONSIVE - MOBILE (480px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  .students-hero,
  .page-hero,
  .library-hero,
  .contact-hero,
  .about-hero {
    padding: 0;
    min-height: var(--hero-min-height-mobile);
  }

  #home .wrapper {
    height: auto !important;
    min-height: 0 !important;
  }

  #home #hero-section .main-banner {
    padding: 0;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box;
  }

  #home #hero-section .main-banner .banner-text {
    padding: var(--hero-padding-mobile);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: clamp(1rem, 3.5vw, 1.5rem);
  }

  /* Top Students Mobile */
  #top-students .students-hero {
    height: auto !important;
  }

  #top-students .students-hero .hero-content {
    padding: var(--hero-padding-mobile);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
  }

  /* Staff Section Mobile */
  #staff-section .page-hero {
    height: auto !important;
  }

  #staff-section .page-hero .hero-content {
    padding: var(--hero-padding-mobile);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
  }

  /* Library Mobile */
  #library .library-hero {
    height: auto !important;
    padding: 0;
  }

  #library .library-hero .hero-content {
    padding: var(--hero-padding-mobile);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
  }

  /* Library Hero Capsules Mobile - 2x2 Grid */
  #library .library-capsules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-inline: 5px;
    margin-top: 20px;
    width: 100%;
  }

  #library .library-hero .capsule {
    min-width: auto;
    width: 100%;
    padding: 12px 8px;
    font-size: 0.75rem;
    flex: none;
  }

  #library .library-hero .capsule i {
    font-size: 1.25rem;
    margin-bottom: 4px;
  }

  #library .library-hero .hero-title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  #library .library-hero .library-name {
    font-size: 1.8rem;
  }

  /* Activities Mobile */
  #activities .page-hero {
    height: auto !important;
    padding: 0;
  }

  #activities .page-hero .hero-content {
    padding: var(--hero-padding-mobile);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
    padding-inline: clamp(12px, 4vw, 20px);
  }

  /* Contact Mobile */
  #contact .contact-hero {
    height: auto !important;
  }

  #contact .contact-hero .hero-content {
    padding: var(--hero-padding-mobile);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
  }

  /* About Mobile */
  #about .about-hero {
    height: auto !important;
  }

  #about .about-hero .hero-content {
    padding: var(--hero-padding-mobile);
    padding-top: calc(var(--magic-nav-height, 70px) + var(--hero-below-nav-gap-sm, 1.125rem));
    padding-bottom: 40px;
    padding-inline: clamp(12px, 4vw, 20px);
  }

  #top-students .hero-badge,
  #staff-section .hero-badge,
  #library .hero-badge,
  #activities .hero-badge,
  #contact .hero-badge,
  #about .hero-badge {
    font-size: var(--hero-badge-font-size-mobile);
    padding: var(--hero-badge-padding-mobile);
    margin-bottom: var(--hero-badge-margin-bottom-mobile);
    background: var(--dynamic-bg, var(--primary-color));
    color: var(--dynamic-color, var(--text-white));
  }

  /* #home .main-banner .hero-badge - في hero.css */

  #top-students .hero-title,
  #staff-section .hero-title,
  #activities .hero-title,
  #contact .hero-title {
    font-size: var(--hero-title-font-size-mobile);
    margin-bottom: var(--hero-title-margin-bottom-mobile);
    line-height: 1.3;
  }

  #home .main-banner .banner-text>h2 {
    font-size: var(--hero-title-font-size-mobile);
    margin-bottom: var(--hero-title-margin-bottom-mobile);
    line-height: 1.3;
  }

  #top-students .hero-subtitle,
  #staff-section .hero-subtitle,
  #activities .hero-description,
  #activities .hero-subtitle,
  #contact .hero-description,
  #about .hero-subtitle {
    font-size: var(--hero-subtitle-font-size-mobile);
    max-width: 95%;
    line-height: 1.6;
  }

  #home .main-banner .banner-text>p {
    font-size: var(--hero-subtitle-font-size-mobile);
    max-width: 95%;
    line-height: 1.6;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO DISABLED — Must be LAST to override all @supports and media queries
   Uses ID selectors to match specificity of original rules
   ═══════════════════════════════════════════════════════════════════════════ */
#activities .page-hero.hero-disabled,
#staff-section .page-hero.hero-disabled,
#top-students .students-hero.hero-disabled,
#library .library-hero.hero-disabled,
#contact .contact-hero.hero-disabled,
#about .about-hero.hero-disabled,
#home #hero-section.main-section.hero-disabled {
  height: calc(var(--magic-nav-height, 70px) + 30px) !important;
  min-height: calc(var(--magic-nav-height, 70px) + 30px) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. PAGE-SPECIFIC HERO REVEAL OVERRIDES
   - High-specificity rules (per page ID) match the base transition system
     so they cannot be accidentally regressed by page-specific stylesheets
     (e.g. `#contact .hero-badge` sets its own `transition` list without
     `opacity`, which would otherwise make the fade-in instant).
   - No keyframe animation is used; entrance is driven by `.hero-revealed`
     toggled from NavigationService after a double-RAF paint.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base hidden state + guaranteed entrance transition at ID specificity */
#staff-section.page-section .page-hero .hero-content>*,
#library.page-section .library-hero .hero-content>*,
#activities.page-section .page-hero .hero-content>*,
#contact.page-section .contact-hero .hero-content>*,
#about.page-section .about-hero .hero-content>*,
#top-students.page-section .students-hero .hero-content>*,
#home.page-section #hero-section .banner-text>* {
  opacity: 0;
  transform: translateY(30px);
  animation: none;
  /*
   * Explicit transition at ID specificity so page stylesheets that define
   * their own `transition` on .hero-badge / .hero-btn (without opacity)
   * cannot override the unified fade-in. Hover-only properties
   * (background, box-shadow, border-color) are also listed so hover
   * micro-interactions remain smooth.
   */
  transition:
    opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.8s cubic-bezier(0.33, 1, 0.68, 1),
    background 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

/* Revealed state — requires both `.active` and `.hero-revealed` on section */
#staff-section.page-section.active.hero-revealed .page-hero .hero-content>*,
#library.page-section.active.hero-revealed .library-hero .hero-content>*,
#activities.page-section.active.hero-revealed .page-hero .hero-content>*,
#contact.page-section.active.hero-revealed .contact-hero .hero-content>*,
#about.page-section.active.hero-revealed .about-hero .hero-content>*,
#top-students.page-section.active.hero-revealed .students-hero .hero-content>*,
#home.page-section.active.hero-revealed #hero-section .banner-text>* {
  opacity: 1;
  transform: translateY(0);
}

/*
 * Staggered entrance (ID-specificity) — CRITICAL: must match the specificity
 * of the base `transition:` shorthand above, otherwise the shorthand resets
 * `transition-delay` to 0s and the cascade kills the stagger. This is the
 * root cause of the "all elements animate as one block" glitch we had to fix.
 *
 * Cadence (exact match of the proven old-version feel):
 *   child 1 (badge)      → 0.2s
 *   child 2 (title)      → 0.4s
 *   child 3 (subtitle)   → 0.6s
 *   child 4 (buttons)    → 0.8s
 *   child 5 (stats/meta) → 1.0s
 *   child 6+             → 1.2s
 *
 * Per-property delay syntax matches the 7-property transition list:
 *   (opacity, transform, background, background-color, box-shadow,
 *    border-color, color)
 * Only opacity + transform get the stagger; hover-related properties keep 0s
 * so future hover/state changes stay instant.
 */
#staff-section.page-section .page-hero .hero-content>*:nth-child(1),
#library.page-section .library-hero .hero-content>*:nth-child(1),
#activities.page-section .page-hero .hero-content>*:nth-child(1),
#contact.page-section .contact-hero .hero-content>*:nth-child(1),
#about.page-section .about-hero .hero-content>*:nth-child(1),
#top-students.page-section .students-hero .hero-content>*:nth-child(1),
#home.page-section #hero-section .banner-text>*:nth-child(1) {
  transition-delay: 0.2s, 0.2s, 0s, 0s, 0s, 0s, 0s;
}

#staff-section.page-section .page-hero .hero-content>*:nth-child(2),
#library.page-section .library-hero .hero-content>*:nth-child(2),
#activities.page-section .page-hero .hero-content>*:nth-child(2),
#contact.page-section .contact-hero .hero-content>*:nth-child(2),
#about.page-section .about-hero .hero-content>*:nth-child(2),
#top-students.page-section .students-hero .hero-content>*:nth-child(2),
#home.page-section #hero-section .banner-text>*:nth-child(2) {
  transition-delay: 0.4s, 0.4s, 0s, 0s, 0s, 0s, 0s;
}

#staff-section.page-section .page-hero .hero-content>*:nth-child(3),
#library.page-section .library-hero .hero-content>*:nth-child(3),
#activities.page-section .page-hero .hero-content>*:nth-child(3),
#contact.page-section .contact-hero .hero-content>*:nth-child(3),
#about.page-section .about-hero .hero-content>*:nth-child(3),
#top-students.page-section .students-hero .hero-content>*:nth-child(3),
#home.page-section #hero-section .banner-text>*:nth-child(3) {
  transition-delay: 0.6s, 0.6s, 0s, 0s, 0s, 0s, 0s;
}

#staff-section.page-section .page-hero .hero-content>*:nth-child(4),
#library.page-section .library-hero .hero-content>*:nth-child(4),
#activities.page-section .page-hero .hero-content>*:nth-child(4),
#contact.page-section .contact-hero .hero-content>*:nth-child(4),
#about.page-section .about-hero .hero-content>*:nth-child(4),
#top-students.page-section .students-hero .hero-content>*:nth-child(4),
#home.page-section #hero-section .banner-text>*:nth-child(4) {
  transition-delay: 0.8s, 0.8s, 0s, 0s, 0s, 0s, 0s;
}

#staff-section.page-section .page-hero .hero-content>*:nth-child(5),
#library.page-section .library-hero .hero-content>*:nth-child(5),
#activities.page-section .page-hero .hero-content>*:nth-child(5),
#contact.page-section .contact-hero .hero-content>*:nth-child(5),
#about.page-section .about-hero .hero-content>*:nth-child(5),
#top-students.page-section .students-hero .hero-content>*:nth-child(5),
#home.page-section #hero-section .banner-text>*:nth-child(5) {
  transition-delay: 1s, 1s, 0s, 0s, 0s, 0s, 0s;
}

#staff-section.page-section .page-hero .hero-content>*:nth-child(n+6),
#library.page-section .library-hero .hero-content>*:nth-child(n+6),
#activities.page-section .page-hero .hero-content>*:nth-child(n+6),
#contact.page-section .contact-hero .hero-content>*:nth-child(n+6),
#about.page-section .about-hero .hero-content>*:nth-child(n+6),
#top-students.page-section .students-hero .hero-content>*:nth-child(n+6),
#home.page-section #hero-section .banner-text>*:nth-child(n+6) {
  transition-delay: 1.2s, 1.2s, 0s, 0s, 0s, 0s, 0s;
}

/*
 * Hover: remove any entrance stagger delay so hover micro-interactions feel
 * instant. Otherwise, the :nth-child transition-delay (up to ~1s) would
 * apply to every hover animation too.
 */
#staff-section.page-section .page-hero .hero-content>*:hover,
#library.page-section .library-hero .hero-content>*:hover,
#activities.page-section .page-hero .hero-content>*:hover,
#contact.page-section .contact-hero .hero-content>*:hover,
#about.page-section .about-hero .hero-content>*:hover,
#top-students.page-section .students-hero .hero-content>*:hover,
#home.page-section #hero-section .banner-text>*:hover {
  transition-delay: 0s;
}

/* Reduced-motion: reveal instantly, no delay, no transform drift */
@media (prefers-reduced-motion: reduce) {

  #staff-section.page-section .page-hero .hero-content>*,
  #library.page-section .library-hero .hero-content>*,
  #activities.page-section .page-hero .hero-content>*,
  #contact.page-section .contact-hero .hero-content>*,
  #about.page-section .about-hero .hero-content>*,
  #top-students.page-section .students-hero .hero-content>*,
  #home.page-section #hero-section .banner-text>* {
    transition: none !important;
    transition-delay: 0s !important;
  }

  #staff-section.page-section.active .page-hero .hero-content>*,
  #library.page-section.active .library-hero .hero-content>*,
  #activities.page-section.active .page-hero .hero-content>*,
  #contact.page-section.active .contact-hero .hero-content>*,
  #about.page-section.active .about-hero .hero-content>*,
  #top-students.page-section.active .students-hero .hero-content>*,
  #home.page-section.active #hero-section .banner-text>* {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. POST-HERO PAGE ENTRANCE CASCADE — filters / search / toolbars
   ───────────────────────────────────────────────────────────────────────────
   Purpose: on pages that have a filter/search area directly below the hero
   (Top Students, Staff, Library, Activities/Magazine), fade those blocks in
   with a stagger that continues the hero's rhythm so the whole viewport
   feels one coherent entrance instead of "hero animates, filters pop".

   Trigger: same `.hero-revealed` class on the page section that drives the
   hero entrance. This guarantees identical timing across all SPA
   navigations and respects the loader defer logic in navigation.service.js.

   Timing picks up where the hero ends (hero last child starts at 1.0s
   with 0.8s duration → ends at 1.8s):
     • section-header / display-header  → 0.9s  (overlap with hero tail)
     • first filter/search child        → 1.1s
     • second filter child              → 1.3s
     • library toolbar cells (inner)    → 1.15s, 1.25s, 1.35s, 1.45s
   Duration: 0.7s (slightly snappier than the 0.8s hero).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Initial hidden state + pre-armed transition (ID-specificity so page
   stylesheets cannot silently override it with a shorter transition list).
   `animation: none` disables bootstrap.js's AOS keyframe (spaFadeUp) that
   gets applied via `.spa-animate` on magazine's data-aos elements, so our
   unified transition is the single source of truth for this cascade.

   Library note: we animate the INDIVIDUAL toolbar cells and hint only
   (not their parent .library-search-toolbar-row / .library-discovery) to
   avoid nested-transform math that would offset the cells by 40px during
   their hidden state and make the cascade feel jittery. */
#top-students.page-section .container>.section-header,
#top-students.page-section .advanced-filters>*,
#staff-section.page-section .section>.section-header,
#staff-section.page-section .advanced-filters>*,
#activities.page-section .container>.section-header,
#activities.page-section .advanced-filters>*,
#library.page-section .display-header,
#library.page-section .library-search-toolbar-row>*,
#library.page-section .library-search-hint {
  opacity: 0;
  transform: translateY(20px);
  animation: none;
  transition:
    opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity, transform;
}

/* Section-header / display-header → delay 0.9s (overlaps with hero tail) */
#top-students.page-section .container>.section-header,
#staff-section.page-section .section>.section-header,
#activities.page-section .container>.section-header,
#library.page-section .display-header {
  transition-delay: 0.9s, 0.9s;
}

/* Library container shells: keep wrappers hidden too, so toolbar background
   does not appear early before child stagger starts. Opacity-only to avoid
   nested translate jitter on inner cells. */
#library.page-section .library-discovery,
#library.page-section .library-search-toolbar-row {
  opacity: 0;
  animation: none;
  transition: opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity;
}

#library.page-section .library-discovery {
  transition-delay: 1s;
}

#library.page-section .library-search-toolbar-row {
  transition-delay: 1.05s;
}

/* First child of advanced-filters (usually .search-container) → delay 1.1s */
#top-students.page-section .advanced-filters>*:nth-child(1),
#staff-section.page-section .advanced-filters>*:nth-child(1),
#activities.page-section .advanced-filters>*:nth-child(1) {
  transition-delay: 1.1s, 1.1s;
}

/* Second child (usually .unified-filters-bar / .unified-filters-row) → delay 1.3s */
#top-students.page-section .advanced-filters>*:nth-child(2),
#staff-section.page-section .advanced-filters>*:nth-child(2),
#activities.page-section .advanced-filters>*:nth-child(2) {
  transition-delay: 1.3s, 1.3s;
}

/* Library: toolbar internals should reveal as ONE coherent group
   (search + dropdowns + reset together), matching other pages' filter bar feel. */
#library.page-section .library-search-toolbar-row>* {
  transition-delay: 1.2s, 1.2s;
}

/* Library reset button: page CSS defines its own `transition` (without opacity),
   which can make it pop in abruptly. Reassert a full transition list here at
   higher specificity so it follows the same entrance rhythm as the toolbar. */
#library.page-section .library-search-toolbar-row>.unified-reset-btn.circular {
  transition:
    opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.7s cubic-bezier(0.33, 1, 0.68, 1),
    background 0.35s ease,
    box-shadow 0.35s ease,
    color 0.35s ease;
  transition-delay: 1.2s, 1.2s, 0s, 0s, 0s;
}

/* Library: search-hint (below toolbar) → delay 1.5s */
#library.page-section .library-search-hint {
  transition-delay: 1.5s, 1.5s;
}

/* Revealed state (section.active + .hero-revealed) */
#top-students.page-section.active.hero-revealed .container>.section-header,
#top-students.page-section.active.hero-revealed .advanced-filters>*,
#staff-section.page-section.active.hero-revealed .section>.section-header,
#staff-section.page-section.active.hero-revealed .advanced-filters>*,
#activities.page-section.active.hero-revealed .container>.section-header,
#activities.page-section.active.hero-revealed .advanced-filters>*,
#library.page-section.active.hero-revealed .display-header,
#library.page-section.active.hero-revealed .library-discovery,
#library.page-section.active.hero-revealed .library-search-toolbar-row,
#library.page-section.active.hero-revealed .library-search-toolbar-row>*,
#library.page-section.active.hero-revealed .library-search-hint {
  opacity: 1;
  transform: translateY(0);
}

/* Suppress entrance while the global loader is still up so the cascade
   plays fresh from a clean baseline (mirror of the hero's is-loading rule). */
body.is-loading .page-section .advanced-filters>*,
body.is-loading .page-section .library-search-toolbar-row>*,
body.is-loading .page-section .library-search-hint,
body.is-loading #top-students.page-section .container>.section-header,
body.is-loading #staff-section.page-section .section>.section-header,
body.is-loading #activities.page-section .container>.section-header,
body.is-loading #library.page-section .display-header,
body.is-loading #library.page-section .library-discovery,
body.is-loading #library.page-section .library-search-toolbar-row {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: none !important;
}

/* Reduced motion: reveal instantly */
@media (prefers-reduced-motion: reduce) {

  #top-students.page-section .container>.section-header,
  #top-students.page-section .advanced-filters>*,
  #staff-section.page-section .section>.section-header,
  #staff-section.page-section .advanced-filters>*,
  #activities.page-section .container>.section-header,
  #activities.page-section .advanced-filters>*,
  #library.page-section .display-header,
  #library.page-section .library-discovery,
  #library.page-section .library-search-toolbar-row,
  #library.page-section .library-search-toolbar-row>*,
  #library.page-section .library-search-hint {
    transition: none !important;
    transition-delay: 0s !important;
  }

  #top-students.page-section.active .container>.section-header,
  #top-students.page-section.active .advanced-filters>*,
  #staff-section.page-section.active .section>.section-header,
  #staff-section.page-section.active .advanced-filters>*,
  #activities.page-section.active .container>.section-header,
  #activities.page-section.active .advanced-filters>*,
  #library.page-section.active .display-header,
  #library.page-section.active .library-discovery,
  #library.page-section.active .library-search-toolbar-row,
  #library.page-section.active .library-search-toolbar-row>*,
  #library.page-section.active .library-search-hint {
    opacity: 1;
    transform: none;
  }
}

/*
 * ───────────────────────────────────────────────────────────────────────────
 * الرئيسية ≤991px — طبقة الديكور (دوائر + pseudo البانر)
 * ───────────────────────────────────────────────────────────────────────────
 * هذه العناصر position:absolute لكن ظهورها يُعيد تفعيل مساراً للرسم/التخطيط
 * في بعض WebKit/Chromium فيُنشأ فراغ رأسي تحت الهيرو قبل «من نحن».
 * الحل المعتمد: إخفاء الديكور فقط على الشاشات الصغيرة؛ المحتوى لا يتأثر.
 * محددات صريحة (بدون [class*=]) + هذا الملف يُحمّل بعد hero.css لضمان الأولوية.
 * ───────────────────────────────────────────────────────────────────────────
 */
@media (max-width: 991px) {
  #home #hero-section .main-floating-circle-1,
  #home #hero-section .main-floating-circle-2,
  #home #hero-section .main-floating-circle-3,
  #home #hero-section .main-floating-circle-4,
  #home #hero-section .main-floating-circle-5,
  #home #about-us-section .welcome-floating-circle-1,
  #home #about-us-section .welcome-floating-circle-2,
  #home #about-us-section .about-section-circle-1,
  #home #about-us-section .about-section-circle-2,
  #home #about-us-section .about-section-circle-3,
  #home #about-us-section .about-section-circle-4 {
    display: none !important;
  }

  #home #hero-section .main-banner::before,
  #home #hero-section .main-banner::after {
    content: none !important;
    animation: none !important;
  }
}