/* ProClinic — service page: banner, cards, panels, steps, prices, notes,
   facts. Before/after, callback form and WhatsApp come from common.css. */


/* The whole page sits on the soft grey, so white blocks — price rows, review
   cards, the footer — read as cards on top of it. This file only loads on the
   service template, so the body rule stays scoped to it. */

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

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

/* Each block carries its spacing on the top edge only. With padding on both
   sides two neighbours add up and the gap between them doubles to 240px.

   Reviews keep their bottom padding: the dark block that follows has its own
   background, so its top padding falls inside the dark area instead of
   spacing the two blocks apart. */

.pc-svc-cards,
.pc-svc-panels,
.pc-svc-steps,
.pc-svc-prices,
.pc-results {
	padding-bottom: 0;
}


/* Banner */

/* Bottom padding leaves room for the cards row that slides up over it. */

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

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

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

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

.pc-svc-hero__aside {
	display: grid;
	justify-items: start;
	gap: 40px;
}

.pc-svc-hero__text {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.9);
}

/* Three cards. The row is pulled up so it overlaps the banner. */

.pc-svc-cards {
	position: relative;
	z-index: 1;
	margin-top: -210px;
}

.pc-svc-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 37.5px;
}

.pc-svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 405 / 380;
	padding: 42px 30px 33px;
	border-radius: var(--pc-radius-sm);
	background: #f0f2f3;
	color: var(--pc-ink);
	overflow: hidden;
}

.pc-svc-card--photo,
.pc-svc-card--video {
	padding: 0;
	background: #eeeef0;
}

.pc-svc-card__title {
	margin-bottom: 12px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--pc-ink);
}

.pc-svc-card__text {
	font-size: 16px;
	line-height: 1.6;
}

.pc-svc-card__caption {
	position: absolute;
	z-index: 1;
	left: 24px;
	right: 24px;
	bottom: 48px;
	padding: 26px;
	font-size: 16px;
	line-height: 1.5;
}

.pc-svc-card__play {
	width: 62px;
	height: 62px;
	border: 0;
}

.pc-svc-card--video.is-playing .pc-svc-card__play {
	display: none;
}

.pc-svc-card__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

/* Rating with overlapping user photos, pinned to the bottom of the card. */

.pc-svc-card__foot {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	margin-top: auto;
	padding-top: 30px;
}

.pc-faces {
	display: flex;
	flex: none;
}

.pc-faces__item {
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	background: #dcdfe1;
}

.pc-faces__item + .pc-faces__item {
	margin-left: -15px;
}

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

.pc-svc-card__rating {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: center;
	gap: 0 6px;
}

.pc-svc-card__rating-value {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var(--pc-ink);
}

.pc-svc-card__rating-star {
	color: var(--pc-accent);
}

.pc-svc-card__rating-note {
	grid-column: 1 / -1;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 500;
	color: #161616;
}

/* Two wide panels */

.pc-svc-panels__title {
	max-width: 1060px;
	margin-bottom: 46px;
}

.pc-svc-panels__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-gap);
}

.pc-svc-panel {
	display: flex;
	flex-direction: column;
	padding: 40px;
	border-radius: var(--pc-radius-sm);
	background: var(--pc-bg-card);
	height: 546px;
}

/* Outline pattern from the layout; it already carries its own 0.2 opacity. */

.pc-svc-panel--accent {
	background: var(--pc-accent) url("../img/panel-pattern.svg") center / cover no-repeat;
	color: #fff;
}

.pc-svc-panel__title {
	max-width: 450px;
	margin-bottom: 20px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pc-ink);
}

.pc-svc-panel--accent .pc-svc-panel__title {
	max-width: 100%;
	color: #fff;
}

.pc-svc-panel__text {
	font-size: 16px;
	line-height: 1.6;
}

.pc-svc-panel__text + .pc-svc-panel__list {
	margin-top: 34px;
}

.pc-svc-panel__list {
	display: grid;
	gap: 18px;
	margin-top: 30px;
}

.pc-svc-panel__list li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 16px;
	align-items: start;
	font-size: 16px;
	line-height: 1.6;
	color: #313131;
}

/* Bottom of the accent panel: two figures side by side. */

.pc-svc-panel__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px;
	margin-top: auto;
	padding-top: 60px;
}

.pc-svc-subcard__title {
	margin-bottom: 18px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
}

.pc-svc-subcard__text {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

/* Steps */

.pc-svc-steps__title {
	max-width: 1060px;
	margin-bottom: 46px;
}

.pc-svc-step {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px;
	align-items: center;
}

.pc-svc-step + .pc-svc-step {
	margin-top: 110px;
}

.pc-svc-step__title {
	margin-bottom: 20px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pc-ink);
}

.pc-svc-step__text {
	font-size: 17px;
	line-height: 1.53;
}

/* First step keeps the gallery on the left, every next one flips. */

.pc-svc-gallery {
	position: relative;
	order: -1;
}

.pc-svc-step--reverse .pc-svc-gallery {
	order: 0;
}

/* Desktop is a plain grid: the first shot spans the row, the other two sit
   under it. All four classes beat splide-core, which styles .splide__list
   even while the slider is destroyed. */

.pc-svc-gallery__carousel.splide .pc-carousel__track.splide__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pc-gap);
	height: auto;
}

.pc-svc-gallery__item {
	aspect-ratio: 287.5 / 190;
}

.pc-svc-gallery__item:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 605 / 404;
}

.pc-svc-steps__cta {
	display: flex;
	justify-content: center;
	margin-top: 110px;
}

/* Prices */

.pc-svc-prices__title {
	margin-bottom: 50px;
}

.pc-svc-prices__list {
	display: grid;
	gap: 8px;
}

.pc-svc-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 70px;
	padding: 16px 21px;
	border-radius: var(--pc-radius-sm);
	background: #fff;
}

.pc-svc-price__name {
	font-size: 20px;
	font-weight: 600;
	color: var(--pc-ink);
}

.pc-svc-price__value {
	font-size: 20px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--pc-accent);
}

/* Dark block: heading and lead in two columns, cards below. */

.pc-svc-facts {
	position: relative;
	padding: var(--pc-section) 0;
	overflow: hidden;
	background: #1b1b1d center / cover no-repeat;
	color: #fff;
}

.pc-svc-facts__scrim {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 13, 0.78);
}

.pc-svc-facts__inner {
	position: relative;
}

.pc-svc-facts__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--pc-gap);
	align-items: center;
	margin-bottom: 90px;
}

.pc-svc-facts__title {
	max-width: 630px;
	line-height: 1.3;
}

.pc-svc-facts__text {
	max-width: 600px;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
}

.pc-svc-facts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pc-gap);
}

.pc-svc-fact {
	display: grid;
	align-content: start;
	padding: 36px 36px 62px;
	border-radius: 20px;
}

.pc-svc-fact__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 75px;
	height: 75px;
	margin-bottom: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.pc-svc-fact__ico img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.pc-svc-fact__title {
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 700;
}

.pc-svc-fact__text {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

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


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

@media (max-width: 1280px) {
	.pc-svc-hero__title {
		font-size: 56px;
	}

	.pc-svc-step {
		gap: 48px;
	}

	.pc-svc-panel {
		padding: 40px 32px;
	}
}

@media (max-width: 1024px) {
	.pc-svc-hero {
		min-height: 0;
		margin-top: var(--pc-header-h);
		padding: 40px 0;
	}

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

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

	.pc-svc-hero__text {
		font-size: 15px;
		line-height: 1.4;
	}

	.pc-svc-hero__aside {
		justify-items: stretch;
		gap: 24px;
	}

	.pc-svc-hero__aside .pc-btn {
		justify-content: center;
	}

	/* Cards: no overlap on phones, the row simply follows the banner. */
	.pc-svc-cards {
		margin-top: 0;
		padding-top: 24px;
	}

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

	.pc-svc-card {
		aspect-ratio: auto;
		padding: 21px;
		border-radius: 12px;
	}

	.pc-svc-card--photo {
		padding: 0;
		aspect-ratio: 358 / 240;
	}

	.pc-svc-card--video {
		padding: 0;
		aspect-ratio: 358 / 200;
	}

	.pc-svc-card__play {
		width: 48px;
		height: 48px;
	}

	.pc-svc-card__title {
		margin-bottom: 12px;
		font-size: 16px;
	}

	.pc-svc-card__text {
		font-size: 14px;
	}

	.pc-svc-card__caption {
		left: 12px;
		right: 12px;
		bottom: 12px;
		padding: 16px;
		border-radius: 10px;
		font-size: 12px;
		line-height: 1.7;
	}

	.pc-svc-card__foot {
		padding-top: 20px;
	}

	.pc-faces__item {
		width: 37px;
		height: 37px;
	}

	.pc-faces__item + .pc-faces__item {
		margin-left: -11px;
	}

	.pc-svc-card__rating-value {
		font-size: 18px;
	}

	.pc-svc-card__rating-star {
		width: 22px;
		height: 22px;
	}

	.pc-svc-card__rating-note {
		font-size: 13px;
		line-height: 1;
	}

	/* Panels */
	.pc-svc-panels__title {
		margin-bottom: 28px;
		font-size: 22px;
	}

	.pc-svc-panels__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	/* The fixed 546 is desktop only — on phones each panel runs to its text. */
	.pc-svc-panel {
		height: auto;
		padding: 20px;
		border-radius: 12px;
	}

	.pc-svc-panel--accent {
		padding: 26px 24px;
	}

	.pc-svc-panel__title {
		margin-bottom: 0;
		font-size: 20px;
	}

	.pc-svc-panel__text {
		font-size: 14px;
	}

	.pc-svc-panel__list {
		gap: 16px;
		margin-top: 22px;
	}

	.pc-prose p {
		font-size: 15px;
	}

	.pc-svc-panel__list li {
		font-size: 14px;
		gap: 10px;
	}

	/* On phones the figures become white cards, as in the layout. */
	.pc-svc-panel__cards {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-top: 24px;
	}

	.pc-svc-subcard {
		padding: 16px 18px;
		border-radius: var(--pc-radius-sm);
		background: #fff;
	}

	.pc-svc-subcard__title {
		margin-bottom: 6px;
		font-size: 28px;
		color: var(--pc-accent);
	}

	.pc-svc-subcard__text {
		font-size: 13px;
		color: #313131;
	}

	/* Steps: the gallery becomes a slider, one shot per view. */
	.pc-svc-steps__title {
		margin-bottom: 28px;
	}

	.pc-svc-step {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.pc-svc-step + .pc-svc-step {
		margin-top: 48px;
	}

	/* One column on phones: the gallery leads every step, no alternating. */
	.pc-svc-gallery,
	.pc-svc-step--reverse .pc-svc-gallery {
		order: -1;
	}

	.pc-svc-step__title {
		margin-bottom: 12px;
		font-size: 22px;
	}

	.pc-svc-step__text p {
		font-size: 14px;
	}

	/* On phones Splide takes over, so the list goes back to a flex row. */
	.pc-svc-gallery__carousel.splide .pc-carousel__track.splide__list {
		display: flex;
		gap: 0;
		height: 100%;
	}

	.pc-svc-gallery__item,
	.pc-svc-gallery__item:first-child {
		grid-column: auto;
		aspect-ratio: 358 / 220;
	}

	.pc-svc-steps__cta {
		margin-top: 40px;
	}

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

	/* Prices */
	.pc-svc-prices__title {
		margin-bottom: 28px;
	}

	.pc-svc-prices__list {
		gap: 9px;
	}

	.pc-svc-price {
		min-height: 48px;
		padding: 10px 16px;
		gap: 12px;
	}

	.pc-svc-price__name,
	.pc-svc-price__value {
		font-size: 14px;
	}

	/* Dark block */

	/* On phones the form loses its photo backdrop and becomes a plain card, so
	   it would butt straight against the dark block. Its own padding cannot
	   help — that space is dark — so the gap goes outside. */
	.pc-svc-facts {
		margin-bottom: var(--pc-section);
	}

	.pc-svc-facts__head {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 32px;
	}

	.pc-svc-facts__text {
		font-size: 14px;
	}

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

	.pc-svc-fact {
		padding: 22px 20px;
		border-radius: 12px;
	}

	.pc-svc-fact__ico {
		width: 56px;
		height: 56px;
		margin-bottom: 18px;
	}

	.pc-svc-fact__title {
		margin-bottom: 8px;
		font-size: 17px;
	}

	.pc-svc-fact__text {
		font-size: 13px;
	}

	.pc-svc-facts__cta {
		margin-top: 32px;
	}

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

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