/**
 * Переиспользуемые компоненты: кнопки, теги, карточки, поля форм.
 */

.ls-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ls-space-2xs);
	padding: var(--ls-space-sm) var(--ls-space-lg);
	border-radius: var(--ls-radius-md);
	border: 1px solid var(--ls-color-ink);
	background: var(--ls-color-ink);
	color: var(--ls-color-ink-contrast);
	font-size: var(--ls-fs-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--ls-dur-base) var(--ls-ease),
		color var(--ls-dur-base) var(--ls-ease),
		border-color var(--ls-dur-base) var(--ls-ease);
}

.ls-btn:hover, .ls-btn:focus-visible {
	background: var(--ls-color-accent);
	border-color: var(--ls-color-accent);
	color: var(--ls-color-accent-contrast);
}

.ls-btn--ghost {
	background: transparent;
	color: var(--ls-color-ink);
}

.ls-btn--ghost:hover, .ls-btn--ghost:focus-visible {
	background: var(--ls-color-ink);
	color: var(--ls-color-ink-contrast);
	border-color: var(--ls-color-ink);
}

.ls-archive-head {
	padding-block: var(--ls-space-xl) var(--ls-space-lg);
	max-width: 42rem;
}

/* Заголовок архивной страницы — крупный, но не в масштабе hero (тот держим
   только для главного экрана, иначе "Портфолио"/"Блог"/"Магазин" выглядят
   как случайно забытый hero без картинки и подзаголовка). */
.ls-archive-head h1 {
	font-size: var(--ls-fs-h1);
}

/* .pagination — WP the_posts_pagination(); .woocommerce-pagination — WooCommerce
   пагинация в магазине. Разная обёртка, один и тот же .page-numbers внутри. */
.pagination .nav-links,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-2xs);
	margin-top: var(--ls-space-lg);
	list-style: none;
	padding: 0;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border: 1px solid var(--ls-color-line);
	padding-inline: var(--ls-space-xs);
}

.page-numbers.current {
	background: var(--ls-color-ink);
	color: var(--ls-color-ink-contrast);
	border-color: var(--ls-color-ink);
}

.page-numbers:hover,
.page-numbers:focus-visible {
	border-color: var(--ls-color-accent);
	color: var(--ls-color-accent);
}

.page-numbers.current:hover { color: var(--ls-color-ink-contrast); }

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	border-color: var(--ls-color-accent);
	color: var(--ls-color-accent);
}

.pagination .page-numbers.current:hover { color: var(--ls-color-ink-contrast); }

.ls-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ls-space-md);
	margin-bottom: var(--ls-space-xl);
}

.ls-tag {
	display: inline-flex;
	align-items: center;
	padding: var(--ls-space-3xs) var(--ls-space-xs);
	border: 1px solid var(--ls-color-line);
	border-radius: var(--ls-radius-sm);
	font-size: var(--ls-fs-small);
	color: var(--ls-color-muted);
	transition: border-color var(--ls-dur-fast) var(--ls-ease), color var(--ls-dur-fast) var(--ls-ease);
}

a.ls-tag:hover, a.ls-tag:focus-visible, .ls-tag[aria-current="true"] {
	border-color: var(--ls-color-accent);
	color: var(--ls-color-accent);
}

.ls-card {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-sm);
}

.ls-card__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ls-color-line);
}

.ls-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ls-dur-slow) var(--ls-ease);
}

.ls-card:hover .ls-card__media img, .ls-card:focus-within .ls-card__media img {
	transform: scale(1.03);
}

.ls-card__title {
	font-size: var(--ls-fs-h3);
}

.ls-card__meta {
	color: var(--ls-color-muted);
	font-size: var(--ls-fs-small);
}

.ls-field {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-3xs);
	margin-block-end: var(--ls-space-md);
}

.ls-field label {
	font-size: var(--ls-fs-small);
	color: var(--ls-color-muted);
}

.ls-field input,
.ls-field select,
.ls-field textarea {
	padding: var(--ls-space-xs) var(--ls-space-sm);
	border: 1px solid var(--ls-color-line);
	border-radius: var(--ls-radius-md);
	background: var(--ls-color-surface);
	color: var(--ls-color-ink);
	transition: border-color var(--ls-dur-fast) var(--ls-ease);
}

.ls-field input:focus-visible,
.ls-field select:focus-visible,
.ls-field textarea:focus-visible {
	outline: 2px solid var(--ls-color-accent);
	outline-offset: 2px;
}

.ls-field--error input, .ls-field--error textarea {
	border-color: var(--ls-color-accent);
}

.ls-field__error {
	color: var(--ls-color-accent);
	font-size: var(--ls-fs-small);
}

.ls-field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ls-space-2xs);
}

.ls-field--checkbox input { margin-block-start: 0.2em; }

.ls-404 {
	padding-block: var(--ls-space-3xl);
	text-align: center;
	max-width: 36rem;
	margin-inline: auto;
}

.ls-404__code {
	font-family: var(--ls-font-display);
	font-size: var(--ls-fs-display);
	color: var(--ls-color-line);
	margin-bottom: var(--ls-space-sm);
}

.ls-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ls-space-sm);
	margin-block: var(--ls-space-lg);
}

.ls-404__search { margin-top: var(--ls-space-xl); }

.ls-search-form {
	display: flex;
	gap: var(--ls-space-2xs);
	max-width: 28rem;
	margin-inline: auto;
}

.ls-search-form__field {
	flex: 1;
	padding: var(--ls-space-xs) var(--ls-space-sm);
	border: 1px solid var(--ls-color-line);
	border-radius: var(--ls-radius-md);
	background: var(--ls-color-surface);
	color: var(--ls-color-ink);
}

/* Сдержанное появление секций при скролле (assets/js/reveal.js) */
[data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--ls-dur-slow) var(--ls-ease), transform var(--ls-dur-slow) var(--ls-ease);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
	}
}