/*
====================================================================

Страница «Услуга» (одиночная страница /services/{slug}/)

Контентная страница переменной длины - каркас главной
(.dd-front-section, section.css) здесь не используется: там паддинг
и min-height рассчитаны под блок-на-экран, а для длинного текста это
только раздувает пустое место.

Лента - тот же max-width, что у узкой ленты главной и страницы
«О клинике» (min(90vw, 1200px), section.css), но собственным классом:
страница не зависит от каркаса секций главной.

Клиренс под фиксированным навбаром даёт общий механизм
#content / .dd-breadcrumbs (assets/css/components.css) - здесь его
не дублируем.

====================================================================
*/


.dd-page-service__inner {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
}

@media (min-width: 769px) {

    .dd-page-service__inner {
        width: min(90vw, 1200px);
        padding: 0;
    }

}


/* ================================================================
   Hero: изображение и заголовок
   ================================================================ */

.dd-page-service__hero-media {
    padding: clamp(24px, 4vw, 40px) 0 0;
    background: var(--dd-background);
}

.dd-page-service__hero-image {
    display: block;
    width: 100%;
    height: auto;

    aspect-ratio: 22 / 10;
    object-fit: cover;
    border-radius: 14px;
}

.dd-page-service__hero {
    padding: clamp(24px, 4vw, 40px) 0 clamp(20px, 3vw, 32px);
    background: var(--dd-background);
}

.dd-page-service__title {
    margin: 0;
    color: var(--dd-primary);
    text-align: center;
}


/* ================================================================
   Контент услуги (Gutenberg the_content)
   ================================================================ */

.dd-page-service__content {
    padding-bottom: clamp(32px, 5vw, 56px);
    background: var(--dd-background);
}

.dd-page-service__content > .dd-page-service__inner > :first-child {
    margin-top: 0;
}

.dd-page-service__content > .dd-page-service__inner > :last-child {
    margin-bottom: 0;
}

/* Роль title - как у заголовков блоков главной (.dd-services__title и
   аналоги): размер уже задан глобально (typography.css, теговый h2),
   здесь только цвет и собственные отступы контентного текста. */
.dd-page-service__content h2 {
    margin: 1.4em 0 .7em;
    color: var(--dd-primary);
}

/* Роль card-title - как у заголовка карточки (.dd-services__card-title
   и аналоги): размер уже задан глобально, цвет - обычный текстовый. */
.dd-page-service__content h3 {
    margin: 1.2em 0 .6em;
    color: var(--dd-text);
}

.dd-page-service__content p,
.dd-page-service__content li {
    font-size: var(--dd-card-text);
    line-height: var(--dd-card-text-lh);
}

.dd-page-service__content p,
.dd-page-service__content ul,
.dd-page-service__content ol {
    margin: 0 0 1.1em;
}

/* ----------------------------------------------------------------
   Галереи и картинки - radius 14px (единый стандарт hero-изображений
   страниц), собственные отступы блока сохраняются как есть.
   ---------------------------------------------------------------- */

.dd-page-service__content .wp-block-gallery img,
.dd-page-service__content .wp-block-image img {
    border-radius: 14px;
}


/* ----------------------------------------------------------------
   Таблицы - тизовая шапка, зебра рядов, собственный горизонтальный
   скролл на мобильном (контейнер не растягивает страницу).
   ---------------------------------------------------------------- */

.dd-page-service__content .wp-block-table {
    margin: 0 0 1.5em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dd-page-service__content .wp-block-table table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: var(--dd-card-text);
}

.dd-page-service__content .wp-block-table th,
.dd-page-service__content .wp-block-table td {
    padding: 12px 16px;

    /*
     * border: 0 гасит рамку ядра WP (.wp-block-table td { border: 1px
     * solid } цветом текста) - она давала тёмные вертикальные линии.
     * Остаются только тонкие горизонтальные разделители строк.
     */
    border: 0;
    border-bottom: 1px solid var(--dd-primary-grey);
    text-align: left;
}

.dd-page-service__content .wp-block-table thead th {
    color: var(--dd-white);
    background: var(--dd-primary);
    font-family: var(--dd-font-ui);
    font-weight: var(--dd-font-weight-semibold);
}

.dd-page-service__content .wp-block-table tbody tr:nth-child(even) {
    background: var(--dd-primary-grey);
}


/* ================================================================
   Кнопка-переход в прайс-лист
   ================================================================ */

.dd-page-service__cta {
    padding: 0 0 clamp(40px, 6vw, 72px);
    text-align: center;
    background: var(--dd-background);
}


/*
 * Картинки, вписанные в текст (правки Эда): float с обтеканием,
 * стороны чередуются в контенте. На узких экранах обтекание
 * разворачивается в столбик.
 */
.dd-page-service__content .wp-block-image.alignleft {
    float: left;
    margin: 6px 28px 14px 0;
    max-width: 46%;
}

.dd-page-service__content .wp-block-image.alignright {
    float: right;
    margin: 6px 0 14px 28px;
    max-width: 46%;
}

.dd-page-service__content .wp-block-image.aligncenter {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

/* Заголовки секций не заезжают под флоат. */
.dd-page-service__content h2,
.dd-page-service__content h3 {
    clear: both;
}

@media (max-width: 700px) {

    .dd-page-service__content .wp-block-image.alignleft,
    .dd-page-service__content .wp-block-image.alignright {
        float: none;
        margin: 0 auto 16px;
        max-width: 100%;
    }

    .dd-page-service__content .wp-block-image.alignleft img,
    .dd-page-service__content .wp-block-image.alignright img {
        width: 100% !important;
    }

}