/* ==========================================================================
   HeartandHome — "Why Us" Feature Section (HOME-05)
   Section 3 "Header" in Divi — 1 row, 2 columns: image on one side,
   heading + body text on the other.

   CSS ID "hh-why-us-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-why-us (depends on hh-tokens)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section container — cream background, generous padding
   -------------------------------------------------------------------------- */

.et_pb_section:has(#hh-why-us-section) {
  background-color: var(--hh-bg-cream) !important;
  padding: 80px var(--hh-padding-section-x) !important;
}

/* --------------------------------------------------------------------------
   Row — two-column grid: image (left) + text (right)
   -------------------------------------------------------------------------- */

#hh-why-us-section {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--hh-gap-section);
  align-items: center;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Columns — remove Divi default widths
   -------------------------------------------------------------------------- */

#hh-why-us-section .et_pb_column {
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Image column — rounded corners, full cover, moody dark overlay
   -------------------------------------------------------------------------- */

#hh-why-us-section .et_pb_image_wrap {
  display: block;
  border-radius: var(--hh-radius-card);
  overflow: hidden;
  position: relative;
}

#hh-why-us-section .et_pb_image_wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 50%, rgba(13, 26, 18, 0.35) 100%);
  border-radius: var(--hh-radius-card);
  pointer-events: none;
}

#hh-why-us-section .et_pb_image_wrap img {
  width: 100% !important;
  height: 480px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--hh-radius-card) !important;
}

/* --------------------------------------------------------------------------
   Text column — eyebrow label injected via ::before
   -------------------------------------------------------------------------- */

#hh-why-us-section .et_pb_column:last-child {
  display: flex !important;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

#hh-why-us-section .et_pb_text:first-of-type::before {
  content: 'WHY CHOOSE US';
  display: block;
  font-family: var(--hh-font-body) !important;
  font-size: var(--hh-font-label);
  font-weight: 600;
  letter-spacing: var(--hh-ls-label);
  color: var(--hh-accent-sage);
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Section heading — Fraunces display serif
   -------------------------------------------------------------------------- */

#hh-why-us-section h2,
#hh-why-us-section .et_pb_text h2,
#hh-why-us-section h3,
#hh-why-us-section .et_pb_text h3,
#hh-why-us-section .et_pb_heading h2 {
  font-family: var(--hh-font-heading) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  letter-spacing: var(--hh-ls-heading) !important;
  line-height: 1.15 !important;
  color: var(--hh-text-primary) !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Body text
   -------------------------------------------------------------------------- */

#hh-why-us-section .et_pb_text p,
#hh-why-us-section .et_pb_text_inner p {
  font-family: var(--hh-font-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #726E6A !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   CTA button (if present) — sage pill
   -------------------------------------------------------------------------- */

.et_pb_section:has(#hh-why-us-section) .et_pb_button {
  background-color: var(--hh-accent-sage) !important;
  color: var(--hh-text-white) !important;
  border-radius: 24px !important;
  border: 2px solid var(--hh-accent-sage) !important;
  padding: 14px 28px !important;
  font-family: var(--hh-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-block;
  margin-top: 8px;
}

.et_pb_section:has(#hh-why-us-section) .et_pb_button:hover,
.et_pb_section:has(#hh-why-us-section) .et_pb_button:focus-visible {
  background-color: #4D6355 !important;
  border-color: #4D6355 !important;
}

.et_pb_section:has(#hh-why-us-section) .et_pb_button:focus-visible {
  outline: 2px solid var(--hh-accent-sage, #5B6F60) !important;
  outline-offset: 2px !important;
}

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

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

  #hh-why-us-section {
    gap: 32px;
  }

  #hh-why-us-section .et_pb_image_wrap img {
    height: 380px;
  }

  #hh-why-us-section h2,
  #hh-why-us-section .et_pb_text h2,
  #hh-why-us-section h3,
  #hh-why-us-section .et_pb_text h3 {
    font-size: 30px !important;
  }
}

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

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

  #hh-why-us-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  #hh-why-us-section .et_pb_image_wrap img {
    height: 280px;
  }

  #hh-why-us-section h2,
  #hh-why-us-section .et_pb_text h2,
  #hh-why-us-section h3,
  #hh-why-us-section .et_pb_text h3 {
    font-size: 26px !important;
  }

  #hh-why-us-section .et_pb_text p,
  #hh-why-us-section .et_pb_text_inner p {
    font-size: 15px !important;
  }
}