/* Hero module styles: large and small variants */

.vb-hero {
  position: relative;
  color: #ffffff;
  background-color: var(--comp-1);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Break out of the page container to span full viewport width */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.vb-hero .vb-hero-inner {
  position: relative;
  z-index: 1;
}

/* Large hero */
.vb-hero--large {
  padding-top: 96px;
  padding-bottom: 96px;
  /* Mobile-first height per design */
  min-height: 300px;
  display: flex;
  align-items: center;
}

/* Desktop height per design */
@media (min-width: 992px) {
  .vb-hero--large {
    min-height: 400px;
  }
  .vb-hero--large.vb-hero--mega {
    min-height: 600px;
  }
}

.vb-hero--large .vb-hero-title {
  font-family: var(--font-display, Archivo, system-ui, sans-serif);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  margin: 0 0 16px 0;
  color: #ffffff;
}

.vb-hero--large .vb-hero-text {
  max-width: 720px;
  margin: 0 auto 24px auto;
  font-size: var(--fs-body2);
  color: #ffffff;
}

/* Small hero */
.vb-hero--small {
  padding-top: 80px;
}

.vb-hero--small .vb-hero-title {
  font-family: var(--font-display, Archivo, system-ui, sans-serif);
  font-weight: 700;
  margin: 0 0 12px 0;
  color: #ffffff;
}

.vb-hero--small .vb-hero-text {
  max-width: 720px;
  font-size: var(--fs-body2);
  margin: 0 auto 24px auto;
  color: #ffffff;
}

/* Shared CTA styling hook (uses existing Bootstrap/button tokens) */
.vb-hero .vb-hero-cta {
  display: inline-block;
}

/* Optional gradient overlay */
.vb-hero.has-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(82.15% 66.91% at 50% 0%, rgba(217, 217, 217, 0) 0%, rgba(0, 0, 0, 0.7) 98.56%);
  z-index: 0;
}

/* CTA button style per tokens */
.vb-hero .btn-hero-light {
  --bs-btn-bg: var(--brand-blue-light);
  --bs-btn-border-color: var(--brand-blue-light);
  --bs-btn-color: var(--grey-dark);
  --bs-btn-hover-bg: var(--brand-blue-light);
  --bs-btn-hover-border-color: var(--brand-blue-light);
  /* Typography and sizing per design */
  font-family: var(--font-sans-1);
  font-weight: var(--w-medium);
  --bs-btn-font-size: var(--fs-body1);
  --bs-btn-line-height: 24px;
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 32px;
  --bs-btn-border-radius: 4px;
  min-width: 142px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0;
}

/* Small variant: image below with fixed height 460px */
.vb-hero--small + .vb-hero-image-below,
.vb-hero .vb-hero-image-below {
  display: block;
  width: 100dvw;
  max-width: 100dvw;
  height: 469px;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);
  aspect-ratio: 4 / 3; /* responsive 4:3 image area */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Space to button above per design */
  margin-top: 80px;
}

/* If a plain <img> is used inside, make it cover full width/height */
.vb-hero-image-below img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}