/**
 * Shared components.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.35rem;
	font-weight: 600;
	font-size: var(--twp-text-base);
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: var(--twp-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--twp-duration) var(--twp-ease),
		color var(--twp-duration) var(--twp-ease),
		border-color var(--twp-duration) var(--twp-ease),
		transform var(--twp-duration) var(--twp-ease);
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: var(--twp-color-primary);
	color: var(--twp-color-on-primary);
}

.btn--primary:hover {
	background: var(--twp-color-primary-hover);
	color: var(--twp-color-on-primary);
}

.btn--accent {
	background: var(--twp-color-accent);
	color: var(--twp-color-on-accent);
}

.btn--accent:hover {
	background: var(--twp-color-accent-hover);
	color: var(--twp-color-on-accent);
}

.btn--light {
	background: #ffffff;
	color: var(--twp-brand-blue);
}

.btn--light:hover {
	background: #f3f6fb;
	color: var(--twp-brand-blue);
}

.btn--outline {
	background: transparent;
	border-color: var(--twp-color-primary);
	color: var(--twp-color-primary);
}

.btn--outline:hover {
	background: color-mix(in srgb, var(--twp-color-primary) 10%, transparent);
	color: var(--twp-color-primary);
}

.btn--ghost {
	background: var(--twp-color-surface);
	border-color: var(--twp-color-border);
	color: var(--twp-color-fg);
}

.btn--ghost:hover {
	border-color: var(--twp-color-primary);
	color: var(--twp-color-primary);
}

.btn--sm {
	padding: 0.5rem 0.9rem;
	font-size: var(--twp-text-sm);
}

.btn--block {
	width: 100%;
}

.btn--round {
	width: 5.5rem;
	height: 5.5rem;
	padding: 0;
	border-radius: 50%;
	background: var(--twp-color-primary);
	color: var(--twp-color-on-primary);
	font-size: var(--twp-text-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	box-shadow: var(--twp-shadow-md);
}

.btn--round:hover {
	background: var(--twp-color-primary-hover);
	color: var(--twp-color-on-primary);
	transform: scale(1.04);
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--twp-space-xs);
}

/* Forms */
.form {
	display: grid;
	gap: var(--twp-space-md);
}

.form__row {
	display: grid;
	gap: 0.35rem;
}

.form__label {
	font-weight: 600;
	font-size: var(--twp-text-sm);
}

.form__input,
.form__textarea,
.form__select {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--twp-color-border);
	border-radius: var(--twp-radius-sm);
	background: var(--twp-color-surface);
	transition: border-color var(--twp-duration) var(--twp-ease);
}

@media (max-width: 640px) {
	.form__input,
	.form__textarea,
	.form__select {
		font-size: 1rem;
	}

	.btn {
		min-height: 2.75rem;
	}

	.btn--sm {
		min-height: 2.4rem;
	}
}

.form__input:focus,
.form__textarea:focus {
	border-color: var(--twp-color-primary);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--twp-color-primary) 25%, transparent);
}

.form__input.is-invalid,
.form__textarea.is-invalid {
	border-color: var(--twp-color-error);
}

.form__textarea {
	min-height: 8rem;
	resize: vertical;
}

.form__hint {
	font-size: var(--twp-text-sm);
	color: var(--twp-color-muted);
}

.form__error {
	color: var(--twp-color-error);
	font-size: var(--twp-text-sm);
}

.form__honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

.notice {
	padding: var(--twp-space-sm) var(--twp-space-md);
	border-radius: var(--twp-radius-sm);
	border: 1px solid var(--twp-color-border);
	margin-bottom: var(--twp-space-md);
}

.notice--success {
	background: color-mix(in srgb, var(--twp-color-success) 12%, var(--twp-color-surface));
	border-color: var(--twp-color-success);
	color: var(--twp-color-success);
}

.notice--error {
	background: color-mix(in srgb, var(--twp-color-error) 12%, var(--twp-color-surface));
	border-color: var(--twp-color-error);
	color: var(--twp-color-error);
}

/* Pagination */
.pagination,
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--twp-space-xs);
	justify-content: center;
	margin-top: var(--twp-space-xl);
}

.pagination .page-numbers,
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border: 1px solid var(--twp-color-border);
	border-radius: var(--twp-radius-sm);
	background: var(--twp-color-surface);
	color: var(--twp-color-fg);
	text-decoration: none;
	font-weight: 500;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers:hover {
	border-color: var(--twp-color-primary);
	color: var(--twp-color-primary);
}

/* Category chips */
.cat-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--twp-space-xs);
	margin-bottom: var(--twp-space-lg);
}

.cat-filter a {
	display: inline-flex;
	padding: 0.45rem 1rem;
	border: 1px solid var(--twp-color-border);
	border-radius: 999px;
	background: var(--twp-color-surface);
	color: var(--twp-color-fg);
	text-decoration: none;
	font-size: var(--twp-text-sm);
	font-weight: 600;
	transition: border-color var(--twp-duration) var(--twp-ease), color var(--twp-duration) var(--twp-ease), background var(--twp-duration) var(--twp-ease);
}

.cat-filter a:hover,
.cat-filter a.is-active {
	border-color: var(--twp-color-primary);
	background: var(--twp-color-primary);
	color: var(--twp-color-on-primary);
}

/* Empty / 404 */
.empty-state {
	text-align: center;
	padding: var(--twp-space-2xl) var(--twp-space-md);
}

.empty-state p {
	color: var(--twp-color-muted);
	max-width: 28rem;
	margin-inline: auto;
}