/* matesheva.ru — визитка психолога-консультанта.
   Геометрия и цвета сняты замерами с оригинала (rfeatsuzi.taplink.ws)
   в headless Chrome при окне 900px: контент 792px, центрирован, фоны секций
   залиты на всю ширину окна. Без внешних зависимостей: шрифты системные,
   иконки — inline SVG. */

:root {
    --brown: #694f4c;      /* основной текст, кнопки, кружки иконок */
    --green: #5d755d;      /* ссылки */
    --green-soft: #8a9988; /* подписи */
    --cream: #fffaf4;
    --near-white: #fbfefb; /* фон секции с баннерами */
    --beige: #f0e8e0;      /* фон секции контактов */
    --card: #efefef;       /* фон карточек услуг (замер оригинала) */
    --white: #fff;

    --serif: Georgia, "Times New Roman", "Droid Serif", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Контент упирается в 792px, ниже — жидкий с отступами 14px.
       792 + 2*14 = 820 при box-sizing: border-box. */
    --col: 820px;
    --pad: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--brown);
    background: var(--beige);
}

/* Изображения никогда не выходят за колонку: исходники 940–1080px шириной */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.section { background: var(--white); }
.section--intro   { background: var(--near-white); }
.section--contact { background: var(--beige); }

.wrap {
    max-width: var(--col);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* Секция баннеров. Вертикальные отступы соответствуют блокам-распоркам
   (break) из структуры taplink: сверху 44px, снизу 14px, между баннерами 14px. */
.wrap--flush { padding-top: 44px; padding-bottom: 14px; }

.banner + .banner { margin-top: 14px; }

/* ---------- Заголовки ---------- */

.heading {
    margin: 0 0 15px;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--brown);
}

.heading--center { text-align: center; }

.subheading {
    margin: 0 0 38px;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--brown);
}

.subheading b { font-weight: 700; }

/* В оригинале обе строки этого блока крупные (text_size: h3) —
   вторая лишь без жирности, а не мельче. */
.subheading__note {
    display: block;
    margin-top: 6px;
    font-family: var(--sans);
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
}

/* ---------- Секция «Мой опыт» ---------- */

.section--experience .wrap { padding-top: 58px; padding-bottom: 0; }

.carousel {
    position: relative;
    max-width: var(--col);
    margin: 0 auto;
    padding: 0 var(--pad);
}

.carousel__viewport {
    overflow: hidden;
    background: var(--card);
}

.carousel__viewport:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.carousel__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .45s ease;
    will-change: transform;
}

.carousel__slide {
    flex: 0 0 100%;
    min-width: 100%;
}

/* Сертификаты разного формата (4:3 и вертикальные) вписываем целиком,
   иначе обрезались бы подписи и печати. */
.carousel__slide img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--card);
}

@supports not (aspect-ratio: 4 / 3) {
    .carousel__slide img { height: 594px; }
}

.carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(105, 79, 76, .5);
    color: var(--white);
    cursor: pointer;
    transition: background .2s;
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible { background: var(--brown); }

/* Сдвиг на боковой отступ колонки, чтобы стрелки лежали на картинке */
.carousel__arrow--prev { left: calc(var(--pad) + 8px); }
.carousel__arrow--next { right: calc(var(--pad) + 8px); }

.carousel__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 12px 0 0;
}

.carousel__dot {
    width: 9px; height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d8d2cc;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.carousel__dot[aria-current="true"] {
    background: var(--brown);
    transform: scale(1.15);
}

/* ---------- Секция «Консультации» ---------- */

.section--services .wrap { padding-top: 60px; padding-bottom: 62px; }

.services {
    margin: 0 0 46px;
    padding: 0;
    list-style: none;
}

/* Замер оригинала: карточка 80px высотой (первая 104 — заголовок переносится
   на две строки), зазор между карточками 4px, фон #efefef,
   кружок 30px в 15px от левого края, текст с отбивкой 16px от кружка. */
.service {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 80px;
    padding: 16px 15px;
    background: var(--card);
    border-radius: 8px;
}

.service + .service { margin-top: 4px; }

/* Кружок залит коричневым, значок белый — так в оригинале */
.service__icon {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--brown);
    color: var(--white);
}

/* Текстовая колонка в оригинале узкая (~220px при карточке 792px), поэтому
   «ОЗНАКОМИТЕЛЬНАЯ КОНСУЛЬТАЦИЯ 60 МИНУТ» переносится на две строки.
   Без этого ограничения заголовок укладывается в одну и карточка ниже. */
.service__body {
    display: block;
    max-width: 220px;
}

.service__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.service__price {
    display: block;
    font-size: 14px;
    line-height: 1.7;
}

/* ---------- Список «что мы делаем» ---------- */

.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Шаг между пунктами в оригинале ~25px: строка 15px/1.45 плюс 3px */
.checklist li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 3px;
    line-height: 1.45;
}

/* Маркер вплотную к тексту, как в оригинале */
.checklist li::before {
    content: "▫";
    position: absolute;
    left: 0;
    font-size: 12px;
}

/* ---------- Опросник ---------- */

.section--quiz { background: var(--cream); }
.section--quiz .wrap { padding-top: 40px; padding-bottom: 44px; }
.section--quiz .heading { font-size: 24px; }

.quiz-lead {
    margin: 0 0 20px;
    text-align: center;
}

.quiz-note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--green-soft);
}

.quiz-note a { color: var(--green); }

/* ---------- Контакты ---------- */

.section--contact .wrap { padding-top: 21px; padding-bottom: 34px; }

/* Заголовок здесь мелкий (в оригинале text_size: lg), а не как «Мой опыт!» */
.section--contact .heading {
    margin-bottom: 22px;
    font-size: 18px;
}

/* Замер оригинала: две кнопки по 389px с зазором 14px, высота 60px */
.messengers {
    display: flex;
    gap: 14px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.messengers li { flex: 1 1 0; }

.messenger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 60px;
    border-radius: 8px;
    background: var(--brown);
    color: var(--white);
    text-decoration: none;
    transition: opacity .2s;
}

.messenger:hover,
.messenger:focus-visible { opacity: .85; }

.btn {
    display: block;
    padding: 20px 18px;
    border-radius: 8px;
    background: var(--brown);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.btn:hover,
.btn:focus-visible { opacity: .9; }

.btn--pulse { animation: pulse 2.2s ease-in-out infinite; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(105, 79, 76, .45); }
    70%      { box-shadow: 0 0 0 12px rgba(105, 79, 76, 0); }
}

/* ---------- Доступность ---------- */

@media (prefers-reduced-motion: reduce) {
    .carousel__track { transition: none; }
    .btn--pulse { animation: none; }
}

/* Фоны секций залиты на всю ширину окна, центрируется только контент —
   отдельная десктопная раскладка не нужна. */