/* Custom overrides: reduced banner height while preserving animation and responsiveness */

/* Scope: only home banner */
.banner--reduced {
  position: relative;
  height: auto !important; /* break the global 100% height chain at root */
  min-height: 76vh; /* show part of next section */
  /* padding-bottom: 10px; /* small glimpse of next section */
}

/* Break the 100% height chain only on structural wrappers; keep original layout */
.banner--reduced > .item,
.banner--reduced .box-table,
.banner--reduced .box-cell {
  height: auto !important;
  min-height: inherit;
}

/* Ensure animation container isn't collapsed */
.banner--reduced #home-animation-wrapper {
  height: auto !important; /* don't force 100vh */
  min-height: 76vh; /* match banner so absolute SVG has room */
  opacity: 1; /* allow JS to fade; safe default */
  visibility: visible;
}

/* Make SVG responsive without relying on fixed 100% heights */
.banner--reduced #home-animation {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Responsive tuning */
@media (max-width: 1199.98px) {
  .banner--reduced { min-height: 70vh; }
  .banner--reduced #home-animation-wrapper { min-height: 70vh; }
}

@media (max-width: 991.98px) {
  .banner--reduced { min-height: 62vh; }
  .banner--reduced #home-animation-wrapper { min-height: 62vh; }
}

@media (max-width: 767.98px) {
  .banner--reduced {
    min-height: 60vh; /* Maintain a visible height */
  }
  .banner--reduced #home-animation-wrapper {
    min-height: 60vh;
  }
}