/* Responsive adjustments and variables */
:root{
  --hero-overlay-opacity: 0.45; /* default overlay opacity */
  --hero-min-height: 60vh;
  --hero-text-max-width: 720px;
}

/* account for fixed navbar height so page content isn't hidden behind it */
body { padding-top: 64px; }

@media (max-width: 575.98px) {
  body { padding-top: 56px; }
}

/* Hero styling */
#hero{
  min-height: var(--hero-min-height);
  display:block;
}
#hero > div{ /* overlay removed for readability on white background */
  background: transparent;
}
#hero .lead{font-size:1.125rem}

/* Highlight carousel image sizing - responsive */
.highlight-img{ object-fit:cover; width:100%; height:420px; }

/* New hero specific styles */
.hero{ background-size: cover; background-position: center; position: relative; }
.hero-overlay{ position:absolute; inset:0; /* subtle gradient to preserve full image visibility */
  background: linear-gradient(to bottom right, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.28) 70%);
  pointer-events: none;
}
.hero .container{ position:relative; z-index: 2; }
/* constrain overlay caption to a max width that matches page container flow so it lines up with other .container sections */
.hero-caption{ /* let the bootstrap column control width so it lines up with other .container content */
  max-width: none; width:100%; background: rgba(0,0,0,0.45); padding:28px 30px; border-radius:4px; box-sizing: border-box;
}
.hero .container, .hero .container-fluid{ position:relative; z-index: 2; }
.hero-bottom-bar{ position: relative; }

/* On smaller screens reduce hero height and increase overlay for readability */
@media (max-width: 767.98px){
  :root{ --hero-min-height: 40vh; --hero-overlay-opacity: 0.55; }
  #hero .container{ padding-top:2rem; padding-bottom:2rem; }
  .hero-caption{ position: static; transform: none; padding:16px; }
  .highlight-img{ height:260px; }
}

@media (min-width: 768px) and (max-width: 1199.98px){
  :root{ --hero-min-height:50vh; }
  .highlight-img{ height:360px; }
}

/* Highlight card spacing tweaks */
.card.mb-4{ overflow: hidden; }
.card-body h3{ margin-top:0; }

/* Unit listing cards – uniform height so all cards align */
.unit-card{ height:180px; overflow:hidden; }
.unit-card .row{ height:100%; }
.unit-card .col-4{ overflow:hidden; display:flex; align-items:center; justify-content:center; background:#e9ecef; height:100%; }
.unit-thumb{ object-fit:cover; width:100%; height:100%; display:block; }
/* default SVG placeholder: scale down to fit nicely */
.unit-card .col-4 img[src$=".svg"]{ object-fit:contain; padding:10px; height:100%; }
/* keep card-body content compact so it fits */
.unit-card .card-body{ padding:10px 14px; }
.unit-card .card-body h5{ margin-bottom:4px; font-size:1rem; }
.unit-card .card-body p{ margin-bottom:6px; font-size:0.875rem; }

/* Make thumbnails and controls touch-friendly */
.carousel-control-prev, .carousel-control-next{ width:4rem; }