/* ============================================================
   Мафия Харьков — стилизованные соцкнопки в герое главной.

   Лежат в верхнем пустом промежутке героя, СПРАВА. Позиционированы
   абсолютно (как кнопка прямого эфира .mk-live слева/по центру) —
   выведены из потока, поэтому НЕ увеличивают отступ от шапки и не
   сдвигают контент. Токены (--mk-*) — из chrome.css.
   ============================================================ */

.mk-hero-soc {
	position: absolute;
	top: clamp(14px, 1.8vw, 30px);
	right: var(--mk-gut);
	z-index: 4;
	display: flex;
	gap: 10px;
}

.mk-hero-soc-a {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--mk-line-2);
	color: var(--mk-text);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: transform .18s var(--mk-ease), background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.mk-hero-soc-a svg { width: 20px; height: 20px; fill: currentColor; }
.mk-hero-soc-a:hover { transform: translateY(-3px); color: #fff; }

.mk-hero-soc-a.is-tg:hover { background: #229ED9; border-color: #229ED9; box-shadow: 0 10px 24px rgba(34, 158, 217, .40); }
.mk-hero-soc-a.is-yt:hover { background: #FF0000; border-color: #FF0000; box-shadow: 0 10px 24px rgba(255, 0, 0, .36); }
.mk-hero-soc-a.is-ig:hover {
	background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(214, 41, 118, .40);
}

/* Мобильные: то же место — верх-право свободного промежутка, чуть мельче. */
@media (max-width: 600px) {
	.mk-hero-soc { gap: 8px; top: 10px; }
	.mk-hero-soc-a { width: 36px; height: 36px; }
	.mk-hero-soc-a svg { width: 18px; height: 18px; }

	/* Во время эфира кнопка трансляции по центру занимает весь верхний
	   промежуток и на узком экране налезала бы на соцкнопки. Поэтому,
	   только когда идёт эфир (:has(.mk-live)), уводим соцкнопки строкой
	   ниже, а герою добавляем немного места сверху — чтобы ни эфир, ни
	   соцкнопки не наезжали на заголовок. Без эфира отступ прежний. */
	.mk-hero-in:has(.mk-live) { padding-top: 118px; }
	.mk-live + .mk-hero-soc { top: 58px; }
}

@media print { .mk-hero-soc { display: none; } }