/* ========================================
   MODERN SLIDER STYLES
   Lightweight, responsive slider with smooth animations
   ======================================== */

.modern-slider {
  position: relative;
  width: 100%;
  max-width: 99%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.slider-container {
  /* Single source of truth for slider aspect across the whole site
     (home hero, faculty pages, library, banner-tabber, etc).
     1800×570 = 60:19 ≈ 3.16:1 — same spec we publish in the admin
     form so admin uploads land at the exact ratio. Tester's complaint:
     "make sure all sliders have the same aspect ratio" — addressed
     here by replacing the legacy fixed 400px height with an
     aspect-ratio + min/max-height pair. */
  position: relative;
  width: 100%;
  aspect-ratio: 60 / 19;
  height: auto;
  min-height: 240px;
  max-height: 600px;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
  /* Force LTR flow inside the track even on RTL pages so the
     `translateX(-N * 100%)` autoplay math in modern-slider.js works
     the same way on both languages. Without this, AR pages with
     `dir="rtl"` reverse the flex order and the negative translate
     moves the track off-screen instead of revealing slide [N]. */
  direction: ltr;
}

.slider-slide {
  flex: 0 0 100%;
  position: relative;
  height: 100%;
  min-width: 100%;
}

.slider-slide img {
  width: 100%;
  height: 100%;
  /* Fill the container with no letterbox. Container aspect is 60:19
     (1800×570) — admin uploads at that size will display without any
     crop. Off-spec images get a slight edge crop rather than the
     letterbox bands tester flagged. The "show whole image AND no
     letterbox" combination is only possible if the image already
     matches the container aspect, which is why we publish the
     1800×570 spec in the admin form. */
  object-fit: cover;
  object-position: center;
  display: block;
}

.slider-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: var(--white);
  padding: 2rem;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.slider-slide:hover .slider-content {
  transform: translateY(0);
}

.slider-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--white);
}

.slider-description {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.4;
}

/* Navigation Controls */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  /* Same lock-down treatment as the indicators: explicit dims with
     !important + aspect-ratio so the arrow stays a clean circle on
     every viewport. */
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 50px !important;
  padding: 0 !important;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #333;
  transition: all 0.3s ease;
  z-index: 10;
}

.slider-nav:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
}

.slider-nav.prev {
  left: 20px;
}

.slider-nav.next {
  right: 20px;
}

.slider-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: translateY(-50%) scale(0.9);
}

/* RTL: swap prev/next position AND flip the chevron icons so "previous"
   points back in the reading direction (right) and "next" points
   forward in the reading direction (left). */
[dir="rtl"] .slider-nav.prev,
html[lang="ar"] .slider-nav.prev {
  left: auto;
  right: 20px;
}
[dir="rtl"] .slider-nav.next,
html[lang="ar"] .slider-nav.next {
  right: auto;
  left: 20px;
}
[dir="rtl"] .slider-nav i,
html[lang="ar"] .slider-nav i {
  transform: scaleX(-1);
}
[dir="rtl"] .slider-autoplay,
html[lang="ar"] .slider-autoplay {
  right: auto;
  left: 20px;
}

/* Indicators */
.slider-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.slider-indicator {
  /* Hard-lock dimensions with !important so nothing — Bootstrap
     button resets, browser default form controls, parent flex
     stretch, an inline JS style — can morph the dot into an oval.
     Tester reports show vertical ovals despite the base rule;
     blanketing with !important pins it down. */
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  flex: 0 0 12px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
}

.slider-indicator.active {
  background: white;
  transform: scale(1.2);
}

.slider-indicator:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Auto-play indicator */
.slider-autoplay {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.slider-autoplay:hover {
  background: rgba(0, 0, 0, 0.7);
}

.slider-autoplay.paused {
  background: rgba(255, 255, 255, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .slider-container {
    /* Honour the 60:19 aspect — no more pixel overrides. The
       min-height: 240px (set on the base rule) keeps it usable on
       narrow phones where 60:19 would compute to ~120px. */
    min-height: 220px;
  }

  .slider-nav {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .slider-nav.prev {
    left: 10px;
  }

  .slider-nav.next {
    right: 10px;
  }

  .slider-content {
    padding: 1.5rem;
  }

  .slider-title {
    font-size: 1.2rem;
  }

  .slider-description {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .slider-container {
    /* Smallest phones: same 60:19 aspect, slightly lower min-height
       so the slider doesn't dominate the first screen. */
    min-height: 180px;
  }

  .slider-nav {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }

  .slider-content {
    padding: 1rem;
  }

  .slider-title {
    font-size: 1.1rem;
  }

  .slider-description {
    font-size: 0.8rem;
  }
}

/* RTL Support */
[dir="rtl"] .slider-nav.prev {
  left: auto;
  right: 20px;
}

[dir="rtl"] .slider-nav.next {
  right: auto;
  left: 20px;
}

[dir="rtl"] .slider-autoplay {
  right: auto;
  left: 20px;
}

/* Animation classes */
.slider-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility */
.slider-nav:focus,
.slider-indicator:focus,
.slider-autoplay:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .slider-nav,
  .slider-indicators,
  .slider-autoplay {
    display: none;
  }

  .slider-container {
    height: auto;
  }

  .slider-slide {
    page-break-inside: avoid;
  }
}

/* ========================================
   BACKWARD COMPATIBILITY FOR BJQS CLASSES
   These rules ensure old BJQS class references continue to work
   ======================================== */

/* Legacy BJQS wrapper compatibility */
.bjqs-wrapper,
.bjqs {
  /* These will be converted to .modern-slider by JavaScript */
  position: relative;
  width: 100%;
  overflow: hidden;
}

.bjqs-slide {
  /* Legacy slide class - will be converted to .slider-slide */
  position: relative;
  width: 100%;
}

.bjqs-markers {
  /* Legacy markers - will be replaced by .slider-indicators */
  display: none; /* Hidden since modern slider handles this */
}

.bjqs-prev,
.bjqs-next {
  /* Legacy navigation - will be replaced by .slider-nav */
  display: none; /* Hidden since modern slider handles this */
}

.bjqs-caption {
  /* Legacy caption - will be replaced by .slider-content */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 1rem;
}

/* Legacy banner slide IDs */
#banner-slide,
#legacy-banner-slide-promo,
[id^="legacy-banner-slide"] {
  /* These will be converted to modern sliders by JavaScript */
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* Ensure legacy slider lists are properly styled during conversion */
#banner-slide ul,
[id^="legacy-banner-slide"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
}

#banner-slide li,
[id^="legacy-banner-slide"] li {
  flex: 0 0 100%;
  position: relative;
  width: 100%;
}

#banner-slide img,
[id^="legacy-banner-slide"] img {
  width: 100%;
  height: auto;
  display: block;
}

/* Oxford-style caption compatibility */
.oxford-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 2rem;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

/* Show captions on hover for backward compatibility */
.bjqs-slide:hover .oxford-caption,
.slider-slide:hover .oxford-caption {
  transform: translateY(0);
}

/* Custom slider navigation compatibility */
.custom-slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
  z-index: 10;
}

.custom-slider-nav button {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #333;
  transition: all 0.3s ease;
}

.custom-slider-nav button:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

/* Hero carousel compatibility */
.hero-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-carousel .modern-slider {
  border-radius: 0; /* Remove border radius for hero sliders */
}

/* Home hero banner: 4:1 responsive aspect, full-bleed.
   Scoped to .home-hero-banner so it does NOT affect faculty pages,
   banner-tabber pages, or any other place .modern-slider appears. */
.home-hero-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.home-hero-banner .modern-slider {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.home-hero-banner .slider-container {
  /* BUG-033: tester's canonical slider size is 1800×570 (60:19 ≈ 3.16:1).
     Was 4/1 before, which forced 1800×570 admin images to letterbox/crop
     and made the home + inner-page sliders inconsistent. Now both honour
     the source aspect.
     min-height keeps the banner usable on tiny phones (≤320px wide).
     max-height keeps it from stealing the entire 4K viewport. */
  height: auto;
  aspect-ratio: 60 / 19;
  min-height: 240px;
  max-height: 600px;
}
/* Always-visible caption on home (no hover on touch devices). */
.home-hero-banner .slider-content {
  transform: translateY(0);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  padding: 1.25rem 2rem;
}
.home-hero-banner .slider-title {
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  margin-bottom: 0.25rem;
}
.home-hero-banner .slider-description {
  font-size: clamp(0.85rem, 1.4vw, 1rem);
}
@media (max-width: 768px) {
  .home-hero-banner .slider-content {
    padding: 0.75rem 1rem;
  }
}
/* Fallback when no promoted slider is configured */
.home-hero-banner--fallback {
  aspect-ratio: 60 / 19;
  min-height: 240px;
  max-height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: auto;
  display: block;
  position: relative;
}

/* Welcome overlay — sits ON TOP of slide [0]'s image with a translucent
   teal scrim so the image stays visible behind the bilingual title +
   tagline + Apply Now / Discover More buttons. */
.hero-welcome-slide {
  position: relative;
}
.hero-welcome-slide__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(var(--jinan-teal-rgb, 0, 132, 110), 0.55) 0%,
    rgba(var(--jinan-teal-rgb, 0, 132, 110), 0.35) 100%
  );
  color: var(--white, #ffffff);
  z-index: 2;
}
.hero-welcome-slide__title {
  font-family: var(--font-headings, "Zalando Sans Expanded", "RH Zak", "Tajawal", Georgia, sans-serif);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--white, #ffffff);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  line-height: 1.15;
}
html[lang="ar"] .hero-welcome-slide__title {
  font-family: "RH Zak", "Tajawal", "Zalando Sans Expanded", sans-serif;
  font-weight: 800;
}
.hero-welcome-slide__tagline {
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  margin: 0 auto 1.25rem;
  max-width: 720px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.hero-welcome-slide__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-welcome-slide__actions .btn-outline-light {
  color: var(--white, #ffffff);
  border-color: rgba(255, 255, 255, 0.85);
  background: transparent;
}
.hero-welcome-slide__actions .btn-outline-light:hover,
.hero-welcome-slide__actions .btn-outline-light:focus-visible {
  background: var(--white, #ffffff);
  color: var(--jinan-teal, #00846e);
  border-color: var(--white, #ffffff);
}
@media (max-width: 768px) {
  .hero-welcome-slide__overlay {
    padding: 1rem;
  }
  .hero-welcome-slide__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 280px;
  }
}

/* Responsive compatibility for legacy sizes */
@media (max-width: 980px) {
  .bjqs-wrapper,
  .bjqs,
  #banner-slide,
  [id^="legacy-banner-slide"] {
    max-width: 100%;
  }
}

/* Loading state for converting sliders */
.bjqs.converting,
#banner-slide.converting,
[id^="legacy-banner-slide"].converting {
  opacity: 0.5;
  pointer-events: none;
}

.bjqs.converting::after,
#banner-slide.converting::after,
[id^="legacy-banner-slide"].converting::after {
  content: "Loading modern slider...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1rem 2rem;
  border-radius: 4px;
  font-size: 0.9rem;
  z-index: 1000;
}