@import url('../vars.css');

.fs-page {
	margin-bottom: var(--mb);
	color: var(--text);
	font-family: var(--desktop-body-font), sans-serif;
	font-size: var(--desktop-body-size);
	line-height: 1.45;
}

.fs-page a {
	color: var(--primary-brand-2);
	text-decoration: none;
}

/* Intro: illustration + text */
.fs-intro {
	display: grid;
	grid-template-columns: minmax(280px, 705px) minmax(0, 1fr);
	gap: var(--spacing-20);
	align-items: center;
	margin-bottom: var(--spacing-16);
}

.fs-intro__media {
	min-width: 0;
	height: 415px;
	border-radius: var(--radius-l);
	overflow: hidden;
	background: var(--white);
}

.fs-intro__media picture,
.fs-intro__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.fs-intro__media img {
	object-fit: cover;
	object-position: left center;
}

.fs-intro__content {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 800px;
}

.page-content .fs-page h2.fs-intro__title,
.fs-page h2.fs-intro__title {
	margin: 0 0 var(--spacing-5);
	font-family: var(--desktop-h2-font), serif;
	font-size: 40px;
	font-weight: 800;
	color: var(--text);
	line-height: normal;
}

.fs-intro__text {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.fs-intro__text p {
	margin: 0;
	color: var(--text);
	font-size: var(--desktop-body-size);
	line-height: normal;
}

.fs-intro__note {
	color: var(--gray-400);
}

/* Section heading from WP */
.page-content .fs-page .wp-block-heading,
.fs-page .wp-block-heading {
	margin: 0 0 var(--spacing-8);
}

/* Support cards */
.fs-cards {
	display: flex;
	gap: var(--spacing-5);
	align-items: stretch;
	margin-bottom: var(--mb);
}

.fs-card--tall {
	flex: 1 1 0;
	min-width: 0;
}

.fs-cards__col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	min-width: 0;
}

.fs-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: var(--spacing-6) var(--spacing-8) var(--spacing-8);
	border-radius: var(--radius-l);
	background: var(--white);
	box-shadow: var(--drop-shadow-200);
	box-sizing: border-box;
}

.fs-cards__col .fs-card:first-child {
	padding-right: var(--spacing-24);
}

.fs-card__head {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	min-width: 0;
}

.fs-card__icon {
	display: block;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.page-content .fs-page h3.fs-card__title,
.fs-page h3.fs-card__title {
	margin: 0;
	margin-bottom: 0;
	font-family: var(--desktop-accent-title-font), serif;
	font-size: var(--desktop-accent-title-size);
	font-weight: var(--desktop-accent-title-weight);
	color: var(--text);
	line-height: normal;
}

.fs-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.fs-card__list > li {
	position: relative;
	padding-left: 14px;
	color: var(--text);
	font-size: var(--desktop-body-size);
	line-height: normal;
}

.fs-card__list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--secondary-2);
}

.fs-card__list ul {
	margin: var(--spacing-1) 0 0;
	padding: 0 0 0 22px;
	list-style: disc;
}

.fs-card__list ul li {
	margin: 0;
	padding: 0;
	color: var(--text);
	font-size: var(--desktop-body-size);
	line-height: normal;
}

.fs-card__list ul li::before {
	display: none;
}

/* Responsive */
@media screen and (max-width: 1400px) {
	.fs-intro {
		gap: var(--spacing-12);
	}

	.fs-intro__media {
		height: 380px;
	}

	.fs-cards__col .fs-card:first-child {
		padding-right: var(--spacing-12);
	}
}

@media screen and (max-width: 1280px) {
	.fs-intro {
		grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
		gap: var(--spacing-8);
	}

	.fs-intro__media {
		height: 340px;
	}

	.page-content .fs-page h2.fs-intro__title,
	.fs-page h2.fs-intro__title {
		font-size: 32px;
	}
}

@media screen and (max-width: 1024px) {
	.fs-intro {
		grid-template-columns: 1fr;
		gap: var(--spacing-6);
		margin-bottom: var(--spacing-12);
	}

	.fs-intro__media {
		height: 280px;
		max-width: 705px;
	}

	.fs-intro__media img {
		object-position: left top;
	}

	.fs-intro__content {
		max-width: none;
	}

	.fs-cards {
		flex-direction: column;
	}

	.fs-cards__col .fs-card:first-child {
		padding-right: var(--spacing-8);
	}
}

@media screen and (max-width: 768px) {
	.page-content .fs-page .wp-block-heading,
	.fs-page .wp-block-heading {
		margin-bottom: var(--spacing-6);
		font-size: var(--mobile-h2-size);
	}

	.fs-intro {
		margin-bottom: var(--spacing-10);
		gap: var(--spacing-5);
	}

	.fs-intro__media {
		height: 188px;
		max-width: none;
	}

	.fs-intro__media img {
		object-position: left top;
	}

	.page-content .fs-page h2.fs-intro__title,
	.fs-page h2.fs-intro__title {
		margin: 0 0 var(--spacing-4);
		font-size: var(--mobile-h2-size);
		font-weight: var(--mobile-h2-weight);
	}

	.fs-intro__text {
		gap: var(--spacing-4);
	}

	.fs-card {
		gap: 12px;
		padding: var(--spacing-4);
	}

	.fs-cards__col .fs-card:first-child {
		padding-right: var(--spacing-4);
	}

	.fs-card__icon {
		width: 32px;
		height: 32px;
	}

	.fs-card__head {
		gap: var(--spacing-4);
	}

	.page-content .fs-page h3.fs-card__title,
	.fs-page h3.fs-card__title {
		margin: 0;
		margin-bottom: 0;
		font-size: 14px;
	}

	.fs-card__list {
		gap: var(--spacing-3);
	}
}

@media screen and (max-width: 480px) {
	.fs-intro__media {
		height: 160px;
	}

	.fs-intro__media img {
		object-position: left top;
	}
}

@media screen and (max-width: 360px) {
	.fs-intro__media {
		height: 148px;
	}
}