/* Black & White hero override (designed to match provided image, monochrome) */

/* Make hero dark and monochrome */
.hero {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Show and style background images (use secondary image by opacity/animation) */
.hero .bg-primary,
.hero .bg-secondary {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
  opacity: 1 !important;
  filter: grayscale(100%) brightness(0.45) contrast(1.05) !important;
}
/* Force use of the secondary image as the visible hero background */
.hero img.bg-primary { opacity: 0 !important; animation: none !important; }
.hero img.bg-secondary { opacity: 1 !important; animation: none !important; }

/* Keep decorative fades for depth */
.hero .fade-top,
.hero .fade-bottom,
.hero .sweep-bottom {
  display: block !important;
}

.content-wrapper {
  padding: 6rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.flashlight-wrap .dim { display: block !important; }

.flashlight-wrap .bright {
  color: #ffffff;
  font-size: 1.875rem; /* match component's original size to avoid overlapping */
  line-height: 1.25;
  font-weight: 300;
  margin: 0 0 1rem 0;
  text-wrap: balance;
}

.hero p {
  color: rgba(255,255,255,0.75);
  font-size: 1.0625rem;
  max-width: 60ch;
}

/* Buttons: primary becomes white with black text, secondary is transparent with white border */
.hero .btn-primary {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
}

.hero .btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}

/* Stats styling */
.hero .stats-wrapper { margin-top: 2.5rem; }
.hero .stat-item { display: flex; gap: 1rem; align-items: center; }
.hero .stat-icon { width: 3rem; height: 3rem; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.06); border-radius: 8px; }
.hero .stat-icon i { color: #ffffff; }
.hero .stat-value { font-weight: 700; color: #ffffff; font-size: 1.25rem; }
.hero .stat-label { color: rgba(255,255,255,0.6); font-size: 0.9rem; }

/* Make fake searchbar monochrome */
.hero .fake-searchbar { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04); padding: 0.5rem 0.75rem; max-width: 420px; margin-top: 1.5rem; border-radius: 999px; display:flex; gap: .75rem; align-items:center; }
.hero .fake-searchbar input { background: transparent; border: none; color: rgba(255,255,255,0.7); }
.hero .fake-searchbar svg { color: rgba(255,255,255,0.7); }

/* Responsive tweaks */
@media (min-width: 992px) {
  .content-wrapper { padding: 8rem 4rem; }
  .flashlight-wrap .bright { font-size: 4.5rem; }
  .hero .buttons { margin-top: 2rem; }
}

@media (max-width: 767px) {
  .flashlight-wrap .bright { font-size: 2rem; }
  .content-wrapper { padding: 3rem 1.25rem; }
  .hero .stat-item { gap: .5rem; }
}