/* Inner pages: branches, single branch, about, 404. */

.page-hero {
	background: var(--yellow);
	padding-block: var(--sp-7);
}

.page-hero .wrap {
	display: grid;
	justify-items: start;
	gap: var(--sp-3);
}

.page-hero h1 {
	font-size: var(--fs-3xl);
	font-weight: 900;
	letter-spacing: -0.03em;
}

.page-hero__lede {
	max-width: 40rem;
	font-size: var(--fs-lg);
}

.page-hero--404 {
	padding-block: var(--sp-8);
}

/* Single branch */
.branch-hero {
	background: var(--yellow);
}

.branch-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-7);
	align-items: center;
	padding-block: var(--sp-7);
}

.branch-hero__copy {
	display: grid;
	justify-items: start;
	gap: var(--sp-4);
}

.crumbs {
	font-size: var(--fs-sm);
	font-weight: 600;
}

.branch-hero h1 {
	font-size: var(--fs-2xl);
	font-weight: 900;
}

.branch-hero h1 span {
	display: block;
	font-size: 1.35em;
}

.branch-hero .status {
	border: 2px solid var(--ink);
	font-size: var(--fs-sm);
}

.branch-facts {
	display: grid;
	gap: var(--sp-2);
}

.branch-facts li {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	font-weight: 500;
}

.branch-facts .icon {
	margin-top: 2px;
	color: var(--teal);
}

.branch-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-2);
}

.branch-hero__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 3px solid var(--ink);
	border-radius: var(--r-lg);
	box-shadow: 8px 8px 0 var(--ink);
	background: var(--ink);
}

.branch-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.branch-detail {
	display: grid;
	gap: var(--sp-5);
}

.branch-map {
	overflow: hidden;
	border: 2px solid var(--ink);
	border-radius: var(--r-lg);
	background: var(--paper);
}

.branch-map iframe {
	width: 100%;
	height: clamp(280px, 40vw, 440px);
	border: 0;
}

.branch-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--sp-3);
}

.branch-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-md);
}

@media (max-width: 860px) {
	.branch-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}
	.branch-hero__media {
		order: -1;
		box-shadow: 5px 5px 0 var(--ink);
	}
}

@media (max-width: 520px) {
	.branch-hero__ctas .btn {
		flex: 1 1 100%;
	}
}

/* About / plain pages */
.prose-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--sp-7);
	align-items: start;
}

.prose {
	max-width: 40rem;
	font-size: var(--fs-lg);
}

.prose p + p {
	margin-top: var(--sp-4);
}

.prose h2 {
	margin: var(--sp-6) 0 var(--sp-3);
	font-size: var(--fs-xl);
}

.prose-photo {
	overflow: hidden;
	border: 3px solid var(--ink);
	border-radius: var(--r-lg);
	box-shadow: 8px 8px 0 var(--teal);
}

.prose-photo img {
	width: 100%;
}

.prose-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

@media (max-width: 860px) {
	.prose-grid {
		grid-template-columns: 1fr;
	}
}

.credits ul {
	display: grid;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
}

.credits a {
	color: var(--teal-dark);
}