/*--------------------------------------------------------------
# Block contents
--------------------------------------------------------------*/
.lp-two-column {
	display: flex;
	color: var(--text-secondary);
	padding-block: var(--margin-vertical-wider);
	padding-inline: 4vw;
}

.lp-two-column .block-contents {
	display: flex;
	flex-direction: row;
	gap: 32px;
	justify-content: center;
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--content-max-width);
	margin-inline: auto;
}

/* Columns
--------------------------------------------- */
.lp-two-column__content,
.lp-two-column__media,
.lp-two-column__empty-col {
	width: 50%;
}

.lp-two-column__content {
	display: flex;
	flex-direction: column;
}

/* The text column stays in view beside taller media, like the split
form's info column (2026-09-28). Aligned to the top so it only moves
when the media is the taller side; it clears the sticky page header
through --header-height, which the page header sets to its real height. */
@media screen and (min-width: 766px) {
	.lp-two-column__content {
		position: sticky;
		top: calc(var(--header-height, 80px) + 24px);
		align-self: flex-start;
	}
}

/* Media on the left puts the content column second. */
.lp-two-column--media-left .lp-two-column__content {
	order: 1;
}

/* The buttons (2026-10-12): the main button and the outline second one
in a row that wraps. One button sits where it always did. */
.lp-two-column__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* The line under the buttons (2026-11-10), as the hero's. */
.lp-two-column__note {
	margin: 0;
	color: var(--text-secondary, #6b717e);
	font-size: var(--font-size-small, 16px);
}

/* Media
--------------------------------------------- */
.lp-two-column__media {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Photo corners follow the page's Corners setting (inc/look.php,
   2026-10-09); without one, 12px as before. */
.lp-two-column__img {
	border-radius: var(--lp-photo-radius, 12px);
}

.lp-two-column__embed {
	border-radius: var(--lp-photo-radius, 12px);
	overflow: hidden;
}

.lp-two-column__embed iframe,
.lp-two-column__embed embed,
.lp-two-column__embed object {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: var(--lp-photo-radius, 12px);
}

@media screen and (max-width: 765px) {
	.lp-two-column .block-contents {
		flex-direction: column;
	}

	.lp-two-column__content,
	.lp-two-column__media {
		width: 100%;
	}

	/* Mobile stacking. The --media-left desktop rule sets order: 1 on the
	content column, so it is reset here: mobile order is decided by the
	mobile_stack field alone, content-first unless --stack-media. */
	.lp-two-column__content {
		order: 0;
	}

	.lp-two-column--stack-media .lp-two-column__content {
		order: 1;
	}
}

/*--------------------------------------------------------------
# Stat ring
--------------------------------------------------------------*/
/* The stat media type (2026-10-14, the modern gap build): a figure inside
a ring filled to its share, the sentence under it and its source, as one
card on the page's card tokens. The template sets --lp-stat-share (0 to
100) on the ring; the fill's path is 100 long (pathLength), so the share
is the dash. The ring starts at the top and runs clockwise, in the
accent's fill. */
.lp-stat {
	margin: 0;
	padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
	border: var(--card-border, 0 solid transparent);
	border-radius: var(--card-radius, 12px);
	text-align: center;
	color: var(--text-secondary);
	background: var(--surface-card, #fff);
	box-shadow: var(--card-shadow, none);
}

.lp-stat__ring {
	position: relative;
	width: min(236px, 70%);
	margin: 0 auto 24px;
	aspect-ratio: 1;
}

.lp-stat__ring svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate(-90deg);
}

.lp-stat__ring circle {
	fill: none;
	stroke-width: 14;
}

.lp-stat__track {
	stroke: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.lp-stat__fill {
	stroke: var(--lp-accent-fill, var(--accent-300));
	stroke-linecap: round;
	stroke-dasharray: var(--lp-stat-share, 0) 100;
}

.lp-stat__figure {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 18%;
	line-height: 1.2;
}

.lp-stat__value {
	font-family: var(--font-family-heading);
	font-size: clamp(40px, 4.6vw, 60px);
	font-weight: 800;
	line-height: 1;
	color: var(--text-primary);
}

.lp-stat__label {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
}

.lp-stat__caption {
	display: block;
}

.lp-stat__text {
	max-width: 24em;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.55;
}

.lp-stat__text p {
	margin: 0;
}

.lp-stat__text p + p {
	margin-top: 0.5em;
}

.lp-stat__text strong {
	color: var(--text-primary);
}

.lp-stat__source {
	margin: 16px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The stat card (2026-10-20, Isaac, the Wheel Equipment rebuild: option 1's
"60+" card): the figure large in the accent's text colour over its label,
the sentence and the source under them, left aligned on the subtle surface
with the same colour as a rule down its side. No ring: a figure that is not
a share. */
.lp-stat--card {
	padding: clamp(28px, 3.5vw, 42px);
	border: 0;
	border-left: 5px solid var(--text-accent, var(--accent-300));
	text-align: left;
	background: var(--surface-subtle, #f4f5f7);
	box-shadow: 0 20px 50px rgb(22 28 34 / 0.08);
}

.lp-stat--card .lp-stat__figure {
	position: static;
	display: block;
	margin: 0 0 8px;
	padding: 0;
}

.lp-stat--card .lp-stat__value {
	display: block;
	font-size: clamp(64px, 7vw, 88px);
	font-weight: 900;
	letter-spacing: -0.06em;
	color: var(--text-accent, var(--accent-300));
}

.lp-stat--card .lp-stat__label {
	display: block;
	margin-top: 15px;
	font-family: var(--font-family-heading);
	font-size: clamp(20px, 1.6vw, 25px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--text-primary);
}

.lp-stat--card .lp-stat__text {
	max-width: none;
	margin: 0;
}

/* On a subtle band the card takes the card surface, so it still shows. */
.lp-block--surface-subtle .lp-stat--card {
	background: var(--surface-card, #fff);
}

/*--------------------------------------------------------------
# Bleed
--------------------------------------------------------------*/
/* clip, not hidden: hidden makes the block a scroll container, which
stops the sticky text column; hidden stays as the fallback. */
.lp-two-column--bleed {
	overflow: hidden;
	overflow: clip;
}

.lp-two-column--bleed .block-contents {
	gap: 5rem;
}

/* The bleed media renders outside .block-contents, absolutely positioned to
half the viewport. The empty column holds the layout open.

The embed sits above .block-contents (z-index 4) so its iframe stays
clickable where the empty column overlaps it. The image needs no
interactivity and stays below (z-index 2). */
.lp-two-column__bleed-img,
.lp-two-column__bleed-embed {
	position: absolute;
	top: 0;
	width: 50%;
	max-width: var(--bleed-media-max-width);
	height: 100%;
	object-fit: cover;
}

.lp-two-column__bleed-img {
	z-index: 2;
}

.lp-two-column__bleed-embed {
	z-index: 4;
}

.lp-two-column__bleed-embed iframe {
	width: 100%;
	height: 100%;
}

.lp-two-column--media-left .lp-two-column__bleed-img,
.lp-two-column--media-left .lp-two-column__bleed-embed {
	/* Anchored to the content midline, not the viewport edge: identical
	below the cap, and past it the gap opens at the outer edge where the
	cover fills it. */
	right: 50%;
	left: auto;
}

.lp-two-column--media-right .lp-two-column__bleed-img,
.lp-two-column--media-right .lp-two-column__bleed-embed {
	left: 50%;
}

/* This ensures that the bleed image is not set to height: auto
which happens by default in the block editor. */
.editor-styles-wrapper .lp-two-column__bleed-img {
	height: 100%;
}

/* Mobile: the media drops below the content, pinned to the bottom of the
block, and the empty column becomes its spacer. */
@media screen and (max-width: 765px) {
	.lp-two-column--bleed .lp-two-column__empty-col {
		order: 2;
		width: 100%;
		height: 400px;
	}

	.lp-two-column__bleed-img,
	.lp-two-column__bleed-embed {
		position: absolute;
		bottom: 0;
		top: auto;
		left: 0;
		width: 100%;
		max-width: none;
		height: calc(400px + var(--margin-vertical-wider));
	}

	.lp-two-column--media-left .lp-two-column__bleed-img,
	.lp-two-column--media-left .lp-two-column__bleed-embed {
		right: auto;
		left: 0;
	}

	.lp-two-column--media-right .lp-two-column__bleed-img,
	.lp-two-column--media-right .lp-two-column__bleed-embed {
		left: 0;
	}

	/* Media-first stacking: the spacer moves above the content and the
	bleed media pins to the top of the block instead of the bottom. */
	.lp-two-column--stack-media.lp-two-column--bleed .lp-two-column__empty-col {
		order: 0;
	}

	.lp-two-column--stack-media .lp-two-column__bleed-img,
	.lp-two-column--stack-media .lp-two-column__bleed-embed {
		top: 0;
		bottom: auto;
	}
}

/*--------------------------------------------------------------
# Background image
--------------------------------------------------------------*/
.lp-two-column.anchor {
	position: relative;
}

.lp-two-column__cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* This ensures that the cover image is not set to height: auto
which happens by default in the block editor. */
.editor-styles-wrapper .lp-two-column__cover {
	height: 100%;
}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/* Default Font Colors
--------------------------------------------- */
.lp-two-column__header {
	font-size: var(--font-size-section-header, var(--font-size-h1, clamp(36px, 5vw, 60px)));
	font-weight: var(--font-weight-section-header, 700);
	color: var(--text-primary);
	max-width: var(--max-width-narrow);
}

.lp-two-column__sub-header {
	font-size: var(--font-size-section-sub-header, var(--font-size-h2, clamp(30px, 4vw, 48px)));
	font-weight: 400;
	color: var(--text-primary);
	max-width: var(--max-width-narrow);
}

.lp-two-column__body {
	color: var(--text-secondary);
	max-width: var(--max-width-narrow);
}

/* Gravity Forms internals inside the form column. The structural gform
styling is global in style.css; these only recolour text for use on a dark
background. */
.lp-two-column__form .gform_title {
	color: var(--text-primary);
}

.lp-two-column__form .gform_wrapper .gfield_label,
.lp-two-column__form .gform_wrapper .gform-field-label--type-sub,
.lp-two-column__form .gform_wrapper .gfield_description {
	color: var(--text-secondary);
}

.lp-two-column__form .gform_wrapper .ginput_container .gfield_description:not(.ginput_counter) {
	color: var(--neutral-400); /* inside a white input, static in both contexts */
}


/*--------------------------------------------------------------
# Form beside a map (2026-10-20, the layout variants review)
--------------------------------------------------------------*/
/* With a map (the form's map field) the text side carries it under the
   body at 16:10, and the body's list as small chips under it when the List
   style is chips or pins; the form card is unchanged. Mobile first: one
   column under 1024px, the text and the map first and the form after them
   whatever the stacking setting; from 1024px side by side, the form where
   Media position puts it, the text column staying in view as before. */
.lp-two-column--map .block-contents {
	flex-direction: column;
	gap: 40px;
}

.lp-two-column--map .lp-two-column__content,
.lp-two-column--map .lp-two-column__media {
	width: 100%;
}

.lp-two-column--map .lp-two-column__content {
	position: static;
	order: 0;
}

.lp-two-column--map .lp-two-column__media {
	order: 1;
}

@media screen and (min-width: 1024px) {
	.lp-two-column--map .block-contents {
		flex-direction: row;
		gap: 56px;
	}

	.lp-two-column--map .lp-two-column__content,
	.lp-two-column--map .lp-two-column__media {
		width: 50%;
	}

	.lp-two-column--map .lp-two-column__content {
		position: sticky;
	}

	.lp-two-column--map.lp-two-column--media-left .lp-two-column__content {
		order: 1;
	}

	.lp-two-column--map.lp-two-column--media-left .lp-two-column__media {
		order: 0;
	}
}

.lp-two-column__map {
	margin-top: 28px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--lp-photo-radius, 12px);
	background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.lp-two-column__map :is(iframe, embed, object) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The towns: small chips that wrap, each after a check (Chips) or a pin
   (Pins) in the accent, faint on a light band and on a dark one alike. */
.lp-two-column .lp-two-column__places {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.lp-two-column .lp-two-column__places > li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 13px;
	border: 1px solid color-mix(in srgb, var(--text-primary) 16%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--text-primary) 5%, transparent);
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.lp-two-column__places > li::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: var(--lp-accent-fill, var(--accent-300));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lp-block--list-pins .lp-two-column__places > li::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lp-two-column--map .lp-two-column__actions {
	margin-top: 28px;
}

/* In the editor canvas a click on the map selects the block, as on any
   other part of it, rather than moving the map. */
.editor-styles-wrapper .lp-two-column__map :is(iframe, embed, object) {
	pointer-events: none;
}