/*!
Theme Name: Союзный 
*/

* {
	margin:0px;
	padding:0px;	
}

body {
	font-family: 'Inter', sans-serif;
	background:#0A263D;
	overflow-x: hidden;
}

.wrapper {
	width: calc(100% - 40px);
	margin:auto;
}

header {
	border-bottom: 1px #264259 solid;
}

footer {
	border-top: 1px #264259 solid;	
	background: #1C3B544D;
	padding:40px 0;
}

.header-inner {
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.header-logo {
	display:flex;
	align-items:center;
	padding:5px 0;
}

.header-logo svg {
	height:56px;
	width:auto;
	margin-top:3px;
}

.header-menu ul {
	display:flex;
	list-style-type:none;
	gap:10px;
}

.header-menu ul li a {
	color:#F9FAFB;
	font-weight: 700;
	font-weight: 600;
	font-size: 18px;
	line-height: 32px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration:none;
	padding:15px;
	border-radius:8px;
	transition: .3s;
}

.header-menu ul li a:hover {
	background:#3d0255;
}

.header-end {
	display:flex;
	gap:20px;
	align-items:center;
}

.header-icons {
	display:flex;
	gap:6px;
}

.header-icon {
	transition: .3s;
}

.header-icon a {
	width:28px;
	height:28px;
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	transition: .3s !important;
}

.header-icon a:hover {
	background:#3d0255;
}

.header-icon a:hover svg path {
	fill:#fff;
}

.header-icon a:hover svg rect {
	stroke:#3d0255;
}

.header-icon a svg rect {
	transition: .3s;
}

.header-icon a svg {
	transition: .3s;
}

.header-burger a {
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:5px;
	transition: .3s;
}

.header-burger a:hover {
	background:#3d0255;
}

.main-inner {
	display:grid;
	grid-template-columns:8fr 2fr;
	height: fit-content;
	overflow: hidden;
}

.main-content {

}

.hero-block {
	padding:48px 20px;
	display:grid;
	grid-template-columns:6fr 3fr;	
	gap:24px;
	border-bottom: 1px #264259 solid;	
}

.live-stream {
	background-size:100% 100% !important;
	background-repeat:no-repeat !important;
	position:relative;
	border-radius:8px;
	background-position:center center !important;	
	transition: all 1s;
}

.live-stream:hover {
	background-size:110% 110% !important;
}

.live-stream::before {
	content: '';
	z-index: 2;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);	
	border-radius:8px;	
}

.live-stream-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction:column;
	justify-content:space-between;
	position: absolute;
	z-index: 2;
	text-decoration:none;
}

.live-label {
	background:#EF4343;
	border-radius:6px;
	width:208px;
	height:44px;
	display:flex;
	gap:12px;
	align-items:center;
	justify-content:center;
	margin:16px;	
}

.live-label span {
	font-weight: 700;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color:#F9FAFB;
}

.live-info {
	margin:16px;
	display:flex;
	flex-direction:column;
	gap:10px;
}

.live-header {
	font-weight: 700;
	font-weight: 600;
	font-size: 38px;
	line-height: 38px;
	letter-spacing: 0%;
	color:#F9FAFB;	
}

.live-date {
	font-weight: 400;
	font-style: Regular;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0%;
	color: #98A6B3;
}

.live-stream:hover .play-button {
	opacity:1;
}

.single-plot:hover .small-play-button {
	opacity:1;	
}

.play-button {
	position:absolute;
	width:64px;
	height:64px;
	background:#0077ffe6;
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
	z-index:3;
	opacity:0;
	transition: all 1s;
}

.small-play-button {
	position:absolute;
	width:40px;
	height:40px;
	background:#0077FFE5;
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
	z-index:3;
	opacity:0;
	transition: all 1s;	
}

.plots {
	display:flex;
	flex-direction:column;
	gap:16px;
}

.plot-list {
	display:flex;
	flex-direction:column;
	gap:16px;	
	width:100%;
	height:100%;
}

.single-plot {
	aspect-ratio:16/9;
	background-size:100% auto !important;
	background-repeat:no-repeat !important;
	background-position:center center !important;
	position:relative;
	width:100%;
	border-radius:8px;
	transition: all 1s;	
}

.single-plot:hover {
	background-size:110% auto !important;
}

.single-plot::before {
	content: '';
	z-index: 2;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);	
	border-radius:8px;	
}

.single-plot-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction:column;
	justify-content:space-between;
	position: absolute;
	z-index: 2;
	text-decoration:none;
}

.single-plot-content.txt {
	justify-content:end;
}

.single-plot-label {
	background: #0077FFE5;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0%;
	text-transform: uppercase;
	color:#F9FAFB;
	width:150px;
	height:41px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-left:auto;
	margin-right:10px;
	margin-top:10px;
	border-radius:4px;
}

.single-plot-info {
	margin:10px;
	display:flex;
	flex-direction:column;
	gap:5px;
}

.single-plot-header {
	font-weight: 600;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 0%;
	color:#F9FAFB;	
}

.single-plot-date {
	font-weight: 400;
	font-style: Regular;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0%;
	color:#98A6B3;	
}

.small-header {
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color:#98A6B3;	
}

.main-sidebar {
	border-left: 1px #264259 solid;
}

.podcast-block {
	padding:40px 20px;
	background: #1C3B544D;
}

.podcast-block p, .category-block p {
	color:#98A6B3;
}

.flex-header {
	display:flex;
	gap:15px;
	align-items:center;
}

.flex-header-h2 {
	font-weight: 800;
	font-size: 60px;
	line-height: 60px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color:#F9FAFB;	
}

.flex-header-divider {
	height: 1px;
    background: #264259;
    flex: none;
    flex-grow: 1;	
}

.flex-header-link a {
	color:#0077FF;
	text-decoration:none;
	text-transform: uppercase;
	font-size:16px;
	font-weight:700;
	transition: .3s;
}

.flex-header-link a:hover {
	opacity: .8;
}

.podcast-grid {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:21px;
	margin-top:25px;
}

.podcast-item {
	aspect-ratio:1/1;
	background-size:auto 100% !important;
	background-repeat:no-repeat !important;
	background-position:center center !important;
	border-radius:8px;
	position:relative;
	transition: all 1s;
}

.podcast-item:hover {
	background-size:auto 110% !important;
}

.podcast-item::before {
	content: '';
	z-index: 2;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);	
	border-radius:8px;	
}

.podcast-item a {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction:column;
	justify-content:space-between;
	position: absolute;
	width:100%;
	height:100%;
	z-index:3;
	text-decoration:none;
}

.podcast-label {
	background: #3D0255E5;
	width: 120px;
	height: 48px;
	border-radius:9999px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	margin-left:auto;
	margin-top:12px;
	margin-right:12px;	
}

.podcast-label span {
	color:#F9FAFB;
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0%;
}

.podcast-info {
	margin:12px;
}

.podcast-name {
	font-weight: 700;
	color:#F9FAFB;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 0%;
}

.podcast-author {
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0%;
	color:#98A6B3;
}

.category-block {
	padding:40px 20px;	
}

.category-grid {
	margin-top:25px;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:21px;
}

.category-item {
	border: 1px solid #264259;
	border-radius:8px;
}

.category-item:hover .category-item-image {
	background-size:110% auto !important;
}

.category-item:hover .category-item-name {
	color:#0077FF;
}

.category-item:hover .category-item-label {
	background:#0077FF;
}

.category-item a {
	text-decoration:none;
}

.category-item-image {
	background-size:100% auto !important;
	background-repeat:no-repeat !important;
	background-position:center center !important;
	aspect-ratio:16/9;
	position:relative;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	display:flex;
	justify-content:start;
	align-items:start;
	transition: all 1s;
}

.category-item-image::before {
	content: '';
	z-index: 2;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);	
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}

.category-item-label {
	background: #3D0255;
	padding: 8px 15px;
	color:#F9FAFB;
	font-weight: 600;
	font-size: 22px;
	line-height: 22px;
	letter-spacing: 1.5px;
	text-transform: uppercase;	
	border-radius:12px;
	margin:12px;
	transition: .3s;
}

.category-item-info {
	padding:12px;
	display:flex;
	flex-direction:column;
	gap:5px;
}

.category-item-name {
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0%;
	color:#F9FAFB;	
	transition: all .3s;
}

.category-item-date {
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0%;
	color:#98A6B3;	
}

.footer-inner {
	display:flex;
	flex-direction:column;
	gap:40px;
	align-items:center;
}

.footer-menu ul {
	display:flex;
	list-style-type:none;
	gap:23px;
}

.footer-menu ul li a {
	text-decoration:none;
	color:#98A6B3;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0%;
	transition: .3s;
}

.footer-menu ul li a:hover {
	color:#fff;
}

.footer-social {
	display:flex;
	gap:8px;
}

.footer-social a {
	border-radius:100%;
	transition: .3s;
}

.footer-social a svg rect {
	transition: .3s;
}

.footer-social a:hover {
	background:#3D0255;
}

.footer-social a:hover svg rect {
	stroke:#3D0255;
}

.footer-logo {
	display:flex;
	flex-direction:column;
	gap:12px;
}

.footer-logo-text {
	text-align:center;
	color:#98A6B3;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0%;	
	max-width:318px;
}

.copyright {
	border-top: 1px #264259 solid;
	text-align:center;
	color:#98A6B3;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0%;	
	padding-top:25px;
	width:90%;
}

.sidebar-header {
	padding:12px 16px;
	border-bottom:1px #264259 solid;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color:#98A6B3;
}

.sidebar-list {
	overflow-y: auto;
	overflow: auto; /* Включаем прокрутку при переполнении */
	scrollbar-width: none; /* Firefox: скрываем скроллбар */
	-ms-overflow-style: none; /* IE и Edge: скрываем скроллбар */	
}

.sidebar-list::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera: скрываем скроллбар */
}

.sidebar-list-item {
	display:flex;
	flex-direction:column;
	align-items:start;
	gap:5px;
	padding:16px;
	border-bottom:1px #264259 solid;
	text-decoration:none;
	transition: all .3s;
}

.sidebar-list-item:hover {
	background:#1C3B544D;
}

.sidebar-list-item:hover .sidebar-list-item-name {
	color:#0077FF;
}

.sidebar-list-item:hover .sidebar-list-item-category {
	color:#98A6B3;
}

.sidebar-list-item-name {
	color:#F9FAFB;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0%;
	transition: all .3s;	
}

.sidebar-list-item-footer {
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
}

.sidebar-list-item-category {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0%;
	text-transform: uppercase;
	color:#0077FF;	
}

.sidebar-list-item-time {
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0%;
	color:#98A6B3;	
}

.sidebar {
    position: fixed;
    top: 0;
    right: -500px; /* Изначально скрыт за экраном */
    width: 300px;
    height: 100vh;
    background: #0A263D;
    transition: right 0.3s ease-in-out;
    z-index: 999; /* Понижаем z-index, т.к. оверлей будет выше */
    padding: 40px 20px;
}

.sidebar.active {
    right: 0; /* Появляется справа */
}

.sidebar-nav ul {
    list-style: none;
	margin-top:40px;
}

.sidebar-nav li {
	padding-bottom:10px;
}

.sidebar-nav a {
    color: #F9FAFB;
    text-decoration: none;
    font-size: 18px;
	font-weight:500;
    display: block;
    transition: color 0.3s;
}

.close-btn-cont {
	display:flex;
	justify-content:end;
}

#close-btn {
	width:20px;
	height:20px;
	cursor:pointer;
	margin-left:auto;
}

.sidebar-nav a:hover {
    color: #0077FF;
}

/* Элемент затемнения фона */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачное затемнение */
    z-index: 998; /* Между сайдбаром и основным контентом */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

#leftCol {
	min-height:100vh;
}

.page-content {
	padding:48px 20px;
	display:flex;
	flex-direction:column;
	gap:20px;
}

.page-content h1 {
	font-weight: 800;
	font-size: 60px;
	line-height: 60px;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color:#F9FAFB;	
}

.page-content h2, .page-content h3, .page-content h4 {
	color:#F9FAFB;	
}

.page-content p, .page-content ul, .page-content ol {
	color:#F9FAFB;
	font-size:20px;	
}

.page-content ul, .page-content ol {
	margin-left:40px;
	display:flex;
	flex-direction:column;
	gap:10px;	
} 

.single-text {
	padding:48px 20px;
	display:flex;
	flex-direction:column;
	gap:20px;
}

.page-content a {
	color:#F9FAFB;
	text-decoration:none;
	border-bottom: 1px dashed #F9FAFB;
	transition: .3s all;
}

.page-content a:hover {
	color:#0077FF;
	border-bottom: 1px dashed #0077FF;
}

.single-text h1 {
	font-weight: 600;
	font-size: 40px;
	line-height: 40px;
	color:#F9FAFB;	
}

.single-text p, .single-text ul, .single-text ol {
	color:#98A6B3;
	font-size:20px;	
}

.single-text ul, .single-text ol {
	margin-left:40px;
}

.single-text h2, .single-text h3, .single-text h4 {
	color:#F9FAFB;	
}

.single-text a {
	color:#F9FAFB;
	text-decoration:none;
	border-bottom: 1px dashed #F9FAFB;
	transition: .3s all;
}

.single-text a:hover {
	color:#0077FF;
	border-bottom: 1px dashed #0077FF;
}

.post-avtor {
	color:#F9FAFB;
	font-size:16px;
}

.post-date {
	color:#F9FAFB;
	font-size:16px;
}

.single-image {
	width:70%;
	aspect-ratio:16/9;
	object-fit:cover;
	border-radius:8px;
}

.single-video {
	padding:48px 20px;
	display:flex;
	flex-direction:column;
	gap:20px;	
}

.single-video a {
	color:#F9FAFB;
	text-decoration:none;
	border-bottom: 1px dashed #F9FAFB;
	transition: .3s all;
}

.single-video a:hover {
	color:#0077FF;
	border-bottom: 1px dashed #0077FF;
}

.single-video h1 {
	font-weight: 600;
	font-size: 40px;
	line-height: 40px;
	color:#F9FAFB;	
}

.single-video p, .single-video ul, .single-video ol {
	color:#98A6B3;
	font-size:20px;	
}

.single-video h2, .single-video h3, .single-video h4 {
	color:#F9FAFB;	
}

.pulse-container {
	display:flex;
	align-items:center;
	position:relative;
	animation: pulse 2s infinite;
}

.image-caption {
	font-size:12px !important;
}

.pagination-block {
	margin-top:20px;
	display:flex;
	gap:10px;
}

.pagination-block a {
	border: 1px solid #264259;
	color:#F9FAFB;
	text-decoration:none;
	padding:5px 10px;
	transition: .3s all;
}

.pagination-block a:hover {
	color:#0077FF;
	border: 1px solid #0077FF;
}

.pagination-block span {
	border: 1px solid #264259;
	color:#264259;
	text-decoration:none;
	padding:5px 10px;
}

.pagination-block .page-numbers.current {
	font-weight:600;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@media screen and (max-width: 1400px) {
	.header-menu {
		display:none;
	}
	
	.flex-header-h2 {
		font-size:40px;
		line-height:40px;
	}
}

@media screen and (max-width: 1200px) {
	.live-header {
		font-size:30px;
	}
	
	.single-plot-header {
		font-size:16px;
		line-height:20px;
	}
	
	.single-plot-label {
		font-size:16px;
		width:100px;
		height:32px;
	}
	
	.single-plot-date {
		font-size:14px;
		line-height:16px;
	}
	
	.podcast-name {
		font-size:20px;
		line-height:20px;
	}
	
	.podcast-author {
		font-size:14px;
		line-height:22px;
	}
	
	.sidebar-list-item-name {
		font-size:14px;
		line-height:18px;
	}
	
	.category-item-label {
		font-size:14px;
	}
	
	.category-item-name {
		font-size:16px;
		line-height:20px;
	}
	
	.podcast-label span {
		font-size:16px;
		line-height:20px;
	}
	
	.podcast-label {
		width:90px;
		height:40px;
	}
	
	.category-item-date {
		font-size:14px;
		line-height:20px;
	}
}

@media screen and (max-width: 1000px) {
	.main-sidebar {
		display:none;
	}
	
	.main-inner {
		grid-template-columns: 1fr;
	}
	
	.flex-header {
		flex-wrap:wrap;
	}
	
	.single-vide-frame iframe {
		width:100%;
		height:auto;
		aspect-ratio:16/9;
	}
	
	.single-text iframe {
		width:100%;
		height:auto;
		aspect-ratio:16/9;		
	}
	
	.single-video iframe {
		width:100%;
		height:auto;
		aspect-ratio:16/9;		
	}	
}

@media screen and (max-width: 800px) {
	.hero-block, .podcast-grid, .category-grid {
		grid-template-columns:1fr;
	}
	
	.live-stream {
		aspect-ratio:16/9;
	}

	.play-button, .small-play-button {
		opacity:1;
	}
	
	.podcast-item {
		aspect-ratio:16/9;
		background-size: 100% auto !important;		
	}
	
	.podcast-item:hover {
		background-size: 110% auto !important;
	}
	
	.flex-header-h2 {
		font-size:24px;
		line-height:24px;
		text-align:center;
	}
	
	.footer-menu ul {
		flex-wrap:wrap;
		justify-content:center;
		gap:10px;
	}
	
	.flex-header {
		flex-direction:column;
		gap:5px;
		align-items:center;
	}
	
	.header-logo a svg {
		width:150px;
	}
	
	.single-image {
		width:100%;
		height:auto;
	}
	
	.single-text h1 {
		font-size:22px;
		line-height:22px;
	}
}