/* =====================================================
   BARIATRIC NEPAL — Hero Section v3.1.0
   Navy #1B2D6B  |  Green #4CAF50  |  White #FFFFFF
===================================================== */

/* ══ FULL-BLEED: Break out of ANY theme container ══ */
.bn-hero-wrap {
  --bn-navy:  #1B2D6B;
  --bn-green: #4CAF50;
  --bn-white: #FFFFFF;
  --bn-text:  #4a5568;
  --bn-font-h:'Montserrat', sans-serif;
  --bn-font-b:'Open Sans', sans-serif;
  font-family: var(--bn-font-b);
  color: var(--bn-navy);
  background: var(--bn-white);
  /* Kill wrapper's own spacing */
  margin-top:    0 !important;
  margin-bottom: 0 !important;
  padding:       0 !important;
  /* Escape theme container left/right limits */
  width:  100vw   !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left:  -50vw !important;
  margin-right: -50vw !important;
  display: block;
  box-sizing: border-box;
}

/* ══ HERO ══ */
.bn-hero {
  position: relative;
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* Background: actual photo fills full section */
.bn-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #d4e8f5 0%, #e8f4fb 55%, #cde4f0 100%);
  background-size: cover;
  background-position: center top;
}

/* Overlay — very light tint, just enough for text legibility */
.bn-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(18, 38, 95, 0.30) 0%,
    rgba(27, 45, 107, 0.18) 45%,
    rgba(27, 45, 107, 0.05) 70%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

.bn-hero-person {
  position: absolute;
  right: 4%;
  bottom: 0;
  height: 100%;
  width: 52%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  z-index: 2;
}

.bn-hero-content {
  position: relative;
  z-index: 3;
  padding: 68px 50px 90px;
  max-width: 560px;
}

.bn-hero-title {
  font-family: var(--bn-font-h);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 14px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.22);
}

.bn-accent { color: #74EF82; }

.bn-divider {
  width: 44px;
  height: 3px;
  background: var(--bn-green);
  margin-bottom: 18px;
  border: none;
}

.bn-hero-subtitle {
  font-family: var(--bn-font-b);
  font-size: 15px;
  color: rgba(255,255,255,0.93);
  line-height: 1.65;
  margin: 0 0 30px;
  max-width: 340px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.18);
}

/* ── Feature Icons ── */
.bn-features {
  display: flex;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.bn-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--bn-font-b);
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff !important;
  max-width: 100px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.18s, opacity 0.18s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
}

.bn-feature-item:hover {
  transform: translateY(-2px);
  opacity: 0.85;
  color: #ffffff !important;
}

.bn-feat-icon {
  flex-shrink: 0;
  transition: transform 0.18s;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
}

.bn-feature-item:hover .bn-feat-icon {
  transform: scale(1.08);
}

/* ── CTA: two-row stack ── */
.bn-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Book Appointment */
.bn-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bn-navy);
  color: var(--bn-white) !important;
  font-family: var(--bn-font-h);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 4px;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  line-height: 1;
  white-space: nowrap;
}
.bn-btn-primary:hover {
  background: #142358;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(27,45,107,0.35);
  color: var(--bn-white) !important;
}

/* Row 2: Call + WhatsApp side by side */
.bn-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Shared contact button style: icon + label */
.bn-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 4px;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  font-family: var(--bn-font-h);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
  line-height: 1;
  white-space: nowrap;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.bn-contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.bn-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bn-contact-label {
  display: inline;
}

/* Call — green */
.bn-contact-btn--call {
  background: var(--bn-green);
  color: #fff !important;
}
.bn-contact-btn--call:hover { background: #3daa42; color: #fff !important; }

/* WhatsApp — brand green */
.bn-contact-btn--whatsapp {
  background: #25D366;
  color: #fff !important;
}
.bn-contact-btn--whatsapp:hover { background: #1aab52; color: #fff !important; }

/* ── Wave ── */
.bn-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 4;
  line-height: 0;
}
.bn-wave svg { width:100%; display:block; }


/* ══ SURGERY SECTION ══ */
.bn-surgery-section {
  background: var(--bn-white);
  padding: 60px 24px 50px;
  text-align: center;
  margin: 0;
}

.bn-section-eyebrow {
  font-family: var(--bn-font-h);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--bn-navy);
  opacity: .58;
  margin: 0 0 8px;
}

.bn-section-title {
  font-family: var(--bn-font-h);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--bn-navy);
  margin: 0 0 12px;
}

.bn-section-divider {
  width: 44px;
  height: 3px;
  background: var(--bn-green);
  margin: 0 auto 18px;
  border: none;
}

.bn-section-desc {
  font-family: var(--bn-font-b);
  font-size: 15px;
  color: var(--bn-text);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* Cards grid — desktop: full width, 4 columns */
.bn-surgery-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 100%;
  margin: 0 auto;
}

.bn-surgery-card {
  background: var(--bn-white);
  border: 1px solid #e5ecf5;
  border-radius: 12px;
  padding: 28px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow .22s, transform .18s;
}
.bn-surgery-card:hover {
  box-shadow: 0 8px 32px rgba(27,45,107,.13);
  transform: translateY(-3px);
}

.bn-card-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.bn-card-name {
  font-family: var(--bn-font-h);
  font-weight: 700;
  font-size: 15px;
  color: var(--bn-navy);
  line-height: 1.35;
  text-align: left;
  margin: 0;
}

.bn-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--bn-font-h);
  font-weight: 700;
  font-size: 12px;
  color: var(--bn-navy) !important;
  text-decoration: none !important;
  letter-spacing: .5px;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 1px;
  transition: border-color .2s, color .2s;
}
.bn-card-link:hover { border-bottom-color: var(--bn-navy); }


/* ══ RESPONSIVE ══ */
@media (max-width: 992px) {
  .bn-surgery-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .bn-hero { border-radius:0; min-height:0; }
  .bn-hero-content {
    padding: 36px 20px 230px;
    max-width: 100%;
  }
  .bn-hero-title {
    font-size: 26px;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.40), 0 1px 4px rgba(0,0,0,0.28);
  }
  .bn-hero-subtitle {
    font-size: 14px;
    max-width: 100%;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 8px rgba(0,0,0,0.28);
  }
  /* Mobile overlay — slightly more but still light */
  .bn-hero-overlay {
    background: linear-gradient(
      155deg,
      rgba(14, 28, 78, 0.42) 0%,
      rgba(18, 38, 95, 0.28) 50%,
      rgba(27, 45, 107, 0.10) 75%,
      transparent 100%
    );
  }
  .bn-hero-person {
    width: 100%;
    right: 0;
    height: 50%;
    bottom: 60px;
    object-position: top center;
  }

  /* Feature icons — centered & wider */
  .bn-features {
    gap: 10px;
    justify-content: center;
    width: 100%;
  }
  .bn-feature-item {
    font-size: 11.5px;
    max-width: 110px;
    flex: 1 1 90px;
    align-items: center;
    text-align: center;
  }

  /* CTA stack stays as column, contact row stays horizontal */
  .bn-cta-stack { align-items: flex-start; gap: 10px; }
  .bn-btn-primary {
    font-size: 12px;
    padding: 13px 16px;
  }
  .bn-contact-btn { font-size: 12px; padding: 9px 14px; }

  .bn-surgery-section { padding: 44px 16px 36px; }
  .bn-surgery-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 420px) {
  .bn-hero-content { padding-bottom: 200px; }
  .bn-hero-title { font-size: 22px; }
  .bn-surgery-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bn-feature-item { max-width: 100px; flex: 1 1 80px; }
  .bn-btn-primary { font-size: 11px; padding: 12px 14px; }
  .bn-contact-btn { font-size: 11px; padding: 8px 12px; }
}