/* =========================================================================
   Брендбук MIKOS поверх структуры medmaket.
   Источник: страница услуги /service/fotoomolozhenie-lumecca/
   Manrope · синий #042aa4 · золотой #d7b795 · крем #fefaf3 · чернила #232649
   В брендбуке нет скруглений — радиусы обнулены глобально.
   ====================================================================== */

@font-face {
    font-family: 'Manrope';
    src: url('../assets/fonts/manrope/manrope-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    /* Палитра MIKOS */
    --mikos-blue: #042aa4;
    --mikos-blue-dark: #032184;
    --mikos-blue-bright: #0033d8;
    --mikos-gold: #d7b795;
    --mikos-cream: #fefaf3;
    --mikos-sand: #fff5ea;
    --mikos-nude: #f0e9de;
    --mikos-ink: #232649;
    --mikos-muted: #787878;
    --mikos-line: #ece7de;
    --mikos-dark: #222;
    --mikos-font: 'Manrope', 'Inter', Arial, sans-serif;
    --mikos-max: 1360px;
    --mikos-gutter: clamp(20px, 4vw, 40px);

    /* Токены medmaket переведены на палитру MIKOS */
    --black: var(--mikos-ink);
    --gray: #5f6070;
    --red: var(--mikos-blue);
    --gold: var(--mikos-gold);
    --white: #fff;
    --white-gray: var(--mikos-cream);
    --red-12: rgba(4, 42, 164, .1);
    --white-50: rgba(255, 255, 255, .5);
    --white-75: rgba(255, 255, 255, .75);
    --gray-white: #8b8b95;
    --body-black: var(--mikos-ink);
    --body-gray: #5f6070;
    --body-white-gray: var(--mikos-cream);
    --body-white: #fff;
    --body-gray-white: #8b8b95;
    --stroke-white-gray: var(--mikos-line);
}

/* Атрибут hidden всегда прячет элемент: иначе display у .btn и других
   компонентов перебивает его (так была видна кнопка «Скрыть» в конфигураторе). */
[hidden] { display: none !important; }

/* Без скруглений — правило брендбука */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* В legacy main.css на мобильных стоит .card { border-radius: 20px !important } —
   у класса вес выше, чем у *, поэтому гасим его отдельно. */
.card,
.card::before,
.card::after { border-radius: 0 !important; }

html {
    scroll-behavior: smooth;
}

body {
    padding-top: 0;
    background: #fff;
    color: var(--mikos-ink);
    font-family: var(--mikos-font);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.site__content {
    min-height: 40vh;
}

/* ---------- Сетка ----------
   Один контейнер на весь сайт: шапка, подвал, hero и контентные блоки.
   Ширина — 1360px, боковые отступы — var(--mikos-gutter). */
.container {
    width: min(var(--mikos-max), calc(100% - var(--mikos-gutter) * 2));
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-inline: auto;
}

/* main.css до 991px добавляет контейнеру padding 15px !important поверх нашего
   gutter — контейнер на мобильном выходил узким. Отступ даёт только gutter. */
@media (max-width: 991px) {
    .container { padding-left: 0 !important; padding-right: 0 !important; }

    /* media.css растягивал блоки на 30px шире и сдвигал на -15px — под прежние поля
       контейнера 15px. Полей больше нет, и блоки вылезали за экран справа
       (горизонтальная прокрутка на услугах). Возвращаем им ширину контейнера. */
    .card,
    .news-item,
    .quiz__content,
    .last-posts__header {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
    .cta-block { margin-left: 0; margin-right: 0; }
}

/* Секции вместо белых плашек со скруглением */
.card {
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: clamp(48px, 6vw, 88px);
}

.content {
    padding-bottom: clamp(48px, 6vw, 96px);
}

/* ---------- Типографика ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mikos-font);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--mikos-ink);
}

h1 {
    font-size: clamp(32px, 3.6vw, 56px);
    letter-spacing: -.03em;
    margin: 0 0 24px;
}

h2 {
    font-size: clamp(26px, 2.6vw, 40px);
    color: var(--mikos-blue);
    margin: 0 0 28px;
}

h3 {
    font-size: clamp(22px, 2vw, 30px);
    margin: 0 0 20px;
}

h4 {
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 16px;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--mikos-blue);
    transition: color .2s;
}

a:hover {
    color: var(--mikos-gold);
}

.text-block {
    font-size: 17px;
    line-height: 1.65;
    color: var(--mikos-ink);
}

.text-block a {
    border-bottom: 1px solid rgba(4, 42, 164, .25);
}

.text-block ul {
    margin: 0 0 1em;
    list-style: none;
}

.text-block ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
}

.text-block ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--mikos-gold);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Кнопки ---------- */
.btn,
button.btn,
a.btn,
.route-btn,
.contacts-tour-link,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 16px 40px;
    border: 1px solid var(--mikos-blue);
    background: var(--mikos-blue);
    color: #fff;
    font-family: var(--mikos-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s, border-color .25s, color .25s;
}

.btn:hover,
a.btn:hover,
.route-btn:hover,
.contacts-tour-link:hover,
input[type="submit"]:hover {
    background: var(--mikos-blue-bright);
    border-color: var(--mikos-blue-bright);
    color: #fff;
}

/* Призрачная кнопка. `button.btn_border` нужен, потому что выше в списке основной
   кнопки есть `button.btn` — без тега селектор проигрывал ему по весу. */
.btn_border,
button.btn_border,
.btn_light,
button.btn_light,
.route-btn_taxi,
.route-btn_map {
    background: #fff;
    border: 1px solid var(--mikos-line);
    color: var(--mikos-ink);
}

.btn_border:hover,
button.btn_border:hover,
.btn_light:hover,
button.btn_light:hover,
.route-btn_taxi:hover,
.route-btn_map:hover {
    background: var(--mikos-cream);
    border-color: var(--mikos-gold);
    color: var(--mikos-ink);
}

/* ---------- Поля ввода ---------- */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea,
select {
    min-height: 56px;
    padding: 14px 18px;
    border: 1px solid var(--mikos-line);
    background: #fff;
    color: var(--mikos-ink);
    font-family: var(--mikos-font);
    font-size: 16px;
    outline: none;
    transition: border-color .2s;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--mikos-blue);
}

/* ---------- Хлебные крошки ---------- */
.bread__line {
    padding: 24px 0 0;
}

.breadcrumb {
    margin: 0 0 24px;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mikos-muted);
}

.breadcrumb li,
.breadcrumb a,
.breadcrumb span {
    display: inline-block;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mikos-muted);
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    display: inline-block;
    margin: 0 8px;
    color: rgba(35, 38, 73, .35);
}

.breadcrumb a {
    color: var(--mikos-blue);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--mikos-gold);
}

/* ---------- Модальное окно ---------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(19, 21, 41, .45);
    backdrop-filter: blur(4px);
}

.modal .modal-content {
    position: relative;
    width: min(760px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    padding: clamp(24px, 4vw, 48px);
    background: #fff;
    border: 1px solid var(--mikos-line);
}

.modal button.close,
.modal .close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--mikos-line);
    background: #fff;
    cursor: pointer;
}

.modal .close::before,
.modal .close::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 19px;
    width: 16px;
    height: 1px;
    background: var(--mikos-ink);
}

.modal .close::before { transform: rotate(45deg); }
.modal .close::after { transform: rotate(-45deg); }

.modal .close:hover {
    border-color: var(--mikos-gold);
}

/* ---------- Прочее ---------- */
img {
    max-width: 100%;
    height: auto;
}

.map-frame iframe,
.map-frame > * {
    display: block;
    width: 100%;
    min-height: 420px;
    border: 0;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--mikos-line);
    color: var(--mikos-ink);
    text-decoration: none;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    border-color: var(--mikos-blue);
    background: var(--mikos-blue);
    color: #fff;
}

/* =========================================================================
   Базовая типографика сайта. Блок появился, чтобы перебить «Набор по умолчанию»
   Elementor (post-28.css задавал h1–h4, ссылкам, кнопкам и полям шрифт Inter).
   Elementor удалён, но правила остались единственным источником этих стилей —
   удалять их нельзя, иначе типографика вернётся к main.css.
   ====================================================================== */
.site h1,
.site h2,
.site h3,
.site h4,
.site h5,
.site h6 {
    font-family: var(--mikos-font);
    font-weight: 300;
    letter-spacing: -.02em;
}

.site h1 { color: var(--mikos-ink); font-size: clamp(32px, 3.6vw, 56px); line-height: 1.2; }
.site h2 { color: var(--mikos-blue); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.2; }
.site h3 { color: var(--mikos-ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.25; }
.site h4 { color: var(--mikos-ink); font-size: 22px; font-weight: 400; }

.site a { color: var(--mikos-blue); font-family: var(--mikos-font); }
.site a:hover { color: var(--mikos-gold); }

/* Кнопки-ссылки: цвет текста не должен перебиваться правилом для ссылок */
.site a.btn,
.site .btn,
.site .route-btn,
.site .contacts-tour-link { color: #fff; }

.site a.btn:hover,
.site .btn:hover,
.site .contacts-tour-link:hover { color: #fff; }

.site .btn_border,
.site .btn_light,
.site .route-btn_taxi,
.site .route-btn_map,
.site .route-btn_taxi:hover,
.site .route-btn_map:hover { color: var(--mikos-ink); }
.site p { margin-bottom: 1em; }

.site button,
.site input[type="button"],
.site input[type="submit"] {
    font-family: var(--mikos-font);
    border-radius: 0;
}

.site input:focus:not([type="button"]):not([type="submit"]),
.site textarea:focus,
.site select:focus {
    border-width: 1px;
    border-color: var(--mikos-blue);
}