/* ======================================================================
   #BENEFITS — «Преимущества»
   Задачи:
     • Чистый скоуп (только внутри #benefits).
     • Высота всегда ПО КОНТЕНТУ (без 100vh).
     • Верхний отступ немного меньше (заголовок ближе к верху).
     • Фон с «тёмным стеклом» — опционально через класс .benefits-bg.
   Зависимости: Bootstrap (row/col), токены из base.css.
   ====================================================================== */


/* ── 1) СЕКЦИЯ: фон, рамки, внутренние отступы (верх чуть меньше) ── */
#benefits{
  background: var(--paper-100);
  padding-top: clamp(28px, 5vh, 48px);    /* было «высоко» — сделали немного меньше */
  padding-bottom: clamp(28px, 6vh, 64px);
}

/* Высота секции и вложенных контейнеров всегда авто (страховка против внешних screen-стилей) */
#benefits,
#benefits .container,
#benefits .row{
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}


/* ── 2) ЗАГОЛОВОК — верхний блок слева ── */
#benefits h2{
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;                               /* верхний отступ задаём секцией, чтоб не «плясало» */
}
#benefits h2 .accent{
  color: var(--terracotta);                 /* терракотовый акцент в заголовке */
}


/* ── 3) КАРТОЧКИ ПРЕИМУЩЕСТВ (правая колонка) ── */
#benefits .benefit-item{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--paper-100);            /* светлая «бумага» */
  border: 2px solid var(--paper-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  transition: transform .2s ease, box-shadow .2s ease;
  margin-top: 1.25rem;                     /* аккуратный интервал между карточками */
}
#benefits .benefit-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(31,30,22,.22);
}

/* Иконка в кружке слева */
#benefits .benefit-ico{
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;                              /* var(--white) может не быть в токенах */
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

/* Текст карточки */
#benefits .benefit-item p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
#benefits .benefit-item p strong{
  font-weight: 700;
  color: var(--ink);
}


/* ── 4) АДАПТИВ ── */
@media (max-width: 991.98px){
  /* Когда колонки становятся в столбик — центрируем общий текст, но карточки остаются «слева» */
  #benefits .row{ row-gap: 1rem; }
  #benefits h2{ text-align: center; }
  #benefits .benefit-item{ text-align: left; }
}
@media (max-width: 575.98px){
  #benefits h2{ font-size: clamp(20px, 6vw, 26px); }
  #benefits .benefit-item{ padding: 1rem; }
  #benefits .benefit-ico{ width: 36px; height: 36px; font-size: 18px; }
}


/* ── 5) ФОН «ТЁМНОЕ СТЕКЛО» (включается классом .benefits-bg на секции) ──
   Путь к изображению: /static/img/background/bg-benefits.jpeg */
#benefits.benefits-bg{
  position: relative;
  background-image: url("../img/background/bg-benefits.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* ручки интенсивности */
  --benefits-overlay-top: .40;
  --benefits-overlay-bot: .66;
  --benefits-vignette:    .36;
}
/* Тёмное стекло + тёплая вуаль */
#benefits.benefits-bg::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(0,0,0,var(--benefits-overlay-top)),
                    rgba(0,0,0,var(--benefits-overlay-bot))),
    linear-gradient(135deg,
      color-mix(in srgb, var(--paper-200) 28%, transparent) 0%,
      transparent 55%),
    rgba(0,0,0,.10);
  backdrop-filter: blur(2.5px) saturate(.92) brightness(.88);
  -webkit-backdrop-filter: blur(2.5px) saturate(.92) brightness(.88);
  pointer-events: none;
}
/* Виньетка */
#benefits.benefits-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,var(--benefits-vignette)) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Контент поверх */
#benefits.benefits-bg > *{ position: relative; z-index: 1; }
/* Заголовок на фото — светлый и читаемый */
#benefits.benefits-bg h2{
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.35);
}
#benefits.benefits-bg h2 .accent{
  color: var(--terracotta);
  text-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.35);
}