/* mobile adjustments */
@media (max-width: 900px) {
	#arena-content.readings-view {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 1rem;
		padding: 1rem 0.5rem;
	}
}

@media (max-width: 700px) {
	body {
		padding: 1rem;
		font-size: 1rem;
		line-height: 1.6;
	}

	h1 {
		font-size: 3rem;
	}

	#arena-content.readings-view {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1rem 0.5rem;
	}

	.readings-view .index-block {
		padding: 1rem;
	}

	.index-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 1rem;
	}

	.index-year {
		font-size: 1rem;
		width: auto;
		text-align: left;
		margin-top: 0.25rem;
		color: #444;
	}

	.index-left {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
	}

	.index-title {
		font-size: 1.25rem;
		font-weight: 600;
	}

	.index-meta {
		font-size: 1rem;
		color: #666;
	}

	.index-right {
		width: 100%;
		align-items: flex-start;
		text-align: left;
		margin-top: 0.1rem;
		font-size: 0.9rem;
		line-height: 1.4;
		gap: 0.2rem;
		display: flex;
		flex-direction: column;
	}

	.index-channel {
		font-size: 0.85rem;
		font-weight: 600;
		margin-top: 0.1rem;
	}

	.tags {
		margin-top: 0.1rem;
	}

	.tag {
		font-size: 0.75rem;
		padding: 0.2rem 0.5rem;
		margin-top: 0.1rem;
	}

	.index-thumbnail {
		display: none;
	}

	.index-number {
		display: none;
	}

	.index-arrow {
		display: block !important;
		align-self: flex-start;
		margin-top: 0.25rem;
		font-size: 1rem;
		color: rgba(255, 255, 255, 0.3);
		order: 3;
	}

	.corner {
		display: none;
	}

	.sort-options {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		padding: 0 0.5rem;
	}

	#sort-select,
	#channel-select {
		width: 100%;
		font-size: 1rem;
		padding: 0.5rem;
	}
}

@media (max-width: 600px) {
	.sort-container {
		flex-direction: column;
		align-items: stretch;
	}

	.sort-container select {
		width: 100%;
	}
}

/* channel + dark mode mobile adjustments */
@media (max-width: 700px) {
	body.dark-mode .index-year {
		color: #bbb;
	}

	body.dark-mode .index-meta {
		color: #aaa;
	}

	#channel-select {
		display: none;
	}
}

/* hover effect (desktop only) */
@media (min-width: 701px) {
	.index-block:hover .index-arrow {
		transform: translateX(4px);
		opacity: 0.6;
	}
}