/**
 * Layout: Cards — Icon / Numbered / Ruled list.
 *
 * Grid: 1 column → 2 (≥640) → --gm-cols (≥1024; 5 columns drop to 3 below
 * 1280 so copy never squeezes). Card radius and fills reuse the numbers
 * section tokens; hover = soft purple wash, no layout shift.
 *
 * @package GagaMuller
 */

.gm-cards__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gm-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.gm-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.gm-cards__grid {
		grid-template-columns: repeat(min(var(--gm-cols, 4), 3), minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.gm-cards__grid {
		grid-template-columns: repeat(var(--gm-cols, 4), minmax(0, 1fr));
	}
}

.gm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gm-space-12);
	padding: var(--gm-space-28);
	border: 1.5px solid transparent;
	border-radius: var(--gm-radius-card);
	background: var(--gm-color-white);
	color: var(--gm-color-black);
	transition:
		background-color 350ms var(--gm-ease),
		border-color 350ms var(--gm-ease),
		box-shadow 350ms var(--gm-ease),
		transform 350ms var(--gm-ease);
}

.gm-surface--light .gm-card {
	background: var(--gm-color-surface-subtle);
}

.gm-surface--inverse .gm-card {
	background: var(--gm-color-nav-pill);
	color: var(--gm-color-white);
}

.gm-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: var(--gm-space-8);
	border-radius: var(--gm-radius-round);
	background: var(--gm-color-purple);
	color: var(--gm-color-white);
}

.gm-card__icon .gm-icon {
	width: 24px;
	height: 24px;
}

.gm-card__num {
	color: var(--gm-color-purple);
	font-family: var(--gm-font-heading);
	font-size: var(--gm-text-caption);
	font-weight: var(--gm-weight-bold);
	letter-spacing: 0.06em;
}

.gm-surface--inverse .gm-card__num {
	color: var(--gm-color-light-purple);
}

.gm-card__title {
	margin: 0;
	font-family: var(--gm-font-heading);
	font-size: var(--gm-text-h3);
	font-weight: var(--gm-weight-bold);
	line-height: 1.15;
}

.gm-card__text {
	margin: 0;
	color: var(--gm-text-tertiary);
	font-size: var(--gm-text-body);
	line-height: var(--gm-leading-body);
}

.gm-surface--inverse .gm-card__text {
	color: var(--gm-color-on-dark-muted);
}

.gm-card__more {
	margin-top: auto;
	padding-top: var(--gm-space-12);
	color: var(--gm-color-purple);
	font-size: var(--gm-text-sm);
	font-weight: var(--gm-weight-bold);
}

.gm-surface--inverse .gm-card__more {
	color: var(--gm-color-light-purple);
}

.gm-card__arrow {
	display: inline-block;
	transition: transform 300ms var(--gm-ease);
}

/* Linked card: the title link covers the card. */
.gm-card .gm-card__link,
.gm-card .gm-card__link:visited,
.gm-card .gm-card__link:hover,
.gm-card .gm-card__link:focus {
	color: inherit;
	text-decoration: none;
}

.gm-card__link::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	content: "";
}

.gm-card__link:focus-visible {
	outline: none;
}

.gm-card:has(.gm-card__link:focus-visible) {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: var(--gm-focus-offset);
}

@media (hover: hover) {
	.gm-card:hover {
		border-color: rgb(114 21 244 / 0.3);
		background: color-mix(in srgb, var(--gm-color-purple) 7%, var(--gm-color-white));
		box-shadow: 0 16px 36px -22px rgb(114 21 244 / 0.55);
		transform: translateY(-3px);
	}

	.gm-surface--inverse .gm-card:hover {
		background: color-mix(in srgb, var(--gm-color-purple) 28%, var(--gm-color-nav-pill));
	}

	.gm-card--linked:hover .gm-card__arrow {
		transform: translateX(4px);
	}
}

/* Highlighted first card (Specialist Services). */
.gm-card--featured,
.gm-surface--light .gm-card--featured,
.gm-surface--subtle .gm-card--featured {
	background: var(--gm-color-black);
	color: var(--gm-color-white);
}

.gm-card--featured .gm-card__text {
	color: var(--gm-color-on-dark-muted);
}

.gm-card--featured .gm-card__more,
.gm-card--featured .gm-card__num {
	color: var(--gm-color-light-purple);
}

/* ---- Numbered cards: compact, the number leads -------------------------- */

.gm-cards--number .gm-card {
	gap: var(--gm-space-10);
	padding: var(--gm-space-20) var(--gm-space-24) var(--gm-space-24);
}

.gm-cards--number .gm-card__title {
	font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
}

.gm-cards--number .gm-card__text {
	font-size: var(--gm-text-legal);
}

/* ---- Ruled list: no card, number above a line --------------------------- */

.gm-cards--plain .gm-cards__grid {
	gap: var(--gm-space-40) var(--gm-space-32);
}

.gm-cards--plain .gm-card,
.gm-cards--plain.gm-surface--light .gm-card,
.gm-cards--plain.gm-surface--subtle .gm-card,
.gm-cards--plain.gm-surface--inverse .gm-card {
	padding: var(--gm-space-20) 0 0;
	border: 0;
	border-top: 1px solid var(--gm-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
}

@media (hover: hover) {
	.gm-cards--plain .gm-card:hover,
	.gm-cards--plain.gm-surface--inverse .gm-card:hover {
		background: transparent;
		border-top-color: var(--gm-color-purple);
		box-shadow: none;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-card,
	.gm-card__arrow {
		transition: none;
	}

	.gm-card:hover {
		transform: none;
	}
}