/* 
 * Мобильные стили для темы TechDigest
 * 
 * Этот файл содержит стили для мобильных устройств
 * Размеры экранов: до 768px
 */

/* ========================================
   БАЗОВЫЕ СТИЛИ И ШРИФТЫ
   ======================================== */

/* Fira Sans Extra Condensed - cyrillic-ext */
@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/fira/NaPKcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda1fKuukef.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	font-display: auto;
}

/* Fira Sans Extra Condensed - cyrillic */
@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/fira/NaPKcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda1fuuukef.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	font-display: auto;
}

/* Fira Sans Extra Condensed - latin-ext */
@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/fira/NaPKcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda1fGuukef.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	font-display: auto;
}

/* Fira Sans Extra Condensed - latin */
@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/fira/NaPKcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda1f-uug.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: auto;
}

/* Fira Sans Extra Condensed - Bold variants */
@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/fira/NaPPcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda3USLr3W-oXZ-.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	font-display: auto;
}

@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/fira/NaPPcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda3USLr3y-oXZ-.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	font-display: auto;
}

@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/fira/NaPPcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda3USLr3a-oXZ-.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	font-display: auto;
}

@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/fira/NaPPcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda3USLr3i-oQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: auto;
}

/* Fira Sans Extra Condensed - Medium variants */
@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/fira/NaPPcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda3QyNr3a-oXZ-.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	font-display: auto;
}

@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/fira/NaPPcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda3QyNr3i-oQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: auto;
}

@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/fira/NaPPcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda3QyNr3W-oXZ-.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	font-display: auto;
}

@font-face {
	font-family: 'Fira Sans Extra Condensed';
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/fira/NaPPcYDaAO5dirw6IaFn7lPJFqXmS-M9Atn3wgda3QyNr3y-oXZ-.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	font-display: auto;
}

/* Roboto - cyrillic-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	font-display: auto;
}

/* Roboto - cyrillic */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	font-display: auto;
}

/* Roboto - latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	font-display: auto;
}

/* Roboto - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: auto;
}

/* Roboto - Medium variants */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
	font-display: auto;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	font-display: auto;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	font-display: auto;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: auto;
}

/* ========================================
   CSS ПЕРЕМЕННЫЕ (ТЕМЫ)
   ======================================== */

:root {
	--bg: #ffffff;
	--bg-secondary: #f4f7ff;
	--bg-secondary-09: rgba(244, 247, 255, .9);
	--inversion: #000000;
	--bg-header: #ececec;
	--bg-bar: #ffffff;
	--bg-sidebar: #ececec;
	--bg-border: #f0f0f0;
	--bg-theme-switcher: #202020;
	--bg-main-article: #f5f5f5;
	--bg-footer: #ececec;
	--color-stroke-news: #99e799;
	--search: rgba(153, 231, 153, .6);
	--color-stroke-article: #dfe7ee;
	--error: #e24c2b;
	--black: #000000;
	--white: #ffffff;
	--text-primary: #000000;
	--text-secondary: #8b8b8b;
	--link: #000;
	--link-smooth-hover: #666;
	--shadow: 0px 4px 30px rgba(0, 0, 0, .35);
}

[data-theme=dark] {
	--bg: #202020;
	--bg-secondary: #253345;
	--bg-secondary-09: rgba(27, 35, 47, .9);
	--inversion: #ffffff;
	--bg-header: #171717;
	--bg-bar: #253345;
	--bg-sidebar: #111;
	--bg-border: #3f3f3f;
	--bg-theme-switcher: #e4e4e4;
	--bg-main-article: #1c1c1c;
	--bg-footer: #171717;
	--color-stroke-news: #10621a;
	--search: rgba(16, 98, 26, .6);
	--color-stroke-article: #424a55;
	--error: #e24c2b;
	--black: #000000;
	--white: #ffffff;
	--text-primary: #e4e4e4;
	--text-secondary: #808080;
	--link: #e4e4e4;
	--link-smooth-hover: #aaa;
	--shadow: 0px 4px 30px rgba(0, 0, 0, .95);
}

/* ========================================
   БАЗОВЫЕ СТИЛИ
   ======================================== */

html {
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	background-color: var(--bg);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-x: hidden;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
caption,
canvas,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
form,
footer,
header,
hgroup,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
tt,
table,
tbody,
textarea,
tfoot,
thead,
time,
tr,
th,
td,
u,
ul,
var,
video {
	font-family: inherit;
	font-size: 100%;
	vertical-align: baseline;
	white-space: normal;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
}

a,
a:hover,
a:focus,
a:active,
span,
span:hover,
span:focus,
span:active,
svg,
img,
time,
h1,
h2,
p {
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/* cleanup stray block */

a,
svg {
	color: var(--link);
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

::selection {
	background: #ca0404;
	color: var(--white);
}

/* ========================================
   МЕДИА ЗАПРОСЫ
   ======================================== */

/* Мобильные устройства и планшеты (до 1024px) */
@media (max-width: 1024px) {
	/* ========================================
	   ОСНОВНЫЕ КОНТЕЙНЕРЫ
	   ======================================== */

	.page-container {
		background-color: var(--bg);
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.wrapper {
		padding: 0px;
		margin: 0 auto;
	}

	.sidebar-nav-open .top-nav,
	.sidebar-nav-open .page-container,
	.sidebar-nav-open .top-articles,
	.sidebar-nav-open .footer {
		filter: brightness(65%);
	}

	/* ========================================
	   ВЕРХНЯЯ НАВИГАЦИЯ
	   ======================================== */

	.top-nav {
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 60px;
		transition: top 0.3s linear 0.3s;
		background: var(--bg-header);
		z-index: 9999;
		position: fixed;
	}

	/* Отступ под фиксированной шапкой на мобильных */
	.nav-spacer { display: block; height: 60px; }

	.top-nav .logo {
		font: bold 23px / 30px Georgia, sans-serif;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		float: left;
		margin-top: 15px;
		padding: 0 10px;
		color: var(--link);
	}

	.categories {
		float: left;
		height: 60px;
		overflow: hidden;
	}

	.categories .categories-list {
		display: flex;
		text-align: left;
		white-space: nowrap;
		font-size: 0;
	}

	.categories-list li a {
		display: block;
		width: 100%;
		height: 40px;
		padding: 0 10px;
		font: bold 18px / 60px 'Fira Sans Extra Condensed', sans-serif;
		text-decoration: none;
		text-transform: uppercase;
		cursor: pointer;
		letter-spacing: 0.05rem;
	}

	.menu-icon {
		width: 30px;
		height: 30px;
		position: relative;
		cursor: pointer;
		float: left;
		margin-top: 15px;
		margin-left: -3.75px;
		margin-right: 6.25px;
		padding-left: 20px;
	}

	.search-icon {
		width: 30px;
		height: 30px;
		position: relative;
		cursor: pointer;
		float: right;
		margin-top: 17px;
		padding-right: 20px;
	}

	.theme-icon {
		width: 30px;
		height: 30px;
		position: relative;
		cursor: pointer;
		float: right;
		margin-top: 15px;
	}

	.theme-switcher {
		padding: 1px;
		width: 38px;
		height: 20px;
		background-color: var(--bg-theme-switcher);
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 18px;
		cursor: pointer;
		position: relative;
		-webkit-transition: background-color .3s ease;
		-o-transition: background-color .3s ease;
		transition: background-color .3s ease;
		float: right;
		margin: 20px;
	}

	.theme-switcher-icon {
		position: absolute;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		top: 0;
		width: 50%;
		height: 100%;
		border-radius: inherit;
	}

	.theme-switcher-icon-left {
		left: 0;
	}

	.theme-switcher-icon-right {
		right: 0;
	}

	.theme-switcher-svg {
		width: 16px;
		height: 16px;
		color: var(--bg-header);
	}

	.theme-switcher-circle {
		background-color: var(--bg-header);
		width: 50%;
		height: 100%;
		border-radius: 100%;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translate(0);
		-webkit-transition: -webkit-transform .3s ease;
		transition: -webkit-transform .3s ease;
		-o-transition: -o-transform .3s ease;
		transition: transform .3s ease;
		transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;
	}

	html[data-theme="dark"] .theme-switcher-circle {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translate(100%);
	}

	/* ========================================
	   БОКОВАЯ ПАНЕЛЬ НАВИГАЦИИ
	   ======================================== */

	.left-sidebar-menu {
		position: fixed;
		top: 0;
		bottom: 0;
		background: var(--bg-sidebar);
		color: var(--text-primary);
		font-weight: 500;
		padding: 15px;
		z-index: 100000;
		width: 260px;
		-webkit-transition: left 0.3s ease-in-out;
		-moz-transition: left 0.3s ease-in-out;
		-ms-transition: left 0.3s ease-in-out;
		-o-transition: left 0.3s ease-in-out;
		transition: left 0.3s ease-in-out;
	}

	.left-sidebar-close {
		left: -290px;
	}

	.left-sidebar-open {
		left: 0;
	}

	.left-sidebar-menu-header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		font-size: 26px;
	}

	.left-sidebar-menu-header .logo {
		text-transform: uppercase;
		font: bold 23px / 30px Georgia, sans-serif;
		letter-spacing: 0.02em;
		color: var(--text-primary);
	}

	.left-sidebar-menu-header .close-icon {
		width: 30px;
		height: 30px;
		position: relative;
		cursor: pointer;
		float: right;
	}

	.menu-socials {
		width: 100%;
		display: grid;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		grid-auto-rows: auto;
	}

	.menu-socials a {
		color: #fff;
		width: 35px;
		height: 25px;
		margin: 0 auto;
	}

	.menu-socials .vk-icon {
		margin-top: -3px;
	}

	.menu-socials .ok-icon {
		width: 35px;
		height: 27px;
	}

	.menu-socials .zen-icon {
		margin-top: 1px;
	}

	.left-sidebar-menu .menu-socials {
		grid-template-columns: repeat(4, 1fr);
		padding: 20px 0;
		border-top: .0625rem solid #555;
		border-bottom: .0625rem solid #555;
	}

	.social-icon {
		width: 100%;
		height: 100%;
	}

	.left-sidebar-menu-section {
		padding: 20px 0;
		border-bottom: .0625rem solid #555;
		display: block;
		width: 100%;
	}

	.left-sidebar-menu-section a {
		color: var(--link);
		font: 18px / 30px 'Fira Sans Extra Condensed', sans-serif;
		text-transform: uppercase;
		transition: all 0.3s ease-in-out;
		letter-spacing: 0.05em;
	}

	/* ========================================
	   ПОИСК
	   ======================================== */

	.search-mask {
		height: 100%;
		background: rgba(0, 0, 0, 0.9);
		position: absolute;
		z-index: 10000;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
	}

	.search-mask-closed {
		display: none;
	}

	.body-overflow {
		overflow-y: hidden !important;
	}

	.search-mask__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		font: 40px / 40px 'Fira Sans Extra Condensed', sans-serif;
	}

	.search-mask__close-icon {
		color: #ffffff;
		width: 25px;
		height: 25px;
		cursor: pointer;
	}

	.search-mask__input {
		width: calc(100% - 40px);
		margin: 25px 20px;
		background: transparent;
		font-size: 35px;
		color: #ffffff;
		border-bottom: 2px solid #ffffff;
		border-top: none;
		border-right: none;
		border-left: none;
	}

	.search-mask__input:focus-visible {
		outline: none;
	}

	.search-mask__footer {
		font: 20px / 25px 'Fira Sans Extra Condensed', sans-serif;
		padding: 0 20px;
		color: #808080;
	}

	/* ========================================
	   КАРТОЧКИ СТАТЕЙ
	   ======================================== */

	.article-card {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.article-card-image {
		z-index: 0;
		width: 100%;
	}

	.article-card-img {
		display: block;
		width: 100%;
		height: auto;
		filter: brightness(100%);
		border-radius: 10px;
		box-shadow: var(--shadow);
	}

	.article-card-title {
		font: 500 16px / 20px 'Fira Sans Extra Condensed', sans-serif;
		text-rendering: optimizeLegibility;
		display: block;
		overflow: hidden;
		letter-spacing: 0.02rem;
		margin-top: 10px;
	}

	.top-articles .article-card-title {
		float: left;
		font: 500 14px / 20px 'Fira Sans Extra Condensed', sans-serif;
		letter-spacing: 0.02rem;
		max-height: 60px;
		overflow: hidden;
	}

	.big-card .article-card-title {
		font: 500 26px/36px 'Fira Sans Extra Condensed', sans-serif;
		text-rendering: optimizeLegibility;
		display: block;
		overflow: hidden;
		letter-spacing: 0.02rem;
		text-align: center;
		margin-top: 20px;
	}

	.big-card .article-card-title::after {
		content: "";
		display: block;
		width: 3rem;
		height: .75rem;
		background: #ca0404;
		margin: 15px auto 15px auto;
	}

	.big-card .article-card-text {
		font: 20px / 25px 'Fira Sans Extra Condensed', sans-serif;
		text-rendering: optimizeLegibility;
		display: block;
		overflow: hidden;
		letter-spacing: 0.03rem;
		text-align: center;
		color: var(--text-primary);
	}

	/* ========================================
	   КАРТОЧКИ НОВОСТЕЙ
	   ======================================== */

	.news-card {
		width: 100%;
		display: grid;
		grid-column-gap: 10px;
		grid-row-gap: 10px;
		grid-template-columns: 40% 60%;
		grid-auto-rows: auto;
		justify-content: center;
		align-self: flex-start;
	}

	.news-card-image { width: 100%; }

	.news-card-image-inner {
		width: 100%;
		height: 0;
		position: relative;
		padding-top: 56.375%;
		overflow: hidden;
	}

	.news-card-img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: brightness(100%);
		border-radius: 5px;
		box-shadow: var(--shadow);
	}

	/* Каждая новость занимает всю строку */
	.news .news-card { grid-column: 1 / -1; }

	.news-card-inner {
		position: relative;
	}

	.news-card-title {
		font: 400 15px / 20px 'Fira Sans Extra Condensed', sans-serif;
		text-rendering: optimizeLegibility;
		display: block;
		overflow: hidden;
		letter-spacing: 0.05rem;
	}

	.news-card-date {
		font: 400 12px / 12px 'Fira Sans Extra Condensed', sans-serif;
		text-rendering: optimizeLegibility;
		display: block;
		overflow: hidden;
		letter-spacing: 0.05rem;
		color: var(--text-secondary);
		grid-column-end: 3;
		grid-column-start: 1;
	}

	/* ========================================
	   ЗАГОЛОВКИ И ТЕГИ
	   ======================================== */

	.section-name span,
	.card-tags,
	.more-news span {
		font: 16px / 20px 'Fira Sans Extra Condensed', sans-serif !important;
		display: inline-block;
		text-rendering: optimizeLegibility;
		text-transform: uppercase;
		letter-spacing: 0.1rem;
		margin: 0 auto;
		color: var(--text-primary);
	}

	.more-news {
		height: 20px;
		position: relative;
		text-align: center;
	}

	.shevron-down-icon {
		width: 20px;
		height: 20px;
		position: relative;
		cursor: pointer;
		top: 5px;
	}

	.section-name h2 {
		font-weight: normal;
		font: 16px / 16px 'Fira Sans Extra Condensed', sans-serif !important;
		color: var(--text-primary);
	}

	.card-tags {
		margin-bottom: 20px;
	}

	.card-tags,
	.card-tags ul {
		display: flex;
	}

	.card-tags ul li {
		margin-right: 10px;
	}

	.card-tags .slash {
		margin-right: 10px;
	}

	.card-tags span {
		color: var(--text-primary);
	}

	/* ========================================
	   ДЕТАЛЬНАЯ СТРАНИЦА СТАТЬИ
	   ======================================== */

	.article-detail {
		padding: 20px;
		background-color: var(--bg);
		width: 100%;
		margin: 0;
		box-sizing: border-box;
	}

	.breadcrumbs-date,
	.author-read {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20px;
	}

	.breadcrumbs-list {
		display: flex;
	}

	.breadcrumbs-list .next-element:before {
		padding: 0.25rem;
		content: ">";
	}

	.article-detail .date,
	.breadcrumbs-list li,
	.breadcrumbs-list li a,
	.article-stat {
		font: 400 12px / 12px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-secondary);
		text-transform: uppercase;
		letter-spacing: 0.05rem;
	}

	.breadcrumbs-list .last-element {
		display: none;
	}

	.article-detail .date {
		padding-left: 20px;
	}

	.counts-views {
		padding-left: 20px;
	}

	.article-stat {
		display: none;
	}

	.article-header h1 {
		color: var(--text-primary);
		font: 500 27px/37px 'Fira Sans Extra Condensed', sans-serif;
		letter-spacing: 0.05rem;
		padding-bottom: 20px;
	}

	.articles-description {
		color: var(--text-primary);
		font: 18px/23px 'Fira Sans Extra Condensed', sans-serif;
		letter-spacing: 0.05rem;
		padding-bottom: 20px;
	}

	.author-article {
		color: var(--text-primary);
		font: 14px / 20px 'Fira Sans Extra Condensed', sans-serif;
		letter-spacing: 0.05em;
	}

	.edit-article {
		padding-left: 50px;
	}

	/* ========================================
	   ИЗОБРАЖЕНИЯ И ВИДЕО
	   ======================================== */

	.article-image-lead {
		padding-bottom: 20px;
	}

	.article-image-lead-img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 10px;
	}

	.article-image,
	.article-video {
		margin-bottom: 20px;
	}

	.article-image img {
		width: 100%;
		border-radius: 10px;
		display: block;
	}

	.article-image .embed-image {
		position: relative;
	}

	.article-image .image-description,
	.embed-caption {
		color: var(--text-primary);
		font: 500 16px / 22px 'Fira Sans Extra Condensed', sans-serif;
		margin-bottom: 0 !important;
		border-bottom: .0625rem solid var(--bg-border);
		padding: 10px 0;
	}

	.article-image .image-description p {
		color: var(--text-primary);
		font: 500 16px / 22px 'Fira Sans Extra Condensed', sans-serif;
		margin-bottom: 0;
	}

	.article-image .image-source,
	.embedded-image-lead .article-source span,
	.embedded-image-lead .article-source a {
		font: 13px / 13px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-secondary);
		padding-top: 10px;
	}

	.image-description:empty {
		display: none;
	}

	.image-source:has(.is-empty:empty) {
		display: none;
	}

	.fancybox__container {
		z-index: 999999 !important;
	}

	.f-carousel svg,
	.fancybox__container svg {
		color: var(--white);
	}

	.f-carousel {
		height: 250px;
	}

	.f-carousel__slide a {
		width: 100%;
		height: 100%;
		display: block;
		text-align: center;
	}

	.f-carousel__slide img {
		width: auto !important;
		height: 100% !important;
	}

	.embed-video-iframe {
		position: relative;
		display: block;
		height: 0;
		padding: 0 0 56.5% 0;
		overflow: hidden;
		border-radius: 10px;
	}

	.embed-video-iframe iframe {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.telegram-post {
		margin-bottom: 20px;
	}

	/* ========================================
	   ТЕКСТ СТАТЬИ
	   ======================================== */

	.article-body {
		font: 16px / 26px 'Roboto', sans-serif;
		letter-spacing: 0.02em;
		color: var(--text-primary);
	}

	.article-body p {
		margin-bottom: 20px;
		font: 16px / 26px 'Roboto', sans-serif;
		letter-spacing: 0.02em;
		color: var(--text-primary);
	}

	.article-body .cdx-marker {
		margin-bottom: 20px;
		font: 17px / 30px 'Roboto', sans-serif;
		letter-spacing: 0.02em;
		padding: 0 2px;
		background: #ca0404;
		color: var(--white);
	}

	.article-body hr {
		width: 50px;
		margin: 30px auto;
		border: 1px solid var(--text-primary);
	}

	.article-body a {
		color: var(--text-primary);
		font-weight: 500;
		text-underline-offset: 5px;
		text-decoration: underline 2px #ca0404;
	}

	.article-body h2 {
		margin-bottom: 10px;
		font: bold 25px / 35px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-primary);
	}

	.article-body h3 {
		margin-bottom: 10px;
		font: bold 23px / 32px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-primary);
	}

	.article-body h4 {
		margin-bottom: 10px;
		font: bold 21px / 31px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-primary);
	}

	.article-body ol {
		counter-reset: list1;
	}

	.article-body ul li,
	.article-body ol li {
		position: relative;
		margin-bottom: 10px;
		font: 18px / 28px 'Fira Sans Extra Condensed', sans-serif;
		letter-spacing: 0.02em;
		color: var(--text-primary);
		padding-left: 30px;
	}

	.article-body ul li:before {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		background: #ca0404;
		top: 10px;
		left: 0;
		border-radius: 3px;
	}

	.article-body ol li:before {
		font-size: 20px;
		font-weight: 700;
		left: 0;
		top: 4px;
		line-height: 1;
		background: none;
		content: counter(list1) ".";
		counter-increment: list1;
		height: auto;
		position: absolute;
		transform: none;
		width: auto;
	}

	.article-body blockquote {
		font: 500 18px / 28px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-primary);
		text-align: center;
		margin: 20px 40px;
	}

	.article-body blockquote p {
		font: 500 18px / 28px 'Fira Sans Extra Condensed', sans-serif;
	}

	.article-body blockquote a {
		font-weight: bold;
	}

	.article-body blockquote:not(:has(svg))::before {
		content: '\201C';
		color: #ca0404;
		font: 500 32px / 32px 'Fira Sans Extra Condensed', sans-serif;
	}

	.article-body .quote::before {
		content: '\00ab';
	}

	.article-body .quote::after {
		content: '\00bb';
	}

	.article-body .quote {
		margin-bottom: 10px;
	}

	.article-body .quote-author-name {
		color: var(--text-primary);
		font: 500 14px / 24px 'Fira Sans Extra Condensed', sans-serif;
		letter-spacing: 0.05em;
	}

	.article-body .quote-author-desc {
		color: var(--text-secondary);
		font: 12px / 24px 'Fira Sans Extra Condensed', sans-serif;
		letter-spacing: 0.05em;
	}

	.article-body table {
		margin-bottom: 20px;
	}

	.article-body table div {
		font: 13px / 13px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-primary);
		background: var(--bg-main-article) !important;
		border: 1px solid var(--bg-border) !important;
	}

	.fotorama {
		padding-bottom: 20px;
	}

	.fotorama__stage,
	.fotorama__stage__shaft,
	.fotorama__nav {
		width: calc(100% - 40px) !important;
		padding: 0 20px;
	}

	/* ========================================
	   САЙДБАР
	   ======================================== */

	.sidebar-ad {
		display: none;
	}

	.sidebar-popular {
		display: flex;
		flex-direction: column;
		gap: 20px;
		position: sticky;
		top: 80px;
	}

	.sidebar-popular-title {
		font: 16px / 16px 'Fira Sans Extra Condensed', sans-serif !important;
		display: inline-block;
		text-rendering: optimizeLegibility;
		text-transform: uppercase;
		letter-spacing: 0.1rem;
		margin: 0 auto;
		color: var(--text-primary);
	}

	/* ========================================
	   ТЕГИ СТАТЬИ
	   ======================================== */

	.article-tags {
		width: 100%;
		text-align: left;
		border-top: .0625rem solid var(--bg-border);
		border-bottom: .0625rem solid var(--bg-border);
		padding-top: 15px;
		padding-bottom: 15px;
		display: flex;
		flex-flow: wrap;
	}

	.tags-item {
		margin-right: 10px;
	}

	.tags-link {
		display: inline-block;
		font: 500 15px / 15px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-primary);
		text-rendering: optimizeLegibility;
		text-transform: uppercase;
		text-decoration: none;
		word-wrap: break-word;
		white-space: normal;
		text-align: center;
		letter-spacing: 0.02rem;
	}

	/* ========================================
	   СТАТИЧНЫЕ СТРАНИЦЫ
	   ======================================== */

	.about-site h1,
	.authors-team h1,
	.advertising h1,
	.contacts-site h1,
	.terms-site h1 {
		font: bold 30px / 40px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-primary);
		text-rendering: optimizeLegibility;
		display: block;
		overflow: hidden;
		letter-spacing: 0.02rem;
		margin-bottom: 20px;
	}

	.about-site h2,
	.authors-team h2,
	.advertising h2,
	.contacts-site h2,
	.terms-site h2 {
		margin-bottom: 10px;
		font: bold 25px / 35px 'Fira Sans Extra Condensed', sans-serif;
		color: var(--text-primary);
	}

	.terms-site ul li {
		position: relative;
		margin-bottom: 1.2rem;
		font: 18px / 28px 'Fira Sans Extra Condensed', sans-serif;
		letter-spacing: 0.02em;
		color: var(--text-primary);
		padding-left: 40px;
	}

	.terms-site ul li:before {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		background: #ca0404;
		top: 10px;
		left: 0;
		border-radius: 3px;
	}

	.about-site p,
	.authors-team p,
	.advertising p,
	.contacts-site p,
	.terms-site p {
		margin-bottom: 20px;
		font: 17px / 30px 'Roboto', sans-serif;
		letter-spacing: 0.02em;
		color: var(--text-primary);
	}

	/* ========================================
	   СЕТКИ И МАКЕТЫ
	   ======================================== */

	.top-articles {
		display: grid;
		grid-column-gap: 20px;
		grid-auto-rows: auto;
		justify-content: center;
		background-color: var(--bg);
		grid-template-columns: repeat(2, 1fr);
		padding: 20px;
		width: calc(100% - 40px);
	}

	/* Показываем только первые две карточки на мобильных */
	.top-articles .article-card:nth-child(n+3) {
		display: none;
	}

	.content {
		width: 100%;
		justify-content: center;
	}

	.articles,
	.main-artcile {
		width: calc(100% - 40px);
		display: grid;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		grid-auto-rows: auto;
		grid-template-columns: repeat(2, 1fr);
		justify-content: center;
		align-self: flex-start;
		padding: 20px;
	}

	.big-card,
	.module-top-pathing-container {
		grid-column-end: 3;
		grid-column-start: 1;
	}

	.news {
		width: 100%;
		display: grid;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		grid-auto-rows: auto;
		width: calc(100% - 40px);
		grid-template-columns: 1fr;
		justify-content: center;
		align-self: flex-start;
		padding: 20px;
	}

	.articles .section-name {
		grid-column-end: 3;
		grid-column-start: 1;
	}

	/* Стили для страницы полной новости */
	.article-detail {
		width: 100%;
		padding: 20px;
		background-color: var(--bg);
		display: grid;
	}

	.article-detail .article-header {
		width: 100%;
		display: block;
	}

	.article-detail .article-body {
		width: 100%;
		display: block;
	}

	/* Показываем блок шаринга на мобильных */

	/* Скрываем сайдбар на мобильных */
	.article-sidebar {
		display: none !important;
	}

	/* Скрываем блок шаринга и популярное в сайдбаре на мобильных */
	/* Скрываем популярное в сайдбаре на мобильных */
	.sidebar-popular {
		display: none !important;
	}

	/* Делаем основной контент на всю ширину */
	.article-detail>div {
		width: 100% !important;
		display: block !important;
	}

	/* Переопределяем стили макета для страницы полной новости */
	.article-detail {
		display: grid !important;
		grid-template-columns: 1fr !important;
	}

	.article-detail .article-header,
	.article-detail .article-body,
	.article-detail .post-sharing,
	.article-detail .article-footer {
		grid-column: 1 / -1 !important;
		width: 100% !important;
	}

	.section-light {
		background-color: var(--bg);
	}

	.section-dark {
		background-color: var(--bg-main-article);
	}

	.about-site,
	.authors-team,
	.advertising,
	.contacts-site,
	.terms-site {
		margin: 0 20px !important;
		width: calc(100% - 40px) !important;
		padding: 0 !important;
	}

	/* ========================================
	   ПАГИНАЦИЯ
	   ======================================== */

	.pagination {
		padding-bottom: 30px;
		text-align: center;
	}

	.pagination a,
	.pagination span {
		font: 16px / 30px 'Fira Sans Extra Condensed', sans-serif;
	}

	.pagination .current-page {
		color: #ca0404
	}

	.pagination ul {
		text-align: center;
	}

	.pagination ul li {
		display: inline-block;
		padding: 0 3px;
		height: 30px;
		text-align: center;
	}

	.pagination-icon {
		width: 30px;
		height: 30px;
		position: relative;
		cursor: pointer;
		float: right;
		margin-top: 8px;
	}

	/* ========================================
	   ФУТЕР
	   ======================================== */

	.footer {
		background-color: var(--bg-footer);
		width: 100%;
	}

	.footer-head {
		display: grid;
		grid-column-gap: 20px;
		grid-row-gap: 40px;
		justify-content: center;
		padding: 40px 20px 20px 20px;
		grid-template-columns: 1fr;
		width: calc(100% - 40px);
	}

	.footer-head .menu-socials {
		margin-left: -11px;
	}

	.footer-head .logo {
		font: bold 23px / 23px Georgia, sans-serif;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	.footer-head .menu-socials {
		grid-template-columns: repeat(4, 50px);
	}

	.footer-menu {
		display: grid;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		justify-content: center;
		padding: 30px 20px;
		grid-template-columns: 1fr;
		width: calc(100% - 40px);
	}

	.footer-menu a {
		font: 400 17px / 25px 'Fira Sans Extra Condensed', sans-serif;
		text-rendering: optimizeLegibility;
		display: block;
		overflow: hidden;
		letter-spacing: 0.05rem;
		padding-bottom: 10px;
	}

	.footer-copyright {
		margin: 0 20px !important;
		padding: 0 !important;
	}

	.footer-copyright-text {
		font: 400 12px / 20px 'Fira Sans Extra Condensed', sans-serif;
		padding-bottom: 20px;
		color: var(--text-secondary);
	}

	/* ========================================
	   ОШИБКИ
	   ======================================== */

	.recital {
		text-align: center;
	}
}

/* Планшеты (769px - 1024px) - дополнительные стили */
@media (min-width: 769px) and (max-width: 1024px) {

	/* Адаптация для планшетов */
	.top-articles {
		grid-template-columns: repeat(3, 1fr);
	}

	.articles,
	.main-artcile {
		grid-template-columns: repeat(3, 1fr);
	}

	.articles .section-name {
		grid-column-end: 4;
		grid-column-start: 1;
	}

	.big-card,
	.module-top-pathing-container {
		grid-column-end: 4;
		grid-column-start: 1;
	}

	.news {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Маленькие мобильные устройства (до 480px) */
@media (max-width: 480px) {

	/* Адаптация для маленьких экранов */
	.top-articles {
		display: grid;
		grid-column-gap: 20px;
		grid-auto-rows: auto;
		justify-content: center;
		background-color: var(--bg);
		grid-template-columns: repeat(2, 1fr);
		padding: 20px;
		width: calc(100% - 40px);
	}

	.articles,
	.main-artcile {
		width: calc(100% - 40px);
		display: grid;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		grid-auto-rows: auto;
		grid-template-columns: repeat(2, 1fr);
		justify-content: center;
		align-self: flex-start;
		padding: 20px;
	}

	.articles .section-name {
		grid-column-end: 3;
		grid-column-start: 1;
	}

	.big-card,
	.module-top-pathing-container {
		grid-column-end: 3;
		grid-column-start: 1;
	}

	.news {
		grid-template-columns: 1fr;
		padding: 15px;
		width: calc(100% - 30px);
	}

	.article-detail {
		padding: 15px;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
	}

	.article-detail .article-header {
		width: 100%;
		display: block;
	}

	.article-detail .article-body {
		width: 100%;
		display: block;
	}

	.article-detail .post-sharing {
		width: 100%;
		display: block;
	}
	
	.article-detail .post-sharing-buttons {
		position: static !important;
		flex-direction: row !important;
		justify-content: center;
		gap: 20px;
		width: 100%;
		margin: 20px 0;
	}
	
	/* Блок автора на мобильных */
	.author-block {
		margin: 20px 0;
		padding: 15px;
	}
	
	.author-block-content {
		flex-direction: column;
		text-align: center;
		gap: 15px;
	}
	
	.author-avatar-img {
		width: 60px;
		height: 60px;
	}
	
	.author-name {
		font-size: 18px;
	}
	
	.author-description {
		font-size: 13px;
		margin-bottom: 10px;
	}
	
	.author-stats {
		justify-content: center;
		gap: 15px;
	}

	/* Скрываем сайдбар на маленьких экранах */
	.article-sidebar {
		display: none !important;
	}

	/* Делаем основной контент на всю ширину */
	.article-detail>div {
		width: 100% !important;
		display: block !important;
	}

	.about-site,
	.authors-team,
	.advertising,
	.contacts-site,
	.terms-site {
		margin: 0 15px !important;
		width: calc(100% - 30px) !important;
		padding: 0 !important;
	}

	.footer-head {
		padding: 30px 15px 15px 15px;
		width: calc(100% - 30px);
	}

	.footer-menu {
		padding: 20px 15px;
		width: calc(100% - 30px);
	}

	.footer-copyright {
		margin: 0 15px !important;
		padding: 0 !important;
	}
}

/* Очень маленькие экраны (до 350px) */
@media screen and (max-width: 350px) {
	.menu-icon {
		padding-left: 10px;
	}

	.top-nav .logo {
		padding: 0 5px;
	}

	.search-icon {
		padding-right: 10px;
	}

	.theme-switcher {
		margin: 20px 5px;
	}

	.top-articles,
	.articles,
	.main-artcile,
	.article-detail {
		padding: 20px 10px;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
	}

	.article-detail .article-header {
		width: 100%;
		display: block;
	}

	.article-detail .article-body {
		width: 100%;
		display: block;
	}

	.article-detail .post-sharing {
		width: 100%;
		display: block;
	}
	
	.article-detail .post-sharing-buttons {
		position: static !important;
		flex-direction: row !important;
		justify-content: center;
		gap: 20px;
		width: 100%;
		margin: 20px 0;
	}

	/* Скрываем сайдбар на очень маленьких экранах */
	.article-sidebar {
		display: none !important;
	}

	/* Делаем основной контент на всю ширину */
	.article-detail>div {
		width: 100% !important;
		display: block !important;
	}
}

/* Стили для страницы автора на мобильных устройствах */
@media (max-width: 768px) {
	.author-full-name {
		font-size: 15px;
		line-height: 19px;
		margin-bottom: 6px;
	}

	.author-job-title {
		font-size: 13px;
		line-height: 17px;
		margin-bottom: 10px;
	}

	.author-description {
		font-size: 13px;
		line-height: 18px;
	}
}

/* Средние экраны (350px - 370px) */
@media (min-width: 350px) and (max-width: 370px) {
	.theme-switcher {
		margin: 20px 10px;
	}
}