/**
 * Frontend-Styles für den Newsroom.
 * Handle: birke-newsroom. Wird nur geladen, wenn der CSS-Schalter an ist.
 * Bewusst schlicht und klassenbasiert; wo möglich mit Theme-Variablen und
 * sinnvollem Fallback, damit das Theme die Gestaltung behält.
 */

/* ------------------------------------------------ Liste der Meldungen --- */

.birke-newsroom-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.birke-newsroom-list__item {
	border-top: 1px solid var(--color-ink, #1a1a1a);
}

.birke-newsroom-list__item:last-child {
	border-bottom: 1px solid var(--color-ink, #1a1a1a);
}

.birke-newsroom-list__link {
	display: grid;
	grid-template-columns: 10rem 1fr;
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	padding: 1.25rem 0.75rem;
	color: currentColor;
	text-decoration: none;
	line-height: 1.3;
	transition: background-color 0.12s ease;
}

.birke-newsroom-list--with-category .birke-newsroom-list__link {
	grid-template-columns: 10rem 1fr 12rem;
}

.birke-newsroom-list__date,
.birke-newsroom-list__category {
	font-size: 0.875em;
	color: var(--muted, #666);
}

.birke-newsroom-list__category {
	text-align: right;
}

.birke-newsroom-list__title {
	font-weight: 600;
}

/*
 * Die ganze Zeile hinterlegen statt den Titel zu unterstreichen. Die waagerechte
 * Polsterung oben gibt der Fläche Luft — ohne sie klebte der Text am Rand des
 * grauen Feldes.
 */
.birke-newsroom-list__link:hover,
.birke-newsroom-list__link:focus-visible {
	background-color: var(--birke-newsroom-hover, rgba(0, 0, 0, 0.04));
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {

	.birke-newsroom-list__link {
		transition: none;
	}
}

/* Dateiliste: Titel links, Format und Größe rechts — sonst wie die PM-Liste. */
.birke-newsroom-list--files .birke-newsroom-list__link {
	grid-template-columns: minmax(0, 1fr) auto;
}

.birke-newsroom-list__meta {
	font-size: 0.875em;
	color: var(--muted, #666);
	text-align: right;
	white-space: nowrap;
}

.birke-newsroom-list__desc {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875em;
	font-weight: 400;
	color: var(--muted, #666);
}

.birke-newsroom-list__count::before {
	content: " · ";
}

@media (max-width: 48em) {

	.birke-newsroom-list__link,
	.birke-newsroom-list--with-category .birke-newsroom-list__link,
	.birke-newsroom-list--files .birke-newsroom-list__link {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	/* Einspaltig gibt es keine Spalte, an der sich das Rechtsbündige ausrichtet. */
	.birke-newsroom-list__category,
	.birke-newsroom-list__meta {
		text-align: left;
	}
}

/* ------------------------------------------------------ Medien-Karten --- */

/*
 * Fläche und Radius teilen sich Medienkarten und Bereichs-Kacheln — deshalb
 * stehen die Werte an einer Stelle statt zweimal.
 */
.birke-newsroom-media,
.birke-newsroom-tiles {
	--birke-newsroom-tile-surface: var(--color-surface, #f5f5f7);
	--birke-newsroom-tile-hover: var(--color-surface-hover, #eaeaef);
	--birke-newsroom-tile-radius: 18px;
}

.birke-newsroom-media {
	display: grid;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Die Karte ist selbst das Rasterelement und wird damit auf Reihenhöhe gezogen —
 * gleich hohe Karten je Reihe ergeben sich daraus von allein. overflow: hidden
 * sorgt dafür, dass das Bild die obere Rundung mitnimmt.
 */
.birke-newsroom-media__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--birke-newsroom-tile-radius);
	background: var(--birke-newsroom-tile-surface);
}

.birke-newsroom-media--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.birke-newsroom-media--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 3:2 für alle Vorschauen, damit die Reihe nicht nach Motivformat springt. */
.birke-newsroom-media__image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.birke-newsroom-media__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Platzhalter für Dateien ohne Bild (ZIP, PDF). Er hält die Reihe gleich hoch —
 * ohne ihn stünden Karten mit und ohne Bild nebeneinander, und das sieht
 * schlechter aus als ein Raster ganz ohne Bilder.
 */
.birke-newsroom-media__image--format {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--birke-newsroom-tile-hover);
}

.birke-newsroom-media__format {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--muted, #666);
}

/*
 * Der Textteil trägt die Polsterung der Karte. Zwei Kinder — Text und Knopf —
 * mit space-between: Der Knopf sitzt am Fuß und fluchtet über die Reihe, der
 * gap sichert den Mindestabstand für die höchste Karte, in der keine freie
 * Höhe mehr übrig ist. Mit margin-top: auto am Knopf gäbe es diesen
 * Mindestabstand nicht.
 */
.birke-newsroom-media__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.5rem;
}

/* Ein gemeinsamer Abstand für alle Textzeilen statt Rändern je Zeile. */
.birke-newsroom-media__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.birke-newsroom-media__title {
	margin: 0;
	font-weight: 600;
}

.birke-newsroom-media__desc,
.birke-newsroom-media__meta {
	margin: 0;
}

/*
 * Format, Größe und Zähler stehen unter dem Titel statt in der Beschriftung des
 * Knopfs: "Download · ZIP · 128 MB" sprengt die Kartenbreite, sobald die Datei
 * groß oder die Karte schmal ist.
 */
.birke-newsroom-media__meta {
	font-size: 0.875em;
	color: var(--muted, #666);
}

/* Als Element eines Flex-Containers zieht sich der Knopf auf die Kartenbreite. */
.birke-newsroom-media__button {
	justify-content: center;
}

@media (max-width: 64em) {

	.birke-newsroom-media--cols-3,
	.birke-newsroom-media--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40em) {

	.birke-newsroom-media--cols-3,
	.birke-newsroom-media--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ----------------------------------------------------------- Personen --- */

/*
 * Zwei Ebenen: Die Einträge liegen nebeneinander (2 auf Desktop, 1 auf Mobil),
 * innerhalb eines Eintrags stehen Bild und Text als zwei Spalten.
 */
.birke-newsroom-team {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3.5rem;
}

/*
 * 30 zu 70 als fr-Anteile, nicht als Prozent: fr verteilt erst den Platz, der
 * nach dem Abstand übrig ist. Mit 30%/70% plus gap käme die Zeile über 100 %
 * und das Raster liefe über.
 *
 * Der Abstand ist zweiwertig: waagerecht zwischen Bild und Text großzügig,
 * senkrecht (gestapelt auf Mobil) knapper — dort trennt schon der Zeilenwechsel.
 */
.birke-newsroom-team__item {
	display: grid;
	grid-template-columns: var(--birke-newsroom-team-split, minmax(0, 30fr) minmax(0, 70fr));
	gap: var(--birke-newsroom-team-gap, 1.5rem 3rem);
	align-items: start;
}

/*
 * Ohne Beitragsbild rendert das Plugin keine Bildspalte. Dann soll der Text die
 * volle Breite bekommen, statt die Hälfte des Eintrags leer stehen zu lassen.
 */
.birke-newsroom-team__body:only-child {
	grid-column: 1 / -1;
}

.birke-newsroom-team__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Bündig mit der Oberkante des Bildes — deshalb kein Abstand nach oben. */
.birke-newsroom-team__name {
	margin: 0 0 0.25rem;
}

.birke-newsroom-team__role {
	margin: 0 0 0.75rem;
	color: var(--muted, #666);
}

.birke-newsroom-team__vita > :first-child {
	margin-top: 0;
}

.birke-newsroom-team__vita > :last-child {
	margin-bottom: 0;
}

/* Der Download sitzt unter der Vita und sieht aus wie der Kopier-Knopf. */
.birke-newsroom-team__download {
	margin-top: 1.25rem;
	margin-bottom: 0;
}

/* Auf Mobil eine Zeile fürs Bild, eine für den Text. */
@media (max-width: 48em) {

	.birke-newsroom-team__item {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------ Kontakt-Karte --- */

.birke-newsroom-contact {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.birke-newsroom-contact a {
  text-decoration:underline;
  text-underline-offset:.2em;
  text-decoration-thickness:.08em;
  transition:text-decoration-thickness .15s
}
.birke-newsroom-contact a:hover {
  text-decoration-thickness:.12em
}

.birke-newsroom-contact__photo {
	flex: 0 0 8rem;
}

.birke-newsroom-contact__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.birke-newsroom-contact__body p {
	margin: 0 0 0.25rem;
}

.birke-newsroom-contact__name {
	font-weight: 600;
}

.birke-newsroom-contact__role {
	color: var(--muted, #666);
}

/* ------------------------------------------------- Kopf der Meldung --- */

.birke-newsroom-pm__header {
	margin-bottom: 2rem;
}

/*
 * Das Datum ist bewusst zurückhaltend gesetzt. Die Regeln sind defensiv
 * formuliert, weil das Label je nach Theme auch innerhalb einer fremden
 * Überschrift landen kann (wenn der Inhalt schon eine h1 mitbringt).
 */
.birke-newsroom-pm__meta {
	margin: 0 0 2rem 0;
	font-size: clamp(0.8125rem, 0.75rem + 0.3125vw, 1rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--muted, #666);
}

.birke-newsroom-pm__title {
	margin: 0 0 1.75rem 0;
}

.birke-newsroom-pm__teaser {
	margin: 0;
	font-size: clamp(1.125rem, 1.0833rem + 0.2083vw, 1.5rem);
	line-height: 1.4;
	font-weight: 600;
}

/* -------------------------------------------------------- Aktionskarte --- */

/*
 * Die Karte unter der Meldung: je Zeile Symbol, Beschriftung, Schaltfläche.
 * Die vier Werte oben sind die einzigen Stellschrauben — ein Theme überschreibt
 * sie an .birke-newsroom-pm, ohne die Selektoren darunter anfassen zu müssen.
 */
.birke-newsroom-actions {
	--birke-newsroom-surface: var(--color-surface, #f5f5f7);
	--birke-newsroom-line: var(--color-line, #dcdce1);
	--birke-newsroom-pill: var(--color-bg, #fff);
	--birke-newsroom-radius: 18px;

	margin: 3.5rem 0 2rem 0;
	padding: 0 2rem;
	background: var(--birke-newsroom-surface);
	border-radius: var(--birke-newsroom-radius);
}

.birke-newsroom-actions__row {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.5rem;
	padding: 1.75rem 0;
	border-top: 1px solid var(--birke-newsroom-line);
}

.birke-newsroom-actions__row:first-child {
	border-top: 0;
}

.birke-newsroom-actions__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
}

/* Das "Aa" ist bewusst Text und kein Icon — es zeigt, worum es geht. */
.birke-newsroom-actions__icon--text {
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
}

.birke-newsroom-actions__icon .birke-newsroom-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.birke-newsroom-actions__label {
	margin: 0;
	font-size: 1.275rem;
	font-weight: 600;
	line-height: 1.25;
}

.birke-newsroom-actions__meta {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--muted, #666);
}

/* ---------------------------------------------------------- Pill-Knopf --- */

.birke-newsroom-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--birke-newsroom-line, #dcdce1);
	border-radius: 999px;
	background: var(--birke-newsroom-pill, #fff);
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

/* Auf der Karte trägt die Fläche selbst den Kontrast, der Rahmen stört dort. */
.birke-newsroom-actions .birke-newsroom-button {
	border-color: transparent;
}

.birke-newsroom-button:hover,
.birke-newsroom-button:focus-visible {
	opacity: 0.7;
	color: inherit;
	text-decoration: none;
}

.birke-newsroom-button .birke-newsroom-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex: 0 0 auto;
}

@media (max-width: 40em) {

	.birke-newsroom-actions {
		padding: 0 1.25rem;
	}

	.birke-newsroom-actions__row {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		gap: 0.75rem 1rem;
	}

	.birke-newsroom-actions__label {
		font-size: 1.125rem;
	}

	/* Der Knopf rutscht unter die Beschriftung statt sie zu quetschen. */
	.birke-newsroom-actions__row > .birke-newsroom-button,
	.birke-newsroom-actions__row > .birke-newsroom-copy {
		grid-column: 2;
		justify-self: start;
	}

	.birke-newsroom-actions__row > .birke-newsroom-copy {
		align-items: flex-start;
	}
}

/* ------------------------------------------- Boilerplate und Kontakt --- */

.birke-newsroom-boilerplate,
.birke-newsroom-pm__contact {
	margin-top: 2.5rem;
}

.birke-newsroom-boilerplate__heading {
	margin: 0 0 0.5rem;
	font-size: clamp(1.125rem, 1.0833rem + 0.2083vw, 1.25rem);
	font-weight: 700;
	line-height: 1.4;
	max-width: 35ch;
}

.birke-newsroom-boilerplate__text p {
	margin: 0 0 1em;
	font-size: 1rem;
	line-height: 1.5;
}

.birke-newsroom-boilerplate__text p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------ Kopier-Aktion --- */

.birke-newsroom-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.birke-newsroom-copy-standalone {
	margin-top: 1.5rem;
}

.birke-newsroom-copy-standalone .birke-newsroom-copy {
	align-items: flex-start;
}

/*
 * Alle drei Beschriftungen liegen im selben Rasterfeld übereinander. Damit ist
 * der Knopf so breit wie die längste von ihnen und springt beim Umschalten
 * nicht — deshalb wird der inaktive Zustand ausgeblendet und nicht entfernt.
 */
.birke-newsroom-copy__button {
	display: grid;
	align-items: center;
	justify-items: center;
}

.birke-newsroom-copy__state {
	display: inline-flex;
	grid-area: 1 / 1;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	transition: opacity 0.12s ease;
}

.birke-newsroom-copy__state--done,
.birke-newsroom-copy__state--error,
.birke-newsroom-copy__button[data-state] .birke-newsroom-copy__state--idle {
	opacity: 0;
}

.birke-newsroom-copy__button[data-state="done"] .birke-newsroom-copy__state--done,
.birke-newsroom-copy__button[data-state="error"] .birke-newsroom-copy__state--error {
	opacity: 1;
}

.birke-newsroom-copy__button[data-state="done"] {
	background: var(--birke-newsroom-success, #34c759);
	border-color: transparent;
	color: #fff;
}

.birke-newsroom-copy__button[data-state="error"] {
	background: var(--birke-newsroom-error, #ff383c);
	border-color: transparent;
	color: #fff;
}

/* Im Rückmelde-Zustand nicht zusätzlich aufhellen — sonst blasst das Grün ab. */
.birke-newsroom-copy__button[data-state]:hover,
.birke-newsroom-copy__button[data-state]:focus-visible {
	color: #fff;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

	.birke-newsroom-copy__state {
		transition: none;
	}
}

/*
 * Die Kopier-Fassung muss im DOM stehen und markierbar bleiben — nur so kommt
 * sie als text/html in die Zwischenablage. display: none würde genau das
 * verhindern, deshalb wird sie weggeclippt statt ausgeblendet. Der Live-Bereich
 * wird genauso behandelt: optisch weg, für die Sprachausgabe da.
 */
.birke-newsroom-copy__payload,
.birke-newsroom-copy__live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- Credit --- */

/* Steht per Shortcode dort, wo er gebraucht wird — nicht an jedem Download. */
.birke-newsroom-credit {
	margin: 1rem 0 0;
	font-size: 0.875em;
	color: var(--muted, #666);
}

/* --------------------------------------------------- Bereichs-Kacheln --- */

.birke-newsroom-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.birke-newsroom-tiles--cols-1 {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Die ganze Kachel ist der Link, nicht nur die Beschriftung unten — sonst ist
 * das Klickziel kleiner, als die Fläche verspricht. Deshalb steht im
 * Beschreibungstext auch kein Markup: ein Link im Link wäre ungültig.
 */
.birke-newsroom-tiles__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	padding: 2rem;
	border-radius: 18px;
	background: var(--birke-newsroom-tile-surface);
	color: currentColor;
	text-decoration: none;
	transition: background-color 0.12s ease;
}

.birke-newsroom-tiles__link:hover,
.birke-newsroom-tiles__link:focus-visible {
	background-color: var(--birke-newsroom-tile-hover);
	color: currentColor;
	text-decoration: none;
}

.birke-newsroom-tiles__title {
	margin: 0;
}

.birke-newsroom-tiles__text {
	margin: 0;
}

/* Schiebt den Verweis nach unten, damit er bei ungleich langen Texten fluchtet. */
.birke-newsroom-tiles__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 1rem;
	font-weight: 600;
}

.birke-newsroom-tiles__cta .birke-newsroom-icon {
	width: 1.125rem;
	height: 1.125rem;
	transition: transform 0.12s ease;
}

.birke-newsroom-tiles__link:hover .birke-newsroom-icon,
.birke-newsroom-tiles__link:focus-visible .birke-newsroom-icon {
	transform: translateX(0.25rem);
}

@media (max-width: 48em) {

	.birke-newsroom-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {

	.birke-newsroom-tiles__link,
	.birke-newsroom-tiles__cta .birke-newsroom-icon {
		transition: none;
	}
}

/* ------------------------------------------------- Zurück-Verweis --- */

.birke-newsroom-back {
	margin: 2.5rem 0 0;
	text-align: right;
}

/*
 * Der Link trägt zusätzlich .birke-newsroom-button und sieht damit aus wie
 * "Porträt herunterladen". Hier steht nur, was darüber hinaus gilt: der Pfeil
 * weist nach links und rückt beim Überfahren in diese Richtung.
 *
 * Ausgerichtet wird am Absatz, nicht am Link: Der ist inline-flex und würde
 * sich sonst über die volle Breite ziehen, womit die Klickfläche bis an den
 * linken Rand reichte.
 */
.birke-newsroom-back__link .birke-newsroom-icon {
	transition: transform 0.12s ease;
}

.birke-newsroom-back__link:hover .birke-newsroom-icon,
.birke-newsroom-back__link:focus-visible .birke-newsroom-icon {
	transform: translateX(-0.25rem);
}

@media (prefers-reduced-motion: reduce) {

	.birke-newsroom-back__link .birke-newsroom-icon {
		transition: none;
	}
}