/* ===========================================================================
   СТОРІНКА «ПОРТФОЛІО» — кладка
   ---------------------------------------------------------------------------
   Фотографії різної орієнтації, складені як цегла: кожна колонка тече своєю
   висотою, а читається все зліва направо, рядок за рядком.

   Бежевої шапки сторінки тут немає — усе на білому. Це не косметика: над
   сорока знімками кремова смуга поводиться як ще одна фотографія й забирає
   перший екран.

   Токени лише зі style.css.
   =========================================================================== */

.gtk-pf {
	padding-block: clamp(36px, 5vw, 64px) clamp(64px, 8vw, 110px);
	background: var(--gtk-white);
}

/* ---------------------------------------------------------------------------
   Шапка
   --------------------------------------------------------------------------- */

.gtk-pf__wrap > .gtk-crumbs { margin-bottom: clamp(24px, 3vw, 40px); }

/* Кікер із лінією до краю — та сама мітка розділу, що на решті сайту, але
   тут вона заміняє собою шапку сторінки, тож тягнеться через увесь рядок. */
.gtk-pf__eyebrow {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--gtk-track-kicker);
	text-transform: uppercase;
	color: var(--gtk-bronze-text);
}

.gtk-pf__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gtk-line);
}

.gtk-pf__head {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 40px;
	align-items: end;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.gtk-pf__title {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: var(--gtk-weight-display);
	font-size: clamp(46px, 7vw, 92px);
	line-height: .95;
	letter-spacing: -.01em;
	color: var(--gtk-ink);
}

.gtk-pf__title em {
	font-style: normal;
	color: var(--gtk-bronze-text);
}

.gtk-pf__count {
	margin: 0 0 6px;
	font-family: var(--gtk-font-display);
	font-size: 20px;
	color: var(--gtk-ink);
	/* tnum — щоб число не «дихало» після зміни кількості робіт. */
	font-feature-settings: 'tnum';
}

.gtk-pf__lead {
	margin: 0;
	max-width: 40ch;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
}

/* ---------------------------------------------------------------------------
   Фільтри
   --------------------------------------------------------------------------- */

/*
 * Обгортка тримає рамку, панель — розкладку.
 *
 * Розділені вони заради телефона: там панель ховається цілком, а рамка з
 * кнопкою «Фільтри» лишається на місці. На широкому екрані панель — це та
 * сама флекс-стрічка груп, що була тут раніше.
 */
.gtk-pf__filters {
	padding: 18px 0;
	border-top: 1px solid var(--gtk-ink);
	border-bottom: 1px solid var(--gtk-line);
	margin-bottom: clamp(28px, 4vw, 44px);
}

.gtk-pf__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
}

/* Перемикач і кнопка внизу живуть лише на вузькому екрані. */
.gtk-pf__toggle,
.gtk-pf__done { display: none; }

.gtk-pf__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
}

/* Праворуч, поки в рядку є місце; коли фільтри переносяться — стає під. */
.gtk-pf__group--right { margin-left: auto; }

.gtk-pf__flabel {
	margin-right: 6px;
	font-size: 11px;
	letter-spacing: var(--gtk-track-kicker);
	text-transform: uppercase;
	color: var(--gtk-text-muted);
}

.gtk-pf__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 2px;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	/*
	 * Astra дає всім <button> скруглення й тінь. На тонкій вкладці їх не було
	 * видно, але щойно вкладка виросла до сорока чотирьох пікселів під палець,
	 * під кожним написом проступила світла плашка з м'яким кутом — те, чого в
	 * темі немає ніде.
	 */
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	font-size: var(--gtk-small);
	/* Щільний рядок: вкладки стоять в одну лінію з підписом «Виріб». */
	line-height: 1.2;
	color: var(--gtk-text);
	cursor: pointer;
	transition: color var(--gtk-transition), border-color var(--gtk-transition);
}

.gtk-pf__chip:hover { color: var(--gtk-ink); }

.gtk-pf__chip.is-on {
	color: var(--gtk-ink);
	border-bottom-color: var(--gtk-bronze);
}

.gtk-pf__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
}

/*
 * Кольори крапок — ті самі, що в старій панелі фільтрів робіт: це не тло
 * сайту, а зразок каменю, і він має збігатися з тим, що людина побачить на
 * фотографії.
 */
.gtk-pf__dot[data-color="korychnevyi"] { background: #8B5A3C; }
.gtk-pf__dot[data-color="siryi"] { background: #9A9A96; }
.gtk-pf__dot[data-color="chornyi"] { background: #2B2B2B; }

/* ---------------------------------------------------------------------------
   Кладка
   --------------------------------------------------------------------------- */

/*
 * Проміжок — три конкретні числа, а не clamp().
 *
 * Тут це не питання смаку. Кладку розкладає скрипт: він читає проміжок і
 * додає його до висоти плитки. Змінна з clamp() повертається йому рядком
 * «clamp(16px, 2vw, 28px)» — власні властивості CSS не обчислює, — і
 * parseFloat на такому рядку дає NaN, тобто нуль. Саме тому проміжок по
 * горизонталі був, а по вертикалі зникав: колонки розсувала сама сітка, а
 * рядки рахував скрипт із нулем.
 *
 * Скрипт тепер бере обчислений column-gap, який браузер завжди віддає в
 * пікселях, тож повторити цю пастку складно. Але й самі значення хай
 * лишаються простими: число видно, і воно однакове в обох напрямках.
 */
.gtk-pf__grid {
	--gtk-pf-gap: 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gtk-pf-gap);
}

/*
 * Кладку вмикає скрипт, а не таблиця стилів.
 *
 * Прийом такий: рядок сітки завтовшки в піксель, а кожна плитка займає
 * стільки рядків, якої вона висоти. Автоматичне розміщення саме кладе
 * наступну плитку в перше вільне місце — тобто в найкоротшу колонку, —
 * і порядок при цьому лишається порядком розмітки: зліва направо, рядок за
 * рядком.
 *
 * Без JS клас не з'явиться, і лишиться звичайна сітка з трьох рівних
 * колонок: не кладка, але й не купа восьмипіксельних смуг.
 */
.gtk-pf__grid.is-masonry {
	grid-template-rows: none;
	grid-auto-rows: 1px;
	row-gap: 0;
	align-items: start;
}

/*
 * Відступу знизу в плитки більше немає.
 *
 * Він тут нічого не робив: місце плитці виділяє сітка рядками по пікселю,
 * і зовнішній відступ просто вилазив за межі відведеної площі, нікого не
 * посуваючи. Вертикальний проміжок створює сам скрипт, додаючи його до
 * кількості рядків.
 *
 * Зате останній ряд лишав під собою зайвий проміжок — площа плитки на
 * нього більша, ніж сама плитка. Від'ємний відступ у сітки його з'їдає,
 * і низ кладки збігається з низом останньої плитки.
 */
.gtk-pf__grid.is-masonry { margin-bottom: calc(var(--gtk-pf-gap) * -1); }

.gtk-pf__tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--gtk-paper);
	color: inherit;
}

.gtk-pf__frame {
	display: block;
	width: 100%;
}

/* Пропорцію задає орієнтація самого знімка — див. gtkhouse_portfolio_shape(). */
.gtk-pf__frame--l { aspect-ratio: 4 / 3; }
.gtk-pf__frame--p { aspect-ratio: 3 / 4; }
.gtk-pf__frame--s { aspect-ratio: 1 / 1; }

.gtk-pf__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--gtk-ease);
}

.gtk-pf__tile:hover .gtk-pf__img,
.gtk-pf__tile:focus-visible .gtk-pf__img { transform: scale(1.04); }

/*
 * Номер відступає від краю, а не тулиться до нього.
 *
 * Притиснутий до кута він читався як службова позначка на фотографії —
 * щось на кшталт номера кадру. Дванадцять пікселів роблять із нього
 * частину плитки. Кут один і той самий на всіх: лівий верхній, поки підпис
 * лежить унизу й вони не сперечаються.
 */
.gtk-pf__num {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 1;
	padding: 8px 12px;
	background: var(--gtk-white);
	font-family: var(--gtk-font-display);
	font-size: 14px;
	letter-spacing: .12em;
	line-height: 1;
	color: var(--gtk-bronze-text);
	font-feature-settings: 'tnum';
}

/*
 * Підпис лежить на градієнті, а не на суцільній плашці.
 *
 * Знімки різні за яскравістю: суцільна смуга то зливалася б із кадром, то
 * різала його навпіл. Градієнт від майже чорного до прозорого тримає текст
 * читабельним і не ховає фотографію.
 */
.gtk-pf__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 44px 18px 16px;
	background: linear-gradient(to top, rgba(20, 18, 16, .78), rgba(20, 18, 16, 0));
	color: var(--gtk-white);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s var(--gtk-ease), transform .3s var(--gtk-ease);
}

.gtk-pf__tile:hover .gtk-pf__cap,
.gtk-pf__tile:focus-visible .gtk-pf__cap {
	opacity: 1;
	transform: none;
}

/*
 * Назва роботи всередині підпису, а не заголовок сторінки.
 *
 * Клас навмисно інший: `gtk-pf__title` уже зайнятий H1 угорі, і спільне
 * ім'я означало б, що правило плитки — воно нижче за файлом — мовчки
 * перефарбовує заголовок сторінки в біле й зменшує його до 22 пікселів.
 */
.gtk-pf__cap-title {
	display: block;
	margin: 0 0 4px;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.15;
	color: var(--gtk-white);
}

.gtk-pf__meta {
	display: block;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}

/* ---------------------------------------------------------------------------
   Порожній стан, «Показати ще», заклик
   --------------------------------------------------------------------------- */

.gtk-pf__empty {
	margin: 0;
	padding: clamp(40px, 6vw, 80px) 0;
	text-align: center;
	color: var(--gtk-text-muted);
}

.gtk-pf__more {
	margin-top: 40px;
	text-align: center;
}

.gtk-pf__more .gtk-btn[hidden] { display: none; }

.gtk-pf__cta {
	margin-top: clamp(48px, 7vw, 88px);
	padding-top: clamp(28px, 4vw, 44px);
	border-top: 1px solid var(--gtk-ink);
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 32px;
	align-items: center;
}

.gtk-pf__cta-title {
	margin: 0;
	font-family: var(--gtk-font-display);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.05;
	color: var(--gtk-ink);
}

.gtk-pf__cta-title em {
	font-style: normal;
	color: var(--gtk-bronze-text);
}

.gtk-pf__cta p {
	margin: 0 0 18px;
	font-size: var(--gtk-small);
	line-height: var(--gtk-lh-small);
}

/* ---------------------------------------------------------------------------
   Вузькі екрани
   --------------------------------------------------------------------------- */

@media (max-width: 959px) {
	.gtk-pf__head,
	.gtk-pf__cta {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.gtk-pf__grid {
		--gtk-pf-gap: 16px;
		grid-template-columns: repeat(2, 1fr);
	}
	.gtk-pf__group--right { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   Згорнуті фільтри на телефоні
   --------------------------------------------------------------------------- */

/*
 * Поріг 720, а не 768: саме на цій ширині три групи перестають стояти в
 * два рядки й починають з'їдати понад третину екрана до першої плитки.
 *
 * Клас is-js вішає скрипт. Без нього панель лишається розкритою: кнопка
 * «Фільтри», яка нічого не розкриває, гірша за довгий, але робочий рядок
 * вкладок.
 */
/*
 * 719.98, а не 719: при масштабуванні екрана viewport буває дробовим
 * (719,5 px), і цілий поріг лишав такий екран із розгорнутими фільтрами —
 * тобто рівно в тому стані, заради якого все й робилося.
 */
@media (max-width: 719.98px) {
	.gtk-pf__filters.is-js .gtk-pf__toggle {
		display: inline-flex;
		/*
		 * По центру, а не по базовій лінії: у шеврона свого тексту немає,
		 * і його базова лінія лежить по нижньому краю — на базовій
		 * розкладці він провисав під рядок «Фільтри».
		 */
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		font: inherit;
		font-size: 11px;
		letter-spacing: var(--gtk-track-kicker);
		text-transform: uppercase;
		color: var(--gtk-ink);
		cursor: pointer;
	}

	/* Кнопка схована атрибутом доти, доки скрипт не візьме її під контроль. */
	.gtk-pf__toggle[hidden],
	.gtk-pf__done[hidden] { display: none; }

	/* Лічильник активних груп: «Фільтри · 2». */
	.gtk-pf__toggle-n {
		font-style: normal;
		color: var(--gtk-bronze-text);
	}

	.gtk-pf__toggle-n[hidden] { display: none; }

	/* Стрілка-шеврон: повертається, коли панель розкрита. */
	.gtk-pf__filters.is-js .gtk-pf__toggle::after {
		content: '';
		width: 7px;
		height: 7px;
		margin-left: auto;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform var(--gtk-transition);
	}

	.gtk-pf__filters.is-js .gtk-pf__toggle {
		width: 100%;
		justify-content: flex-start;
	}

	.gtk-pf__filters.is-js.is-open .gtk-pf__toggle::after {
		transform: rotate(-135deg) translateY(-2px);
	}

	.gtk-pf__filters.is-js .gtk-pf__panel { display: none; }

	.gtk-pf__filters.is-js.is-open .gtk-pf__panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding-top: 10px;
		border-top: 1px solid var(--gtk-line);
		margin-top: 12px;
	}

	.gtk-pf__filters.is-js.is-open .gtk-pf__done {
		display: block;
		width: 100%;
		margin-top: 14px;
	}
}

@media (max-width: 559px) {
	.gtk-pf__grid {
		--gtk-pf-gap: 12px;
		grid-template-columns: 1fr;
	}

	/*
	 * На телефоні вкладка виростає до сорока чотирьох пікселів.
	 *
	 * У рядку їх десяток, і з настільними відступами в 6 пікселів висота
	 * виходила близько двадцяти семи — пальцем у таку не влучиш, сусідня
	 * вкладка ловить дотик замість потрібної. На широкому екрані вкладки
	 * лишаються тонкою лінією: там ціль ловить курсор, а не палець.
	 */
	.gtk-pf__chip { padding-block: 13px; }

	/*
	 * На вузькому екрані підпис видно завжди.
	 *
	 * Наведення там нічим не викликати, а без підпису плитка перетворюється
	 * на картинку без назви — незрозуміло, куди вона веде.
	 */
	.gtk-pf__cap {
		opacity: 1;
		transform: none;
	}
}

/* Те саме там, де курсора немає взагалі. */
@media (hover: none) {
	.gtk-pf__cap {
		opacity: 1;
		transform: none;
	}
}

/*
 * Системне «менше руху» знімає масштабування знімка.
 *
 * Підпис лишається: його поява — це не декоративний рух, а єдиний спосіб
 * дізнатися назву роботи, не відкриваючи її.
 */
@media (prefers-reduced-motion: reduce) {
	.gtk-pf__img { transition: none; }
	.gtk-pf__tile:hover .gtk-pf__img,
	.gtk-pf__tile:focus-visible .gtk-pf__img { transform: none; }
}