/* value-cards — heading + lede + grid of icon/title/content cards.
   Prod: c25ef6e bg #F3F3F3, 1dd2e02 padding 80px 24px, radius 10px;
   6ffab51 grid repeat(4,1fr) gap 20px (2-col gap 10px @<=1024);
   cards bg #FFF, radius 10px, padding 24px, min-height 325px, space-between, NO shadow;
   hover bg -> #441949, h3+text -> lime. Icon bab5102 55x40 margin-left -10px. */

.value-cards {
	padding: 80px 24px;
	background: var(--off-white);
	color: var(--dark);
	border-radius: 10px;
}

.value-cards .section__title {
	color: var(--purple);
	text-align: center;
	width: 730px;
	max-width: 730px;
	margin: 0 auto 24px;
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}

.value-cards .section__lede {
	color: rgba(68, 25, 73, 0.6);
	text-align: center;
	width: 730px;
	max-width: 730px;
	margin-inline: auto;   /* the gap below lives on the grid so it cannot collapse away */
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.value-cards__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: start;
}

.value-cards__card {
	background: var(--white);
	border-radius: 10px;
	padding: 24px;
	min-height: 325px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0;
	box-shadow: none;
	transition: background-color 0.5s;
}

.value-cards__card:hover { background: var(--purple); }
.value-cards__card:hover .value-cards__title,
.value-cards__card:hover .value-cards__text { color: var(--lime); }

.value-cards__iconwrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: -10px;
}

.value-cards__icon {
	width: 55px;
	height: 40px;
	object-fit: contain;
	object-position: left center;
	display: block;
}

.value-cards__iconwrap svg {
	width: 55px;
	height: 40px;
	display: block;
}

.value-cards__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	margin: 0;
	color: var(--purple);
}

.value-cards__text {
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	color: rgba(68, 25, 73, 0.6);   /* paragraph gap from the shared p rule; prod lifts the text off the card floor by it */
}

/* --- Cards are <details>. Desktop: every card expanded, header inert, no toggle. --- */
.value-cards__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	cursor: default;
	pointer-events: none; /* desktop header is not a toggle */
}
.value-cards__head::-webkit-details-marker { display: none; } /* Safari <details> triangle */
.value-cards__plus { display: none; } /* toggle affordance is mobile-only */

@media (max-width: 1024px) {
	.value-cards__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.value-cards .section__lede { font-size: var(--fs-sm); }
}

/* --- Mobile: cards collapse into a first-open accordion (prod). Header = title + plus
   toggle; open state uses the trading-house gradient, matching .accordion--cards. --- */
@media (max-width: 767px) {
	.value-cards__grid { grid-template-columns: 1fr; gap: 15px; }   /* prod: item margin-bottom 15 */
	.value-cards__card { min-height: 0; padding: 0; overflow: hidden; }
	.value-cards__title { font-size: 16px; line-height: 24px; }     /* prod's accordion head type, not --fs-h2 */
	.value-cards__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 20px;
		cursor: pointer;
		pointer-events: auto; /* mobile header toggles */
	}
	.value-cards__iconwrap { display: none; } /* prod mobile header shows title + toggle only */
	.value-cards__title { order: 1; }
	.value-cards__plus {
		display: block;
		order: 2;
		flex: 0 0 28px;
		width: 28px;
		height: 28px;
		background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%3E%3Crect%20x='0.5'%20y='0.5'%20width='27'%20height='27'%20rx='13.5'%20stroke='%23261414'%20stroke-opacity='0.2'/%3E%3Cpath%20d='M13.5%2013.5V10.5H14.5V13.5H17.5V14.5H14.5V17.5H13.5V14.5H10.5V13.5H13.5Z'%20fill='black'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
	}
	.value-cards__card[open] .value-cards__head {
		background: linear-gradient(104deg, #5755C6 15%, #977AC3 88%);
	}
	.value-cards__card[open] .value-cards__title { color: var(--white); }
	.value-cards__card[open] .value-cards__plus {
		flex: 0 0 90px;
		width: 90px;
		background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='28'%20viewBox='0%200%2090%2028'%20fill='none'%3E%3Cpath%20d='M87.076%2012.6474H89.9999V14.6571H87.076V17.6747H85.1286V14.6571H82.2047V12.6474H85.1286V9.62988H87.076V12.6474Z'%20fill='%23F6F6F6'%3E%3C/path%3E%3Cpath%20d='M59.5516%2012.7254H62.2488V14.5792H59.5516V17.3627H57.7554V14.5792H55.0582V12.7254H57.7554V9.94181H59.5516V12.7254Z'%20fill='%23F6F6F6'%3E%3C/path%3E%3Cpath%20d='M32.0272%2012.8034H34.4978V14.5012H32.0272V17.0448H30.3822V14.5012H27.9175V12.8034H30.3822V10.2538H32.0272V12.8034Z'%20fill='%23F6F6F6'%3E%3C/path%3E%3Cpath%20d='M4.50293%2012.8814H6.74091V14.4232H4.50293V16.7328H3.009V14.4232H0.770996V12.8814H3.009V10.5657H4.50293V12.8814Z'%20fill='%23F6F6F6'%3E%3C/path%3E%3C/svg%3E") center / 90px 28px no-repeat;
	}
	.value-cards__card > .value-cards__text { display: none; } /* collapsed by default */
	.value-cards__card[open] > .value-cards__text {
		display: block;
		margin: -10px 0 0;                                          /* 23e9c2e pulls up under the head */
		padding: 20px;
		background: linear-gradient(104deg, #5755C6 15%, #977AC3 88%);
		color: rgba(246, 246, 246, 0.6);
	}
}