@import "variables.css";

.mobile-only {
	display: none !important;
}

@media screen and (max-width: 767px) {
	.mobile-only {
		display: inherit !important;
	}

	header {
		padding: 1rem 2rem;
		justify-content: left;
	}

	/* TODO Implement alternate search element */
	header search {
		display: none;
	}

	main {
		width: auto;
		padding: 1rem;
	}

	main.event-display {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	main .event-grid {
		justify-content: center;
	}

	.event-location-display {
		padding: 1rem;
	}

	.index-display hr {
		margin: 2rem 0;
	}

	.section-display {
		margin: 0;
	}

	.event-item {
		width: 100%;
	}

	.event-display section.event-details {
		width: 100%;
	}

	.event-description-content.collapsed {
		max-height: 10rem;
		mask-image: linear-gradient(black, transparent);
		-webkit-mask-image: linear-gradient(black, transparent);
	}

	.event-details .event-thumbnail-container {
		height: 12rem;
	}

	.event-details .event-thumbnail-container img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	.event-occurrence {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.event-occurrence .column {
		padding: 0 0.5rem;
	}

	.event-occurrence .date-display:not(.event-occurrences .date-display) {
		font-size: 1rem;
	}

	.event-organiser-small {
		padding: 0.5rem;
	}

	.modal-overlay .modal {
		margin: 0 auto;
		padding: 2rem 1rem;
	}

	.ticket-list {
		max-height: 400px;
	}
}