/* 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;
}

/* =========================================================
   PMV2 Grid — шахматный паттерн больших карточек
   ========================================================= */

/* Большая №1 — слева (колонки 1–2) */
.pmv2-card:nth-child(10n + 1) {
	grid-column: 1 / span 2;
}

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

/* Большая №2 — СПРАВА (колонки 3–4) */
.pmv2-card:nth-child(10n + 6) {
	grid-column: 3 / span 2;
}

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

/* Вертикальный акцент (по желанию, как было) */
.pmv2-card:nth-child(10n + 3) {
	grid-row: span 2;
}

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

/* Адаптив */
@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 — ИНДИКАТОР ЗВУКА (ЦЕНТР, КРУПНЫЙ)
   ========================================================= */

.pmv2-card__thumb {
	position: relative;
}

/* контейнер индикатора */
.pmv2-card__speaker {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(3);
	transform-origin: center;

	z-index: 3;

	width: 48px;
	height: 48px;

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

	display: flex;
	align-items: center;
	justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.85);
	pointer-events: none;
}

/* сам динамик */
.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-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);
		opacity: 0.4;
	}

	50% {
		opacity: 0.9;
	}

	100% {
		transform: translate(-2px, -50%) rotate(40deg) scale(1.25);
		opacity: 0;
	}
}
/* =========================================================
   PMV2 Grid — ИНДИКАТОР ЗВУКА (ЦЕНТР, КРУПНЫЙ)
   ========================================================= */


/* МЕНЮ на странице ИМЕНА */
/* Обёртка двух колонок */
.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;
}
/* МЕНЮ на странице ИМЕНА */




/* =========================================================
   Блок статей (вверху главной страницы) и сетка GRID
   ========================================================= */

/* H1 страницы — главный, визуально старший */
.pmv2-page-title {
	font-size: 25px;
	line-height: 1.25;
	margin: 0;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Заголовки секций (H2) */
.pmv2-section-title {
	font-size: 22px;              /* МЕНЬШЕ H1 */
	line-height: 1.3;
	margin-bottom: 16px;
}

/* Первый H2 ("Проза жизни") */
.pmv2-section-title--articles {
	margin-top: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* БОРДЕР МЕЖДУ H2 И СТАТЬЯМИ */
}

/* Статейный блок — завершение раздела */
.pmv2-articles {
	padding-top: 24px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Второй H2 ("Самые популярные открытки") */
.pmv2-section-title--grid {
	margin-top: 0;
}

/* группа одной рубрики */
.pmv2-articles-group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 20px;
	align-items: stretch;
}

/* карточка статьи */
.pmv2-article-card {
	position: relative;
	height: 100%;
	overflow: hidden;
}

/* контейнер картинки */
.pmv2-article-thumb {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f9f9f9;
}

/* картинка */
.pmv2-article-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* бейдж рубрики */
.pmv2-article-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	padding: 0.55rem 0.5rem;
	font-size: 15px;
	line-height: 1;
	background: rgba(58, 114, 211, 1);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	white-space: nowrap;
}

/* заголовок поверх картинки */
.pmv2-article-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 10px 12px;
	font-size: 17px;
	line-height: 1.3;
	color: #fff;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.8),
		rgba(0, 0, 0, 0)
	);
}

.pmv2-article-media,
.pmv2-article-titlelink {
	display: block;
	text-decoration: none;
	color: #ffffff;
}

.pmv2-article-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============= MOBILE ============= */

@media (max-width: 768px) {

	/* H1 */
	.pmv2-page-title {
		font-size: 24px;
		padding-bottom: 20px;
	}

	/* H2 */
	.pmv2-section-title {
		font-size: 20px;
	}

	/* одна статья на рубрику */
	.pmv2-articles-group {
		grid-template-columns: 1fr;
	}

	.pmv2-articles-group .pmv2-article-card:nth-child(n+2) {
		display: none;
	}

	.pmv2-article-thumb {
		aspect-ratio: 1 / 1;
	}

	.pmv2-article-title {
		font-size: 19px;
		padding: 12px;
	}
}

/* =========================================================
   Блок статей (вверху главной страницы) и сетка GRID 
   ========================================================= */

/* Grid / Category: убираем auto-стили theme.json */
.pmv2-grid-page .hentry {
	box-shadow: none;
	padding: 0;
	background: transparent;
}








/* =========================================================
   PMV2 AUDIO SHARE
   Плеер + Поиск + Share
   ВСЁ стабильно, без перекосов и плясок
   ========================================================= */

.pmv2-audio-share {
	width: 100%;
	margin: 5px 0;
	box-sizing: border-box;
}

.pmv2-audio-share__top {
	display: grid;
	grid-template-columns: minmax(0, calc(100% - 88px)) 40px 40px;
	gap: 14px; /* +4px между кнопками */
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding-right: 8px; /* 🔥 сдвиг кнопок ВЛЕВО */
}

/* Плеер */
.pmv2-audio-share__player {
	min-width: 0;
	overflow: hidden;
	padding-right: 0; /* ❗ убираем лишний зазор */
}

/* Чтоы кнопки "поиск" и "поделится" не сжимались */
.pmv2-audio-share__search,
.pmv2-audio-share__toggle {
	flex-shrink: 0; /* чтобы НИКОГДА не сжимались */
}

.pmv2-audio-share__player .wp-audio-shortcode,
.pmv2-audio-share__player audio {
	width: 100%;
	max-width: 100%;
	display: block;
	box-sizing: border-box;
}

/* =======================
   КНОПКА ПОИСКА
   ======================= */

.pmv2-audio-share__search {
	appearance: none;
	width: 45px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 1px solid #000;
	background: rgba(0,0,0,0.08);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.pmv2-audio-share__search:hover {
	background: rgba(0,0,0,0.14);
}

.pmv2-audio-share__search svg {
	width: 32px;
	height: 32px;
	display: block;
	color: #000;
}

.pmv2-audio-share__search svg * {
	vector-effect: non-scaling-stroke;
}

/* =======================
   КНОПКА SHARE
   ======================= */

.pmv2-audio-share__toggle {
	appearance: none;
	width: 45px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 1px solid #000;
	background: rgba(0,0,0,0.08);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.pmv2-audio-share__toggle:hover {
	background: rgba(0,0,0,0.14);
}

.pmv2-audio-share__toggle svg {
	width: 35px;
	height: 35px;
	display: block;
}

.pmv2-audio-share__toggle svg * {
	vector-effect: non-scaling-stroke;
}

/* =======================
   ПАНЕЛЬ SHARE
   ======================= */

.pmv2-audio-share__panel {
	margin-top: 10px;
	width: 100%;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 8px 30px rgba(0,0,0,.12);
	padding: 12px;
	box-sizing: border-box;
}

/* Кнопка "Копировать ссылку" */
.pmv2-audio-share__copy {
	width: 100%;
	display: block;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: rgba(0,0,0,0.08);
	cursor: pointer;
	text-align: center;
	box-sizing: border-box;
}

/* Соцсети */
.pmv2-audio-share__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	width: 100%;
	box-sizing: border-box;
}

.pmv2-audio-share__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* =======================
   МОБИЛКА
   ======================= */

@media (max-width: 768px) {
	.pmv2-audio-share__top {
		grid-template-columns: 1fr 40px 40px;
		gap: 8px;
		padding-right: 0; /* 🔥 сдвиг кнопок ВЛЕВО */
	}

	.pmv2-audio-share__search,
	.pmv2-audio-share__toggle {
		width: 40px;
		height: 38px;
		border-width: 2px;
	}

	.pmv2-audio-share__search svg {
		width: 31px;
		height: 31px;
	}
}
/* =========================================================
   PMV2 AUDIO SHARE
   Плеер + Поиск + Share
   ВСЁ стабильно, без перекосов и плясок
   ========================================================= */







/* ==  Настройки Prev - Next == */
.nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0px;
	background: #fff;
	padding: 5px;
	margin: 24px 0;
}
.nav-title {
	font-size: 14px;
	line-height: 1.4;
	color: #000000;
}





/* ==========================================================================
   SEO ACCORDION (PMV2) — NO JS
   --------------------------------------------------------------------------
   Важно: в закрытом <details> виден только <summary>, поэтому тизер текста
   находится в summary, а полный текст — в .pmv2-seo-accordion__content.
   ========================================================================== */
.pmv2-seo-accordion {

	/* высота ярлыка — меняется только здесь */
	--tab-height: 30px;
	position: relative;
	margin-top: 20px;
    margin-bottom: 50px;
	border: 1px solid #d7d7d7;
	border-radius: 10px;
	background: #fff;
	padding: 14px 16px calc(var(--tab-height) + 12px);
	/* важно — чтобы ярлык мог свисать */
	overflow: visible;
}

/* скрываем checkbox */
.pmv2-seo-accordion__check {
	display: none;
}

/* --------------------------------------------------------------------------
   CONTENT
   -------------------------------------------------------------------------- */

.pmv2-seo-accordion__content {
	font-size: 15px;
	line-height: 1.6;
	color: #333;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* количество строк */
	overflow: hidden;
	position: relative;
}

/* градиент в закрытом состоянии */
.pmv2-seo-accordion__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 35px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 90%);
}

/* открыто — показываем всё */
.pmv2-seo-accordion__check:checked ~ .pmv2-seo-accordion__content {
	display: block;
}

.pmv2-seo-accordion__check:checked ~ .pmv2-seo-accordion__content::after {
	display: none;
}

/* --------------------------------------------------------------------------
   TAB (СВИСАЮЩИЙ ЯРЛЫК)
   -------------------------------------------------------------------------- */

.pmv2-seo-accordion__tab {
	position: absolute;
	left: 50%;
	bottom: calc(-1 * var(--tab-height));
	transform: translateX(-50%);
	height: var(--tab-height);
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #3a72d3;
	border: 1px solid #d7d7d7;
	border-top: none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	cursor: pointer;
	font-size: 18px;
	color: #ffffff;
    font-weight: 500;
	line-height: 1;
	white-space: nowrap;

	z-index: 2;
}

/* линии рамки слева и справа от ярлыка */
.pmv2-seo-accordion__tab::before,
.pmv2-seo-accordion__tab::after {
	content: "";
	position: absolute;
	top: 0;
	height: 1px;
	background: #d7d7d7;
}

.pmv2-seo-accordion__tab::before {
	right: 100%;
	left: -16px;
}

.pmv2-seo-accordion__tab::after {
	left: 100%;
	right: -16px;
}

/* переключение текста */
.pmv2-seo-accordion__less {
	display: none;
}

.pmv2-seo-accordion__check:checked ~ .pmv2-seo-accordion__tab .pmv2-seo-accordion__more {
	display: none;
}

.pmv2-seo-accordion__check:checked ~ .pmv2-seo-accordion__tab .pmv2-seo-accordion__less {
	display: inline;
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

	.pmv2-seo-accordion__content {
		font-size: 14px;
		line-height: 1.5;
		-webkit-line-clamp: 3;
	}

	.pmv2-seo-accordion__tab {
		font-size: 13px;
	}
}
