/* ============================================================
   Секция «Контакты» (#contacts) — светлая: телефон + галерея
   ============================================================ */

/* ---------- Контактный блок ---------- */
.s-contacts__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	margin-bottom: clamp(40px, 7vw, 72px);
}

.s-contacts__phone {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.9rem, 7.5vw, 3.25rem);
	line-height: var(--lh-head);
	letter-spacing: var(--ls-head);
	color: var(--c-black);
	transition: color .18s ease;
}
.s-contacts__phone:hover { color: var(--c-blue); }

.s-contacts__hours { margin: 12px 0 0; }

.s-contacts__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(20px, 3vw, 28px);
}

.s-contacts__help h4 { margin-bottom: 14px; }

.s-contacts__help-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
	color: var(--c-black);
}
.s-contacts__help-list li {
	position: relative;
	padding-left: 22px;
	/* Строки в пункте делятся поровну — иначе на узком экране последнее слово
	   висит сиротой на второй строке */
	text-wrap: balance;
}
.s-contacts__help-list li::before {
	content: "";
	position: absolute;
	left: 0;
	/* Оптический центр первой строки, а не центр строчного бокса: тот учитывает
	   выносные элементы, и квадратик визуально проваливается под текст */
	top: 0.3em;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--grad-ribbon);
}
/* «Подобрать игру» под списком — открывает всплывающую форму заявки */
.s-contacts__help-cta { margin-top: 20px; width: 100%; }

/* Когда колонки встают друг под друга, свободного угла под стикер нет — он лёг бы на кнопки */
@media (max-width: 900px) {
	.s-contacts__ushanka { display: none; }
}

/* ---------- Галерея-заглушка ---------- */
.s-contacts__gallery-title { margin-bottom: clamp(20px, 3vw, 32px); }

.contacts-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(76px, 9vw, 120px);
	grid-auto-flow: dense;
	gap: clamp(10px, 1.5vw, 16px);
}

.contacts-gallery__item {
	margin: 0;
	position: relative;
	grid-row: span 2;
}
.contacts-gallery__item--tall { grid-row: span 3; }

.contacts-gallery__ph {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	border-radius: var(--r-card);
	overflow: hidden;
	position: relative;
	text-align: center;
	background: linear-gradient(140deg, #1a00ff, #b517c8);
}
/* Лёгкий глянец поверх градиента */
.contacts-gallery__ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--grad-light);
	opacity: 0.14;
	pointer-events: none;
}

/* Миксы палитры — у каждой плитки свой характер */
.contacts-gallery__item:nth-child(2) .contacts-gallery__ph { background: linear-gradient(160deg, #b517c8, #ff2e7a); }
.contacts-gallery__item:nth-child(3) .contacts-gallery__ph { background: linear-gradient(150deg, #12142a 10%, #1a00ff); }
.contacts-gallery__item:nth-child(4) .contacts-gallery__ph { background: linear-gradient(135deg, #ff0004, #b517c8); }
.contacts-gallery__item:nth-child(5) .contacts-gallery__ph { background: linear-gradient(155deg, #070815 5%, #b517c8); }
.contacts-gallery__item:nth-child(6) .contacts-gallery__ph { background: linear-gradient(140deg, #1a00ff 10%, #ff2e7a); }
.contacts-gallery__item:nth-child(7) .contacts-gallery__ph { background: linear-gradient(150deg, #b517c8 0%, #12142a 90%); }
.contacts-gallery__item:nth-child(8) .contacts-gallery__ph { background: linear-gradient(135deg, #ff2e7a, #1a00ff); }

.contacts-gallery__emoji {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	filter: drop-shadow(0 4px 14px rgba(7, 8, 21, 0.35));
}

/* Подпись-заглушка на плитке: на градиенте серый не читается */
.section--light .contacts-gallery__note { color: rgba(255, 255, 255, 0.8); }

/* Стикеры поверх плиток: чуть меньше базовых и выше по слою */
.s-contacts .contacts-gallery__item .deco--sticker {
	width: clamp(60px, 7vw, 100px);
	z-index: 2;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
	.s-contacts__grid { grid-template-columns: 1.2fr 1fr; }
}

@media (max-width: 700px) {
	.s-contacts__grid { grid-template-columns: 1fr; }

	.contacts-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(64px, 13vw, 96px);
	}

	.s-contacts__actions .btn { flex: 1 1 calc(50% - 10px); }
}

@media (max-width: 420px) {
	.s-contacts__actions .btn { flex-basis: 100%; }
}