/*
 * Дополнения, которых не было в Laravel-версии: элементы, которые появляются
 * только в WordPress (пагинация the_posts_pagination, служебные классы),
 * плюс ловушка для ботов в форме отзыва.
 *
 * assets/css/app.css — точная копия исходного resources/css/app.css, поэтому
 * всё новое живёт здесь.
 */

/* Ловушка для ботов: настоящий посетитель это поле не видит. */
.form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Пагинация WordPress в стиле остальной вёрстки. */
.navigation.pagination {
	width: 100%;
	margin-top: 1.5rem;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .5rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: .5rem;
	font-size: 1rem;
	text-decoration: none;
	color: inherit;
}

.navigation.pagination .page-numbers.current {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--white-color);
}

.navigation.pagination .screen-reader-text {
	display: none;
}

/* Служебный класс WordPress для скрытых подписей. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Экран «Ваш отзыв принят!». */
.success-message {
	margin-bottom: 2rem;
}

/* Хлебные крошки Rank Math. */
.rank-math-breadcrumb {
	width: 100%;
	margin-bottom: 1rem;
	font-size: .8rem;
	font-weight: 300;
}

.rank-math-breadcrumb a {
	color: inherit;
}

/*
 * Сетка медиа: «Галерея», посты «Ленты», карточки отзывов.
 *
 * Первое правило общее и лечит причину искажения пропорций: WordPress печатает
 * у картинки атрибуты width/height, а `img { max-width: 100% }` из app.css
 * ужимает только ширину — высота остаётся из атрибута, и картинка растягивается
 * по вертикали. В Laravel-версии этих атрибутов не было, поэтому проблема
 * появилась вместе с переносом.
 *
 * Дальше — сама сетка. В app.css число колонок фиксировано (3 фото, 2 видео),
 * а высота плитки не задана, поэтому ряд растягивался по самой высокой
 * картинке и список выглядел рваным. Здесь колонки подстраиваются под ширину
 * колонки контента, а плитки одинаковые: кадрирование по центру для фото,
 * вписывание в чёрное поле для видео (кадр видео резать нельзя).
 */
img {
	height: auto;
}

.feed_photos {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: .75rem;
}

.feed__photo {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: .5rem;
	background-color: rgba(0, 0, 0, .04);
}

.feed__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.feed__photo:hover img {
	transform: scale(1.05);
}

.feed_videos {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: .75rem;
}

.feed_videos video {
	aspect-ratio: 16 / 9;
	object-fit: contain;
	border-radius: .5rem;
	background-color: #000;
}

@media screen and (max-width: 575.98px) {
	.feed_photos {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	.feed_videos {
		grid-template-columns: 1fr;
	}
}

/* Контакты в подвале: страница «Контакты» скрыта, телефон и почта живут здесь. */
.site-footer-links {
	margin-bottom: .5rem;
	font-size: 1rem;
}

.site-footer-link-item:last-child {
	margin-right: 0;
}

/* Админ-бар не должен наезжать на фиксированный сайдбар. */
body.admin-bar .sidebar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .sidebar {
		top: 46px;
	}
}