:root {
	--focus-bg--image: none;
	--focus-bg--color: rgb(244, 244, 244);
	--focus-bg--attachment-default: fixed;
	--focus-bg--position-default: 50% 0;
	--focus-bg--repeat-default: repeat;
	--focus-bg--size-default: cover;
	--bg-primary: #f5f5f5;
	--bg-secondary: #22262c;
	--bg-third: #f8f9fa;
	--bg-card: #ffffff;
	--bg-hover: #e9ecef;
	--text-primary: #333333;
	--text-secondary: #000000;
	--text-muted: #adb5bd;
	--accent: #c9a227;
	--accent-hover: #dab62e;
	--link: #60a5fa;
	--link-hover: #93c5fd;
	--border: rgba(0, 0, 0, 0.08);
	--container: 1280px;
	--radius: 4px;
	--radius-lg: 8px;
}

[data-focus-bg="1"] {
	--focus-bg--image: url('https://next.tesall.club/uploads/monthly_2025_03/tesall_4k-final.jpg.a37e6ca4d9686ef4e4f64c3bef538bc6.jpg');
}

/* ── Layout ── */
.taLayoutContainer {
	margin: 0 auto;
}

.taLayoutContainer .taContainer {
	padding: 0;
	max-width: none;
}

.taSectionWrapper {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -2px;
	border-radius: 4px;
	/*background-color: #f5f5f5;*/
	margin-bottom: 15px;
}

/* ── Three Columns ── */
.taThreeColumns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	align-items: stretch;
}

.taColumn {
	padding: 0;
}

/* ── Hero Section ── */
.taHeroSection {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 8px;
	margin-bottom: 10px;
}

.taFeaturedNews {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 350px);
	gap: 8px;
}

/* ── Featured Card ── */
.taFeaturedCard {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	transition: all 0.3s ease;
}

.taFeaturedCard:hover {
	box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 12px;
	transform: translateY(-2px);
}

.taFeaturedCardLink {
	display: block;
	height: 100%;
}

.taFeaturedCardImage {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.taFeaturedCard:hover .taFeaturedCardImage {
	transform: scale(1.05);
}

.taFeaturedCardOverlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px;
	padding-bottom: 50px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
	/*color: #fff;*/
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	pointer-events: none;
}

.taFeaturedCardTitle {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Card Meta ── */
.taCardMeta {
	position: absolute;
	bottom: 8px;
	right: 8px;
	padding: 6px 10px;
	border-radius: var(--radius);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	background: transparent;
	transition: all 0.2s;
	z-index: 10;
	pointer-events: none;
}

.taFeaturedCard .taCardMeta {
	position: absolute;
	bottom: 6px;
	left: 6px;
	right: 6px;
	display: flex;
	justify-content: space-between;
	gap: 8px;
	align-items: center;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
	padding: 8px 12px;
	border-radius: var(--radius);
	color: #fff;
	font-size: 13px;
	z-index: 10;
}

.taFeaturedCard .taCardMeta .taCardAuthor {
	flex: 0 0 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 50%;
}

.taFeaturedCard .taCardMeta .taCardMetaRight {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
}

.taModCard:hover .taCardMeta,
.taImageCard:hover .taCardMeta,
.taArticleRowCard:hover .taCardMeta {
	color: #fff;
	/*background: rgba(0, 0, 0, 0.9);*/
}

/* ── Latest News Sidebar ── */
.taLatestNews {
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.taLatestNews .taSectionTitle {
	margin: 0;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.taNewsList {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
}

.taNewsItem {
	display: flex;
	gap: 10px;
	transition: background 0.2s;
	padding: 6px;
	align-items: stretch;
	min-height: 77px;
	overflow: hidden;
	/*background: #fff;*/
}

.taNewsItem:hover {
    background: rgba(var(--theme-text_color), 0.05);
}

.taNewsItemImage {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--radius);
	flex-shrink: 0;
}

.taNewsItemContent {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.taNewsItemTitle {
	font-size: 13px;
	font-weight: 500;
	/* color: var(--text-primary);*/ 
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 4px;
}

.taNewsItemMeta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	/*color: var(--text-muted);*/
	gap: 8px;
	margin-top: auto;
}

.taNewsItemMeta .taCardAuthor {
	flex: 0 0 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.taNewsItemMeta .taCardMetaRight {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
}

/* ── Section ── */
.taSection {
	margin-bottom: 10px;
}

.taSectionHeader {
	margin-bottom: 10px;
}

@media (min-width: 980px) {
	.taSectionTitle {
		background-image: var(--focus-bg--image);
		background-attachment: var(--focus-bg--attachment, var(--focus-bg--attachment-default));
		background-position: var(--focus-bg--position, var(--focus-bg--position-default));
		background-repeat: var(--focus-bg--repeat, var(--focus-bg--repeat-default));
		background-size: var(--focus-bg--size, var(--focus-bg--size-default));
	}
}

.taSectionTitle {
	/*background-color: rgba(26, 32, 44, 0.75);*/
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px;
	text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 1px, rgba(0, 0, 0, 0.2) 0px 0px 4px;
	padding: 15px 20px;
	font-size: 16px;
	line-height: 1;
	font-weight: bold;
	border-radius: 4px;
	margin: 0 0 6px 0;
	color: rgb(255, 255, 255);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.taSectionActions {
	display: flex;
	gap: 12px;
}

.taBtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 5px;
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--radius);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s;
	background: transparent;
	color: rgba(255, 255, 255, 0.5);
}

.taBtn:hover {
	color: #fff;
}

/* ── Mods Grid ── */
.taModsGrid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.taModCard {
	overflow: hidden;
	transition: all 0.3s;
	display: flex;
	flex-direction: column;
}

.taModCard:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.taModCardLink {
	display: flex;
	flex-direction: column;
	height: 100%;
	/*color: inherit;*/
}

.taModCardImageWrap {
	height: 160px;
	overflow: hidden;
	position: relative;
}

.taModCardImage {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.taModCard:hover .taModCardImage {
	transform: scale(1.1);
}

.taModCardContent {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.taModCardTitle {
	font-size: 14px;
	font-weight: 600;
	/*color: var(--text-primary);*/
	margin-bottom: 8px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Articles ── */
.taArticlesRow {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 8px;
}

.taArticleRowCard {
	overflow: hidden;
	transition: all 0.2s;
}

.taArticleRowCard:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.taArticleRowCard a {
	display: flex;
	flex-direction: column;
	/*color: inherit;*/
	height: 100%;
}

.taArticleRowImageWrap {
	position: relative;
	overflow: hidden;
}

.taArticleRowImage {
	width: 100%;
	height: 140px;
	object-fit: cover;
}

.taArticleRowContent {
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.taArticleRowTitle {
	font-size: 14px;
	font-weight: 600;
	/*color: var(--text-primary);*/
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Card Info ── */
.taCardInfo,
.taArticleRowFooter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	/*color: var(--text-muted);*/
	margin-top: auto;
	gap: 10px;
}

.taCardInfo .taCardInfoLeft,
.taImageCardFooter .taCardInfoLeft {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.taCardInfo .taCardInfoRight {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.taCardCategory {
	/*color: var(--text-muted);*/
	font-size: 12px;
}

/* ── Videos ── */
.taVideosGrid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.taVideoCard {
	overflow: hidden;
	transition: all 0.2s;
}

.taVideoCard:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.taVideoCardLink {
	display: flex;
	gap: 10px;
	padding: 10px;
	/*color: inherit;*/
}

.taVideoCardThumb {
	position: relative;
	width: 120px;
	height: 68px;
	border-radius: var(--radius);
	overflow: hidden;
	flex-shrink: 0;
}

.taVideoCardThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.taVideoCardPlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	/*background: rgba(0, 0, 0, 0.7);*/
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
}

.taVideoCardContent {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.taVideoCardTitle {
	font-size: 13px;
	font-weight: 600;
	/*color: var(--text-primary);*/
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* .taVideoCard переопределяет font-size у .taCardInfo */
.taVideoCard .taCardInfo {
	font-size: 12px;
}

.taVideoCard .taCardInfo .taCardComments,
.taImageCardFooter .taCardComments {
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
}

/* ── Images / Memes ── */
.taImagesGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.taImageCard {
	overflow: hidden;
	transition: all 0.2s;
}

.taImageCard:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.taImageCardLink {
	display: flex;
	flex-direction: column;
	/*color: inherit;*/
	height: 100%;
}

.taImageCardThumb {
	position: relative;
	height: 130px;
	overflow: hidden;
}

.taImageCardThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.taImageCard:hover .taImageCardThumb img {
	transform: scale(1.05);
}

.taImageCardContent {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.taImageCardTitle {
	font-size: 13px;
	font-weight: 600;
	/*color: var(--text-primary);*/
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.taImageCardFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: nowrap;
	font-size: 12px;
	/*color: var(--text-muted);*/
	margin-top: auto;
}

/* ── Moderated ── */
.ipsModerated {
	opacity: 0.6;
	position: relative;
}

.ipsModerated::after {
	content: 'На модерации';
	position: absolute;
	top: 8px;
	right: 8px;
	/*background: rgba(255, 152, 0, 0.9);*/
	/*color: #fff;*/
	padding: 4px 8px;
	border-radius: var(--radius);
	font-size: 11px;
	font-weight: 600;
	z-index: 10;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
	.taModsGrid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 992px) {
	.taHeroSection {
		grid-template-columns: 1fr;
	}

	.taFeaturedNews {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 250px);
	}

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

	.taArticlesRow {
		grid-template-columns: repeat(4, 1fr);
	}

	.taThreeColumns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.taFeaturedNews {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 200px);
	}

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

@media (max-width: 480px) {
	.taFeaturedNews {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 180px);
	}

	.taModsGrid {
		grid-template-columns: 1fr;
	}

	.taArticlesRow {
		grid-template-columns: 1fr;
	}
}