/* Our Doctors: uses the health library hero, search, toolbar and empty state from health-library.css. */
.doc-section { background: #f6f9fd; }
.doc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.doc-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.doc-card:hover { border-color: #b9cde4; box-shadow: 0 18px 40px rgba(6, 46, 86, .1); transform: translateY(-4px); }
.doc-card[hidden] { display: none; }

/* Photo on a soft brand band */
.doc-card-top { display: flex; justify-content: center; padding: 1.5rem 1rem 0; background: linear-gradient(180deg, #e6f0fa 0%, #f3f8fd 62%, #fff 62%); }
.doc-photo { display: block; width: 112px; height: 112px; border: 4px solid #fff; border-radius: 50%; background: #eaf1f9; box-shadow: 0 10px 24px rgba(6, 46, 86, .16); object-fit: cover; }
.doc-initials { display: grid; place-items: center; background: linear-gradient(145deg, #063b74 0%, #09519e 100%); color: #fff; font-size: 2rem; font-weight: 600; letter-spacing: .02em; }

/* Name and designation */
.doc-card-body { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 1rem 1.25rem 1.1rem; text-align: center; }
.doc-department { margin-bottom: .65rem; padding: .25rem .7rem; border-radius: 999px; background: var(--kih-red-soft); color: var(--kih-red); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.doc-card h3 { margin: 0 0 .3rem; color: var(--ink); font-size: 1.08rem; font-weight: 600; line-height: 1.35; }
.doc-card .doc-designation { margin: 0; color: var(--kih-blue); font-size: .85rem; font-weight: 600; line-height: 1.45; }

/* Booking button pinned to the bottom of every card */
.doc-book { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0 1.25rem 1.25rem; min-height: 46px; border: 1px solid #cfdcec; border-radius: 12px; color: var(--kih-blue); font-size: .88rem; font-weight: 600; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.doc-book:hover, .doc-card:hover .doc-book { border-color: var(--kih-red); background: var(--kih-red); color: #fff; }
.doc-book:focus-visible { outline: 2px solid var(--kih-blue); outline-offset: 3px; }

/* Slider on department, condition and treatment pages: 4 cards in view on desktop, swipe or arrows for more.
   Padding inside the track keeps the hover lift and shadow from being clipped. */
.doc-track { display: grid; grid-auto-columns: calc((100% - 3.75rem) / 4); grid-auto-flow: column; gap: 1.25rem; margin: -.5rem 0 -1.5rem; padding: .5rem 0 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.doc-track::-webkit-scrollbar { display: none; }
.doc-track .doc-card { scroll-snap-align: start; }
.doc-track:focus-visible { outline: 2px solid var(--kih-blue); outline-offset: 3px; }
.doc-slider-controls { display: flex; flex-shrink: 0; gap: .6rem; }
.doc-slider-controls[hidden] { display: none; }
.doc-slider-controls button { display: grid; flex: 0 0 46px; place-items: center; width: 46px; height: 35px; padding: 0; border: 1px solid #c9d9eb; border-radius: 9px; background: #fff; color: var(--kih-blue); font-size: 1.05rem; line-height: 1; box-shadow: 0 5px 14px rgba(9, 81, 158, .07); cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease; }
.doc-slider-controls button:hover:not(:disabled) { border-color: var(--kih-blue); background: var(--kih-blue); color: #fff; transform: translateY(-2px); }
.doc-slider-controls button:disabled { opacity: .35; cursor: default; }
.doc-slider-controls button:focus-visible { outline: 2px solid var(--kih-blue); outline-offset: 3px; }

@media (max-width: 1199.98px) {
    .doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .doc-track { grid-auto-columns: calc((100% - 2.5rem) / 3); }
}
@media (max-width: 991.98px) {
    .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-track { grid-auto-columns: calc((100% - 1.25rem) / 2); }
}
/* Phones: two compact cards side by side in the slider; the arrows stay on the right when the heading stacks. */
@media (max-width: 575.98px) {
    .doc-grid { grid-template-columns: 1fr; gap: 1rem; }
    .doc-track { grid-auto-columns: calc((100% - .75rem) / 2); gap: .75rem; }
    .doc-track .doc-card { border-radius: 16px; }
    .doc-track .doc-card-top { padding: 1rem .5rem 0; }
    .doc-track .doc-photo { width: 84px; height: 84px; border-width: 3px; }
    .doc-track .doc-initials { font-size: 1.5rem; }
    .doc-track .doc-card-body { padding: .75rem .6rem .8rem; }
    .doc-track .doc-department { margin-bottom: .5rem; padding: .2rem .5rem; font-size: .62rem; }
    .doc-track .doc-card h3 { font-size: .9rem; }
    .doc-track .doc-designation { font-size: .74rem; }
    .doc-track .doc-book { gap: .3rem; margin: 0 .6rem .75rem; min-height: 40px; border-radius: 10px; font-size: .74rem; }
    .doc-slider-controls { align-self: flex-end; margin-left: auto; }
    .doc-slider-controls button { border-radius: 8px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .doc-card, .doc-book, .doc-slider-controls button { transition: none; }
    .doc-card:hover, .doc-slider-controls button:hover:not(:disabled) { transform: none; }
}