/* ==========================================================================
   Widget — 2-Up Blocks
   Built from the "Choose Your Residence" wireframe: a centred heading over two
   blocks, each a photograph above an eyebrow, title, paragraph and button.
   The wireframe's proportions, the theme's finish - square corners, the orange
   eyebrow, the uppercase heading voice and the shared .o-btn.

   Mobile-first: the blocks stack, then go two-up from 768px. A lone block
   either goes image-beside-copy from 900px or sits centred at pair width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Heading above the blocks
   The shared 46rem measure strands the last word of the wireframe's
   supporting line; a little more room keeps it on one line at 1440.
   -------------------------------------------------------------------------- */
.o-section--two-up-blocks .o-section-heading {
	max-width: 52rem;
}

.o-section--two-up-blocks .o-section-heading__intro {
	text-wrap: balance;
}

.o-section--two-up-blocks .o-section-heading__title {
	font-size: var(--o-fs-h1); /* 32 -> 48, in line with the other section headings */
	font-weight: var(--o-fw-semibold);
	line-height: 1.083;
	text-transform: uppercase;
	text-wrap: balance;
}

/* The top margin is there to clear an eyebrow. With none, it is dead space. */
.o-section--two-up-blocks .o-section-heading__title:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   The grid
   -------------------------------------------------------------------------- */
.o-two-up {
	/*
	 * Fallbacks only. --o-two-up-ratio is set inline by the widget and
	 * Elementor writes --o-two-up-gap from the "Gap between blocks" control.
	 */
	--o-two-up-gap: var(--o-space-lg);
	--o-two-up-ratio: 2;
	--o-two-up-panel: var(--o-ice);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--o-two-up-gap);
}

/*
 * The panel has to step off whatever the section is painted, or it vanishes -
 * pale blue on the pale blue scheme would just be the section.
 */
.o-scheme-ice .o-two-up {
	--o-two-up-panel: var(--o-white);
}

.o-scheme-dark .o-two-up {
	--o-two-up-panel: var(--o-navy-ink);
}

.o-scheme-orange .o-two-up {
	--o-two-up-panel: var(--o-orange-alt);
}

@media (min-width: 768px) {
	/* Two to a row; a third and fourth tile down underneath. */
	.o-two-up--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* An odd last block centres on its own row at the width of one of a pair. */
	.o-two-up--grid > .o-two-up__card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--o-two-up-gap)) / 2);
	}

	/* Exactly the width it would have as one of a pair, so it lines up with any 2-up on the page. */
	.o-two-up--single-centered {
		max-width: calc((100% - var(--o-two-up-gap)) / 2);
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
   The block
   A flex column so the button can pin to the bottom: grid siblings stretch to
   the taller block, and the two buttons stay level whatever the copy length.
   -------------------------------------------------------------------------- */
.o-two-up__card {
	position: relative; /* Anchors the stretched link. */
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.o-two-up--surface-panel .o-two-up__card {
	background-color: var(--o-two-up-panel);
}

.o-two-up__media {
	overflow: hidden; /* Clips the hover zoom. */
}

.o-two-up__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--o-two-up-ratio);
	object-fit: cover;
}

/* Editor-only affordance so an unfinished block still shows its shape. */
.o-two-up__media--empty {
	display: grid;
	place-items: center;
	aspect-ratio: var(--o-two-up-ratio);
	border: 2px dashed var(--o-rule);
	color: var(--o-text-soft);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */
.o-two-up__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding-top: var(--o-space-lg);
}

.o-two-up--surface-panel .o-two-up__body {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); /* 24 -> 40, the wireframe's inset */
}

.o-two-up__title {
	margin: var(--o-space-sm) 0 0;
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-h3); /* 22 -> 30 */
	font-weight: var(--o-fw-semibold);
	line-height: var(--o-lh-heading);
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-two-up__text {
	margin: var(--o-space-sm) 0 0;
	color: var(--o-text-soft);
	font-size: var(--o-fs-body);
	line-height: var(--o-lh-body);
	text-wrap: pretty;
}

.o-two-up__title:first-child,
.o-two-up__text:first-child {
	margin-top: 0;
}

.o-two-up__actions {
	margin-top: auto;
	padding-top: var(--o-space-lg);
}

/* --------------------------------------------------------------------------
   Whole-block link
   The button stays the only anchor; its ::after stretches over the block so
   the photo and copy are clickable too. The block's hover therefore has to
   drive the button's hover state, since the pointer is rarely on the button.
   -------------------------------------------------------------------------- */
.o-two-up__card--linked .o-two-up__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.o-two-up__card--linked:hover .o-btn:not(.o-btn--outline) {
	background-color: var(--o-orange-dark);
	color: var(--o-white);
}

.o-two-up__card--linked:hover .o-btn--outline {
	background-color: var(--o-orange);
	border-color: var(--o-orange);
	color: var(--o-white);
}

.o-two-up__card--linked:hover .o-textlink {
	color: var(--o-accent);
}

.o-two-up__card--linked:hover .o-btn__chevrons,
.o-two-up__card--linked:hover .o-textlink__chevrons {
	transform: translateX(0.25em);
}

.o-two-up__img {
	transition: transform var(--o-transition-slow);
}

.o-two-up__card--linked:hover .o-two-up__img,
.o-two-up__card--linked:focus-within .o-two-up__img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.o-two-up__img {
		transition: none;
	}

	.o-two-up__card--linked:hover .o-two-up__img,
	.o-two-up__card--linked:focus-within .o-two-up__img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   A lone block, full width
   Image and copy split the row. The image keeps its chosen shape but grows to
   fill the column if the copy runs taller than it.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.o-two-up--single-split .o-two-up__card {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.o-two-up--single-split .o-two-up__img {
		height: 100%;
	}

	.o-two-up--single-split .o-two-up__body {
		justify-content: center;
		padding: 0 0 0 var(--o-space-xl);
	}

	.o-two-up--single-split.o-two-up--surface-panel .o-two-up__body {
		padding: clamp(2rem, 1rem + 3vw, 4rem);
	}

	/* Centred vertically, the button belongs with the copy rather than the floor. */
	.o-two-up--single-split .o-two-up__actions {
		margin-top: 0;
	}
}