/* Homepage - Thread List */

main.home-page {
	@media (min-width: /* --brk-md-desktop */ 1300px) {
		padding-right: var(--space-sm);
	}

	.home-controls {
		display: flex;
		gap: var(--space-sm);
		margin-left: var(--space-md);
		margin-right: var(--space-md);
		margin-top: var(--space-md);
	}

	.home-controls .btn {
		flex: 0 0 auto;
	}

	.search-box {
		padding: var(--space-sm);
		@media (min-width: /* --brk-md-desktop */ 1300px) {
			padding-left: 0;
			padding-right: 0;
		}
		/*padding-bottom: 0;*/

		form {
			display: flex;
			gap: var(--space-sm);
		}

		.input {
			flex: 1;
		}
	}

	.thread-list {
		display: grid;
		grid-template-columns: 1fr min-content min-content;

		@media (min-width: /* --brk-tablet */ 675px) {
			grid-template-columns: 1fr min-content min-content min-content;
		}

		.thread-item {
			border-top: 1px solid var(--color-border);
			padding: var(--space-md);
			gap: var(--space-md);
			align-items: center;
			display: grid;
			grid-column: 1 / -1; /* Must span the whole parent grid */
			grid-template-columns: subgrid;
			grid-template-rows: subgrid;
			grid-row: span 2;
			grid-template-areas:
				'title title count'
				'created replied count';

			@media (min-width: /* --brk-tablet */ 675px) {
				grid-template-areas: 'title created replied count';
				grid-row: initial;
			}

			.thread-title {
				font-size: var(--font-size-base);
				margin: 0 0 var(--space-xs) 0;
				line-height: 1.4;
				grid-area: title;

				a {
					text-decoration: none;

					&:hover {
						color: var(--color-link);
						text-decoration: underline;
					}
				}

				.thread-hash {
					color: var(--color-text-muted);
					margin-right: var(--space-xs);
					font-weight: 600;
				}

				.thread-link {
					font-weight: 600;
					color: inherit;
				}

				.category {
					font-size: var(--font-size-xs);
					font-weight: normal;
					display: block;
					color: inherit;
				}
			}

			.thread-meta {
				font-size: var(--font-size-xs);
				color: var(--color-text-muted);
				white-space: nowrap;

				.author {
					font-weight: 700;
					display: inline-block;

					span {
						max-width: 50px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: inline-block;
					}

					&::after {
						content: ', ';
						font-weight: initial;
						display: inline-block;
						overflow: hidden;
						padding-right: 4px;
					}

					@media (min-width: /* --brk-tablet */ 675px) {
						display: block;
						&::after {
							content: initial;
							display: none;
						}
					}
				}

				.time {
					display: inline-block;
					overflow: hidden;
				}

				&.created {
					grid-area: created;
				}

				&.replied {
					grid-area: replied;
					text-align: right;

					@media (min-width: /* --brk-tablet */ 675px) {
						text-align: initial;
					}
				}
			}

			.thread-count {
				font-weight: 700;
				font-size: var(--font-size-base);
				color: var(--color-text);
				text-align: right;
				grid-area: count;
			}
		}

		.thread-item.thread-list-header {
			display: none;

			@media (min-width: /* --brk-tablet */ 675px) {
				display: grid;
			}

			.thread-title {
				font-size: var(--font-size-xs);
				font-weight: normal;
			}

			.thread-count {
				font-size: var(--font-size-xs);
				font-weight: normal;
				display: inline-block;
			}
		}
	}
}