/* =========================================================================
   Al Duffa — Campus popup gallery slider
   -------------------------------------------------------------------------
   Full-screen, auto-playing photo slider opened from a campus tile (see
   widgets/aidh/class-aidh-campus-widget.php + assets/js/aidh-campus-lightbox.js).
   Cross-fade + slow Ken Burns zoom on the photo, serif title / body
   description caption, dot + arrow navigation, autoplay progress bar.
========================================================================= */

html.ald-lb-open,
html.ald-lb-open body { overflow: hidden; height: 100%; }

.ald-campus__slot.has-gallery { cursor: zoom-in; }
.ald-campus__slot.has-gallery:focus-visible { outline: 3px solid #D4A73A; outline-offset: -3px; }

/* In-place tile slider crossfade (see aidh-campus-lightbox.js initTileSliders) */
.slot.has-gallery,
.ald-campus__slot.has-gallery { transition: opacity .35s ease; }
.slot.has-gallery img,
.ald-campus__slot.has-gallery img { transition: opacity .35s ease; }
.slot.has-gallery.is-fading,
.ald-campus__slot.has-gallery.is-fading { opacity: .4; }

.ald-campus__slot-zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(9, 36, 52, .45);
  backdrop-filter: blur(3px);
  color: #fff;
  opacity: 0;
  transform: translateY(-6px) scale(.9);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.ald-campus__slot-zoom svg { width: 17px; height: 17px; }
.ald-campus__slot.has-gallery:hover .ald-campus__slot-zoom,
.ald-campus__slot.has-gallery:focus-visible .ald-campus__slot-zoom {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ------------------------------------------------------------- Overlay */
.ald-lb {
  --ald-lb-navy: #092434;
  --ald-lb-gold: #D4A73A;
  --ald-lb-teal: #1F8A8A;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .5s;
  font-family: var(--f-body, "DM Sans", sans-serif);
}
.ald-lb.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s;
}
.ald-lb__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(20, 54, 73, .97) 0%, rgba(6, 18, 26, .99) 70%);
}

/* --------------------------------------------------------------- Stage */
.ald-lb__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}
.ald-lb__track { position: absolute; inset: 0; }

.ald-lb__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.15s ease, visibility 0s linear 1.15s;
  z-index: 1;
}
.ald-lb__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.15s ease, visibility 0s linear 0s;
  z-index: 2;
}
.ald-lb__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 1.15s ease;
}
/* Slow continuous Ken Burns zoom, alternating direction per slide so
   consecutive photos don't all "breathe" identically. */
.ald-lb__slide.is-active img { animation: aldKenBurnsIn 8.5s ease-out forwards; }
.ald-lb__slide.is-active:nth-child(even) img { animation-name: aldKenBurnsOut; }
@keyframes aldKenBurnsIn {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.2%, -1%); }
}
@keyframes aldKenBurnsOut {
  from { transform: scale(1.14) translate(1.2%, 1%); }
  to   { transform: scale(1.02) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ald-lb__slide.is-active img { animation: none; }
}

/* Bottom gradient wash so the caption always reads. */
.ald-lb__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,18,26,0) 45%, rgba(6,18,26,.55) 78%, rgba(6,18,26,.9) 100%);
}

/* --------------------------------------------------------- Close / nav */
.ald-lb__close,
.ald-lb__nav {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(9, 36, 52, .4);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.ald-lb__close:hover,
.ald-lb__nav:hover { background: rgba(212, 167, 58, .9); border-color: transparent; color: var(--ald-lb-navy); }
.ald-lb__close:focus-visible,
.ald-lb__nav:focus-visible { outline: 2px solid var(--ald-lb-gold); outline-offset: 2px; }

.ald-lb__close {
  top: 20px;
  inset-inline-end: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}

.ald-lb__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.ald-lb__nav svg { width: 22px; height: 22px; }
.ald-lb__nav:hover { transform: translateY(-50%) scale(1.06); }
.ald-lb__nav--prev { inset-inline-start: 18px; }
.ald-lb__nav--next { inset-inline-end: 18px; }
html[dir="rtl"] .ald-lb__nav svg { transform: scaleX(-1); }

@media (max-width: 640px) {
  .ald-lb__nav { width: 40px; height: 40px; }
  .ald-lb__nav svg { width: 18px; height: 18px; }
  .ald-lb__close { width: 38px; height: 38px; font-size: 22px; top: 12px; inset-inline-end: 12px; }
}

/* --------------------------------------------------------------- Foot */
.ald-lb__foot {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(20px, 6vw, 80px) clamp(22px, 4vw, 40px);
  margin-top: -110px;
}
.ald-lb__cap {
  max-width: 720px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.ald-lb__cap.is-in { opacity: 1; transform: translateY(0); }
.ald-lb__count {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ald-lb-gold);
  margin-bottom: 8px;
}
.ald-lb__title {
  margin: 0 0 8px;
  font-family: var(--f-heading, "DM Serif Display", serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.ald-lb__desc {
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}

/* ------------------------------------------------------------- Dots */
.ald-lb__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  max-width: 40vw;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ald-lb__dots::-webkit-scrollbar { display: none; }
.ald-lb__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 0;
  transition: width .35s cubic-bezier(.16,1,.3,1), background .25s ease;
}
.ald-lb__dot:hover { background: rgba(255,255,255,.6); }
.ald-lb__dot.is-active { width: 26px; background: var(--ald-lb-gold); }

@media (max-width: 780px) {
  .ald-lb__foot { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: -90px; }
  .ald-lb__dots { max-width: 100%; }
}

/* --------------------------------------------------------- Progress bar */
.ald-lb__progress {
  position: relative;
  z-index: 6;
  height: 3px;
  margin: 0 clamp(20px, 6vw, 80px) clamp(16px, 3vw, 26px);
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  overflow: hidden;
}
.ald-lb__progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ald-lb-gold), var(--ald-lb-teal));
  border-radius: inherit;
}