/* =========================================================
   ГЛАВНАЯ СТРАНИЦА — по макету Figma «HP», фрейм main.html
   Подключается только на index.html.
   ========================================================= */

/* Шрифт Inter: если он установлен на компьютере посетителя,
   используется он; иначе — похожий системный шрифт. */
:root {
	--bg: #141414;
	--text: #ffffff;
	--gutter: 40px;
	/* поля по краям: шапка и подвал */
	--tile-height: 640px;
	/* высота плиток в сетке */
	--font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-weight: 300;
	/* Inter Light для обычного текста */
	font-size: 16px;
	line-height: normal;
}

img {
	display: block;
	max-width: none;
}

/* --- Шапка с логотипом --- */
.home-header {
	display: flex;
	justify-content: center;
	padding: var(--gutter);
}

.home-header a {
	display: block;
	line-height: 0;
}

.home-header img {
	width: 360px;
	max-width: 100%;
	height: auto;
}

/* --- Сетка работ ---
   Плитки тянутся (flex: 1), у каждой есть мин. и макс. ширина.
   Когда в ряд не помещается — плитка переносится на новую строку.
   Между плитками 1px. */
.works {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	padding-top: var(--gutter);
	padding-bottom: 160px;
}

.tile {
	position: relative;
	flex: 1 0 0;
	min-width: 360px;
	max-width: 500px;
	height: var(--tile-height);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

/* Картинки в обложках «прозрачны» для курсора: наведение и клик получает сама ссылка.
   Так Яндекс Браузер не показывает поверх картинок свою кнопку поиска по изображению,
   а картинку нельзя случайно утащить мышью. */
.tile img {
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

/* Прозрачный слой поверх всей плитки — дополнительная защита от кнопок браузера над картинкой */
.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.tile--wide {
	max-width: 1000px;
}

.tile--archive {
	min-width: 720px;
	max-width: 1440px;
}

/* Подпись внизу плитки */
.tile__caption {
	position: absolute;
	left: 0;
	right: 0;
	top: 599px;
	margin: 0;
	text-align: center;
	font-size: 16px;
}

/* Мелкая надпись над подписью («3D модель») */
.tile__kicker {
	position: absolute;
	left: 0;
	right: 0;
	top: 587px;
	margin: 0;
	text-align: center;
	font-size: 10px;
}

.tile--dark-text {
	color: #000;
}

/* Лёгкая реакция на наведение: обложка плавно приближается.
   Скорость — 1.2s; чтобы сделать быстрее или медленнее, поменяйте это число.
   Кривая cubic-bezier даёт мягкий разгон и очень плавное торможение. */
.tile__art {
	transition: transform 6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	/* браузер заранее готовит слой — без дрожания */
	backface-visibility: hidden;
}

a.tile:hover .tile__art {
	transform: scale(1.05);
}

/* Картинка по центру плитки по вертикали, во всю ширину */
.tile__art {
	position: absolute;
}

.tile__art--center-y {
	left: 0;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	width: 100%;
	height: auto;
}

/* 1. Пьюр Эир */
.tile--pure-air {
	background: #ffffff;
}

/* 2. Лайфмебель */
.tile--lifemebel {
	background: #00cc44;
}

.lm-art {
	position: absolute;
	left: -8.5px;
	right: -7.17px;
	top: calc(50% + 0.5px);
	translate: 0 -50%;
	aspect-ratio: 1;
}

.lm-art img {
	width: 96.97%;
	height: auto;
}

/* 480 из 495 */

/* 3. Медфорд */
.tile--medford {
	background: #000000;
}

.medford-tagline {
	position: absolute;
	top: 86px;
	left: 50%;
	translate: -50% 0;
}

.medford-wordmark {
	position: absolute;
	bottom: 101px;
	left: calc(50% - 1.17px);
	translate: -50% 0;
}

/* 4. Винтажное кресло */
.tile--chair {
	background: #f6f6f6;
}

.chair-art {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 640px;
	height: 640px;
	translate: -50% -50%;
}

/* 5. Спирограф */
.tile--spirograph {
	background: #15191e;
}

.spirograph-art {
	position: absolute;
	left: calc(50% - 0.5px);
	top: -38px;
	width: 632px;
	height: 732px;
	translate: -50% 0;
	object-fit: cover;
}

/* 6. Архив */
.tile--archive {
	background: #141414;
}

.archive-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Подвал --- */
.home-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: var(--gutter);
	line-height: 1;
}

.home-footer p {
	margin: 0;
}

.home-footer a {
	color: inherit;
	text-underline-position: from-font;
}

/* --- Телефоны --- */
@media (max-width: 760px) {
	:root {
		--gutter: 20px;
	}

	.tile,
	.tile--archive {
		min-width: 100%;
	}
}

/* Тонкое подчёркивание у всех ссылок на сайте.
   Толщину меняйте здесь (0.3px — очень тонко). */
a {
	text-decoration-thickness: 0.3px;
	text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
	/* линия полупрозрачная: 40% цвета текста */
}