/*
 * Buttons. design/DESIGN-SYSTEM.md §4.1 / §4.2, hover inventory §6.1.
 *
 * Base .sp-btn carries the brand recipe: Barlow 800 italic uppercase, ls .05em,
 * radius 0. Modifiers add fill or border; size modifiers add padding.
 */

.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-9);
	border: 0;
	border-radius: var(--sp-radius);
	background: none;
	color: var(--sp-text);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-btn);
	letter-spacing: var(--sp-ls-btn);
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background var(--sp-dur-fast) var(--sp-ease),
		border-color var(--sp-dur-fast) var(--sp-ease),
		color var(--sp-dur-fast) var(--sp-ease),
		transform var(--sp-dur-fast) var(--sp-ease),
		box-shadow var(--sp-dur-fast) var(--sp-ease);
}

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

/* --------------------------------------------------------- primary (red) */

.sp-btn--primary {
	background: var(--sp-red);
	color: var(--sp-text);
	border: 0;
	padding: var(--sp-5) 32px;
}

.sp-btn--primary:hover,
.sp-btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--sp-shadow-red);
}

/* ------------------------------------------------------ ghost (hero scale) */

.sp-btn--ghost {
	background: none;
	border: var(--sp-border-hero);
	padding: var(--sp-5) 32px;
}

.sp-btn--ghost:hover,
.sp-btn--ghost:focus-visible {
	background: var(--sp-tint-white-8);
}

/* ------------------------------------------- outline chip (arrow-suffixed) */

.sp-btn--outline {
	border: var(--sp-border-ghost);
	background: none;
	font-weight: 700;
	font-size: var(--sp-fs-md);
	letter-spacing: 0;
	padding: var(--sp-4) var(--sp-9);
}

.sp-btn--outline:hover,
.sp-btn--outline:focus-visible {
	border-color: var(--sp-red);
	background: var(--sp-tint-red-10);
}

/* ----------------------------------------- outline-red (pricing card CTA) */

.sp-btn--outline-red {
	border: 1px solid var(--sp-red);
	background: transparent;
	padding: var(--sp-4) var(--sp-7);
}

.sp-btn--outline-red:hover,
.sp-btn--outline-red:focus-visible {
	background: var(--sp-red);
}

/* -------------------------------------------------- angled CTA-band variant */

.sp-btn--slant {
	clip-path: var(--sp-clip-cta);
}

/* ------------------------------------------------------------------ sizes */

.sp-btn--hero {
	font-size: var(--sp-fs-btn-hero);
	padding: var(--sp-6) 36px;
}

.sp-btn--band {
	font-size: var(--sp-fs-btn-band);
	padding: clamp(12px, 1.3vw, 22px) clamp(28px, 3vw, 56px);
}

.sp-btn--sm {
	font-size: var(--sp-fs-md);
	letter-spacing: var(--sp-ls-pill);
	padding: var(--sp-3) var(--sp-10);
}

.sp-btn--block {
	display: flex;
	width: 100%;
}

/* -------------------------------------------------------------- disabled */

.sp-btn[disabled],
.sp-btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .6;
	transform: none;
	box-shadow: none;
}

.sp-btn--primary[disabled],
.sp-btn--primary[aria-disabled="true"] {
	background: var(--sp-red-disabled);
}