/**
 * Casa Terra Page header (Figma "Journal header" 7:5967 and "Place header" 7:6204): small
 * heading, page title (56 / 44 / 32) and lead in a 792 column. Plain: on the page background.
 * With a photo: 760 / 560 / 480 high, the text bottom left in paper under a 32% earth overlay.
 */

.ct-pheader.ct-pad {
	padding-top: var(--ct-pad-t, 56px);
	padding-bottom: var(--ct-pad-b, 48px);
}

.ct-pheader__copy {
	max-width: 792px;
}

.ct-pheader .ct-pheader__eyebrow {
	margin-bottom: 16px;
	text-transform: none;
}

.ct-pheader__text {
	margin-top: 16px;
	color: var(--ct-muted);
}

.ct-pheader__actions {
	margin-top: 32px;
}

/* With a photo. */
.ct-pheader--photo {
	display: flex;
	min-height: var(--ct-pheader-h, 760px);
	overflow: hidden;
	background: var(--ct-c-earth);
}

.ct-pheader__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ct-pheader__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ct-hero-overlay, transparent);
	opacity: var(--ct-hero-overlay-o, 0);
	pointer-events: none;
}

.ct-pheader .ct-pheader__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ct-pheader .ct-pheader__img--phone {
	display: none;
}

.ct-pheader--photo .ct-pheader__stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding-bottom: var(--ct-pad-b, 72px);
}

.ct-pheader--photo .ct-pheader__eyebrow,
.ct-pheader--photo .ct-pheader__title,
.ct-pheader--photo .ct-pheader__text {
	color: var(--ct-hero-text, var(--ct-c-paper));
}

@media (max-width: 1024px) {
	.ct-pheader.ct-pad {
		padding-top: var(--ct-pad-t, 40px);
		padding-bottom: var(--ct-pad-b, 32px);
	}

	.ct-pheader__text {
		font-size: var(--ct-fs-body-lg);
		line-height: var(--ct-lh-body-lg);
	}

	.ct-pheader--photo {
		min-height: var(--ct-pheader-h, 560px);
	}

	.ct-pheader--photo .ct-pheader__stage {
		padding-bottom: var(--ct-pad-b, 48px);
	}
}

@media (max-width: 767px) {
	.ct-pheader.ct-pad {
		padding-top: var(--ct-pad-t, 32px);
	}

	.ct-pheader__text {
		font-size: var(--ct-fs-lead);
		line-height: var(--ct-lh-lead);
	}

	.ct-pheader--photo {
		min-height: var(--ct-pheader-h, 480px);
	}

	.ct-pheader .ct-pheader__img--phone {
		display: block;
	}

	.ct-pheader .ct-pheader__img--wide {
		display: none;
	}

	.ct-pheader--photo .ct-pheader__stage {
		padding-bottom: var(--ct-pad-b, 32px);
	}
}