/* ==========================================================================
   BERLINALE-PLAKATE – Tableau: alle Jahre fließen nebeneinander,
   Motive einer Serie eng beieinander, zwischen den Jahren mehr Luft
   ========================================================================== */

.berlinale-tableau {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start; /* Jahre linksbündig */
	gap: 2.5rem 2rem; /* Abstand zwischen den Jahren: Zeile / Spalte */
	margin-top: 3rem;
}

.berlinale-year {
	flex: 0 1 auto;
	max-width: 100%;
}

/* Serie: Motive fast ohne Abstand, damit sie als zusammenhängendes Ganzes wirken.
   Desktop: bleibt immer eine Zeile; ist sie breiter als das Tableau (ab 5 Motiven),
   bekommt sie eine eigene Zeile und wird per JS um die Tableau-Mitte zentriert
   (ragt dann gleichmäßig links/rechts über). */
.berlinale-series {
	display: flex;
	flex-wrap: nowrap;
	gap: 3px;
}

.berlinale-year.is-wide {
	flex-basis: 100%;
	max-width: none;
	position: relative;
}

.berlinale-poster {
	flex: 0 0 auto;
	margin: 0;
}

.berlinale-poster-link {
	display: block;
	cursor: zoom-in;
	transition: opacity 0.2s ease;
}

.berlinale-poster-link:hover {
	opacity: 0.85;
}

.berlinale-poster-link:focus-visible {
	outline: 2px solid var(--clr-primary);
	outline-offset: 2px;
}

.berlinale-poster img {
	display: block;
	height: 280px; /* eine 4er-Serie füllt so die 9 Spalten ab Titelkante */
	width: auto;
	max-width: none;
}

.berlinale-caption {
	/* so breit wie die Serie darüber, längere Angaben brechen um */
	width: 0;
	min-width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	align-items: baseline;
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
}

.berlinale-caption-year {
	font-weight: 700;
}

.berlinale-caption-design {
	opacity: 0.7;
}

.berlinale-rights {
	margin-top: 3rem;
	font-size: 0.85rem;
	opacity: 0.7;
}

@media (max-width: 749px) {
	.berlinale-tableau {
		gap: 2rem 1.25rem;
	}

	/* Handy: breite Serien brechen um und stehen zentriert */
	.berlinale-series {
		flex-wrap: wrap;
		justify-content: center;
	}

	.berlinale-poster img {
		height: 150px;
	}
}

/* Lightbox: alle Plakate gleich hoch (auch die kleinen Vorlagen 2003–2012),
   höchstens so breit wie der Bildschirm */
.glightbox-container .gslide-image img {
	height: 50vh;
	width: auto;
	max-height: 50vh;
	max-width: 100vw;
	object-fit: contain;
}