/* Offset the page so content isn't hidden under the fixed navbar */
:root { --nav-height: 72px; }

body { padding-top: var(--nav-height); }

/* Slightly taller on large screens (optional) */
@media (min-width: 992px){
  :root { --nav-height: 80px; }
}

/* Keep the navbar above the carousel controls/captions */
.navbar.fixed-top,
.navbar.sticky-top {
  z-index: 1050;
}


/* Navbar offset */
body { padding-top: 72px; }

/* Card images */
.card-img-top { aspect-ratio: 16/9; object-fit: cover; }

/* ===== HERO (Bootstrap Carousel) ===== */
.hero-carousel { position: relative; overflow: hidden; }
.hero-carousel .carousel-item { position: relative; }
.hero-carousel .carousel-item img {
  display:block; width:100%;
  height:56vh; object-fit:cover;
}
@media (min-width: 992px){
  .hero-carousel .carousel-item img { height:70vh; }
}

/* Caption overlay */
.hero-caption{
  position:absolute; left:50%; bottom:10%;
  transform:translateX(-50%);
  z-index:3;
  max-width: 960px;
  width: calc(100% - 2rem);
  text-align:center; color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
  background: rgba(0,0,0,.35);
  padding: .85rem 1rem;
  border-radius: .5rem;
}

/* A transparent overlay layer (for subtle dim) – must not eat clicks */
.hero-carousel .carousel-item::after{
  content:""; position:absolute; inset:0;
  background: transparent;   /* or rgba(0,0,0,.15) if you want a dim */
  z-index:2; pointer-events:none;
}

/* Make sure controls are on top and clickable */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next { z-index: 5; }