/* ===========================================================================
   Сторінка «Гранітні стільниці»
   ---------------------------------------------------------------------------
   Секції тут навмисно різні за ритмом: перший екран на всю висоту, смуга
   каменю на всю ширину без полів, асиметричний розворот, рядки цін, тиха
   довідка про торець. Спільного шаблону в них немає — і це сама суть макета,
   а не недогляд.

   Між секціями — повітря, а не волосінь: на решті сайту межу тримає лінія
   кікера, тут її тримає порожнеча, і відступи більші за звичайні.
   =========================================================================== */

.gtk-wt-y { --gtk-wt-y: clamp(72px, 9vw, 150px); }

.gtk-wt-split-sec,
.gtk-wt-prices,
.gtk-wt-edges-sec,
.gtk-wt-works-sec {
	padding-block: clamp(72px, 9vw, 150px);
}

/* Секції йдуть підряд, і подвійний відступ між ними збирався б у прірву. */
.gtk-wt-prices,
.gtk-wt-edges-sec,
.gtk-wt-works-sec { padding-top: 0; }

.gtk-wt-head { margin-bottom: clamp(32px, 4vw, 56px); }
.gtk-wt-head .gtk-h2 { max-width: 20ch; }

.gtk-wt-note {
	margin-top: clamp(24px, 3vw, 36px);
	max-width: 64ch;
	font-size: var(--gtk-small);
}

/* ─────────────────────────── Прозора шапка ──────────────────────────────── */
/*
 * Шапка лягає на кадр тільки там, де кадр на весь екран.
 *
 * Клас вішає PHP за наявністю блока worktop-hero, тож решта сайту лишається
 * з білою липкою шапкою. Липкість тут довелося зняти свідомо: напівпрозора
 * шапка, що їде над світлою частиною сторінки, читається гірше за обидва
 * варіанти окремо.
 */
.gtk-hdr-over .gtk-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 0;
}

.gtk-hdr-over .gtk-logo,
.gtk-hdr-over .gtk-header__phone,
.gtk-hdr-over .gtk-nav a,
.gtk-hdr-over .gtk-lang a { color: var(--gtk-cream); }

.gtk-hdr-over .gtk-logo em { color: var(--gtk-bronze-on-ink); }
.gtk-hdr-over .gtk-nav a:hover,
.gtk-hdr-over .gtk-lang a:hover { color: var(--gtk-white); }
.gtk-hdr-over .gtk-lang a[aria-current] { color: var(--gtk-cream); }

.gtk-hdr-over .gtk-burger span { background: var(--gtk-cream); }
.gtk-hdr-over .gtk-cart { color: var(--gtk-cream); }

/*
 * Тінь під текстом шапки, а не плашка.
 *
 * Кадр угорі світліший за низ, і кремове меню на ньому місцями гасне.
 * Плашка вбила б сам прийом, тож лишається м'яка тінь: на темному її не
 * видно, на світлому вона повертає контур літерам.
 */
.gtk-hdr-over .gtk-header__inner { text-shadow: 0 1px 12px rgba(30, 28, 26, 0.55); }

/*
 * Успадковані секції беруть крок відступів сторінки.
 *
 * FAQ і «Коротко про матеріал» прийшли з інших лендингів, де крок удвічі
 * менший — 63 px проти 128. Поспіль із блоками стільниць вони читалися як
 * недоверстаний хвіст: угорі сторінки повітря вдвічі більше, ніж унизу.
 *
 * Прив'язка до gtk-hdr-over, а не до самих класів: цей клас стоїть на body
 * рівно там, де сторінку зібрано з нових блоків, і інші лендинги лишаються
 * зі своїм кроком.
 */
.gtk-hdr-over .gtk-landing__faq,
.gtk-hdr-over .gtk-landing__text {
	padding-block: clamp(72px, 9vw, 150px);
}

.gtk-hdr-over .gtk-landing__text { padding-top: 0; }

/* ───────────────────────────── Перший екран ─────────────────────────────── */

.gtk-wt-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: end;
	background: var(--gtk-ink);
	overflow: hidden;
}

.gtk-wt-hero__media { position: absolute; inset: 0; }

.gtk-wt-hero__media img,
.gtk-wt-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

/*
 * Затемнення знизу вгору, а не рівне по кадру.
 *
 * Рівна плівка гасить фотографію цілком; градієнт лишає верх майже чистим і
 * густішає рівно там, де лежить заголовок.
 */
.gtk-wt-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(30, 28, 26, 0.82) 0%, rgba(30, 28, 26, 0.3) 42%, rgba(30, 28, 26, 0.08) 70%);
}

/*
 * Друге, ледь помітне затемнення — під шапку.
 *
 * Кадр угорі може бути яким завгодно: на знімку вуличної кухні там світле
 * листя, і кремове меню на ньому читається на межі. Тінь від літер рятує
 * не завжди, а плашка вбила б сам прийом. Тому вузький градієнт, який
 * закінчується там, де закінчується шапка, — на темному кадрі його
 * не видно взагалі.
 */
.gtk-wt-hero__media::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 180px;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(30, 28, 26, 0.45) 0%, rgba(30, 28, 26, 0.18) 55%, transparent 100%);
}

.gtk-wt-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: clamp(56px, 7vw, 104px);
}

.gtk-wt-hero__title {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: clamp(44px, 6.4vw, 92px);
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--gtk-cream);
	max-width: 11ch;
}

.gtk-wt-hero__lead {
	margin: 22px 0 0;
	max-width: 40ch;
	font-size: 19px;
	color: rgba(242, 230, 217, 0.82);
}

.gtk-wt-hero__actions {
	margin-top: 38px;
	display: flex;
	gap: 30px;
	align-items: center;
	flex-wrap: wrap;
}

.gtk-link-arrow--cream { color: var(--gtk-cream); }

/* ────────────────────────────── Смуга каменю ────────────────────────────── */

.gtk-wt-band__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * 48vh — тимчасово, через розмір фактури лабрадориту.
 *
 * У макеті смуга на min(78vh, 760px). Полірований лабрадорит у медіатеці є
 * тільки 500×500 — ні вихідника, ні більшої копії в бекапах немає, — і на
 * висоті 760px він помітно розмився б. Термооброблений кадр того самого
 * каменю є на 1400px, але в термо лабрадорит втрачає сині переливи, тобто
 * саме те, заради чого його беруть на стільницю.
 *
 * Тому смуга нижча: на 48vh комірка виходить близько 460px, і полірований
 * кадр лишається різким. Коли з'являться VIZ-кадри (або один полірований
 * лабрадорит від 1200px) — повернути min(78vh, 760px).
 */
.gtk-wt-band__cell {
	position: relative;
	display: block;
	height: 48vh;
	min-height: 360px;
	overflow: hidden;
	text-decoration: none;
}

.gtk-wt-band__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--gtk-ease);
}

.gtk-wt-band__cell:hover img { transform: scale(1.04); }

.gtk-wt-band__cell::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(30, 28, 26, 0.72) 0%, rgba(30, 28, 26, 0.12) 45%, transparent 70%);
}

.gtk-wt-band__cap {
	position: absolute;
	left: clamp(20px, 2.4vw, 40px);
	right: clamp(20px, 2.4vw, 40px);
	bottom: clamp(24px, 2.6vw, 44px);
	z-index: 1;
}

.gtk-wt-band__cap h3 {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: 500;
	font-size: clamp(24px, 2vw, 32px);
	line-height: 1.1;
	color: var(--gtk-cream);
}

.gtk-wt-band__cap span {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(242, 230, 217, 0.72);
}

.gtk-wt-band__note { padding-top: clamp(28px, 3vw, 44px); }
.gtk-wt-band__note p { margin: 0; max-width: 60ch; font-size: var(--gtk-small); }

@media (max-width: 820px) {
	.gtk-wt-band__row { grid-template-columns: minmax(0, 1fr); }
	.gtk-wt-band__cell { height: 56vh; min-height: 320px; }
}

/* ─────────────────────── Велике фото й вузька колонка ───────────────────── */

.gtk-wt-split {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
	gap: clamp(32px, 5vw, 88px);
	align-items: center;
}

/*
 * Кадр виходить за ліве поле контейнера.
 *
 * Від'ємний відступ дорівнює самому полю, тож фото впирається точно в край
 * екрана й не далі — горизонтальної прокрутки з цього не буває.
 */
.gtk-wt-split__img {
	margin-left: calc(var(--gtk-gutter) * -1);
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--gtk-paper);
}

.gtk-wt-split__img img { width: 100%; height: 100%; object-fit: cover; }

.gtk-wt-split__body .gtk-h2 { max-width: 13ch; }
.gtk-wt-split__body p { margin: 24px 0 0; font-size: 17px; max-width: 44ch; }
.gtk-wt-split__body p + p { margin-top: 16px; }

@media (max-width: 900px) {
	.gtk-wt-split { grid-template-columns: minmax(0, 1fr); }
	.gtk-wt-split__img { margin-left: 0; aspect-ratio: 4 / 3; }
}

/* ────────────────────────────── Ціни рядками ────────────────────────────── */

/* Якір попередньої версії сторінки: посилання на #collection не мають вмерти. */
.gtk-wt-anchor { display: block; position: relative; top: calc(var(--gtk-header-h, 77px) * -1); }

.gtk-wt-rows {
	border-top: 1px solid var(--gtk-ink);
	margin-top: clamp(32px, 4vw, 56px);
}

.gtk-wt-row {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr) auto;
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--gtk-line-strong);
	text-decoration: none;
	color: inherit;
	transition: background var(--gtk-transition);
}

.gtk-wt-row:hover { background: var(--gtk-brand-tint); }

.gtk-wt-row__img {
	display: block;
	width: 132px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--gtk-paper);
}

.gtk-wt-row__img img { width: 100%; height: 100%; object-fit: cover; }

.gtk-wt-row__body { display: block; min-width: 0; }

.gtk-wt-row__stone {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}

.gtk-wt-row__name {
	display: block;
	font-family: var(--gtk-font-display);
	font-weight: 500;
	font-size: 23px;
	line-height: 1.25;
	color: var(--gtk-ink);
}

.gtk-wt-row__conf { display: block; margin-top: 5px; font-size: 15px; color: var(--gtk-text-muted); }

.gtk-wt-row__price {
	font-weight: 500;
	font-size: 26px;
	line-height: 1.2;
	color: var(--gtk-ink);
	white-space: nowrap;
	text-align: right;
}

@media (max-width: 860px) {
	.gtk-wt-row {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 6px 20px;
		padding: 18px 0;
	}
	.gtk-wt-row__img { width: 96px; grid-row: 1 / 3; }
	.gtk-wt-row__price { grid-column: 2; text-align: left; font-size: 22px; }
}

/* ──────────────────────────────── Торець ───────────────────────────────── */

/*
 * Блок вужчий за решту сторінки — він навмисно тихий.
 *
 * Це довідка перед розмовою з менеджером, а не аргумент на користь каменю,
 * тому й контур без заливки, і ширина менша за контейнер.
 */
.gtk-wt-edges {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 56px);
	align-items: end;
	max-width: 1100px;
}

.gtk-wt-edge svg { width: 100%; height: auto; display: block; }
.gtk-wt-edge svg path { fill: none; stroke: var(--gtk-ink); stroke-width: 1.5; }

.gtk-wt-edge h3 {
	margin: 18px 0 0;
	font-family: var(--gtk-font-display);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.3;
	color: var(--gtk-ink);
}

.gtk-wt-edge p { margin: 2px 0 0; font-size: 15px; color: var(--gtk-text-muted); }

@media (max-width: 700px) {
	.gtk-wt-edges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ──────────────────────────────── Роботи ───────────────────────────────── */

.gtk-wt-works {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 32px);
}

.gtk-wt-work { display: block; text-decoration: none; color: inherit; min-width: 0; }
.gtk-wt-work--wide { grid-column: span 2; }

.gtk-wt-work__img {
	display: block;
	overflow: hidden;
	background: var(--gtk-paper);
	aspect-ratio: 3 / 2;
}

.gtk-wt-work--tall .gtk-wt-work__img { aspect-ratio: 3 / 4; }

.gtk-wt-work__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--gtk-ease);
}

.gtk-wt-work:hover img { transform: scale(1.03); }

.gtk-wt-work__cap {
	display: block;
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--gtk-text);
}

.gtk-wt-works-sec .gtk-link-arrow { margin-top: clamp(24px, 3vw, 36px); }

@media (max-width: 820px) {
	.gtk-wt-works { grid-template-columns: minmax(0, 1fr); }
	.gtk-wt-work--wide { grid-column: auto; }
}