/* Планшет и телефон. Макетов для них нет — раскладка собрана по сетке системы:
   планшет — 6 колонок, телефон — 2 (tokens/layout.*.json). Точки перелома — scripts/breakpoints.mjs.
   Сетка, поля и размеры шрифтов переключаются сами через токены; здесь только перестановка блоков. */

/* На компьютере кнопки меню и телефона в меню нет */
.menu-toggle,
.nav__link--phone {
  display: none;
}

/* Пункты шапки не переносятся на вторую строку */
.site-header__bar :is(.brand__name-row, .nav__link, .phone-link) {
  white-space: nowrap;
}

/* ================= Узкий компьютер: до 1439 — шапка плотнее ================= */
@media (max-width: 1439px) {
  .nav__link {
    padding-inline: var(--space-8);
  }

  .site-header__actions {
    gap: var(--space-16);
  }
}

/* ================= Планшет: до 1279 ================= */
@media (max-width: 1279px) {

  /* Карточки секций — на всю ширину окна минус поля */
  .section__card,
  .site-header__bar {
    max-width: none;
  }

  .section__card--roomy {
    gap: var(--space-48);
    padding: var(--space-48) var(--space-32);
  }

  .section__card--tight {
    gap: var(--space-32);
  }

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

  /* ---------- Шапка: ссылки уходят в выпадающее меню ---------- */
  .site-header__bar {
    position: relative;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .menu-toggle .icon {
    transition: transform var(--duration-base) var(--easing-standard);
  }

  .is-menu-open .menu-toggle .icon {
    transform: rotate(180deg);
  }

  .site-header__actions {
    gap: var(--space-16);
  }

  /* Телефон переезжает из шапки в меню */
  .site-header__actions .phone-link {
    display: none;
  }

  .nav__link--phone {
    display: inline-flex;
    gap: var(--space-8);
    color: var(--color-text-primary);
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-8);
    padding: var(--space-8);
    border-radius: var(--radius-block);
    background: var(--color-bg-default);
    box-shadow: var(--shadow-lg);
  }

  .is-menu-open .nav {
    display: flex;
  }

  .nav__link {
    padding: var(--space-16);
    border-radius: var(--radius-button);
  }

  .nav__link:hover {
    background: var(--color-bg-subtle);
  }

  /* ---------- Первый экран ---------- */
  .hero__card {
    row-gap: var(--space-32);
    padding: var(--space-32);
  }

  .hero__content,
  .hero__media {
    grid-column: 1 / -1;
  }

  .hero__media {
    aspect-ratio: 3 / 2;
  }

  /* ---------- Почему выбирают нас: 6 колонок ---------- */
  .why__grid .span-6,
  .why__grid .span-8,
  .why__grid .span-4 {
    grid-column: span 6;
    aspect-ratio: 2 / 1;
  }

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

  /* ---------- Услуги ---------- */
  .section-head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---------- Первый визит ---------- */
  .section__card--roomy.grid-12 {
    gap: var(--space-48) var(--grid-gutter);
  }

  .visit__intro,
  .visit__steps {
    grid-column: 1 / -1;
  }

  .visit__intro {
    gap: var(--space-32);
  }

  .step-card {
    aspect-ratio: auto;
  }

  /* ---------- Врачи ---------- */
  .doctors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---------- Отзывы ---------- */
  .rating-card,
  .reviews {
    grid-column: 1 / -1;
  }

  .testimonials .section__card--roomy {
    row-gap: var(--space-16); /* как между карточками отзывов */
  }

  /* ---------- Вопросы: заголовок над списком ---------- */
  .faq__head,
  .faq__list {
    grid-column: 1 / -1;
  }

  .faq .section__card--roomy {
    row-gap: var(--space-32);
  }

  /* ---------- Запись ---------- */
  .booking__form,
  .booking__location {
    grid-column: 1 / -1;
  }

  /* Большой отступ снизу нужен только рядом с формой на компьютере */
  .booking__location {
    padding-bottom: var(--space-24);
  }

  /* ---------- Подвал: название на всю ширину, три колонки по 2 ---------- */
  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__col {
    grid-column: span 2;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }
}

/* ================= Телефон: до 767 ================= */
@media (max-width: 767px) {

  .section__card--roomy {
    gap: var(--space-40);
    padding: var(--space-40) var(--space-16);
  }

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

  /* ---------- Шапка: только название и кнопка меню ---------- */
  .site-header__bar {
    padding: var(--space-8) var(--space-16);
  }

  .brand__name-row .badge,
  .site-header__actions > .btn--primary {
    display: none;
  }

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

  .hero__content {
    gap: var(--space-32);
  }

  .hero__actions,
  .hero__stats {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }

  .stat {
    padding: var(--space-16);
  }

  .hero__media {
    aspect-ratio: 1 / 1;
  }

  /* ---------- Почему выбирают нас: все плитки на всю ширину ---------- */
  .why__grid .span-3,
  .why__grid .span-4,
  .why__grid .span-6,
  .why__grid .span-8 {
    grid-column: 1 / -1;
  }

  .why__grid .span-3,
  .why__grid .span-4 {
    aspect-ratio: auto;
  }

  .why__grid .span-6,
  .why__grid .span-8 {
    aspect-ratio: 4 / 3;
  }

  .infoblock--wide {
    align-items: stretch;
  }

  .infoblock--wide .infoblock__text {
    width: auto;
  }

  .infoblock--wide::after {
    background: var(--color-overlay);
  }

  /* ---------- Услуги, шаги, врачи — по одной карточке в ряд ---------- */
  .services__grid,
  .visit__steps,
  .doctors__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ---------- Цены: строка таблицы превращается в карточку ---------- */
  .price-table thead {
    display: none;
  }

  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table td {
    display: block;
  }

  .price-table tr {
    padding: var(--space-16);
  }

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

  .price-table th,
  .price-table td {
    padding: 0;
  }

  .price-table tbody tr + tr td {
    border-top: none;
  }

  .price-table .price-table__fee {
    padding-top: var(--space-8);
    text-align: left;
  }

  .pricing__cards,
  .info-card {
    flex-direction: column;
  }

  /* ---------- Отзывы ---------- */
  .rating-card {
    padding: var(--space-24);
  }

  /* ---------- Вопросы ---------- */
  .faq .section__card--roomy {
    row-gap: var(--space-24);
  }

  .faq-item__question,
  .faq-item__answer {
    padding: var(--space-16);
  }

  /* ---------- Запись ---------- */
  .booking__form,
  .booking__location {
    padding: var(--space-16);
  }

  .booking__reasons {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking__step-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .booking__footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }

  .map {
    aspect-ratio: 4 / 3;
  }

  .booking__info {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ---------- Подвал: всё в одну колонку ---------- */
  .site-footer__col {
    grid-column: 1 / -1;
  }

  .site-footer__disclaimer {
    max-width: none;
  }
}