/* ============================================================
   Hero Banner text overlay
   ------------------------------------------------------------
   Purely ADDITIVE: none of these class names exist anywhere
   else in the theme, so nothing already on the site is touched
   or overridden. This block only renders in the markup when an
   admin has actually filled in a heading/subheading/description/
   button for a slide - otherwise the homepage is unchanged.
   Colors match the site's premium palette (charcoal + deep red,
   gold used only as a subtle accent touch).
   ============================================================ */

.hero-text-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  z-index: 5;
  pointer-events: none; /* let clicks pass through except on buttons */
}

.hero-text-overlay .hero-text-inner {
  max-width: 640px;
  margin: 0 5%;
  padding: 24px 28px;
  background: rgba(18, 24, 31, 0.55);
  border-radius: 10px;
  color: #ffffff;
  pointer-events: auto;
}

.hero-text-overlay .hero-subheading {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #E4B8B8;
  margin-bottom: 8px;
}

.hero-text-overlay .hero-heading {
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 12px;
}

.hero-text-overlay .hero-description {
  font-size: 16px;
  line-height: 1.6;
  color: #E9E9E9;
  margin-bottom: 18px;
}

.hero-text-overlay .hero-btn-group a {
  display: inline-block;
  padding: 11px 26px;
  margin: 0 10px 10px 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all .3s ease;
}

.hero-text-overlay .hero-btn-primary {
  background: #8B1A1A;
  color: #ffffff;
}

.hero-text-overlay .hero-btn-primary:hover {
  background: #A93226;
  color: #ffffff;
}

.hero-text-overlay .hero-btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.hero-text-overlay .hero-btn-secondary:hover {
  background: #ffffff;
  color: #8B1A1A;
}

@media (max-width: 767px) {
  .hero-text-overlay .hero-text-inner {
    margin: 0 4%;
    padding: 16px 18px;
  }
  .hero-text-overlay .hero-description {
    font-size: 14px;
  }
}