/* =========================================================================
   MONARQUE — главная monarque.ru
   Секция «Возможности Резидента» (#benefits): редакционная полоса, а не коробки.

   Задача: убрать «коробочность». Вместо карточек с рамкой — общая волосяная
   линия, вертикальные разделители между колонками и акцентная заливка только
   у первой карточки. Крупные серифные номера 01–04 как визуальный якорь,
   крупные тонкие иконки, больше воздуха, крупнее типографика.

   Подключается из showcases/landing.js (index.html вне границ задачи) —
   тот же приём, что в club-studio.js и monarque.js.
   ========================================================================= */

/* Якорь на секцию не должен прятаться под липкой шапкой. */
#benefits { scroll-margin-top: 96px; }

/* -------------------------------------------------------------------------
   Полоса преимуществ: четыре колонки, разделённые волосяной линией.
   Рамок вокруг карточек нет — только общая верхняя линия и вертикали между.
   ------------------------------------------------------------------------- */
.m-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(44px, 5.2vw, 78px);
  border-top: 1px solid var(--site-line, rgba(217, 188, 122, 0.26));
  counter-reset: benefit;
}

.m-benefit {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 3.4vw, 50px) clamp(24px, 2.6vw, 40px) clamp(38px, 4vw, 58px);
  border-right: 1px solid var(--site-line, rgba(217, 188, 122, 0.26));
  background: none;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.m-benefit:last-child { border-right: 0; }

/* Крупный серифный номер — визуальный якорь вместо тяжёлой иконки */
.m-benefit::before {
  counter-increment: benefit;
  content: counter(benefit, decimal-leading-zero);
  display: block;
  margin-bottom: clamp(20px, 2.2vw, 28px);
  /* Серифный стек задан явно: --font-display в styles.css переопределён
     на Manrope (:root, стр. ~2557), поэтому var(--font-display) дал бы
     гротеск вместо серифа. Значения — как в styles.css:36 и :46. */
  font-family: "Cormorant Garamond", "Playfair Display", "Times New Roman", Georgia, serif;
  font-size: clamp(2.8rem, 3.9vw, 4rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--site-accent, #d9bc7a);
  opacity: 0.6;
}

html[lang="ar"] .m-benefit::before,
html[dir="rtl"] .m-benefit::before {
  font-family: "Noto Kufi Arabic", "Cormorant Garamond", serif;
}

/* Иконка — крупная, но тонкая: акцент рядом с заголовком, не «иконка в кружке».
   Размер заметно больше исходных 48px, штрих остаётся волосяным. */
.m-benefit__icon {
  width: clamp(48px, 4.2vw, 60px);
  height: clamp(48px, 4.2vw, 60px);
  margin-bottom: clamp(18px, 1.8vw, 24px);
  color: var(--site-accent, #d9bc7a);
  opacity: 0.9;
}

.m-benefit__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 1;
}

.m-benefit h3 {
  margin: 0 0 12px;
  font-size: clamp(1.22rem, 1.5vw, 1.46rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--site-text, #f2ecdf);
}

.m-benefit p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(0.96rem, 0.62vw + 0.78rem, 1.04rem);
  line-height: 1.68;
  color: var(--site-muted, rgba(242, 236, 223, 0.66));
}

/* -------------------------------------------------------------------------
   Первая карточка — акцентная заливка (единственная в полосе).
   Заливка выходит за границы колонки, чтобы читаться как выделение,
   а не как ещё одна коробка.
   ------------------------------------------------------------------------- */
.m-benefit--accent {
  margin-top: -1px;
  margin-inline: calc(-1 * clamp(18px, 2vw, 28px));
  padding: clamp(30px, 3.2vw, 46px) clamp(18px, 2vw, 28px) clamp(34px, 3.6vw, 52px);
  border-top: 2px solid var(--site-accent, #d9bc7a);
  border-radius: 0 0 3px 3px;
  background:
    linear-gradient(
      168deg,
      rgba(217, 188, 122, 0.16) 0%,
      rgba(217, 188, 122, 0.06) 46%,
      rgba(217, 188, 122, 0.01) 100%
    );
}

.m-benefit--accent::before { opacity: 1; }

/* тонкая нижняя линия завершает акцентный блок, не превращая его в рамку */
.m-benefit--accent::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--site-line, rgba(217, 188, 122, 0.26));
}

.m-benefit--accent h3 { color: var(--site-text, #f2ecdf); }

.m-benefit--accent p { color: rgba(242, 236, 223, 0.82); }

/* -------------------------------------------------------------------------
   Наведение: ТОЛЬКО цвет и тень. Никаких transform/scale/translate (§0.0.2).
   ------------------------------------------------------------------------- */
.m-benefit:hover h3 { color: var(--site-accent, #d9bc7a); }

.m-benefit--accent:hover {
  background:
    linear-gradient(
      168deg,
      rgba(217, 188, 122, 0.2) 0%,
      rgba(217, 188, 122, 0.08) 46%,
      rgba(217, 188, 122, 0.02) 100%
    );
}

.m-benefit--accent:hover h3 { color: var(--site-accent, #d9bc7a); }

/* -------------------------------------------------------------------------
   Адаптив
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .m-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-benefit:nth-child(2n) { border-right: 0; }
  .m-benefit:nth-child(n + 3) {
    border-top: 1px solid var(--site-line, rgba(217, 188, 122, 0.26));
  }
}

@media (max-width: 620px) {
  .m-benefits {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .m-benefit {
    border-right: 0;
    border-bottom: 1px solid var(--site-line, rgba(217, 188, 122, 0.26));
    padding: 30px 0 32px;
  }
  .m-benefit:last-child { border-bottom: 0; }
  .m-benefit--accent {
    margin-inline: -14px;
    padding: 28px 14px 30px;
  }
  .m-benefit::before {
    font-size: clamp(2.4rem, 9.5vw, 3rem);
    margin-bottom: 16px;
  }
  .m-benefit__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
  }
  .m-benefit h3 { font-size: 1.16rem; }
  .m-benefit p { font-size: 0.95rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .m-benefit { transition: none; }
}