/**
 * Oyolloo Elements — service cards.
 *
 * Figma: node 471:1193 — 1920x988 on black.
 *   head  eyebrow + H2 centred over the deck, 40px above it
 *   deck  2 cards of 808 with 24px gaps, 616 tall
 *   card  full-bleed image with a scrim over the lower half, copy inset 34px
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-service-cards__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--oe-space-md);
	flex-wrap: wrap;
}

.oe-service-cards__head-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--oe-space-sm);
	/* Both lines centre inside the copy column, not the section: the optional
	   button still takes its width out of the row on the right. */
	text-align: center;
}

@media (max-width: 767px) {
	.oe-service-cards__head-text {
		text-align: left;
	}
}

.oe-service-cards__head h2 {
	margin: 0;
}

.oe-service-cards__eyebrow {
	margin: 0;
	color: var(--oe-color-brand);
	text-transform: uppercase;
	letter-spacing: 0;
}

/* Figma 471:1193 "Rectangle 3" — a 1654x429 brand pill under a 220px layer
   blur at 30%, its top flush with the bottom of the deck. Only the section's
   bottom padding reveals it; the section below paints over the rest, which is
   what `overflow: hidden` reproduces. */
.oe-service-cards .oe-section {
	overflow: hidden;
}

.oe-service-cards .oe-container {
	position: relative;
	z-index: 1;
}

.oe-service-cards__glow {
	position: absolute;
	inset-block-start: calc(100% - var(--oe-section-y-end, var(--oe-section-y)));
	inset-inline-start: 50%;
	z-index: 0;
	width: calc(var(--oe-container) + 14px);
	max-width: calc(100% + 14px);
	height: 429px;
	transform: translateX(-50%);
	border-radius: 290px;
	background-color: var(--oe-color-brand);
	opacity: 0.3;
	filter: blur(110px);
	pointer-events: none;
}

.oe-service-cards__grid {
	--oe-cols: 2;
	--oe-cols-tablet: 2;
	--oe-cols-mobile: 1;
	--oe-gap: var(--oe-space-md);

	margin-block-start: var(--oe-space-xl);
}

/* -- Card ---------------------------------------------------------------- */

.oe-service-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 808 / 616;
	border: 1px solid var(--oe-color-tile-border);
	border-radius: var(--oe-radius-xl);
	overflow: hidden;
	isolation: isolate;
}

.oe-service-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.oe-service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--oe-ease, ease);
}

.oe-service-card:hover .oe-service-card__media img {
	transform: scale(1.05);
}

/* The scrim is the 315px overlay in the design, over a 615px card. */
.oe-service-card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: -1;
	height: 51.22%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 46.44%, rgba(0, 0, 0, 0.9) 100%);
}

.oe-service-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--oe-space-sm);
	width: 100%;
	max-width: 500px;
	padding: 34px;
	color: var(--oe-color-white);
}

.oe-service-card__title {
	margin: 0;
}

.oe-service-card__text {
	margin: 0;
	color: var(--oe-color-white);
	line-height: 26px;
}

.oe-service-card__cta-slot {
	margin-block-start: var(--oe-space-2xs);
}

/*
 * The button only earns its place under the pointer. The slot collapses to a
 * zero track and pulls back the body's own gap with it, so a resting card ends
 * at its copy rather than at an empty reservation. Gated on a real pointer:
 * a touch screen never hovers, so there the button simply stays.
 */
@media (hover: hover) {
	.oe-service-card__cta-slot {
		display: grid;
		grid-template-rows: 0fr;
		margin-block-start: calc(-1 * var(--oe-space-sm));
		transition:
			grid-template-rows 320ms var(--oe-ease, ease),
			margin-block-start 320ms var(--oe-ease, ease);
	}

	/* `min-block-size: 0` is what lets a grid item shrink under its content. The
	   clip has no padding of its own, so it can reach zero and take the button
	   out of sight with it - the button itself never could, since padding is a
	   floor under a border-box height. */
	.oe-service-card__cta-clip {
		min-block-size: 0;
		overflow: hidden;
	}

	.oe-service-card__cta {
		opacity: 0;
		transition: opacity 200ms var(--oe-ease, ease);
	}

	/* `focus-within` so the button is reachable by keyboard, not just by mouse. */
	.oe-service-card:hover .oe-service-card__cta-slot,
	.oe-service-card:focus-within .oe-service-card__cta-slot {
		grid-template-rows: 1fr;
		margin-block-start: var(--oe-space-2xs);
	}

	.oe-service-card:hover .oe-service-card__cta,
	.oe-service-card:focus-within .oe-service-card__cta {
		opacity: 1;
	}
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.oe-service-card {
		aspect-ratio: 4 / 3;
	}

	.oe-service-card__body {
		padding: var(--oe-space-md);
	}
}

@media (max-width: 767px) {
	.oe-service-cards__head {
		flex-direction: column;
		align-items: stretch;
	}

	.oe-service-cards__grid {
		margin-block-start: var(--oe-space-md);
	}

	.oe-service-card {
		aspect-ratio: 345 / 350;
	}

	.oe-service-card__body {
		gap: var(--oe-space-2xs);
		padding: var(--oe-space-sm);
	}

	.oe-service-card__title {
		font-size: var(--oe-h5-size);
		line-height: 26px;
	}

	.oe-service-card__text {
		font-size: var(--oe-body-sm-size);
		line-height: 22px;
	}

	.oe-service-card__cta {
		padding: 12px var(--oe-space-lg);
	}
}