/* «Страница специалиста» (app/specialist_page.py): the company website's page (company-site.css) about one person — the
   first screen with their round photo, then their words, works, services, free times and reviews as the site's sections.
   The page's one lime is «Записаться к …»; times are in mono. */
.specialist .person-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.specialist .person-hero .biz-kicker { margin-bottom: 16px; }
.specialist .person-hero .person-company { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.specialist .person-hero h1 { margin-bottom: 12px; }
/* Their mark on the dark first screen: white stars, no highlighter — the screen's one lime is the booking. */
.specialist .person-hero .biz-proof .stars { padding: 0; background: none; color: #fff; }
.specialist .person-hero .biz-tagline { margin-bottom: 20px; }
.specialist .person-portrait { display: flex; justify-content: center; }
.specialist .person-portrait img,
.specialist .person-initials { display: block; width: min(100%, 320px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #254e3d; box-shadow: 0 0 0 8px rgba(255, 255, 255, .08); }
.specialist .person-initials { display: grid; place-items: center; font: 600 clamp(48px, 7vw, 88px)/1 var(--sans); letter-spacing: -.02em; color: #e0ecdf; }
.specialist .person-block { max-width: 880px; }
.specialist .person-about { font-size: 17px; line-height: 1.6; }
.specialist .person-about p { margin: 0 0 16px; max-width: 40em; }
.specialist .person-about p:last-child, .specialist .person-education { margin-bottom: 0; }
.specialist .person-education { max-width: 40em; font-size: 17px; line-height: 1.6; }
.specialist #works .biz-strip { margin-top: 0; }
/* «Ближайшее время»: the website's «.site-free» rows (app/site_times.py, company-site.css). */
.specialist .person-block h3 { margin: 32px 0 12px; font-size: 19px; }
.specialist .person-classes { border-top: 1px solid var(--ink); }
.specialist .person-classes .site-class { flex-direction: row; align-items: center; gap: 16px; }
.specialist .person-classes .site-class-day { min-width: 9.5em; font-size: 16px; font-weight: 600; }
.specialist .person-more-line { margin: 20px 0 0; }
.specialist .control-main button.person-more { min-height: 44px; }
.specialist .person-back { margin: 0 0 48px; font-size: 15px; }
.specialist .person-back a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 699px) {
  /* A phone: the photo first, smaller, beside nothing; the name and the action right under it. */
  .specialist .person-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .specialist .person-portrait { order: -1; justify-content: flex-start; }
  .specialist .person-portrait img, .specialist .person-initials { width: 128px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
  .specialist .person-initials { font-size: 44px; }
  /* A class: its day and time on one line, its name under them — every row alike. */
  .specialist .person-classes .site-class { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 12px; }
  .specialist .person-classes .site-class-what { grid-column: 1 / -1; }
  .specialist .person-classes .site-class-day { min-width: 0; }
}
@media (max-width: 380px) {
  /* «Записаться к Марине» keeps one line on a 320 px phone: the button's sides give it the room. */
  .specialist .control-main .person-hero .biz-actions button.btn.primary,
  .specialist .control-main .biz-sticky button.btn.primary { padding: 0 12px; }
}