/**
 * General Page Styles
 */

/* Page Hero Section
--------------------------------------------- */
.page-hero {
	--page-hero-min-height: 400px;
	position: relative;
	width: 100%;
	min-height: var(--page-hero-min-height);
	overflow: hidden;
	background-color: var(--color-gray-light);
}

/*
 * The WebP layer wraps the <img> in a <picture> and carries our class up onto
 * the wrapper, where object-fit is inert. Size the wrapper by class and the
 * image structurally so the rules land on the replaced element either way.
 */
.page-hero__image,
.page-hero picture {
	display: block;
	width: 100%;
}

.page-hero img {
	display: block;
	width: 100%;
	height: auto;
	min-height: var(--page-hero-min-height);
	object-fit: cover;
}

/* Entry Header (for pages with hero)
--------------------------------------------- */
.site-main--with-hero .entry-header {
	padding-top: 2rem;
}

/* Entry Header (for pages without hero)
--------------------------------------------- */
.entry-header {
	padding: 2rem 0 1rem;
}

.entry-header .entry-title {
	margin: 0;
}

/* Hide page title on About page (content has its own h1)
--------------------------------------------- */
.page-about .entry-title {
	display: none;
}

/* Responsive Styles
--------------------------------------------- */
@media (max-width: 768px) {
	.page-hero {
		--page-hero-min-height: 300px;
	}
}

@media (max-width: 480px) {
	.page-hero {
		--page-hero-min-height: 250px;
	}
}