/*
 * Панель меню — по макету студии.
 *
 * Скрыта, пока к ней не обратились по якорю. `:target` — база, а не
 * запасной путь: WP Rocket на боевом откладывает JS, и меню на скрипте
 * не открылось бы с первого клика.
 *
 * Ни одного `vw`: в попапе 2109 их было двести тридцать четыре, из-за
 * чего панель раздувалась на большом мониторе, а `100vw` вместе
 * с полосой прокрутки давал горизонтальную прокрутку. Здесь `clamp()`,
 * проценты и потолок по ширине.
 *
 * Вес селекторов с запасом: пока кит на сайте, `.elementor-kit-6 h2`
 * перебивает одиночные правила.
 */

.sshm {
	--sshm-bg: #141414;
	--sshm-card: #1a1a1a;
	--sshm-ink: #ffffff;
	--sshm-muted: rgba(255, 255, 255, 0.62);
	--sshm-dim: rgba(255, 255, 255, 0.42);
	--sshm-line: rgba(255, 255, 255, 0.1);
	--sshm-accent: #25cbc2;
	--sshm-accent-2: #1affd3;

	/* Панель — не контент страницы, а перекрытие поверх всего, поэтому
	   оболочка у неё своя и шире общей: мега-меню в 1200 сжимается
	   до нечитаемого. Решение сознательное, цена — логотип при открытии
	   смещается влево. */
	--sshm-shell: 1680px;

	display: none;
	inset: 0;
	position: fixed;
	z-index: 900;
}

.sshm:target,
.sshm.is-open {
	display: block;
}

.sshm .sshm__scrim {
	background: rgba(0, 0, 0, 0.55);
	display: block;
	inset: 0;
	position: absolute;
}

.sshm .sshm__panel {
	background: var(--sshm-bg);
	box-sizing: border-box;
	color: var(--sshm-ink);
	font-family: "Gotham Pro", system-ui, -apple-system, sans-serif;
	inline-size: 100%;
	max-block-size: 100dvh;
	min-block-size: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(20px, 2.6vh, 32px) clamp(20px, 3.4vw, 56px) clamp(20px, 3vh, 34px);
	position: relative;
}

.sshm a {
	color: inherit;
	text-decoration: none;
}

.sshm a:focus-visible {
	outline: 2px solid var(--sshm-accent);
	outline-offset: 4px;
}

/* ------------------------------------------------------------- крестик */

.sshm .sshm__close {
	align-items: center;
	block-size: 48px;
	display: flex;
	inline-size: 48px;
	inset-block-start: clamp(14px, 2vh, 26px);
	inset-inline-end: clamp(12px, 2vw, 34px);
	justify-content: center;
	position: absolute;
	z-index: 2;
}

.sshm .sshm__cross {
	block-size: 22px;
	display: block;
	inline-size: 22px;
	position: relative;
}

.sshm .sshm__cross::before,
.sshm .sshm__cross::after {
	background: currentColor;
	block-size: 2px;
	content: "";
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: 100%;
	position: absolute;
}

.sshm .sshm__cross::before { transform: rotate(45deg); }
.sshm .sshm__cross::after { transform: rotate(-45deg); }

/* --------------------------------------------------------------- сетка */

.sshm .sshm__grid {
	display: grid;
	gap: clamp(32px, 3vw, 56px);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	margin-inline: auto;
	max-width: var(--sshm-shell);
}

.sshm .sshm__left {
	display: flex;
	flex-direction: column;
}

/* Верхняя строка вынесена над сеткой, а не внутрь левой колонки: иначе
   правая начиналась выше и «Отзывы» не вставали в одну линию
   с «Разработкой». */
.sshm .sshm__head {
	align-items: center;
	column-gap: clamp(16px, 2vw, 34px);
	display: flex;
	flex-wrap: wrap;
	margin-block-end: clamp(30px, 4.4vh, 54px);
	margin-inline: auto;
	max-width: var(--sshm-shell);
	padding-inline-end: 60px;
	position: relative;
	row-gap: 12px;
	width: 100%;
	z-index: 1;
}

.sshm .sshm__logo {
	display: block;
	flex: none;
}

/* Оценка рядом с логотипом. Цифры считаются по базе SS Reviews —
   вбивать их нельзя, они меняются. */
.sshm .sshm__rating {
	align-items: center;
	border: 1px solid var(--sshm-line);
	border-radius: 999px;
	color: var(--sshm-ink);
	display: inline-flex;
	gap: 8px;
	/* Высота та же, что у пилюли раздела рядом: две соседние плашки
	   разной высоты читаются как недоделка. */
	min-block-size: 46px;
	padding-inline: 16px;
	transition: border-color 0.2s ease;
	white-space: nowrap;
}

.sshm .sshm__rating:hover,
.sshm .sshm__rating:focus-visible {
	border-color: rgba(255, 255, 255, 0.28);
}

.sshm .sshm__rating-stars {
	color: #ffb800;
	font-size: 13px;
	letter-spacing: 1px;
}

.sshm .sshm__rating-score {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
}

.sshm .sshm__rating-count {
	color: var(--sshm-muted);
	font-size: 14px;
}

.sshm .sshm__logo img {
	display: block;
	height: auto;
	width: clamp(170px, 14vw, 216px);
}

/* -------------------------------------------------------------- группы */

.sshm .sshm__nav {
	display: grid;
	gap: clamp(30px, 3.6vh, 48px) clamp(28px, 3vw, 56px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sshm .sshm__group-title {
	color: var(--sshm-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(24px, 2.05vw, 40px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 clamp(12px, 1.4vh, 18px);
	text-transform: none;
}

.sshm .sshm__list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sshm .sshm__list li {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.sshm .sshm__list a {
	align-items: center;
	color: var(--sshm-ink);
	display: inline-flex;
	font-size: clamp(15px, 1.05vw, 20px);
	font-weight: 400;
	gap: clamp(8px, 0.7vw, 12px);
	line-height: 1.35;
	padding-block: 5px;
	transition: color 0.2s ease;
}

.sshm .sshm__list a:hover,
.sshm .sshm__list a:focus-visible {
	color: var(--sshm-accent);
}

/* Стрелка у каждого пункта — приём с макета. Пятнадцать одинаковых
   стрелок подряд рябят, поэтому в покое они приглушены и оживают
   только под курсором: рисунок остался, шума нет. */
.sshm .sshm__arrow {
	display: block;
	flex: none;
	height: clamp(11px, 0.75vw, 14px);
	opacity: 0.45;
	transition: opacity 0.2s ease, transform 0.2s ease;
	width: clamp(11px, 0.75vw, 14px);
}

.sshm .sshm__list a:hover .sshm__arrow,
.sshm .sshm__list a:focus-visible .sshm__arrow,
.sshm .sshm__solo a:hover .sshm__arrow {
	opacity: 1;
	transform: translate(1px, -1px);
}

/* Плашка у пункта — из поля «Описание» в админке. */
.sshm .sshm__chip {
	align-items: center;
	background: linear-gradient(90deg, var(--sshm-accent-2), var(--sshm-accent));
	border-radius: 999px;
	color: #0b0b0b;
	display: inline-flex;
	font-size: 13px;
	font-weight: 500;
	gap: 6px;
	padding: 5px 12px;
	white-space: nowrap;
}

.sshm .sshm__chip img {
	display: block;
	height: 16px;
	width: 16px;
}

/* Раздел без вложенных пунктов уходит в верхнюю строку, к логотипу:
   в колонке он выглядел заголовком, под которым забыли содержимое. */
.sshm .sshm__solo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sshm .sshm__solo li {
	margin: 0;
}

.sshm .sshm__solo a {
	align-items: center;
	border: 1px solid var(--sshm-line);
	border-radius: 999px;
	color: var(--sshm-ink);
	display: inline-flex;
	font-size: 14px;
	min-block-size: 46px;
	padding-inline: 20px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sshm .sshm__solo a:hover,
.sshm .sshm__solo a:focus-visible {
	border-color: var(--sshm-accent);
	color: var(--sshm-accent);
}

/* ------------------------------------------------------------ действие */

.sshm .sshm__phone {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(32px, 3.2vw, 60px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.1;
	/* auto сверху прижимает телефон с кнопкой к низу колонки — тогда
	   они встают вровень с нижним краем правой. */
	margin-block: auto clamp(14px, 1.8vh, 20px);
	padding-block-start: clamp(18px, 2.8vh, 32px);
	transition: color 0.2s ease;
	white-space: nowrap;
}

.sshm .sshm__phone:hover,
.sshm .sshm__phone:focus-visible {
	color: var(--sshm-accent);
}

.sshm .sshm__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2vw, 32px);
	/* Прижато к телефону, а не к низу колонки: номер и кнопка — одно
	   действие, и разлучать их пустотой незачем. */
	margin-block-start: 0;
}

.sshm .sshm__cta {
	align-items: center;
	background: linear-gradient(90deg, var(--sshm-accent-2), var(--sshm-accent));
	border-radius: 999px;
	color: #0b0b0b;
	display: inline-flex;
	font-size: clamp(14px, 0.95vw, 17px);
	font-weight: 500;
	gap: 14px;
	justify-content: center;
	letter-spacing: 0.04em;
	min-block-size: clamp(56px, 3.8vw, 72px);
	padding-inline: clamp(30px, 3.2vw, 52px);
	text-transform: uppercase;
	transition: filter 0.2s ease, transform 0.2s ease;
}

/* Цвет текста на наведении задаём явно: без этого кит красит ссылку
   в белый, и надпись пропадает на светлой кнопке. */
.sshm .sshm__cta:hover,
.sshm .sshm__cta:focus-visible {
	color: #0b0b0b;
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.sshm .sshm__social {
	display: flex;
	gap: clamp(8px, 0.9vw, 14px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sshm .sshm__social li { margin: 0; }

.sshm .sshm__social a {
	align-items: center;
	block-size: clamp(48px, 3.3vw, 60px);
	display: flex;
	inline-size: clamp(48px, 3.3vw, 60px);
	justify-content: center;
	transition: transform 0.2s ease;
}

.sshm .sshm__social a:hover {
	transform: translateY(-2px);
}

.sshm .sshm__social img {
	display: block;
	height: 100%;
	width: 100%;
}

/* -------------------------------------------------------------- справа */

.sshm .sshm__right {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vh, 24px);
}

.sshm .sshm__right-title {
	color: var(--sshm-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(24px, 2.05vw, 40px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
	padding-inline-end: 70px;
	text-transform: none;
}

.sshm .sshm__reviews {
	display: grid;
	gap: clamp(12px, 1.2vw, 20px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sshm .sshm__review {
	background: var(--sshm-card);
	border: 1px solid var(--sshm-line);
	border-radius: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(16px, 1.4vw, 24px);
}

.sshm .sshm__review-head {
	align-items: center;
	display: flex;
	gap: 12px;
}

.sshm .sshm__avatar {
	block-size: 56px;
	border-radius: 50%;
	flex: none;
	inline-size: 56px;
	object-fit: cover;
}

.sshm .sshm__review-meta {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0 0 2px;
}

.sshm .sshm__stars {
	color: #ffb800;
	font-size: 13px;
	letter-spacing: 1px;
}

.sshm .sshm__date {
	color: var(--sshm-dim);
	font-size: 13px;
}

.sshm .sshm__review-name {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(16px, 1.15vw, 21px);
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0;
}

.sshm .sshm__review-text {
	color: var(--sshm-muted);
	/* Четыре строки и многоточие: карточки должны быть одной высоты,
	   а отзывы разной длины. Обрезка визуальная — текст в разметке
	   целиком, поиск и скринридер видят его весь. */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	display: -webkit-box;
	font-size: clamp(14px, 0.85vw, 16px);
	line-height: 1.55;
	margin: 0;
	overflow: hidden;
}

.sshm .sshm__review-more {
	color: var(--sshm-ink);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sshm .sshm__review-more:hover {
	color: var(--sshm-accent);
}

/* ------------------------------------------------------- сто с лишним */

.sshm .sshm__works {
	align-items: center;
	background: var(--sshm-card);
	border: 1px solid var(--sshm-line);
	border-radius: 16px;
	display: grid;
	gap: clamp(12px, 1.5vw, 28px);
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	padding: clamp(14px, 1.4vw, 22px);
	transition: border-color 0.2s ease;
}

.sshm .sshm__works:hover {
	border-color: rgba(255, 255, 255, 0.2);
}

.sshm .sshm__works-shot {
	display: block;
	height: auto;
	width: 100%;
}

.sshm .sshm__works-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.sshm .sshm__works-count {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(42px, 4.3vw, 82px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sshm .sshm__works-label {
	font-size: clamp(16px, 1.25vw, 24px);
}

.sshm .sshm__works-more {
	color: var(--sshm-ink);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------- уже 1200 */

/* Ступень компонента, не смена режима: ниже этого двухколоночная
   раскладка панели становится теснее читаемого. */
@media (max-width: 1200px) {
	.sshm .sshm__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sshm .sshm__phone {
		margin-block-end: 20px;
	}

	.sshm .sshm__actions {
		margin-block-end: clamp(28px, 4vh, 44px);
	}
}

/* ---------------------------------------------------------- уже 700 */

/* Смена режима вместе с контентом Elementor. */
@media (max-width: 767px) {
	.sshm .sshm__nav {
		gap: 26px;
		grid-template-columns: minmax(0, 1fr);
	}

	.sshm .sshm__reviews {
		grid-template-columns: minmax(0, 1fr);
	}

	.sshm .sshm__works {
		grid-template-columns: minmax(0, 1fr);
	}

	.sshm .sshm__cta {
		inline-size: 100%;
	}

	.sshm .sshm__actions {
		gap: 18px;
	}
}

/* Значки источников отзывов в плашке. */
.sshm .sshm__sources {
	align-items: center;
	display: inline-flex;
	gap: 4px;
}

.sshm .sshm__sources img {
	border-radius: 4px;
	display: block;
	height: 18px;
	width: 18px;
}

/* ----------------------------------------------------------- движение

   Анимируются только opacity и transform — их браузер считает
   на композиторе, без перерасчёта раскладки и перерисовки. Ни высот,
   ни фильтров, ни теней: они дороги и на слабом телефоне заметны.

   Открытие идёт анимацией, а не переходом: панель появляется из
   display:none, а переходы на смене display не запускаются.
   Закрытие ставит класс is-closing — его вешает menu.js. Без скрипта
   панель просто исчезает, и это не поломка: закрылась значит закрылась.
*/

/* Подложка выцветает — если анимация не пойдёт, она просто не затемнит
   фон. Панель при этом на месте и работает. */
@keyframes sshm-scrim-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Панель едет, но не выцветает. Прозрачность здесь была бы ошибкой:
   в скрытой вкладке браузер останавливает анимации, и с opacity: 0
   в начальном кадре меню осталось бы невидимым. Со сдвигом худшее,
   что случится, — панель встанет на двенадцать пикселей выше. */
@keyframes sshm-panel-in {
	from { transform: translateY(-12px); }
	to { transform: translateY(0); }
}

@keyframes sshm-scrim-out {
	to { opacity: 0; }
}

@keyframes sshm-panel-out {
	to { opacity: 0; transform: translateY(-8px); }
}

.sshm:target .sshm__scrim,
.sshm.is-open .sshm__scrim {
	animation: sshm-scrim-in 0.18s ease-out both;
}

.sshm:target .sshm__panel,
.sshm.is-open .sshm__panel {
	animation: sshm-panel-in 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	will-change: transform, opacity;
}

.sshm.is-closing .sshm__scrim {
	animation: sshm-scrim-out 0.16s ease-in both;
}

.sshm.is-closing .sshm__panel {
	animation: sshm-panel-out 0.16s ease-in both;
}

/* Панель длинная и прокручивается: пока идёт анимация, курсор
   по ней не ловим — иначе клик попадает в уезжающий элемент. */
.sshm.is-closing {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.sshm:target .sshm__scrim,
	.sshm.is-open .sshm__scrim,
	.sshm:target .sshm__panel,
	.sshm.is-open .sshm__panel,
	.sshm.is-closing .sshm__scrim,
	.sshm.is-closing .sshm__panel {
		animation: none;
	}
}