@layer pages {
  /* Главная (A_Home2) */

  /* Первый экран: надзаголовок и H1, справа кнопки записи и цена консультации (.svc-intro) */
  .home-intro { padding-top: 40px; padding-bottom: 8px; }
  .home-intro__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 48px;
    align-items: end;
    margin-bottom: 32px;
  }
  .home-intro__title { font-size: 44px; line-height: 1.12; }
  .home-intro__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
  .home-intro__buttons { justify-content: flex-end; }

  /* Плитки услуг (.svc): «Крупная + 4» — первая на две колонки, «6 одинаковых» — 3 × 2, четыре — 2 × 2 */
  .home-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(300px, auto);
    gap: 16px;
  }
  .home-services__grid--six:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .home-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow 0.2s ease;
  }
  .home-tile:hover { color: var(--ink); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
  .home-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

  .home-tile__photo {
    position: relative;
    flex: 1 1 auto;
    min-height: 170px;
    overflow: hidden;
    border-radius: var(--r-img);
    background: var(--soft-2);
  }
  .home-tile__photo > img, .home-tile__photo > .placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .home-tile__photo > img { transition: transform 0.6s ease; }
  .home-tile:hover .home-tile__photo > img { transform: scale(1.04); }
  /* Предмет на белом фоне (аппарат): целиком, белое сливается с подложкой */
  .home-tile__photo > .home-tile__cutout { object-fit: contain; mix-blend-mode: multiply; padding-top: 16px; }

  .home-tile__body { display: flex; align-items: flex-start; gap: 14px; padding: 16px 10px 8px 12px; }
  .home-tile__text { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
  .home-tile__title { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
  .home-tile__desc { font-size: 15px; line-height: 1.45; color: var(--ink-3); }

  /* Стрелка кружком (.svc-go) */
  .home-tile__go {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--soft);
    color: var(--accent-ink);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .home-tile:hover .home-tile__go { background: var(--accent); color: var(--surface); }

  /* Крупная плитка: фото слева, справа заголовок, текст, метки и «Подробнее о лечении» */
  .home-tile--big { grid-column: span 2; flex-direction: row; }
  .home-tile--big .home-tile__photo { flex: 1 1 46%; }
  .home-tile--big .home-tile__body {
    flex: 1 1 54%;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 22px 14px 30px;
  }
  .home-tile--big .home-tile__text { flex: 0 0 auto; gap: 12px; }
  .home-tile--big .home-tile__title { font-size: 32px; line-height: 1.15; }
  .home-tile--big .home-tile__desc { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
  .home-tile__chips { margin-top: 4px; }
  .home-tile__more { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--accent-ink); }
  .home-tile__more .home-tile__go { background: var(--accent); color: var(--surface); }
  .home-tile--big:hover .home-tile__more .home-tile__go { background: var(--accent-hover); }

  /* «Также лечим» (.svc-also, .pill) */
  .home-also { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
  .home-also__title { margin-right: 4px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
  .home-also__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .home-also__link:hover { border-color: var(--accent); color: var(--accent-ink); }
  .home-also__prices { margin-left: auto; }

  /* Четыре факта под плитками (.facts / .fact) */
  .home-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
  }
  .home-fact b { display: block; font-size: 20px; font-weight: 600; line-height: 1.3; }
  .home-fact span { font-size: 15px; color: var(--ink-3); }

  .home-lead-note { max-width: 560px; }

  /* Врачи (.doc) */
  .home-doctor {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: inherit;
    text-decoration: none;
  }
  .home-doctor:hover { color: inherit; }
  .home-doctor__photo { overflow: hidden; border-radius: var(--r-card); background: var(--soft); }
  .home-doctor__photo .placeholder { border-radius: var(--r-card); }
  .home-doctor__name { font-size: 19px; font-weight: 600; line-height: 1.3; }
  .home-doctor:hover .home-doctor__name { color: var(--accent-ink); }

  /* Вопросы и статьи в две колонки */
  .home-split { align-items: start; }
  .home-split__ask { align-self: flex-start; }

  /* Как нас найти: карточка с рамкой-отступом 12px, слева текст, справа карта */
  .home-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 12px;
    padding: 12px;
  }
  .home-contact__info { display: flex; flex-direction: column; gap: 20px; padding: 36px; }
  .home-contact__row { display: flex; gap: 12px; }
  .home-contact__row > .icon { flex: none; color: var(--accent-ink); }
  .home-contact__phone { color: var(--ink-3); text-decoration: none; }
  .home-contact__phone--main { font-size: 20px; font-weight: 700; color: var(--ink); }
  .home-contact__map { position: relative; min-height: 420px; }

  @media (max-width: 820px) {
    .home-intro { padding-top: 32px; }
    .home-intro__head { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 20px; }
    .home-intro__title { font-size: 30px; line-height: 1.15; }

    /* Витрина: первая плитка во всю ширину (фото 2:1, без меток), остальные по две — квадратное фото, только
       заголовок, стрелка кружком на фото */
    .home-services__grid,
    .home-services__grid--six:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
    .home-tile { padding: 6px; border-radius: var(--r-box); }
    .home-tile__photo { flex: 0 0 auto; min-height: 0; aspect-ratio: 1 / 1; border-radius: 14px; }
    .home-tile__body { align-items: center; gap: 10px; padding: 12px 8px 8px; }
    .home-tile__title { font-size: 18px; line-height: 1.25; }
    .home-tile:not(.home-tile--big) .home-tile__desc { display: none; }
    .home-tile:not(.home-tile--big) .home-tile__go {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 36px;
      height: 36px;
      background: var(--surface);
      box-shadow: var(--shadow-float);
    }
    .home-tile--big { grid-column: 1 / -1; flex-direction: column; }
    .home-tile--big .home-tile__photo { flex: 0 0 auto; aspect-ratio: 2 / 1; }
    .home-tile--big .home-tile__body { flex-direction: row; align-items: center; gap: 12px; padding: 14px 8px 8px 10px; }
    .home-tile--big .home-tile__text { flex: 1; gap: 6px; }
    .home-tile--big .home-tile__title { font-size: 22px; line-height: 1.2; }
    .home-tile--big .home-tile__desc { font-size: 15px; line-height: 1.45; color: var(--ink-3); }
    .home-tile__chips { display: none; }

    .home-also { gap: 8px; }
    .home-also__title { flex: 0 0 100%; margin: 4px 0 2px; }
    .home-also__link { padding: 0 14px; }
    .home-also__prices { flex: 0 0 100%; margin: 8px 0 0; }

    .home-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
    /* Колонки встают друг под друга — промежуток меньше */
    .home-split { gap: 32px; }
    /* Карточка с рамкой 12px: текст ещё в 8px (36px от края экрана) */
    .home-contact__info { padding: 8px; }
    .home-contact__map { min-height: 280px; }
    .home-contact__map .map { --map-h: 280px; }
  }
}