/* Carlo Tours — Day trips and theme itineraries.
   Uneven split: a narrow column of words against a wide typographic index,
   then the four themes as a quiet four-up underneath. No photographs here —
   the sections above and below are both image-led. */

.carlo-daytrips__top {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

/* --- The index of day trips --- */
.carlo-daytrips__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--wp--custom--rule) solid var(--wp--preset--color--line);
}

.carlo-daytrips__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: var(--wp--custom--rule) solid var(--wp--preset--color--line);
}

.carlo-daytrips__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--tracking-snug);
	color: var(--wp--preset--color--contrast);
}

.carlo-daytrips__meta {
	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);
	white-space: nowrap;
}

/* --- The four theme itineraries --- */
.carlo-themes {
	margin-top: clamp(3.5rem, 7vw, 6rem);
}

.carlo-themes__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	line-height: var(--wp--custom--line-snug);
	letter-spacing: var(--wp--custom--tracking-snug);
	color: var(--wp--preset--color--contrast);
}

.carlo-themes__intro {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-body);
	color: var(--wp--preset--color--muted);
}

.carlo-themes__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.carlo-theme {
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--rule) solid var(--wp--preset--color--contrast);
}

.carlo-theme__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--tracking-snug);
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

.carlo-theme__text {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--line-body);
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------
   Tablet and up
   --------------------------------------------------------------- */
@media (min-width: 700px) {
	.carlo-themes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 4vw, 3rem);
	}
}

@media (min-width: 900px) {
	.carlo-daytrips__top {
		grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 6rem);
		align-items: start;
	}

	/* The words stay put while the long index scrolls past them. */
	.carlo-daytrips__head {
		position: sticky;
		top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--50));
	}

	.carlo-themes__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}