/* ==========================================================================
   Block: acf/why-choose (S4) — live section#brxe-jjznza (docs/scout/SECTIONS-B.md §3, used-css.css).
   Mobile-first. Breakpoints: 768 / 992 (live Bricks max-width 767 / 991); the image + accordion grid uses
   ACSS's own .grid--m-1 breakpoint (max-width: 768px), i.e. two columns from 769px.
   The accordion itself is parts/accordion.php (assets/css/parts/accordion.css).
   ========================================================================== */

/* ---- Section: backgrounds per breakpoint + the grey→white overlay (#brxe-jjznza::before) -------- */
.block-why-choose {
  background-color: var(--neutral-ultra-light);
  background-image: linear-gradient(var(--white), var(--white));   /* live ≤767: plain white */
  background-position: center top;
  background-size: cover;
}
.block-why-choose::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wfx-s4-overlay);
  pointer-events: none;
}
.block-why-choose > * { position: relative; }

@media (min-width: 768px) {
  .block-why-choose { background-image: var(--why-choose-bg-tablet, none); }
}
@media (min-width: 992px) {
  .block-why-choose {
    background-color: var(--wfx-s4-bg);
    background-image: var(--why-choose-bg, none);
  }
}

/* ---- Container (.brxe-container.center--all) --------------------------------------------------- */
.block-why-choose__inner {
  align-items: center;
  text-align: center;
}

.block-why-choose__cta {                /* live #brxe-uofofq: 230 × 36 */
  --btn-h: 3.6rem;                      /* Buttons v2 lock (sm is 32; docs/design/BUTTONS.md §4.3) */
  width: 100%;
  max-width: 23rem;
}
.block-why-choose__button { --btn-h: 4rem; }     /* Buttons v2 lock: live's 40 (sm is 32) */

/* ---- Heading group (.brxe-block.center--all.margin-top--l.text--secondary) --------------------- */
.block-why-choose__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);
  width: 100%;
  margin-top: var(--space-l);
  color: var(--secondary);
  text-align: center;
}
.block-why-choose__title {
  color: var(--secondary);
  text-transform: capitalize;
}
.block-why-choose__lead {               /* live div.text--bold: Inter 700, the body's 27.25px line */
  font-weight: 700;
  line-height: inherit;
}
.block-why-choose__intro {              /* live .text--xs: Nimbus 400 12px (ACSS text classes use the heading face) */
  font-family: var(--text-font-family);
  font-size: var(--text-xs);
  line-height: var(--text-line-height);
}

/* ---- Image + accordion grid (#brxe-ehzhgr.grid--2.grid--m-1.align-items--center.width--xl) ------ */
.block-why-choose__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;                /* live #brxe-ehzhgr ≤767 */
  gap: var(--grid-gap);
  width: var(--width-xl);
  max-width: 100%;
}
@media (min-width: 768px) {
  .block-why-choose__grid { justify-items: normal; }
}
@media (min-width: 769px) {
  .block-why-choose__grid { grid-template-columns: var(--grid-2); }
}

.block-why-choose__image {              /* live #brxe-cqncch: 400 × 576.9 (347.6 × 501.4 at 390) */
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
}

.block-why-choose__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap);
  width: 100%;
}

.block-why-choose__buttons {            /* live .brxe-block.flex--row.gap--xs */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;                      /* live .brxe-block ≤767 */
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
}
@media (min-width: 768px) {
  .block-why-choose__buttons { flex-wrap: nowrap; }
}