/* ============================================================
   Why — «Почему выбирают Bajor Clinic» (фото + аккордеоны)
   Full-bleed, тёмный teal фон.
   ============================================================ */

.why {
  background: var(--c-primary);
  overflow: hidden;
}
.why__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;                     /* mobile: стек */
}
@media (min-width: 1000px) {
  .why__inner { grid-template-columns: 710fr 730fr; align-items: stretch; }
}

.why__media { position: relative; min-height: 320px; }
.why__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.why__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding: var(--section-y) 0;                    /* без горизонтальных полей — линии на всю ширину */
}
.why__title { color: var(--c-bg); padding-inline: var(--pad-inline); }

/* ---- Аккордеон ---- */
.accordion { display: flex; flex-direction: column; }
.accordion__item { border-bottom: 1px solid #33585d; cursor: pointer; }
.accordion__item:first-child { border-top: 1px solid #33585d; }

.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-lg) var(--pad-inline);     /* текст с отступом, линия — на всю ширину */
  text-align: left;
  color: var(--c-on-teal);
  font-family: var(--ff-base);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--c-accent);                     /* оранжевый фон, как в макете */
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: var(--c-white);
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__item.is-open .accordion__icon::after { transform: translate(-50%, -50%) rotate(0); }

.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.accordion__item.is-open .accordion__body { grid-template-rows: 1fr; }
.accordion__body-inner { overflow: hidden; }
.accordion__body p {
  padding: 0 var(--pad-inline) var(--space-lg);
  color: var(--c-on-teal);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.4;
  opacity: .85;
}