/* ==========================================================================
   Hero Banner Variables & Base Architecture
   ========================================================================== */
:root {
  --hero-aspect-ratio: 16 / 5; /* Forces the banner to remain perfectly cinematic */
  --dusk-blue: #2b4c7e;
}

.hero-banner-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-aspect-ratio);
  background-color: #000000; /* Fallback baseline frame protection */
  overflow: hidden;
}

/* --- LAYER 1: CAROUSEL ENGINE --- */
.hero-carousel {
  position: absolute;
  inset: 0; /* Shorthand for top:0, left:0, right:0, bottom:0 */
  z-index: 1;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out; /* Smooth fade crossover animation */
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Guarantees layout frames scale cleanly without squeezing */
  filter: brightness(95%); /* Clean baseline tone for white layout details readability */
}

/* --- LAYER 2: DECOUPLED FOREGROUND OVERLAY --- */
.hero-overlay-content {
  position: absolute;
  inset: 0;
  z-index: 10; /* Completely isolated stacking layer safely over background image cards */
  pointer-events: none; /* Allows clicks to pass through transparent zones */
  display: flex;
  flex-direction: column;
}

/* Branding Logo Rules (Desktop Baseline) */
.hero-branding-logo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(160px, 22vw, 280px);
  padding-left: clamp(16px, 4vw, 36px);
  padding-bottom: clamp(20px, 4vw, 44px);
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.3));
}

/* Title Layout Container */
.hero-title-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: clamp(20px, 4vw, 44px);
  text-align: center;
}

.hero-main-title {
  margin: 0;
  font-family: "EB Garamond", serif;
  color: #ffffff;
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Responsive Breakpoint Rules
   ========================================================================== */

/* Tablet & Mobile Scale Adaptations (Below 992px) */
@media (max-width: 992px) {
  :root {
    --hero-aspect-ratio: 16 / 7; /* Adjusts ratio taller on smaller displays */
  }
}

/* Strict Phone Viewport Centering Constraints (Below 600px) */
@media (max-width: 600px) {
  :root {
    --hero-aspect-ratio: 4 / 3; /* Taller viewport container context for vertical phone hold */
  }

  /* Hide the banner title typography cleanly on tiny mobile grids */
  .hero-title-container {
    display: none !important;
  }

  /* Pivot the branding logo to absolute dead center layout status */
  .hero-branding-logo {
    opacity: 70%;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    padding-left: 0;
    padding-bottom: 0;
    width: clamp(200px, 60vw, 300px);
    filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.65));
  }
}