/*
 * Страница /shop/examples/: два магазина клиентов.
 *
 * Обычный CSS, а не SCSS: webpack в проекте не пересобирается, файл отдаётся
 * напрямую через {% static %}. Фон страницы, первый экран и блок «Создайте
 * свой магазин» уже стилизованы в shopExamples.css — здесь только новые
 * карточки магазинов и правки контраста и фокуса.
 *
 * Цвета — переменные витрины из shop.css (`--brand-accent`, `--neutral-*`).
 */

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

/* В shopExamples.css заголовок залит градиентом в #0af: на сером фоне это
   2:1, ниже порога для крупного текста. Оставляем градиент, но в тёмных
   оттенках бренда — оба конца дают больше 4.5:1 на #e3e8ec. */
.page-examples .block-head__title {
	background: linear-gradient(37deg, #613aff 40%, #2f5bd8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Подзаголовки витрины серые (#747474, 3.7:1 на этом фоне) — темнее. */
.page-examples .block__description {
	color: var(--neutral-670);
	margin: 0;
}

.page-examples .block-head {
	padding-bottom: clamp(32px, 20px + 2.5vw, 56px);
}

.page-examples .block-head__content-wrapper {
	grid-template-columns: 1fr;
}

/* ------------------------------------------------------ карточки магазинов */

.block-showcase {
	padding-bottom: clamp(56px, 40px + 4vw, 100px);
}

.block-showcase__list {
	display: grid;
	grid-gap: clamp(24px, 16px + 2vw, 40px);
}

.showcase-card {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	grid-gap: clamp(32px, 16px + 3vw, 64px);
	align-items: center;
	background-color: var(--neutral-0);
	border-radius: 32px;
	padding: clamp(28px, 16px + 2.5vw, 48px);
}

.showcase-card_reverse .showcase-card__media {
	order: 2;
}

/* В зеркальной карточке скриншоты справа — широкая колонка тоже справа,
   иначе картинка второго примера выходила меньше первой. */
.showcase-card_reverse {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

/* Десктопный скриншот, поверх него — телефонный, со сдвигом вниз-вправо. */
.showcase-card__media {
	position: relative;
	padding: 0 clamp(24px, 4vw, 56px) clamp(40px, 5vw, 64px) 0;
}

.showcase-card__desktop,
.showcase-card__phone {
	display: block;
}

.showcase-card__desktop img,
.showcase-card__phone img {
	display: block;
	width: 100%;
	height: auto;
}

.showcase-card__desktop img {
	border: 1px solid var(--gray-cool-300);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(23, 28, 51, .10);
}

.showcase-card__phone {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 28%;
	max-width: 190px;
	border: 5px solid var(--neutral-820);
	border-radius: 24px;
	overflow: hidden;
	background-color: var(--neutral-820);
	box-shadow: 0 16px 36px rgba(23, 28, 51, .25);
}

.showcase-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.showcase-card__tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 15px;
	font-size: 15px;
	font-weight: 600;
	color: var(--brand-accent);
	background-color: var(--brand-1-pale);
}

/* Зелёный текст на бледно-зелёном — 5.6:1. */
.showcase-card__tag_services {
	color: #0b6b3f;
	background-color: var(--brand-2-pale);
}

.showcase-card__title {
	margin: 16px 0 0;
	font-size: clamp(24px, 19px + 1vw, 32px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--neutral-1000);
	overflow-wrap: anywhere;
}

/* Название магазина — под заголовком карточки, перед нишей. */
.showcase-card__name {
	margin: 14px 0 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--neutral-1000);
}

.showcase-card__niche {
	margin: 4px 0 0;
	font-size: 18px;
	line-height: 1.4;
	color: var(--neutral-670);
}

.showcase-card__subtitle {
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--neutral-820);
}

.showcase-card__features {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-gap: 10px;
}

.showcase-card__features li {
	position: relative;
	padding-left: 28px;
	font-size: 17px;
	line-height: 1.45;
	color: var(--neutral-820);
}

/* Галочка — рамка из двух сторон, повёрнутая на 45°. */
.showcase-card__features li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .3em;
	width: 7px;
	height: 12px;
	border-right: 2.5px solid var(--brand-accent);
	border-bottom: 2.5px solid var(--brand-accent);
	transform: rotate(45deg);
}

.showcase-card__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	grid-gap: 10px;
	margin-top: 28px;
}

.showcase-card__domain {
	font-size: 15px;
	line-height: 1.3;
	color: var(--neutral-670);
}

/* --------------------------------------------------------------- фокус */

/* shop.css снимает outline у ссылок и кнопок; с клавиатуры его возвращаем. */
.page-examples .page__content a:focus-visible,
.page-examples .page__content button:focus-visible {
	outline: 3px solid var(--brand-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------- адаптив */

/* Десктоп: скриншоты плавают внутри карточки и остаются на экране, пока
   читается текст (замечание заказчика 05.10.2026: при выравнивании по
   центру первый экран карточки выглядел пустым). */
@media screen and (min-width: 1025px) {
	.showcase-card {
		align-items: start;
	}
	.showcase-card__media {
		position: sticky;
		top: calc(var(--header-height, 72px) + 24px);
	}
}

@media screen and (max-width: 1024px) {
	.showcase-card,
	.showcase-card_reverse {
		grid-template-columns: 1fr;
	}
	.showcase-card_reverse .showcase-card__media {
		order: 0;
	}
	.showcase-card__media {
		max-width: 720px;
		width: 100%;
		justify-self: center;
	}
}

/* На телефоне — только мобильный скриншот, без наложения. Десктопный
   скрыт, а с loading="lazy" браузер его и не скачивает. */
@media screen and (max-width: 768px) {
	.showcase-card {
		border-radius: 24px;
		padding: 24px 20px 28px;
		grid-gap: 24px;
	}
	.showcase-card__media {
		padding: 0;
	}
	.showcase-card__desktop {
		display: none;
	}
	.showcase-card__phone {
		position: static;
		width: min(240px, 72%);
		max-width: none;
		margin: 0 auto;
	}
	.showcase-card__features li {
		font-size: 16px;
	}
	.showcase-card__cta {
		align-self: stretch;
		align-items: center;
	}
	.showcase-card__cta .button {
		width: 100%;
		max-width: 300px;
	}
}

/* Обёртка кнопки пробного периода в финальном блоке: нужна только ради
   `data-id` (его читает обработчик оплаты), на раскладку влиять не должна —
   кнопка остаётся flex-элементом рядом с «Задать вопрос». */
.block-create-your-own-store__trial {
	display: contents;
}