/* ============================================================
   Homepage V3 — Dark Textured Hero Module
   Extends homepage-v2.css with dark hero overrides
   ============================================================ */

/* --- HERO MODULE WRAPPER — dark textured background --- */
.hv3-hero-module {
  background: #2d3748 url('../img/pattern-bg.webp') no-repeat center center;
  background-size: cover;
  padding-bottom: 40px;
}

/* Hero layout stays the same, just color overrides */
.hv3-hero-module .hv2-hero-sidebar h1,
.hv3-hero-module .hv2-hero-sidebar h1 {
  color: #ffffff !important;
}

.hv3-hero-module .hv2-hero-sidebar h1 em {
  color: var(--hv2-blue-light) !important;
}

.hv3-hero-module .hv2-hero-description {
  color: rgba(255, 255, 255, 0.7);
}

/* Badge on image stays the same (white pill on photo) */

/* Trust bar on dark */
.hv3-hero-module .hv2-trust-item {
  color: rgba(255, 255, 255, 0.75);
}

.hv3-hero-module .hv2-trust-icon {
  background: rgba(43, 122, 204, 0.15);
  color: var(--hv2-blue-light);
}

.hv3-hero-module .hv2-trust-divider {
  background: rgba(255, 255, 255, 0.12);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  /* Shift image focal point right so the woman clears the badge area */
  .hv3-hero-module .hv2-hero-media img {
    object-position: 70% center;
  }

  /* Move badge to bottom-right so it sits on the sky/cityscape, not on her face */
  .hv3-hero-module .hv2-hero-badge {
    top: auto;
    bottom: 12px;
    left: auto;
    right: 12px;
  }
}

@media (max-width: 640px) {
  .hv3-hero-module {
    padding-bottom: 20px;
  }
}