/* Carlo Tours — Hero Section.
   Asymmetric editorial split: text on the site's content grid, image
   bleeding off the right edge. Stacks to full-bleed on small screens. */

.carlo-hero {
	background-color: var(--wp--preset--color--base);
	/* Align the text column with the rest of the page's content column. */
	--carlo-hero-pad: max(
		var(--wp--custom--gutter),
		calc((100% - var(--wp--style--global--content-size)) / 2)
	);
}

.carlo-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	padding-block: clamp(3rem, 7vw, 6.5rem);
	padding-inline: var(--wp--custom--gutter);
}

/* --- Text column --- */
.carlo-hero__content {
	max-width: 36rem;
}

.carlo-hero__title {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 500;
	line-height: var(--wp--custom--line-tight);
	letter-spacing: var(--wp--custom--tracking-tight);
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

.carlo-hero__intro {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 44ch;
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-body);
	color: var(--wp--preset--color--muted);
}

.carlo-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--50);
}

.carlo-hero__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* --- Image --- */
.carlo-hero__media {
	margin: 0;
	/* Full-bleed on small screens, cancelling the inner gutter. */
	margin-inline: calc(-1 * var(--wp--custom--gutter));
}

.carlo-hero__image {
	display: block;
	width: 100%;
	height: clamp(280px, 48vh, 420px);
	object-fit: cover;
	object-position: center 45%;
}

.carlo-hero__caption {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding-inline: var(--wp--custom--gutter);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking-wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------
   Desktop — asymmetric split, image bleeds off the right edge
   --------------------------------------------------------------- */
@media (min-width: 900px) {
	.carlo-hero__inner {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(2.5rem, 6vw, 6rem);
		padding-block: clamp(4rem, 8vw, 8rem);
		padding-left: var(--carlo-hero-pad);
		padding-right: 0;
	}

	.carlo-hero__content {
		max-width: none;
	}

	.carlo-hero__media {
		margin-inline: 0;
	}

	.carlo-hero__image {
		height: clamp(420px, 62vh, 640px);
	}

	.carlo-hero__caption {
		padding-inline: 0;
	}
}