/* ==========================================================================
   Press page styles
   ========================================================================== */

@layer press {
	/* --------------------------------------------------------------------------
	   Genre filter pills
	   -------------------------------------------------------------------------- */

	.press-filter {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-sm);
		margin-bottom: var(--spacing-xl);
	}

	.filter-btn {
		cursor: pointer;

		& input[type="radio"] {
			position: absolute;
			opacity: 0;
			width: 0;
			height: 0;
			pointer-events: none;
		}

		& span {
			display: inline-block;
			padding: 4px var(--spacing-md);
			border: 1.5px solid var(--color-border);
			border-radius: var(--radius-full);
			font-size: 0.875rem;
			font-weight: var(--font-weight-semibold);
			background-color: var(--color-bg);
			color: var(--color-text-light);
			transition:
				background-color var(--transition-fast),
				border-color var(--transition-fast),
				color var(--transition-fast);
			user-select: none;
		}

		&:hover span {
			border-color: var(--color-accent);
			color: var(--color-accent);
		}

		& input:checked + span {
			background-color: var(--color-accent);
			border-color: var(--color-accent);
			color: #ffffff;
		}
	}

	/* --------------------------------------------------------------------------
	   News list
	   -------------------------------------------------------------------------- */

	.news-list {
		display: grid;
		gap: var(--spacing-sm);
	}

	.news-item {
		display: grid;
		grid-template-columns: auto auto 1fr;
		align-items: center;
		gap: var(--spacing-md);
		padding: var(--spacing-md) var(--spacing-lg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background-color: var(--color-bg);
		cursor: pointer;
		transition:
			border-color var(--transition-fast),
			background-color var(--transition-fast),
			transform var(--transition-fast);

		&:hover,
		&:focus-visible {
			border-color: var(--color-accent);
			background-color: var(--color-bg-light);
			transform: translateX(4px);
			outline: none;
		}
	}

	/* --------------------------------------------------------------------------
	   Genre badge
	   -------------------------------------------------------------------------- */

	.news-genre-badge {
		display: inline-block;
		padding: 2px 10px;
		border-radius: var(--radius-full);
		font-size: 0.75rem;
		font-weight: var(--font-weight-semibold);
		white-space: nowrap;
		background-color: var(--color-bg-light);
		color: var(--color-text-light);
	}

	.genre-kokimiza {
		background-color: #f3e8ff;
		color: #6b21a8;

		@media (prefers-color-scheme: dark) {
			background-color: #3b0764;
			color: #e9d5ff;
		}
	}

	.genre-gutzgutz {
		background-color: #dcfce7;
		color: #166534;

		@media (prefers-color-scheme: dark) {
			background-color: #052e16;
			color: #bbf7d0;
		}
	}

	.genre-bpm {
		background-color: #fee2e2;
		color: #991b1b;

		@media (prefers-color-scheme: dark) {
			background-color: #450a0a;
			color: #fecaca;
		}
	}

	.genre-systems {
		background-color: #dbeafe;
		color: #1d4ed8;

		@media (prefers-color-scheme: dark) {
			background-color: #1e3a8a;
			color: #bfdbfe;
		}
	}

	.genre-jocarium {
		background-color: var(--color-bg-dark);
		color: var(--color-text-light);
	}

	/* --------------------------------------------------------------------------
	   Date & Title in list
	   -------------------------------------------------------------------------- */

	.news-date {
		font-size: 0.85rem;
		color: var(--color-text-light);
		white-space: nowrap;
	}

	.news-title {
		font-size: 1rem;
		font-weight: var(--font-weight-semibold);
		color: var(--color-text);
		margin: 0;
	}

	/* --------------------------------------------------------------------------
	   Modal (<dialog>)
	   -------------------------------------------------------------------------- */

	.news-modal {
		border: none;
		border-radius: var(--radius-lg);
		padding: 0;
		max-width: min(720px, 90vw);
		max-height: 85vh;
		width: 100%;
		box-shadow: var(--shadow-xl);
		background-color: var(--color-bg);
		overflow: hidden;

		&::backdrop {
			background-color: rgba(0, 0, 0, 0.55);
			backdrop-filter: blur(4px);
		}
	}

	.news-modal-inner {
		display: grid;
		grid-template-rows: auto 1fr;
		max-height: 85vh;
	}

	/* Modal header */
	.news-modal-header {
		position: relative;
		padding: var(--spacing-xl);
		padding-right: calc(var(--spacing-xl) + 2.5rem);
		border-bottom: 1px solid var(--color-border);
		background-color: var(--color-bg-light);
	}

	.news-modal-meta {
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		margin-bottom: var(--spacing-sm);
	}

	.news-modal-title {
		font-size: clamp(1.1rem, 3vw, 1.5rem);
		color: var(--color-text);
		margin: 0;
		line-height: 1.4;
	}

	.news-modal-close {
		position: absolute;
		top: var(--spacing-md);
		right: var(--spacing-md);
		width: 2rem;
		height: 2rem;
		border: none;
		background: none;
		cursor: pointer;
		font-size: 1.1rem;
		color: var(--color-text-light);
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		transition:
			background-color var(--transition-fast),
			color var(--transition-fast);

		&:hover {
			background-color: var(--color-bg-dark);
			color: var(--color-text);
		}
	}

	/* Modal body — rendered markdown */
	.news-modal-body {
		padding: var(--spacing-xl);
		overflow-y: auto;
		line-height: 1.8;

		& h2,
		& h3 {
			color: var(--color-accent);
			margin-top: var(--spacing-xl);
			margin-bottom: var(--spacing-md);
			font-size: 1.15rem;

			&:first-child {
				margin-top: 0;
			}
		}

		& p {
			margin-bottom: var(--spacing-md);

			& + h2,
			& + h3 {
				margin-top: var(--spacing-2xl);
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		& ul {
			margin-bottom: var(--spacing-md);
			padding-left: var(--spacing-xl);
		}

		& li {
			margin-bottom: var(--spacing-xs);
		}
	}

	/* --------------------------------------------------------------------------
	   Mobile
	   -------------------------------------------------------------------------- */

	@media (max-width: 600px) {
		.news-item {
			grid-template-columns: 1fr auto;
			grid-template-rows: auto auto;

			& .news-genre-badge {
				grid-column: 1;
				grid-row: 1;
				justify-self: start;
			}

			& .news-date {
				grid-column: 2;
				grid-row: 1;
			}

			& .news-title {
				grid-column: 1 / -1;
				grid-row: 2;
			}
		}

		.news-modal {
			max-width: 100vw;
			max-height: 92vh;
			border-radius: var(--radius-lg) var(--radius-lg) 0 0;
			margin: auto 0 0;
		}

		.news-modal-inner {
			max-height: 92vh;
		}
	}
}