/* ==========================================================================
   HeartandHome — Trust Badges Section (HOME-03)
   Section 1 "About" in Divi — 4 blurb modules (Licensed, Bonded, Insured,
   Satisfaction Guaranteed)

   CSS ID "hh-trust-section" is set on the row via Divi Builder Add Attribute.
   Parent section targeted via :has().

   Enqueued by: wp-content/themes/heartandhome-child/functions.php
   Handle: hh-trust-badges (depends on hh-tokens)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section container — dark background for visual continuity with the hero
   A dark-to-cream transition anchors trust just below the cinematic hero
   -------------------------------------------------------------------------- */

.et_pb_section:has(#hh-trust-section) {
  background-color: var(--hh-text-primary) !important;
  padding: 48px var(--hh-padding-section-x) !important;
}

/* --------------------------------------------------------------------------
   Badge row — 4-column horizontal strip, centered
   -------------------------------------------------------------------------- */

#hh-trust-section {
  display: flex !important;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 48px;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Each badge column
   -------------------------------------------------------------------------- */

#hh-trust-section .et_pb_column {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: auto !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Badge icon — sage tint on white icon/image
   -------------------------------------------------------------------------- */

#hh-trust-section .et_pb_main_blurb_image .et-pb-icon,
#hh-trust-section .et_pb_main_blurb_image .et-pb-icon::before {
  color: var(--hh-hero-badge-icon) !important;
  font-size: 36px !important;
}

#hh-trust-section .et_pb_main_blurb_image img {
  max-width: 40px;
  filter: brightness(0) invert(1) opacity(0.7);
}

/* --------------------------------------------------------------------------
   Badge heading — light on dark
   -------------------------------------------------------------------------- */

#hh-trust-section .et_pb_blurb_container h4,
#hh-trust-section .et_pb_module_header {
  font-family: var(--hh-font-heading) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: var(--hh-ls-heading) !important;
  color: var(--hh-text-white) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Badge body text — muted on dark
   -------------------------------------------------------------------------- */

#hh-trust-section .et_pb_blurb_description,
#hh-trust-section .et_pb_blurb_description p {
  font-family: var(--hh-font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--hh-text-muted) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Thin separator between hero and badges — optional sage accent line
   -------------------------------------------------------------------------- */

.et_pb_section:has(#hh-trust-section)::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: var(--hh-padding-section-x);
  right: var(--hh-padding-section-x);
  height: 1px;
  background: rgba(124, 144, 130, 0.25);
  pointer-events: none;
}

.et_pb_section:has(#hh-trust-section) {
  position: relative;
}

/* --------------------------------------------------------------------------
   Responsive — Tablet (max-width: 980px)
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .et_pb_section:has(#hh-trust-section) {
    padding: 40px 40px !important;
  }

  #hh-trust-section {
    gap: 32px;
    flex-wrap: wrap;
  }

  #hh-trust-section .et_pb_column {
    flex: 0 0 calc(50% - 16px);
  }
}

/* --------------------------------------------------------------------------
   Responsive — Phone (max-width: 767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .et_pb_section:has(#hh-trust-section) {
    padding: 36px 20px !important;
  }

  #hh-trust-section {
    gap: 24px;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  #hh-trust-section .et_pb_column {
    flex: 0 0 calc(50% - 12px);
  }

  #hh-trust-section .et_pb_blurb_container h4,
  #hh-trust-section .et_pb_module_header {
    font-size: 14px !important;
  }
}