/* ОБЩИЕ СТИЛИ - НАЧАЛО */

	.content {
		width: 100%;
		margin-top: 0;	
	}

		#allEntries {
			display: grid;
		}						
			#allEntries > div:first-child { grid-area: first-tab; }
			#allEntries > div:nth-child(2) { grid-area: tab2; }
			#allEntries > div:nth-child(3) { grid-area: tab3; }
			#allEntries > div:nth-child(4) { grid-area: tab4; }
			#allEntries > div:nth-child(5) { grid-area: tab5; }
			#allEntries > div:nth-child(6) { grid-area: tab6; }
			#allEntries > div:nth-child(7) { grid-area: tab7; }
			#allEntries > div:nth-child(8) { grid-area: tab8; }
			#allEntries > div:nth-child(9) { grid-area: tab9; }	
			#allEntries > div:nth-child(10) { grid-area: tab10; }
			#allEntries > div:nth-child(11) { grid-area: tab11; }
			#allEntries > div:nth-child(12) { grid-area: tab12; }			
			#allEntries > div:nth-child(14) {
				grid-area: news-page-selector;

				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.5em;
			}
				.tab {
					--card-panel-height: 4.45rem;

					position: relative;
					display: block;
					height: 100%;
					overflow: hidden;

					/*
						Картинка приходит через inline background-image.
						На самой ссылке фон скрываем, а в ::before выводим
						его отдельной областью без обрезки.
					*/
					background-size: 0 0;
					background-position: center top;
					background-repeat: no-repeat;
					background-color: var(--surface-light);

					color: var(--font-color-light);
					font-family: "Open Sans", Arial, sans-serif;
					font-style: normal;
					font-weight: 400;
					text-decoration: none;

					border: 0;
					border-radius: 0.35em;
					box-shadow: var(--card-shadow-light);

					transition:
						transform 0.18s ease,
						box-shadow 0.18s ease;
				}

				/* Изображение карточки: отдельная адаптивная область */
				.tab::before {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					bottom: var(--card-panel-height);
					left: 0;
					z-index: 0;

					background-image: inherit;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					background-color: #151918;

					pointer-events: none;
				}

				/* Нижняя текстовая панель карточки */
				.tab::after {
					content: "";
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					z-index: 1;

					height: var(--card-panel-height);

					background: var(--surface-light);
					border-top: 1px solid var(--border-light);

					pointer-events: none;
				}

				/* Заголовок новости */
				.tab p {
					position: absolute;
					right: 0.75rem;
					bottom: 0.55rem;
					left: 0.75rem;
					z-index: 3;

					display: -webkit-box;
					height: 2.2rem;
					margin: 0;
					padding: 0;
					overflow: hidden;

					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					line-clamp: 2;

					color: var(--font-color-light);
					background: transparent;
					border: 0;

					font-weight: 600;
					line-height: 1.1rem;
					text-shadow: none;
				}

				/* Рубрика новости */
				.news-rubric {
					position: absolute;
					left: 0.75rem;
					bottom: 3.05rem;
					z-index: 4;

					display: inline-flex;
					align-items: center;
					max-width: calc(100% - 1.5rem);
					min-height: 1.15rem;
					padding: 0.12rem 0.4rem;
					overflow: hidden;

					color: #8d5c20;
					background: #fff0d3;
					border-radius: 0.18rem;
					box-shadow: 0 0 0 1px rgba(163, 107, 45, 0.12);

					font-size: 0.6rem;
					font-style: normal;
					font-weight: 700;
					line-height: 1;
					text-transform: uppercase;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				/* На случай, если переменная рубрики ничего не вернула */
				.news-rubric:empty {
					display: none;
				}

				/* На случай, если uCoz выводит название рубрики ссылкой */
				.news-rubric a,
				.news-rubric a:link,
				.news-rubric a:visited {
					color: inherit;
					text-decoration: none;
				}

				/* Большая первая карточка */
				#allEntries > div:first-child > .tab {
					--card-panel-height: 5rem;
				}

				#allEntries > div:first-child > .tab p {
					right: 0.85rem;
					bottom: 0.65rem;
					left: 0.85rem;

					height: 2.7rem;
					font-size: 1em;
					line-height: 1.35rem;
				}

				#allEntries > div:first-child > .tab .news-rubric {
					left: 0.85rem;
					bottom: 3.7rem;
				}

				.tab:hover {
					transform: translateY(-0.12em);
					box-shadow: var(--card-shadow-hover-light);
				}
				
		.rubric-widget-items,
		.feed-items {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.rubric-widget-items li,
		.rubric-widget-items a,
		.feed-items li,
		.feed-items a {
			font-family: "Open Sans", Arial, sans-serif;
			font-style: normal;
			font-weight: 500;
			list-style: none;
			text-decoration: none;
		}

		.rubric-widget-items li:first-child,
		.feed-items li:first-child {
			margin: 0 0 1.05em;
			padding: 0;
			font-family: Georgia, "Times New Roman", serif;
			font-size: 0.98em;
			font-style: italic;
			font-weight: 400;
			line-height: 1.2;
			letter-spacing: -0.01em;
			text-align: left;
		}
			
		@media (prefers-color-scheme: light) {
			main,
			.content,
			.rubric-widget,
			.feed {
				background: var(--background-light);
			}

			.rubric-widget-items li:first-child,
			.feed-items li:first-child {
				color: #9a6f3d;
			}

			.rubric-widget-items li,
			.rubric-widget-items li a:link,
			.rubric-widget-items a:visited,
			.rubric-widget-items a:active,
			.feed-items li,
			.feed-items li a:link,
			.feed-items li a:visited,
			.feed-items li a:active {
				color: #4f4337;
			}
		}
		
		@media (prefers-color-scheme: dark) {
			main,
			.content,
			.rubric-widget,
			.feed {
				background: var(--background-dark);
			}

			main {
				border-top: 1px solid var(--border-dark);
			}

			.rubric-widget-items li:first-child,
			.feed-items li:first-child {
				color: #e1b985;
			}

			.rubric-widget-items li,
			.rubric-widget-items li a:link,
			.rubric-widget-items a:visited,
			.rubric-widget-items a:active,
			.feed-items li,
			.feed-items li a:link,
			.feed-items li a:visited,
			.feed-items li a:active {
				color: #e2d9ce;
			}
				.tab {
					color: var(--font-color-dark);
					background-color: var(--surface-dark);
					box-shadow: var(--card-shadow-dark);
				}

				.tab::before {
					background-color: #101413;
				}

				.tab::after {
					background: var(--surface-dark);
					border-top-color: var(--border-dark);
				}

				.tab p {
					color: var(--font-color-dark);
					background: transparent;
					border: 0;
				}
				
				.news-rubric {
					color: #f0c993;
					background: #4a3825;
					box-shadow: 0 0 0 1px rgba(240, 201, 147, 0.14);
				}

		}
			
			
/* ОБЩИЕ СТИЛИ - КОНЕЦ */


/* ВЕСЬ ДЕСКТОП. НАЧАЛО. */
@media all and (min-width: 640px) {
		#container {
			display: grid;
			min-height: 100vh;
			min-height: 100dvh;
			grid-auto-columns: 1fr;
			grid-template-columns: repeat(12, 1fr);
			grid-template-rows: auto auto minmax(max-content, 1fr) auto;
			gap: 0;
			grid-template-areas: 
				"TOP-MENU TOP-MENU TOP-MENU TOP-MENU TOP-MENU TOP-MENU TOP-MENU TOP-MENU TOP-MENU TOP-MENU TOP-MENU TOP-MENU"
				"SITE-COVER SITE-COVER SITE-COVER SITE-COVER SITE-COVER SITE-COVER SITE-COVER SITE-COVER SITE-COVER SITE-COVER SITE-COVER SITE-COVER"
				"BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY BODY"
				"FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER"; 
			justify-items: stretch; 
			align-items: stretch;
		}		
}

@media all and (min-width: 1024px) {
	main {
		grid-area: BODY;
		display: grid;
		grid-template-columns:
			minmax(9.5em, 1.4fr)
			minmax(0, 10fr)
			minmax(14em, 2fr);
		grid-template-areas:
			"rubric-widget content feed";
		gap: 0;
		align-items: stretch;
	}
	
				.content {
					grid-area: content;
					padding:
						1.05em 1.7em
						1.2em;
				}
				.rubric-widget {
					grid-area: rubric-widget;
					padding:
						1.25em 1.5em
						2em;
				}
				.feed {				
					grid-area: feed;
					padding:
						1.25em 1.6em
						2em;
				}

					.feed-items li {text-align: left;}
					#more-news-button {text-align: center;}
						
				.tab {
					width: 100%;
				}	
			
			.rubric-widget {
				border-right: 1px solid var(--border-light);
			}

			.feed {
				border-left: 1px solid var(--border-light);
			}

			.rubric-widget-items li:nth-child(n+2) {
				border-bottom: 1px solid var(--border-light);
			}

			.rubric-widget-items li:nth-child(n+2) a {
				display: block;
				padding: 0.7em 0;
				font-size: 0.78em;
				font-weight: 500;
				line-height: 1.4;
				text-align: left;
			}

			.rubric-widget-items li:nth-child(n+2) a:hover {
				color: var(--accent);
				background: transparent;
				transform: none;
			}

			.feed-items li:nth-child(n+3) {
				border-bottom: 1px solid var(--border-light);
			}

			.feed-items li:nth-child(n+3) a {
				display: block;
				padding: 0.75em 0;
				font-size: 0.75em;
				font-weight: 500;
				line-height: 1.55;
				text-align: left;
			}

			#more-news-button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				margin: 1em 0 0;
				padding: 0;
				text-align: center;
			}

			#more-news-button > a,
			#more-news-button > a:link,
			#more-news-button > a:visited,
			#more-news-button > a:active {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: auto;
				max-width: 100%;
				min-height: 2.3em;
				padding: 0.5em 0.75em;

				color: #80613e;
				background: transparent;
				border: 1px solid #b58a52;
				border-radius: 0.22em;

				font-family: Georgia, "Times New Roman", serif;
				font-size: 0.78em;
				font-style: normal;
				font-weight: 400;
				line-height: 1.15;
				text-align: center;
				text-decoration: none;
				white-space: nowrap;
			}

			#more-news-button > a:hover,
			#more-news-button > a:focus-visible {
				color: #654722;
				background: var(--accent-soft);
				border-color: var(--accent);
			}

			/* Общая четырёхколоночная сетка для всех экранов от 1024px */
			#allEntries {
				grid-template-columns: repeat(4, minmax(0, 1fr));
				grid-template-rows:
					repeat(4, minmax(0, 1fr))
					3em;
				grid-template-areas:
					"first-tab first-tab tab2 tab3"
					"first-tab first-tab tab4 tab5"
					"tab6 tab7 tab8 tab9"
					"tab10 tab11 tab12 tab13"
					"news-page-selector news-page-selector news-page-selector news-page-selector";
				width: 100%;
			}

			#allEntries > div:nth-child(13) {
				grid-area: tab13;
			}
			
			@media (prefers-color-scheme: dark) {
				.rubric-widget-items li:nth-child(n+2) a,
				.feed-items li:nth-child(n+3) a {
					color: #e2d9ce;
				}

				.rubric-widget {
					border-right-color: var(--border-dark);
				}

				.feed {
					border-left-color: var(--border-dark);
				}

				.rubric-widget-items li:nth-child(n+2),
				.feed-items li:nth-child(n+3) {
					border-bottom-color: var(--border-dark);
				}

				#more-news-button > a,
				#more-news-button > a:link,
				#more-news-button > a:visited,
				#more-news-button > a:active {
					color: #e0bd91;
					border-color: #a98155;
				}

				#more-news-button > a:hover,
				#more-news-button > a:focus-visible {
					color: #f0d4b2;
					background: #332b23;
					border-color: #c69a68;
				}

			}
			
}
/* ВЕСЬ ДЕСКТОП. КОНЕЦ. */




/* ЭКРАНЫ 1024–1365px */
@media all and (min-width: 1024px) and (max-width: 1365px) {
	.feed-items li:first-child,
	.rubric-widget-items li:first-child {
		padding-bottom: 0.5em;
	}

	.rubric-widget-items li,
	.rubric-widget-items li a,
	.feed-items li,
	.feed-items li a {
		font-size: 1em;
	}

	#allEntries {
		min-height: clamp(47rem, 62vw, 56rem);
		gap: 0.55em;
	}

	#allEntries > div:first-child > .tab {
		font-size: 0.9em;
	}

	#allEntries > div:nth-child(n+2) > .tab {
		font-size: 0.8em;
	}
}

/* ЭКРАНЫ 1366–1919px */
@media all and (min-width: 1366px) and (max-width: 1919px) {
	main {
		grid-template-rows: 1fr;
	}

	.rubric-widget-items li,
	.rubric-widget-items li a,
	.feed-items li,
	.feed-items li a {
		font-size: 1em;
	}

	.feed-items li:first-child,
	.rubric-widget-items li:first-child {
		padding-bottom: 1em;
	}

	#allEntries {
		min-height: clamp(50rem, 46vw, 58rem);
		gap: 0.65em;
	}

	#allEntries > div:first-child > .tab {
		font-size: 1em;
	}

	#allEntries > div:nth-child(n+2) > .tab {
		font-size: 0.82em;
	}
}

/* ЭКРАНЫ 1920–2399px */
@media all and (min-width: 1920px) and (max-width: 2399px) {
	.content {
		padding-right: 1.8em;
		padding-left: 1.8em;
	}

	#allEntries {
		min-height: clamp(52rem, 47vw, 64rem);
		gap: 0.72em;
	}

	#allEntries > div:first-child > .tab {
		font-size: 1em;
	}

	#allEntries > div:nth-child(n+2) > .tab {
		font-size: 0.84em;
	}
}

/* ЭКРАНЫ 2400–3199px */
@media all and (min-width: 2400px) and (max-width: 3199px) {
	main {
		grid-template-columns:
			minmax(11em, 1.35fr)
			minmax(0, 9fr)
			minmax(15em, 1.8fr);
	}

	.content {
		padding-right: 1.9em;
		padding-left: 1.9em;
	}

	.rubric-widget,
	.feed {
		padding-top: 1.4em;
	}

	#allEntries {
		min-height: clamp(56rem, 43vw, 72rem);
		gap: 0.78em;
	}

	#allEntries > div:first-child > .tab {
		font-size: 1em;
	}

	#allEntries > div:nth-child(n+2) > .tab {
		font-size: 0.84em;
	}
}

/* ЭКРАНЫ 3200–3839px */
@media all and (min-width: 3200px) and (max-width: 3839px) {
	main {
		grid-template-columns:
			minmax(12em, 1.3fr)
			minmax(0, 8.6fr)
			minmax(16em, 1.75fr);
	}

	.content {
		padding-right: 2em;
		padding-left: 2em;
	}

	#allEntries {
		min-height: clamp(60rem, 40vw, 80rem);
		gap: 0.84em;
	}

	#allEntries > div:first-child > .tab {
		font-size: 1em;
	}

	#allEntries > div:nth-child(n+2) > .tab {
		font-size: 0.84em;
	}
}

/* ЭКРАНЫ ОТ 3840px */
@media all and (min-width: 3840px) {
	main {
		grid-template-columns:
			minmax(13em, 1.25fr)
			minmax(0, 8.2fr)
			minmax(17em, 1.7fr);
	}

	.rubric-widget-items li,
	.rubric-widget-items li a,
	.feed-items li,
	.feed-items li a {
		font-size: 1em;
	}

	#allEntries {
		min-height: clamp(64rem, 38vw, 88rem);
		gap: 0.9em;
	}

	#allEntries > div:first-child > .tab {
		font-size: 1em;
	}

	#allEntries > div:nth-child(n+2) > .tab {
		font-size: 0.84em;
	}
}


/* Экраны 640-1023px (начало) */
@media all and (min-width: 640px)  and (max-width: 1023px) {
		
	
		main {
			grid-area: BODY;
			display: grid; 
			grid-template-rows: 1fr;
			grid-template-columns: 1fr;
			gap: 0 10px;
		}
		
			.content {
				padding: 1.35em 1.1em 1.5em;
			}
			
				.feed,
				.rubric-widget {
					display: none;
				}
			
		/* Вид новостей на главной (начало) */
		#allEntries {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows:
				repeat(4, minmax(0, 1fr))
				3em;
			gap: 0.6em;
			grid-template-areas: 
				"first-tab tab2 tab3"
				"tab4 tab5 tab6"
				"tab7 tab8 tab9"
				"tab10 tab11 tab12"
				"news-page-selector news-page-selector news-page-selector";
			min-height: clamp(52rem, 110vw, 70rem);
		}				
			.tab {
				font-size: 0.8em;
			}
				#allEntries > div:nth-child(13) { display: none; }				
		/* Вид новостей на главной (конец) */

}
/* Экраны 640-1023px (конец) */


/* МОБИЛЬНЫЕ. Начало медиазапроса на ширину экрана до 639px */
@media all and (max-width: 639px) {
	/*
		На мобильных дочерние блоки main участвуют в сетке #container.
		Это позволяет расположить соцсети сразу под верхним меню,
		а обложку — уже после них, без абсолютного позиционирования.
	*/
	#container {
		display: grid;
		min-height: 100vh;
		min-height: 100dvh;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows:
			auto
			auto
			auto
			auto
			minmax(max-content, 1fr)
			auto;
		grid-template-areas:
			"TOP-MENU"
			"MOBILE-SOCIAL"
			"SITE-COVER"
			"MOBILE-RUBRIC"
			"MOBILE-CONTENT"
			"FOOTER";
		gap: 0;
	}

	main {
		display: contents;
	}

	.content {
		grid-area: MOBILE-CONTENT;
		min-width: 0;
		padding: 1em 0.8em 1.4em;
	}

	/* Соцсети: сразу под меню и перед обложкой */
	.feed {
		position: static;
		grid-area: MOBILE-SOCIAL;
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0.55em 0.9em;
		text-align: center;
	}

	.feed-items {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.feed-items li:first-child,
	.feed-items li:nth-child(n+3),
	#more-news-button {
		display: none;
	}

	#social-buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.42em;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.rubric-widget {
		grid-area: MOBILE-RUBRIC;
		width: 100%;
		margin: 0;
		padding: 0.75em 0.9em 0.9em;
		line-height: 1.35;
	}

	/* Рубрики располагаются в строку и свободно переносятся */
	.rubric-widget-items {
		display: flex;
		flex-flow: row wrap;
		align-items: baseline;
		justify-content: flex-start;
		gap: 0.38em 0.8em;
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: left;
		list-style: none;
	}

	.rubric-widget-items li,
	.rubric-widget-items a {
		display: inline;
		width: auto;
		margin: 0;
		padding: 0;
		font-size: 0.9em;
		line-height: 1.35;
		white-space: normal;
	}

	.rubric-widget-items li {
		flex: 0 0 auto;
	}

	.rubric-widget-items li:first-child {
		margin: 0;
		padding: 0;
		font-size: 1em;
		text-align: left;
	}

	.rubric-widget-items li:first-child::after {
		content: ":";
	}

	.rubric-widget-items li:nth-child(n+2) a {
		display: inline;
		padding: 0;
	}

	/* Карточки: высота складывается из изображения 16:9 и панели текста */
	#allEntries {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(12, auto) 3em;
		gap: 0.75em;
		grid-template-areas:
			"first-tab"
			"tab2"
			"tab3"
			"tab4"
			"tab5"
			"tab6"
			"tab7"
			"tab8"
			"tab9"
			"tab10"
			"tab11"
			"tab12"
			"news-page-selector";
		width: 100%;
	}

	.tab {
		width: 100%;
		height: calc(52.875vw + 4.45rem);
		min-height: 15.5rem;
		max-height: 27rem;
		margin: 0;
		font-size: 0.82em;
	}

	#allEntries > div:first-child > .tab {
		height: calc(52.875vw + 5rem);
	}

	#allEntries > div:nth-child(13) {
		display: none;
	}

	#allEntries > div {
		min-width: 0;
		margin: 0;
	}

	@media (prefers-color-scheme: light) {
		.feed,
		.rubric-widget {
			background: var(--background-light);
			border-bottom: 1px solid var(--border-light);
		}
	}

	@media (prefers-color-scheme: dark) {
		.feed,
		.rubric-widget,
		.content {
			background: var(--background-dark);
		}

		.feed,
		.rubric-widget {
			border-bottom: 1px solid var(--border-dark);
		}
	}
}
/* МОБИЛЬНЫЕ. Конец медиазапроса на ширину экрана до 639px */