/* St. Xavier's Technical Institute — Hero slider
   Any image size works: the photo is shown whole (never cropped) over a blurred copy of itself.
   Want edge-to-edge cropping instead? Change --hero-fit to cover. */
.hero{
  --hero-fit:contain;
  --burgundy:#8B1E2D;--red:#C62828;--orange:#F57C00;--gold:#F4B942;--charcoal:#292929;
  position:relative;width:100%;height:clamp(280px,42vw,680px);overflow:hidden;
  background:var(--charcoal);border-bottom:5px solid var(--gold);
  font-family:'Alegreya Sans','Segoe UI',Arial,sans-serif;
}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.hero-slide.is-active{opacity:1;visibility:visible;transition-delay:0s}
.hero-bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(26px) brightness(.7);}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--hero-fit);object-position:center}

.hero-nav{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;background:var(--burgundy);color:#fff;font-size:1.3rem;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.35);transition:background .2s}
.hero-nav:hover{background:var(--red)}
.hero-prev{left:16px}.hero-next{right:16px}
.hero-dots{position:absolute;z-index:3;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:10px}
.hero-dot{width:12px;height:12px;padding:0;border:2px solid #fff;border-radius:50%;background:transparent;cursor:pointer;transition:all .25s}
.hero-dot[aria-current="true"]{width:34px;border-radius:12px;background:var(--gold);border-color:var(--gold)}
.hero :focus-visible{outline:3px solid var(--gold);outline-offset:2px}

@media (max-width:700px){
  .hero{height:72vw;min-height:250px}
  .hero-nav{width:38px;height:38px;font-size:1.1rem}.hero-prev{left:8px}.hero-next{right:8px}
}
@media (prefers-reduced-motion:reduce){.hero-slide{transition-duration:.01ms}}