/*
 * Multi Column overrides. Loaded with acf/multi-column after its own CSS.
 * Grid gap 30 (the 1290 column: 3 × 410, 4 × 300, 2 × 630).
 */

.lp-multi-column .block-contents {
	gap: 0;
}

.lp-multi-column .lp-multi-column__intro,
.lp-multi-column .lp-multi-column__intro > * {
	text-align: left;
	margin-inline: 0;
	max-width: none;
}

.lp-multi-column .lp-multi-column__intro {
	margin: 0 0 var(--tv-space-stack);
	align-items: flex-start;
}

.lp-multi-column {
	--lp-grid-gap: 30px;
	--lp-card-pad: 40px;
}

.lp-multi-column .lp-multi-column__grid {
	gap: 30px;
}

/* Intro beside (Board): heading left 620, the copy from the 770 line
(x=1085), top-aligned with the heading. */
@media screen and (min-width: 900px) {
	.lp-multi-column--intro-beside .lp-multi-column__intro {
		display: grid;
		grid-template-columns: minmax(0, 620px) minmax(0, 520px);
		justify-content: space-between;
		column-gap: 40px;
		align-items: start;
	}

	.lp-multi-column--intro-beside .lp-multi-column__intro .lp-eyebrow {
		grid-column: 1;
	}

	.lp-multi-column--intro-beside .lp-multi-column__intro .lp-multi-column__header {
		grid-column: 1;
	}

	.lp-multi-column--intro-beside .lp-multi-column__intro .lp-multi-column__body {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
	}
}

/* ---- Icon cards in a box (values, roles): hairline, 8px corners, 40 in --- */

.lp-multi-column .lp-multi-column__icon-card {
	background: var(--surface-card);
	border: 1px solid var(--secondary-200);
	border-radius: 8px;
	box-shadow: none;
	text-align: left;
	align-items: flex-start;
	gap: 0;
}

.lp-multi-column .lp-multi-column__icon-card .lp-multi-column__icon-wrapper {
	width: 32px;
	height: 32px;
	margin: 0 0 16px;
	background: none;
	border-radius: 0;
	color: var(--accent-400);
	padding: 0;
}

.lp-multi-column .lp-multi-column__icon-card .lp-multi-column__icon--svg,
.lp-multi-column .lp-multi-column__icon-card .lp-multi-column__icon-wrapper svg {
	width: 32px;
	height: 32px;
	color: var(--accent-400);
}

.lp-multi-column .lp-multi-column__icon-card-title {
	font-family: var(--font-family-heading);
	font-size: 24px;
	font-weight: 400;
	line-height: 30px;
	color: var(--neutral-400);
	margin: 0 0 16px;
}

.lp-multi-column .lp-multi-column__icon-card-body {
	font-size: 16px;
	line-height: 26px;
	color: var(--text-secondary);
}

.lp-multi-column .lp-multi-column__icon-card-body p {
	margin: 0;
}

/* Intro in the grid (values, roles, ways to help): the intro is the first
cell of a three-column grid; the cards fill the rest. */
@media screen and (min-width: 900px) {
	.lp-multi-column.is-style-intro-in-grid .block-contents {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 30px;
		align-items: start;
	}

	/* The cards are four-track subgrids (icon, title, body, button): the
	intro spans the same four tracks so its height doesn't size them. */
	.lp-multi-column.is-style-intro-in-grid .block-contents {
		row-gap: 0;
	}

	.lp-multi-column.is-style-intro-in-grid .lp-multi-column__intro {
		margin: 0;
		grid-row: span 4;
	}

	.lp-multi-column.is-style-intro-in-grid .lp-multi-column__grid {
		display: contents;
	}

	/* The parent spans each card over two of six tracks and centres a short
	last row; here every cell is one track. */
	.lp-multi-column.is-style-intro-in-grid .lp-multi-column__grid > * {
		grid-column: auto !important;
	}

	.lp-multi-column.is-style-intro-in-grid .lp-multi-column__icon-card {
		min-height: 306px;
		align-content: start;
	}
}

/* ---- Mission and vision: two cards, the first green ----------------------- */

.lp-multi-column.is-style-mission-vision .lp-multi-column__grid {
	max-width: none;
}

.lp-multi-column.is-style-mission-vision .lp-multi-column__card {
	background: var(--tv-cream);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	padding: 56px;
	min-height: 468px;
}

.lp-multi-column.is-style-mission-vision .lp-multi-column__card-contents {
	padding: 0;
}

.lp-multi-column.is-style-mission-vision .lp-multi-column__card-body {
	font-size: 18px;
	line-height: 28px;
	color: var(--text-secondary);
}

.lp-multi-column.is-style-mission-vision .lp-multi-column__card-body > * {
	margin: 0;
}

.lp-multi-column.is-style-mission-vision .lp-multi-column__card-body > * + * {
	margin-top: 24px;
}

.lp-multi-column.is-style-mission-vision .lp-eyebrow + * {
	margin-top: 24px;
}

.lp-multi-column.is-style-mission-vision p.tv-statement {
	font-family: var(--font-family-heading);
	font-size: 24px;
	line-height: 36px;
	color: var(--primary-300);
}

.lp-multi-column.is-style-mission-vision .lp-multi-column__card:first-child {
	background: var(--primary-300);
}

.lp-multi-column.is-style-mission-vision .lp-multi-column__card:first-child .lp-eyebrow {
	color: var(--accent-300);
}

.lp-multi-column.is-style-mission-vision .lp-multi-column__card:first-child p.tv-statement {
	font-size: 32px;
	line-height: 46px;
	color: var(--tv-cream);
}

@media screen and (max-width: 899px) {

	.lp-multi-column.is-style-mission-vision .lp-multi-column__card {
		min-height: 0;
		padding: 40px 32px;
	}
}

/* ---- Board: square photos, name 22/28, role 16 ----------------------------- */

.lp-multi-column.is-style-board .lp-multi-column__team-card {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	text-align: left;
}

.lp-multi-column.is-style-board .lp-multi-column__team-img-wrapper {
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	margin: 0;
}

.lp-multi-column.is-style-board .lp-multi-column__team-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.lp-multi-column.is-style-board .lp-multi-column__card-contents {
	padding: 10px 0 0;
}

.lp-multi-column.is-style-board .lp-multi-column__team-name {
	font-family: var(--font-family-heading);
	font-size: 22px;
	line-height: 28px;
	font-weight: 400;
	color: var(--neutral-400);
	margin: 0;
}

.lp-multi-column.is-style-board .lp-multi-column__team-role {
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: var(--text-secondary);
	margin: 10px 0 0;
}

/* The intro sits at the column's left edge (the parent centres it). */
.lp-multi-column .block-contents > .lp-multi-column__intro {
	align-self: stretch;
	width: 100%;
}

/* ---- Photo cards (Home community): cream card 12 in, 386×240 photo with
6px corners, text 24 in, title 24/30, copy 16/26, a small green button ---- */

.lp-multi-column.is-style-community-cards .lp-multi-column__card {
	background: var(--tv-cream);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	padding: 12px;
	overflow: visible;
}

.lp-multi-column.is-style-community-cards .lp-multi-column__card-img-wrapper {
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 386 / 240;
}

.lp-multi-column.is-style-community-cards .lp-multi-column__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.lp-multi-column.is-style-community-cards .lp-multi-column__card-contents {
	padding: 24px 12px 12px;
	text-align: left;
}

.lp-multi-column.is-style-community-cards .lp-multi-column__card-title {
	font-size: 24px;
	line-height: 30px;
	color: var(--neutral-400);
	margin: 0;
}

.lp-multi-column.is-style-community-cards .lp-multi-column__card-body {
	margin-top: 12px;
	font-size: 16px;
	line-height: 26px;
	color: var(--neutral-400);
}

.lp-multi-column.is-style-community-cards .lp-multi-column__card-body p {
	margin: 0;
}

.lp-multi-column.is-style-community-cards a.btn.lp-multi-column__card-btn {
	justify-self: start;
	align-self: end;
	margin-top: 12px;
	min-height: 48px;
	padding: 0 20px;
	background: var(--primary-300);
	color: var(--tv-cream);
}

.lp-multi-column.is-style-community-cards a.btn.lp-multi-column__card-btn:hover,
.lp-multi-column.is-style-community-cards a.btn.lp-multi-column__card-btn:focus-visible {
	background: var(--accent-300);
	color: var(--neutral-400);
}

/* ---- Tiles (Home committees): intro 300 left, tiles 2 across (465 each, 30
apart, rows 16 apart); a tile is 88 tall, 20/24 in, a 28 icon 18 before the
title (Merriweather 18/23) and its line (16/19). ------------------------- */

@media screen and (min-width: 900px) {
	.lp-multi-column.is-style-tiles .block-contents {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		column-gap: 30px;
		align-items: start;
		padding-top: 24px;
	}

	.lp-multi-column.is-style-tiles .lp-multi-column__intro {
		margin: 0;
	}
}

.lp-multi-column.is-style-tiles .lp-multi-column__header {
	font-size: 28px;
	line-height: 38px;
}

.lp-multi-column.is-style-tiles .lp-multi-column__body {
	margin-top: 24px;
}

.lp-multi-column.is-style-tiles .lp-multi-column__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 30px;
	margin: 0;
	max-width: none;
}

.lp-multi-column.is-style-tiles .lp-multi-column__grid > * {
	grid-column: auto !important;
	margin: 0;
}

.lp-multi-column.is-style-tiles .lp-multi-column__icon-card {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-row: auto;
	column-gap: 18px;
	row-gap: 4px;
	align-items: center;
	padding: 20px 24px;
	min-height: 88px;
	background: var(--tv-cream);
	border: 1px solid var(--secondary-200);
	border-radius: 8px;
}

.lp-multi-column.is-style-tiles .lp-multi-column__icon-wrapper {
	grid-row: 1 / span 2;
	grid-column: 1;
	width: 28px;
	height: 28px;
	margin: 0;
}

.lp-multi-column.is-style-tiles .lp-multi-column__icon-wrapper svg {
	width: 28px;
	height: 28px;
}

.lp-multi-column.is-style-tiles .lp-multi-column__icon-card-title {
	grid-row: 1;
	grid-column: 2;
	margin: 0;
	font-size: 18px;
	line-height: 23px;
	color: var(--primary-300);
	align-self: end;
}

.lp-multi-column.is-style-tiles .lp-multi-column__icon-card-body {
	grid-row: 2;
	grid-column: 2;
	font-size: 16px;
	line-height: 19px;
	align-self: start;
}

@media screen and (max-width: 640px) {
	.lp-multi-column.is-style-tiles .lp-multi-column__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Stat panel (Our Community, inside the "At a glance" group): a green
panel, 12px corners, 48/56 in; four stats over three, hairlines between.
A stat: 28 icon, figure Merriweather 48/56 gold, label 16/22. ------------- */

.lp-multi-column.is-style-stat-panel .lp-multi-column__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0;
	padding: 48px 56px;
	background: var(--primary-300);
	border-radius: 12px;
	box-shadow: 0 18px 48px rgb(28 43 38 / 0.18);
	max-width: none;
	margin-block-end: 0;
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__grid > * {
	grid-column: span 3 !important;
	grid-row: auto !important;
	margin: 0 !important;
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__grid > :nth-child(n + 5) {
	grid-column: span 4 !important;
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 8px 32px 32px;
	background: none;
	border: 0;
	border-left: 1px solid rgb(255 253 241 / 0.15);
	border-radius: 0;
	min-height: 0;
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-card:is(:nth-child(1), :nth-child(5)) {
	border-left: 0;
	padding-left: 0;
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-card:nth-child(n + 5) {
	padding-top: 32px;
	padding-bottom: 8px;
	border-top: 1px solid rgb(255 253 241 / 0.15);
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-card:nth-child(n + 6) {
	border-top-color: rgb(255 253 241 / 0.15);
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-wrapper {
	width: 28px;
	height: 28px;
	margin: 0 0 16px;
	color: var(--accent-300);
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-wrapper svg {
	width: 28px;
	height: 28px;
	color: var(--accent-300);
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-card-title {
	margin: 0 0 8px;
	font-size: 48px;
	line-height: 56px;
	color: var(--accent-300);
}

.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-card-body {
	font-size: 16px;
	line-height: 22px;
	color: var(--primary-100);
}

@media screen and (max-width: 1023px) {
	.lp-multi-column.is-style-stat-panel .lp-multi-column__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 32px;
		gap: 24px 0;
	}

	.lp-multi-column.is-style-stat-panel .lp-multi-column__grid > *,
	.lp-multi-column.is-style-stat-panel .lp-multi-column__grid > :nth-child(n + 5) {
		grid-column: auto !important;
	}

	.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-card,
	.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-card:nth-child(n + 5) {
		border: 0;
		padding: 0 16px 0 0;
	}

	.lp-multi-column.is-style-stat-panel .lp-multi-column__icon-card-title {
		font-size: 36px;
		line-height: 44px;
	}
}

/* ---- Icon cards: the button is an arrow link (Action Center ways to help);
a card with a title and no copy is the sand highlight tile (Volunteer). --- */

.lp-multi-column a.btn.lp-multi-column__icon-card-btn {
	min-height: 0;
	padding: 0;
	margin-top: 24px;
	background: none;
	border: 0;
	color: var(--primary-300);
	gap: 8px;
	justify-self: start;
	align-self: end;
}

.lp-multi-column a.btn.lp-multi-column__icon-card-btn::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../../assets/icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../../assets/icons/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--motion-fast);
}

.lp-multi-column a.btn.lp-multi-column__icon-card-btn:hover::after {
	transform: translateX(3px);
}

.lp-multi-column .lp-multi-column__icon-card:not(:has(.lp-multi-column__icon-card-body)):has(.lp-multi-column__icon-card-title) {
	background: var(--neutral-100);
}

.lp-multi-column .lp-multi-column__icon-card:not(:has(.lp-multi-column__icon-card-body)) .lp-multi-column__icon-card-title {
	font-size: 20px;
	line-height: 30px;
	color: var(--primary-300);
}

.lp-multi-column.is-style-intro-in-grid .lp-multi-column__body {
	margin-top: 24px;
	font-size: 16px;
	line-height: 26px;
}

/* ---- List cards (Action Center priorities): two cream cards, 48 in, title
28/36, copy 18/28, then a titled check list. ---------------------------- */

.lp-multi-column.is-style-list-cards .lp-multi-column__grid {
	max-width: none;
}

.lp-multi-column.is-style-list-cards .lp-multi-column__card {
	background: var(--tv-cream);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	padding: 48px;
}

.lp-multi-column.is-style-list-cards .lp-multi-column__card-contents {
	padding: 0;
	text-align: left;
}

.lp-multi-column.is-style-list-cards .lp-multi-column__card-title {
	font-size: 28px;
	line-height: 36px;
	color: var(--primary-300);
	margin: 0;
}

.lp-multi-column.is-style-list-cards .lp-multi-column__card-body {
	margin-top: 24px;
	font-size: 18px;
	line-height: 28px;
	color: var(--text-secondary);
}

.lp-multi-column.is-style-list-cards .lp-multi-column__card-body > p {
	margin: 0 0 24px;
}

@media screen and (max-width: 640px) {
	.lp-multi-column.is-style-list-cards .lp-multi-column__card {
		padding: 32px 24px;
	}
}

/* ---- Memberships: four price cards (300 wide), 32 in; name 24/36, price
Merriweather 44/52 dark gold over "per year, billed annually" 16/24; copy
16/24; checks 16/19 500 green; an outline button at the foot. ------------ */

.lp-multi-column.is-style-memberships .lp-multi-column__price {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	padding: 32px;
	background: var(--tv-cream);
	border: 1px solid var(--secondary-200);
	border-radius: 8px;
	box-shadow: none;
	height: 100%;
}

.lp-multi-column.is-style-memberships .lp-multi-column__price-name {
	margin: 0;
	font-size: 24px;
	line-height: 36px;
	font-weight: 400;
	color: var(--primary-300);
}

.lp-multi-column.is-style-memberships .lp-multi-column__price-value {
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.lp-multi-column.is-style-memberships .lp-multi-column__price-amount {
	font-family: var(--font-family-heading);
	font-size: 44px;
	font-weight: 400;
	line-height: 52px;
	color: var(--accent-400);
}

.lp-multi-column.is-style-memberships .lp-multi-column__price-words {
	font-family: var(--font-family-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--text-secondary);
}

.lp-multi-column.is-style-memberships .lp-multi-column__price-body {
	margin-top: 16px;
	font-size: 16px;
	line-height: 24px;
	color: var(--text-secondary);
	flex: 1;
}

.lp-multi-column.is-style-memberships .lp-multi-column__price-body > p {
	margin: 0 0 20px;
}

.lp-multi-column.is-style-memberships ul.tv-checks {
	gap: 17px;
}

.lp-multi-column.is-style-memberships ul.tv-checks > li {
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
	color: var(--primary-300);
}

.lp-multi-column.is-style-memberships ul.tv-checks > li::before {
	top: 0;
}

.lp-multi-column.is-style-memberships a.btn.lp-multi-column__price-btn {
	margin-top: 40px;
	width: 100%;
	min-height: 56px;
	background: transparent;
	color: var(--primary-300);
	border: 1.5px solid var(--primary-300);
}

.lp-multi-column.is-style-memberships a.btn.lp-multi-column__price-btn:hover {
	background: var(--primary-300);
	color: var(--tv-cream);
}

.lp-multi-column .lp-multi-column__footnote {
	margin: 40px 0 0;
	text-align: left;
	font-size: 18px;
	line-height: 28px;
	color: var(--text-secondary);
}

.lp-multi-column .lp-multi-column__footnote a {
	margin-left: 4px;
	font-weight: 500;
	color: var(--accent-400);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media screen and (max-width: 1100px) {
	.lp-multi-column.is-style-memberships .lp-multi-column__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-multi-column.is-style-memberships .lp-multi-column__grid > * {
		grid-column: auto !important;
	}
}

@media screen and (max-width: 640px) {
	.lp-multi-column.is-style-memberships .lp-multi-column__grid {
		grid-template-columns: 1fr;
	}
}

.lp-multi-column.is-style-memberships a.btn.lp-multi-column__price-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	text-align: center;
}

/* The highlight tile's title takes the copy and button tracks too, so a
three-line sentence doesn't push the other cards' copy down. */
.lp-multi-column .lp-multi-column__icon-card:not(:has(.lp-multi-column__icon-card-body)) .lp-multi-column__icon-card-title {
	grid-row: 2 / span 3;
}

@media screen and (max-width: 640px) {
	.lp-multi-column.is-style-community-cards .lp-multi-column__grid {
		grid-template-columns: 1fr;
	}

	.lp-multi-column.is-style-community-cards .lp-multi-column__grid > * {
		grid-column: auto !important;
	}
}

/* Phones: icon cards one per row (the parent keeps two, which squeezes the
titles at 520). */
@media screen and (max-width: 640px) {
	.lp-multi-column.is-style-intro-in-grid .lp-multi-column__grid {
		grid-template-columns: 1fr;
	}

	.lp-multi-column.is-style-intro-in-grid .lp-multi-column__grid > * {
		grid-column: auto !important;
	}
}