/* «Наші роботи»: сторінка робіт (категорії, сітка плиток) і блок у макетах (смуга плиток). Колір - змінна
   --works-accent (тема може задати свій). */

.works-page,
.works-module,
.fancybox__container {
	--works-accent: #d75032;
	--works-radius: 10px;
}

/* --- Плитка: фото чи обкладинка відео, обрізана під пропорції з налаштувань --- */

.works-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--works-ratio, 3 / 4);
	border-radius: var(--works-radius);
	background: #eee;
	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* фото у <picture> (WebP-копії) - на всю плитку */
.works-tile picture {
	display: block;
	width: 100%;
	height: 100%;
}

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

/* кадр YouTube (4:3) має чорні смуги згори й знизу (ролик 16:9) або з боків (Shorts): у плитці 3:4 їх
   ховає збільшення на 4/3 */
.works-tile img.works-tile__youtube {
	transform: scale(1.34);
}

@media (hover: hover) {
	.works-tile:hover img {
		transform: scale(1.05);
	}

	.works-tile:hover img.works-tile__youtube {
		transform: scale(1.4);
	}
}

.works-tile:focus-visible {
	outline: 3px solid var(--works-accent);
	outline-offset: 2px;
}

/* назва роботи - знизу при наведенні (на сенсорних екранах її немає: видно в переглядачі) */
.works-tile__name {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: -webkit-box;
	overflow: hidden;
	padding: 32px 10px 9px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72));
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s, transform .25s;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	pointer-events: none;
}

@media (hover: hover) {
	.works-tile:hover .works-tile__name,
	.works-tile:focus-visible .works-tile__name {
		opacity: 1;
		transform: none;
	}
}

@media (hover: none) {
	.works-tile__name {
		display: none;
	}
}

/* кнопка відтворення на відео */
.works-tile__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
	transition: background .25s, transform .25s;
	pointer-events: none;
}

.works-tile__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -7px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

@media (hover: hover) {
	.works-tile:hover .works-tile__play {
		background: var(--works-accent);
		transform: scale(1.08);
	}
}

/* --- Сторінка робіт --- */

.works-cta {
	margin: 0 0 20px;
	text-align: center;
}

.works-page--nav {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.works-main {
	min-width: 0;
}

.works-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 576px) {
	.works-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (min-width: 1200px) {
	.works-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px;
	}
}

.works-more {
	margin: 20px 0 0;
	text-align: center;
}

.works-more__button {
	min-width: 220px;
	padding: 10px 24px;
	border: 2px solid var(--works-accent);
	border-radius: 24px;
	background: #fff;
	color: var(--works-accent);
	font-weight: 700;
}

.works-more__button:hover,
.works-more__button:focus {
	background: var(--works-accent);
	color: #fff;
}

.works-more__button[disabled] {
	opacity: .6;
}

.works-pagination {
	margin: 16px 0 0;
	text-align: center;
}

.works-empty {
	margin: 20px 0;
	color: #777;
}

.works-description {
	margin: 32px 0 0;
}

/* категорії ліворуч */
.works-nav {
	padding: 10px;
	border-radius: var(--works-radius);
	background: #f6f6f6;
}

.works-nav__title {
	padding: 6px 12px 10px;
	color: #222;
	font-size: 15px;
	font-weight: 700;
}

.works-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.works-nav__list .works-nav__list {
	margin: 2px 0 4px 14px;
	padding-left: 6px;
	border-left: 2px solid #e2e2e2;
}

.works-nav__link {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	color: #333;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.works-nav__link:hover,
.works-nav__link:focus {
	background: #fff;
	color: var(--works-accent);
	text-decoration: none;
}

.works-nav__link.is-open {
	font-weight: 700;
}

.works-nav__link.is-active,
.works-nav__link.is-active:hover,
.works-nav__link.is-active:focus {
	background: var(--works-accent);
	color: #fff;
	font-weight: 700;
}

/* на телефоні й планшеті - рядки категорій над фото (гортаються пальцем) */
.works-chips-box {
	display: none;
}

.works-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin: 0 -15px 12px;
	padding: 0 15px 2px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.works-chips::-webkit-scrollbar {
	display: none;
}

.works-chips--sub {
	margin-top: -4px;
}

.works-chip {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 18px;
	background: #f1f1f1;
	color: #333;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

.works-chips--sub .works-chip {
	padding: 6px 12px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #ddd;
}

.works-chip:hover,
.works-chip:focus {
	color: var(--works-accent);
	text-decoration: none;
}

.works-chip.is-active,
.works-chip.is-active:hover,
.works-chip.is-active:focus {
	background: var(--works-accent);
	box-shadow: none;
	color: #fff;
}

@media (max-width: 991px) {
	.works-page--nav {
		display: block;
	}

	.works-nav {
		display: none;
	}

	.works-chips-box {
		display: block;
	}
}

/* --- Блок у макетах: смуга плиток --- */

.works-module {
	margin: 30px 0;
}

.works-module__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	margin: 0 0 14px;
}

.works-module__heading {
	color: #333;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.works-module__heading a {
	color: inherit;
	text-decoration: none;
}

.works-module__heading a:hover {
	color: var(--works-accent);
}

.works-module__all {
	color: var(--works-accent);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.works-module__all:hover,
.works-module__all:focus {
	color: var(--works-accent);
	text-decoration: underline;
}

.works-module__viewport {
	position: relative;
}

.works-module__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.works-module__track::-webkit-scrollbar {
	display: none;
}

.works-module__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.works-module__track.is-dragging * {
	cursor: grabbing;
}

/* ширина плитки - з налаштувань; на телефоні - дві з половиною на екран */
.works-module__track .works-tile {
	flex: 0 0 min(var(--works-tile-width, 180px), 40vw);
}

/* стрілки - як у смуг "Популярних товарів": видимі, поки в їхній бік є куди гортати (клас is-visible
   ставить MD Scroller) */
.works-module__nav {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 0 4px;
	border: 2px solid rgba(0, 0, 0, .08);
	border-radius: 100%;
	color: var(--carousel-nav-btn-c, #333);
	background: var(--carousel-nav-btn-bg, #fff);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transform: translate(0, -50%);
	transition: opacity .3s, visibility 0s .5s;
	-webkit-user-select: none;
	user-select: none;
}

.works-module__nav.is-visible {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.works-module__nav:hover {
	border-color: rgba(0, 0, 0, .2);
}

.works-module__nav--prev {
	left: 10px;
}

.works-module__nav--next {
	right: 10px;
}

@media (hover: none) {
	.works-module__nav {
		display: none;
	}
}

/* --- Підпис у переглядачі: назва, дата, посилання на товар --- */

.works-caption__name {
	font-weight: 700;
}

.works-caption__date {
	margin-left: 8px;
	opacity: .7;
	white-space: nowrap;
}

.works-caption__product {
	margin-left: 12px;
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.works-caption__product:hover,
.works-caption__product:focus {
	color: #fff;
	opacity: .85;
}