/*
 * Курсові тарифи.
 *
 * Three cards a reader compares across, so every row lines up: the features are
 * a fixed list in a fixed order, and a plan that lacks one shows it struck out
 * rather than leaving a gap the eye has to account for.
 */

.sx-course-plans {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 20px;
	margin: var( --wp--preset--spacing--40 ) 0;
}

.sx-course-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 30px 26px 26px;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	transition:
		box-shadow var( --sx-transition-base ) var( --sx-ease ),
		transform var( --sx-transition-base ) var( --sx-ease );
}

@media ( hover: hover ) {
	.sx-course-plan:hover {
		transform: translateY( -3px );
		box-shadow: 0 12px 28px color-mix( in srgb, var( --sx-text ) 9%, transparent );
	}
}

.sx-course-plan.is-popular {
	/* Room for the ribbon, which sits on the top edge. */
	padding-top: 46px;
	border-color: var( --sx-brand );
	box-shadow: 0 6px 18px color-mix( in srgb, var( --sx-brand ) 14%, transparent );
	overflow: hidden;
}

.sx-course-plan__ribbon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 6px 12px;
	background: var( --sx-brand );
	color: var( --sx-white );
	font-family: var( --wp--preset--font-family--manrope, inherit );
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
}

.sx-course-plan__name {
	margin: 0 0 12px;
	font-size: 1.3rem;
	line-height: 1.2;
}

.sx-course-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 20px;
}

/* The saving is the argument, so the old figure stays legible rather than
   being reduced to a grey smudge. */
.sx-course-plan__old {
	color: var( --sx-text-muted );
	font-size: 1rem;
	text-decoration: line-through;
}

.sx-course-plan__now {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.sx-course-plan__features {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.sx-course-plan__features li {
	display: grid;
	grid-template-columns: 18px minmax( 0, 1fr );
	gap: 8px;
	font-size: 0.92rem;
	line-height: 1.5;
}

.sx-course-plan__mark {
	color: var( --sx-success );
	font-weight: 700;
}

.sx-course-plan__features li.is-off {
	color: var( --sx-text-muted );
}

.sx-course-plan__features li.is-off .sx-course-plan__mark {
	color: var( --sx-border-strong );
}

.sx-course-plan__row b {
	display: block;
	font-weight: 700;
}

.sx-course-plan__features li.is-off .sx-course-plan__row b {
	font-weight: 400;
	font-style: italic;
}

/* Bottom-aligned so the three buttons agree however long the feature list
   renders in a given language. */
.sx-course-plan__buy {
	margin-top: auto;
	width: 100%;
	padding: 0.8rem 1.25rem;
	border: 0;
	border-radius: var( --sx-radius-btn );
	background: var( --sx-surface );
	color: var( --sx-text );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var( --sx-transition-fast ) var( --sx-ease ), color var( --sx-transition-fast ) var( --sx-ease );
}

.sx-course-plan__buy:hover {
	background: var( --sx-brand-50 );
	color: var( --sx-brand-text );
}

.sx-course-plan.is-popular .sx-course-plan__buy {
	background: var( --sx-brand );
	color: var( --sx-white );
}

.sx-course-plan.is-popular .sx-course-plan__buy:hover {
	background: var( --sx-brand-hover );
	color: var( --sx-white );
}

.sx-course-plan__buy.is-added {
	background: var( --sx-success );
	color: var( --sx-white );
}

@media ( max-width: 900px ) {
	.sx-course-plans {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * The grid follows how many places a course actually sells. A single card left
 * in a three-column track sat in the left third with two empty columns beside
 * it, which reads as something that failed to load rather than as a course sold
 * one way — so the track is set from the count, and a lone card takes a card's
 * width instead of a column's.
 */
.sx-course-plans[data-count="1"] {
	grid-template-columns: minmax( 0, 380px );
}

.sx-course-plans[data-count="2"] {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}