.movie-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.movie-card,
.format-row {
	position: relative;
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
}

.movie-card::before,
.format-row::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid var(--color-border-soft);
	pointer-events: none;
}

.movie-card__content {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.movie-card__poster {
	width: 160px;
	min-width: 160px;
	aspect-ratio: 2 / 3;
	flex-shrink: 0;
	object-fit: cover;
}

.movie-card__details {
	flex: 1;
	min-width: 0;
}

.movie-card__title {
	margin: 0 0 var(--space-2);
	font-size: 1.375rem;
	font-weight: 600;
}

.movie-card__title a {
	color: inherit;
	text-decoration: none;
}

.movie-card__title a:hover {
	text-decoration: underline;
}

.movie-card__metadata {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

.movie-card__next-showing {
	margin: var(--space-1) 0 0;
	color: var(--color-text-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

@media (min-width: 40rem) {
	.movie-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.movie-grid--today {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.format-rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.format-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* nested inside the format-row card already providing the border/background */
.format-row__movies .movie-card {
	padding: 0;
	border: none;
	background: none;
}

.format-row__movies .movie-card::before {
	display: none;
}

.format-row__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.format-row__title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 600;
}

.format-row__blurb {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

.format-row__movies {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

@media (min-width: 64rem) {
	.format-row {
		flex-direction: row;
		align-items: center;
		gap: var(--space-6);
	}

	.format-row__info,
	.format-row__movies {
		flex: 1;
		min-width: 0;
	}

	/* alternating sides is what makes this a Z-pattern */
	.format-row:nth-child(even) {
		flex-direction: row-reverse;
	}
}

.filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: var(--space-6);
}

.filter-tab {
	padding: var(--space-2) var(--space-4);
	border-radius: 0.5rem;
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: 1rem;
	text-decoration: none;
}

.filter-tab--active,
.filter-tab:hover {
	background: var(--color-surface-alt);
	color: var(--color-text);
}

.movie-poster-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

.movie-poster-card {
	display: block;
	padding: var(--space-4);
	border-radius: 0.5rem;
	background: var(--color-surface);
	color: inherit;
	text-decoration: none;
}

.movie-poster-card__image,
.movie-poster-card__placeholder {
	width: 100%;
	aspect-ratio: 2 / 3;
	margin-bottom: var(--space-2);
	border-radius: 0.5rem;
	object-fit: cover;
}

.movie-poster-card__placeholder,
.movie-details__poster--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
	font-size: 1rem;
}

.movie-poster-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.movie-poster-card__metadata {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1rem;
}

.movie-details {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.movie-details__poster {
	width: 100%;
	height: 16rem;
	flex-shrink: 0;
	border-radius: 0.5rem;
	object-fit: cover;
}

.movie-details__title {
	margin: 0 0 var(--space-1);
	font-size: 1.25rem;
	font-weight: 600;
}

.movie-details__metadata {
	margin: 0 0 0.75rem;
	color: var(--color-text-muted);
	font-size: 1rem;
}

.movie-details__description {
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

.movie-credits {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.7;
}

.movie-credits__row {
	display: flex;
	gap: var(--space-2);
}

.movie-credits__label {
	color: var(--color-text-muted);
}

.movie-credits__value {
	margin: 0;
	color: var(--color-text);
}

.showing-list {
	display: grid;
	max-width: 32rem;
	gap: 0.75rem;
}

.showing-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4);
	border-radius: 0.5rem;
	background: var(--color-surface);
}

.showing-card__time {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.7;
}

.showing-card__screen {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

@media (min-width: 40rem) {
	.movie-poster-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.movie-details {
		flex-direction: row;
	}

	.movie-details__poster {
		width: 12rem;
	}
}

@media (min-width: 48rem) {
	.movie-poster-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.movie-poster-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}