/* =========================================================
   MAXTREAT DOCTORS
   Frontend styles
   ========================================================= */

.mtd-doctors {
	--mtd-gap: 30px;
	--mtd-arrow-size: 60px;

	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.mtd-doctors *,
.mtd-doctors *::before,
.mtd-doctors *::after {
	box-sizing: border-box;
}


/* =========================================================
   SLIDER WRAPPER
   ========================================================= */

.mtd-doctors__slider {
	position: relative;
	width: 100%;
}

.mtd-doctors__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.mtd-doctors__track {
	display: flex;
	align-items: stretch;
	gap: var(--mtd-gap);

	width: 100%;

	transform: translate3d(0, 0, 0);

	transition:
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);

	will-change: transform;
}


/* =========================================================
   DOCTOR CARD
   ========================================================= */

.mtd-doctor {
	flex: 0 0
		calc(
			(
				100% -
				(
					var(--mtd-gap) *
					(var(--mtd-desktop) - 1)
				)
			)
			/
			var(--mtd-desktop)
		);

	min-width: 0;
}


/* =========================================================
   PHOTO
   ========================================================= */

.mtd-doctor__photo {
	position: relative;

	display: block;

	width: 100%;

	aspect-ratio: 418 / 599;

	overflow: hidden;

	background: #f1f2f2;

	text-decoration: none;
}

.mtd-doctor__photo img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.45s ease;
}

.mtd-doctor__photo:hover img {
	transform: scale(1.02);
}


/* =========================================================
   POSITION
   ========================================================= */

.mtd-doctor__position {
	margin-top: 25px;

	font-size: 16px;
	line-height: 1.45;

	font-weight: 400;

	color: #8c8c8c;
}


/* =========================================================
   NAME
   ========================================================= */

.mtd-doctor__name {
	margin: 12px 0 0;

	font-size: 27px;
	line-height: 1.16;

	font-weight: 800;

	text-transform: uppercase;
}

.mtd-doctor__name a {
	color: #373737;

	text-decoration: none;

	transition:
		color 0.2s ease;
}

.mtd-doctor__name a:hover {
	color: #7cbb59;
}


/* =========================================================
   MORE LINK
   ========================================================= */

.mtd-doctor__more {
	display: inline-flex;
	align-items: center;
	gap: 32px;

	margin-top: 32px;

	color: #7cbb59;

	font-size: 17px;
	line-height: 1.2;

	font-weight: 700;

	letter-spacing: 0.04em;

	text-transform: uppercase;

	text-decoration: none;

	transition:
		opacity 0.2s ease;
}

.mtd-doctor__more:hover {
	color: #7cbb59;
	opacity: 0.75;
}

.mtd-doctor__more-arrow {
	display: inline-block;

	font-size: 26px;
	line-height: 1;

	font-weight: 400;

	transition:
		transform 0.25s ease;
}

.mtd-doctor__more:hover
.mtd-doctor__more-arrow {
	transform: translateX(5px);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.mtd-doctors__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: var(--mtd-arrow-size);
	height: var(--mtd-arrow-size);

	padding: 0;

	border: 1px solid #7cbb59;
	border-radius: 4px;

	background: #fff;

	color: #7cbb59;

	font-size: 28px;
	line-height: 1;

	font-family: inherit;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		opacity 0.2s ease;

	z-index: 10;
}

.mtd-doctors__button:hover {
	background: #7cbb59;
	color: #fff;

	border-color: #7cbb59;
}

.mtd-doctors__button:focus {
	outline: none;

	box-shadow:
		0 0 0 3px
		rgba(124, 187, 89, 0.18);
}

.mtd-doctors__button:disabled {
	opacity: 0.35;
	cursor: default;
}

.mtd-doctors__button:disabled:hover {
	background: #fff;
	color: #7cbb59;
}


/* =========================================================
   BOTTOM ARROWS
   ========================================================= */

.mtd-doctors--arrows-bottom
.mtd-doctors__navigation {
	display: flex;
	align-items: center;
	gap: 14px;

	margin-top: 34px;
}

.mtd-doctors--arrows-bottom
.mtd-doctors__side-button {
	display: none;
}


/* =========================================================
   SIDE ARROWS
   ========================================================= */

.mtd-doctors--arrows-sides
.mtd-doctors__navigation {
	display: none;
}

.mtd-doctors--arrows-sides
.mtd-doctors__side-button {
	position: absolute;

	top: 50%;

	margin: 0;

	transform: translateY(-50%);

	z-index: 20;

	box-shadow:
		0 4px 18px
		rgba(0, 0, 0, 0.08);
}


/*
 * Стрелки располагаются поверх краёв области слайдера.
 * Они не уменьшают ширину карточек врачей.
 */

.mtd-doctors--arrows-sides
.mtd-doctors__prev {
	left: 14px;
}

.mtd-doctors--arrows-sides
.mtd-doctors__next {
	right: 14px;
}


/*
 * Центрируем стрелки относительно фотографий,
 * а не всей высоты карточек.
 *
 * Фото занимает верхнюю часть карточки.
 * Значение 35% визуально соответствует центру
 * изображения в текущем дизайне MaxTreat.
 */

.mtd-doctors--arrows-sides
.mtd-doctors__side-button {
	top: 35%;
}


/* =========================================================
   GRID MODE
   ========================================================= */

.mtd-doctors--grid
.mtd-doctors__slider {
	width: 100%;
}

.mtd-doctors--grid
.mtd-doctors__viewport {
	overflow: visible;
}

.mtd-doctors--grid
.mtd-doctors__track {
	display: grid;

	grid-template-columns:
		repeat(
			var(--mtd-desktop),
			minmax(0, 1fr)
		);

	gap: 40px var(--mtd-gap);

	transform: none !important;

	transition: none;
}

.mtd-doctors--grid
.mtd-doctor {
	width: auto;
	min-width: 0;
}

.mtd-doctors--grid
.mtd-doctors__navigation,
.mtd-doctors--grid
.mtd-doctors__side-button {
	display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.mtd-doctors {
		--mtd-gap: 22px;
		--mtd-arrow-size: 52px;
	}


	.mtd-doctor {
		flex-basis:
			calc(
				(
					100% -
					(
						var(--mtd-gap) *
						(var(--mtd-tablet) - 1)
					)
				)
				/
				var(--mtd-tablet)
			);
	}


	.mtd-doctor__position {
		margin-top: 20px;

		font-size: 15px;
	}


	.mtd-doctor__name {
		font-size: 23px;
	}


	.mtd-doctor__more {
		margin-top: 24px;

		font-size: 15px;

		gap: 20px;
	}


	.mtd-doctors--grid
	.mtd-doctors__track {
		grid-template-columns:
			repeat(
				var(--mtd-tablet),
				minmax(0, 1fr)
			);
	}


	.mtd-doctors--arrows-sides
	.mtd-doctors__prev {
		left: 10px;
	}


	.mtd-doctors--arrows-sides
	.mtd-doctors__next {
		right: 10px;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.mtd-doctors {
		--mtd-gap: 18px;
		--mtd-arrow-size: 46px;
	}


	.mtd-doctor {
		flex-basis:
			calc(
				(
					100% -
					(
						var(--mtd-gap) *
						(var(--mtd-mobile) - 1)
					)
				)
				/
				var(--mtd-mobile)
			);
	}


	.mtd-doctor__position {
		margin-top: 17px;

		font-size: 14px;
	}


	.mtd-doctor__name {
		margin-top: 8px;

		font-size: 21px;
	}


	.mtd-doctor__more {
		margin-top: 20px;

		font-size: 14px;

		gap: 15px;
	}


	.mtd-doctor__more-arrow {
		font-size: 22px;
	}


	.mtd-doctors__button {
		font-size: 23px;
	}


	/*
	 * На телефоне боковые стрелки тоже остаются
	 * поверх фотографии.
	 */

	.mtd-doctors--arrows-sides
	.mtd-doctors__prev {
		left: 8px;
	}


	.mtd-doctors--arrows-sides
	.mtd-doctors__next {
		right: 8px;
	}


	.mtd-doctors--arrows-sides
	.mtd-doctors__side-button {
		top: 34%;
	}


	.mtd-doctors--arrows-bottom
	.mtd-doctors__navigation {
		margin-top: 25px;
	}


	.mtd-doctors--grid
	.mtd-doctors__track {
		grid-template-columns:
			repeat(
				var(--mtd-mobile),
				minmax(0, 1fr)
			);

		row-gap: 34px;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.mtd-doctors__track,
	.mtd-doctor__photo img,
	.mtd-doctor__more-arrow {
		transition: none;
	}
}