/* =========================================================
   Home Page Hero Banner / Slider
   Admin-editable slides (see admin/banners.php), rendered
   here with a smooth animated crossfade + slide transition.
   ========================================================= */

.hero-slider{
  position:relative;
  border-radius:0 0 40px 40px;
  margin-bottom:40px;
  overflow:hidden;
  min-height:var(--hero-h, 420px);
}

.hero-slides{position:relative;min-height:var(--hero-h, 420px);}

.hero-slide{
  /* .hero-slide is now an <a> tag (whole banner is clickable to the
     admin-set link, not just the button) — reset default link styling. */
  text-decoration:none;cursor:pointer;
  /* top/right/bottom/left instead of the "inset" shorthand, plus explicit
     width/height as a safety net — some older Android WebViews / in-app
     browsers (Facebook, etc.) don't support "inset" and were collapsing
     this box down to the size of its text content, which made the photo
     look tiny and left the rest of the slider showing blank/white. */
  position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;
  background-color:var(--primary-dark,#5b21b6);
  background-image:linear-gradient(120deg,var(--primary,#7c3aed) 0%,var(--primary-dark,#5b21b6) 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:#fff;
  opacity:0;visibility:hidden;
  transform:scale(1.04);
  transition:opacity .9s ease, transform 8s ease, visibility 0s linear .9s;
  z-index:1;
}
/* Admin can switch a slide's photo to "contain" mode (Settings > Home Slider)
   so the full image is always visible instead of being cropped to fill the box. */
.hero-slider[data-fit="contain"] .hero-slide{
  background-size:contain;
}
.hero-slide.active{
  /* Stay absolute + fully stretched (top/right/bottom/left:0, set on the
     base .hero-slide rule above) so the active slide always fills the
     whole card. It used to switch to position:relative here, which made
     it shrink down to only the height of its text content instead of the
     full banner height — that's what caused the image to look tiny with
     blank white space underneath it. */
  position:absolute;
  opacity:1;visibility:visible;
  transform:scale(1);
  transition:opacity .9s ease, transform 8s ease;
  z-index:2;
}

/* dark overlay so text stays readable over photo slides */
.hero-slide::before{
  content:'';position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(120deg, rgba(31,23,66,.55) 0%, rgba(31,23,66,.25) 65%);
  z-index:1;
}
.hero-slide.no-image::before{ background:transparent; }

.hero-slide .hero-inner{
  display:flex;align-items:center;gap:40px;position:relative;z-index:2;
  padding:70px 0;width:100%;
}
.hero-slide .hero-text{flex:1;max-width:620px;}
.hero-slide .hero-text h1{
  font-size:42px;margin:0 0 14px;font-weight:700;line-height:1.15;
}
.hero-slide .hero-text p{font-size:16px;opacity:.94;margin-bottom:26px;max-width:480px;}

/* staggered entrance animation, only plays on the active slide */
.hero-slide .hero-text h1,
.hero-slide .hero-text p,
.hero-slide .hero-text a{
  opacity:0;transform:translateY(22px);
}
.hero-slide.active .hero-text h1{ animation:heroRise .7s .15s cubic-bezier(.2,.7,.3,1) forwards; }
.hero-slide.active .hero-text p{ animation:heroRise .7s .32s cubic-bezier(.2,.7,.3,1) forwards; }
.hero-slide.active .hero-text a{ animation:heroRise .7s .48s cubic-bezier(.2,.7,.3,1) forwards; }

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

.hero-slider::after{
  content:'';position:absolute;width:420px;height:420px;background:rgba(255,255,255,.07);
  border-radius:50%;top:-160px;right:-110px;pointer-events:none;z-index:1;
}

/* Prev / Next arrows */
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
  transition:background .25s ease, transform .25s ease;
}
.hero-nav:hover{background:rgba(255,255,255,.32);transform:translateY(-50%) scale(1.08);}
.hero-nav.prev{left:18px;}
.hero-nav.next{right:18px;}

/* Dots */
.hero-dots{
  position:absolute;bottom:18px;left:0;right:0;z-index:5;
  display:flex;justify-content:center;gap:8px;
}
.hero-dot{
  width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.45);padding:0;transition:all .3s ease;
}
.hero-dot.active{background:#fff;width:26px;border-radius:6px;}

/* Progress bar showing time until auto-advance */
.hero-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);z-index:5;}
.hero-progress-bar{height:100%;width:0%;background:#fff;}
.hero-progress-bar.animate{ animation:heroProgress 6s linear forwards; }
@keyframes heroProgress{ from{width:0%;} to{width:100%;} }

/* Tablet (769px - 991px) - Admin > Settings > Home Slider Size > Tablet Height */
@media (min-width:769px) and (max-width:991px){
  .hero-slider, .hero-slides{ min-height:var(--hero-h-tablet, 380px); }
  .hero-slide .hero-inner{ padding:56px 0; gap:28px; }
  .hero-slide .hero-text h1{ font-size:34px; }
}

@media (max-width:768px){
  .hero-slider, .hero-slides{ min-height:var(--hero-h-mobile, 340px); }
  .hero-slide .hero-inner{ flex-direction:column; text-align:center; padding:44px 0; gap:20px; }
  .hero-slide .hero-text h1{ font-size:28px; }
  .hero-nav{ width:34px;height:34px;font-size:16px; }
}