/* Карточки конструкций — [moskiton_types]. Сцены нарисованы стилями: один свет,
   один материал, объект снят вплотную; при наведении проявляется крупный план узла.
   Раскладка считается от ширины секции (container queries), поэтому блок одинаково
   ложится и в узкую колонку, и во всю ширину страницы. */

.mkt {
	--mkt-field: #10150e;         /* полотно в тени — поле сцены */
	--mkt-field-lit: #1e2619;     /* полотно на свету — плоскость карточки */
	--mkt-thread: 141, 154, 126;  /* нить: нужна с разной прозрачностью */
	--mkt-lit: 195, 228, 81;      /* свет улицы сквозь полотно */
	--mk-accent: #c6f04b;
	--mk-accent-ink: var(--mk-accent);
	--mkt-ink: #12161a;
	--mkt-mute: #7b8288;
	--mkt-line: #e3e5e6;
	--mkt-plate: #ffffff;
	--mkt-ease: cubic-bezier(.4, 0, .2, 1);

	container-type: inline-size;
	container-name: mkt;
	box-sizing: border-box;
	display: block;
	position: relative;
	padding: clamp(30px, 5vw, 72px) clamp(20px, 5vw, 56px) clamp(40px, 6vw, 80px);
	color: var(--mkt-ink);
	font-family: "Golos Text", "PT Root UI", "Manrope", "Helvetica Neue", Arial, sans-serif;
	line-height: 1.45;
}

.mkt *,
.mkt *::before,
.mkt *::after { box-sizing: inherit; }

.mkt__in { max-width: 1280px; margin: 0 auto; }

.mkt__cap {
	margin: 0 0 10px;
	color: var(--mkt-mute);
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* Цвет и шрифт задаём явно: тема сайта красит и набирает h2 своим правилом,
   а наследование от секции ему проигрывает. */
.mkt__h {
	margin: 0 0 clamp(20px, 3vw, 34px);
	max-width: 22ch;
	color: var(--mkt-ink);
	font-family: inherit;
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.025em;
}

/* Ритм: крупная сцена, две узкие, затем широкие парами — плотность неравномерная. */
.mkt__tiles {
	display: grid;
	gap: clamp(10px, 1.4vw, 16px);
	grid-template-columns: repeat(12, 1fr);
}

.mkt__tile {
	position: relative;
	isolation: isolate;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--mkt-line);
	border-radius: 14px;
	background: var(--mkt-plate);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .3s var(--mkt-ease), transform .3s var(--mkt-ease);
	grid-column: span 6;
}

.mkt__tile:nth-child(2),
.mkt__tile:nth-child(3) { grid-column: span 3; }

.mkt__tile.is-static { cursor: default; }

/* ── Сцена ────────────────────────────────────────────────── */

.mkt__scene {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mkt-field);
}

.mkt__tile:nth-child(1) .mkt__scene,
.mkt__tile:nth-child(n+4) .mkt__scene { aspect-ratio: 16 / 9; }

/* Полотно — общий свет для всех сцен. */
.mkt__mesh {
	display: block;
	position: absolute;
	inset: 0;
	background-color: #1b2216;
	background-image:
		repeating-linear-gradient(90deg, rgba(var(--mkt-thread), .5) 0 1.5px, rgba(0, 0, 0, 0) 1.5px 10px),
		repeating-linear-gradient(0deg, rgba(var(--mkt-thread), .34) 0 1.5px, rgba(0, 0, 0, 0) 1.5px 10px),
		radial-gradient(60% 50% at 70% 18%, rgba(var(--mkt-lit), .20), transparent 70%);
}

/* Металл профиля — один и тот же материал во всех карточках. */
.mkt__al {
	display: block;
	position: absolute;
	background: linear-gradient(100deg, #3f4737 0%, #79826a 26%, #39402f 34%, #232a1d 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

/* Рамочная: рама по периметру и плунжеры. */
.mkt--frame .mkt__al {
	inset: 14%;
	border-radius: 6px;
	background: none;
	box-shadow: inset 0 0 0 14px #333b2b, inset 0 0 0 15px rgba(255, 255, 255, .10), 0 24px 50px rgba(0, 0, 0, .45);
}

.mkt__pins { display: block; position: absolute; inset: 14%; }

.mkt__pins i {
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #c9d2b6;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
}

.mkt__pins i:nth-child(1) { left: -5px; top: 26%; }
.mkt__pins i:nth-child(2) { left: -5px; bottom: 26%; }
.mkt__pins i:nth-child(3) { right: -5px; top: 26%; }
.mkt__pins i:nth-child(4) { right: -5px; bottom: 26%; }

/* Раздвижная: две направляющие, створка сдвинута. */
.mkt--sliding .mkt__al:nth-of-type(1) { left: 0; right: 0; top: 16%; height: 9%; }
.mkt--sliding .mkt__al:nth-of-type(2) { left: 0; right: 0; bottom: 16%; height: 9%; }

.mkt__leaf {
	display: block;
	position: absolute;
	left: 8%;
	top: 25%;
	bottom: 25%;
	width: 52%;
	border-radius: 3px;
	box-shadow: inset 0 0 0 8px #333b2b, 0 20px 40px rgba(0, 0, 0, .5);
	background: repeating-linear-gradient(90deg, rgba(var(--mkt-thread), .45) 0 1.5px, rgba(0, 0, 0, 0) 1.5px 9px), #1e2618;
}

/* Дверная: вертикальная створка, петли и ручка. */
.mkt--door .mkt__al:nth-of-type(1) {
	left: 22%;
	right: 22%;
	top: 6%;
	bottom: 6%;
	border-radius: 4px;
	background: none;
	box-shadow: inset 0 0 0 12px #333b2b, inset 0 0 0 13px rgba(255, 255, 255, .08), 0 26px 50px rgba(0, 0, 0, .5);
}

.mkt__hinges { display: block; }

.mkt__hinges i {
	display: block;
	position: absolute;
	left: 20.5%;
	width: 14px;
	height: 26px;
	border-radius: 3px;
	background: linear-gradient(180deg, #8a937a, #39412f);
}

.mkt__hinges i:nth-child(1) { top: 22%; }
.mkt__hinges i:nth-child(2) { top: 50%; }
.mkt__hinges i:nth-child(3) { top: 70%; }

.mkt__handle {
	display: block;
	position: absolute;
	right: 23%;
	top: 47%;
	width: 22px;
	height: 8px;
	border-radius: 4px;
	background: #c9d2b6;
}

/* Плиссе: гармошка вместо ровного полотна. */
.mkt--plisse .mkt__mesh {
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 2px, rgba(0, 0, 0, .35) 2px 9px, rgba(var(--mkt-thread), .28) 9px 11px, rgba(0, 0, 0, .22) 11px 18px),
		radial-gradient(60% 50% at 70% 18%, rgba(var(--mkt-lit), .16), transparent 70%);
}

.mkt--plisse .mkt__al:nth-of-type(1) { left: 6%; right: 6%; top: 10%; height: 7%; border-radius: 3px; }
.mkt--plisse .mkt__al:nth-of-type(2) { left: 6%; right: 6%; bottom: 10%; height: 7%; border-radius: 3px; }

/* Рулонная: короб сверху, полотно спущено наполовину. */
.mkt--roll .mkt__al:nth-of-type(1) { left: 8%; right: 8%; top: 8%; height: 14%; border-radius: 6px; }

.mkt__cloth {
	display: block;
	position: absolute;
	left: 11%;
	right: 11%;
	top: 22%;
	height: 44%;
	background: repeating-linear-gradient(0deg, rgba(var(--mkt-thread), .4) 0 1.5px, rgba(0, 0, 0, 0) 1.5px 9px), #1d2417;
	box-shadow: 0 22px 44px rgba(0, 0, 0, .5);
}

.mkt__bar {
	display: block;
	position: absolute;
	left: 11%;
	right: 11%;
	top: 64%;
	height: 6%;
	border-radius: 3px;
	background: linear-gradient(180deg, #79826a, #333b2b);
}

/* Раскрытие узла при наведении — та же сцена, ближе к материалу. */
.mkt__note {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	padding: 16px;
	opacity: 0;
	transform: scale(1.012);
	background:
		radial-gradient(62% 62% at 50% 42%, rgba(0, 0, 0, .22), rgba(0, 0, 0, .62)),
		repeating-linear-gradient(90deg, rgba(205, 232, 120, .62) 0 3px, rgba(0, 0, 0, 0) 3px 26px),
		repeating-linear-gradient(0deg, rgba(205, 232, 120, .42) 0 3px, rgba(0, 0, 0, 0) 3px 26px),
		radial-gradient(58% 50% at 70% 20%, rgba(var(--mkt-lit), .22), transparent 70%),
		#1b2214;
	color: #e9eedb;
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.6;
	transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) {
	.mkt__tile:hover,
	.mkt__tile:focus-visible {
		border-color: var(--mk-accent);
		transform: translateY(-2px);
	}

	.mkt__tile:hover .mkt__note,
	.mkt__tile:focus-within .mkt__note { opacity: 1; transform: none; }

	.mkt__tile.is-static:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mkt__note,
	.mkt__tile { transition: none; }
}

/* ── Подписи карточки ─────────────────────────────────────── */

.mkt__txt { display: block; padding: 14px 16px 18px; }

.mkt__name {
	display: block;
	color: var(--mkt-ink);
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.mkt__desc {
	display: block;
	margin-top: 4px;
	color: var(--mkt-mute);
	font-size: 13.5px;
	line-height: 1.4;
}

.mkt__go {
	display: block;
	margin-top: 10px;
	color: var(--mk-accent-ink);
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.mkt__tile.is-static .mkt__go { display: none; }

@container mkt (max-width: 1000px) {
	.mkt__tile:nth-child(n) { grid-column: span 6; }
	.mkt__tile:nth-child(n) .mkt__scene { aspect-ratio: 4 / 3; }
}

@container mkt (max-width: 640px) {
	.mkt__tile:nth-child(n) { grid-column: span 12; }
}

/* Браузеры без container queries — по ширине окна. */
@supports not (container-type: inline-size) {
	@media (max-width: 1000px) {
		.mkt__tile:nth-child(n) { grid-column: span 6; }
		.mkt__tile:nth-child(n) .mkt__scene { aspect-ratio: 4 / 3; }
	}
	@media (max-width: 640px) {
		.mkt__tile:nth-child(n) { grid-column: span 12; }
	}
}

/* Тёмная тема модуля: карточка сделана из того же материала, что и сцена. */
.mkt--dark {
	--mkt-ink: #f1f3ec;
	--mkt-mute: #a3ab99;
	--mkt-line: #2a3225;
	--mkt-plate: var(--mkt-field-lit);
}