/* ==========================================================================
   DMGroup — «Услуги» / Сопровождение page
   desktop frame 11:3 · body frame 11:16 · mobile frame 11:58
   Every value below comes from:
     node figma-dmgroup/tree.mjs 11:16 6 --props
     node figma-dmgroup/tree.mjs 11:58 5 --props
   Only page-scoped classes live here — every selector carries a `uslugi-`
   prefix (or is guarded by one), so nothing can leak into another page's CSS.
   The shared `.section`, `.inner`, `.line`, `.btn` and `.t-*` utilities are
   reused as-is.
   ========================================================================== */

/* --- page shell ----------------------------------------------------------
   [11:3] «Услуги — десктоп» frame fill = #0e0d0b (--c-bg-deep); the site-wide
   --c-page is #070706, so this frame paints its own background. All four
   selectors are inert on any page that does not render .uslugi-section.
   ------------------------------------------------------------------------- */

body.page-uslugi,
.page-uslugi .page,
.page:has(> .uslugi-section),
.uslugi-section { background: var(--c-bg-deep); }

/* --- section shell -------------------------------------------------------
   [11:16] Frame 1440x869, layout=VERTICAL gap=32 pad=32,48,48,48
   (.section already supplies padding-inline: var(--gutter) == 48)
   ------------------------------------------------------------------------- */

.section--uslugi { padding-block: 32px 48px; }

.uslugi {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* [11:17] Frame 1344x108, layout=VERTICAL gap=12 */
.uslugi__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* [11:18] «Техническое сопровождение» Manrope 32/40 w600 ls-0.4 #f3efe8 */
.uslugi__title { color: var(--c-text-alt); }

/* [44:52] lead Manrope 16/24 w400 #f3efe8 */
.uslugi__lead { color: var(--c-text-alt); }

/* [11:19] note Manrope 14/20 w400 #b3aaa0 */
.uslugi__note { color: var(--c-label); }

/* --- price group ---------------------------------------------------------
   [11:20] «Персонал» 1344x369 · [11:40] «Доставка» 1344x174, both
   layout=VERTICAL gap=8 — the 8 sits between the title, the column header
   and every row, so the rows are a flex column with the same 8px gap.
   ------------------------------------------------------------------------- */

.uslugi__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* [11:21]/[11:41] Manrope 11/14 w500 ls1.2 #e8956a — mixed case in the design
   (no uppercase transform), hence .t-caption rather than .label. */
.uslugi__group-title { color: var(--c-accent); }

/* [11:22]/[11:42] 1344x22, layout=HORIZONTAL pad=0,0,8,0 cross=CENTER, gap=0 */
.uslugi__cols {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
}

/* [11:23]/[11:24] Manrope 11/14 w500 ls1.2 #b3aaa0 */
.uslugi__col { color: var(--c-label); }

.uslugi__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- price rows ----------------------------------------------------------
   [11:25] 1344x57, layout=HORIZONTAL gap=16 pad=16,0,16,0 cross=CENTER,
   stroke bottom #463f38/1 (inside). .line supplies the flex row, the 16px
   gap and the hairline; the design's padding and border colour are pinned
   here (57 = 16 + 24 + 16 + 1).
   ------------------------------------------------------------------------- */

.uslugi__row {
  padding-block: 16px;
  border-bottom-color: var(--c-rule-2);
}

/* [11:26] name Manrope 16/24 w400 #f3efe8, layoutGrow=1 */
.uslugi__name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-text-alt);
}

/* [11:27] price Manrope 18/22 w600 #f3efe8, hug */
.uslugi__price {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--c-text-alt);
}

/* --- action --------------------------------------------------------------
   [11:51] «Собрать заявку» 138x42, pad=12,16,12,16, fill=#e8956a, r=2, no
   stroke — .btn has 13px/1px of its own that would make the plate 46 tall.
   `.uslugi__action` is a flex container so the inline-flex button cannot pick
   up the line-box descender gap.
   ------------------------------------------------------------------------- */

.uslugi__action { display: flex; }

.uslugi__btn {
  padding: 12px 16px;
  border: 0;
}

/* ==========================================================================
   Mobile [11:58] «Услуги — мобильный» — 390 wide
   [11:70] Frame 390x1121 pad=32,16,48,16 gap=32: the section padding, the
   12/8/32 gaps, the 57/81px rows and every type size are identical to the
   desktop frame — only the gutter changes (48 -> 16), which base.css already
   does through --gutter. The one exception is the title: base.css shrinks
   .t-page to 28/34 below 900px, while [11:72] keeps 32/40 in both frames.
   ========================================================================== */

@media (max-width: 900px) {
  .uslugi__title {
    font-size: var(--t-page-size);
    line-height: var(--t-page-lh);
    letter-spacing: var(--t-page-ls);
  }
}