/**
 * Options Mastery card in options articles (template-parts/courses/article-course-card.php), and the
 * spacing of the storefront spotlight that takes the promo card's place at their end
 * (inc/courses/course-article-card.php). Loaded after css/course-storefront.css, whose tokens and
 * buttons the card uses, only on articles whose assigned promo is options-course. Served whole
 * (inc/wp-rocket-exclusions.php).
 *
 * Cascade: the card sits inside the article body, so every rule uses two or more classes to outrank
 * course-article.css (.main-content p, .main-content a: 0,1,1) and the kit (.roc-kit a: 0,1,1). Hover
 * and focus use more, to beat .main-content a:hover (0,2,1). Every var() keeps a literal fallback.
 */

.roc-crs.roc-acard {
	display: grid;
	gap: 6px;
	margin: 2rem 0 2.25rem;
	padding: 22px 24px;
	border: 1px solid var(--crs-blue-200, #bfdbfe);
	border-left: 4px solid var(--crs-blue, #2563eb);
	border-radius: 14px;
	background: var(--crs-blue-50, #eff6ff);
	color: var(--crs-text, #0f172a);
}

.roc-crs.roc-acard .roc-acard__title {
	margin: 0;
	color: var(--crs-text, #0f172a);
	font: 700 1.25rem / 1.3 var(--crs-display, "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
	font-variant-numeric: lining-nums;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.roc-crs.roc-acard .roc-acard__facts,
.roc-crs.roc-acard .roc-acard__price {
	margin: 0;
	color: var(--crs-text-2, #334155);
	font: 500 0.9375rem / 1.5 var(--crs-body, "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.roc-crs.roc-acard .roc-acard__price strong {
	color: var(--crs-text, #0f172a);
	font-weight: 800;
	font-variant-numeric: tabular-nums lining-nums;
}

.roc-crs.roc-acard .roc-acard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

/* .main-content a:hover recolours a link's bottom border; the primary button keeps its own */
.roc-crs.roc-acard .roc-crs-btn--primary:hover,
.roc-crs.roc-acard .roc-crs-btn--primary:focus-visible {
	border-color: transparent;
}

@media (max-width: 575.98px) {
	.roc-crs.roc-acard {
		padding: 18px;
	}

	.roc-crs.roc-acard .roc-crs-btn {
		flex: 1 1 100%;
	}
}

/* The storefront spotlight at the end of the article */
.roc-crs.roc-acard-spot {
	padding-block: 8px clamp(40px, 5vw, 64px);
}