/**
 * WLRE Theme — Service CTA Blocks.
 *
 * Three alternating image+text rows. Each row uses items-end so the text
 * column aligns to the image's bottom edge.
 */

.wlre-service-ctas {
	padding-block: var(--wlre-space-80) var(--wlre-space-40);
}

.wlre-service-ctas__list {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-80);
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--wlre-space-20);
}

@media (min-width: 768px) {
	.wlre-service-ctas__list {
		padding-inline: var(--wlre-space-40);
	}
}

@media (min-width: 1024px) {
	.wlre-service-ctas__list {
		padding-inline: var(--wlre-space-100);
	}
}

/* === Single block — 2-col flex, items-end aligns text to image bottom. === */
.wlre-service-cta {
	display: flex;
	gap: var(--wlre-space-64);
	align-items: flex-end;
}

.wlre-service-cta > * {
	flex: 1 1 0;
	min-width: 0;
}

/* Reverse order for alternating rows. */
.wlre-service-cta--reversed .wlre-service-cta__image {
	order: 2;
}

.wlre-service-cta--reversed .wlre-service-cta__text {
	order: 1;
}

/* Image container — position:relative so the <img> child can fill it. */
.wlre-service-cta__image {
	position: relative;
	height: 380px;
	border-radius: var(--wlre-radius-20);
	overflow: hidden;
}

/* <img> absolutely fills the container with object-cover, same as background-size:cover. */
.wlre-service-cta__image-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* Text column — padding-bottom insets the copy from the row bottom;
 * __copy nests heading+desc with a tighter gap and center alignment while
 * the button stays at gap-24 from the copy block and align-self:flex-start.
 */
.wlre-service-cta__text {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-24);
	align-items: flex-start;
	padding-bottom: var(--wlre-space-40);
}

.wlre-service-cta__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-16);
	align-items: flex-start;
	width: 100%;
	color: var(--wlre-color-text-900);
	text-align: left;
}

/* Groups overline + heading together at a tighter gap than the outer copy gap. */
.wlre-service-cta__heading-group {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-8);
	width: 100%;
}

/* Overline above the heading — Figma 6640:311082: 14px Lato Semibold. */
.wlre-service-cta__overline {
	margin: 0;
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-weight: 600;
	font-size: var(--wlre-font-size-m);
	line-height: 1.2;
	text-align: left;
}

.wlre-service-cta__heading {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: var(--wlre-font-size-h1);
	line-height: var(--wlre-line-height-heading);
	color: inherit;
	margin: 0;
	width: 100%;
	text-align: left;
}

.wlre-service-cta__description {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: var(--wlre-font-size-xl);
	line-height: var(--wlre-line-height-body);
	color: inherit;
	margin: 0;
	width: 100%;
	text-align: left;
}

/* CTA button — Figma node 6640:293487: #0F0F0F fill, white text, 56px height. */
.wlre-service-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wlre-space-4);
	height: 56px;
	min-width: 100px;
	padding-block: var(--wlre-space-16);
	padding-inline: var(--wlre-space-24);
	background: #0F0F0F;
	color: var(--wlre-color-white);
	border: none;
	border-radius: var(--wlre-radius-sm);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	align-self: flex-start;
}

.wlre-service-cta__btn:hover,
.wlre-service-cta__btn:focus-visible {
	background-color: var(--wlre-color-accent-500);
	color: var(--wlre-color-text-900);
}

.wlre-service-cta__btn svg {
	width: var(--wlre-space-20);
	height: var(--wlre-space-20);
}

/* === Responsive === */
@media (max-width: 1023px) {
	.wlre-service-cta {
		gap: var(--wlre-space-32);
	}
}

@media (max-width: 767px) {
	/* Figma 6640:311077 — pt-40 pb-40, gap-40 between cards. */
	.wlre-service-ctas {
		padding-block: var(--wlre-space-40);
	}

	.wlre-service-ctas__list {
		gap: var(--wlre-space-40);
	}

	.wlre-service-cta {
		flex-direction: column;
		gap: var(--wlre-space-32);
		align-items: stretch;
		flex-shrink: 0;
	}

	/* Reset order on mobile — always image first */
	.wlre-service-cta--reversed .wlre-service-cta__image,
	.wlre-service-cta--reversed .wlre-service-cta__text {
		order: 0;
	}

	/* Figma 6640:311079 — h-255px, rounded-12px. */
	.wlre-service-cta__image {
		flex: none; /* overrides flex:1 1 0 from parent — flex-basis:0 would collapse height in column direction */
		height: 255px;
		border-radius: var(--wlre-radius-md);
	}

	.wlre-service-cta__text {
		padding-bottom: 0;
		align-items: flex-start;
		gap: var(--wlre-space-24);
	}

	.wlre-service-cta__copy {
		gap: var(--wlre-space-16);
	}

	.wlre-service-cta__btn {
		align-self: flex-start;
	}

	/* Figma mobile 6640:311084 — H3 32px, body 16px. */
	.wlre-service-cta__heading {
		font-size: var(--wlre-font-size-h3);
	}

	.wlre-service-cta__description {
		font-size: var(--wlre-font-size-l);
	}
}