/* ==========================================================================
   book.css — страница книги «Звездобратия, или футбол „по слуху“», /book/.

   ОТКУДА. html_flat/starco_book_concept.html, заготовка после вычитания
   base.css — migrate/css_draft/book.css. Здесь она вычищена: убраны общие
   узлы (шапка, подвал, мобильное меню, .reveal и их брейкпоинты).

   ОБЛОЖКА — ЭТО CSS, А НЕ КАРТИНКА. Книга нарисована слоями: корешок в
   .book:before, фон и затемнение в .book-cover, текст поверх. В концепте
   поверх фона лежал ещё портрет автора (--yuri-image), в теме этого файла
   нет — правило .book-cover:before снято целиком, а не оставлено пустым,
   чтобы не притворяться, будто картинка просто не загрузилась. Появится
   файл в design/t1/img/ — правило возвращается одной строкой.

   .event-people ИЗ КОНЦЕПТА НЕ ПЕРЕНЕСЕНО: имена гостей презентации там
   дублировали секцию «Герои книги», которая теперь приходит из блоков.
   ========================================================================== */

/* ------------------------------------------------- общая типографика --- */
/* Дубль: .section-title/.section-copy есть во всех концептах и должны жить
   в base.css. Пока их там нет — копия в каждом постраничном файле. */
.section-title {
	font-size: clamp(38px, 4.5vw, 64px);
	line-height: .96;
	letter-spacing: -.05em;
	margin: 15px 0 22px;
	font-weight: 950;
	text-transform: uppercase;
	text-wrap: balance;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}
.section-copy { font-size: 18px; line-height: 1.72; color: #536176; max-width: 800px; }

h1, h2, h3, h4 { word-break: normal; overflow-wrap: normal; hyphens: none; text-wrap: balance; }

/* ------------------------------------------------------------- шапка -- */
.hero {
	padding: 145px 0 78px;
	background:
		radial-gradient(circle at 82% 18%, rgba(230, 192, 76, .13), transparent 19%),
		radial-gradient(circle at 12% 78%, rgba(217, 8, 18, .12), transparent 24%),
		linear-gradient(128deg, var(--navy2), var(--navy) 52%, #0a518f);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, transparent 0 88px, rgba(255, 255, 255, .024) 89px 90px);
}
.hero:after {
	content: "BOOK";
	position: absolute;
	right: -12px;
	bottom: -75px;
	font-size: clamp(155px, 19vw, 320px);
	font-weight: 950;
	line-height: .78;
	letter-spacing: -.09em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .05);
}
.hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 80px;
	align-items: center;
}

.hero-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #cce6ff;
}
.hero-kicker strong { background: var(--red); padding: 8px 12px; border-radius: 999px; color: #fff; }

.hero h1 {
	font-size: clamp(48px, 5.4vw, 78px);
	line-height: .9;
	letter-spacing: -.055em;
	text-transform: uppercase;
	margin: 25px 0 23px;
	font-weight: 950;
}
.hero h1 span {
	display: block;
	color: var(--gold);
	font-size: .56em;
	line-height: 1.02;
	margin-top: 16px;
	letter-spacing: -.025em;
}

/* .hero-lead — обёртка вокруг $page->body с готовыми <p> внутри. */
.hero p,
.hero-lead {
	font-size: 18px;
	line-height: 1.68;
	color: rgba(255, 255, 255, .73);
	max-width: 670px;
	margin: 0;
}
.hero-lead p { margin: 0 0 14px; }
.hero-lead p:last-child { margin-bottom: 0; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ---------------------------------------------------------- обложка --- */
.book-stage { position: relative; min-height: 535px; display: grid; place-items: center; perspective: 1200px; }
.book-shadow {
	position: absolute;
	width: 58%;
	height: 50px;
	left: 22%;
	bottom: 22px;
	background: rgba(0, 0, 0, .34);
	filter: blur(22px);
	border-radius: 50%;
}
.book {
	position: relative;
	width: min(390px, 72%);
	aspect-ratio: .72;
	transform: rotateY(-10deg) rotateZ(2deg);
	transform-style: preserve-3d;
	filter: drop-shadow(0 35px 40px rgba(0, 0, 0, .38));
}
/* Корешок: уводится за плоскость обложки по Z, поэтому у .book и нужен
   preserve-3d, а у сцены — perspective. */
.book:before {
	content: "";
	position: absolute;
	left: -18px;
	top: 8px;
	bottom: 8px;
	width: 23px;
	background: linear-gradient(90deg, #081d34, #154a79);
	transform: translateZ(-14px);
	border-radius: 8px 0 0 8px;
}
.book-cover {
	position: absolute;
	inset: 0;
	border-radius: 9px 18px 18px 9px;
	overflow: hidden;
	background:
		radial-gradient(circle at 83% 18%, rgba(230, 192, 76, .28), transparent 19%),
		linear-gradient(160deg, #0b5796, #041c39 60%, #020c19);
	border: 1px solid rgba(255, 255, 255, .14);
}
.book-cover:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 29, 61, .15), rgba(4, 29, 61, .1) 34%, rgba(4, 29, 61, .92) 92%);
}
.cover-logo { position: absolute; z-index: 2; top: 24px; left: 24px; width: 110px; }
.cover-author {
	position: absolute;
	z-index: 2;
	top: 96px;
	left: 27px;
	right: 27px;
	color: #cce6ff;
	font-size: 12px;
	font-weight: 950;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.cover-title {
	position: absolute;
	z-index: 2;
	left: 27px;
	right: 27px;
	top: 126px;
	font-weight: 950;
	text-transform: uppercase;
	line-height: .88;
	letter-spacing: -.055em;
	font-size: 40px;
	color: #fff;
}
.cover-title span { display: block; color: var(--gold); font-size: .7em; margin-top: 12px; line-height: .96; }
.cover-bottom {
	position: absolute;
	z-index: 2;
	left: 27px;
	right: 27px;
	bottom: 24px;
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .11em;
	text-transform: uppercase;
	border-top: 1px solid rgba(255, 255, 255, .25);
	padding-top: 13px;
}
.book-label {
	position: absolute;
	right: 4%;
	top: 11%;
	background: var(--red);
	color: #fff;
	border-radius: 16px;
	padding: 14px 17px;
	transform: rotate(5deg);
	z-index: 5;
	box-shadow: 0 18px 35px rgba(0, 0, 0, .25);
}
.book-label b { display: block; font-size: 25px; line-height: 1; }
.book-label span { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }

/* ------------------------------------------------------- идея книги --- */
.idea { padding: 94px 0; background: linear-gradient(135deg, #fff 0%, #f8f3e8 52%, #edf5fb 100%); }
.idea-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 68px; align-items: start; }

.idea-quote {
	border-radius: 28px;
	padding: 35px;
	background: var(--navy2);
	color: #fff;
	position: sticky;
	top: 105px;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.idea-quote:after {
	content: "“";
	position: absolute;
	right: 8px;
	bottom: -90px;
	font-size: 320px;
	font-family: Georgia, serif;
	line-height: 1;
	color: rgba(255, 255, 255, .05);
}
.idea-quote .mark { font-size: 65px; line-height: .7; color: var(--gold); font-family: Georgia, serif; }
.idea-quote p {
	font-size: 26px;
	line-height: 1.35;
	font-weight: 850;
	letter-spacing: -.025em;
	margin: 0;
	position: relative;
	z-index: 2;
}
.idea-quote small {
	font-size: 11px;
	line-height: 1.5;
	color: #b7dcff;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .1em;
	position: relative;
	z-index: 2;
}

.idea-copy p { font-size: 19px; line-height: 1.82; color: #4b5d72; margin: 0 0 22px; }
.idea-copy .lead { font-size: 24px; line-height: 1.58; color: var(--navy); font-weight: 850; letter-spacing: -.025em; }

.definition {
	margin-top: 30px;
	padding: 24px 27px;
	border-left: 4px solid var(--red);
	background: #fff;
	border-radius: 0 20px 20px 0;
	box-shadow: 0 14px 35px rgba(3, 28, 57, .07);
}
.definition b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--red); margin-bottom: 9px; }
.definition p { margin: 0; font-size: 17px; line-height: 1.65; }

/* --------------------------------------------------- о чём книга ------ */
.contents { padding: 96px 0; background: #fff; }
.contents-head {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	gap: 70px;
	align-items: end;
	margin-bottom: 36px;
}

/* Число карточек задаёт админка, поэтому auto-fit вместо жёстких четырёх
   колонок концепта: три блока растянутся, пять переедут на вторую строку. */
.content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.content-card {
	min-height: 310px;
	border-radius: 25px;
	padding: 27px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid var(--line);
	background: #fff;
	transition: .3s;
}
.content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.content-card.blue { background: linear-gradient(145deg, var(--blue), #0b66ad); color: #fff; border: 0; }
.content-card.red  { background: linear-gradient(145deg, #b70810, var(--red2)); color: #fff; border: 0; }
.content-card.dark { background: linear-gradient(145deg, #0b2947, #03172b); color: #fff; border: 0; }

.content-no { font-size: 11px; font-weight: 950; letter-spacing: .13em; color: var(--red); }
.blue .content-no, .red .content-no, .dark .content-no { color: #cce6ff; }

/* Крупная цифра-подложка. В концепте это был произвольный символ,
   здесь — порядковый номер карточки: поля под символ у блока нет. */
.content-icon { font-size: 60px; font-weight: 950; line-height: 1; color: rgba(7, 62, 120, .09); }
.blue .content-icon, .red .content-icon, .dark .content-icon { color: rgba(255, 255, 255, .09); }

.content-card h3 { font-size: 26px; line-height: 1.03; margin: 0 0 10px; letter-spacing: -.04em; }
.content-card p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }
.blue p, .red p, .dark p { color: rgba(255, 255, 255, .68); }

/* -------------------------------------------------------- герои книги - */
.heroes { padding: 96px 0; background: var(--navy2); color: #fff; position: relative; overflow: hidden; }
.heroes:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 82% 18%, rgba(217, 8, 18, .14), transparent 22%),
		radial-gradient(circle at 10% 80%, rgba(11, 88, 164, .23), transparent 25%);
}
.heroes .eyebrow { color: #cce6ff; }
.heroes .section-copy { color: rgba(255, 255, 255, .64); }
/* Заглушка пустой группы на тёмном фоне: цвет из base.css здесь не читался бы. */
.heroes .empty-state { color: rgba(255, 255, 255, .55); position: relative; z-index: 2; }

.heroes-head {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 70px;
	align-items: end;
	position: relative;
	z-index: 2;
}

.names { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; position: relative; z-index: 2; }
.names span {
	border: 1px solid rgba(255, 255, 255, .13);
	background: rgba(255, 255, 255, .05);
	border-radius: 999px;
	padding: 12px 15px;
	font-size: 13px;
	font-weight: 900;
	color: #fff;
	transition: .2s;
}
/* Каждое третье имя — золотой каймой: ряд имён иначе читается сплошной серой лентой. */
.names span:nth-child(3n+1) { border-color: rgba(230, 192, 76, .34); color: #ffe9a4; }
.names span:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); }

/* -------------------------------------------------------- презентация - */
.presentation { padding: 96px 0; background: linear-gradient(135deg, #f7f2e5, #fff 58%, #edf5fb); }
.presentation-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 65px; align-items: center; }

.event-card {
	min-height: 480px;
	border-radius: 30px;
	background: linear-gradient(145deg, #b70810, #ef1b24);
	color: #fff;
	padding: 36px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.event-card:after {
	content: "2016";
	position: absolute;
	right: -15px;
	bottom: -45px;
	font-size: 180px;
	font-weight: 950;
	line-height: 1;
	color: rgba(255, 255, 255, .07);
}
.event-date { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 950; color: #ffe7a6; position: relative; z-index: 2; }
.event-card h3 {
	font-size: clamp(40px, 4.3vw, 62px);
	line-height: .92;
	letter-spacing: -.055em;
	text-transform: uppercase;
	margin: 20px 0;
	position: relative;
	z-index: 2;
}
.event-place { font-size: 18px; line-height: 1.5; font-weight: 800; position: relative; z-index: 2; }

.presentation-copy p { font-size: 18px; line-height: 1.78; color: #536176; margin: 0 0 19px; }
.charity-note {
	margin-top: 24px;
	border-left: 4px solid var(--red);
	padding: 4px 0 4px 20px;
	color: var(--navy);
	font-size: 18px;
	font-weight: 850;
	line-height: 1.5;
}

/* ------------------------------------------------------- читать PDF --- */
.read {
	padding: 92px 0;
	background: linear-gradient(125deg, var(--blue), #0b5fa7 56%, #071d35);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.read:after {
	content: "PDF";
	position: absolute;
	right: 2%;
	top: -44px;
	font-size: 235px;
	font-weight: 950;
	line-height: 1;
	color: rgba(255, 255, 255, .055);
}
.read-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 42px; align-items: center; }
.read h2 {
	font-size: clamp(40px, 5.1vw, 68px);
	line-height: .92;
	letter-spacing: -.055em;
	text-transform: uppercase;
	margin: 0 0 15px;
}
.read p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .72); max-width: 730px; }
.read-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ------------------------------------------------------- брейкпоинты --- */
@media (max-width: 1180px) {
	.hero-grid, .idea-grid, .contents-head, .heroes-head, .presentation-grid { grid-template-columns: 1fr; }
	.hero-grid, .contents-head, .heroes-head { gap: 40px; }
	.book-stage { min-height: 500px; }
	.idea-quote { position: relative; top: auto; }
}

@media (max-width: 820px) {
	.hero { padding: 130px 0 58px; }
	.hero h1 { font-size: 58px; }
	.book-stage { min-height: 450px; }
	.idea, .contents, .heroes, .presentation { padding: 76px 0; }
	.read-grid { grid-template-columns: 1fr; }
	.read-actions { justify-content: flex-start; }
}

/* ==========================================================================
   ДЛИННЫЕ СЛОВА НА УЗКОМ ЭКРАНЕ.

   base.css намеренно ставит заголовкам overflow-wrap: normal и hyphens: none:
   так написано во всех концептах, и на широком экране это правильно, переносы
   в русских словах выглядят плохо. Но на этой странице заголовки набраны
   самыми длинными словами проекта («благотворительного», «презентация»), и на
   телефоне слово шире экрана: страница получает горизонтальную прокрутку.
   Замерено: 375 px даёт +77, 420 px даёт +32. В самом концепте то же самое и
   даже хуже (+65 на 420), то есть это не регрессия переноса, а изъян макета,
   который на макете просто не смотрели на телефоне.

   Разрешаем перенос ТОЛЬКО здесь и только на узких экранах: на остальных
   страницах и на широком экране правило base.css остаётся как есть. Проверено
   после правки: переполнения нет ни на одной странице ни на 375, ни на 420.
   ========================================================================== */
@media (max-width: 640px) {
	.hero h1,
	.hero-kicker,
	.section-title,
	.event-card h3 {
		overflow-wrap: anywhere;
		word-break: normal;
	}
}

@media (max-width: 560px) {
	.hero { padding: 120px 0 45px; }
	.hero h1 { font-size: 44px; }
	.hero p, .hero-lead { font-size: 16px; }
	.book-stage { min-height: 390px; }
	.book { width: 72%; }
	.cover-title { font-size: 30px; }
	.book-label { right: 0; top: 4%; }
	.content-card { min-height: 250px; }
	.idea-quote p { font-size: 22px; }
	.event-card { min-height: 420px; padding: 28px; }
}