/* Family Holidays page — section styling not covered by shared park-* CSS. */

.argyll-family-template .wp-site-blocks {
	padding-top: 0;
}

/* Hero shares argyll-hero / argyll-hero--inner — no extra rules needed beyond
   the optional title break. */

/* ---------- Intro ---------------------------------------------------------- */

.argyll-family-intro {
	background: var(--wp--preset--color--base);
	padding-top: 40px;
	padding-right: var(--wp--custom--spacing--page-gutter);
	padding-bottom: var(--wp--custom--spacing--section-inset-v);
	padding-left: var(--wp--custom--spacing--page-gutter);
}

.argyll-family-breadcrumbs {
	color: rgba(30, 30, 30, 0.5);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	line-height: 1;
	margin: 0 0 72px;
}

.argyll-family-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.argyll-family-breadcrumbs a:hover,
.argyll-family-breadcrumbs a:focus-visible {
	text-decoration: underline;
}

.argyll-family-breadcrumbs span {
	color: var(--wp--preset--color--contrast);
}

.argyll-family-intro__copy {
	margin-inline: auto;
	max-width: 800px;
	text-align: center;
}

.argyll-family-intro__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--typography--archive-title);
	font-weight: var(--wp--custom--font-weight--display-regular);
	line-height: 1;
	margin: 0;
	text-wrap: balance;
}

.argyll-family-intro__lede {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	line-height: 1.5;
	margin: var(--wp--custom--spacing--component-gap) auto 0;
	max-width: 720px;
	text-wrap: pretty;
}

.argyll-family-intro__buttons {
	margin-top: var(--wp--custom--spacing--component-gap);
}

/* ---------- Holiday types slider ------------------------------------------ */
/* Reuses .park-activities styles. Placeholder image background colour so cards
   look intentional before image meta lands. */

.argyll-family-holiday-types .park-activities__image {
	background: color-mix(in srgb, var(--wp--preset--color--base) 12%, var(--wp--preset--color--brown));
	border-radius: var(--wp--custom--radius--image);
}

/* ---------- Lodging cards -------------------------------------------------- */

.argyll-family-lodging {
	background: var(--wp--preset--color--base);
	padding-top: var(--wp--custom--spacing--section-inset-v-large);
	padding-right: var(--wp--custom--spacing--page-gutter);
	padding-bottom: var(--wp--custom--spacing--section-inset-v-large);
	padding-left: var(--wp--custom--spacing--page-gutter);
}

.argyll-family-lodging__inner {
	margin-inline: auto;
	max-width: var(--wp--custom--size--park-section-max);
	width: 100%;
}

.argyll-family-lodging__header {
	margin: 0 auto calc(var(--wp--custom--spacing--component-gap) * 2);
	max-width: 800px;
	text-align: center;
}

.argyll-family-lodging__eyebrow {
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: var(--wp--custom--font-weight--body-semibold);
	line-height: 1;
	margin: 0 0 var(--wp--custom--spacing--component-gap-small);
}

.argyll-family-lodging__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--typography--archive-title);
	font-weight: var(--wp--custom--font-weight--display-regular);
	line-height: 1;
	margin: 0;
	text-wrap: balance;
}

.argyll-family-lodging__lede {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	line-height: 1.5;
	margin: var(--wp--custom--spacing--component-gap-small) auto 0;
	max-width: 720px;
	text-wrap: pretty;
}

.argyll-family-lodging__link {
	margin: var(--wp--custom--spacing--component-gap-small) 0 0;
}

.argyll-family-lodging__link a {
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: var(--wp--custom--font-weight--body-semibold);
	text-decoration: underline;
}

.argyll-family-lodging__cards {
	display: grid;
	gap: var(--wp--custom--spacing--component-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
	.argyll-family-lodging__cards {
		grid-template-columns: 1fr;
	}
}

.argyll-family-lodging__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--content-gap);
	min-width: 0;
}

.argyll-family-lodging__image {
	aspect-ratio: 1;
	background: color-mix(in srgb, var(--wp--preset--color--muted) 45%, var(--wp--preset--color--base));
	border-radius: var(--wp--custom--radius--image);
	overflow: hidden;
	width: 100%;
}

.argyll-family-lodging__img {
	border-radius: inherit;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.argyll-family-lodging__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--component-gap-small);
}

.argyll-family-lodging__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--typography--card-title, 28px);
	font-weight: var(--wp--custom--font-weight--display-regular);
	line-height: 1.1;
	margin: 0;
}

.argyll-family-lodging__description {
	color: var(--wp--preset--color--contrast, currentColor);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	line-height: 1.5;
	margin: 0;
}

.argyll-family-lodging__features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--spacing--component-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.argyll-family-lodging__feature {
	align-items: center;
	display: flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	gap: 8px;
}

.argyll-family-lodging__feature-icon {
	background-color: currentColor;
	display: inline-block;
	flex: 0 0 24px;
	height: 24px;
	mask: var(--family-feature-icon-url) center / contain no-repeat;
	-webkit-mask: var(--family-feature-icon-url) center / contain no-repeat;
	width: 24px;
}

.argyll-family-lodging__cta {
	align-self: flex-start;
	background-color: var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--base);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: var(--wp--custom--font-weight--display-medium);
	margin-top: var(--wp--custom--spacing--component-gap-small);
	min-height: var(--wp--custom--size--button-height);
	padding-right: var(--wp--custom--spacing--button-inset-h);
	padding-left: var(--wp--custom--spacing--button-inset-h);
	text-decoration: none;
}

.argyll-family-lodging__cta:hover,
.argyll-family-lodging__cta:focus-visible {
	background-color: #b5651c;
	color: var(--wp--preset--color--base);
}