/* ProClinic — about page: banner, approach, doctors, certificates. */


/* Page banner */

/* The background spans the whole section, staying visible to the left and
   right of the wide photo. */

.pc-page-hero {
	position: relative;
	padding: 280px 0 0;
	overflow: hidden;
	background: #2b2b2e center / cover no-repeat;
	color: #fff;
}

.pc-page-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
	linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
}

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

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

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

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

.pc-page-hero__media-wrap {
	position: relative;
	margin-top: 100px;
}

.pc-page-hero__media {
	aspect-ratio: 1290 / 550;
}

/* Approach */

.pc-approach {
	background: var(--pc-bg-soft);
	padding: var(--pc-section) 0 0;
}

.pc-approach__title {
	max-width: 1060px;
	margin-bottom: 50px;
	line-height: 1.5;
}

.pc-approach__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pc-gap);
	align-items: start;
}

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

.pc-approach__stat {
	display: grid;
	align-content: start;
}

.pc-approach__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 75px;
	height: 75px;
	margin-bottom: 30px;
	border-radius: 50%;
	background: var(--pc-bg-card);
	color: var(--pc-ink);
}

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

.pc-approach__value {
	font-size: 30px;
	margin-bottom: 14px;
	font-weight: 800;
	line-height: 1;
	color: var(--pc-ink);
}

.pc-approach__label {
	max-width: 290px;
	font-size: 16px;
	line-height: 1.6;
}

/* Two photos, different widths, same height. */

.pc-approach__media {
	display: grid;
	grid-template-columns: 1.83fr 1fr;
	gap: 24px;
	height: 211px;
}

.pc-approach__shot {
	height: 100%;
}

/* Doctors */

.pc-docs {
	background: var(--pc-bg-soft);
	padding: 173px 0 var(--pc-section);
}

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

.pc-docs__title {
	max-width: 720px;
}

.pc-docs__list {
	display: grid;
	gap: 140px;
}

/* Photo and text swap sides on every other card. */

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

.pc-doc--reverse .pc-doc__figure {
	order: 2;
}

.pc-doc__figure {
	position: relative;
	margin: 0;
}

.pc-doc__photo {
	aspect-ratio: 605 / 700;
}

.pc-doc__quote {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	padding: 25px 24px;
	border-radius: var(--pc-radius-sm);
	background: #3131312E;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid #3131310D;
	color: #fff;
	font-size: 18px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.65;
}

.pc-doc__name {
	font-size: 30px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--pc-ink);
}

.pc-doc__role {
	margin-top: 6px;
	font-size: 20px;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-doc__intro {
	margin-top: 38px;
	font-size: 18px;
}

.pc-doc__body .pc-checklist {
	margin-top: 26px;
}

/* Larger than the shared checklist: 18/30. */

.pc-doc__body .pc-checklist li {
	font-size: 18px;
	line-height: 1.65;
}

/* Certificates: a narrow carousel with arrows on the edges. */

.pc-certs {
	position: relative;
	margin-top: 34px;
}

.pc-certs__carousel .pc-carousel__track {
	gap: 12px;
}

/* Certificates vary in width: shared height, width from the image, and no
   background, border or padding. */

.pc-cert {
	width: auto;
	min-width: 120px;
	height: 179px;
	background: none;
	border: 0;
	border-radius: 8px;
}

.pc-cert__img {
	display: block;
	width: auto;
	height: 100%;
	object-fit: contain;
}

/* Arrows are centred on the column edges. */

.pc-arrows--certs {
	position: absolute;
	top: 50%;
	left: -15px;
	right: -15px;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}

.pc-arrows--certs .pc-arrow {
	width: 30px;
	height: 30px;
	background: #313131;
	color: #fff;
	pointer-events: auto;
}

.pc-arrows--certs .pc-arrow[disabled] {
	background: #313131;
}


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

@media (max-width: 1280px) {
	/* Fixed px from the 1440 layout: the right column is fixed, so the left
	   one narrows faster than long words do. */
	.pc-page-hero__title {
		font-size: 56px;
	}
}

@media (max-width: 1024px) {
	/* Banner */
	.pc-page-hero__scrim {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.68) 100%);
	}

	.pc-page-hero {
		margin-top: var(--pc-header-h);
		padding: 40px 0 40px;
	}

	.pc-page-hero__inner {
		grid-template-columns: 1fr;
		gap: 16px;
		min-height: 0;
	}

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

	.pc-page-hero__subtitle {
		font-size: 15px;
		line-height: 1.4;
	}

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

	/* Full-width button, content centred. */
	.pc-page-hero__aside .pc-btn {
		justify-content: center;
	}

	/* No wide photo under the banner in the layout. */
	.pc-page-hero__media-wrap {
		display: none;
	}

	/* Approach */
	.pc-approach {
		background-color: #FFFFFF;
		padding: var(--pc-section) 0;
	}
	.pc-approach__title {
		margin-bottom: 32px;
		line-height: 1.35;
	}

	.pc-approach__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

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

	.pc-approach__stat {
		grid-template-columns: 64px 1fr;
		grid-template-areas:
		"ico value"
		"ico label";
		column-gap: 12px;
		row-gap: 2px;
		align-items: center;
	}

	.pc-approach__ico {
		grid-area: ico;
		width: 64px;
		height: 64px;
		margin-bottom: 0;
	}

	.pc-approach__value {
		grid-area: value;
		margin-bottom: 0;
		align-self: end;
		font-size: 22px;
	}

	.pc-approach__label {
		grid-area: label;
		align-self: start;
		max-width: none;
		font-size: 13px;
	}

	.pc-approach__media {
		grid-template-columns: 1fr;
		gap: 12px;
		height: auto;
	}

	.pc-approach__shot {
		height: auto;
		aspect-ratio: 35 / 18;
	}

	/* Doctors as cards */
	.pc-docs {
		padding: var(--pc-section) 0;
	}
	
	.pc-docs__head {
		margin-bottom: 26px;
	}

	.pc-docs__head::after {
		content: "";
		display: block;
		width: 40px;
		height: 3px;
		margin-top: 8px;
		border-radius: 2px;
		background: var(--pc-accent);
	}

	.pc-docs__list {
		gap: 24px;
	}

	/* display:contents drops the <figure> box so photo, text and quote can be
	   ordered the way the layout needs. */
	/* minmax(0, 1fr), not 1fr: with 1fr the column minimum is the widest item
	   min-content — the certificates flex row — which pushed the photo off screen. */
	.pc-doc {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		overflow: hidden;
		background: #fff;
		border-radius: var(--pc-radius-sm);
	}

	.pc-doc__figure {
		display: contents;
	}

	.pc-doc__photo {
		order: 1;
		aspect-ratio: 35 / 26;
		border-radius: 0;
	}

	/* Same for the body: the quote sits in <figure> and the certificates in the
	   body, so only this lets the quote go between text and certificates. */
	.pc-doc__body {
		display: contents;
	}

	.pc-doc__name {
		order: 2;
		padding: 16px 16px 0;
		font-size: 18px;
	}

	.pc-doc__role {
		order: 3;
		padding: 0 16px;
		margin-top: 4px;
		font-size: 13px;
		font-weight: 500;
		color: var(--pc-muted);
	}

	.pc-doc__intro {
		order: 4;
		padding: 0 16px;
		margin-top: 14px;
		font-size: 14px;
	}

	.pc-doc__body .pc-checklist {
		order: 5;
		padding: 0 16px;
		margin-top: 14px;
		gap: 12px;
	}

	.pc-doc__quote {
		order: 6;
		position: static;
		margin: 12px 16px;
		padding: 12px;
		border: 0;
		border-radius: 6px;
		background: var(--pc-bg-soft);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		color: var(--pc-ink);
		font-size: 13px;
		font-weight: 400;
		line-height: 1.4;
	}

	.pc-doc__body .pc-checklist li {
		font-size: 13.5px;
	}

	.pc-certs {
		order: 7;
		min-width: 0;
		margin-top: 12px;
		margin-bottom: 16px;
		padding: 0 16px;
	}

	.pc-cert {
		height: 200px;
	}

	/* Arrows sit on top of the certificate, not on the column edges. */
	.pc-arrows--certs {
		left: 8px;
		right: 8px;
	}

	.pc-arrows--certs .pc-arrow {
		width: 23px;
		height: 23px;
		background: #fff;
		color: var(--pc-ink);
	}

	.pc-arrows--certs .pc-arrow[disabled] {
		background: #fff;
	}

	.pc-outro > .pc-callback {
		padding: var(--pc-section) 0 0;
	}
}

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