/* Страница контактов.
 *
 * Правила вложены в `.ssk` — как везде в этой теме. Кит Elementor
 * навязывает заголовкам капс и вес 800, и одиночный класс ему
 * проигрывает: проверено на подвале.
 *
 * Цвета и мерки те же, что в разделе работ, но своими токенами:
 * страница светлая, а первый экран тёмный — тот же разворот, что
 * у кейсов и страниц плагинов. */

/* ------------------------------------------------------------ первый экран */

.ssk .ssk__kroshki {
	color: #adadad;
	font-size: 14px;
	margin-block-end: clamp(16px, 2vw, 24px);
}

.ssk .ssk__kroshki p {
	margin: 0;
}

.ssk .ssk__kroshki a {
	color: #ffffff;
	font-weight: 300;
	text-decoration: none;
}

.ssk .ssk__kroshki a:hover,
.ssk .ssk__kroshki a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

.ssk .ssk__title {
	color: var(--ss-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h1);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	max-width: 18ch;
	text-transform: none;
}

.ssk .ssk__lead {
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.55;
	margin-block-start: clamp(16px, 2vw, 22px);
	max-inline-size: 56ch;
}

/* ---------------------------------------------------------------- раскладка */

.ssk .ssk__body {
	align-items: start;
	display: grid;
	gap: clamp(24px, 3vw, 56px);
	grid-template-columns: minmax(0, 1fr) 380px;
	padding-block: var(--ss-blok);
}

/* ------------------------------------------------------------ способы связи */

.ssk .ssk__phone {
	align-items: center;
	color: var(--ss-ink);
	display: inline-flex;
	min-block-size: 44px;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.ssk .ssk__phone:hover,
.ssk .ssk__phone:focus-visible {
	color: var(--ss-ink);
	text-decoration: underline;
}

/* Точка рядом со статусом — единственное движение на странице: она
   говорит «здесь живые люди прямо сейчас», и ради этого её видно. */
.ssk .ssk__status {
	align-items: center;
	color: var(--ss-dim);
	display: flex;
	font-size: var(--ss-small);
	gap: 8px;
	margin: 10px 0 0;
}

.ssk .ssk__dot {
	background: var(--ss-accent);
	block-size: 8px;
	border-radius: 50%;
	display: inline-block;
	inline-size: 8px;
}

.ssk .ssk__mail {
	align-items: center;
	color: var(--ss-ink);
	display: inline-flex;
	font-size: clamp(16px, 1.6vw, 19px);
	min-block-size: 44px;
	margin-block-start: clamp(18px, 2vw, 26px);
	text-decoration: none;
}

.ssk .ssk__mail:hover,
.ssk .ssk__mail:focus-visible {
	color: var(--ss-ink);
	text-decoration: underline;
}

.ssk .ssk__rekvizity {
	border-block-start: 1px solid var(--ss-line);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 40px);
	margin: clamp(26px, 3vw, 38px) 0 0;
	padding-block-start: clamp(20px, 2.4vw, 28px);
}

.ssk .ssk__rekvizity dt {
	color: var(--ss-dim);
	font-size: var(--ss-small);
	margin-block-end: 6px;
}

.ssk .ssk__rekvizity dd {
	line-height: 1.5;
	margin: 0;
}

/* ------------------------------------------------------------------- форма */

/*
 * Карточка повторяет ту, что стоит липкой в кейсе: тёмный фон, узор
 * отдельным слоем, мокап вылетом за край. Предложение обсудить задачу
 * на сайте одно, и человеку незачем узнавать его заново на каждой
 * странице. Тексты здесь свои — про звонок, а не про «хотите так же».
 */
.ssk .ssk__forma {
	background: var(--ss-dark);
	border-radius: 24px;
	color: var(--ss-dark-ink);
	isolation: isolate;
	overflow: hidden;
	padding: clamp(22px, 2.2vw, 28px);
	position: relative;
}

.ssk .ssk__forma::before {
	background: url("../img/setka-patt.webp") repeat 0 0 / 152px 247px;
	content: "";
	inset: 0;
	opacity: 0.55;
	position: absolute;
	z-index: -1;
}

.ssk .ssk__forma-nad {
	color: var(--ss-accent);
	font-size: 13px;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.ssk .ssk__forma-title {
	color: var(--ss-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	/* Крупнее, чем в кейсе: там карточка — довесок к прочитанному,
	   а здесь она половина страницы и главное предложение на ней. */
	font-size: var(--ss-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0 0 10px;
	text-transform: none;
}

.ssk .ssk__forma-text {
	color: var(--ss-dark-muted);
	line-height: 1.5;
	margin: 0 0 18px;
}

/* Кнопка общая, своя здесь только ширина: в узкой карточке она
   должна занимать колонку целиком. */
.ssk .ssk__cta {
	inline-size: 100%;
}

/*
 * Мокап шире карточки и вылезает за её края — так же, как в кейсе:
 * экраны стоят по диагонали, и вписанный целиком он превращается
 * в марку на визитке. Обрезает его `overflow` карточки, а вылет
 * делится поровну на обе стороны, иначе связка смещена вправо.
 */
.ssk .ssk__mokap {
	display: block;
	inline-size: 128%;
	margin-block: 18px calc(clamp(22px, 2.2vw, 28px) * -1);
	margin-inline: -14%;
	max-inline-size: none;
	/* Потолок тот же, что в кейсе: без него связка экранов выходит
	   вдвое выше текста и читается как главное на карточке. Обрезаем
	   снизу, там у мокапа просто фон. */
	max-block-size: 300px;
	object-fit: cover;
	object-position: 50% 0;
}

/* ---------------------------------------------------------- уже 1024 */

/*
 * Пилюли и QR-коды показывают одни и те же три канала. Показывать их
 * разом значит занять полколонки повтором, поэтому на экране всегда
 * ровно один список: коды на широком, пилюли на узком.
 */
@media (min-width: 1025px) {
	.ssk .ssk__social {
		display: none;
	}
}

@media (max-width: 1024px) {
	.ssk .ssk__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.ssk .ssk__qr {
		display: none;
	}
}

/* ----------------------------------------------------------- уже 767 */

@media (max-width: 767px) {
	.ssk .ssk__title {
		font-size: calc(var(--ss-h1) - 4px);
		max-width: none;
	}

	.ssk .ssk__lead {
		font-size: 14px;
	}

	.ssk .ssk__kroshki {
		font-size: 10px;
	}

	/* Карточка на телефоне занимает экран целиком и остаётся
	   единственным предложением в поле зрения — строке над кнопкой
	   можно быть крупнее ступени h3. */
	.ssk .ssk__forma-title {
		font-size: 24px;
	}
}