/*
  Component: button.
  Figma: 314:6009 (primary, red) and label-button 281:6757 (ghost / outlined on dark).

  Variants:
    .c-btn--primary  solid red pill, white text (default red CTA)
    .c-btn--ghost    transparent, 1px border, used over imagery
    .c-btn--sm       compact (used inline next to titles)
*/

.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 10px 14px;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--fs-heading-14);
	line-height: var(--lh-heading-14);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.42px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease,
		transform 100ms ease;
}

.c-btn:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

.c-btn:active { transform: translateY(1px); }

/* ---- primary (Figma 314:6009) ---- */
.c-btn--primary {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}
.c-btn--primary:hover,
.c-btn--primary:focus-visible {
	background: #cf2f3c;
	border-color: #cf2f3c;
	color: var(--c-on-accent);
	text-decoration: none;
}

/* ---- ghost (transparent, white border — works on image overlays) ---- */
.c-btn--ghost {
	background: transparent;
	border-color: var(--c-on-accent);
	color: var(--c-on-accent);
}
.c-btn--ghost:hover,
.c-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	text-decoration: none;
}

/* ---- ghost-dark (used on light backgrounds) ---- */
.c-btn--ghost-dark {
	background: transparent;
	border-color: var(--c-fg);
	color: var(--c-fg);
}
.c-btn--ghost-dark:hover {
	background: var(--c-fg);
	color: var(--c-on-accent);
	text-decoration: none;
}

/* ---- size modifier ---- */
.c-btn--sm {
	padding: 6px 10px;
	font-size: 12px;
	line-height: 16px;
}