/* ============================================================
   Страницы услуг (/uslugi/ и /uslugi/<slug>/)
   Паттерны — как у калькулятора (calc.css): hero, проза, FAQ-аккордеон, CTA.
   ============================================================ */
.usl-page { padding: 32px 0 64px; }

.usl-hero { margin: 8px 0 28px; }
.usl-hero__title { font-size: 34px; font-weight: 700; color: var(--color-dark); margin: 0 0 10px; }
.usl-hero__subtitle { font-size: 17px; color: var(--color-text-light); max-width: 720px; margin: 0; line-height: 1.55; }

/* Прозаический контент услуги */
.usl-body { max-width: 780px; }
.usl-body h2 { font-size: 22px; font-weight: 700; color: var(--color-dark); margin: 28px 0 12px; }
.usl-body p { color: var(--color-text-light); line-height: 1.65; margin: 0 0 14px; }
.usl-body ol, .usl-body ul { padding-left: 22px; margin: 0 0 14px; }
.usl-body li { color: var(--color-text-light); line-height: 1.6; margin-bottom: 10px; }
.usl-body strong { color: var(--color-dark); }

/* FAQ-аккордеон — тот же рисунок, что calc-faq */
.usl-faq { margin-top: 48px; }
.usl-faq__heading { font-size: 24px; font-weight: 700; color: var(--color-dark); text-align: center; margin: 0 0 18px; }
.usl-faq__item {
    border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px;
    padding: 0 16px; margin-bottom: 10px; background: #fff;
}
.usl-faq__item summary {
    cursor: pointer; list-style: none; position: relative;
    padding: 14px 32px 14px 0; font-weight: 600; color: var(--color-dark);
    transition: color 160ms ease;
}
.usl-faq__item summary:focus-visible { outline: 2px solid var(--color-primary, #0e6d7c); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
    .usl-faq__item summary:hover { color: var(--color-primary, #0e6d7c); }
}
.usl-faq__item summary::-webkit-details-marker { display: none; }
.usl-faq__item summary::after {
    content: ''; position: absolute; right: 4px; top: 50%;
    width: 8px; height: 8px; border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: translateY(-70%) rotate(45deg); transition: transform 160ms ease;
}
.usl-faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.usl-faq__answer { padding-bottom: 14px; }
.usl-faq__answer p { margin: 0 0 10px; color: var(--color-text-light); line-height: 1.6; }

/* Карточки услуг (хаб + «Другие услуги») */
.usl-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 576px) { .usl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .usl-grid { grid-template-columns: repeat(3, 1fr); } }
.usl-card {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    padding: 20px 44px 20px 20px; background: #fff;
    border: 1px solid rgba(0, 0, 0, .08); border-radius: 14px;
    text-decoration: none;
    transition: box-shadow 200ms cubic-bezier(.23, 1, .32, 1), transform 200ms cubic-bezier(.23, 1, .32, 1);
}
.usl-card:active { transform: scale(.98); }
.usl-card:focus-visible { outline: 2px solid var(--color-primary, #0e6d7c); outline-offset: 2px; }
.usl-card__ico { color: var(--color-primary, #0e6d7c); }
.usl-card__title { font-size: 17px; font-weight: 700; color: var(--color-dark); }
.usl-card__sub { font-size: 14px; color: var(--color-text-muted); line-height: 1.45; }
.usl-card__arrow { position: absolute; right: 16px; top: 22px; color: var(--color-text-muted); transition: transform 200ms cubic-bezier(.23, 1, .32, 1), color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
    .usl-card:hover { box-shadow: 0 8px 24px rgba(14, 42, 48, .10); transform: translateY(-2px); }
    .usl-card:hover .usl-card__arrow { transform: translateX(4px); color: var(--color-primary, #0e6d7c); }
}

/* CTA-блок — как на калькуляторе */
.usl-cta {
    margin-top: 40px; padding: 32px 24px; text-align: center;
    background: rgba(14, 109, 124, .06); border-radius: 16px;
}
.usl-cta__title { font-size: 22px; font-weight: 700; color: var(--color-dark); margin: 0 0 8px; }
.usl-cta__subtitle { color: var(--color-text-light); max-width: 560px; margin: 0 auto 18px; line-height: 1.55; }
.usl-cta__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 12px;
    background: #f57c00; color: #fff; font-weight: 700; text-decoration: none;
    transition: background 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.usl-cta__btn:active { transform: scale(.97); }
.usl-cta__btn:focus-visible { outline: 2px solid var(--color-dark); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .usl-cta__btn:hover { background: #e56f00; color: #fff; transform: translateY(-1px); }
}

.usl-others { margin-top: 48px; }
.usl-others__heading { font-size: 24px; font-weight: 700; color: var(--color-dark); margin: 0 0 6px; }

/* Подборка объектов на странице района (rayon.tpl использует этот же файл стилей) */
.rayon-listings { margin-top: 48px; }
.rayon-listings .usl-others__heading { margin-bottom: 18px; }

@media (max-width: 767px) {
    .usl-page { padding: 20px 0 48px; }
    .usl-hero__title { font-size: 26px; }
    .usl-faq__heading, .usl-others__heading { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .usl-card, .usl-card__arrow, .usl-cta__btn { transition: none; }
    .usl-card:hover, .usl-card:active, .usl-cta__btn:hover, .usl-cta__btn:active { transform: none; }
}