header {
	background-color: var(--background-color);
	color: var(--text-color);
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--border-color);
	text-align: center;

	.container {
		max-width: 120rem;
		margin: 0 auto;
		padding: 0 2rem;
	}
}

main {
	section#mod-selection {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 2.4rem;

		ul#mod-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
			gap: 1rem;
			margin: 1rem 0;
			width: 100%;

			> li {
				padding: 1.6rem;
				background-color: var(--background-color);
				border: 2px solid var(--border-color);
				border-radius: 0.8rem;
				transition: border-color 0.25s ease, background-color 0.25s ease;
				cursor: pointer;

				&.no-mods,
				&.error-message {
					text-align: center;
					color: var(--text-muted-color);
					cursor: default;
					border-color: color-mix(in srgb, var(--border-color) 50%, var(--background-color));
				}

				&.error-message {
					color: var(--error-color);
					border-color: color-mix(in srgb, var(--error-color) 30%, var(--background-color));
				}

				h4 {
					font-weight: normal;
					color: var(--secondary-color);
				}

				> p:has(small) {
					line-height: 1.2;

					&:first-of-type {
						margin-top: 0.6rem;
					}
				}

				&:hover {
					background-color: color-mix(in srgb, var(--background-color) 95%, white);
				}

				&.active {
					border-color: var(--primary-color);
					background-color: color-mix(in srgb, var(--background-color) 90%, var(--primary-color));
				}

				&.outdated {
					border-color: color-mix(in srgb, var(--border-color) 75%, var(--background-color));
					background-color: color-mix(in srgb, var(--background-color) 90%, black);
					color: var(--text-muted-color);
					cursor: pointer;

					h4 {
						color: color-mix(in srgb, var(--secondary-color) 65%, black);
					}

					.outdated-text {
						color: var(--error-color);
						font-weight: bold;
					}

					&.active {
						border-color: color-mix(in srgb, var(--primary-color) 70%, var(--error-color) 30%);
						background-color: color-mix(in srgb, var(--background-color) 85%, var(--primary-color) 15%);

						h4 {
							color: var(--secondary-color);
						}
					}
				}

				.description {
					margin-top: 0.6rem;

					ol {
						list-style-type: decimal;
						padding-left: 1.6rem;

						li:not(:last-child) {
							margin-bottom: 0.4rem;
						}
					}

					ul {
						list-style-type: disc;
						padding-left: 1.6rem;
						margin: 0.6rem 0;

						li:not(:last-child) {
							margin-bottom: 0.4rem;
						}
					}

					&.truncated {
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						line-clamp: 3;
						position: relative;
					}

					&.expanded {
						-webkit-line-clamp: none;
						line-clamp: none;
						overflow: visible;

						&::after {
							display: none;
						}
					}
				}

				.read-more-btn {
					background: none;
					border: none;
					color: var(--secondary-color);
					cursor: pointer;
					font-size: 1.4rem;
					padding: 0.2rem 0;
					text-decoration: underline;
					transition: color 0.2s ease;

					&:hover {
						color: color-mix(in srgb, var(--secondary-color) 80%, white);
					}
				}

				&.outdated .read-more-btn {
					color: color-mix(in srgb, var(--secondary-color) 65%, black);

					&:hover {
						color: color-mix(in srgb, var(--secondary-color) 50%, black);
					}
				}

				/* Skeleton loading styles */
				&.skeleton {
					cursor: default;
					pointer-events: none;
					display: block; /* Ensure skeleton items participate in grid layout */

					.skeleton-line {
						background: linear-gradient(90deg, color-mix(in srgb, var(--border-color) 50%, var(--background-color)) 25%, color-mix(in srgb, var(--border-color) 75%, var(--background-color)) 50%, color-mix(in srgb, var(--border-color) 50%, var(--background-color)) 75%);
						background-size: 200% 100%;
						animation: skeleton-shimmer 1.5s infinite;
						border-radius: 0.4rem;
						height: 1.6rem;
						margin-bottom: 0.8rem;

						&.title {
							height: 2.4rem;
							width: 70%;
						}

						&.author {
							height: 1.8rem;
							width: 50%;
						}

						&.meta {
							height: 1.4rem;
							width: 60%;
						}

						&.description {
							height: 1.6rem;
							margin-bottom: 0.6rem;

							&:nth-of-type(1) {
								width: 95%;
							}
							&:nth-of-type(2) {
								width: 85%;
							}
							&:nth-of-type(3) {
								width: 60%;
							}
						}
					}
				}
			}
		}

		@keyframes skeleton-shimmer {
			0% {
				background-position: -200% 0;
			}
			100% {
				background-position: 200% 0;
			}
		}

		button {
			background-color: var(--primary-color);
			color: var(--text-color);
			border: none;
			padding: 1rem 2rem;
			width: 100%;
			font-size: 1.8rem;
			text-align: center;
			border-radius: 0.5rem;
			font-weight: 600;
			cursor: pointer;
			transition: background-color 0.25s ease, opacity 0.25s ease;

			&:hover:not(:disabled) {
				background-color: color-mix(in srgb, var(--primary-color) 75%, white);
			}

			&:disabled {
				opacity: 0.6;
				cursor: not-allowed;
				background-color: var(--border-color);
			}

			@media screen and (min-width: 650px) {
				width: auto;
			}
		}
	}
}