/*
 * Group styles "Mood band", "Mood band / Duo", "Mood band / Pillars" and "Mood band / Static".
 * Hover-only effects sit inside (hover: hover) so touch devices never get stuck states.
 */

/*
 * ---------- Mood band (Group style "Mood band": lime ground holding Program cards) ----------
 * Cards lift on hover; hovering the first card turns the band yellow (Duo: the second
 * turns it orange). The cards take the card padding token, white text and large copy,
 * so plain Program cards drop in.
 */
:is(.is-style-mood-band, .is-style-mood-band-duo, .is-style-mood-band-pillars, .is-style-mood-band-static) {
	transition: background-color 450ms var(--wp--custom--motion--ease-entrance);
}
:is(.is-style-mood-band, .is-style-mood-band-duo):has(.is-style-card-program:first-child:hover) {
	background-color: var(--wp--preset--color--yellow);
}
.is-style-mood-band-duo:has(.is-style-card-program:nth-child(2):hover) {
	background-color: var(--wp--preset--color--orange);
}
:is(.is-style-mood-band, .is-style-mood-band-duo, .is-style-mood-band-pillars, .is-style-mood-band-static) .is-style-card-program {
	min-height: 0;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--m);
	padding: var(--wp--custom--card--padding);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--large);
}
:is(.is-style-mood-band, .is-style-mood-band-duo, .is-style-mood-band-pillars, .is-style-mood-band-static) .is-style-card-program > * {
	margin-block: 0;
}
:is(.is-style-mood-band, .is-style-mood-band-duo, .is-style-mood-band-pillars, .is-style-mood-band-static) .is-style-card-program :is(h2, h3) {
	font-size: var(--wp--custom--font-size--pillar);
	line-height: 1.14;
}
:is(.is-style-mood-band, .is-style-mood-band-duo, .is-style-mood-band-pillars, .is-style-mood-band-static) .is-style-card-program > .is-style-link-underline:last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--m);
}
@media (hover: hover) and (pointer: fine) {
	:is(.is-style-mood-band, .is-style-mood-band-duo, .is-style-mood-band-pillars, .is-style-mood-band-static) .is-style-card-program {
		transition:
			transform 400ms var(--wp--custom--motion--ease-entrance),
			box-shadow 400ms var(--wp--custom--motion--ease-entrance),
			background-color 320ms var(--wp--custom--motion--ease-entrance);
	}
	:is(.is-style-mood-band, .is-style-mood-band-duo, .is-style-mood-band-pillars, .is-style-mood-band-static) .is-style-card-program:hover {
		transform: translateY(-6px) scale(1.02);
	}
}

/*
 * ---------- Mood band / Pillars (six pillar Program cards, Peer Networks) ----------
 * The band takes the hovered card's color, by position in a run of six, in the
 * pillar order: lime, yellow, lime, rust, navy, indigo. Cards are compact: icon at
 * the top, title and text at the foot.
 */
.is-style-mood-band-pillars:has(.is-style-card-program:nth-child(6n+2):hover) {
	background-color: var(--wp--preset--color--yellow);
}
.is-style-mood-band-pillars:has(.is-style-card-program:nth-child(6n+4):hover) {
	background-color: var(--wp--preset--color--rust);
}
.is-style-mood-band-pillars:has(.is-style-card-program:nth-child(6n+5):hover) {
	background-color: var(--wp--preset--color--navy);
}
.is-style-mood-band-pillars:has(.is-style-card-program:nth-child(6n):hover) {
	background-color: var(--wp--preset--color--indigo);
}
.is-style-mood-band-pillars .is-style-card-program {
	min-height: 16.25rem;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--l);
	padding: var(--wp--preset--spacing--l);
	font-size: var(--wp--preset--font-size--card);
}
.is-style-mood-band-pillars .is-style-card-program :is(h2, h3) {
	margin-bottom: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--subheading);
}
.is-style-mood-band-pillars .is-style-card-program > .wp-block-group > * {
	margin-block: 0;
}
.is-style-mood-band-pillars .is-style-card-program > .wp-block-group > :is(h2, h3) {
	margin-bottom: var(--wp--preset--spacing--s);
}

/*
 * ---------- Icon cards in a Mood band / Static (Toolkits) ----------
 * A Program card that starts with an Icon block keeps the icon at the top and its
 * text group at the foot, at a common minimum height.
 */
.is-style-mood-band-static .is-style-card-program:has(> .wp-block-icon) {
	min-height: 20rem;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xxl);
}
.is-style-mood-band-static .is-style-card-program > .wp-block-group > * {
	margin-block: 0;
}