/* RESPONSIVE · Cosmos Neon 2026 · LordVHD
   Мобильная адаптация · Breakpoints: 1440 · 1200 · 992 · 768 · 576 · 480 · 360
------------------------------------------------------------- */

/* Доступность: отключить анимации для пользователей с ограничениями */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.cosmos-bg, .cosmos-grid, .scanlines-crt {display: none;}
}

/* Тач-устройства: отключить тяжёлые hover-эффекты */
@media (hover: none) and (pointer: coarse) {
	.item:hover .img-responsive > img {transform: scale(1.02); filter: brightness(1);}
	.item:hover .item__img::after {opacity: 0;}
	.cosmos-header {backdrop-filter: blur(12px) saturate(140%);}
}

/* Mobile Menu */
.mobile-menu {
	width: 340px; max-width: 92vw; height: 100dvh;
	overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
	z-index: 9999; position: fixed; left: -100%; top: 0;
	transition: left 0.35s cubic-bezier(0.32, 0.72, 0, 1);
	background: linear-gradient(180deg, var(--bg-darker-1) 0%, var(--bg-darker) 40%, #0a0120 100%);
	border-right: 1px solid rgba(0, 229, 255, 0.18);
	box-shadow: 12px 0 60px rgba(124, 77, 255, 0.25), 0 0 0 1px rgba(255, 0, 170, 0.08) inset;
	overscroll-behavior: contain;
}
.mobile-menu.is-active {left: 0;}
body.mobile-menu-is-opened {overflow: hidden; touch-action: none;}
.mobile-menu__header {
	padding: 16px 20px; gap: 12px;
	background: linear-gradient(90deg, rgba(0,229,255,0.08), rgba(255,0,170,0.06));
	border-bottom: 1px solid var(--bdc);
}
.mobile-menu__header .logo {font-size: 20px; letter-spacing: 0.5px;}
.mobile-menu__btn-close {
	font-size: 26px; width: 42px; height: 42px; margin-right: -10px;
	border-radius: 10px; transition: all 0.2s;
}
.mobile-menu__btn-close:hover {background: rgba(255,0,170,0.12); color: var(--magenta);}
.mobile-menu__content {padding: 18px 20px 60px;}
.mobile-menu__content .header__search,
.mobile-menu__content .header__btn-login {display: block; width: 100%; margin: 0 0 14px;}
.mobile-menu__content .header__btn-login {display: flex; justify-content: center;}
.mobile-menu__content .header__menu {display: block; margin: 0; padding: 0;}
.mobile-menu__content .header__menu > li > a {
	height: 52px; padding: 0 14px; font-size: 15px;
	border-radius: 10px; margin-bottom: 4px;
}
.mobile-menu__content .header__menu > li > a:hover {background: rgba(0,229,255,0.08);}
.mobile-menu__content .header__menu-hidden {
	opacity: 1; visibility: visible; translate: 0 0; position: static;
	background: rgba(10, 3, 32, 0.5); backdrop-filter: blur(8px);
	width: calc(100% + 40px); margin: 10px -20px; padding: 16px 20px;
	box-shadow: none; border-top: 1px solid var(--bdc); border-bottom: 1px solid var(--bdc);
}
.mobile-menu__content div.header__menu-hidden {grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 18px;}
.mobile-menu__content .header__menu-hidden-col > li:first-child {
	color: var(--cyan); font-weight: 700; letter-spacing: 0.3px;
	text-shadow: 0 0 12px rgba(0, 229, 255, 0.45); margin-bottom: 10px;
}

.skip-link {
	position: absolute; left: -9999px; top: auto; width: 1px; height: 1px;
	overflow: hidden; z-index: 10000;
}
.skip-link:focus {
	left: 20px; top: 20px; width: auto; height: auto; padding: 12px 24px;
	background: var(--cyan); color: #001018; font-weight: 700; border-radius: 10px;
	box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
}

/* =========================================================
   1440px · Большие десктопы (оптимизация сетки)
   ========================================================= */
@media screen and (max-width: 1440px) {
	:root {--max-width: 1240px; --indent: 24px;}
	.grid-items {grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px;}
}

/* =========================================================
   1200px · Ноутбуки, небольшие десктопы
   ========================================================= */
@media screen and (max-width: 1200px) {
	:root {--indent-negative: -20px; --indent: 20px; --max-width: 980px;}
	.wrapper__container {max-width: var(--max-width);}
	body, .has-branding {padding-top: 0;}

	.cosmos-grid {background-size: 45px 45px; opacity: 0.55;}
	.cosmos-bg {background-size: 650px 650px; opacity: 0.9;}
	.scanlines-crt {opacity: 0.012;}
	.cosmos-body::before {opacity: 0.75; height: 2.5px;}

	.wrapper::before, .wrapper::after {background: none; display: none;}

	.cosmos-header .header__menu {display: none;}
	.cosmos-header {padding: 18px var(--indent); gap: 10px; height: 76px;}
	.header__search {flex: 1 1 0; max-width: 100%; min-width: 60px; margin-left: 10px;}
	.header__btn-menu {display: flex !important;}
	.header__theme-select {width: 40px; height: 40px; font-size: 18px !important;}

	.page__cols {display: block;}
	.page__cols-right:has(.filter-block) {display: none;}
	.page__cols:has(.page__player) .page__cols-right {padding: 0;}
	.page__fr {position: static;}
	.page__fr .sect__content {height: auto; max-height: 170px;}

	.schedule-item {padding: 8px 20px; gap: 10px 24px;}
	.schedule-item__number {width: 140px;}

	.grid-items {grid-template-columns: repeat(auto-fill, minmax(min(32vw, 175px), 1fr)); gap: 15px;}
	.carou__content {padding: 0 12px;}
	.sect {padding: 22px var(--indent);}

	.cosmos-sect--top .grid-items {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));}
	.badge {padding: 3px 9px; font-size: 10px;}
	.tech-badge {padding: 5px 10px; font-size: 11px;}
}

@media screen and (max-width: 1200px) and (min-width: 576px) {
	.sect:has(.sect__tabs) .grid-items {
		display: flex; overflow-y: hidden; overflow-x: auto;
		scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
		scrollbar-width: thin; scrollbar-color: rgba(0,229,255,0.3) transparent;
		padding-bottom: 10px;
	}
	.sect:has(.sect__tabs) .grid-items::-webkit-scrollbar {height: 6px;}
	.sect:has(.sect__tabs) .grid-items::-webkit-scrollbar-thumb {
		background: linear-gradient(90deg, var(--cyan), var(--magenta));
		border-radius: 3px;
	}
	.sect:has(.sect__tabs) .grid-items > .grid-items__item {
		flex: 0 0 185px; scroll-snap-align: start;
	}
}

/* =========================================================
   992px · Планшеты (ландшафт), большие планшеты
   ========================================================= */
@media screen and (max-width: 992px) {
	:root {--indent-negative: -16px; --indent: 16px; --max-width: 800px;}
	.wrapper__container {max-width: var(--max-width);}

	.cosmos-grid {background-size: 35px 35px; opacity: 0.45;}
	.cosmos-bg {background-size: 550px 550px;}
	.cosmos-body::before {height: 2px; animation-duration: 6s;}

	.footer__notify {margin: 0;}
	.footer__menu {width: 100%;}
	.footer__tech-stack {width: 100%; justify-content: center; flex-wrap: wrap;}

	.pagination {gap: 10px;}
	.pagination__btn-loader a, .pagination__btn-loader span:not([class]) {width: 100%;}
	.pagination > a, .pagination > span {flex-grow: 1; order: 10;}
	.pagination__pages, .pagination__btns {min-width: 100%;}
	.pagination__pages a, .pagination__pages span, .pagination__btns > * {flex-grow: 1;}

	.grid-items {grid-template-columns: repeat(auto-fill, minmax(min(38vw, 155px), 1fr)); gap: 13px;}
	.item__title {font-size: 13.5px; line-height: 1.35;}
	.item__meta {font-size: 11px;}
	.item__rating {font-size: 10.5px; padding: 2.5px 7px;}

	.cosmos-title {font-size: 21px; letter-spacing: 0.3px;}
	.cosmos-title-line {width: 40px; height: 2px;}
	.sect__title {font-size: 20px;}
	.page__header h1 {font-size: 24px;}

	.btn-cosmos {height: 38px; padding: 0 18px; font-size: 12.5px;}
	.btn-cosmos--sm {height: 34px; padding: 0 15px; font-size: 11.5px;}

	.cosmos-carou-caption {font-size: 13.5px; padding: 10px 20px;}
	.cosmos-line {width: 35px; height: 1.5px;}
}

/* =========================================================
   768px · Планшеты (портрет), небольшие планшеты
   ========================================================= */
@media screen and (max-width: 768px) {
	:root {--indent-negative: -14px; --indent: 14px; --max-width: 660px; --ui-elem-height: 38px;}
	.wrapper__container {max-width: var(--max-width);}

	.cosmos-grid {display: none;}
	.scanlines-crt {display: none;}
	.cosmos-body::before {display: none;}
	.logo-glow {display: none;}
	.cosmos-line {display: none;}
	.cosmos-title-line {display: none;}
	.tech-badge {display: none;}
	.badge--vr, .badge--8k, .badge--ai {font-size: 9.5px; padding: 2px 7px;}

	.cosmos-header .header__search,
	.cosmos-header .header__btn-login,
	.header__btn1 {display: none;}
	.mobile-menu__content .header__search,
	.mobile-menu__content .header__btn-login {display: block;
		width: 100%; margin: 0 0 12px;}
	.mobile-menu__content .header__btn-login {display: flex;}
	.header__logo {flex: 1 1 0; max-width: 100%; min-width: 60px; font-size: 20px;}
	.header__btn-menu, .header__btns {order: 10; padding: 0;}
	.cosmos-header {padding: 12px var(--indent); height: 68px;}
	.cosmos-header {backdrop-filter: blur(14px) saturate(140%);}

	.sect__header:has(.sect__tabs) .sect__title {width: 100%;}
	.sect__tabs {margin-top: 12px; gap: 10px; width: 100%; flex-wrap: wrap;}
	.sect__tabs button {flex: 1 1 0; min-width: max-content; padding: 0 14px; font-size: 12px; height: 32px; border-radius: 8px;}
	.sect .filter-block {display: none;}
	.sect .filter-block.is-active {display: block;}
	.sect__btn-filter {display: flex;}
	.sect {padding: 18px var(--indent);}
	.cosmos-sect-header {flex-wrap: wrap;}
	.cosmos-sect-header > :nth-child(1) {order: 1;}
	.cosmos-sect-header > .btn-cosmos {order: 2;}
	.cosmos-sect-header > .sect__tabs {order: 10;}

	.page__main {display: block;}
	.page__main > * + * {margin-top: 20px;}
	.page__header h1, body:has(.page__header) .speedbar {text-align: center;}
	.page__poster {margin-left: auto; margin-right: auto; width: 210px;}
	.page__list-rates {padding: 12px 0;}
	.schedule-item {gap: 0 12px;}
	.schedule-item__number {width: 100px; text-align: right;}
	.schedule-item__descr {min-width: calc(100% - 130px); order: -1;}
	.page__complaint {display: none !important;}
	.page__player .tabs-block__select button {flex-grow: 1;}
	.page__player-bottom {padding: 20px;}
	.ya-share2 {width: 100%; text-align: center;}
	.page__fav {margin: 0;}
	.page__likes a {padding: 0 12px; height: 32px; font-size: 12px; gap: 8px;}

	.page__ac {margin-bottom: 22px;}
	.ac-form__bottom {gap: 10px;}
	.ac-form__bottom button {padding: 0 22px; width: 100%;}
	.ac-form__header input + input {min-width: 100%; order: 10;}
	.ac-form__header > span, .comm::before {display: none;}
	.ac-form #b_color {display: none;}
	.ac-toggle .ac-form__bottom button {position: static; width: 100%;}
	.comm {padding: 16px 20px;}
	.comm__img {width: 42px; height: 42px; position: relative; left: 0; top: 0;}
	.comm__meta {display: block;}
	.comm__user-rating, .comm__group {translate: -50% -100%; display: none;}

	.grid-items {grid-template-columns: repeat(auto-fill, minmax(min(44vw, 145px), 1fr)); gap: 11px;}
	.carou__caption {font-size: 13px; padding: 10px;}
	.footer {padding: 22px var(--indent);}
	.footer__one {flex-direction: column; gap: 16px;}
	.footer__logo {font-size: 18.5px;}
	.footer__notify {text-align: center; font-size: 12.5px; line-height: 1.5;}
	.footer__menu {gap: 10px 18px; font-size: 12.5px; flex-wrap: wrap;}
	.footer__two {flex-direction: column; gap: 12px;}
	.footer__copyright {text-align: center; font-size: 11.5px; line-height: 1.5;}

	.cosmos-title {font-size: 19px;}
	.sect__title {font-size: 18.5px;}
	.page__header h1 {font-size: 22px;}

	.scrolltop {width: 44px; height: 44px; right: 12px; bottom: 12px; font-size: 16px;}
}

/* =========================================================
   576px · Большие смартфоны
   ========================================================= */
@media screen and (max-width: 576px) {
	:root {--indent-negative: -12px; --indent: 12px; --max-width: 540px; --ui-elem-height: 36px;}
	.wrapper__container {max-width: var(--max-width);}

	.cosmos-bg {background-size: 450px 450px;}

	.lgn__content {padding: 30px 22px;}
	.lgn__ctrl > * {font-size: 16.5px; height: 42px;}
	.lgn__btn-close {right: 0; top: 0; color: var(--tt); font-size: 25px;}
	.lgn__header {padding-left: 60px;}
	.lgn__avatar {width: 42px; font-size: 18px;}
	.lgn__title {font-size: 17px;}
	.lgn__caption {font-size: 14px; margin-top: 0;}
	.header__login a, .header__btn1 {display: none;}
	.footer__notify {width: 100%; padding: 0; border: 0; text-align: center;}
	.footer__copyright {margin: 0; text-align: center; width: 100%;}

	.page__scr ul:has(li:nth-child(6)) {grid-template-columns: repeat(2, 1fr);}
	.page__scr ul:not(:has(li:nth-child(6))) {gap: 10px;}

	.grid-items {grid-template-columns: repeat(auto-fill, minmax(min(47vw, 135px), 1fr)); gap: 10px;}
	.item__img {border-radius: 5px;}
	.item__btn-info {font-size: 10.5px;}
	.item__rating {font-size: 10px; padding: 2px 6px;}
	.item__info {padding: 9px 8px;}

	.header__theme-select {font-size: 20px !important; width: 38px; height: 38px;}
	.mobile-menu {width: 100%; max-width: 100%;}
	.mobile-menu__content div.header__menu-hidden {grid-template-columns: 1fr;}

	.cosmos-title {font-size: 17.5px; padding: 6px 0;}
	.sect__title {font-size: 17px;}
	.page__header h1 {font-size: 20px;}
	.serv__title {font-size: 20px;}

	.btn-cosmos {height: 38px; padding: 0 16px; font-size: 12px; letter-spacing: 0.5px;}
	.btn-cosmos--sm {height: 34px; padding: 0 13px; font-size: 11px;}

	.sect__tabs button {font-size: 11.5px; height: 32px; padding: 0 10px;}
	.sect__tabs {gap: 7px;}

	.cosmos-carou-caption {font-size: 12.5px; padding: 8px 14px; letter-spacing: 0.3px;}
	.cosmos-carou {margin-bottom: 14px;}
}

/* =========================================================
   480px · Средние смартфоны
   ========================================================= */
@media screen and (max-width: 480px) {
	:root {--indent-negative: -10px; --indent: 10px; --max-width: 460px; --ui-elem-height: 34px;}
	.wrapper__container {max-width: var(--max-width);}

	.cosmos-bg {opacity: 0.8;}
	.cosmos-header {padding: 10px var(--indent); height: 62px;}
	.header__logo {font-size: 18px;}
	.header__btn-menu {width: 36px; height: 36px; font-size: 17px !important;}
	.header__theme-select {width: 34px; height: 34px; font-size: 16px !important;}

	.pagination__btn-loader a {min-width: 0; width: 100%;}
	.filter__col--ranges {padding: 0 0;}
	.filter__cell--submit, .filter__col--submit {flex-direction: row; width: 100%;}
	.filter__cell--submit input {flex: 1 1 0; max-width: 100%; min-width: 50px;}

	.grid-items {grid-template-columns: repeat(2, 1fr); gap: 9px;}
	.item__title {font-size: 12.5px; line-height: 1.3;}
	.item__meta {font-size: 10.5px;}
	.item__info {padding: 8px 7px;}
	.item__rating {top: 6px; right: 6px; font-size: 9.5px;}

	.footer__menu {flex-direction: column; gap: 8px; align-items: center;}
	.footer__menu a {font-size: 12px;}
	.footer__notify {font-size: 11.5px; line-height: 1.45;}
	.footer__logo {font-size: 17px;}
	.footer {padding: 20px var(--indent);}

	.page__poster {width: 170px;}
	.page__btn {width: 100%;}
	.page__btn-group {flex-direction: column;}
	.page__btn-group > * {width: 100%;}

	.us__one {padding: 20px 12px 20px 72px;}
	.us__name {font-size: 18px;}
	.us__img {width: 52px; height: 52px; left: 12px; bottom: auto; top: 50%; margin-top: -26px;}
	.us__two {padding: 16px 12px; gap: 15px 10px; justify-content: center; flex-direction: column;}
	.us__btn {justify-content: center; min-width: 100%;}
	.us__three {padding: 0; border: 0;}
	.us__list li {padding-left: 130px; font-size: 12px;}
	.us__list li > span:first-child {left: 10px; font-size: 11px;}

	.cosmos-title {font-size: 16px;}
	.sect__title {font-size: 15.5px;}
	.page__header h1 {font-size: 18.5px;}

	.sect {padding: 16px var(--indent);}
	.sect__tabs {margin-top: 10px;}
	.sect__tabs button {font-size: 11px; height: 31px; padding: 0 9px; border-radius: 7px;}
}

/* =========================================================
   360px · Маленькие смартфоны
   ========================================================= */
@media screen and (max-width: 360px) {
	:root {
		--indent-negative: -8px; --indent: 8px; --max-width: 100%;
		--ui-elem-height: 32px; --ui-elem-padding: 14px;
	}
	.wrapper__container {max-width: var(--max-width);}

	.ac-form__bottom .comments_subscribe {font-size: 12px;}
	.full-text iframe {
		width: calc(100% + 20px); max-width: calc(100% + 20px);
		height: 210px; margin-left: -10px; margin-right: -10px; border-radius: 6px;
	}

	.filter__bin {width: 100%;}
	.search-block__input {font-size: 13px; height: 36px; border-radius: 8px;}

	.grid-items {grid-template-columns: repeat(2, 1fr); gap: 7px;}
	.item__info {padding: 7px 6px;}
	.item__title {font-size: 11.5px; line-height: 1.28;}
	.item__meta {display: none;}
	.badge {display: none;}
	.badge--hot {display: inline-flex; font-size: 9px; padding: 1.5px 6px;}

	.cosmos-header {padding: 9px var(--indent); height: 58px;}
	.header__logo {font-size: 17px;}
	.header__btn-menu {width: 32px !important; height: 32px !important; font-size: 16px !important;}
	.header__theme-select {width: 32px !important; height: 32px !important; font-size: 15px !important;}

	.sect {padding: 14px var(--indent);}
	.sect__title {font-size: 15px;}
	.cosmos-title {font-size: 15px;}
	.page__header h1 {font-size: 17.5px;}

	.comm {padding: 12px;}
	.comm__text {font-size: 13px; line-height: 1.5;}

	.footer {padding: 16px var(--indent);}
	.footer__copyright {font-size: 10.5px;}
	.footer__notify {font-size: 10.5px; line-height: 1.4;}
	.footer__menu a {font-size: 11.5px;}

	.btn, button, [type="button"], [type="reset"], [type="submit"] {font-size: 12px;}
	.pagination {gap: 6px;}
	.pagination a, .pagination span {min-width: 29px; height: 29px; font-size: 12px; border-radius: 7px;}

	.btn-cosmos {height: 36px; padding: 0 14px; font-size: 11.5px; border-radius: 8px;}
	.btn-cosmos--sm {height: 32px; padding: 0 11px; font-size: 10.5px;}

	.sect__tabs button {font-size: 10.5px; height: 30px; padding: 0 8px;}
	.carou__caption {font-size: 12px; padding: 7px 10px;}
}

/* Landscape для телефонов (короткие экраны) */
@media screen and (max-height: 480px) and (orientation: landscape) {
	:root {--ui-elem-height: 30px;}
	.mobile-menu {height: 100vh; overflow-y: auto;}
	.mobile-menu__header {padding: 10px 16px;}
	.mobile-menu__content {padding: 12px 16px 30px;}
	.cosmos-header {height: 56px; padding: 8px var(--indent);}
	.header__logo {font-size: 17px;}
	.footer {padding: 14px var(--indent);}
	.grid-items {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}
}