/* Секции страницы. Каждая секция — будущий шаблон темы WordPress (template-parts/<имя>.php). */

/* ---------- Шапка (template-parts/header.php) ---------- */
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--grid-container);
  margin-inline: auto;
  padding: var(--space-16) var(--space-24);
  background: var(--color-bg-default);
  border-radius: var(--radius-container);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

/* В макете 36 — округлено вверх по правилу до 40 (docs/apply-to-layout.md, раздел 7) */
.brand__mark {
  width: var(--size-40);
  height: var(--size-40);
}

.brand__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav {
  display: flex;
  align-items: center;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-16);
  color: var(--color-text-default);
}

.nav__link:hover {
  color: var(--color-text-primary);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
}

.phone-link .icon {
  color: var(--color-icon-primary);
}

/* ---------- Первый экран (template-parts/hero.php) ---------- */
.hero__card {
  padding: var(--space-40);
}

.hero__content {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  align-self: start;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-top: var(--space-4);
}

.accent {
  color: var(--color-text-primary);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.hero__stats {
  display: flex;
  gap: var(--grid-gutter);
}

.stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-32) var(--space-16);
  background: var(--color-bg-brand);
  border-radius: var(--radius-button);
}

.stat__value {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.stat__value--accent {
  color: var(--color-text-primary);
}

.stat__star {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}

.hero__media {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-16);
  border-radius: var(--radius-block);
  background: var(--color-bg-muted) center / cover no-repeat;
  overflow: hidden;
}

.media-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-16);
  background: var(--color-bg-default);
  border-radius: var(--radius-button);
}

.media-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  padding: var(--space-16);
  background: var(--color-bg-default);
  border-radius: var(--radius-button);
}

.media-note__main {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.media-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-md);
  height: var(--size-control-md);
  border-radius: var(--radius-button);
  background: var(--color-bg-primary);
  color: var(--color-text-on-primary);
}

.media-note__check {
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
}

/* ---------- Общее для секций: карточка с большими отступами и заголовок секции ---------- */
.section__card--roomy {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  padding: var(--space-64) var(--space-40);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: var(--grid-column-2);
}

.section-head__eyebrow {
  color: var(--color-text-primary);
  text-transform: uppercase;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--grid-gutter);
}

.section-head-row .section-head {
  max-width: none;
  flex: 1 1 0;
}

.section-head-row .section-head p:last-child {
  max-width: var(--grid-column-3);
}

/* ---------- Почему выбирают нас (template-parts/why-choose.php) ---------- */
/* Высота ряда задаётся пропорцией узких плиток (в макете 345 × 300), а не размером в px */
.why__grid .span-3 {
  aspect-ratio: 7 / 6;
}

.why__grid .span-4 {
  aspect-ratio: 3 / 2; /* в макете 469 × 300 */
}

.infoblock {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-16);
  padding: var(--space-24);
  border-radius: var(--radius-block);
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.infoblock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: var(--space-8);
  border-radius: 50%;
  background: var(--color-bg-primary);
  color: var(--color-text-on-primary);
}

.infoblock__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.infoblock__value {
  color: var(--color-text-primary);
}

.infoblock__unit {
  font-size: var(--font-size-h5);
}

.infoblock--photo {
  position: relative;
  background: var(--color-bg-inverse) center / cover no-repeat;
  color: var(--color-text-on-inverse);
}

/* Слои плитки с фото: фото (фон или __mirror) → затемнение (::after) → текст */
.infoblock--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.infoblock--photo > .infoblock__text {
  position: relative;
  z-index: 1;
}

.infoblock--photo .infoblock__value {
  color: inherit;
}

/* Широкая плитка: фото отражено по горизонтали, как в макете; справа затемнение */
.infoblock--wide {
  align-items: flex-end;
}

.infoblock--wide .infoblock__text {
  width: var(--grid-column-3);
}

.infoblock--wide::after {
  background: linear-gradient(270deg, var(--color-bg-inverse) 30%, transparent 67%);
}

.infoblock__mirror {
  position: absolute;
  inset: 0;
  background: var(--color-bg-inverse) center / cover no-repeat;
  transform: scaleX(-1);
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }

/* ---------- Услуги (template-parts/services.php) ---------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.service-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-block);
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.service-card__image {
  display: flex;
  align-items: flex-start;
  aspect-ratio: 2 / 1; /* в макете 469 × 240 */
  padding: var(--space-16);
  border-radius: var(--radius-block);
  background: var(--color-bg-muted) center / cover no-repeat;
}

.media-tag--sm {
  padding: var(--space-8);
}

.service-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
  padding: var(--space-24);
}

.service-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.service-card__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.service-card__arrow {
  color: var(--color-icon-default);
}

/* ---------- Первый визит (template-parts/first-visit.php) ---------- */
.section__card--roomy.grid-12 {
  display: grid;
}
.visit__intro {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-64);
}

.visit__intro .text-link {
  margin-top: var(--space-24);
}

.visit__rate {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.visit__steps {
  grid-column: span 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-self: start;
}

.step-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-16);
  aspect-ratio: 2 / 1; /* в макете 496 × 254 */
}

.step-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.step-card__meta {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-16);
  border-top: var(--border-width-default) solid var(--color-border-brand);
}

/* ---------- Цены (template-parts/pricing.php) ---------- */
.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.pricing__head .section-head {
  max-width: none;
}

.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--border-width-default) solid var(--color-border-brand);
  border-radius: var(--radius-block);
  overflow: hidden;
}

.price-table th,
.price-table td {
  padding: var(--space-16) var(--space-24);
  text-align: left;
}

.price-table th {
  background: var(--color-bg-brand);
  border-bottom: var(--border-width-default) solid var(--color-border-brand);
  text-transform: uppercase;
}

.price-table tbody tr + tr td {
  border-top: var(--border-width-default) solid var(--color-border-brand);
}

.price-table col.price-table__col {
  width: var(--grid-column-3);
}

.price-table .price-table__fee {
  text-align: right;
}

.price-table__fee--accent {
  color: var(--color-text-primary);
}

.pricing__cards {
  display: flex;
  gap: var(--grid-gutter);
}

.info-card {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.info-card__icon {
  width: var(--size-control-md);
  height: var(--size-control-md);
  background: var(--color-bg-brand-strong);
}

.info-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.info-card__title {
  color: var(--color-text-primary);
}

/* ---------- Врачи (template-parts/doctors.php) ---------- */
.doctors__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.doctors__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.doctor-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-block);
  background: var(--color-bg-subtle);
}

.doctor-card__image {
  display: flex;
  align-items: flex-start;
  aspect-ratio: 8 / 7; /* в макете 344 × 300 */
  padding: var(--space-16);
  border-radius: var(--radius-block);
  background: var(--color-bg-strong) center / cover no-repeat;
}

.doctor-card__tag {
  padding: var(--space-4) var(--space-16);
}

.doctor-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
}

.doctor-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.doctor-card__name {
  font-weight: var(--font-weight-body-strong);
}

.doctor-card__about {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.doctor-card .btn {
  width: 100%;
}

/* ---------- Карточка целиком — ссылка (услуги и врачи) ----------
   Ссылка одна (стрелка услуги, имя врача); её невидимый слой растянут на всю карточку.
   Кнопка «Book with …» лежит поверх слоя и открывает запись. Рамка фокуса — на всей карточке. */
.service-card,
.doctor-card {
  position: relative;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-link:focus-visible {
  outline: none;
}

.service-card:has(.card-link:focus-visible),
.doctor-card:has(.card-link:focus-visible) {
  outline: var(--button-focus-width) solid var(--button-focus-ring);
  outline-offset: var(--button-focus-width);
}

.doctor-card .btn {
  position: relative;
}

.service-card__tags {
  padding-top: var(--space-16);
  border-top: var(--border-width-default) solid var(--color-border-default);
  color: var(--color-text-primary);
}

/* Карточка секции с уменьшенным промежутком между заголовком и содержимым (в макете 32) */
.section__card--tight {
  gap: var(--space-32);
}

/* ---------- Отзывы (template-parts/testimonials.php) ---------- */
/* Сетка внутри карточки: промежуток между колонками — поле сетки, а не 64 от --roomy */
.testimonials .section__card--roomy,
.faq .section__card--roomy,
.site-footer .section__card--roomy {
  column-gap: var(--grid-gutter);
}

.rating-card {
  grid-column: span 4;
  align-self: start;
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
}

.rating-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.rating-card__score {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

/* В макете заголовок и ссылка жирные — размер из стиля текста, толщина из токена */
.rating-card__title,
.rating-card__link {
  font-weight: var(--font-weight-body-strong);
}

.rating-card__link {
  padding-top: var(--space-32);
}

.reviews {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-block);
  background: var(--color-bg-subtle);
}

/* В макете подпись полужирная (600) — в системе есть только 400 и 700, взята 700 */
.review-card__author {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-body-strong);
}

/* ---------- Вопросы (template-parts/faq.php) ---------- */
/* Заголовок — 4 колонки слева, список — 8 колонок справа */
.faq__head {
  grid-column: span 4;
  align-self: start;
  max-width: none;
}

.faq__list {
  grid-column: span 8;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.faq-item {
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-block);
  overflow: hidden;
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--color-bg-default);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-base) var(--easing-standard);
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__title {
  font-weight: var(--font-weight-body-strong);
}

.faq-item__question:hover {
  color: var(--color-text-primary);
}

/* В макете кружок 28 — округлено вверх до 32 (docs/apply-to-layout.md, раздел 7) */
.faq-item__toggle {
  width: var(--size-32);
  height: var(--size-32);
  background: var(--color-bg-subtle);
  transition: transform var(--duration-base) var(--easing-standard);
}

.faq-item[open] > .faq-item__question {
  background: var(--color-bg-subtle);
}

.faq-item[open] .faq-item__toggle {
  background: var(--color-bg-default);
  transform: rotate(180deg);
}

.faq-item__answer {
  padding: var(--space-24);
  border-top: var(--border-width-default) solid var(--color-border-default);
}

/* Пустой ответ не показывать */
.faq-item__answer:empty {
  display: none;
}

/* ---------- Запись (template-parts/booking.php) ---------- */
.booking__form,
.booking__location {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-block);
  background: var(--color-bg-subtle);
}

.booking__form {
  justify-content: space-between;
}

/* В макете карточка адреса ниже формы и с большим отступом снизу */
.booking__location {
  align-self: start;
  padding-bottom: var(--space-64);
}

.booking__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-bottom: var(--space-24);
}

.booking__step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-16);
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.booking__step-title,
.booking__step-label {
  font-weight: var(--font-weight-body-strong);
}

.booking__step-label {
  color: var(--color-text-primary);
  text-transform: uppercase;
}

.booking__reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

.reason {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-16);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-block);
  background: var(--color-bg-default);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--easing-standard);
}

.reason:hover,
.reason:has(.reason__input:checked) {
  border-color: var(--color-border-primary);
}

.reason:has(.reason__input:focus-visible) {
  outline: var(--button-focus-width) solid var(--button-focus-ring);
  outline-offset: var(--button-focus-width);
}

/* Переключатель спрятан, выбор виден по рамке карточки */
.reason__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  color: inherit;
}

.reason__urgent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-error);
}

.booking__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-16);
  border-top: var(--border-width-default) solid var(--color-border-default);
}

.booking__location {
  gap: var(--space-24);
}

/* Карта: в макете 665 × 300 */
.map {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 20 / 9;
  padding: var(--space-16);
  border-radius: var(--radius-block);
  background: var(--color-bg-inverse) center / cover no-repeat;
  color: var(--color-text-on-inverse);
  overflow: hidden;
}

.map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.map__label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* В макете кружок 36 — округлено вверх до 40 */
.map__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-40);
  height: var(--size-40);
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-bg-primary);
  color: var(--color-text-on-primary);
  box-shadow: var(--shadow-md);
}

.map__address {
  font-weight: var(--font-weight-body-strong);
}

.booking__info-title {
  font-weight: var(--font-weight-body-strong);
}

.booking__info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.booking__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

.booking__info-item--wide {
  grid-column: 1 / -1;
  padding-top: var(--space-16);
  border-top: var(--border-width-default) solid var(--color-border-default);
}

/* ---------- Подвал (footer.php) ---------- */
.site-footer .section__card--roomy {
  row-gap: var(--space-32);
}

.site-footer__brand {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.site-footer__brand .brand {
  gap: var(--space-8);
}

/* В макете кружок 28 — округлено вверх до 32 */
.site-footer__mark {
  width: var(--size-32);
  height: var(--size-32);
}

.site-footer__name {
  text-transform: uppercase;
}

.site-footer__col {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-footer__title {
  text-transform: uppercase;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__list a:not(.text-link):hover {
  color: var(--color-text-primary);
}

.site-footer__social {
  display: flex;
  gap: var(--space-16);
  padding-top: var(--space-4);
}

.site-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gutter);
  padding-top: var(--space-24);
  border-top: var(--border-width-default) solid var(--color-border-default);
}

.site-footer__disclaimer {
  max-width: var(--grid-column-3);
  font-style: italic;
}