/*!
 * Bennet — Portfolio Category archive
 * Template: taxonomy-portfolio_category.php
 */

/* Футер на этом шаблоне не показываем (все ширины экрана) */
body.portfolio-category-archive .clapat-footer {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
	opacity: 0 !important;
}

/* ── Страница категории: один экран по высоте, футер скрыт (десктоп) ─ */
@media (min-width: 901px) {

	body.portfolio-category-archive,
	body.portfolio-category-archive #clapat-page-content.blog-template-content {
		overflow: hidden;
	}

	/* Фон архива задаётся инлайном (PHP): цвет + опционально картинка поверх. Здесь только layout. */
	body.portfolio-category-archive #clapat-page-content.blog-template-content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: 100svh;
		min-height: 0;
		box-sizing: border-box;
	}

	body.portfolio-category-archive #main,
	body.portfolio-category-archive #main-content {
		background-color: transparent !important;
	}

	body.portfolio-category-archive #clapat-page-content>header.clapat-header {
		flex-shrink: 0;
	}

	body.portfolio-category-archive #clapat-page-content>#main {
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	/* smooth-scrollbar делает внутренний скролл в #content-scroll / .scroll-content,
	   даже когда body{overflow:hidden}. Запираем высоту этих контейнеров в 100svh,
	   чтобы virtualized scroll ничего не скроллил. */
	body.portfolio-category-archive #content-scroll,
	body.portfolio-category-archive #content-scroll>.scroll-content {
		max-height: 100svh;
		overflow: hidden !important;
	}

	body.portfolio-category-archive #main>#main-content {
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	body.portfolio-category-archive #main,
	body.portfolio-category-archive #main-content {
		box-sizing: border-box;
	}

	body.portfolio-category-archive #clapat-page-content>.thumb-wrapper,
	body.portfolio-category-archive #clapat-page-content>#app {
		flex-shrink: 0;
	}

}

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.portfolio-category-wrapper {
	position: relative;
	width: 100%;
	padding: 11.25rem 1.25rem 1.25rem;
	box-sizing: border-box;
}

@media (min-width: 901px) {
	.portfolio-category-wrapper {
		flex: 1 1 auto;
		height: 100%;
		min-height: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: 11.25rem;
		padding-bottom: 0.75rem;
		box-sizing: border-box;
	}
}

/* ── H1 ─────────────────────────────────────────────────────────────── */
.portfolio-category-header {
	max-width: 1440px;
	margin: 0;
	text-align: center;
	flex-shrink: 0;
}

.portfolio-category-wrapper.is-light .portfolio-category-header h1 {
	color: #3f1b0f;
}

.portfolio-category-wrapper.is-dark .portfolio-category-header h1 {
	color: #ffffff;
}

/*
 * .has-shuffle (scripts.js): слова оборачиваются в span.shuffle-word и получают gsap opacity:0
 * до срабатывания ScrollTrigger. На странице категории скролла нет / триггер не всегда входит —
 * плюс класс animated на h1 раньше отключал onEnter. Принудительно показываем текст.
 */
body.portfolio-category-archive .portfolio-category-header h1.has-shuffle .shuffle-word {
	opacity: 1 !important;
}

/* ── Slider ─────────────────────────────────────────────────────────── */
.portfolio-category-slider {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding-bottom: 0;
}

body.portfolio-category-archive .portfolio-category-slider,
body.portfolio-category-archive .portfolio-category-dots {
	background: transparent !important;
	box-shadow: none !important;
}

.portfolio-category-slider-track {
	position: relative;
	width: 100%;
}

/* ── Slide ─────────────────────────────────────────────────────────── */
.portfolio-category-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}

/*
 * До инициализации слайдера (data-bennet-pc-init=1) неактивные слайды наглухо
 * исключаем из layout. Иначе на iOS Safari при AJAX-вставке HTML мелькает
 * paint-кадр, где второй слайд кратко перекрывает первый — пользователь видит
 * наложение, после которого слайд исчезает.
 */
.portfolio-category-slider:not([data-bennet-pc-init="1"]) .portfolio-category-slide:not(.is-active) {
	display: none !important;
}

.portfolio-category-slide.is-active {
	position: relative;
	margin: 0;
	padding: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0s;
}

/* ── Ряд: стрелки по бокам изображения, по вертикали по центру ─────── */
/* Стрелки в flex-row примыкают к краям фото через небольшой gap — позиция
   всегда относительна фактической ширине image (flex: 1 1 auto, max-width 860). */
.portfolio-category-slide-visual {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* ── Изображение: ограничение по высоте, ширина по натуральной пропорции (до max-width) ─ */
.portfolio-category-image {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	width: auto;
	max-width: min(860px, 100%);
	margin: 0 auto;
	border-radius: 0;
	overflow: visible;
	background: transparent;
	position: relative;
	/* Только потолок по высоте — без aspect-ratio, чтобы узкие кадры не сидели в широкой «коробке» */
	max-height: min(calc(100vh - 280px), 85vh);
}

@media (min-width: 901px) {
	.portfolio-category-image {
		max-height: calc(100vh - 450px);
	}
}

.portfolio-category-image img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: inherit;
	object-fit: contain;
	transition: transform 0.8s ease;
	border-radius: 12px;
}

.portfolio-category-image:hover img {
	transform: scale(0.95);
}

.portfolio-category-image-placeholder {
	display: block;
	width: min(100%, 400px);
	min-height: min(280px, 40vh);
	margin: 0 auto;
	box-sizing: border-box;
	border-radius: 12px;
	background: linear-gradient(135deg, #e5e5e5, #cfcfcf);
}

.portfolio-category-wrapper.is-dark .portfolio-category-image-placeholder {
	background: linear-gradient(135deg, #222, #111);
}

/* ── Кнопки навигации у краёв изображения ──────────────────────────── */
.portfolio-category-slide-visual .pc-nav-btn {
	flex: 0 0 auto;
	align-self: center;
}

/* ── Подпись: теги (колонка Gutenberg) + H2 ───────────────────────── */
/*
 * Caption теперь над изображением (раньше был под ним). Margin-bottom вместо
 * margin-top, чтобы было разделение caption ↓ image.
 */
.portfolio-category-caption {
	text-align: center;
	margin-top: 0;
	margin-bottom: clamp(0.8rem, 2.4vh, 1.6rem);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Ряд тегов: типографика повторяет «обычный текст» со страницы проекта
 * (#main-page-content в css/style-wp.css: 16px / 28px / #444; Poppins/400 от html,body).
 */
.portfolio-category-slide .portfolio-category-caption [data-bennet-pc-tags] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 8px;
	margin: 0 auto 0.4rem;
	width: 100%;
	max-width: 720px;
	box-sizing: border-box;
	text-align: initial;
}

.portfolio-category-slide .portfolio-category-caption .pc-tag {
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: #444;
	margin: 0;
	padding: 0;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	opacity: 1;
}

.portfolio-category-wrapper.is-dark .portfolio-category-caption .pc-tag {
	color: #aaa;
}

.portfolio-category-wrapper.is-light .portfolio-category-caption h2 {
	margin: 0;
	color: #1a1a1a;
	opacity: 1;
}

.portfolio-category-wrapper.is-dark .portfolio-category-caption h2 {
	margin: 0;
	color: #ffffff;
	opacity: 1;
}

/* ── Индикаторы слайдов (в духе clapat-pagination) ───────────────────── */
.portfolio-category-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 1.5rem;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: auto;
	position: relative;
	z-index: 6;
	flex-shrink: 0;
}

.portfolio-category-wrapper.is-light .portfolio-category-dots {
	color: #3f1b0f;
}

.portfolio-category-wrapper.is-dark .portfolio-category-dots {
	color: #ffffff;
}

.pc-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	padding: 0;
	margin: 0;
	border: 1px solid currentColor;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	opacity: 0.4;
	cursor: pointer;
	box-sizing: border-box;
	font: inherit;
	color: inherit;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

body.portfolio-category-archive .portfolio-category-dots,
body.portfolio-category-archive .portfolio-category-dots::before,
body.portfolio-category-archive .portfolio-category-dots::after {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Тёмная тема: явные светлые точки (currentColor иногда «теряется» у кнопок) */
.portfolio-category-wrapper.is-dark .pc-dot {
	border-color: rgba(255, 255, 255, 0.9);
	background: transparent;
	opacity: 0.65;
}

.portfolio-category-wrapper.is-dark .pc-dot:hover,
.portfolio-category-wrapper.is-dark .pc-dot:focus-visible {
	opacity: 0.95;
	border-color: #ffffff;
}

.portfolio-category-wrapper.is-dark .pc-dot.is-active {
	opacity: 1;
	background: #ffffff;
	border-color: #ffffff;
	transform: scale(1.2);
}

.pc-dot:hover,
.pc-dot:focus-visible {
	opacity: 0.75;
	outline: none;
}

.pc-dot.is-active {
	opacity: 1;
	background: currentColor;
	transform: scale(1.2);
}

/* ── Стрелки слайдера: приглушённые, при hover — белая «плашка» ─────── */
.pc-nav-btn {
	--bg: rgba(255, 255, 255, 0.2);
	--bg-hover: #ffffff;
	--fg: rgba(255, 255, 255, 0.85);
	--fg-hover: #0c0c0c;
	appearance: none;
	border: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--bg);
	color: var(--fg);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
	padding: 0;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.portfolio-category-wrapper.is-light .pc-nav-btn {
	--bg: rgba(255, 255, 255, 0.38);
	--bg-hover: #ffffff;
	--fg: rgba(45, 38, 32, 0.5);
	--fg-hover: #1a1410;
	box-shadow: 0 1px 6px rgba(62, 42, 28, 0.12);
}

.portfolio-category-wrapper.is-dark .pc-nav-btn {
	--bg: rgba(255, 255, 255, 0.12);
	--bg-hover: #ffffff;
	--fg: rgba(255, 255, 255, 0.72);
	--fg-hover: #0c0c0c;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

.pc-nav-btn:hover,
.pc-nav-btn:focus-visible {
	background: var(--bg-hover);
	color: var(--fg-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
	outline: none;
}

.portfolio-category-wrapper.is-dark .pc-nav-btn:hover,
.portfolio-category-wrapper.is-dark .pc-nav-btn:focus-visible {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.pc-nav-btn svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.portfolio-category-empty {
	max-width: 640px;
	margin: 4rem auto;
	text-align: center;
	font-size: 18px;
	opacity: 0.75;
}

/* ── Шапка: светлая тема архива — тёмное меню на креме; тёмная — светлое меню на #0c… ─ */
@media (min-width: 1025px) {

	body.portfolio-category-archive.cat-theme-light .clapat-header.classic-menu .flexnav li,
	body.portfolio-category-archive.cat-theme-light .clapat-header.classic-menu .flexnav li a {
		color: #1a1a1a !important;
	}

	body.portfolio-category-archive.cat-theme-light #clapat-logo img.black-logo {
		opacity: 1 !important;
	}

	body.portfolio-category-archive.cat-theme-light #clapat-logo img.white-logo {
		opacity: 0 !important;
	}

	body.portfolio-category-archive.cat-theme-light #clapat-page-content.light-content .button-wrap {
		color: #1a1a1a !important;
	}

	body.portfolio-category-archive.cat-theme-light #clapat-page-content .header-button .button-icon-link {
		color: #1a1a1a !important;
		border-color: #fa821d !important;
	}

	body.portfolio-category-archive.cat-theme-light #clapat-page-content .header-button .button-icon-link .button-icon {
		background-color: #fa821d !important;
		color: #1a1a1a !important;
	}

	body.portfolio-category-archive.cat-theme-light #clapat-page-content .header-button .button-icon-link .button-icon i {
		color: #1a1a1a !important;
	}

	body.portfolio-category-archive.cat-theme-light #clapat-page-content .header-button .button-icon-link:hover,
	body.portfolio-category-archive.cat-theme-light #clapat-page-content .header-button .button-icon-link:focus-visible {
		background-color: transparent !important;
		color: #0c0c0c !important;
		border-color: #0c0c0c !important;
	}

	body.portfolio-category-archive.cat-theme-light #clapat-page-content .header-button .button-icon-link:hover .button-icon,
	body.portfolio-category-archive.cat-theme-light #clapat-page-content .header-button .button-icon-link:focus-visible .button-icon {
		background-color: transparent !important;
		color: #0c0c0c !important;
	}

	body.portfolio-category-archive.cat-theme-light #clapat-page-content .header-button .button-icon-link:hover .button-icon i,
	body.portfolio-category-archive.cat-theme-light #clapat-page-content .header-button .button-icon-link:focus-visible .button-icon i {
		color: #0c0c0c !important;
	}
}

@media (min-width: 1025px) {

	body.portfolio-category-archive.cat-theme-dark .clapat-header.classic-menu .flexnav li,
	body.portfolio-category-archive.cat-theme-dark .clapat-header.classic-menu .flexnav li a {
		color: #f5f5f5 !important;
	}

	body.portfolio-category-archive.cat-theme-dark #clapat-logo img.black-logo {
		opacity: 0 !important;
	}

	body.portfolio-category-archive.cat-theme-dark #clapat-logo img.white-logo {
		opacity: 1 !important;
	}

	body.portfolio-category-archive.cat-theme-dark #clapat-page-content.dark-content .button-wrap {
		color: #f5f5f5 !important;
	}

	body.portfolio-category-archive.cat-theme-dark #clapat-page-content .header-button .button-icon-link {
		color: #ffffff !important;
		border-color: #fa821d !important;
	}

	body.portfolio-category-archive.cat-theme-dark #clapat-page-content .header-button .button-icon-link .button-icon {
		background-color: #fa821d !important;
		color: #ffffff !important;
	}

	body.portfolio-category-archive.cat-theme-dark #clapat-page-content .header-button .button-icon-link .button-icon i {
		color: #ffffff !important;
	}

	body.portfolio-category-archive.cat-theme-dark #clapat-page-content .header-button .button-icon-link:hover,
	body.portfolio-category-archive.cat-theme-dark #clapat-page-content .header-button .button-icon-link:focus-visible {
		background-color: transparent !important;
		color: #ffffff !important;
		border-color: #ffffff !important;
	}

	body.portfolio-category-archive.cat-theme-dark #clapat-page-content .header-button .button-icon-link:hover .button-icon,
	body.portfolio-category-archive.cat-theme-dark #clapat-page-content .header-button .button-icon-link:focus-visible .button-icon {
		background-color: transparent !important;
		color: #ffffff !important;
	}

	body.portfolio-category-archive.cat-theme-dark #clapat-page-content .header-button .button-icon-link:hover .button-icon i,
	body.portfolio-category-archive.cat-theme-dark #clapat-page-content .header-button .button-icon-link:focus-visible .button-icon i {
		color: #ffffff !important;
	}
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	body.portfolio-category-archive {
		overflow: auto;
	}

	body.portfolio-category-archive #main,
	body.portfolio-category-archive #main-content {
		background-color: transparent !important;
	}

	.portfolio-category-wrapper {
		padding: 11.25rem 1rem 2rem;
	}

	.portfolio-category-header {
		margin-bottom: 2rem;
	}

	.portfolio-category-slide-visual {
		position: relative;
		display: block;
		max-width: 100%;
	}

	.portfolio-category-slide-visual .portfolio-category-image {
		max-width: 100%;
	}

	.portfolio-category-slide-visual .pc-nav-btn {
		position: absolute;
		top: 50%;
		z-index: 3;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
	}

	.portfolio-category-slide-visual .pc-nav-prev {
		left: 1rem;
	}

	.portfolio-category-slide-visual .pc-nav-next {
		right: 1rem;
	}

	.portfolio-category-slide-visual .pc-nav-btn:hover,
	.portfolio-category-slide-visual .pc-nav-btn:focus-visible {
		transform: translateY(-50%);
	}

	.portfolio-category-caption {
		margin-top: 1.25rem;
	}
}