/* lion-menu.css — выезжающее меню сайта (popup 23923).
   Компонент темы leo-theme. Классы: .lion-menu__*, модификатор .lion-location-popup--menu.
   Открытие/закрытие — assets/js/lion.js (data-lion-popup / data-lion-popup-close). */

/* 1. Оверлей: панель справа, затемнение слева */
.lion-location-popup.lion-location-popup--menu.is-open {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	overflow: hidden;
	padding: 0;
	background: rgba(10, 12, 16, .42); /* финальный вид — в lion-popups.css (стекло + blur) */
}
.lion-location-popup.lion-location-popup--menu.is-open > .lion-block { /* на случай старой разметки */
	background: #fff;
	border-radius: var(--radius-1) 0 0 var(--radius-1);
	padding: 0;
	margin: 0 0 0 auto;
	max-width: 54rem;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.lion-menu {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(54rem, 100%);
	display: flex;
	flex-direction: column;
	background: var(--color-white); /* перекрывается «стеклом» в lion-popups.css */
	border-radius: var(--radius-1) 0 0 var(--radius-1);
	box-shadow: -2rem 0 6rem rgba(0, 0, 0, .18);
	overflow: hidden;
	box-sizing: border-box;
	animation: lion-menu-in .28s cubic-bezier(.22, .61, .36, 1);
}
@keyframes lion-menu-in {
	from { transform: translateX(4rem); opacity: .35; }
	to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.lion-menu { animation: none; }
}

/* 2. Шапка панели */
.lion-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 2.4rem 2.8rem;
	border-bottom: .1rem solid var(--color-brand-light);
	flex: 0 0 auto;
}
.lion-menu__brand { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; }
.lion-menu__brand-name {
	font-family: "Lion Display", "Helvetica", sans-serif;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-black);
}
.lion-menu__brand-tag { font-size: 1.4rem; color: var(--color-text); }
.lion-menu__close {
	flex: 0 0 auto;
	width: 4.4rem;
	height: 4.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--color-brand-light);
	color: var(--color-blue);
	font-size: 2.6rem;
	line-height: 1;
	cursor: pointer;
	transition: all .2s ease;
}
.lion-menu__close:hover { background: var(--color-blue); color: var(--color-white); }

/* 3. Контент панели */
.lion-menu__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 2.8rem;
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
}
.lion-menu__section { display: flex; flex-direction: column; gap: 1.4rem; }
.lion-menu__title {
	margin: 0;
	font-family: "Lion Text", "Helvetica", sans-serif;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-text);
}

/* 3.1 Услуги — сетка в две колонки */
.lion-menu__services {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .4rem 2rem;
}
.lion-menu__services a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 1rem;
	border-radius: var(--radius-4);
	font-size: 1.6rem;
	line-height: 1.25;
	color: var(--color-black);
	text-decoration: none;
	transition: all .2s ease;
}
.lion-menu__services a:hover { background: var(--color-brand-light); color: var(--color-blue); }
.lion-menu__arrow,
.lion-menu__all i,
.lion-menu__cta i { font-style: normal; transition: transform .2s ease; }
.lion-menu__services a .lion-menu__arrow { color: var(--color-blue); opacity: 0; }
.lion-menu__services a:hover .lion-menu__arrow { opacity: 1; transform: translateX(.2rem); }

/* 3.2 Блог — рубрики-чипы и свежие статьи */
.lion-menu__chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.lion-menu__chip {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	padding: .7rem 1.3rem;
	border-radius: var(--radius-4);
	background: var(--color-brand-light);
	color: var(--color-black);
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none;
	transition: all .2s ease;
}
.lion-menu__chip b { font-size: 1.2rem; font-weight: 600; color: var(--color-text); }
.lion-menu__chip:hover { background: var(--color-blue); color: var(--color-white); }
.lion-menu__chip:hover b { color: rgba(255, 255, 255, .7); }

.lion-menu__posts {
	margin: .4rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	border-top: .1rem solid var(--color-brand-light);
}
.lion-menu__posts li + li { border-top: .1rem solid var(--color-brand-light); }
.lion-menu__posts a {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1.4rem 0;
	text-decoration: none;
}
.lion-menu__post-title {
	font-size: 1.7rem;
	line-height: 1.3;
	color: var(--color-black);
	transition: color .2s ease;
}
.lion-menu__posts a:hover .lion-menu__post-title { color: var(--color-blue); }
.lion-menu__posts time { font-size: 1.3rem; color: var(--color-text); }
.lion-menu__all {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--color-blue);
	text-decoration: none;
}
.lion-menu__all:hover { text-decoration: underline; }
.lion-menu__all:hover i { transform: translateX(.3rem); }

/* 3.3 Разделы — строки-ссылки */
.lion-menu__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 2.4rem;
}
.lion-menu__links a {
	font-size: 1.7rem;
	color: var(--color-black);
	text-decoration: none;
	transition: color .2s ease;
}
.lion-menu__links a:hover { color: var(--color-blue); text-decoration: underline; }

/* 4. Подвал панели: CTA + контакты */
.lion-menu__foot {
	flex: 0 0 auto;
	padding: 2.4rem 2.8rem 2.8rem;
	border-top: .1rem solid var(--color-brand-light);
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}
.lion-menu__cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.6rem 2.4rem;
	border-radius: var(--radius-2);
	background: linear-gradient(45deg, var(--color-blue) 0%, var(--color-red) 100%);
	color: var(--color-white);
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	overflow: hidden;
	z-index: 0;
}
.lion-menu__cta::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(45deg, var(--color-blue) 30%, var(--color-red) 70%);
	opacity: 0;
	transition: opacity .2s ease;
	z-index: -1;
}
.lion-menu__cta:hover { color: var(--color-white); }
.lion-menu__cta:hover::after { opacity: 1; }
.lion-menu__cta:hover i { transform: translateX(.3rem); }

.lion-menu__contacts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}
.lion-menu__phone {
	font-family: "Lion Display", "Helvetica", sans-serif;
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--color-black);
	text-decoration: none;
}
.lion-menu__phone:hover { color: var(--color-blue); }
.lion-menu__socials { display: flex; gap: .8rem; }
.lion-menu__socials a {
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-brand-light);
	color: var(--color-blue);
	transition: all .2s ease;
}
.lion-menu__socials svg { width: 1.9rem; height: 1.9rem; fill: currentColor; }
.lion-menu__socials a:hover { background: var(--color-blue); color: var(--color-white); }

/* 5. Кнопка закрытия из lion.js на этой панели не нужна (своя) */
.lion-location-popup--menu .lion-popup__close { display: none; }

/* 6. Адаптив */
@media (max-width: 767px) {
	.lion-menu {
		width: 100%;
		border-radius: 0;
		box-shadow: none;
	}
	.lion-menu__head { padding: 2rem 2rem; }
	.lion-menu__body { padding: 2.2rem 2rem; gap: 2.8rem; }
	.lion-menu__foot { padding: 2rem 2rem 2.4rem; }
	.lion-menu__services { grid-template-columns: 1fr; }
	.lion-menu__brand-name { font-size: 2.2rem; }
	.lion-menu__contacts { flex-wrap: wrap; }
}