/*
 * Cenník page glue. design/PAGE-STRUCTURE.md §4, DESIGN-SYSTEM.md §3.3.
 *
 * Everything reusable is a component: sp-plan (plan-card.css, shared with the
 * home page and used here EXACTLY as it is), sp-perk (pricing-perks.css),
 * sp-package (package-card.css), sp-voucher* (voucher.css). What is left here is
 * the three-section rhythm the Cenník alone has.
 *
 * No @media queries: every step is clamp() and every grid is auto-fit.
 */

/* --------------------------------------------- 1. plans + perk strip */

/*
 * The promo heading has its own step in the type scale -- it is the one heading
 * in the design set below the standard section h2 (DESIGN-SYSTEM §1.2, "Promo
 * heading"). It is also this page's <h1>.
 */
.sp-pricing-plans .sp-heading__title {
	/* TODO token: --sp-fs-h2-promo, DESIGN-SYSTEM §1.2 clamp(24px,3.2vw,46px) */
	font-size: clamp(24px, 3.2vw, 46px);
}

.sp-pricing-plans .sp-perks {
	/* TODO token: --sp-strip-gap, PAGE-STRUCTURE §4.1 clamp(22px,3vw,38px) */
	margin-top: clamp(22px, 3vw, 38px);
}

/*
 * The footnotes under the strip -- the ladder line and the VAT statement -- are
 * `.sp-plan-notes` / `.sp-plan-note`, in components/plan-card.css. They are the
 * same row of small print under the same cards as on the home page, so they are
 * one class in one file rather than the same sentence under two names.
 */

/* -------------------------------------------------- 2. balíky a eventy */

/* §4.2 chip-ghost sits at its own padding; the row only supplies the gap. */
.sp-pricing-packages .sp-row {
	gap: var(--sp-3);
}