/* Four "why choose us" icon boxes, designed to sit inside the existing dark
   green Elementor section under its heading.
   Rendered by novamira-sandbox/mp-why-boxes.php via [mp_why_boxes].

   Specificity note: headings, paragraphs and links inside Elementor inherit
   theme colours from element-qualified selectors, which beat a single class.
   Every colour rule below is therefore written as ".mp-wb <element>.<class>"
   on purpose - without it the type renders near-black on the dark green. */

.mp-wb {
  --mp-wb-gold: #af9038;
  --mp-wb-gold-lite: #cbab52;
  /* No container-type here. It was measured adding ~1400px of empty height to
     the Elementor widget wrapping this block (731px -> 2683px), which showed
     as dead green space under the cards. The section is full width, so plain
     media queries are equivalent anyway. */
  margin-inline: auto;
  max-width: 1320px;
  padding-inline: clamp(16px, 3vw, 32px);
  width: 100%;
}

.mp-wb ul.mp-wb__grid {
  display: grid;
  gap: clamp(18px, 1.8vw, 26px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.mp-wb li.mp-wb__card {
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%));
  border: 1px solid rgb(175 144 56 / 30%);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  padding: clamp(26px, 2.4vw, 34px) clamp(20px, 1.9vw, 28px) clamp(28px, 2.4vw, 34px);
  position: relative;
  transition: border-color 260ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(.2,.7,.2,1);
}

/* Oversized numeral watermark, decorative only (the real label is aria-hidden
   and the reading order starts at the title). */
.mp-wb li.mp-wb__card::before {
  color: rgb(175 144 56 / 14%);
  content: attr(data-num);
  font-family: var(--mp-font-display, "Cormorant Garamond", serif);
  font-size: 92px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: -8px;
  z-index: -1;
}

.mp-wb li.mp-wb__card:hover {
  border-color: rgb(175 144 56 / 68%);
  box-shadow: 0 22px 46px rgb(0 0 0 / 28%);
  transform: translateY(-6px);
}

.mp-wb .mp-wb__badge {
  align-items: center;
  background: rgb(175 144 56 / 9%);
  border: 1px solid rgb(175 144 56 / 46%);
  border-radius: 50%;
  color: var(--mp-wb-gold-lite);
  display: inline-flex;
  flex: 0 0 auto;
  height: 64px;
  justify-content: center;
  transition: background-color 260ms ease, border-color 260ms ease;
  width: 64px;
}

.mp-wb li.mp-wb__card:hover .mp-wb__badge {
  background: rgb(175 144 56 / 18%);
  border-color: var(--mp-wb-gold);
}

/* The small 01-04 label was removed; the title now carries the gap that used
   to sit above it, so the badge-to-title rhythm is unchanged. */
.mp-wb h3.mp-wb__title {
  color: #fff;
  font-family: var(--mp-font-display, "Cormorant Garamond", serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.22;
  margin: 22px 0 0;
}

.mp-wb .mp-wb__hr {
  background: rgb(175 144 56 / 40%);
  border: 0;
  height: 1px;
  margin: 16px 0 0;
  width: 34px;
}

.mp-wb p.mp-wb__copy {
  color: rgb(255 255 255 / 80%);
  font-family: var(--mp-font-body, "Inter", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  margin: 14px 0 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .mp-wb ul.mp-wb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .mp-wb ul.mp-wb__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .mp-wb li.mp-wb__card::before { font-size: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-wb li.mp-wb__card,
  .mp-wb .mp-wb__badge { transition-duration: .01ms; }
  .mp-wb li.mp-wb__card:hover { transform: none; }
}