/* Ravolli — Home teaser for the brand/process editorial page. */

.ravolli-home-process {
	width: min(100% - 48px, 1440px);
	max-width: none !important;
	margin: 88px auto 0;
}

.ravolli-home-process__card {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	min-height: 360px;
	overflow: hidden;
	background: var(--wp--preset--color--brand-primary, #060e1e);
	color: #fff;
	text-decoration: none;
}

.ravolli-home-process__media {
	min-height: 360px;
	overflow: hidden;
}

.ravolli-home-process__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}

.ravolli-home-process__copy {
	padding: 54px 58px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ravolli-home-process__eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-gold, #bc9c6d);
}

.ravolli-home-process__copy h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Lora, serif);
	font-size: clamp(30px, 3vw, 44px);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}

.ravolli-home-process__copy p {
	max-width: 560px;
	margin: 18px 0 26px;
	font-size: 15px;
	line-height: 1.72;
	color: rgba(255,255,255,.78);
}

.ravolli-home-process__link {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.ravolli-home-process__card:hover .ravolli-home-process__media img {
		transform: scale(1.025);
	}
}

@media (max-width: 781px) {
	.ravolli-home-process {
		width: calc(100% - 2 * var(--wp--custom--ravolli--layout-reference--gutter-mobile));
		margin-top: 64px;
	}

	.ravolli-home-process__card {
		grid-template-columns: 1fr;
	}

	.ravolli-home-process__media {
		min-height: 280px;
	}

	.ravolli-home-process__copy {
		padding: 36px 28px 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ravolli-home-process__media img {
		transition: none;
	}
}
