/* ==========================================================================
   Главная страница

   Композиция повторяет оригинал: шесть плиток — главный элемент, сразу под
   шапкой, а каллиграфическая фраза лежит слоем ПОД ними.

   Координаты сняты с исходной картинки assets/img/mainfon6.png (1180x400)
   попиксельным разбором, поэтому фразы стоят там же, где были нарисованы,
   и так же частично уходят под плитки: в оригинале текст в просветах шире
   самих просветов (63px и 55px против зазора 36px), то есть заходит под
   соседние плитки на 13-20 пикселей.

   Всё внутри полосы считается в cqw — долях её ширины. Композиция
   масштабируется целиком, как масштабировалась бы картинка, но остаётся
   резкой на любом экране и выделяется мышью.
   ========================================================================== */

.chr-front {
	padding-block: var(--space-l) var(--space-xl);
}

/* --- Вступительная строка над полосой --- */

.chr-stage__title {
	max-width: 46rem;
	margin-inline: auto;
	font-family: var(--font-script);
	font-size: var(--step-3);
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
}

/* --- Полоса с плитками --- */

.chr-stage {
	margin-block-start: var(--space-l);
}

/* --- Плитки --- */

.chr-tiles {
	display: grid;
	/* 130px подобрано так, чтобы на экране 375px помещались две колонки */
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: var(--space-l) var(--space-m);
	max-width: 40rem;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

/* Больше трёх в ряд не ставим — иначе теряется исходная композиция 3x2 */
@media (min-width: 560px) {
	.chr-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*
 * Плитка объявлена контейнером, чтобы подпись на обороте считала кегль
 * от её ширины. Ширина разная: три колонки на десктопе, две на планшете,
 * одна на телефоне — привязка к экрану тут не работает.
 */
.chr-tile {
	container-type: inline-size;
}

.chr-tile__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	color: inherit;
}

.chr-tile__link:hover,
.chr-tile__link:focus-visible {
	text-decoration: none;
}

.chr-tile__flip {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	perspective: 1000px;
}

.chr-tile__face {
	position: absolute;
	inset: 0;
	display: grid;
	/*
	 * Явный трек minmax(0, 1fr) вместо неявного auto. У auto минимальный
	 * размер равен min-content, поэтому одно слово длиннее плитки —
	 * «Метаморфозы» — раздвигало колонку, и подпись выезжала за рамку.
	 */
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	padding: var(--space-2xs);
	backface-visibility: hidden;
	transition: transform 0.6s ease;
}

.chr-tile__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chr-tile__face--back {
	background-color: var(--c-tile-back);
	border: 1px solid var(--c-accent);
	transform: rotateX(-180deg);
}

.chr-tile__back-text {
	font-family: var(--font-script);
	/*
	 * Кегль считается от ширины плитки, но не крупнее шага шкалы.
	 * Предел задаёт самый длинный неразрывный кусок подписи. Это
	 * «Метаморфозы» вместе с обеими кавычками — «Метаморфозы» целиком,
	 * а не одно слово: замер по слову без открывающей кавычки дал 11.63cqi,
	 * с ней — 10.93, и при кегле 11 закрывающая кавычка уезжала на
	 * отдельную строку. Берём 10 с запасом: следующая по тесноте подпись
	 * («Пространство») терпит до 13.48, а сами подписи редактируются
	 * из админки и могут стать длиннее.
	 */
	font-size: min(var(--step-1), 10cqi);
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	max-width: 100%;
	/* Страховка на случай подписи длиннее нынешних: перенос, а не вылет. */
	overflow-wrap: break-word;
}

/*
 * Переворот — только там, где есть мышь. На тач-экранах наведения не бывает,
 * поэтому подпись там просто видна под картинкой.
 */
@media (hover: hover) {
	.chr-tile__link:hover .chr-tile__face--front,
	.chr-tile__link:focus-visible .chr-tile__face--front {
		transform: rotateX(180deg);
	}

	.chr-tile__link:hover .chr-tile__face--back,
	.chr-tile__link:focus-visible .chr-tile__face--back {
		transform: rotateX(0deg);
	}

	.chr-tile__caption {
		display: none;
	}
}

.chr-tile__caption {
	font-family: var(--font-script);
	font-size: var(--step-0);
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
}

/* ==========================================================================
   Каллиграфия под плитками

   До порога в 1000px слой скрыт: при пропорциональном уменьшении текст
   становится нечитаемым росчерком. В оригинале он на узких экранах тоже
   пропадал — сначала обрезался по краям, а с 660px отключался совсем.
   ========================================================================== */

.chr-calligraphy {
	display: none;
}

@media (min-width: 1000px) {
	.chr-stage {
		position: relative;
		container-type: inline-size;
		width: min(100%, 1180px);
		margin-inline: auto;
		aspect-ratio: 1180 / 400;
	}

	.chr-calligraphy {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	.chr-calligraphy__item {
		position: absolute;
		display: block;
		font-family: var(--font-script);
		line-height: 1.32;
		color: var(--c-ink);
		transform-origin: 0 0;
	}

	/*
	 * Каждый фрагмент: положение и ширина в долях полосы, кегль тоже.
	 * Небольшой поворот повторяет наклон рукописных строк оригинала —
	 * их кривизну обычным текстом не воспроизвести.
	 */
	.chr-calligraphy__item--l-top {
		left: 11.44cqw;
		top: 1.02cqw;
		width: 16.19cqw;
		font-size: 2.46cqw;
		transform: rotate(-5deg);
	}

	.chr-calligraphy__item--l-bottom {
		left: 9.83cqw;
		top: 17.97cqw;
		width: 18.56cqw;
		font-size: 2.63cqw;
		transform: rotate(-4deg);
	}

	.chr-calligraphy__item--r-top {
		left: 74.66cqw;
		top: 0.34cqw;
		width: 16.53cqw;
		font-size: 2.2cqw;
		transform: rotate(-4deg);
	}

	.chr-calligraphy__item--r-bottom {
		left: 75.17cqw;
		top: 17.03cqw;
		width: 15.51cqw;
		font-size: 2.2cqw;
		transform: rotate(-5deg);
	}

	/*
	 * Фрагменты в просветах между плитками. Просвет всего 36 пикселей, и
	 * в оригинале слова там разбиты посреди слова: «Ма-стер-ская». Поэтому
	 * здесь разрешён перенос в любом месте — иначе пришлось бы уменьшать
	 * кегль вдвое и надпись потерялась бы.
	 */
	.chr-calligraphy__item--g1-top,
	.chr-calligraphy__item--g1-bottom,
	.chr-calligraphy__item--g2-top,
	.chr-calligraphy__item--g2-bottom {
		overflow-wrap: anywhere;
		hyphens: none;
	}

	.chr-calligraphy__item--g1-top {
		left: 40.93cqw;
		top: 1.36cqw;
		width: 4.07cqw;
		font-size: 1.61cqw;
	}

	.chr-calligraphy__item--g1-bottom {
		left: 40cqw;
		top: 17.54cqw;
		width: 5.34cqw;
		font-size: 1.95cqw;
	}

	.chr-calligraphy__item--g2-top {
		left: 57.88cqw;
		top: 2.46cqw;
		width: 3.98cqw;
		font-size: 1.19cqw;
	}

	.chr-calligraphy__item--g2-bottom {
		left: 58.05cqw;
		top: 18.05cqw;
		width: 4.49cqw;
		font-size: 1.36cqw;
	}

	/*
	 * Плитки поверх текста, в тех же координатах, что и в оригинале:
	 * блок 552x356 со смещением 325 по горизонтали и 17 по вертикали,
	 * зазор 36 — всё пересчитано в доли ширины полосы 1180.
	 */
	.chr-stage .chr-tiles {
		position: absolute;
		z-index: 1;
		left: 27.54cqw;
		top: 1.44cqw;
		width: 46.78cqw;
		height: 30.17cqw;
		max-width: none;
		margin: 0;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 3.05cqw;
	}

	/*
	 * В режиме композиции подпись под плиткой не выводится: её показывает
	 * оборот при наведении, а лишняя строка сломала бы сетку 3x2.
	 */
	.chr-stage .chr-tile__caption {
		display: none;
	}
}

/* --- Цитаты --- */

.chr-quotes {
	max-width: 40rem;
	margin: var(--space-xl) auto 0;
	text-align: center;
}

.chr-quotes__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Все цитаты лежат в одной ячейке сетки друг поверх друга: блок занимает
 * место по самой длинной и не прыгает при смене. Раньше окно было жёстко
 * 160x100 пикселей при кегле 10px, и текст из него просто вываливался.
 */
.chr-quotes__item {
	grid-area: 1 / 1;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-style: italic;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--c-ink-soft);
	opacity: 0;
	transition: opacity 1.2s ease;
	pointer-events: none;
}

.chr-quotes__item.is-active {
	opacity: 1;
	pointer-events: auto;
}