/* ---------- общее ---------- */ .doctor-photo__initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; font-size: 40px; color: rgba(44, 73, 95, 0.35); } .rating-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5.2px; height: 29px; padding: 5.9px 8.2px 5.9px 7.4px; background: var(--soft); border: 0.744px solid var(--chip-border); border-radius: 8.923px; font-weight: 700; font-size: 13.385px; color: var(--navy); } .rating-badge img { width: 13.385px; height: 13.385px; padding: 0 0.33px 1.28px; } /* ---------- плитка «Специалисты» на главной: 209 × 232 ---------- */ .doctor-tile { width: 209px; flex-shrink: 0; } .doctor-tile__photo-link { position: relative; display: block; } .doctor-tile__photo { height: 232px; border-radius: 15px; overflow: hidden; background: var(--photo-bg); } .doctor-tile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .doctor-tile__rating { position: absolute; top: 8px; right: 9px; } .doctor-tile__info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; } .doctor-tile__name { font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--navy); } .doctor-tile__name:hover { color: var(--coral); } .doctor-tile__role { max-width: 175px; font-weight: 500; font-size: 10px; line-height: 1.4; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .doctor-tile__exp { padding: 9px 8px 9px 12px; background: var(--chip); border: 1px solid var(--chip-border); border-radius: var(--r-10); font-weight: 500; font-size: 12px; color: var(--navy); white-space: nowrap; } /* ---------- карточка списка врачей: 525 × 343 ---------- */ .doctor-row { display: flex; align-items: center; gap: 20px; min-height: 343px; padding: 18px 22px 18px 18px; background: var(--surface); border-radius: var(--r-22); } .doctor-row__photo-link { flex-shrink: 0; } .doctor-row__photo { width: 205px; height: 284px; border-radius: 17px; overflow: hidden; background: var(--photo-bg); } .doctor-row__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .doctor-row__info { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; min-width: 0; flex: 1; max-width: 260px; } .doctor-row__role { font-weight: 600; font-size: 13px; line-height: 1.42; color: var(--coral); } .doctor-row__name { font-weight: 700; font-size: 20px; line-height: 1.12; color: var(--navy); } .doctor-row__name:hover { color: var(--coral); } .doctor-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .doctor-row__exp { padding: 10px 14px; background: var(--chip); border-radius: var(--r-10); font-weight: 500; font-size: 16px; color: var(--navy); white-space: nowrap; } .doctor-row__actions { display: flex; flex-direction: column; gap: 11px; margin-top: 3px; } .doctor-row__btn { width: 190px; height: 50px; padding: 14px 20px; border-radius: var(--r-14); font-weight: 700; font-size: 15px; line-height: 1.42; } .doctor-row__btn--outline { border-width: 1.4px; } .doctor-row__absent { display: inline-flex; align-items: center; height: 50px; font-weight: 600; font-size: 14px; color: var(--text-muted-2); } /* ---------- мобильная версия ---------- */ @media (max-width: 767px) { .doctor-tile { width: 160px; border-radius: var(--r-16); overflow: hidden; background: var(--photo-bg); } .doctor-tile__photo { height: 180px; border-radius: 0; } .doctor-tile__rating { top: 8px; right: 8px; height: auto; padding: 2px 8px; gap: 4px; border: 0; border-radius: var(--r-8); font-size: 10px; line-height: 15px; } .doctor-tile__rating img { width: 10px; height: 10px; padding: 0; } .doctor-tile__info { gap: 0; margin-top: 0; padding: 12px; } .doctor-tile__name { font-size: 11px; line-height: 15.125px; } .doctor-tile__role { max-width: none; padding: 4px 0 8px; font-size: 9px; line-height: 12.375px; } .doctor-tile__exp { padding: 9.6px 8px; border-width: 0.722px; border-radius: var(--r-8); font-size: 9px; line-height: 13.5px; } .doctor-row { align-items: flex-start; gap: 12px; min-height: 0; padding: 12px; border-radius: var(--r-16); box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); } .doctor-row__photo { width: 120px; height: 150px; border-radius: var(--r-12); background: var(--soft-2); } .doctor-row__info { gap: 0; max-width: none; } .doctor-row__role { padding-bottom: 4px; font-weight: 500; font-size: 11px; line-height: 16.5px; color: var(--coral-label); } .doctor-row__name { padding-bottom: 8px; font-size: 14px; line-height: 19.25px; } .doctor-row__exp { padding: 4px 8px; border: 0.722px solid var(--chip-border); border-radius: var(--r-8); font-size: 11px; line-height: 16.5px; } .doctor-row__actions { align-self: stretch; gap: 8px; margin-top: 0; padding-top: 12px; } .doctor-row__btn { width: 100%; height: auto; padding: 8px 0; border-radius: var(--r-8); font-weight: 600; font-size: 14px; line-height: 20px; } .doctor-row__btn--outline { border-width: 0.722px; } .doctor-row__absent { height: auto; font-size: 12px; } }