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

Страница «Услуги» - витрина всех услуг

Карточки визуально - те же, что у блока «Наши услуги» главной
(assets/css/blocks/services.css, класс .dd-services__card и соседи):
тонкая тизовая рамка, radius 9px, ярлык-технология, иконка, цена,
подъём на hover. Здесь стили не копируются, а переиспользуются -
собственные правила только там, где страница отличается от блока
главной:

- вся карточка - ссылка (.dd-services__card теперь на <a>, а не на
  <li>), поэтому нужен явный сброс подчёркивания и цвета ссылки,
  плюс иммунитет к глобальному a:hover (см. ниже);
- у 3 из 9 услуг (Хирургия, Детская стоматология, Проф-гигиена) нет
  готовой плоской иконки-глифа - вместо неё фото-превью с референса,
  оформленное кругом (.dd-services__icon--photo);
- у 2 из 9 услуг (Хирургия, Детская стоматология) на референсе не
  найдена цена - кнопка "Подробнее" сама берёт на себя нижний якорь
  карточки вместо цены (.dd-page-services__link--no-price).

Лента страницы - тот же узкий контентный max-width, что у «О
клинике»/«Контакты» (min(90vw, 1200px)): это обычная контентная
страница, а не блок-на-экран, поэтому каркас .dd-front-section
(section.css) не используется. Клиренс под фиксированным навбаром
даёт общий механизм #content (assets/css/components.css) - здесь не
дублируется.

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

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

@media (min-width: 769px) {

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

}


/* ================================================================
   Заголовок страницы
   ================================================================ */

.dd-page-services__hero {
    padding: clamp(32px, 5vw, 56px) 0 clamp(20px, 3vw, 32px);
    background: var(--dd-background);
}

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


/* ================================================================
   Сетка карточек
   ================================================================ */

.dd-page-services__content {
    padding-bottom: clamp(40px, 6vw, 72px);
    background: var(--dd-background);
}

/*
 * Колонки/зазоры/центрирование - целиком из .dd-services__grid
 * (blocks/services.css). Здесь только карточка-обёртка <li>: сам
 * грид её не тянет по высоте отдельно, но список ей нужно снять
 * маркер по умолчанию - .dd-services__grid уже это делает для всех
 * <li> внутри, дополнительных правил не требуется.
 */
.dd-page-services__card {
    display: flex;
}

/*
 * .dd-services__card теперь на <a> - карточка кликабельна целиком.
 * Явно снимаем ссылочные умолчания: подчёркивание и цвет ссылки,
 * иначе рамка вокруг карточки "текста" получает синий/подчёркнутый
 * вид вместо белой карточки блока главной.
 */
.dd-page-services__link {
    width: 100%;
    color: inherit;
}

/*
 * На главной подъём карточки на hover (.dd-services__card:hover,
 * blocks/services.css) достаточен - там наводимый элемент не
 * фокусируется с клавиатуры (фокус получает только вложенная ссылка
 * "Подробнее"). Здесь карточка сама стала фокусируемой ссылкой,
 * поэтому клавиатурный фокус должен давать тот же подъём, что и
 * hover мышью - значения продублированы намеренно, а не через
 * @extend/copy правила из blocks/services.css.
 */
.dd-page-services__link:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 16, 19, .10);
}

/*
 * Глобальный a:hover красит ссылки красным (color наследуется вниз
 * по потомкам, у которых свой color не задан). У eyebrow/title/price
 * цвет уже задан явно в blocks/services.css - они иммунны. У текста
 * карточки цвета не было (наследовался от фона, не от ссылки) -
 * задаём его явно и здесь, чтобы hover всей карточки не перекрашивал
 * текст в красный.
 */
.dd-page-services__link:hover .dd-services__card-text,
.dd-page-services__link:focus-visible .dd-services__card-text {
    color: var(--dd-text);
}

/*
 * "Подробнее" был отдельной ссылкой на главной - здесь декоративная
 * метка внутри ссылки-карточки (вложенный <a> внутри <a> невалиден).
 * Хover-затемнение переносим на наведение по всей карточке.
 */
.dd-page-services__link:hover .dd-services__more,
.dd-page-services__link:focus-visible .dd-services__more {
    filter: brightness(.9);
}

/*
 * Без цены (2 из 9 карточек - см. services-data.php) "Подробнее"
 * сама встаёт на нижний якорь карточки вместо цены.
 */
.dd-page-services__link--no-price .dd-services__more {
    margin-top: auto;
}

/*
 * Фото-иконка вместо плоского глифа (Хирургия, Детская стоматология,
 * Проф-гигиена - готового глифа под них ещё нет). Тот же квадрат
 * 64x64, что у остальных 6, но кругом и с обрезкой по центру вместо
 * растяжения фото в квадрат.
 */
.dd-services__icon--photo {
    overflow: hidden;
    border-radius: 50%;
}

.dd-services__icon--photo img {
    object-fit: cover;
}


/*
 * Фото услуги (как на референсной странице услуг) вместо иконки:
 * во всю ширину карточки, вылезает из паддингов к самым краям,
 * пропорция исходников 550x300.
 */
.dd-page-services__photo {
    width: calc(100% + 56px);
    max-width: none;
    margin: calc(-1 * clamp(20px, 2vw, 26px)) -28px 18px;

    aspect-ratio: 550 / 300;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* «Профессиональная» не влезает в колонку - только это слово мельче. */
.dd-services__card-title-small {
    font-size: .72em;
}