/* ==========================================================================
   Hero Component (mc-hero)
   ========================================================================== */

.mc-hero {
  position: relative;
  width: 100%;
  background-color: #0f172a;
  color: #ffffff;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Sizes */
.mc-hero--sm { padding: 100px 0 50px; }
.mc-hero--md { padding: 160px 0 90px; }
.mc-hero--lg { padding: 200px 0 100px; min-height: 480px; }

/* Overlays */
.mc-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mc-hero__overlay--dark {
  background: rgba(15, 23, 42, 0.75);
}

.mc-hero__overlay--gradient {
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.mc-hero__overlay--light {
  background: rgba(255, 255, 255, 0.85);
}

.mc-hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

/* Alignments */
.mc-hero--align-center .mc-hero__content {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mc-hero--align-left .mc-hero__content {
  margin-right: auto;
  text-align: left;
}

.mc-hero--align-right .mc-hero__content {
  margin-left: auto;
  text-align: right;
}

.mc-hero__badge {
  margin-bottom: 16px;
  display: inline-block;
}

.mc-hero__title {
  font-size: clamp(26px, 4.5vw, 44px);
  font-weight: 800;
  line-height: 1.25;
  color: inherit;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.mc-hero__subtitle {
  font-size: clamp(14.5px, 1.8vw, 17px);
  line-height: 1.6;
  opacity: 0.85;
  color: inherit;
  margin: 0 0 24px;
}

.mc-hero__slot {
  margin-top: 24px;
}

.mc-hero__breadcrumbs {
  margin-bottom: 24px;
}

/* Ensure breadcrumbs inherit color properly when inside hero */
.mc-hero .mc-breadcrumbs {
  color: inherit;
  opacity: 0.8;
}

/* .mc-hero .mc-breadcrumbs__link {
  color: inherit;
} */

.mc-hero .mc-breadcrumbs__link:hover {
  color: #fff;
  opacity: 1;
}

.mc-hero .mc-breadcrumbs__item.is-active .mc-breadcrumbs__text {
  color: inherit;
  font-weight: 600;
  opacity: 1;
}

.mc-hero__overlay--light ~ .mc-container .mc-breadcrumbs {
  color: #333;
}
.mc-hero__overlay--light ~ .mc-container .mc-breadcrumbs__link:hover {
  color: var(--mc-primary-color, #007bff);
}