/* PMV2 Grid: отдельный файл, чтобы не путаться со style.css темы */

.pmv2-grid-page,
.pmv2-grid-page * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.pmv2-grid-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px;
}

.pmv2-grid-header {
	margin-bottom: 12px;
}

.pmv2-grid-title {
	font-size: 22px;
	line-height: 1.2;
}

.pmv2-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: dense;
}

/* Карточка */
.pmv2-card {
	overflow: hidden;
	background: transparent;
}

.pmv2-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.pmv2-card__thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.pmv2-card__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: translateZ(0);
}

.pmv2-card__noimg {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.06);
}

.pmv2-card__meta {
	padding-top: 8px;
}

.pmv2-card__title {
	font-size: 14px;
	line-height: 1.25;
}

/* “Непропорциональность” — паттерн.
   Самый стабильный способ: расширяем некоторые карточки и делаем им другой ratio.
*/
.pmv2-card:nth-child(10n + 1),
.pmv2-card:nth-child(10n + 6) {
	grid-column: span 2;
}

.pmv2-card:nth-child(10n + 3) {
	grid-row: span 2;
}

.pmv2-card:nth-child(10n + 3) .pmv2-card__thumb {
	aspect-ratio: 3 / 4;
}

.pmv2-card:nth-child(10n + 1) .pmv2-card__thumb,
.pmv2-card:nth-child(10n + 6) .pmv2-card__thumb {
	aspect-ratio: 16 / 9;
}

/* Адаптив */
@media (max-width: 1100px) {
	.pmv2-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.pmv2-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* На мобилке “гиганты” часто бесят — упрощаем */
	.pmv2-card:nth-child(10n + 1),
	.pmv2-card:nth-child(10n + 6),
	.pmv2-card:nth-child(10n + 3) {
		grid-column: span 1;
		grid-row: span 1;
	}

	.pmv2-card:nth-child(10n + 3) .pmv2-card__thumb,
	.pmv2-card:nth-child(10n + 1) .pmv2-card__thumb,
	.pmv2-card:nth-child(10n + 6) .pmv2-card__thumb {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 520px) {
	.pmv2-grid {
		grid-template-columns: 1fr;
	}
}

/* Пагинация */
.pmv2-grid-pagination {
	margin-top: 16px;
}

.pmv2-grid-pagination ul {
	list-style: none;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pmv2-grid-pagination a,
.pmv2-grid-pagination span {
	display: inline-block;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(0,0,0,0.06);
	color: inherit;
	text-decoration: none;
}

.pmv2-grid-pagination .current {
	background: rgba(0,0,0,0.12);
}


/* PMV2 Grid: индикатор "на карточке есть музыка / эффекты" (иконка громкоговорителя, без JS) */
.pmv2-card__thumb {
	position: relative;
}

.pmv2-card__speaker {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;

	width: 48px;
	height: 48px;

	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);

	display: flex;
	align-items: center;
	justify-content: center;

	pointer-events: none;
}

/* 1) Сам динамик БЕЗ волн (чистый) */
.pmv2-card__speaker::before {
	content: "";
	display: block;

	width: 46px;
	height: 46px;

	background: currentColor;
	color: #fff;

	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4h4l5 5V5L7 10H3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4h4l5 5V5L7 10H3z'/%3E%3C/svg%3E") center / contain no-repeat;
}




/* PMV2 Grid: две звуковые кавычки — внутренняя мощная + внешняя тонкая */
.pmv2-card__speaker::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;

	/* финальный правильный угол */
	transform: translate(-2px, -50%) rotate(40deg);
	width: 22px;
	height: 22px;

	/* внутренняя, мощная кавычка */
	border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-top: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;

	/* внешняя, тонкая кавычка — ВНЕ, а не внутрь */
	opacity: 0.9;
	animation: pmv2-speaker-wave 1.5s ease-out infinite;
}

@keyframes pmv2-speaker-wave {
	0% {
		transform: translate(-2px, -50%) rotate(40deg) scale(0.75);
		border-right-width: 2px;
		border-top-width: 2px;
		opacity: 0.4;
	}

	50% {
		border-right-width: 4px;
		border-top-width: 4px;
		opacity: 0.9;
	}

	100% {
		transform: translate(-2px, -50%) rotate(40deg) scale(1.25);
		border-right-width: 2px;
		border-top-width: 2px;
		opacity: 0;
	}
}

/* PMV2 Grid: индикатор "на карточке есть музыка / эффекты" (иконка громкоговорителя, без JS) */


/* МЕНЮ на странице ИМЕНА */
/* Обёртка двух колонок */
.names-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}

/* Колонка */
.names-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Заголовки */
.names-column h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

/* Список */
.names-list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* ССЫЛКА-КНОПКА */
.names-list li a {
  display: block;
  padding: 10px 8px;

  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;

  color: #222;
  background-color: #fff;

  border: 1px solid #e0e0e0;
  border-radius: 8px;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease;
}

/* Hover (десктоп) */
.names-list li a:hover {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
}

/* Active (тап на мобилке) */
.names-list li a:active {
  background-color: #ededed;
  border-color: #bcbcbc;
  transform: translateY(1px);
}

/* Фокус с клавиатуры */
.names-list li a:focus-visible {
  outline: none;
  border-color: #999;
}
/* Центрируем надписи "Мужские имена"  "Женские имена" */
.names-column h4 {
  text-align: center;
}
/* МЕНЮ на странице ИМЕНА */