/**
 * Секция «Останні роботи» #last-cases — большой кейс + два (2026-10-30).
 * Разметка: template-parts/blocks/last-cases.php. Макет: reports/new-design-tasks/last cases (CasesBento.dc.html).
 * Фон белый: перед секцией «Нам довіряють» (#f5f8fb) — чередование. Шапка и кнопка «Усі роботи» — в сетке .wa-cases__wrap:
 * на десктопе кнопка справа от заголовка, ≤767 — под карточками.
 */

.wa-cases {
	--wa-cs-ink: #14233a;
	--wa-cs-muted: #5b6472;
	--wa-cs-blue: #1a72a8;
	--wa-cs-head: Montserrat, Arial, sans-serif;
	padding: 80px 0;
	background: #fff;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2433;
}
.wa-cases *,
.wa-cases *::before,
.wa-cases *::after { box-sizing: border-box; }

.wa-cases__wrap {
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 40px;
	align-items: end;
}

/* ---------- шапка ---------- */
.wa-cases__eyebrow {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: #eaf4fa;
	color: #1a5f8c;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}
.wa-cases .wa-cases__title {
	margin: 14px 0 0;
	padding: 0;
	font-family: var(--wa-cs-head);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--wa-cs-ink);
	text-align: left;
	text-transform: none;
}
.wa-cases .wa-cases__all {
	height: 48px;
	padding: 0 20px;
	border: 1px solid #b9cfdf;
	border-radius: 14px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--wa-cs-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--wa-cs-ink);
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}
.wa-cases__all .wa-icon { color: var(--wa-cs-blue); transition: transform .25s; }
.wa-cases .wa-cases__all:hover { background: #f5f8fb; border-color: #9fbdd3; color: var(--wa-cs-ink); }
.wa-cases__all:hover .wa-icon { transform: translateX(3px); }
.wa-cases__all:focus-visible { outline: 2px solid var(--wa-cs-blue); outline-offset: 2px; }

/* ---------- сетка ---------- */
.wa-cases .wa-cases__grid {
	grid-column: 1 / -1;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 20px;
	height: 540px;
}
.wa-cases .wa-cases__item {
	display: flex;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wa-cases .wa-cases__item::before { content: none; }
.wa-cases__item--main { grid-row: 1 / span 2; }
.wa-cases__grid--1 { grid-template-columns: minmax(0, 1fr); }
.wa-cases__grid--2 .wa-cases__item:not(.wa-cases__item--main) { grid-row: 1 / span 2; }

/* ---------- карточка ---------- */
.wa-cases .wa-cases__card {
	flex: 1;
	min-width: 0;
	display: flex;
	background: #fff;
	border: 1px solid #e3e9ef;
	border-radius: 24px;
	overflow: hidden;
	color: #1d2433;
	text-decoration: none;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .3s;
}
.wa-cases .wa-cases__card:focus-visible { outline: 2px solid var(--wa-cs-blue); outline-offset: 2px; }

/* рамка скриншота с «браузерной» полосой */
.wa-cases__shot {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: #eef3f7;
}
.wa-cases__bar {
	position: relative;
	z-index: 1;
	height: 26px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	gap: 5px;
	background: #e7edf2;
}
.wa-cases__bar i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #c9d4dd; }
.wa-cases__bar em {
	margin-left: 8px;
	height: 15px;
	padding: 0 9px;
	border-radius: 8px;
	background: #fff;
	display: flex;
	align-items: center;
	font-style: normal;
	font-size: 10px;
	line-height: 1;
	color: var(--wa-cs-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.wa-cases__page {
	position: absolute;
	left: 0;
	right: 0;
	top: 26px;
	bottom: 0;
	display: block;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
/* WebP Express оборачивает img в <picture> */
.wa-cases__page picture { display: block; width: 100%; height: 100%; }
.wa-cases .wa-cases__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top center;
}

/* текст */
.wa-cases__info { display: flex; min-width: 0; }
.wa-cases__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wa-cases__type {
	align-self: flex-start;
	height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	background: #eaf4fa;
	color: #1a5f8c;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.wa-cases .wa-cases__name {
	margin: 0;
	padding: 0;
	font-family: var(--wa-cs-head);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	color: var(--wa-cs-ink);
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wa-cases__desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--wa-cs-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wa-cases__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-cases__tags span {
	height: 26px;
	padding: 0 10px;
	border-radius: 8px;
	background: #f5f8fb;
	border: 1px solid #e8eef3;
	font-size: 12px;
	line-height: 1;
	color: #36404f;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.wa-cases__go {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wa-cs-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--wa-cs-blue);
	white-space: nowrap;
}
.wa-cases__go .wa-icon { transition: transform .25s; }

/* большая карточка: колонка, скриншот растягивается */
.wa-cases__item--main .wa-cases__card { flex-direction: column; }
.wa-cases__item--main .wa-cases__shot { flex: 1; min-height: 0; margin: 16px 16px 0; }
.wa-cases__item--main .wa-cases__info { align-items: flex-end; justify-content: space-between; gap: 24px; padding: 22px 28px 24px; }
.wa-cases__item--main .wa-cases__go { flex: none; }
.wa-cases .wa-cases__item--main .wa-cases__name { font-size: 26px; }
.wa-cases__item--main .wa-cases__desc { font-size: 15px; }

/* малые карточки: скриншот слева 46% */
.wa-cases__item:not(.wa-cases__item--main) .wa-cases__card { align-items: stretch; }
.wa-cases__item:not(.wa-cases__item--main) .wa-cases__shot { flex: none; width: 46%; margin: 14px 0 14px 14px; }
.wa-cases__item:not(.wa-cases__item--main) .wa-cases__info { flex: 1; flex-direction: column; gap: 10px; padding: 22px 24px; }
.wa-cases__item:not(.wa-cases__item--main) .wa-cases__go { margin-top: auto; }

@media (hover: hover) {
	.wa-cases .wa-cases__card:hover {
		color: #1d2433;
		transform: translateY(-4px);
		box-shadow: 0 22px 48px rgba(15, 23, 42, .12);
		border-color: #cfe1ee;
	}
	.wa-cases__card:hover .wa-cases__page { transform: scale(1.035); }
	.wa-cases__card:hover .wa-cases__go .wa-icon { transform: translateX(4px); }
}

/* ---------- ширина: 1400 + поля 20px ниже 1440 ---------- */
@media (max-width: 1439px) {
	.wa-cases__wrap { width: calc(100% - 40px); }
}
@media (max-width: 1199px) {
	.wa-cases .wa-cases__title { font-size: 34px; }
	.wa-cases__item:not(.wa-cases__item--main) .wa-cases__info { padding: 18px 18px; }
}

/* ---------- планшет 768–1023: большая на всю ширину, две малые ниже вертикальными ---------- */
@media (max-width: 1023px) {
	.wa-cases { padding: 56px 0; }
	.wa-cases__wrap { width: calc(100% - 32px); }
	.wa-cases .wa-cases__title { font-size: 30px; line-height: 1.2; }
	.wa-cases .wa-cases__grid {
		height: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		margin-top: 24px;
	}
	.wa-cases__item--main,
	.wa-cases__grid--1 .wa-cases__item,
	.wa-cases__grid--2 .wa-cases__item:not(.wa-cases__item--main) { grid-row: auto; grid-column: 1 / -1; }
	.wa-cases__item--main .wa-cases__shot { flex: none; height: 360px; }
	.wa-cases__item:not(.wa-cases__item--main) .wa-cases__card { flex-direction: column; }
	.wa-cases__item:not(.wa-cases__item--main) .wa-cases__shot { width: auto; margin: 14px 14px 0; aspect-ratio: 16 / 10; }
	.wa-cases__item:not(.wa-cases__item--main) .wa-cases__info { padding: 18px 20px 20px; }
}

/* ---------- мобилка ≤767: карточки листаются вбок (scroll-snap, без JS, как «Переваги»), «Усі роботи» под ними ----------
   Справа выглядывает край следующей карточки. Прежний вариант «в стопку»: reports/backups/cases-20261030/wa-cases.before-carousel.css */
@media (max-width: 767px) {
	.wa-cases { padding: 48px 0; }
	.wa-cases__wrap { width: auto; grid-template-columns: minmax(0, 1fr); }
	.wa-cases__head { padding: 0 16px; }
	.wa-cases .wa-cases__title { font-size: 28px; }
	.wa-cases .wa-cases__grid {
		display: flex;
		gap: 12px;
		margin-top: 20px;
		padding: 4px 16px 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.wa-cases .wa-cases__grid::-webkit-scrollbar { display: none; }
	.wa-cases .wa-cases__item { flex: 0 0 min(84%, 360px); scroll-snap-align: start; }
	.wa-cases__grid--1 .wa-cases__item { flex-basis: 100%; }
	.wa-cases .wa-cases__all { grid-row: 3; margin: 8px 16px 0; width: auto; }
	.wa-cases .wa-cases__card { flex-direction: column; border-radius: 20px; }
	.wa-cases .wa-cases__shot,
	.wa-cases__item--main .wa-cases__shot,
	.wa-cases__item:not(.wa-cases__item--main) .wa-cases__shot { flex: none; width: auto; height: auto; aspect-ratio: 16 / 10; margin: 12px 12px 0; border-radius: 12px; }
	.wa-cases .wa-cases__info,
	.wa-cases__item--main .wa-cases__info,
	.wa-cases__item:not(.wa-cases__item--main) .wa-cases__info { flex: 1; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 14px; padding: 18px; }
	.wa-cases .wa-cases__name,
	.wa-cases .wa-cases__item--main .wa-cases__name { font-size: 20px; }
	.wa-cases__item--main .wa-cases__desc { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-cases .wa-cases__card,
	.wa-cases__page,
	.wa-cases__go .wa-icon,
	.wa-cases__all .wa-icon { transition: none; }
}