/* ==========================================================================
   Homepage band layouts
   Reusable pieces (cards, carousel, section head) live in components.css.
   ========================================================================== */

/* Services and specialists use the shared grids in components.css, because
   the archive, single and page templates need them too. */

/* --- Statistics band ---------------------------------------------------- */

.tpl-stats {
	background-color: var(--c-forest);
	background-image: url("../img/pattern-repeat-dark.svg");
	background-size: 240px auto;
	color: var(--c-ivory);
	padding-block: var(--sp-4);
}

.tpl-stats__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-3);
}

.tpl-stats__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	text-align: start;
}

.tpl-stats__icon {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--c-sage);
}

.tpl-stats__icon .tpl-icon {
	inline-size: 30px;
	block-size: 30px;
}

.tpl-stats__text {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.tpl-stats__value {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.2;
}

html[lang^="ar"] .tpl-stats__value {
	font-weight: 700;
}

.tpl-stats__label {
	font-size: var(--fs-small);
	color: var(--c-sage-200);
}

/* Pending figures stay visibly unresolved rather than showing a made-up number. */
.tpl-stats__item.is-pending .tpl-stats__value {
	color: var(--c-sage);
	opacity: 0.7;
}

/* --- Before & after ----------------------------------------------------- */

.tpl-ba {
	background-color: var(--c-ivory);
	background-image: url("../img/pattern-corner.svg");
	background-repeat: no-repeat;
	background-position: bottom var(--gutter) right calc(var(--gutter) * -1);
	background-size: 260px auto;
}

[dir="rtl"] .tpl-ba {
	background-position: bottom var(--gutter) left calc(var(--gutter) * -1);
}

/* The guidelines forbid the botanical motif sitting behind essential text or
   buttons. On narrow screens the stacked layout runs straight through it, so
   it is dropped rather than shrunk. */
@media (max-width: 899px) {
	.tpl-ba,
	[dir="rtl"] .tpl-ba {
		background-image: none;
	}
}

.tpl-ba__lead {
	margin-block-start: var(--sp-2);
	max-inline-size: 52ch;
	color: var(--c-muted);
	font-size: var(--fs-lead);
}

/* The section head carries the gallery CTA, so it aligns to the heading
   block rather than sitting under the cards. */
.tpl-ba__cta {
	flex: none;
}

.tpl-ba__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-1) var(--sp-3);
	margin-block-start: var(--sp-3);
	padding-block-start: var(--sp-2);
	border-block-start: 1px solid var(--c-line);
}

.tpl-ba__disclaimer {
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.tpl-ba__count {
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.tpl-ba__count strong {
	color: var(--c-forest);
	font-weight: 600;
}

/* --- Offers ------------------------------------------------------------- */

.tpl-offers {
	background-color: var(--c-white);
}

.tpl-offers__track {
	grid-auto-columns: minmax(280px, 1fr);
}

/* --- Doctors ------------------------------------------------------------ */

.tpl-doctors {
	background-color: var(--c-ivory);
}

.tpl-doctors__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	align-items: center;
}

/* Centred head with a leaf rule, as in the approved reference. */
.tpl-doctors__head {
	margin-block-end: var(--sp-4);
	text-align: center;
}

.tpl-doctors__head .tpl-section-head__title {
	max-inline-size: none;
}

.tpl-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	margin-block-start: var(--sp-2);
	color: var(--c-sage);
}

.tpl-rule::before,
.tpl-rule::after {
	content: "";
	inline-size: clamp(48px, 12vw, 120px);
	block-size: 1px;
	background-color: var(--c-line);
}

.tpl-rule .tpl-icon {
	inline-size: 20px;
	block-size: 20px;
}

.tpl-doctors__lead {
	margin-block: var(--sp-2) 0;
	margin-inline: auto;
	color: var(--c-muted);
	font-size: var(--fs-lead);
	max-inline-size: 46ch;
}

.tpl-doctors__actions {
	margin-block-start: var(--sp-4);
	text-align: center;
}

/* Feature cards (one or two specialists): portrait on the reading-start side
   with a name chip, then name, role, bio and a call to action. */
.tpl-doctors--feature .tpl-doctors__grid {
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	gap: var(--sp-3);
}

.tpl-doctor--feature {
	display: block;
}

.tpl-doctor--feature .tpl-doctor__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	block-size: 100%;
	gap: 0;
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--speed) var(--ease),
		transform var(--speed) var(--ease);
}

.tpl-doctor--feature .tpl-doctor__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.tpl-doctor--feature .tpl-doctor__media {
	position: relative;
	margin-block-end: 0;
	aspect-ratio: 4 / 3;
	border-radius: 0;
}

/* Name chip over the portrait. The reference uses gold here; the brand palette
   has no gold, so this uses forest on ivory. */
.tpl-doctor__chip {
	position: absolute;
	inset-block-start: var(--sp-2);
	inset-inline-start: var(--sp-2);
	padding: 4px var(--sp-2);
	background-color: var(--c-forest);
	border-radius: var(--radius-pill);
	color: var(--c-ivory);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ls-label);
}

.tpl-doctor--feature .tpl-doctor__body {
	padding: var(--sp-3) var(--sp-3) var(--sp-3);
}

.tpl-doctor--feature .tpl-doctor__name {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-display);
}

.tpl-doctor--feature .tpl-doctor__role {
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--c-forest-700);
}

.tpl-doctor__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.tpl-doctor__bio {
	margin-block-start: var(--sp-2);
	color: var(--c-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.tpl-doctor__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	margin-block-start: var(--sp-3);
	color: var(--c-forest);
	font-size: var(--fs-small);
	font-weight: 500;
}

.tpl-doctor__link:hover .tpl-doctor__cta {
	text-decoration: underline;
}

/* --- Testimonials ------------------------------------------------------- */

.tpl-reviews {
	background-color: var(--c-forest);
	background-image: url("../img/pattern-repeat-dark.svg");
	background-size: 240px auto;
	color: var(--c-ivory);
	padding-block: var(--sp-5);
}

.tpl-reviews .tpl-section-head__title {
	color: var(--c-ivory);
}

/* Two different kinds of proof sit in this band, so each gets a quiet label
   and the Google panel is lifted onto its own ivory field. */
.tpl-reviews__label {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-block-end: var(--sp-2);
	color: var(--c-sage);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

html[lang^="ar"] .tpl-reviews__label {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-small);
}

.tpl-reviews__label::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background-color: var(--c-line-dark);
}

.tpl-reviews__track {
	grid-auto-columns: minmax(240px, 1fr);
}

.tpl-review__figure {
	margin: 0;
}

/* Testimonials carry no featured image, so an unplayed video falls back to the
   brand pattern rather than a flat black box. */
.tpl-review__video {
	inline-size: 100%;
	aspect-ratio: 9 / 16;
	max-block-size: 70vh;
	background-color: var(--c-forest-900);
	background-image: url("../img/pattern-repeat-dark.svg");
	background-size: 160px auto;
	border-radius: var(--radius-md);
	object-fit: cover;
}

.tpl-review__caption {
	margin-block-start: var(--sp-1);
	color: var(--c-sage-200);
	font-size: var(--fs-small);
}

.tpl-reviews__panel {
	margin-block-start: var(--sp-5);
}

.tpl-reviews__label--panel {
	color: var(--c-sage-200);
}

.tpl-reviews__widget {
	padding: var(--sp-3) var(--sp-2);
	background-color: var(--c-ivory);
	border-radius: var(--radius-md);
	color: var(--c-forest);
}

/* --- Closing CTA -------------------------------------------------------- */

.tpl-cta {
	background-color: var(--c-ivory);
	padding-block: var(--sp-5);
}

.tpl-cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3);
	align-items: center;
	text-align: center;
	justify-items: center;
}

.tpl-cta__brand .tpl-logo-symbol {
	inline-size: 96px;
	block-size: auto;
}

.tpl-cta__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-display);
	text-wrap: balance;
}

.tpl-cta__lead {
	margin-block-start: var(--sp-1);
	color: var(--c-muted);
	max-inline-size: 46ch;
	margin-inline: auto;
}

.tpl-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

/* --- Larger screens ----------------------------------------------------- */

@media (min-width: 600px) {
	.tpl-stats__list {
		gap: var(--sp-4);
	}

}

@media (min-width: 900px) {
	.tpl-section {
		padding-block: var(--sp-6);
	}

	/* Two-up horizontal cards, portrait beside the text, as in the reference. */
	.tpl-doctors--feature .tpl-doctors__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-4);
	}

	.tpl-doctor--feature .tpl-doctor__link {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.tpl-doctor--feature .tpl-doctor__media {
		aspect-ratio: auto;
		block-size: 100%;
		min-block-size: 280px;
	}

	.tpl-reviews {
		padding-block: var(--sp-6);
	}

	.tpl-stats__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tpl-stats__item + .tpl-stats__item {
		position: relative;
	}

	.tpl-stats__item + .tpl-stats__item::before {
		content: "";
		position: absolute;
		inset-inline-start: calc(var(--sp-4) * -0.5);
		inset-block: 4px;
		inline-size: 1px;
		background-color: var(--c-line-dark);
	}

	.tpl-doctors__inner {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--sp-6);
	}

	.tpl-doctor--feature .tpl-doctor__body {
		justify-content: center;
		padding: var(--sp-4);
	}

	.tpl-cta__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		text-align: start;
		justify-items: stretch;
		gap: var(--sp-5);
	}

	.tpl-cta__lead {
		margin-inline: 0;
	}

	.tpl-cta__actions {
		justify-content: flex-end;
		flex-direction: column;
	}

	/* Vertical rule between the mark and the message, as in the reference. */
	.tpl-cta__content {
		border-inline-start: 1px solid var(--c-line);
		padding-inline-start: var(--sp-5);
	}
}