/* ===== Home Builder – Top Features ===== */
:root{
  --nhhb-ink:        var(--nh-charcoal, #222);
  --nhhb-ink-sub:    #6c7a74;
  --nhhb-accent:     var(--nh-forest, #1E3932);
  --nhhb-radius:     4px;
}

/* ===== Section container ===== */
.nhhb-top-features{
  margin: 26px 0;
  padding: 20px 28px;
  font-family: var(--nh-font-main, inherit);
  background: #fff;
  border: 1px solid rgba(30, 57, 50, 0.10);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(30, 57, 50, 0.06);
}

/* ===== Grid ===== */
.nhhb-top-features .nhhb-features-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: center;
}

/* ===== Dividers between items ===== */
.nhhb-top-features .nhhb-feature{
  display: flex;
  align-items: center;
  gap: 14px;
  /* Keep consistent horizontal padding for all features (fixes first-item shift) */
  padding: 10px 24px;
  background: none;
  border: none;
  box-shadow: none;
  text-align: left;
  border-right: 1px solid rgba(30, 57, 50, 0.10);
}

/* removed the brittle first-child zero-left-padding rule */

/* keep last-child behaviour removing right divider */
.nhhb-top-features .nhhb-feature:last-child{
  border-right: none;
  padding-right: 0;
}

/* ===== Icon wrapper ===== */
.nhhb-top-features .nhhb-icon{
  width: 44px;
  height: 44px;

  /* ensure flex-basis matches actual size to avoid subtle alignment shifts */
  flex: 0 0 44px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #e8f4ee, #d4ece0);
  color: var(--nhhb-accent);
}

.nhhb-top-features .nhhb-icon .nhhb-svg,
.nhhb-top-features .nhhb-icon svg{
  width: 22px;
  height: 22px;
  display: block;
}

.nhhb-top-features .nhhb-icon svg [fill]:not([fill="none"]){ fill: currentColor; }
.nhhb-top-features .nhhb-icon svg [stroke]:not([stroke="none"]){ stroke: currentColor; }

.nhhb-top-features .nhhb-icon img{
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
  display: block;
}

.nhhb-top-features .nhhb-icon img[src$=".svg"]{
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

/* ===== Text ===== */
.nhhb-top-features .nhhb-copy{
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.25;
  min-width: 0;
}

.nhhb-top-features h3.nhhb-feature-title{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--nhhb-ink);
  line-height: 1.3;
  letter-spacing: .01em;
}

.nhhb-top-features .nhhb-feature-sub{
  margin: 0;
  font-size: 12px;
  color: var(--nhhb-ink-sub);
  line-height: 1.4;
}

/* ===== Placeholder ===== */
.nhhb-top-features .nhhb-ph-img{
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(46, 162, 111, 0.20);
}

/* ===== Transitions ===== */
.nhhb-top-features .nhhb-icon,
.nhhb-top-features h3.nhhb-feature-title,
.nhhb-top-features .nhhb-feature-sub{
  transition: color .25s ease, filter .25s ease, background-color .25s ease;
}

/* ===== Responsive – tablet ===== */
@media (max-width: 900px){
  .nhhb-top-features{
    padding: 18px 20px;
  }

  .nhhb-top-features .nhhb-features-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .nhhb-top-features .nhhb-feature{
    /* tablet stacked style */
    padding: 14px 16px;
    border-right: none;
    border-bottom: 1px solid rgba(30, 57, 50, 0.10);
  }

  /* Remove bottom border from last row */
  .nhhb-top-features .nhhb-feature:nth-child(3),
  .nhhb-top-features .nhhb-feature:nth-child(4){
    border-bottom: none;
  }

  /* Add right divider between the 2 columns */
  .nhhb-top-features .nhhb-feature:nth-child(odd){
    border-right: 1px solid rgba(30, 57, 50, 0.10);
  }

  /* no first-child special-case — keep consistent spacing */
  .nhhb-top-features .nhhb-feature:last-child{
    padding-right: 16px;
  }
}

/* ===== Responsive – mobile ===== */
@media (max-width: 540px){
  .nhhb-top-features{
    padding: 14px 16px;
    border-radius: 8px;
  }

  .nhhb-top-features .nhhb-features-grid{
    grid-template-columns: 1fr;
    gap: 0;
  }

  .nhhb-top-features .nhhb-feature{
    padding: 12px 0;
    border-right: none !important;
    /* Force border-bottom back for the 3rd item which was hidden by tablet rules */
    border-bottom: 1px solid rgba(30, 57, 50, 0.08) !important;
    gap: 12px;
  }

  /* Only the very last item in the list should have no border */
  .nhhb-top-features .nhhb-feature:last-child{
    border-bottom: none !important;
  }

  .nhhb-top-features h3.nhhb-feature-title{ font-size: 13px; }
  .nhhb-top-features .nhhb-feature-sub{ font-size: 11px; }
}

/* ===== Dark mode ===== */
body.dark-mode .nhhb-top-features{
  background: var(--dm-surface, #2a2e2a);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

  --dm-ink-strong:  #EDEBE7;
  --dm-ink-sub:     rgba(237, 235, 231, 0.72);
  --dm-sep:         rgba(255, 255, 255, 0.08);
}

body.dark-mode .nhhb-top-features .nhhb-feature{
  border-color: var(--dm-sep);
}

body.dark-mode .nhhb-top-features .nhhb-feature:nth-child(odd){
  border-color: var(--dm-sep);
}

body.dark-mode .nhhb-top-features h3.nhhb-feature-title{
  color: var(--dm-ink-strong);
}

body.dark-mode .nhhb-top-features .nhhb-feature-sub{
  color: var(--dm-ink-sub);
}

body.dark-mode .nhhb-top-features .nhhb-icon{
  background: rgba(46, 162, 111, 0.15);
  color: #2EA26F;
}

body.dark-mode .nhhb-top-features .nhhb-icon img[src$=".svg"]{
  filter: brightness(0) invert(1) !important;
  opacity: 0.85;
}