/**
 * css/components/hover-cards.css — Website 2.0 shared component library (#122)
 *
 * Hover-expand cards ("+" -> "−", pure CSS, no JS). Composes with
 * `.cg-card` inside a `.cg-cardbox--oncream .cg-cardrow--four` grid (The
 * Acquisition Model). Deliberately has NO `.cg-rule` rule-mark — see
 * cardbox.css / docs/Common Good website 2.0/guidelines/layout-rhythm.md
 * ("present on Category-Problem/Why-Our-Media cards, absent on
 * Acquisition-Model cards").
 *
 * Reference: media.html `.acc` / `.plus` / `.ctext`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-card--acc .cg-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.cg-card--acc .cg-plus {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 4px;
}

.cg-card--acc .cg-plus::before,
.cg-card--acc .cg-plus::after {
	content: "";
	position: absolute;
	background: var( --accent );
	transition: transform 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ), opacity 0.3s ease;
}

.cg-card--acc .cg-plus::before {
	left: 0;
	top: 10px;
	width: 22px;
	height: 1.5px;
}

.cg-card--acc .cg-plus::after {
	left: 10px;
	top: 0;
	width: 1.5px;
	height: 22px;
}

.cg-card--acc:hover .cg-plus::after {
	transform: scaleY( 0 );
	opacity: 0;
}

.cg-card--acc .cg-card__text {
	overflow: hidden;
	max-height: 0;
	margin-top: 0;
	opacity: 0;
	transition: max-height 0.5s cubic-bezier( 0.16, 1, 0.3, 1 ), opacity 0.4s ease,
		margin-top 0.5s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.cg-card--acc:hover .cg-card__text {
	max-height: 280px;
	margin-top: 24px;
	opacity: 1;
}