/* ==========================================================================
   Widget — 3-Up Blocks
   Built from "Available Retail Space" (59:25): a centred heading over three
   blocks on the navy field, each a photograph above a title, a line of copy
   and a "Learn More ⟶" text link. No panels - the copy sits on the section.

   Mobile-first: the blocks stack, then go three across from 768px. Fewer than
   three keep a third's width and centre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Heading above the blocks
   -------------------------------------------------------------------------- */
.o-section--three-up-blocks .o-section-heading__title {
	font-size: var(--o-fs-h1); /* 32 -> 48, the comp's 48 */
	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--three-up-blocks .o-section-heading__title:first-child {
	margin-top: 0;
}

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

/* --------------------------------------------------------------------------
   The grid
   -------------------------------------------------------------------------- */
.o-three-up {
	/*
	 * Fallbacks only. --o-three-up-ratio is set inline by the widget and
	 * Elementor writes --o-three-up-gap from the "Gap between blocks" control.
	 */
	--o-three-up-gap: var(--o-space-xl);
	--o-three-up-ratio: 1.5;
	--o-three-up-link: var(--o-text);
	--o-three-up-link-hover: var(--o-accent);

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

/*
 * Gold on navy, as the comp draws it. Gold and orange both fail on white and
 * the pale blue field, so on light schemes the link takes the text colour and
 * only turns orange on hover, like every other text link.
 */
.o-scheme-dark .o-three-up {
	--o-three-up-link: var(--o-gold);
	--o-three-up-link-hover: var(--o-white);
}

@media (min-width: 768px) {
	.o-three-up {
		/* Every column is a third, however many blocks there are, and the set centres. */
		grid-template-columns: repeat(var(--o-three-up-count, 3), calc((100% - 2 * var(--o-three-up-gap)) / 3));
		justify-content: center;
	}

	.o-three-up--count-1 {
		--o-three-up-count: 1;
	}

	.o-three-up--count-2 {
		--o-three-up-count: 2;
	}
}

/* Tablet: three across is tight at 768, so the gutters give way before the photos do. */
@media (min-width: 768px) and (max-width: 1023px) {
	.o-three-up {
		--o-three-up-gap: var(--o-space-md);
	}
}

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

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

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

/* Editor-only affordance so an unfinished block still shows its shape. */
.o-three-up__media--empty {
	display: grid;
	place-items: center;
	aspect-ratio: var(--o-three-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-three-up__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem; /* 12 */
	padding-top: 1.5rem; /* 24 */
}

.o-three-up__title {
	margin: 0;
	font-family: var(--o-font-ui);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); /* 20 -> 26 */
	font-weight: var(--o-fw-medium);
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-three-up__text {
	margin: 0;
	font-size: var(--o-fs-body);
	line-height: var(--o-lh-body);
	text-wrap: pretty;
}

.o-three-up__actions {
	margin-top: auto;
	padding-top: var(--o-space-xs); /* 8 + the 12 gap = the comp's 20 */
}

.o-three-up__link {
	color: var(--o-three-up-link);
	font-size: var(--o-fs-body);
}

.o-three-up__link:hover,
.o-three-up__link:focus-visible {
	color: var(--o-three-up-link-hover);
}

/* --------------------------------------------------------------------------
   Whole-block link
   The link 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 link's hover state, since the pointer is rarely on the link itself.
   -------------------------------------------------------------------------- */
.o-three-up__card--linked .o-three-up__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.o-three-up__card--linked:hover .o-three-up__link {
	color: var(--o-three-up-link-hover);
}

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

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

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

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