/**
 * Hero (clean) — Bongoto WooCommerce
 * - Background image + gradient overlay
 * - Centered content
 * - Primary / Ghost buttons
 */

.bt-hero{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(60px, 8vw, 140px) 0;
  color: #fff;
}

/* Overlay uses the theme primary color lightly for brand feel */
.bt-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.55),
      rgba(0,0,0,.35)
    );
  pointer-events: none;
}

.bt-hero__inner{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

.bt-hero__title{
  margin: 0 0 .5rem;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.1;
  color: #fff;
}

.bt-hero__subtitle{
  margin: 0 auto 1.25rem;
  font-size: clamp(15px, 2.2vw, 20px);
  opacity: .96;
  color: #f9fafb;
  max-width: 820px;
}

/* Buttons wrapper */
.bt-hero__actions{
  margin-top: .35rem;
  display: inline-flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

/* Base button */
.bt-hero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: .8rem 1.4rem;
  border-radius: .6rem;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .12s ease;
}

.bt-hero__btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Primary CTA */
.bt-hero__btn--primary{
  background: var(--bt-color-primary, #2563eb);
  color: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,.24);
}

.bt-hero__btn--primary:hover{
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

/* Ghost / secondary */
.bt-hero__btn--ghost{
  background: rgba(15,23,42,.18);
  color: #e5e7eb;
  border-color: rgba(148,163,184,.6);
}

.bt-hero__btn--ghost:hover{
  background: rgba(15,23,42,.28);
  color: #fff;
}

/* Badges under CTA */
.bt-hero__badges{
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .9rem;
  opacity: .95;
}

.bt-hero__badges li{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(15,23,42,.35);
  color: #e5e7eb;
}

/* Optional: left-aligned variant */
.bt-hero--left .bt-hero__inner{
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}
.bt-hero--left .bt-hero__subtitle{
  margin-left: 0;
}
.bt-hero--left .bt-hero__actions,
.bt-hero--left .bt-hero__badges{
  justify-content: flex-start;
}

/* motion-reduction */
@media (prefers-reduced-motion: reduce){
  .bt-hero,
  .bt-hero__overlay,
  .bt-hero__btn{
    transition: none !important;
  }
}

/* Fine-tuning for small screens */
@media (max-width: 480px){
  .bt-hero__actions{
    width: 100%;
    justify-content: center;
  }
  .bt-hero__btn{
    width: 100%;
  }
}