/*
 * Pricing plan card. design/DESIGN-SYSTEM.md §4.3, badge §4.19, hover §6.1.
 *
 * A Pricing Plan rendered as a card: wordmark, duration, swoosh rule, struck
 * old price, price, per-rider label, CTA. Used by the home teaser and by the
 * Cennik page, so nothing here is home-specific.
 *
 * .sp-plan-grid caps the track count at 3 (§3.6) while keeping the 280px
 * minmax() floor from §3.4.
 */

.sp-plan-grid {
	display: grid;
	gap: var(--sp-grid-gap);
	align-items: start;
	grid-template-columns: repeat(
		auto-fit,
		minmax(max(280px, (100% - 2 * var(--sp-grid-gap)) / 3), 1fr)
	);
}

.sp-plan {
	position: relative;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: clamp(26px, 3vw, 40px) 28px;
	text-align: center;
	transition: transform var(--sp-dur-base) var(--sp-ease);
}

.sp-plan:hover,
.sp-plan:focus-within {
	transform: translateY(-6px);
}

.sp-plan--featured {
	border-color: var(--sp-red);
}

/* Sits flush into the corner -- no offset, no radius. */
.sp-plan__badge {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px var(--sp-5);
	background: var(--sp-red);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-sm);
	letter-spacing: var(--sp-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-plan__logo {
	display: block;
	width: 170px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.sp-plan__duration {
	margin-top: var(--sp-6);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(38px, 4.4vw, 58px);
	line-height: var(--sp-lh-display);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-plan__unit {
	margin-left: 6px;
	font-size: 0.45em;
	font-weight: 800;
}

.sp-plan__swoosh {
	display: block;
	width: 136px;
	max-width: 70%;
	height: auto;
	margin: var(--sp-7) auto;
	color: var(--sp-grey-rule);
}

.sp-plan__old {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: var(--sp-fs-xl);
	text-decoration: line-through;
	color: var(--sp-text-40);
}

.sp-plan__price {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(34px, 4vw, 52px);
	line-height: var(--sp-lh-tight);
	color: var(--sp-red);
}

.sp-plan__per {
	font-size: var(--sp-fs-xs);
	letter-spacing: var(--sp-ls-eyebrow-lg);
	text-transform: uppercase;
	color: var(--sp-text-50);
}

/*
 * The CTA is an outline-red button in both states -- the border is always red,
 * only the fill changes. The booking bridge stamps .sp-btn--primary on every
 * button it renders, so the primary lift/glow is cancelled here (§4.3 defines
 * a background transition and nothing else).
 */
.sp-plan__cta {
	width: 100%;
	margin-top: var(--sp-10);
}

.sp-plan__cta:hover,
.sp-plan__cta:focus-visible {
	transform: none;
	box-shadow: none;
	background: var(--sp-red);
}

.sp-plan__cta--featured {
	background: var(--sp-red);
}

/*
 * The line under the cards.
 *
 * Three cards say what three lengths cost; this says the thing they cannot --
 * that a ride is any length on the ladder, in the venue's own step, and what
 * each further step adds. It belongs to the card component rather than to a
 * page, because both surfaces that draw the cards draw it: the Cenník prints it
 * with the VAT statement beside it, the home teaser prints it alone, and both
 * use this one class. One sentence, one name.
 */
.sp-plan-notes {
	margin-top: var(--sp-5);
	text-align: center;
}

.sp-plan-note {
	margin: 0;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-55);
}

.sp-plan-note + .sp-plan-note {
	margin-top: var(--sp-1);
}