/* Добавления к оформлению «Айболита» — то, чего у него не было.
 *
 * У донора врачи, услуги и статьи были заведены руками, с фотографиями и
 * отдельными страницами. У нас они приезжают из данных клиники, поэтому
 * понадобились: список цен, буквенная аватарка вместо фото врача, таблица
 * часов работы и форма записи. Всё остальное — его 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); }
.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; }