/* ProClinic — front page: hero, about, services, numbers, team, results.
   The advantages block lives in common.css — the about page uses it too. */


.pc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 900px;
	padding: 190px 0 96px;
	overflow: hidden;
	background: #2b2b2e center / cover no-repeat;
	color: #fff;
}

.pc-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);

}

.pc-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 48px;
}

.pc-hero__title {
	max-width: 560px;
	font-size: 70px;
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.pc-hero__subtitle {
	max-width: 560px;
	margin-top: 24px;
	font-size: 17px;
	color: rgba(255, 255, 255, 0.86);
}

.pc-hero__actions {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-top: 64px;
	flex-wrap: wrap;
}

.pc-rating {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pc-rating__value {
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.pc-rating__star {
	color: var(--pc-accent);
}

.pc-rating__note {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.9);
}

.pc-hero__media {
	display: grid;
	grid-template-columns: 296px 296px;
	gap: var(--pc-gap);
	align-items: stretch;
}

.pc-hero__video {
	width: 100%;
	aspect-ratio: 295 / 215;
	border-radius: 12px;
}

.pc-hero__card {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border-radius: 12px;
	background: #FFFFFF0D;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid #FFFFFF1A;
}

.pc-hero__card-head {
	display: flex;
	align-items: center;
	gap: 24px;
}

.pc-avatar {
	position: relative;
	display: block;
	width: 60px;
	height: 60px;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.24);
}

.pc-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pc-hero__card-who {
	display: grid;
	gap: 2px;
}

.pc-hero__card-who b {
	font-size: 16px;
	font-weight: 500;
}

.pc-hero__card-who span {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
}

.pc-hero__card-quote {
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.6;
	color: rgb(255, 255, 255);
}

.pc-about {
	background: var(--pc-bg-soft);
}

.pc-about__title {
	margin-bottom: 50px;
}

.pc-about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pc-gap);
}

.pc-about__card {
	padding: 48px 44px;
	background: var(--pc-bg-card);
	border-radius: var(--pc-radius);
}

.pc-about__card-title {
	margin-bottom: 29px;
	font-size: 30px;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-about__media {
	aspect-ratio: 1 / 1.04;
}

.pc-services {
	padding: 120px 0 67px;
	background: var(--pc-bg-soft);
}

.pc-services__title {
	margin-bottom: 56px;
}

/* Mosaic of the first four cards, column ratios from the layout. */

.pc-services__mosaic {
	display: grid;
	grid-template-columns: 500fr 364fr 368fr;
	grid-template-rows: 298px 298px;
	gap: var(--pc-gap);
}

.pc-service--m1 {
	grid-column: 1;
	grid-row: 1 / 3;
}

.pc-service--m2 {
	grid-column: 2 / 4;
	grid-row: 1;
}

.pc-service--m3 {
	grid-column: 2;
	grid-row: 2;
}

.pc-service--m4 {
	grid-column: 3;
	grid-row: 2;
}

.pc-services__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pc-gap);
	margin-top: var(--pc-gap);
}

.pc-service--wide {
	height: 298px;
}

.pc-service {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--pc-radius);
	background: #e9e9ec;
}

.pc-service__media {
	position: absolute;
	inset: 0;
	border-radius: 0;
}

/* Bottom scrim keeps the caption readable on any photo. */

.pc-service__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0421543) 50.93%, rgba(0, 0, 0, 0.408596) 80.42%, rgba(0, 0, 0, 0.5) 100%);
}

.pc-service__caption {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	display: grid;
	gap: 4px;
	padding: 20px;
	border-radius: var(--pc-radius-sm);
	background: #FFFFFF0D;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid #FFFFFF1A;
	color: #fff;
}

.pc-service__title {
	font-size: 25px;
	font-weight: 700;
}

.pc-service__text {
	font-size: 16px;
	font-weight: 400;
	color: #FFFFFF;
}

.pc-services__cta {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}

.pc-stats {
	background: var(--pc-bg-soft);
	border-top: 1px solid #DFDFDF;
	border-bottom: 1px solid #DFDFDF;
	padding: 100px 0;
}

.pc-stats__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pc-gap);
	align-items: center;
	margin-bottom: 40px;
}

.pc-stats__title {
	max-width: 520px;
}

.pc-stats__text {
	max-width: 620px;
	font-size: 16px;
}

.pc-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pc-gap);
}

.pc-stat {
	display: grid;
	gap: 9px;
	align-content: start;
}

.pc-stat__value {
	font-size: 70px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--pc-ink);
}

.pc-stat__label {
	max-width: 290px;
	font-size: 16px;
}

.pc-team {
	background: var(--pc-bg-soft);
}

.pc-team__title {
	max-width: 630px;
}

.pc-team__carousel .pc-carousel__item {
	width: calc((100% - var(--pc-gap) * 2) / 3);
}

.pc-doctor {
	display: grid;
	gap: 30px;
	align-content: start;
}

.pc-doctor__media {
	aspect-ratio: 410 / 494;
}

.pc-doctor__body {
	display: grid;
	gap: 4px;
}

.pc-doctor__name {
	font-size: 25px;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-doctor__role {
	font-size: 18px;
	color: #313131;
}


/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 1280px) {
	/* Fixed px from the 1290 layout: below it the text column narrows faster
	   than long words do. */
	.pc-hero__title {
		font-size: 56px;
	}
}

@media (max-width: 1180px) {
	.pc-hero__media {
		grid-template-columns: 260px 260px;
	}
}

@media (max-width: 1024px) {
	/* Accent rule under section headings */
	.pc-services__title::after,
	.pc-team__title::after,
	.pc-results__title::after {
		content: "";
		display: block;
		width: 40px;
		height: 3px;
		margin-top: 8px;
		border-radius: 2px;
		background: var(--pc-accent);
	}

	/* Sections with their own padding go back to --pc-section. */
	.pc-services,
	.pc-stats {
		padding: var(--pc-section) 0;
	}

	/* Hero */
	.pc-hero {
		min-height: 0;
		padding: calc(var(--pc-header-h) + 40px) 0 35px;
	}

	.pc-hero__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.pc-hero__title {
		max-width: none;
		font-size: 40px;
		line-height: 1.15;
	}

	.pc-hero__subtitle {
		margin-top: 18px;
		font-size: 15px;
		line-height: 1.5;
	}

	/* No rating next to the button in the layout. */
	.pc-hero__actions {
		gap: 24px;
		margin-top: 46px;
	}

	.pc-rating {
		display: none;
	}

	.pc-hero__media {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.pc-hero__video {
		aspect-ratio: 350 / 160;
	}

	/* Solid white doctor card. */
	.pc-hero__card {
		padding: 16px;
		border-radius: var(--pc-radius-sm);
		background: #fff;
		border-color: transparent;
		color: var(--pc-ink);
	}

	.pc-hero__card-head {
		gap: 12px;
	}

	.pc-avatar {
		width: 48px;
		height: 48px;
	}

	.pc-hero__card-who span {
		font-size: 13px;
		color: var(--pc-muted);
	}

	.pc-hero__card-quote {
		font-size: 13px;
		line-height: 1.4;
		color: var(--pc-body);
	}

	/* About */
	.pc-about__title {
		margin-bottom: 34px;
	}

	.pc-about__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.pc-about__card {
		padding: 20px;
		border-radius: var(--pc-radius-sm);
		background: #fff;
	}

	.pc-about__card-title {
		margin-bottom: 20px;
		font-size: 16px;
	}

	.pc-about__media {
		aspect-ratio: 350 / 220;
	}

	/* Services */
	.pc-services__title {
		margin-bottom: 32px;
		text-align: left;
		max-width: none;
	}

	.pc-services__mosaic,
	.pc-services__row {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 16px;
	}

	.pc-services__row {
		margin-top: 16px;
	}

	.pc-service--m1,
	.pc-service--m2,
	.pc-service--m3,
	.pc-service--m4 {
		grid-column: auto;
		grid-row: auto;
	}

	.pc-service,
	.pc-service--wide {
		height: 180px;
		border-radius: var(--pc-radius-sm);
	}

	/* Caption is a full-width strip along the bottom of the card. */
	.pc-service__caption {
		left: 0;
		right: 0;
		bottom: 0;
		padding: 16px;
		border-radius: 0 0 var(--pc-radius-sm) var(--pc-radius-sm);
		border-width: 1px 0 0;
	}

	.pc-service__title {
		font-size: 14px;
	}

	.pc-service__text {
		font-size: 11.5px;
		line-height: 1.3;
	}

	.pc-services__cta {
		margin-top: 32px;
	}

	.pc-services__cta .pc-btn {
		width: 100%;
		justify-content: center;
	}

	/* Numbers. Section turns white and the tiles grey — inverted from desktop. */
	.pc-stats {
		background: var(--pc-bg);
		border-color: #ebebeb;
	}

	.pc-stats__head {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-bottom: 26px;
	}

	/* Smaller than the other section headings. */
	.pc-stats__title {
		font-size: 20px;
	}

	/* No lead paragraph in the layout. */
	.pc-stats__text {
		display: none;
	}

	.pc-stats__grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.pc-stat {
		gap: 8px;
		padding: 16px 13px;
		background: var(--pc-bg-soft);
		border-radius: var(--pc-radius-sm);
	}

	.pc-stat__value {
		font-size: 29px;
		color: var(--pc-accent);
	}

	.pc-stat__label {
		font-size: 13px;
	}

	/* Team: a list of cards instead of a carousel */
	.pc-team .pc-arrows {
		display: none;
	}

	/* Splide is destroyed here, so gap and overflow come back to us. The
	   .splide part beats the shared gap reset. */
	.pc-team__carousel {
		overflow: visible;
	}

	.pc-team__carousel .splide__track {
		overflow: visible;
	}

	.pc-team__carousel.splide .pc-carousel__track {
		flex-direction: column;
		gap: var(--pc-gap);
		overflow: visible;
	}

	.pc-team__carousel .pc-carousel__item {
		width: 100%;
	}

	.pc-doctor {
		gap: 0;
		overflow: hidden;
		background: #fff;
		border-radius: var(--pc-radius-sm);
	}

	.pc-doctor__media {
		aspect-ratio: 350 / 240;
		border-radius: 0;
	}

	.pc-doctor__body {
		padding: 22px 16px 16px;
	}

	.pc-doctor__name {
		font-size: 17px;
	}

	.pc-doctor__role {
		font-size: 13px;
	}

}

@media (max-width: 560px) {
	.pc-hero__title {
		font-size: 32px;
	}

	.pc-hero__card-quote {
		margin-top: 12px;
	}

	.pc-hero__actions {
		width: fit-content;
		flex-direction: column;
		align-items: flex-start;
	}

	.pc-hero__actions .pc-btn {
		width: 100%;
		font-size: 14px;
		justify-content: space-between;
	}

	.pc-stats__grid {
		grid-template-columns: 1fr 1fr;
	}
}