/* ==========================================================================
   info.css — страница «О клубе» / контакты, /info/.

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

   ЕДИНСТВЕННОЕ ПОСТРАНИЧНОЕ РАСХОЖДЕНИЕ С base.css — .btn-red: в концепте
   /info/ у красной кнопки нет тени, в base.css тень есть (канон взят с
   главной, где набор кнопок — надмножество). Переопределять ради одной
   страницы не стали: кнопка «Открыть маршрут» здесь белая (.btn-light),
   красная на /info/ выводится только общей шапкой, и она обязана выглядеть
   так же, как на остальных страницах. Расхождение видно в отчёте
   `php migrate/page_css_diff.php` и закрыто сознательно.

   .small-row ИЗ КОНЦЕПТА НЕ ПЕРЕНЕСЁН. В концепте карточки контактов были
   разложены руками: две крупные сверху, две мелкие снизу. Здесь их число
   задаёт админка (группа info_contacts), поэтому сетка одна и
   самораскладывающаяся, а «главную» карточку помечает note=primary.
   ========================================================================== */

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

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

/* ------------------------------------------------------------- шапка -- */
.hero {
	padding: 140px 0 80px;
	min-height: 520px;
	display: flex;
	align-items: center; /* блок текста по вертикали в левой зоне */
	background:
		radial-gradient(circle at 84% 18%, rgba(230, 192, 76, .12), transparent 18%),
		radial-gradient(circle at 13% 82%, rgba(217, 8, 18, .11), transparent 23%),
		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, .025) 89px 90px);
}
.hero:after {
	content: "CONTACT";
	position: absolute;
	right: -28px;
	bottom: -66px;
	font-size: clamp(140px, 17vw, 290px);
	font-weight: 950;
	line-height: .76;
	letter-spacing: -.09em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .05);
}
/* Контент сидит в левой половине и выровнен по левому краю */
.hero > .container {
	position: relative;
	z-index: 2;
	width: 100%;
}
.hero-content {
	position: relative;
	z-index: 2;
	max-width: min(640px, 58%);
	margin: 0;
	text-align: left;
}
.hero-content .breadcrumbs,
.hero-kicker,
.hero h1,
.hero h1 span,
.hero p,
.hero-lead {
	text-align: left;
}
.hero-kicker {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	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(56px, 7vw, 104px);
	line-height: .82;
	letter-spacing: -.07em;
	text-transform: uppercase;
	margin: 26px 0 22px;
	font-weight: 950;
	text-wrap: wrap;
}
.hero h1 span {
	display: block;
	color: var(--gold);
	font-size: .43em;
	line-height: 1;
	margin-top: 20px;
	letter-spacing: .025em;
	text-wrap: wrap;
}

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

/* --------------------------------------------------- карточки контактов - */
.contacts { padding: 58px 0 94px; background: linear-gradient(180deg, #fff, #f7fafc); }

/* Число карточек задаёт админка, поэтому auto-fit вместо жёстких колонок
   концепта: одна карточка растянется, пять переедут на две строки. */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
}
.contact-card {
	border-radius: 28px;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--line);
	min-height: 245px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}
.contact-card.primary { background: linear-gradient(145deg, var(--blue), #0b66ad); color: #fff; border: 0; min-height: 320px; }
.contact-card.concert { background: linear-gradient(145deg, #b70810, #f21b24); color: #fff; border: 0; }
.contact-card.match   { background: linear-gradient(145deg, #0a2948, #04192e); color: #fff; border: 0; }

/* Звезда-подложка. У цветных карточек она светлая, у белой — синеватая. */
.contact-card:after {
	content: "★";
	position: absolute;
	right: 18px;
	top: 8px;
	font-size: 86px;
	color: rgba(7, 62, 120, .045);
}
.contact-card.primary:after,
.contact-card.concert:after,
.contact-card.match:after { color: rgba(255, 255, 255, .06); }

.card-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .13em;
	font-weight: 950;
	color: var(--muted);
	position: relative;
	z-index: 2;
}
.primary .card-label,
.concert .card-label,
.match .card-label { color: #cce6ff; }

.contact-card h2 {
	margin: 10px 0 0;
	font-size: clamp(28px, 3vw, 40px);
	line-height: .98;
	letter-spacing: -.04em;
	position: relative;
	z-index: 2;
}

.contact-big {
	display: block;
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.05;
	font-weight: 950;
	letter-spacing: -.04em;
	position: relative;
	z-index: 2;
	word-break: break-word;
}
a.contact-big { transition: .2s; }
a.contact-big:hover { color: var(--gold); }
.contact-card:not(.primary):not(.concert):not(.match) a.contact-big:hover { color: var(--red); }

.contact-values { position: relative; z-index: 2; }
.contact-mail {
	display: block;
	font-size: 17px;
	font-weight: 900;
	margin-top: 12px;
	position: relative;
	z-index: 2;
	word-break: break-word;
	transition: .2s;
}
a.contact-mail:hover { color: var(--gold); }
.contact-card:not(.primary):not(.concert):not(.match) a.contact-mail:hover { color: var(--red); }

/* Сводка контактов (организация / адрес / телефон / почта) */
.contact-sheet {
	margin-top: 28px;
	border: 1px solid var(--line);
	border-radius: 28px;
	background: #fff;
	overflow: hidden;
}
.sheet-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	padding: 22px 28px;
	border-bottom: 1px solid var(--line);
	align-items: start;
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-label {
	font-size: 12px;
	font-weight: 950;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 4px;
}
.sheet-value { font-size: 16px; line-height: 1.55; color: var(--navy); }
.sheet-value ul { margin: 0; padding-left: 1.15em; display: grid; gap: 14px; }
.sheet-value li strong { display: block; margin-bottom: 4px; font-size: 17px; line-height: 1.25; }
.sheet-value li span { display: block; color: #536176; font-size: 15px; line-height: 1.55; }
.sheet-note { margin: 8px 0 0; color: #536176; font-size: 14px; }
.sheet-phones { display: grid; gap: 8px; }
.sheet-phones a,
.sheet-mail {
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 950;
	letter-spacing: -.03em;
	line-height: 1.15;
	color: var(--navy);
	transition: .2s;
}
.sheet-phones a:hover,
.sheet-mail:hover { color: var(--red); }

/* ---------------------------------------------- официальная информация - */
.details { padding: 0 0 94px; background: #f7fafc; }
.details-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 65px;
	align-items: start;
}
.org-list { display: grid; gap: 12px; }
.org-item {
	border: 1px solid var(--line);
	border-radius: 22px;
	background: #fff;
	padding: 24px;
}
.org-no {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--red);
	font-weight: 950;
	margin-bottom: 9px;
}
.org-item h3 { font-size: 21px; line-height: 1.12; margin: 0 0 8px; color: var(--navy); }
.org-item p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------- карта --- */
.map-section { padding: 0 0 100px; background: #f7fafc; }
.map-box {
	display: grid;
	grid-template-columns: 360px 1fr;
	min-height: 520px;
	border-radius: 30px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow);
}
.map-info {
	padding: 34px;
	background: var(--navy2);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.map-info .eyebrow { color: #cce6ff; }
.map-info h2 {
	font-size: 40px;
	line-height: .95;
	letter-spacing: -.045em;
	margin: 13px 0 20px;
	text-transform: uppercase;
}
.address { font-size: 19px; line-height: 1.55; font-weight: 800; }
.schedule { margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.map-info .btn { align-self: flex-start; margin-top: 30px; }

.map-frame { min-height: 520px; background: #dce6ef; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------ призыв --- */
.quick {
	padding: 82px 0;
	background: linear-gradient(125deg, var(--red), #b7080f 56%, #071d35);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.quick:after {
	content: "35";
	position: absolute;
	right: 2%;
	top: -58px;
	font-size: 290px;
	font-weight: 950;
	line-height: 1;
	color: rgba(255, 255, 255, .055);
}
.quick-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}
.quick h2 {
	font-size: clamp(40px, 5.5vw, 72px);
	line-height: .9;
	letter-spacing: -.06em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.quick p { max-width: 760px; color: rgba(255, 255, 255, .72); font-size: 17px; line-height: 1.6; }

/* ------------------------------------------------------- брейкпоинты --- */
@media (max-width: 1180px) {
	.details-grid { grid-template-columns: 1fr; gap: 28px; }
	.map-box { grid-template-columns: 1fr; }
	.map-info { min-height: 290px; }
	.hero-content { max-width: 720px; }
}

@media (max-width: 820px) {
	.hero { padding: 132px 0 54px; min-height: 0; }
	.hero h1 { font-size: 70px; }
	.hero-content { max-width: 100%; }
	.contacts { padding-top: 40px; }
	.sheet-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
	.map-frame { min-height: 430px; }
	.quick-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.hero { padding: 122px 0 46px; }
	.hero h1 { font-size: 56px; }
	.hero p, .hero-lead { font-size: 16px; }
	.contact-card { padding: 25px; }
	.contact-big { font-size: 30px; }
	.sheet-phones a,
	.sheet-mail { font-size: 22px; }
	.map-info { padding: 27px; }
	.map-info h2 { font-size: 34px; }
	.map-frame { min-height: 360px; }
}