/* Цвета взяты из пары макетов — светлого «услуга б» и тёмного «услуга ч».
   Готовые --muted и --accent не подошли: в тёмной теме --muted это
   капучино, а в макете заголовок и текст белым антиком, и заливка
   главной кнопки там тоже светлая, с тёмной надписью. */
.vs-wrap{
  --vs-ink: var(--vech-brown);
  --vs-fill: var(--vech-brown);
  --vs-fill-ink: var(--vech-antique);
  --vs-nav-ink: var(--vech-black);
}

.vs-wrap[data-theme='dark']{
  --vs-ink: var(--vech-antique);
  --vs-fill: var(--vech-antique);
  --vs-fill-ink: var(--vech-black);
  --vs-nav-ink: var(--vech-antique);
}

/* Страницы услуг: уборка и уход по подписке.
   Размеры взяты из макетов Figma «услуга б» (33:81) и «подписка б» (33:195):
   контейнер 1440, поля 48, левая колонка 675, правая 604, скругления 11. */

.vs-main{
  padding:28px 0 64px;
}

.vs-shell{
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(16px, 3.33vw, 48px);
}

/* --- кнопки навигации сверху --- */

.vs-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:30px;
}

.vs-nav-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-width:224px;
  min-height:59px;
  padding:0 22px;
  justify-content:center;
  border:1px solid var(--vs-nav-ink);
  border-radius:11px;
  color:var(--vs-nav-ink);
  text-decoration:none !important;
  font-weight:600;
  font-size:14px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}

.vs-nav-btn:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--vs-nav-ink) 8%, transparent);
}

.vs-nav-btn--end{
  font-size:15px;
}

.vs-nav-btn__arrow{
  font-size:19px;
  line-height:1;
}

/* --- две колонки --- */

.vs-grid{
  display:grid;
  grid-template-columns:minmax(0, 675fr) minmax(0, 604fr);
  gap:clamp(24px, 4vw, 56px);
  /* Колонки тянутся на высоту ряда: в макете кнопки прижаты к низу,
     вровень с нижним краем второй фотографии. При align-items:start
     колонка сжимается по содержимому и margin-top:auto ничего не даёт. */
  align-items:stretch;
}

.vs-col--text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* --- плашка, заголовок, текст --- */

.vs-badge{
  display:inline-block;
  align-self:flex-start;
  margin:0 0 22px;
  padding:5px 23px;
  border-radius:11px;
  background:var(--vech-brown-light);
  color:var(--vech-antique);
  font-size:17px;
  line-height:1.24;
}

.vs-title{
  margin:0 0 26px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(28px, 3.2vw, 46px);
  line-height:1;
  max-width:637px;
  letter-spacing:var(--display-tracking);
  color:var(--vs-ink);
}

.vs-body{
  font-size:17px;
  line-height:1.24;
  color:var(--vs-ink);
  max-width:541px;
}

.vs-body p{ margin:0 0 16px; }
.vs-body p:last-child{ margin-bottom:0; }

.vs-body ul{
  margin:0 0 16px;
  padding-left:18px;
  list-style:none;
}

.vs-body li{
  position:relative;
  margin-bottom:6px;
  padding-left:14px;
}

/* Маркер в макете — маленькая точка с отступом, не стандартный disc */
.vs-body li::before{
  content:'·';
  position:absolute;
  left:0;
  top:-2px;
  font-size:20px;
  line-height:1;
}

.vs-body strong{ font-weight:600; }

/* --- кнопки внизу колонки --- */

.vs-cta{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:auto;
  padding-top:40px;
}

.vs-cta .vs-btn{
  flex:1 1 240px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:12px 20px;
  border:1px solid var(--vs-ink);
  border-radius:11px;
  background:transparent;
  color:var(--vs-ink);
  font-family:inherit;
  font-weight:600;
  font-size:15px;
  letter-spacing:-0.02em;
  text-decoration:none !important;
  cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease);
}

.vs-cta .vs-btn:hover{ transform:translateY(-1px); }

.vs-cta .vs-btn--primary{
  background:var(--vs-fill);
  border-color:var(--vs-fill);
  color:var(--vs-fill-ink);
}

/* --- фотографии до и после --- */

.vs-col--media{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.vs-shot{
  position:relative;
  margin:0;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:604 / 295;
  background:color-mix(in srgb, var(--text) 6%, transparent);
}

.vs-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.vs-shot__label{
  position:absolute;
  left:7px;
  top:7px;
  /* Поля 15px: в макете плашки нарисованы вручную и поля у них разные
     (19 слева у «До уборки» против 15 у «После уборки»). Берём одно
     значение — иначе ширину пришлось бы прибивать под каждую подпись. */
  padding:5px 15px;
  border-radius:11px;
  background:#E2E2DE;
  color:#5A4D41;
  font-size:17px;
  line-height:1.24;
  letter-spacing:-0.02em;
}

/* --- узкий экран: порядок как в мобильном макете --- */

@media (max-width: 900px){
  .vs-main{ padding:18px 0 44px; }

  .vs-grid{
    grid-template-columns:minmax(0, 1fr);
    gap:20px;
  }

  /* В макете мобильной версии сначала заголовок с плашкой, затем фото,
     и только потом описание с кнопками. Разбиваем колонку на части
     и переставляем их порядком сетки. */
  .vs-col--text{ display:contents; }

  /* Части колонки стали самостоятельными ячейками сетки: их нельзя
     растягивать по высоте ряда, иначе кнопки разъезжаются, и нельзя
     тянуть по ширине — плашка должна обнимать текст, как в макете. */
  .vs-grid{ align-items:start; justify-items:start; }
  .vs-col--media,
  .vs-body,
  .vs-cta{ width:100%; }

  /* Кегли — из мобильного макета (кадр 410 px): заголовок 25,
     подводка 12, кнопки 11, плашка и подписи к фото 10-11. */
  .vs-badge{ order:2; margin:0 0 18px; font-size:10px; padding:6px 12px; }
  .vs-title{ order:1; margin:0 0 14px; font-size:25px; }
  .vs-col--media{ order:3; }
  .vs-body{ order:4; font-size:12px; max-width:none; }
  .vs-cta{ order:5; margin-top:0; padding-top:20px; }

  .vs-topbar{ margin-bottom:20px; gap:10px; }

  .vs-nav-btn{
    flex:1 1 0;
    min-width:0;
    justify-content:center;
    min-height:52px;
    padding:0 14px;
    font-size:9px;
  }

  .vs-nav-btn--end{ font-size:9px; }

  .vs-cta .vs-btn{
    flex:1 1 140px;
    min-height:56px;
    font-size:11px;
  }

  .vs-shot__label{ font-size:11px; padding:4px 10px; }
}

@media (max-width: 340px){
  .vs-cta{ flex-direction:column; }
  .vs-cta .vs-btn{ width:100%; }
}