/* ═══════════════════════════════════════════════════════════════
   Accordion card columns — #ECF1F5 band.
   Cards 496x96 r10 white; the open card is #8DA9C5 with
   white copy and 30px vertical padding.
   ═══════════════════════════════════════════════════════════════ */
.accordion-cards__band {
	background: var(--gd-tint);
	padding-bottom: clamp(40px, 28.34px + 2.9895vw, 80px);
	padding-top: clamp(40px, 28.34px + 2.9895vw, 80px);
}

.accordion-cards__intro {
	margin-top: 10px;
	max-width: 1012px;
}

/* --card-columns is read by js/accordion-card-columns.js, which deals the
   cards into that many real columns. Independent columns matter: in a grid
   the row shares a height, so opening one card leaves dead space beside it. */
.accordion-cards__grid {
	--card-columns: 3;
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-top: clamp(20px, 17.09px + 0.7474vw, 30px);
}

.accordion-cards__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* Hover is a background wash and nothing else — no lift, no shadow, no
   movement. --gd-blue at ~12% over white lands just deeper than the band
   behind it (#ECF1F5), so the card reads as picked out rather than
   receding into it. */
.accordion-cards {
	--card-hover: #E4EBF2;
	--card-hover-open: #8199B2;
}

.accordion-cards__card {
	background: var(--gd-white);
	border-radius: var(--gd-radius-tile);
	overflow: hidden;
	transition: background-color 0.35s var(--gd-ease);
}

/* The reveal verb sets the `transition` shorthand on these cards, which
   drops the one above. Composed back here, scoped past the verb's own
   weight rather than relying on load order. */
html.wr-reveal [data-reveal] .accordion-cards__grid .accordion-cards__card {
	transition: background-color 0.35s var(--gd-ease), clip-path var(--sr-t-wipe) var(--sr-ease) var(--sr-delay, 0s);
}

.accordion-cards__card:hover {
	background: var(--card-hover);
}

.accordion-cards__card.is-open {
	background: var(--gd-card-open);
}

.accordion-cards__card.is-open:hover {
	background: var(--card-hover-open);
}

/* Identical box open or closed, so the toggle's icon never moves when the
   card is opened — the design's tighter open padding shifted it. */
.accordion-cards__toggle {
	align-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	min-height: clamp(48px, 34.01px + 3.5875vw, 96px);
	padding: clamp(10px, 7.09px + 0.7474vw, 20px) 20px;
	text-align: left;
	width: 100%;
}

.accordion-cards__title {
	color: var(--gd-black);
	font-size: clamp(18px, 16.83px + 0.299vw, 22px);
	font-weight: var(--gd-bold);
	line-height: 28px;
}

.accordion-cards__card.is-open .accordion-cards__title {
	color: var(--gd-white);
}

/* Plus that rotates into a close cross */
.accordion-cards__icon {
	flex: 0 0 auto;
	height: clamp(18px, 15.67px + 0.5979vw, 26px);
	position: relative;
	transition: transform 0.35s var(--gd-ease);
	width: clamp(18px, 15.67px + 0.5979vw, 26px);
}

.accordion-cards__icon::before,
.accordion-cards__icon::after {
	background: var(--gd-blue);
	content: "";
	inset: 0;
	margin: auto; /* true optical centre in both axes */
	position: absolute;
	transition: background-color 0.35s var(--gd-ease);
}

.accordion-cards__icon::before {
	height: 2px;
	width: 100%;
}

.accordion-cards__icon::after {
	height: 100%;
	width: 2px;
}

.accordion-cards__card:hover .accordion-cards__icon::before,
.accordion-cards__card:hover .accordion-cards__icon::after {
	background: var(--gd-blue-dark);
}

.accordion-cards__card.is-open .accordion-cards__icon {
	transform: rotate(45deg);
}

.accordion-cards__card.is-open .accordion-cards__icon::before,
.accordion-cards__card.is-open .accordion-cards__icon::after {
	background: var(--gd-white);
}

.accordion-cards__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s var(--gd-ease);
}

.accordion-cards__card.is-open .accordion-cards__panel {
	grid-template-rows: 1fr;
}

.accordion-cards__panel > * {
	min-height: 0;
	overflow: hidden;
}

.accordion-cards__body {
	padding: 0 20px;
}

.accordion-cards__card.is-open .accordion-cards__body {
	padding-bottom: clamp(10px, 7.09px + 0.7474vw, 20px);
	padding-top: 0;
}

.accordion-cards__line {
	color: var(--gd-white);
	font-size: clamp(18px, 16.83px + 0.299vw, 22px);
	font-weight: var(--gd-bold);
	line-height: clamp(27px, 26.71px + 0.0747vw, 28px);
	margin: 0;
	padding: 0;
}

.accordion-cards__line + .accordion-cards__line {
	margin-top: 0;
}

.accordion-cards__key {
	font-weight: var(--gd-book);
}

/* Three columns hold while a card is wide enough for its title to sit on two
   lines. Re-measured after --gd-bold dropped 700 -> 600: the titles are
   narrower now, so the old 1600px cutoff was
   too conservative and put every 1280–1600 laptop — which is most of them —
   into two columns. Measured with the real column dealer: at 1440 (405px
   columns) and 1280 (357px) exactly one title runs to three lines and the
   columns balance within 15px; by 1210 (336px) three titles wrap and it starts
   to look ragged. So three columns down to 1280, two below it.

   This is a section-specific breakpoint rather than one of the site's four,
   because it is driven by the longest card title — it moves if the copy does. */
@media (max-width: 1279px) {
	.accordion-cards__grid {
		--card-columns: 2;
	}
}

@media (max-width: 899px) {
	.accordion-cards__grid {
		--card-columns: 1;
	}
}