/* =============================================================
   PIARNYA — Case Single (single-cases.php + template-parts/case-detail.php)
   Переиспользует .svc-breadcrumb / .btn / .section / .chip-term из base.css
   и case-card.css. Геометрия/отступы — из макета Claude Design (страница
   кейса, фрейм «2b»); цвета — фирменные токены сайта, не хардкод из макета.
   Зависит от: variables.css, base.css, case-gallery.css, case-card.css
   ============================================================= */

.case-single__breadcrumb-section {
	padding-top: var(--sp-6);
	padding-bottom: var(--sp-6);
}

/* Левая колонка сетки: фото + описание единым потоком. Описание раньше было
   отдельной секцией ПОСЛЕ сетки и потому начиналось ниже самой высокой колонки
   (панель характеристик + цены), оставляя под фото 200+px пустоты. */
.case-detail__col {
	display: flex;
	flex-direction: column;
	gap: var(--case-gap);
	min-width: 0;
}

.case-single__description-inner {
	max-width: 70ch;
	color: var(--color-text);
	line-height: var(--leading-normal);
}

.case-single__description-inner p {
	margin-bottom: var(--sp-4);
}

.case-single__description-inner p:last-child {
	margin-bottom: 0;
}

/* ── ШАПКА КЕЙСА: H1 + мета-строка (template-parts/case-detail.php) ────── */
.case-detail {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

.case-detail__head {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.case-detail__title {
	max-width: 900px;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: -.035em;
	color: var(--hh-text);
}

.case-detail__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
}

.case-detail__tag {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 7px 13px;
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	background: var(--brand-solid);
	color: #fff;
}

.case-detail__tag--outline {
	background: #fff;
	border: 1px solid var(--case-pill-line);
	color: var(--hh-text);
}

.case-detail__meta-divider {
	width: 1px;
	height: 18px;
	background: var(--case-line);
}

.case-detail__meta-item {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--case-text-3);
}

.case-detail__meta-item b {
	font-weight: 800;
	color: var(--hh-text);
}

/* ── СЕТКА: ФОТО | ПАНЕЛЬ (характеристики + цена) ───────────────── */
.case-detail__grid {
	display: grid;
	grid-template-columns: 1fr 400px;
	align-items: start;
	gap: var(--case-gap);
}

.case-detail__media {
	min-width: 0;
}

.case-detail__aside {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	min-width: 0;
}

/* ≤1099px — одна колонка. Порядок макета 3b сохраняется прежним:
   фото → характеристики → цена → описание. Обёртка левой колонки снимается
   через display:contents, чтобы её дети стали прямыми элементами сетки и
   описание можно было увести под панель через order. */
@media (max-width: 1099px) {
	.case-detail__grid {
		grid-template-columns: 1fr;
	}

	.case-detail__col {
		display: contents;
	}

	.case-detail__media  { order: 1; }
	.case-detail__aside  { order: 2; }

	/* Раньше описание было отдельной секцией и отбивалось от панели цены на
	   --sp-section; в сетке зазор равен gap — разницу возвращаем margin'ом. */
	.case-single__description {
		order: 3;
		margin-top: calc(var(--sp-section) - var(--case-gap));
	}
}

/* ── КАРТОЧКА «ХАРАКТЕРИСТИКИ» ───────────────────────────────────── */
.case-detail__specs {
	background: var(--color-bg);
	border: 1px solid var(--case-line);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.case-detail__specs-head {
	padding: var(--sp-4) var(--sp-5) var(--sp-3);
	border-bottom: 1px solid var(--case-line-2);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--hh-text);
}

.case-detail__params {
	display: flex;
	flex-direction: column;
	padding: var(--sp-2) var(--sp-5) var(--sp-3);
}

.case-detail__param-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	border-top: 1px solid var(--case-line-2);
}

.case-detail__param-row:first-child {
	border-top: none;
}

.case-detail__param-name {
	font-size: var(--text-sm);
	color: var(--case-text-4);
}

.case-detail__param-value {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--hh-text);
	text-align: right;
}

/* ── КАРТОЧКА «СТОИМОСТЬ ПРОЕКТА» ─────────────────────────────────── */
.case-detail__price {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-6) var(--sp-5);
	background: var(--color-bg);
	border: 1px solid var(--case-line);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}

.case-detail__price-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--case-text-4);
}

.case-detail__price-pill {
	align-self: flex-start;
	padding: 14px 22px;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 34px;
	letter-spacing: -.03em;
	line-height: 1;
	background: var(--brand-solid);
	color: #fff;
}

.case-detail__price-pill--ask {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: normal;
	background: #F3F1F7;
	color: var(--case-text-2);
}

.case-detail__price-note {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--case-text-3);
}

.case-detail__price-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.case-detail__price-actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.case-detail__price-btn {
	width: 100%;
	min-height: 52px;
	border-radius: var(--radius-full);
}

.case-detail__price-microcopy {
	font-size: var(--text-xs);
	color: var(--case-text-4);
}

/* ══ МОБИЛЬНЫЕ ЭЛЕМЕНТЫ: в DOM всегда, видимы только ≤767px ══════ */
.case-detail__specs-toggle,
.case-single__description-head,
.case-detail__meta-label {
	display: none;
}

/* ══ MOBILE ≤767px — макет Claude Design, фрейм 3b ═══════════════ */
@media (max-width: 767px) {

	/* контейнеры страницы кейса — 16px вместо --container-px:64px */
	.case-single__breadcrumb-section > .container,
	.case-single > .container {
		padding-inline: 16px;
	}

	/* ── КРОШКИ ──────────────────────────────────────────────── */
	.case-single__breadcrumb-section {
		padding-top: 16px;
		padding-bottom: 14px;
	}

	.case-single__breadcrumb-section .svc-breadcrumb li {
		font-size: 11px;
	}

	/* ── ШАПКА: H1 + МЕТА-ПИЛЮЛИ ─────────────────────────────── */
	.case-detail {
		gap: 12px;
	}

	.case-detail__head {
		gap: 12px;
	}

	.case-detail__title {
		font-size: 25px;
		line-height: 1.14;
		letter-spacing: -.04em;
	}

	.case-detail__meta-row {
		gap: 8px;
	}

	.case-detail__tag {
		padding: 8px 13px;
		font-size: 9px;
		font-weight: 800;
	}

	.case-detail__tag--outline {
		background: #F3F1F7;
		border: 0;
		color: #4E4660;
		font-weight: 600;
		font-size: 12px;
		letter-spacing: normal;
		text-transform: none;
	}

	.case-detail__meta-divider {
		display: none;
	}

	/* макет 3b: год рендерится без подписи «Сдан» — см. .case-detail__meta-label выше.
	   display:inline-block, НЕ flex — text+<b> внутри flex-контейнера превращаются в
	   отдельные анонимные flex-items, и пробел между ними схлопывается на границе. */
	.case-detail__meta-item {
		display: inline-block;
		padding: 8px 12px;
		border-radius: var(--radius-full);
		background: #F3F1F7;
		color: #4E4660;
		font-weight: 600;
		font-size: 12px;
	}

	.case-detail__meta-item b {
		font-weight: 600;
		color: inherit;
	}

	/* «срок» в мета-строке — визуально как .chip-term (см. base.css/case-card.css),
	   но отдельный класс: сам .chip-term уже занят блоком цены на этой же странице. */
	.case-detail__meta-item--term {
		background: var(--case-cyan-bg);
		border: 1px solid var(--case-cyan-line);
		color: var(--color-secondary-dark);
		font-weight: 700;
	}

	.case-detail__meta-item--term b {
		font-weight: 700;
		color: inherit;
	}

	/* ── СЕТКА / КОЛОНКИ ──────────────────────────────────────── */
	.case-detail__grid {
		gap: 16px;
	}

	.case-detail__aside {
		gap: 16px;
	}

	/* ── ХАРАКТЕРИСТИКИ: первые 5, вертикальная раскладка строки ── */
	.case-detail__specs {
		border-radius: 20px;
	}

	.case-detail__specs-head {
		padding: 14px 16px;
		font-size: 15px;
	}

	.case-detail__params {
		padding: 0;
	}

	.case-detail__param-row {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 3px;
		padding: 12px 16px;
		border-top: none;
		border-bottom: 1px solid var(--case-line-2);
	}

	.case-detail__param-name {
		font-size: 11px;
		color: var(--case-text-4);
	}

	.case-detail__param-value {
		font-size: 14px;
	}

	.case-detail__param-row:nth-child(n + 6) {
		display: none;
	}

	.case-detail__specs.is-expanded .case-detail__param-row:nth-child(n + 6) {
		display: flex;
	}

	.case-detail__specs-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		border: 0;
		background: none;
		color: var(--brand-solid);
		font-family: inherit;
		font-weight: 700;
		font-size: 13px;
		cursor: pointer;
	}

	/* ── СТОИМОСТЬ ────────────────────────────────────────────── */
	.case-detail__price {
		padding: 18px 16px 16px;
		gap: 12px;
		background: var(--hh-bg-light);
	}

	.case-detail__price-label {
		font-size: 10px;
		letter-spacing: .15em;
	}

	.case-detail__price-pill {
		padding: 14px 20px;
		font-size: 26px;
	}

	.case-detail__price-pill--ask {
		font-size: 16px;
	}

	.case-detail__price-chips .chip-term {
		padding: 9px 14px;
		font-size: 13px;
	}

	/* ── ОПИСАНИЕ: заголовок + toggle, по умолчанию раскрыто ─── */
	/* gap сетки здесь 16px — пересчитываем компенсацию отбивки. */
	.case-single__description {
		margin-top: calc(var(--sp-section) - 16px);
	}

	.case-single__description-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: var(--sp-3);
	}

	.case-single__description-head h2 {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 800;
		font-size: 18px;
		letter-spacing: -.03em;
	}

	.case-single__description-toggle {
		flex-shrink: 0;
		background: none;
		border: 0;
		padding: 0;
		color: var(--brand-solid);
		font-family: inherit;
		font-weight: 700;
		font-size: 13px;
		cursor: pointer;
	}

	.case-single__description-inner.is-collapsed {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
	}
}

/* ≤640px — base.css переключает отбивку секций на --sp-section-mob,
   компенсация описания пересчитывается под неё. */
@media (max-width: 640px) {
	.case-single__description {
		margin-top: calc(var(--sp-section-mob) - 16px);
	}
}