/* =========================================================
   NATAANIMAL • PORTFOLIO HIGHLIGHT — LAYOUT + SNAP
   ---------------------------------------------------------
   Цель:
   - На широком экране показывать 4 карточки в ряд (как в товарах).
   - Нативный горизонтальный скролл + scroll-snap.
   - Скоуп только для [nataanimal_portfolio_highlight], чтобы не влиять на тему/другие блоки.
   ========================================================= */

.na-portfolio-highlight[data-na-portfolio-highlight] {
	--na-ph-gap: clamp(10px, 1.2vw, 16px);
}




/* ФАЗА 4: тема может прятать стрелки на tablet (<=768px) через общие .carousel__controls/.carouselArrow.
   Здесь форсим видимость ТОЛЬКО внутри portfolio highlight. */
.na-portfolio-highlight[data-na-portfolio-highlight] .carousel__controls {
	display: flex !important;
	align-items: center;
	visibility: visible !important;
}

.na-portfolio-highlight[data-na-portfolio-highlight] .carouselArrow {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	visibility: visible !important;
}


/* Трек: горизонтальная лента */
.na-portfolio-highlight[data-na-portfolio-highlight] .track {
	display: flex;
	gap: var(--na-ph-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;

	/* Чтобы "под" треком не прыгала разметка при появлении скроллбара */
	padding-bottom: 6px;

	/* Скрыть скроллбар аккуратно */
	scrollbar-width: none;
}

.na-portfolio-highlight[data-na-portfolio-highlight] .track::-webkit-scrollbar {
	height: 0;
}

/* Карточка: ширина зависит от брейкпоинта */
.na-portfolio-highlight[data-na-portfolio-highlight] .track > .card {
	flex: 0 0 calc((100% - (var(--na-ph-gap) * 3)) / 4);
	scroll-snap-align: start;
}

/* Убираем закругления только в блоке Portfolio highlights. */
.na-portfolio-highlight[data-na-portfolio-highlight] .track > .card,
.na-portfolio-highlight[data-na-portfolio-highlight] .track > .card figure,
.na-portfolio-highlight[data-na-portfolio-highlight] .track > .card img,
.na-portfolio-highlight[data-na-portfolio-highlight] .track > .card .cap,
#portfolio[data-na-pp-root="highlight"] .miniGrid .thumb,
#portfolio[data-na-pp-root="highlight"] .miniGrid .thumb img,
#portfolio[data-na-pp-root="highlight"] .na-ph-mobile-grid .na-ph-mobile-card,
#portfolio[data-na-pp-root="highlight"] .na-ph-mobile-grid .na-ph-mobile-card img,
#portfolio[data-na-pp-root="highlight"] .na-ph-mobile-grid__item,
#portfolio[data-na-pp-root="highlight"] .na-ph-mobile-grid__item img {
	border-radius: 0 !important;
}


.na-portfolio-highlight[data-na-portfolio-highlight] .track > .card[data-na-pp-open] {
	cursor: pointer;
}


/* <= 1200px: 3 в ряд */
@media (max-width: 1200px) {
	.na-portfolio-highlight[data-na-portfolio-highlight] .track > .card {
		flex-basis: calc((100% - (var(--na-ph-gap) * 2)) / 3);
	}
}

/* <= 920px: 2 в ряд */
@media (max-width: 920px) {
	.na-portfolio-highlight[data-na-portfolio-highlight] .track > .card {
		flex-basis: calc((100% - (var(--na-ph-gap) * 1)) / 2);
	}
}

/* <= 560px: 1 в ряд */
@media (max-width: 560px) {
	.na-portfolio-highlight[data-na-portfolio-highlight] .track > .card {
		flex-basis: 100%;
	}
}



/* Мобильный режим (опция): 2×2 сетка из 4 мини-картинок вместо большой карточки. */
#portfolio .na-ph-mobile-grid {
	display: none;
}

@media (max-width: 560px) {
	
	#portfolio[data-na-ph-mobile-grid="1"] .na-portfolio-highlight[data-na-portfolio-highlight][data-na-ph-root="desktop"] {
			display: none !important;
	}


	#portfolio[data-na-ph-mobile-grid="1"] .miniGrid {
		display: none !important;
	}

	#portfolio[data-na-ph-mobile-grid="1"] .na-ph-mobile-grid {
		display: block !important;
		--na-ph-gap: clamp(10px, 1.2vw, 16px);
	}

	/* Mobile 2×2: убираем тему-стиль .card (фон/бордер), чтобы не было панели под сеткой */
	#portfolio[data-na-ph-mobile-grid="1"] .na-ph-mobile-grid .na-ph-mobile-card {
		background: transparent !important;
		background-image: none !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}


	#portfolio[data-na-ph-mobile-grid="1"] .na-ph-mobile-grid__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--na-ph-gap);
	}

	#portfolio[data-na-ph-mobile-grid="1"] .na-ph-mobile-grid__item {
		width: 100%;
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}

	#portfolio[data-na-ph-mobile-grid="1"] .na-ph-mobile-grid__item img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}
}



/* SVG-стрелки: размеры и выравнивание (через currentColor). */
.na-portfolio-highlight[data-na-portfolio-highlight] .carouselArrow svg {
	width: 1.2em;
	height: 1.2em;
	display: block;
}

.na-portfolio-highlight[data-na-portfolio-highlight] .carouselArrow {
	line-height: 0;
}

/* Мобайл 2×2: гарантируем, что контролы видимы (если тема вдруг прячет их на узких экранах). */
@media (max-width: 560px) {
	#portfolio[data-na-ph-mobile-grid="1"] .na-ph-mobile-grid .carousel__controls {
		display: flex;
	}
}



/* Если нет overflow — можно слегка приглушить контролы (JS добавляет класс) */
.na-portfolio-highlight[data-na-portfolio-highlight].na-ph--no-overflow .carousel__controls {
	opacity: 0.35;
	pointer-events: none;
}