/*
 * Package card. design/DESIGN-SYSTEM.md §4.6, grid §3.4, hover §6.1.
 *
 * A packaged offer (oslavy, firmy, liga, koučing) rendered as a card: red tag,
 * title, body copy, optional bullet list, price footer pinned to the bottom.
 *
 * The whole card is a link target: the title carries the anchor and a stretched
 * ::after covers the card, so the hit area is the card while the accessible name
 * stays the title alone.
 *
 * .sp-package-grid keeps the §3.4 package pattern (260px floor, small gap). Four
 * packages are meant to resolve to four columns, so there is no 3-column cap
 * here -- auto-fit already caps the track count at the number of cards.
 */

.sp-package-grid {
	display: grid;
	gap: var(--sp-grid-gap-sm);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sp-package {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	background: var(--sp-surface);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	padding: var(--sp-10);
	transition:
		border-color var(--sp-dur-fast) var(--sp-ease),
		transform var(--sp-dur-base) var(--sp-ease);
}

.sp-package:hover,
.sp-package:focus-within {
	border-color: var(--sp-line-hover);
	transform: translateY(-4px);
}

.sp-package__tag {
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-red);
}

.sp-package__title {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: 24px; /* TODO token: --sp-fs-package-title, DESIGN-SYSTEM §1.2 "Package-card h3" */
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

/* Title stays white; the card border is what reacts to hover. */
.sp-package__link {
	color: inherit;
}

.sp-package__link:hover,
.sp-package__link:focus {
	color: var(--sp-text);
}

.sp-package__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sp-package__text {
	margin: 0;
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

.sp-package__bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

/* The design's bullet is the skewed red marker, not a disc (§4.22). */
.sp-package__bullet {
	position: relative;
	margin: 0;
	padding-left: var(--sp-7);
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
}

.sp-package__bullet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 10px;
	height: 10px;
	background: var(--sp-red);
	transform: var(--sp-skew);
}

.sp-package__price {
	margin-top: auto;
	padding-top: var(--sp-4);
	border-top: var(--sp-border);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: var(--sp-fs-2xl);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}