/* stylelint-disable declaration-block-single-line-max-declarations, no-descending-specificity -- Keeps the approved homepage doctor carousel compact and component-scoped. */

.kz-doctors-carousel {
  --kz-doctor-carousel-gap: clamp(.875rem, 1.4vw, 1.25rem);
  --kz-doctor-container-width: 1180px;
  --kz-doctor-shadow-gutter: clamp(1.25rem, 2.4vw, 2.75rem);
  --kz-doctor-heading-gap: 1.875rem;
  --kz-doctor-card-height: 520px;
  --kz-doctor-info-inline: 24px;
  --kz-doctor-info-bottom: 22px;
  --kz-doctor-specialty-slot-height: 28px;
  --kz-doctor-title-slot-height: 70px;
  --kz-doctor-excerpt-slot-height: 58px;
  --kz-doctor-link-slot-height: 32px;
  --kz-doctor-action-size: 46px;
  --kz-doctor-arrow-size: 48px;
  --kz-doctor-section-background: var(--kz-color-secondary);

  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 48rem;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  overflow-x: clip;
  background: var(--kz-doctor-section-background);
  color: var(--kz-color-on-primary);
}

:root[dir="rtl"] .kz-doctors-carousel {
  right: 50%;
  left: auto;
  margin-right: -50vw;
  margin-left: 0;
}

.kz-doctors-carousel,
.kz-doctors-carousel * { box-sizing: border-box; }

.kz-doctors-carousel .container { width: var(--kz-container-standard, 90%); margin-inline: auto; }
.kz-doctors-carousel a { color: inherit; }
.kz-doctors-carousel button { font: inherit; }
.kz-doctors-carousel .section-head { display: grid; grid-template-columns: var(--kz-section-heading-columns); align-items: end; gap: var(--kz-section-heading-gap); margin-bottom: var(--kz-doctor-heading-gap); }
.kz-doctors-carousel .section-kicker { display: inline-flex; margin-bottom: 0.75rem; color: #decfe0; font-family: var(--e-global-typography-accent-font-family, var(--e-global-typography-text-font-family)); font-size: var(--e-global-typography-accent-font-size, .75rem); font-weight: var(--e-global-typography-accent-font-weight, 800); letter-spacing: var(--e-global-typography-accent-letter-spacing, .12em); text-transform: uppercase; }
.kz-doctors-carousel .section-title { margin: 0; color: #fff; font-family: var(--e-global-typography-primary-font-family); font-size: var(--kz-type-h2); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.kz-doctors-carousel .section-side { display: grid; justify-items: end; gap: 20px; }
.kz-doctors-carousel .section-side > p { max-width: 390px; margin: 0; color: rgb(255 255 255 / 68%); font-size: .92rem; line-height: 1.65; }
.kz-doctors-carousel .carousel-controls { display: flex; gap: 9px; }
.kz-doctors-carousel .carousel-arrow { width: var(--kz-doctor-arrow-size); height: var(--kz-doctor-arrow-size); padding: 0; border: 1px solid rgb(255 255 255 / 22%); border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 7%); color: #fff; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease; }
.kz-doctors-carousel .carousel-arrow:hover { background: #fff; color: #8a1d4e; transform: translateY(-2px); }

.kz-doctors-carousel .carousel-arrow svg,
.kz-doctors-carousel .doctor-action svg { width: var(--kz-icon-action, 1.25rem); height: var(--kz-icon-action, 1.25rem); overflow: visible; display: block; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

.kz-doctors-carousel .doctor-profile-link .kz-icon { width: var(--kz-icon-inline, 1rem); height: var(--kz-icon-inline, 1rem); }

.kz-doctors-carousel .carousel-arrow path,
.kz-doctors-carousel .doctor-action path { fill: none; stroke: currentcolor; }

.kz-doctors-carousel .carousel-arrow:focus-visible,
.kz-doctors-carousel .doctor-filter-btn:focus-visible,
.kz-doctors-carousel .doctor-action:focus-visible,
.kz-doctors-carousel .doctor-name a:focus-visible,
.kz-doctors-carousel .doctor-profile-link:focus-visible { outline: 3px solid #efcad7; outline-offset: 3px; }

.kz-doctors-carousel .doctor-filter { margin: -4px 0 30px; display: flex; flex-wrap: wrap; gap: 9px; }
.kz-doctors-carousel .doctor-filter-btn { min-height: 44px; padding: 10px 15px; border: 1px solid rgb(255 255 255 / 17%); border-radius: 999px; background: rgb(255 255 255 / 4%); color: rgb(255 255 255 / 70%); font-size: .78rem; font-weight: 900; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; }

.kz-doctors-carousel .doctor-filter-btn:hover,
.kz-doctors-carousel .doctor-filter-btn[aria-selected="true"] { border-color: #fff; background: #fff; color: #271e25; }

.kz-doctors-carousel .carousel-shell { position: relative; margin-inline: calc(var(--kz-doctor-shadow-gutter) * -1) calc((100vw - min(100% - 40px, var(--kz-doctor-container-width))) / -2); }
.kz-doctors-carousel .carousel-viewport { padding: var(--kz-doctor-shadow-gutter) var(--kz-doctor-shadow-gutter) calc(var(--kz-doctor-shadow-gutter) + 8px); overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: var(--kz-doctor-shadow-gutter); scroll-snap-type: x mandatory; scrollbar-width: none; }
.kz-doctors-carousel .carousel-viewport::-webkit-scrollbar { display: none; }
.kz-doctors-carousel .doctor-track { width: 100%; display: flex; gap: var(--kz-doctor-carousel-gap); }
.kz-doctors-carousel:not(.kz-doctors-carousel--compact) .doctor-track::after { content: ""; flex: 0 0 var(--kz-doctor-shadow-gutter); }
.kz-doctors-carousel .doctor-card:last-of-type { scroll-snap-align: end; }

.kz-doctors-carousel .doctor-card { position: relative; flex: 0 0 calc((100% - (var(--kz-doctor-carousel-gap) * 3)) / 3.5); height: var(--kz-doctor-card-height); min-width: 0; border: 1px solid rgb(255 255 255 / 10%); border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 78% 18%, rgb(238 166 185 / 72%) 0, rgb(179 72 111 / 34%) 25%, transparent 47%), linear-gradient(145deg, #4c0a25 0%, #7f1b49 50%, #d98ca3 100%); scroll-snap-align: start; isolation: isolate; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1,.36, 1); }
.kz-doctors-carousel .doctor-card::before { content: ""; position: absolute; z-index: -3; top: 7%; right: -31%; width: 94%; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; box-shadow: 0 0 0 5.5rem rgb(255 255 255 / 0%), 0 0 0 calc(5.5rem + 1px) rgb(255 255 255 / 20%); pointer-events: none; }
.kz-doctors-carousel .doctor-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(36 30 36 / 98%), rgb(36 30 36 / 8%) 68%); pointer-events: none; }
.kz-doctors-carousel .doctor-card:hover { box-shadow: 0 24px 58px rgb(0 0 0 / 26%); transform: translateY(-5px); }
.kz-doctors-carousel .doctor-card[hidden] { display: none; }

.kz-doctors-carousel .doctor-media,
.kz-doctors-carousel .doctor-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.kz-doctors-carousel .doctor-media { z-index: -2; }
.kz-doctors-carousel .doctor-image { object-fit: contain; object-position: center bottom; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.kz-doctors-carousel .doctor-card:hover .doctor-image { transform: scale(1.035); }
.kz-doctors-carousel .doctor-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / 26%); background: radial-gradient(circle at 70% 25%, rgb(166 69 105 / 42%), transparent 35%), linear-gradient(145deg, #51404c, #292128); }
.kz-doctors-carousel .doctor-placeholder svg { width: min(42%, 142px); height: auto; }
.kz-doctors-carousel .doctor-action { position: absolute; top: 21px; right: 21px; z-index: 2; width: var(--kz-doctor-action-size); height: var(--kz-doctor-action-size); border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 92%); color: #8a1d4e; text-decoration: none; transition: transform .25s ease, background .25s ease; }
.kz-doctors-carousel .doctor-action:hover { background: #fff; transform: translateY(-2px); }

.kz-doctors-carousel .doctor-info { position: absolute; right: var(--kz-doctor-info-inline); bottom: var(--kz-doctor-info-bottom); left: var(--kz-doctor-info-inline); display: grid; grid-template-rows: var(--kz-doctor-specialty-slot-height) var(--kz-doctor-title-slot-height) var(--kz-doctor-excerpt-slot-height) var(--kz-doctor-link-slot-height); }
.kz-doctors-carousel .doctor-specialty { min-width: 0; overflow: hidden; display: block; color: #decfe0; font-size: .66rem; font-weight: 800; letter-spacing: .1em; line-height: 1.35; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.kz-doctors-carousel .doctor-name { min-width: 0; max-height: var(--kz-doctor-title-slot-height); margin: 0; overflow: hidden; color: #fff; font-family: var(--e-global-typography-primary-font-family); font-size: 1.75rem; font-weight: 500; line-height: 1.12; }
.kz-doctors-carousel .doctor-name a { display: -webkit-box; overflow: hidden; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.kz-doctors-carousel .doctor-summary { min-width: 0; height: var(--kz-doctor-excerpt-slot-height); overflow: hidden; color: rgb(255 255 255 / 68%); }
.kz-doctors-carousel .doctor-summary p { margin: 0; display: -webkit-box; overflow: hidden; font-size: .82rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.kz-doctors-carousel .doctor-profile-link { display: flex; align-items: end; justify-content: space-between; gap: 12px; color: #fff; font-size: .75rem; font-weight: 900; text-decoration: none; }
.kz-doctors-carousel .doctor-profile-link span { color: #efcad7; font-size: 1rem; }
.kz-doctors-carousel .carousel-progress { height: 3px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / 13%); }
.kz-doctors-carousel .carousel-progress > span { width: 100%; height: 100%; border-radius: inherit; display: block; background: linear-gradient(90deg, #f1cbd8, #d9c9dc); transform: scaleX(.22); transform-origin: left; transition: transform .25s ease; }

.kz-doctors-carousel--compact {
  color: #271e25;
  background: #fbf8f6;
}

.kz-doctors-carousel--compact .section-head { align-items: end; margin-bottom: 28px; }
.kz-doctors-carousel--compact .section-kicker { color: #8a1d4e; }
.kz-doctors-carousel--compact .section-title { max-width: 720px; color: #52112f; font-size: clamp(2.25rem, 4vw, 4rem); }
.kz-doctors-carousel--compact .section-side { justify-items: end; }
.kz-doctors-carousel--compact .section-side > p { color: #675d65; }
.kz-doctors-carousel--compact .carousel-shell { margin-inline: 0; }
.kz-doctors-carousel--compact .carousel-viewport { padding: 0; overflow: visible; }
.kz-doctors-carousel--compact .doctor-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.kz-doctors-carousel--compact .doctor-card {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 22px;
  overflow: visible;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 42px;
  gap: 16px;
  align-items: center;
  border: 1px solid rgb(82 17 47 / 12%);
  border-radius: 20px;
  color: #271e25;
  background: #fff;
  box-shadow: 0 12px 34px rgb(58 19 37 / 6%);
  scroll-snap-align: none;
  isolation: auto;
}

.kz-doctors-carousel--compact .doctor-card::before,
.kz-doctors-carousel--compact .doctor-card::after { display: none; }
.kz-doctors-carousel--compact .doctor-card:hover { box-shadow: 0 16px 38px rgb(58 19 37 / 9%); transform: translateY(-2px); }

.kz-doctors-carousel--compact .doctor-media {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 50%;
  background: #f2e6eb;
}

.kz-doctors-carousel--compact .doctor-image {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  filter: saturate(.82);
}

.kz-doctors-carousel--compact .doctor-card:hover .doctor-image { transform: none; }
.kz-doctors-carousel--compact .doctor-placeholder { inset: 0; color: rgb(82 17 47 / 26%); background: #f2e6eb; }
.kz-doctors-carousel--compact .doctor-placeholder svg { width: 42px; }

.kz-doctors-carousel--compact .doctor-action {
  position: static;
  grid-column: 3;
  grid-row: 1;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(82 17 47 / 12%);
  color: #8a1d4e;
  background: #f6edf1;
}

.kz-doctors-carousel--compact .doctor-info {
  position: static;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: none;
  gap: 4px;
}

.kz-doctors-carousel--compact .doctor-specialty { color: #8a1d4e; font-size: .62rem; }
.kz-doctors-carousel--compact .doctor-name { height: auto; margin: 0; color: #52112f; font-size: 1.28rem; line-height: 1.15; }
.kz-doctors-carousel--compact .doctor-summary { height: auto; color: #675d65; }
.kz-doctors-carousel--compact .doctor-summary p { font-size: .73rem; line-height: 1.45; -webkit-line-clamp: 1; }
.kz-doctors-carousel--compact .doctor-profile-link { min-height: 20px; align-items: center; justify-content: start; gap: 6px; color: #8a1d4e; font-size: .68rem; }
.kz-doctors-carousel--compact .doctor-profile-link span { color: inherit; }

@media (max-width: 1080px) {
  .kz-doctors-carousel .doctor-track .doctor-card { flex-basis: calc((100% - (var(--kz-doctor-carousel-gap) * 2)) / 2.5); }
}

@media (max-width: 820px) {
  .kz-doctors-carousel .section-head { grid-template-columns: 1fr; align-items: start; }
  .kz-doctors-carousel .section-side { justify-items: start; }
  .kz-doctors-carousel .doctor-track .doctor-card { flex-basis: calc(100% - clamp(56px, 15vw, 112px)); height: min(var(--kz-doctor-card-height), 480px); }
  .kz-doctors-carousel--compact .doctor-track { grid-template-columns: 1fr; }
  .kz-doctors-carousel--compact .doctor-track .doctor-card { height: auto; }
}

@media (max-width: 560px) {
  .kz-doctors-carousel { --kz-doctor-card-height: 460px; --kz-doctor-info-inline: 22px; --kz-doctor-info-bottom: 20px; --kz-doctor-title-slot-height: 64px; }
  .kz-doctors-carousel .container { width: min(100% - 32px, var(--kz-doctor-container-width)); }
  .kz-doctors-carousel .section-title { font-size: clamp(2.4rem, 12vw, 3.5rem); }
  .kz-doctors-carousel .section-side > p { font-size: .88rem; }
  .kz-doctors-carousel .doctor-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kz-doctors-carousel .doctor-filter::-webkit-scrollbar { display: none; }
  .kz-doctors-carousel .doctor-filter-btn { flex: 0 0 auto; white-space: nowrap; }
  .kz-doctors-carousel .carousel-shell { margin-inline: -16px calc((100vw - min(100% - 32px, var(--kz-doctor-container-width))) / -2); }
  .kz-doctors-carousel .doctor-track .doctor-card { flex-basis: calc(100% - clamp(40px, 12vw, 72px)); height: var(--kz-doctor-card-height); }
  .kz-doctors-carousel .doctor-name { font-size: 1.65rem; }
  .kz-doctors-carousel--compact .doctor-track .doctor-card { height: auto; padding: 18px; grid-template-columns: 64px minmax(0, 1fr) 42px; }
  .kz-doctors-carousel--compact .doctor-media { width: 64px; height: 64px; }
  .kz-doctors-carousel--compact .doctor-name { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kz-doctors-carousel .doctor-card,
  .kz-doctors-carousel .doctor-image,
  .kz-doctors-carousel .doctor-action,
  .kz-doctors-carousel .carousel-arrow,
  .kz-doctors-carousel .carousel-progress > span { transition: none; }
}