/* ============================================================
   Специфика ГЛАВНОЙ страницы.
   Грузится только на Главной (шаблон «Главная UX 2»).
   Всё «общее» (типографика, тёмная тема, логотип, шапка, фоны,
   карточки отзывов) вынесено в design-system.css и работает на
   всех страницах, не только на Главной.
   ============================================================ */

/* Карточки услуг (.a_service2 — 3-я в ряду, лиловая) в тёмной теме:
   светлая подложка → тёмная, оверлей — фиолетовый «воск», текст — светлый. */
:root[data-theme="dark"] .row.columns_margin_bottom_20 > [class*="col-"]:nth-of-type(3n) .a_service2 {
  background: var(--ds-surface-alt);
  color: var(--ds-text);
}
:root[data-theme="dark"] .row.columns_margin_bottom_20 > [class*="col-"]:nth-of-type(3n) .a_service2::after {
  background:
    radial-gradient(340px circle at 6% 100%, rgba(139, 92, 246, .40), rgba(139, 92, 246, 0) 62%),
    linear-gradient(135deg, rgba(26, 36, 56, .70) 0%, rgba(40, 30, 54, .80) 100%);
}
:root[data-theme="dark"] .row.columns_margin_bottom_20 > [class*="col-"]:nth-of-type(3n) .a_service2 .media-body__title {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* ============================================================
   Бенто-блок услуг (Главная) — один-в-один с макетом Figma (8888-30761).
   Размеры как на gpm-cleaning.ru: h≈483, pad 40, radius 12, gap 20.
   ============================================================ */
.services-bento {
  display: flex; align-items: stretch; gap: 20px; margin-top: 40px;
}
/* колонка из 2 маленьких карточек — по высоте равна большим */
.sb-smalls { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; }
.sb-smalls .sb-card--small { flex: 1 1 0; }
.sb-card {
  position: relative; overflow: hidden; text-decoration: none; box-sizing: border-box;
  border-radius: 12px; padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(2,6,23,.14); }
/* большие карточки чуть шире колонки маленьких (пропорции как на gpm-cleaning) */
.sb-card--big { flex: 1.27 1 0; min-height: 483px; }
.sb-card--gruzchiki { background: #f95950 url('/assets/template/newdesign/images/bento/box.png') -4% -4% / 132% no-repeat; }
.sb-card--raznorabochie {
  background: #2b2620 url('/assets/template/newdesign/images/bento/raznorabochie-nobg.png') 130% 90% / 76% no-repeat;
  background-image: image-set(
    url('/assets/template/newdesign/images/bento/raznorabochie-nobg.webp') type('image/webp'),
    url('/assets/template/newdesign/images/bento/raznorabochie-nobg.png') type('image/png'));
}
.sb-card--small { background: linear-gradient(135deg, #ece8fb 0%, #f6edf6 55%, #fbf0f2 100%); }
.sb-card__title {
  position: relative; z-index: 2; font-family: var(--ds-font);
  font-weight: var(--ds-fw-medium); font-size: var(--ds-h4); line-height: var(--ds-h4-lh);
  letter-spacing: -0.01em; margin: 0;
}
.sb-card--big .sb-card__title { color: #f8fafc; max-width: 78%; text-shadow: 0 1px 12px rgba(0,0,0,.18); font-size: var(--ds-h5); line-height: var(--ds-h5-lh); }
.sb-card--small .sb-card__title { color: #020617; max-width: 92%; font-size: var(--ds-h5); line-height: var(--ds-h5-lh); }
.sb-card__btn {
  position: relative; z-index: 2; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #020617;
  border-radius: 14px; padding: 13px 18px;
  font-family: var(--ds-font); font-size: var(--ds-body-m); font-weight: var(--ds-fw-medium);
  transition: background var(--ds-transition);
}
.sb-card:hover .sb-card__btn { background: var(--ds-brand); color: #fff; }
.sb-card:hover .sb-card__btn svg { stroke: #fff; }
.sb-card__btn svg { width: 22px; height: 22px; display: block; stroke: currentColor; }
/* Тёмная тема: заголовки лиловых карточек .sb-card--small остаются тёмными — фон у них светлый в любой
   теме, цвет задан самим правилом выше (не токеном), без мигания при загрузке (2026-10-16) */
/* Боковые отступы контейнера бенто — как у остального контента */
.intro_section2_ux > .container {
  padding-left: var(--ds-gutter); padding-right: var(--ds-gutter);
  max-width: var(--ds-container, 1440px); margin: 0 auto; box-sizing: border-box;
}

/* Адаптив бенто — одна колонка, большие ~219, маленькие ~186 */
@media (max-width: 992px) {
  /* боковой отступ секции — как у остального контента на мобилке */
  .intro_section2_ux > .container { padding-left: 16px; padding-right: 16px; }
  .services-bento { flex-direction: column; gap: 20px; margin-top: 28px; }
  .sb-card { padding: 28px; }
  .sb-card--big { flex: 0 0 auto; min-height: 219px; }
  .sb-smalls { flex: 0 0 auto; flex-direction: column; gap: 20px; }
  .sb-smalls .sb-card--small { flex: 0 0 auto; min-height: 186px; }
  .sb-card__title { font-size: var(--ds-h5); line-height: var(--ds-h5-lh); }
  .sb-card--gruzchiki { background-size: cover; background-position: 78% 62%; }
  .sb-card--raznorabochie { background-size: auto 116%; background-position: right -30px center; }
}
@media (max-width: 480px) {
  .sb-card { padding: 24px; }
  .sb-card__title { font-size: var(--ds-h6); line-height: var(--ds-h6-lh); }
}