/* ===== Врачи: горизонтальная лента ===== */
.doc-slider { position: relative; container-type: inline-size; }
/* Стрелки по бокам, по центру фото: фото = ширина карточки × 5/4 */
.side-btn {
  position: absolute; z-index: 3; top: 40%;
  top: calc((100cqw - 60px) / 4 * 1.25 / 2);
  width: 56px; height: 56px; margin-top: -28px; border-radius: 50%;
  border: 0; background: #fff; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow); transition: background .2s, color .2s, opacity .2s, transform .2s;
}
.side-btn:hover { background: var(--brand); color: #fff; transform: scale(1.06); }
.side-btn--prev { left: -28px; }
.side-btn--next { right: -28px; }
.side-btn[hidden] { display: none; }
.doctors { background: var(--brand-50); }
.services { padding-bottom: clamp(56px, 6vw, 88px); }
.doc-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
}
.doc-track::-webkit-scrollbar { display: none; }
.doc { scroll-snap-align: start; text-decoration: none; display: flex; flex-direction: column; }
.doc figure {
  aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: #CDCFD1;
  margin-bottom: 18px; position: relative;
}
.doc figure::after {
  content: "О враче →"; position: absolute; left: 14px; right: 14px; bottom: 14px;
  padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .94);
  font-weight: 600; font-size: 14px; color: var(--brand); text-align: center;
  opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s;
}
.doc:hover figure::after { opacity: 1; transform: none; }
.doc img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .5s; }
.doc:hover img { transform: scale(1.04); }
.doc__role { font-size: 13px; font-weight: 600; color: var(--brand); letter-spacing: .01em; margin-bottom: 6px; }
.doc__name { font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }

@media (max-width: 1080px) {
  .doc-track { grid-auto-columns: calc((100% - 40px) / 3); }
  .side-btn { top: calc((100cqw - 40px) / 3 * 1.25 / 2); }
}
@media (max-width: 1340px) { .side-btn--prev { left: -12px; } .side-btn--next { right: -12px; } }
@media (max-width: 720px) {
  .side-btn { display: none !important; }
  .doc-track { grid-auto-columns: 70%; gap: 14px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .doc figure::after { display: none; }
}