/*
 * Group styles "Pillar band" and "Pillar band / Reveal": lime band of Program cards.
 * Hovering or focusing a card spotlights it and fades its photo into the band.
 * Reveal also keeps each card's text below the title folded until the card is active.
 * Hover-only effects sit inside (hover: hover) so touch devices never get stuck states.
 */

:is(.is-style-pillar-band, .is-style-pillar-band-reveal) {
	position: relative;
	overflow: hidden;
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) > :not(.pqmd-pillar-photo) {
	position: relative;
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) > .alignwide {
	padding-inline: clamp(0px, 6vw - var(--wp--preset--spacing--l), var(--wp--preset--spacing--max));
}

/* Background photos: set as each card's Background image; theme.js moves them here. */
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) > .pqmd-pillar-photo {
	position: absolute;
	inset: 0;
	max-width: none !important;
	margin: 0 !important;
	background-position: center;
	background-size: cover;
	filter: brightness(0.45);
	opacity: 0;
	transform: scale(1.06);
	pointer-events: none;
	transition:
		opacity 600ms var(--wp--custom--motion--ease-entrance),
		transform 900ms var(--wp--custom--motion--ease-entrance);
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) > .pqmd-pillar-photo.is-active {
	opacity: 1;
	transform: scale(1);
}

:is(.is-style-pillar-band, .is-style-pillar-band-reveal) .is-style-card-program {
	background-image: none !important;
	transition:
		transform 480ms var(--wp--custom--motion--spring),
		opacity 320ms var(--wp--custom--motion--ease-entrance),
		background-color 320ms var(--wp--custom--motion--ease-entrance),
		color 320ms var(--wp--custom--motion--ease-entrance);
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) .is-style-card-program .wp-block-icon {
	transition:
		width 220ms var(--wp--custom--motion--ease-entrance),
		color 220ms var(--wp--custom--motion--ease-entrance);
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal).has-active .is-style-card-program:not(.is-active) {
	opacity: 0.6;
	transform: scale(0.95);
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) .is-style-card-program.is-active {
	z-index: 2;
	border-color: transparent;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	transform: scale(1.04);
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) .is-style-card-program.is-active :is(h2, h3, h4, h2 a, h3 a, h4 a, .is-style-arrow-link, .is-style-arrow-link a) {
	color: var(--wp--preset--color--ink);
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) .is-style-card-program.is-active .wp-block-icon {
	width: var(--wp--custom--icon--card-active);
	color: var(--wp--preset--color--ink);
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) .is-style-card-program.is-active .is-style-arrow-link a::after {
	transform: translateX(4px);
}
:is(.is-style-pillar-band, .is-style-pillar-band-reveal) .is-style-card-program:has(:focus-visible) {
	outline-color: var(--wp--preset--color--white);
}

/*
 * Reveal: in each card's body group everything after the title is folded (height 0)
 * and opens when the card is active (theme.js), hovered or focused. Touch screens,
 * narrow screens and reduced motion always show the text.
 */
.is-style-pillar-band-reveal .is-style-card-program {
	min-height: 25rem;
}
.is-style-pillar-band-reveal .is-style-card-program :is(h2, h3) {
	font-size: var(--wp--custom--font-size--pillar);
}
.is-style-pillar-band-reveal .is-style-card-program > .wp-block-group > :not(:first-child) {
	max-height: 0;
	margin-block-start: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		max-height 420ms var(--wp--custom--motion--ease-entrance),
		margin 420ms var(--wp--custom--motion--ease-entrance),
		opacity 320ms ease;
}
.is-style-pillar-band-reveal .is-style-card-program:is(.is-active, :hover, :focus-within) > .wp-block-group > :not(:first-child) {
	max-height: 30rem;
	margin-block-start: var(--wp--preset--spacing--s);
	opacity: 1;
}
@media (hover: none), (max-width: 781px), (prefers-reduced-motion: reduce) {
	.is-style-pillar-band-reveal .is-style-card-program > .wp-block-group > :not(:first-child) {
		max-height: none;
		margin-block-start: var(--wp--preset--spacing--s);
		opacity: 1;
	}
}