/* ============================================================
   Блок: doctors
   ============================================================ */

@layer components {
  .doctors {
    padding-block: var(--sp-6); 
  }
  .carousel-nav { display: flex; gap: 0.5rem; }
  .carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--accent);
    background: var(--bg);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
  }
  .carousel-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .carousel-btn:disabled { opacity: 0.4; cursor: default; }
  .carousel-btn:disabled:hover { background: var(--bg); border-color: var(--border); color: var(--accent); }
  .carousel-btn .icon { width: 1.4em; height: 1.4em; }

  .doctors__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    padding-bottom: var(--sp-2);
  }
  .doctors__viewport::-webkit-scrollbar { display: none; }
  .doctors__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }

  .doctors__track {
    display: flex;
    gap: var(--sp-3);
    scroll-snap-align: start;
  }

  .doctor {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .doctor__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .doctor__card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .doctor__media { background: var(--accent-soft); }
  .doctor__media img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  .doctor__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--sp-4);
    flex: 1;
  }
  .doctor__name { font-size: 1.05rem; line-height: 1.3; }
  .doctor__post { font-size: 0.9rem; color: var(--fg); font-weight: 400; }
  .doctor__dept { font-size: var(--fs-meta); color: var(--muted); font-weight: 300;}
  .doctor__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--accent);
    margin-top: auto;
    padding-top: var(--sp-2);
  }
  .doctor__more .icon { width: 1.1em; height: 1.1em; }
  .doctor__more:hover { text-decoration: underline; }

  @media (min-width: 520px) { .doctor { flex-basis: 50%; } }
  @media (min-width: 768px) { .doctor { flex-basis: 33.333%; } }
  @media (min-width: 1100px) { .doctor { flex-basis: 25%; } }
}

@layer components {
  .doctor__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--sp-2);
  }
  .doctor__actions .doctor__more { margin-top: 0; padding-top: 0; }
  .doctor__appointment {
    font-size: 0.9rem;
    padding: 0.6rem 1.1rem;
  }
}