/* Добавления к оформлению «Айболита» — то, чего у него не было.
 *
 * У донора врачи, услуги и статьи были заведены руками, с фотографиями и
 * отдельными страницами. У нас они приезжают из данных клиники, поэтому
 * понадобились: список цен, буквенная аватарка вместо фото врача, таблица
 * часов работы и форма записи. Всё остальное — его css без изменений.
 *
 * Своих цветов здесь нет: только переменные, иначе добавления остались бы
 * бирюзовыми у клиники, выбравшей другой цвет.
 */

/* ─── логотип текстом, если картинку не загрузили ─── */
.logo__text { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
              color: var(--color-primary-dark); }

/* ─── прайс ─── */
.price-group { margin-bottom: var(--space-3); }
.price-group__heading { display: flex; align-items: center; gap: var(--space-2);
                        margin-bottom: var(--space-2); }
.price-group__heading .service-card__icon { width: 3rem; height: auto; flex: none; }
.price-list { display: grid; gap: 0; }
.price-list__item { display: flex; justify-content: space-between; gap: var(--space-2);
                    padding: .7rem 0; border-bottom: 1px solid var(--color-border); }
.price-list__item:last-child { border-bottom: none; }
.price-list__value { font-weight: 600; white-space: nowrap; color: var(--color-primary-dark);
                     font-variant-numeric: tabular-nums; }
.price-group__more { margin: .75rem 0; color: var(--color-text-muted);
                     font-size: var(--font-size-small); }

/* ─── врач без фотографии ─── */
.specialist-card__avatar { width: 5rem; height: 5rem; border-radius: 50%; margin: 0 auto .75rem;
                           display: grid; place-items: center; font-size: 1.6rem; font-weight: 700;
                           color: var(--color-primary-dark);
                           background: var(--color-background-alt); }
.specialist-card { text-align: center; }
.specialist-card__role { color: var(--color-text-muted); font-size: var(--font-size-small);
                         margin-bottom: var(--space-2); }
.specialists__grid { display: grid; gap: var(--space-3);
                     grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* ─── часы работы ─── */
.hours-list { display: grid; gap: .5rem; margin-block: var(--space-3);
              grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.hours-list__item { display: flex; justify-content: space-between; gap: var(--space-2);
                    padding: .7rem 1rem; border: 1px solid var(--color-border);
                    border-radius: var(--radius-sm); background: var(--color-surface); }
.hours-list__item--off { color: var(--color-text-muted); background: transparent; }
.hours-list__item strong { font-variant-numeric: tabular-nums; }

/* ─── форма записи ─── */
.zapis__обёртка { max-width: 44rem; }
.zapis { display: grid; gap: var(--space-3); }
.zapis__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.zapis__soglasie { font-size: var(--font-size-small); color: var(--color-text-muted); }
/* Отметки согласий. flex:none у квадратика — иначе он сжимается в полоску
   рядом с длинной подписью в две строки. */
.zapis__отметка { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; cursor: pointer; }
.zapis__отметка input { flex: none; margin-top: 3px; width: 16px; height: 16px; }
.zapis__отметка a { text-decoration: underline; }
.zapis__ответ { padding: .9rem 1.1rem; border-radius: var(--radius-sm); }
.zapis__ответ.хорошо { background: var(--color-background-alt); color: var(--color-primary-dark);
                       border: 1px solid var(--color-border); }
.zapis__ответ.плохо { background: #fff4ed; color: #9a4b16; border: 1px solid #f3d3bd; }
/* Ловушка для роботов: убрана с глаз, но не display:none — часть ботов
   пропускает скрытые так поля, а этот способ они заполняют. */
.ловушка { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── документы ─── */
.документ { max-width: 46rem; }
.документ h2 { margin: var(--space-4) 0 var(--space-1); }
.документ p, .документ ul { margin-bottom: var(--space-2); }
.документ ul { padding-left: 1.35rem; list-style: disc; }
.документ li { margin-bottom: .4rem; }
.документ a { color: var(--color-primary-dark); text-decoration: underline; }
.документ__дата { color: var(--color-text-muted); font-size: var(--font-size-small); }
.документ__сноска { margin-top: var(--space-4); padding-top: var(--space-2);
                    border-top: 1px solid var(--color-border);
                    color: var(--color-text-muted); font-size: var(--font-size-small); }

.site-footer__made { margin-top: var(--space-3); opacity: .7;
                     font-size: var(--font-size-small); }

@media (max-width: 40rem) { .zapis__row { grid-template-columns: 1fr; } }

/* ─── поля формы в окне записи ─── */
.field { display: grid; gap: .4rem; }
.field__label { font-size: var(--font-size-small); font-weight: 600;
                color: var(--color-primary-dark); }
.field__hint { font-size: var(--font-size-small); color: var(--color-text-muted); }
.field__control { width: 100%; min-height: 3rem; padding: .75rem 1rem; font: inherit;
                  color: var(--color-text); background: var(--color-surface);
                  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
                  transition: border-color var(--transition); }
.field__control:focus { outline: none; border-color: var(--color-primary); }
textarea.field__control { min-height: 5rem; resize: vertical; }
.lead-catcher .zapis { margin-top: var(--space-3); }

/* ─── отзывы и статьи, заведённые клиникой ─── */
.reviews__grid, .home-articles__grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.review-card__text { font-size: 1.02rem; }
.review-card__author { margin-top: var(--space-2); font-weight: 600;
                       color: var(--color-primary-dark); }
.article-card__media { margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
                       border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
.article-card__image { width: 100%; height: 12rem; object-fit: cover; display: block; }

/* ─── фотография врача вместо инициалов ─── */
.specialist-card__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
                          border-radius: var(--radius-md); margin-bottom: .75rem;
                          display: block; }

/* ─── страница «как поставить приложение» ─── */
.ustanovka__grid { display: grid; grid-template-columns: 1.4fr 1fr;
                   gap: var(--space-4); align-items: start; }
.ustanovka h2 { font-size: clamp(1.1rem, 1.8vw, 1.4rem);
                margin: var(--space-4) 0 var(--space-1); }
.ustanovka p { margin-bottom: var(--space-2); }
.ustanovka__шаги { padding-left: 1.35rem; list-style: decimal; margin-bottom: var(--space-2); }
.ustanovka__шаги li { margin-bottom: .4rem; }
.ustanovka__сноска { color: var(--color-text-muted); font-size: var(--font-size-small); }
.ustanovka__qr { text-align: center; position: sticky; top: 6rem; }
.ustanovka__qr img { width: min(100%, 15rem); height: auto; margin: var(--space-2) auto;
                     display: block; }
@media (max-width: 60rem) { .ustanovka__grid { grid-template-columns: 1fr; }
                            .ustanovka__qr { position: static; } }


/* Часы работы внутри блока контактов.
 *
 * Отдельного раздела на пол-экрана у них больше нет: «как доехать» и «когда
 * открыто» — один вопрос, и отвечать на него надо в одном месте. Список здесь
 * плотный, в две колонки: семь строк подряд в колонке контактов вытянули бы
 * её вдвое длиннее карты рядом.
 */
.contacts__hours { margin-block: var(--space-3); }

.contacts__hours-title {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  margin: 0 0 .5rem;
  font-weight: 600;
}

.contacts__today {
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgb(var(--color-accent-rgb) / 12%);
  color: var(--color-accent);
  font-size: .8125rem;
  font-weight: 500;
}

.contacts__hours-list {
  /* Одна колонка, а не две.
     Колонка контактов узкая, и «понедельник 09:00–20:00» в половину её
     ширины не помещается — при двух столбцах каждая вторая строка
     переносилась. Семь строк в столбик короче, чем семь перенесённых. */
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contacts__hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: .3rem 0;
  border-bottom: 1px solid var(--color-border);
}

.contacts__hours-list li.is-off { color: var(--color-text-muted); }
.contacts__hours-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

.contacts__hours-note {
  margin: .6rem 0 0;
  color: var(--color-text-muted);
  font-size: .9375rem;
}


/* Подпись под отзывом: снимок автора рядом с именем. */
.review-card__подпись { display: flex; gap: .625rem; align-items: center; margin-top: .75rem; }
.review-card__фото {
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
}
.review-card__подпись .review-card__author { margin: 0; }


/* Настоящие отзывы: звёзды, оценка и ответ клиники. */
.reviews__средняя {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}
.reviews__средняя b { color: var(--color-text); font-size: 1.25rem; }

.review-card__звёзды {
  margin: 0 0 .5rem;
  color: #f59e0b;
  font-size: 1.0625rem;
  letter-spacing: .1em;
}
/* Незаполненные звёзды — тем же знаком, но приглушённо: так их ряд не
   прыгает по ширине от оценки к оценке. */
.review-card__пусто { color: var(--color-border); }

.review-card__ответ {
  margin-top: .75rem;
  padding: .75rem;
  border-radius: var(--radius-sm);
  background: rgb(var(--color-accent-rgb) / 8%);
  font-size: .9375rem;
}
.review-card__ответ p { margin: 0; }
.review-card__ответил {
  margin-bottom: .25rem !important;
  color: var(--color-accent);
  font-weight: 600;
  font-size: .8125rem;
}