/* ===== Компактные карточки врачей для публичной страницы ===== */

:root{
  --gap: 14px;
  --min-card: 180px;              /* Сделать ещё плотнее? Поставь 160px */
  --radius: 12px;
  --border: #e6e8eb;
  --text-weak:#6b7280;
  --primary:#2563eb;
  --bg:#fff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 22px rgba(0,0,0,.08);

  /* высоты для sticky без JS */
  --nav-h: 56px;                  /* подгони под реальную высоту .site-nav */
  --filters-h: 56px;              /* подгони под высоту .doctors-header */
}

/* Сетка карточек — как «плитка» */
.doctors-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-card),1fr));
  gap:var(--gap);
  align-items:stretch;
}

/* Карточка компактная */
.doctor-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
  overflow:hidden;
  display:flex;
}

.doctor-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Внутри карточки — кладём всё в колонку, чтобы кнопки всегда снизу */
.doctor-card .doctor-body{
  display:flex;
  flex-direction:column;
  width:100%;
  padding:12px;
  gap:8px;
}

/* Аватар — маленький, центрируем наверху */
.doctor-card .avatar{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:4px;
}

/* Переопределим инлайновые размеры, чтобы было единообразно */
.doctor-card .avatar img{
  width:72px !important;
  height:72px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:block;
  background:#f4f6f8;
}

/* Имя/специальность компактно, с обрезкой в 2 строки */
.doctor-name{
  font-size:14.5px;
  line-height:1.25;
  font-weight:700;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-align:left;
}

.doctor-specialty{
  font-size:12.5px;
  color:var(--text-weak);
  margin:0;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-align:left;
}

/* Короткое описание — делаем ещё тише и компактнее */
.doctor-desc{
  font-size:12.5px;
  color:#475569;
  line-height:1.35;
  margin:2px 0 0;
  text-align:left;
}
.doctor-desc .muted{ color:var(--text-weak); }

/* Кнопки прижимаем к низу карточки */
.actions{
  margin-top:auto;
  display:flex;
  gap:1px;
  justify-content:space-between;
}

/* Кнопки — маленькие */
.btn{
  display:inline-block;
  padding:6px 8px;
  font-size:12px;
  font-weight:500;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:#111827;
  text-decoration:none;
  transition:opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover{ opacity:.9; }

/* Основная кнопка */
.btn-primary{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
}

/* Заголовок и панель фильтров — немного ужмём отступы, чтобы видно было больше карточек «над фолдом» */
.doctors-section{
  padding:16px clamp(12px, 3vw, 24px);
}
.doctors-header{
  display:flex;
  gap:16px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.doctors-title{
  margin:0;
  font-size:clamp(18px, 2.2vw, 24px);
}

.filters select{
  padding:8px 10px;
  font-size:13px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
}

/* Мобайл — ещё плотнее сетка */
@media (max-width:420px){
  :root{ --min-card: 150px; }
  .btn{ padding:7px 9px; font-size:12px; }
}

/* ===== Липкий header и фильтры (без JS) ===== */

/* Шапка сайта — липкая, полупрозрачная, с blur */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Панель заголовка + фильтров — тоже липкая под шапкой */
.doctors-header{
  position: sticky;
  top: var(--nav-h);
  z-index: 999;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.05);
  padding-block: 10px;
}

/* Чтобы якорные переходы (и фокус к элементам) не уезжали под липкие панели */
html{
  scroll-padding-top: calc(var(--nav-h) + var(--filters-h) + 8px);
}

/* Фильтры — в одну строку, с горизонтальным скроллом при нехватке места */
.filters{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;         /* не переносим, чтобы панель оставалась компактной */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;       /* место под тонкую полоску скролла */
}

/* Скрываем агрессивные полосы скролла там, где это уместно */
.filters::-webkit-scrollbar{ height: 6px; }
.filters::-webkit-scrollbar-track{ background: transparent; }
.filters::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius: 3px; }

/* Приклейка на очень узких — уменьшаем высоты */
@media (max-width: 480px){
  :root{
    --nav-h: 52px;
    --filters-h: 50px;
  }
  .filters select{ padding:7px 8px; font-size:12px; }
}

/* Небольшая визуальная «полочка» под фильтры, чтобы карточки не сливались */
.doctors-header::after{
  content:"";
  display:block;
  height: 8px;
  margin-top: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,0));
  border-radius: 0 0 10px 10px;
}

/* На тёмных темах (если вдруг есть) ослабим фоновые линии */
@media (prefers-color-scheme: dark){
  .site-nav{
    background: rgba(20,20,22,.75);
    border-bottom-color: rgba(255,255,255,.06);
  }
  .doctors-header{
    background: rgba(20,20,22,.7);
    border-bottom-color: rgba(255,255,255,.06);
  }
  .filters select{
    background: #111418;
    border-color: rgba(255,255,255,.12);
    color: #e5e7eb;
  }
}

/* ===== Мобильная раскладка фильтров: "All categories" сверху, ниже две колонки ===== */
@media (max-width: 640px){
  /* вместо горизонтального скролла — сетка 2 колонки */
  .filters{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "cat cat"
      "exp alpha";
    gap: 10px;
    overflow: visible;      /* отключаем скролл */
    padding-bottom: 0;
  }

  /* назначаем области конкретным label через :has() */
  .filters label:has(#filter-category){ grid-area: cat; }
  .filters label:has(#filter-experience){ grid-area: exp; }
  .filters label:has(#filter-alpha){ grid-area: alpha; }

  /* чтобы селекты выглядели равномерно */
  .filters select{
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* ==== НУЛЕВЫЕ ТЕНИ/ЛИНИИ ДЛЯ СТРАНИЦЫ ДОКТОРОВ (локально) ==== */

/* убираем тени у карточек и при hover */
.doctor-card,
.doctor-card:hover{
  box-shadow: none !important;
  transform: none !important;
}

/* убираем нижние линии у шапки и панели фильтров */
.site-nav,
.doctors-header{
  border-bottom: 0 !important;
  background: #fff;                 /* белый фон без прозрачности */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* убираем «полочку» (градиент) под фильтрами */
.doctors-header::after{
  content: none !important;
}

/* селекты без внутренних теней/стрелок браузера (по желанию) */
.filters select{
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  background-image: none;           /* убирает встроенную стрелку, если мешает */
}

/* на всякий случай — обнулим любые box/text-shadow внутри секции */
.doctors-section *,
.doctors-section *::before,
.doctors-section *::after{
  box-shadow: none !important;
  text-shadow: none !important;
}

/* === MOBILE: кнопка "Details" справа от фото, "Book Appointment" внизу === */
@media (max-width: 640px){
  /* делаем карточку компактнее */
  :root{ --min-card: 160px; }

  /* тело карточки — якорь для абсолютного позиционирования */
  .doctor-card .doctor-body{
    position: relative;
    padding-top: 12px; /* небольшой зазор сверху под кнопку */
  }

  /* сама кнопка Details (= любая .btn без .btn-primary) — наверх вправо */
  .doctor-card .actions .btn:not(.btn-primary){
    position: absolute;
    top: 23px;
    right: 4px;
    z-index: 2;
    padding: 11px;
    margin: 2px;
    font-size: 12px;
    line-height: 1;
    background:#eaf3f3;
  }

  /* низ карточки — Book на всю ширину, компактные отступы */
  .doctor-card .actions{
    margin-top: 8px;
    gap: 8px;
    justify-content: flex-start;
  }
  .doctor-card .actions .btn.btn-primary{
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
  }
}