/*
 * [sl_doctors] — эмч нарын гүйдэг carousel (inc/home-v2.php). Нүүр хуудас, "Бидний тухай" хуудсанд.
 * JS: assets/js/carousel.js. Зөвхөн tokens.css-ийн утгууд.
 */


.sl-carousel {
	display: grid;
	gap: var(--sl-space-3);
	min-width: 0;
}

.sl-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--sl-space-3)) / 4);
	gap: var(--sl-space-3);
	margin: -12px 0 0;
	padding: 12px 0 var(--sl-space-2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	list-style: none;
}

.sl-carousel__track::-webkit-scrollbar {
	display: none;
}

.sl-carousel__track:focus-visible {
	outline: 3px solid var(--sl-focus-ring);
	outline-offset: 4px;
	border-radius: var(--sl-radius);
}

.sl-carousel__track > * {
	scroll-snap-align: start;
}

.sl-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sl-space-3);
}

.sl-carousel__controls[hidden] {
	display: none;
}

.sl-carousel__progress {
	position: relative;
	flex: 0 1 280px;
	height: 4px;
	overflow: hidden;
	border-radius: var(--sl-radius-pill);
	background: var(--sl-color-border);
}

.sl-carousel__progress span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--sl-bar-size, 100%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--sl-color-primary), var(--sl-color-sky));
	transform: translateX(var(--sl-bar-offset, 0%));
	transition: transform .2s linear;
}

.sl-carousel__nav {
	display: flex;
	gap: 10px;
}

.sl-carousel__btn {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1.5px solid var(--sl-color-border-strong);
	border-radius: 50%;
	background: var(--sl-color-bg);
	color: var(--sl-color-text);
	cursor: pointer;
	transition: background-color var(--sl-transition), border-color var(--sl-transition), color var(--sl-transition), transform .25s var(--sl-ease-out), opacity var(--sl-transition);
}

.sl-carousel__btn:hover:not([disabled]) {
	border-color: var(--sl-color-primary);
	background: var(--sl-color-primary);
	color: var(--sl-color-on-primary);
	transform: translateY(-2px);
}

.sl-carousel__btn[disabled] {
	opacity: .35;
	cursor: default;
}

.sl-doctors {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-doctor {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--sl-radius-lg);
	background: var(--sl-color-ink);
	box-shadow: var(--sl-shadow-card);
	transition: transform .4s var(--sl-ease-out), box-shadow .4s var(--sl-ease-out);
}

.sl-doctor__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.sl-carousel .sl-doctor .sl-doctor__img { /* .elementor img { height: auto }-оос давамгайлна */
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--sl-focus, 50% 0%);
	transition: transform .7s var(--sl-ease-out);
}

.sl-doctor::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(11, 22, 56, 0) 42%, rgba(11, 22, 56, .55) 64%, rgba(11, 22, 56, .94) 100%);
	transition: opacity .4s var(--sl-ease-out);
}

.sl-doctor__body {
	padding: var(--sl-space-3) 20px 20px;
	color: #fff;
}

.sl-carousel .sl-doctor__name {
	margin: 0 0 4px;
	color: #fff;
	font-size: 18px;
	line-height: 1.3;
}

.sl-carousel .sl-doctor a.sl-doctor__link {
	color: #fff;
	text-decoration: none;
}

/* Бүх карт дарагдана */
.sl-doctor__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sl-doctor__specialty {
	margin: 0;
	color: rgba(255, 255, 255, .84);
	font-size: 14px;
	line-height: 1.45;
}

.sl-doctor__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	color: var(--sl-color-highlight);
	font-size: 14px;
	font-weight: var(--sl-font-weight-bold);
	opacity: 0;
	transition: max-height .35s var(--sl-ease-out), margin .35s var(--sl-ease-out), opacity .35s var(--sl-ease-out);
}

.sl-doctor:hover,
.sl-doctor:has(.sl-doctor__link:focus-visible) {
	transform: translateY(-6px);
	box-shadow: var(--sl-shadow-lg);
}

.sl-carousel .sl-doctor:hover .sl-doctor__img,
.sl-carousel .sl-doctor:has(.sl-doctor__link:focus-visible) .sl-doctor__img {
	transform: scale(1.06);
}

.sl-doctor:hover .sl-doctor__more,
.sl-doctor:has(.sl-doctor__link:focus-visible) .sl-doctor__more {
	max-height: 24px;
	margin-top: 10px;
	opacity: 1;
}

.sl-doctor:has(.sl-doctor__link:focus-visible) {
	outline: 3px solid var(--sl-focus-ring);
	outline-offset: 3px;
}

.sl-doctor__link:focus-visible {
	outline: none;
	box-shadow: none;
}

@media (hover: none) {
	.sl-doctor__more {
		max-height: 24px;
		margin-top: 10px;
		opacity: 1;
	}
}

@media (max-width: 1199px) {
	.sl-carousel__track {
		grid-auto-columns: calc((100% - 2 * var(--sl-space-3)) / 3);
	}
}

@media (max-width: 899px) {
	.sl-carousel__track {
		grid-auto-columns: calc((100% - var(--sl-space-3)) / 2.2);
	}
}

@media (max-width: 599px) {
	.sl-carousel__track {
		grid-auto-columns: 74%;
		gap: var(--sl-space-2);
	}

	.sl-carousel__btn {
		width: 46px;
		height: 46px;
	}

	.sl-carousel .sl-doctor__name {
		font-size: 17px;
	}
}