/* == СТИЛІ НОВИН (ШАХОВИЙ ВИГЛЯД З ЧАСОВОЮ ЛІНІЄЮ БЕЗ КАРТОЧОК) == */

.news {
	flex: 1;
	overflow-y: auto;
	padding: 40px 20px;
	box-sizing: border-box;
	background-image: url('/background');
	background-color: #9e644c;
	background-attachment: fixed;
	background-size: cover;
}

.news h2 {
	margin-bottom: 40px;
	color: #d1ccc0;
	text-align: center;
}

/* Контейнер для новин з часовою лінією */
.news-list {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 120px;
}

/* Вертикальна часова лінія */
.news-list::before {
	content: '';
	position: absolute;
	left: 60px;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, #f4e4ba, #9e644c, #f4e4ba);
}

/* Загальний стиль для новин */
.new {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 80px;
	margin-left: 0;
	opacity: 0;
	animation: fadeInNews 0.6s ease forwards;
}

@keyframes fadeInNews {
	to {
		opacity: 1;
	}
}

/* Дата на часовій лінії - ПРАВИЛЬНЕ ЦЕНТРУВАННЯ */
.new::before {
	content: attr(data-date);
	position: absolute;
	left: -105px;
	top: 20px;
	width: 80px;
	height: 80px;
	background: #fdf7e1;
	border: 4px solid #9e644c;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 0.75em;
	color: #4b2e2a;
	text-align: center;
	z-index: 10;
	padding: 5px;
	line-height: 1.2;
}

/* Контент новини без фону */
.news-content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	max-width: 800px;
}

/* Зображення новини - центроване */
.news-image {
	width: 100%;
	max-width: 600px;
	height: 350px;
	overflow: hidden;
	border-radius: 15px;
	align-self: center;
}

.news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	cursor: pointer;
}

.news-image img:hover {
	transform: scale(1.08);
}

/* Текстовий контент */
.news-content {
	width: 100%;
	color: #6e4e4b;
	text-align: left;
}

.news-title {
	font-size: 2em;
	color: #6e4e4b;
	margin-bottom: 15px;
	display: block;
	line-height: 1.3;
	font-weight: bold;
}

.news-description {
	font-size: 1.1em;
	color: #6e4e4b;
	margin: 15px 0;
	line-height: 1.8;
}

.news-footer {
	font-size: 1em;
	color: #4b2e2a;
	font-style: italic;
	margin-top: 10px;
}

.news-timestamp {
	font-size: 0.95em;
	color: #4b2e2a;
	font-weight: 600;
	margin-bottom: 10px;
}

/* Секція коментарів */
.comments {
	margin-top: 20px;
	font-size: 0.95em;
	color: #6e4e4b;
	border-top: 2px dashed rgba(244, 228, 186, 0.5);
	padding-top: 15px;
}

.comments h4 {
	margin-bottom: 10px;
	color: #f4e4ba;
}

.comment {
	margin-bottom: 10px;
	padding: 10px 15px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	border-left: 3px solid #f4e4ba;
	backdrop-filter: blur(5px);
}

.comment strong {
	color: #f4e4ba;
}

/* Кнопка реакцій */
.reactions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 15px;
}

.reaction-button {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid #9e644c;
	border-radius: 20px;
	padding: 5px 12px;
	color: #6e4e4b;
	cursor: pointer;
	transition: all 0.3s ease;
}

.reaction-button:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

/* Адаптивний дизайн */
@media (max-width: 1024px) {
	.news-list {
		padding-left: 100px;
	}
	
	.news-list::before {
		left: 50px;
	}
	
	.news-image {
		height: 300px;
	}
	
	.new::before {
		left: -92px;
		width: 70px;
		height: 70px;
		font-size: 0.6em;
	}
	
	.news-title {
		font-size: 1.7em;
	}
}

@media (max-width: 768px) {
	.news-list {
		padding-left: 80px;
	}
	
	.news-list::before {
		left: 40px;
	}
	
	.new {
		align-items: flex-start !important;
	}
	
	.new::before {
		left: -75px;
		width: 60px;
		height: 60px;
		font-size: 0.65em;
	}
	
	.news-content-wrapper {
		width: 95%;
	}
	
	.news-image {
		height: 250px;
	}
	
	.news-title {
		font-size: 1.5em;
	}
	
	.news-description {
		font-size: 1em;
	}
}

@media (max-width: 480px) {
	.news-list {
		padding-left: 60px;
	}
	
	.news-list::before {
		left: 30px;
		width: 3px;
	}
	
	.new::before {
		left: -62px;
		width: 50px;
		height: 50px;
		font-size: 0.5em;
	}
	
	.news-image {
		height: 200px;
	}
	
	.news-title {
		font-size: 1.3em;
	}
}

.container {
	display: flex;
	justify-content: space-between;
}

.login-panel {
	width: 300px;
	position: sticky;
	top: 0;
	padding: 20px;
	box-sizing: border-box;
	background: linear-gradient(135deg, #6e4e4b, #f4e4ba);
	border-left: 5px solid #9e644c;
	border-right: 5px solid #9e644c;
	height: 100vh;
	text-align: center;
}

.login-panel form {
	display: flex;
	flex-direction: column;
	align-items: center; 
}

.login-panel label {
	width: 100%;
	text-align: left;
}

.login-panel input {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

/* Iframe контейнер з покращеною продуктивністю */
.iframe-container {
	width: 100%;
	max-width: 1440px;
	position: relative;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
	will-change: transform;
}

.iframe-container::before {
	content: '';
	display: block;
	padding-top: 56.25%;
}

.iframe-container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background: inherit;
}

/* Рваний верхній край */
.iframe-container::before {
	-webkit-clip-path: polygon(
		0% 2px, 2% 0%, 4% 2px, 6% 0%, 8% 1px, 10% 0%, 12% 2px, 14% 0%, 16% 1px, 18% 0%,
		20% 2px, 22% 0%, 24% 1px, 26% 0%, 28% 2px, 30% 0%, 32% 1px, 34% 0%, 36% 2px, 38% 0%,
		40% 1px, 42% 0%, 44% 2px, 46% 0%, 48% 1px, 50% 0%, 52% 2px, 54% 0%, 56% 1px, 58% 0%,
		60% 2px, 62% 0%, 64% 1px, 66% 0%, 68% 2px, 70% 0%, 72% 1px, 74% 0%, 76% 2px, 78% 0%,
		80% 1px, 82% 0%, 84% 2px, 86% 0%, 88% 1px, 90% 0%, 92% 2px, 94% 0%, 96% 1px, 98% 0%, 100% 2px,
		100% 100%, 0% 100%
	);
	clip-path: polygon(
		0% 2px, 2% 0%, 4% 2px, 6% 0%, 8% 1px, 10% 0%, 12% 2px, 14% 0%, 16% 1px, 18% 0%,
		20% 2px, 22% 0%, 24% 1px, 26% 0%, 28% 2px, 30% 0%, 32% 1px, 34% 0%, 36% 2px, 38% 0%,
		40% 1px, 42% 0%, 44% 2px, 46% 0%, 48% 1px, 50% 0%, 52% 2px, 54% 0%, 56% 1px, 58% 0%,
		60% 2px, 62% 0%, 64% 1px, 66% 0%, 68% 2px, 70% 0%, 72% 1px, 74% 0%, 76% 2px, 78% 0%,
		80% 1px, 82% 0%, 84% 2px, 86% 0%, 88% 1px, 90% 0%, 92% 2px, 94% 0%, 96% 1px, 98% 0%, 100% 2px,
		100% 100%, 0% 100%
	);
}

iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	
	/* Рваний край по всьому периметру */
	-webkit-clip-path: polygon(
		/* Верхній край */
		0% 1%, 1% 0%, 3% 1%, 5% 0%, 7% 1%, 9% 0%, 11% 1%, 13% 0%, 15% 1%, 17% 0%,
		19% 1%, 21% 0%, 23% 1%, 25% 0%, 27% 1%, 29% 0%, 31% 1%, 33% 0%, 35% 1%, 37% 0%,
		39% 1%, 41% 0%, 43% 1%, 45% 0%, 47% 1%, 49% 0%, 51% 1%, 53% 0%, 55% 1%, 57% 0%,
		59% 1%, 61% 0%, 63% 1%, 65% 0%, 67% 1%, 69% 0%, 71% 1%, 73% 0%, 75% 1%, 77% 0%,
		79% 1%, 81% 0%, 83% 1%, 85% 0%, 87% 1%, 89% 0%, 91% 1%, 93% 0%, 95% 1%, 97% 0%, 99% 1%,
		/* Правий край */
		100% 1%, 99% 3%, 100% 5%, 99% 7%, 100% 9%, 99% 11%, 100% 13%, 99% 15%, 100% 17%,
		99% 19%, 100% 21%, 99% 23%, 100% 25%, 99% 27%, 100% 29%, 99% 31%, 100% 33%, 99% 35%,
		100% 37%, 99% 39%, 100% 41%, 99% 43%, 100% 45%, 99% 47%, 100% 49%, 99% 51%, 100% 53%,
		99% 55%, 100% 57%, 99% 59%, 100% 61%, 99% 63%, 100% 65%, 99% 67%, 100% 69%, 99% 71%,
		100% 73%, 99% 75%, 100% 77%, 99% 79%, 100% 81%, 99% 83%, 100% 85%, 99% 87%, 100% 89%,
		99% 91%, 100% 93%, 99% 95%, 100% 97%, 99% 99%,
		/* Нижній край */
		99% 100%, 97% 99%, 95% 100%, 93% 99%, 91% 100%, 89% 99%, 87% 100%, 85% 99%, 83% 100%,
		81% 99%, 79% 100%, 77% 99%, 75% 100%, 73% 99%, 71% 100%, 69% 99%, 67% 100%, 65% 99%,
		63% 100%, 61% 99%, 59% 100%, 57% 99%, 55% 100%, 53% 99%, 51% 100%, 49% 99%, 47% 100%,
		45% 99%, 43% 100%, 41% 99%, 39% 100%, 37% 99%, 35% 100%, 33% 99%, 31% 100%, 29% 99%,
		27% 100%, 25% 99%, 23% 100%, 21% 99%, 19% 100%, 17% 99%, 15% 100%, 13% 99%, 11% 100%,
		9% 99%, 7% 100%, 5% 99%, 3% 100%, 1% 99%,
		/* Лівий край */
		0% 99%, 1% 97%, 0% 95%, 1% 93%, 0% 91%, 1% 89%, 0% 87%, 1% 85%, 0% 83%, 1% 81%,
		0% 79%, 1% 77%, 0% 75%, 1% 73%, 0% 71%, 1% 69%, 0% 67%, 1% 65%, 0% 63%, 1% 61%,
		0% 59%, 1% 57%, 0% 55%, 1% 53%, 0% 51%, 1% 49%, 0% 47%, 1% 45%, 0% 43%, 1% 41%,
		0% 39%, 1% 37%, 0% 35%, 1% 33%, 0% 31%, 1% 29%, 0% 27%, 1% 25%, 0% 23%, 1% 21%,
		0% 19%, 1% 17%, 0% 15%, 1% 13%, 0% 11%, 1% 9%, 0% 7%, 1% 5%, 0% 3%
	);
	
	clip-path: polygon(
		/* Верхній край */
		0% 1%, 1% 0%, 3% 1%, 5% 0%, 7% 1%, 9% 0%, 11% 1%, 13% 0%, 15% 1%, 17% 0%,
		19% 1%, 21% 0%, 23% 1%, 25% 0%, 27% 1%, 29% 0%, 31% 1%, 33% 0%, 35% 1%, 37% 0%,
		39% 1%, 41% 0%, 43% 1%, 45% 0%, 47% 1%, 49% 0%, 51% 1%, 53% 0%, 55% 1%, 57% 0%,
		59% 1%, 61% 0%, 63% 1%, 65% 0%, 67% 1%, 69% 0%, 71% 1%, 73% 0%, 75% 1%, 77% 0%,
		79% 1%, 81% 0%, 83% 1%, 85% 0%, 87% 1%, 89% 0%, 91% 1%, 93% 0%, 95% 1%, 97% 0%, 99% 1%,
		/* Правий край */
		100% 1%, 99% 3%, 100% 5%, 99% 7%, 100% 9%, 99% 11%, 100% 13%, 99% 15%, 100% 17%,
		99% 19%, 100% 21%, 99% 23%, 100% 25%, 99% 27%, 100% 29%, 99% 31%, 100% 33%, 99% 35%,
		100% 37%, 99% 39%, 100% 41%, 99% 43%, 100% 45%, 99% 47%, 100% 49%, 99% 51%, 100% 53%,
		99% 55%, 100% 57%, 99% 59%, 100% 61%, 99% 63%, 100% 65%, 99% 67%, 100% 69%, 99% 71%,
		100% 73%, 99% 75%, 100% 77%, 99% 79%, 100% 81%, 99% 83%, 100% 85%, 99% 87%, 100% 89%,
		99% 91%, 100% 93%, 99% 95%, 100% 97%, 99% 99%,
		/* Нижній край */
		99% 100%, 97% 99%, 95% 100%, 93% 99%, 91% 100%, 89% 99%, 87% 100%, 85% 99%, 83% 100%,
		81% 99%, 79% 100%, 77% 99%, 75% 100%, 73% 99%, 71% 100%, 69% 99%, 67% 100%, 65% 99%,
		63% 100%, 61% 99%, 59% 100%, 57% 99%, 55% 100%, 53% 99%, 51% 100%, 49% 99%, 47% 100%,
		45% 99%, 43% 100%, 41% 99%, 39% 100%, 37% 99%, 35% 100%, 33% 99%, 31% 100%, 29% 99%,
		27% 100%, 25% 99%, 23% 100%, 21% 99%, 19% 100%, 17% 99%, 15% 100%, 13% 99%, 11% 100%,
		9% 99%, 7% 100%, 5% 99%, 3% 100%, 1% 99%,
		/* Лівий край */
		0% 99%, 1% 97%, 0% 95%, 1% 93%, 0% 91%, 1% 89%, 0% 87%, 1% 85%, 0% 83%, 1% 81%,
		0% 79%, 1% 77%, 0% 75%, 1% 73%, 0% 71%, 1% 69%, 0% 67%, 1% 65%, 0% 63%, 1% 61%,
		0% 59%, 1% 57%, 0% 55%, 1% 53%, 0% 51%, 1% 49%, 0% 47%, 1% 45%, 0% 43%, 1% 41%,
		0% 39%, 1% 37%, 0% 35%, 1% 33%, 0% 31%, 1% 29%, 0% 27%, 1% 25%, 0% 23%, 1% 21%,
		0% 19%, 1% 17%, 0% 15%, 1% 13%, 0% 11%, 1% 9%, 0% 7%, 1% 5%, 0% 3%
	);
	
	/* Тінь для глибини */
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

/* Prefers-reduced-motion для користувачів з обмеженнями */
@media (prefers-reduced-motion: reduce) {
	.new {
		animation: none;
		opacity: 1;
	}
	
	.news-image img:hover {
		transform: none;
	}
	
	.reaction-button:hover {
		transform: none;
	}
}