/* Single department — Figma 935:20350 */

.department {
	background: var(--dr-hug-bg);
	font-family: var(--dr-hug-font-family);
	padding: 0 0 100px;
}

.department__inner {
	display: flex;
	flex-direction: column;
	gap: 42px;
	max-width: var(--dr-hug-content-width);
	margin: 0 auto;
	padding: 0 var(--dr-hug-content-gutter);
}

.department__main {
	display: flex;
	flex-direction: column;
	gap: 42px;
}

.department__not-found {
	margin: 0;
	font-size: var(--dr-hug-font-size-base);
	font-weight: var(--dr-hug-font-weight-medium);
	color: var(--dr-hug-grey);
}

.department__section-title {
	margin: 0;
	font-size: var(--dr-hug-font-size-xxl);
	font-weight: var(--dr-hug-font-weight-bold);
	line-height: 1.4;
	color: var(--dr-hug-black);
}

.department-hero {
	display: flex;
	flex-direction: column;
	gap: 42px;
}

.department-hero__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.department-hero__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	padding: 24px;
	border-radius: 24px;
	background: var(--dr-hug-white);
}

.department-hero__title {
	margin: 0;
	font-size: var(--dr-hug-font-size-xxl);
	font-weight: var(--dr-hug-font-weight-bold);
	line-height: 1.4;
	color: var(--dr-hug-black);
	overflow-wrap: anywhere;
}

.department-hero__description {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.department-hero__description p {
	margin: 0;
	font-size: var(--dr-hug-font-size-base);
	font-weight: var(--dr-hug-font-weight-medium);
	line-height: 1.4;
	color: var(--dr-hug-black);
	overflow-wrap: anywhere;
}

.department-hero__media {
	position: relative;
	height: 510px;
	overflow: hidden;
	border-radius: 24px;
	background: #ede1da;
}

.department-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.department-hero__button,
.department-hero__button:link,
.department-hero__button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 1 / -1;
	height: 72px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--dr-hug-pink);
	color: var(--dr-hug-white);
	font-size: var(--dr-hug-font-size-base);
	font-weight: var(--dr-hug-font-weight-bold);
	line-height: 1.4;
	text-decoration: none;
	transition: background 0.2s ease, opacity 0.2s ease;
}

a.department-hero__button:hover,
a.department-hero__button:focus,
a.department-hero__button:focus-visible,
a.department-hero__button:active,
a.department-hero__button:visited:hover {
	background: var(--dr-hug-pink);
	color: var(--dr-hug-white);
	text-decoration: none;
	opacity: 0.92;
	outline: none;
}

.department-prices {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.department-doctors {
	display: flex;
	flex-direction: column;
	gap: 42px;
}

.department-doctors__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.department-doctors__link,
.department-doctors__link:link,
.department-doctors__link:visited {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	color: var(--dr-hug-pink);
	font-size: var(--dr-hug-font-size-base);
	font-weight: var(--dr-hug-font-weight-bold);
	line-height: 1.4;
	text-decoration: none;
}

.department-doctors__link:hover,
.department-doctors__link:focus-visible {
	opacity: 0.85;
	outline: none;
}

.department-doctors__link img {
	display: block;
	width: 20px;
	height: 20px;
}

.department-doctors__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1000px) {
	.department-hero__grid {
		grid-template-columns: 1fr;
	}

	.department-hero__media {
		height: 360px;
	}

	.department-doctors__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.department__inner {
		gap: 32px;
	}

	.department__main {
		gap: 32px;
	}

	.department-hero__title,
	.department__section-title {
		font-size: 20px;
	}

	.department-hero__media {
		height: 280px;
	}

	.department-hero__button,
	.department-hero__button:link,
	.department-hero__button:visited {
		height: 56px;
	}

	.department-doctors__grid {
		grid-template-columns: 1fr;
	}

	.department-doctors__head {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.department-hero__button,
	.department-hero__button:link,
	.department-hero__button:visited {
		transition: none;
	}
}