/*
 * Gutenberg section building blocks.
 * Loaded on the front end and in the block editor (via add_editor_style),
 * so keep these selectors block-based rather than template-based.
 */

:root,
.editor-styles-wrapper {
	--type-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--type-lead: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
	--type-body-leading: 1.6;
	--type-lead-leading: 1.45;
}

.spn-location-page .entry-content > .wp-block-cover:first-child {
	min-height: 72vh;
	align-items: flex-end;
	padding: var(--header-space) var(--page-gutter) var(--page-gutter);
}

.spn-location-page .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
	max-width: none;
	width: 100%;
}

.spn-location-page .entry-content > .wp-block-cover:first-child h2 {
	margin: 0 0 0 -0.055em;
	color: #fff;
	font-family: var(--headerfont), sans-serif;
	font-size: clamp(3rem, 1.6rem + 4.6vw, 6.5rem) !important;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.95;
	text-align: left;
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
	overflow-wrap: anywhere;
}

.spn-location-gallery {
	padding-block: clamp(3rem, 6vw, 6rem);
	color: #244B68;
}

.spn-location-gallery .spn-location-row {
	margin-block: 0 clamp(3rem, 6vw, 6rem);
}

:is(.spn-location-row, .spn-location-row > .wp-block-group__inner-container) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.spn-location-row:has(> .wp-block-group__inner-container) {
	display: block;
}

.spn-location-row h3 {
	margin: 0;
	font-family: var(--headerfont), sans-serif;
	font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
	font-weight: 400;
	line-height: 1.25;
	text-align: left;
}

.spn-location-images,
.spn-location-images > .wp-block-group__inner-container {
	min-width: 0;
}

.spn-location-images .wp-block-image {
	margin: 0 0 1.5rem;
}

.spn-location-images .wp-block-image img {
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	:is(.spn-location-row, .spn-location-row > .wp-block-group__inner-container) {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* Override dimensions saved by resized Image blocks only within an image pair. */
.wp-block-columns.spn-image-pair > .wp-block-column > .wp-block-image {
	width: 100%;
	margin-inline: 0;
}

.wp-block-columns.spn-image-pair > .wp-block-column > .wp-block-image img {
	display: block;
	width: 100% !important;
	height: clamp(14rem, 26vw, 24rem) !important;
	object-fit: cover;
}

@media (max-width: 781px) {
	.wp-block-columns.spn-image-pair:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.spn-image-pair:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block-image img {
		height: auto !important;
		aspect-ratio: 3 / 2;
	}
}

/* ---------- Full-width sections ----------
 * A full-width Group with a background colour becomes a padded section band.
 */

.wp-block-group.alignfull.has-background {
	margin-block: 0;
	padding-block: var(--section-space, clamp(3rem, 6vw, 6rem));
	padding-inline: var(--page-gutter, clamp(1.5rem, 3vw, 3rem));
}

/* ---------- Angled column ----------
 * Choose Styles → "Angled" on a Column, then give it a background colour or
 * gradient. The panel fills its section top to bottom, bleeds to the left
 * screen edge and gets a slanted right edge. Sibling columns stay plain.
 */

.wp-block-columns:has(> .wp-block-column.is-style-angled) {
	--angle-offset: clamp(2.5rem, 6vw, 6rem);
	gap: 0;
	margin-block: 0;
	padding: 0;
	align-items: stretch !important;
}

.wp-block-columns:has(> .wp-block-column.is-style-angled) > .wp-block-column {
	padding-block: var(--section-space, clamp(3rem, 6vw, 6rem));
	padding-inline: var(--page-gutter, clamp(1.5rem, 3vw, 3rem));
}

/* Equal basis so the angle's extra padding doesn't make the panel wider. */
.wp-block-columns:has(> .wp-block-column.is-style-angled) > .wp-block-column:not([style*="flex-basis"]) {
	flex: 1 1 50%;
	min-width: 0;
}

/* Inside a full-width Group, the columns own the padding so the panel can reach the edges. */
.wp-block-group.alignfull:has(.wp-block-column.is-style-angled) {
	padding: 0;
}

.wp-block-column.is-style-angled:not(.has-background) {
	background: linear-gradient(160deg, #F8CE70, #D89428);
}

@media (min-width: 782px) {
	.wp-block-column.is-style-angled {
		padding-inline-end: calc(var(--angle-offset) + var(--page-gutter, clamp(1.5rem, 3vw, 3rem))) !important;
		clip-path: polygon(0 0, calc(100% - var(--angle-offset)) 0, 100% 100%, 0 100%);
	}

	.wp-block-column.is-style-angled + .wp-block-column {
		padding-inline-start: clamp(2rem, 5vw, 5rem);
	}
}

/* ---------- Header clearance (front end only) ----------
 * The header overlays every page. The first section keeps its background
 * behind the header but starts its content below it. Covers, images and
 * videos are left alone so they sit under the header.
 */

.page .entry-content > :first-child:not(.wp-block-cover, .wp-block-image, .wp-block-video, :has(.wp-block-column.is-style-angled)) {
	padding-top: var(--header-space);
}

.page .entry-content > :first-child .wp-block-columns:has(> .wp-block-column.is-style-angled) > .wp-block-column:first-child,
.page .entry-content > .wp-block-columns:first-child:has(> .wp-block-column.is-style-angled) > .wp-block-column:first-child {
	padding-top: var(--header-space);
}

@media (min-width: 782px) {
	.page .entry-content > :first-child .wp-block-columns:has(> .wp-block-column.is-style-angled) > .wp-block-column,
	.page .entry-content > .wp-block-columns:first-child:has(> .wp-block-column.is-style-angled) > .wp-block-column {
		padding-top: var(--header-space);
	}
}

/* Loose, non-full-width blocks on default pages keep to the page gutter. */
.page .entry-content > :not(.alignfull, .wp-block-columns:has(> .is-style-angled)) {
	padding-inline: var(--page-gutter);
}