/*
 * Block: Publikationen
 *
 * Figma: Startseite_Publikationen (3001:1216), 1920 x 805.
 * Gelbes Band, Ueberschrift, Filterreiter mit Trennlinie, darunter zwei
 * Karten nebeneinander aus Cover links und Inhalt rechts.
 */

.dc-publikationen {
	--dc-pub-cover-breite: 315px;   /* Figma: Cover 315 von 650 Kartenbreite */

	background-color: var(--dc-gelb);
	padding-block: var(--dc-abstand-section);
}

.dc-publikationen__titel {
	font-size: var(--dc-fs-h2);
	line-height: var(--dc-lh-h2);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 35px;   /* Figma: Titel endet bei 140, Reiter ab 175 */
}

/* ---------------------------------------------------------------------------
 * Filterreiter
 *
 * Der aktive Reiter ist fett und unterstrichen. Unter der Reiterzeile
 * laeuft eine durchgehende Linie.
 * --------------------------------------------------------------------------- */

.dc-publikationen__reiter {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 3vw, 3rem);
	padding-block-end: 20px;   /* Figma: Reiter enden bei 195, Linie bei 215 */
	margin-block-end: 40px;    /* Figma: Linie 215, Karten ab 255 */
	border-block-end: 1px solid var(--dc-schwarz);
}

.dc-publikationen__reiter-knopf {
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--dc-schwarz);
	font-family: inherit;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-book);
}

.dc-publikationen__reiter-knopf[aria-selected="true"] {
	font-weight: var(--dc-gewicht-bold);
	text-decoration: underline;
}

.dc-publikationen__reiter-knopf:hover {
	text-decoration: underline;
}

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

.dc-publikationen__liste {
	display: flex;
	gap: 20px;                               /* Figma */
	margin: 0;
	padding: 0;
	list-style: none;

	/*
	 * Waagerecht scrollbare Reihe statt festem Raster - Figma zeigt hier
	 * Navigationspfeile, es passen also mehr Eintraege hinein, als
	 * gleichzeitig sichtbar sind. Aufbau wie bei den Stimmen.
	 */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/*
	 * DIE REIHE BLEIBT IM CONTAINER.
	 *
	 * Vorher lief sie ueber die volle Fensterbreite und war nur links wie
	 * der Container eingerueckt - rechts liefen die Karten bis an den
	 * Bildschirmrand. Jetzt hat die Reihe genau den Inhaltsbereich des
	 * Containers als Kasten: Was nicht hineinpasst, wird an seiner rechten
	 * Kante angeschnitten. Genau das zeigt der Entwurf.
	 *
	 * Die Rechnung ist dieselbe wie in .dc-container: hoechstens 1320, auf
	 * schmalen Schirmen die Fensterbreite abzueglich zweimal Seitenrand.
	 */
	width: min( var(--dc-container), calc( 100% - 2 * var(--dc-rand-mobil) ) );
	margin-inline: auto;
	padding-inline: 0;
	scroll-padding-inline-start: 0;
	padding-block: 4px;   /* Platz fuer den Fokusrahmen */
}

.dc-publikationen__karte {
	flex: 0 0 650px;   /* Figma */
	max-width: 100%;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: var(--dc-pub-cover-breite) 1fr;
	min-height: 450px;   /* Figma */
	border: var(--dc-kontur);

	/*
	 * KEINE FUELLUNG. Im Entwurf scheint das gelbe Band durch die Karte
	 * durch, sie hat nur die schwarze Kontur - nachgemessen im Entwurf:
	 * Kartenrand #0a0a0d, Karteninneres #f8d74a, also dieselbe Farbe wie
	 * das Band. Vorher stand hier weiss.
	 */
}

/* [hidden] setzt display:none - ohne diese Regel gewinnt das Raster. */
.dc-publikationen__karte[hidden] {
	display: none;
}

.dc-publikationen__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dc-publikationen__inhalt {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 40px;   /* Figma */
}

/*
 * Die Nummer steht im Entwurf in einem Kasten mit Kontur. Sie ist eine
 * reine Zaehlung und fuer Screenreader ausgeblendet - der Titel darunter
 * sagt bereits, worum es geht.
 */
.dc-publikationen__nummer {
	align-self: flex-start;
	padding: 18px 24px;   /* Figma: Kasten 76 x 59 */
	border: var(--dc-kontur);
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-bold);

	/*
	 * Der Abstand nach unten ist die groesste Luecke der Karte: Im Entwurf
	 * liegen zwischen Kasten und Titel 80 Pixel. "auto" gibt ihr allen
	 * Platz, der bei kurzem Text uebrig bleibt - so sitzt der Titel unten
	 * bei der Beschreibung und nicht am Kasten.
	 */
	margin: 0 0 auto;
}

.dc-publikationen__karte-titel {
	font-size: var(--dc-fs-h6);    /* Figma: 22 Zeilenhoehe */
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 27px;              /* Figma */
	text-wrap: balance;

	/*
	 * Auf zwei Zeilen gekappt - so hoch ist der Titel im Entwurf.
	 *
	 * Noetig, seit die Publikationen von simone-burel.de kommen: Dort
	 * heisst der Eintrag "Quick Guide Female Leadership. Frauen in
	 * Fuehrungspositionen in der Arbeitswelt 4.0 (2020)", im Entwurf steht
	 * nur "Quick Guide Female Leadership (2020)". Ungekappt wurde die
	 * Karte 588 statt 450 hoch. Der volle Titel steht auf der Detailseite.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.dc-publikationen__text {
	margin: 0 0 38px;   /* Figma */

	/*
	 * Sechs Zeilen, danach drei Punkte - genau so zeigt es der Entwurf,
	 * dessen Beschreibungstext sichtbar mit "..." endet.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
}

/*
 * "Weiterlesen" steht direkt unter dem Text, NICHT am Kartenboden. Der
 * uebrige Platz liegt weiter oben unter der Nummer - so sitzen Titel,
 * Text und Link als Gruppe zusammen, wie im Entwurf.
 */

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	.dc-publikationen {
		--dc-pub-cover-breite: 120px;
	}

	.dc-publikationen__liste {
		gap: var(--dc-abstand-element);
	}

	.dc-publikationen__reiter {
		gap: 1rem;
	}

	.dc-publikationen__inhalt {
		padding: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Handy: Cover und Text untereinander (DC-72)
 *
 * Der Kunde am 11.09.2026: "Auf dem Handy werden im Publikationsslider die
 * Cover stark beschnitten und die Texte nicht vollstaendig angezeigt.
 * Besser: Cover und Text getrennt anzeigen."
 *
 * Beides kam aus derselben Ursache: Die Karte blieb auch bei 390 Fenster-
 * breite zweispaltig. Gemessen am 11.09.2026 bei 390: Die Karte ist dann
 * 291 breit, davon 120 Cover und 171 Text. Das Cover ist 450 hoch und 120
 * breit - ein Buchcover im Verhaeltnis 1:3,75, also ein senkrechter
 * Streifen aus der Mitte. Der Text lief in einer 171 breiten Spalte und
 * wurde von den Zeilenbegrenzungen (2 Zeilen Titel, 6 Zeilen Text)
 * mittendrin abgeschnitten.
 *
 * Untereinander braucht keines von beidem eine Begrenzung: Das Cover behaelt
 * sein Verhaeltnis, der Text steht vollstaendig da.
 * --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

	.dc-publikationen__karte {
		grid-template-columns: 1fr;

		/*
		 * Die 450 sind die gezeichnete Hoehe der zweispaltigen Karte.
		 * Untereinander waechst sie mit ihrem Inhalt.
		 */
		min-height: 0;

		/*
		 * DIE NAECHSTE KARTE WIRD ANGESCHNITTEN (DC-78).
		 *
		 * Der Kunde: "Auf dem S21 fe sind die Slider-Elemente genau eine
		 * Bildschirmbreite breit - es ist nicht mehr ersichtlich, dass es
		 * sich um einen Slider handelt und man wischen kann."
		 *
		 * Mit 88 % steht am rechten Rand ein Stueck der naechsten Karte.
		 * Das ist das gleiche Mittel wie eingeblendete Pfeile, nur ohne
		 * zusaetzliche Bedienelemente auf einem schmalen Schirm.
		 */
		flex-basis: 88%;
	}

	/*
	 * DAS COVER FUELLT DIE KARTE IN DER BREITE.
	 *
	 * Zweite Runde zu DC-72. Nach dem ersten Umbau stand das Cover 140
	 * breit oben links, darunter Titel und Beschreibung. Der Kunde am
	 * 13.09.2026: "besser, aber fuer mich noch nicht gut. Koennen wir das
	 * Bild des Covers ueber die ganze Breite der Box ziehen (entsprechend
	 * auch hoeher) und den Detailbeschreibungstext ausblenden?"
	 *
	 * Ohne aspect-ratio und ohne object-fit: Die Datei ist bereits 315 x
	 * 450 zugeschnitten (Bildgroesse dc-cover). Mit "height: auto" behaelt
	 * sie ihr Verhaeltnis und wird nie beschnitten - bei 256 Kartenbreite
	 * also 366 hoch. Genau das meint "entsprechend auch hoeher".
	 */
	.dc-publikationen__cover {
		padding: 0;
	}

	.dc-publikationen__cover img {
		width: 100%;
		height: auto;
	}

	/*
	 * DER BESCHREIBUNGSTEXT IST MOBIL AUS (DC-72).
	 *
	 * Auf der gezeichneten Breite steht er neben dem Cover und traegt die
	 * Karte. Untereinander schiebt er sie ueber jedes vernuenftige Mass -
	 * und die Publikation ist ueber Cover, Titel und "Weiterlesen" schon
	 * eindeutig. Der ganze Text steht auf der Detailseite.
	 */
	.dc-publikationen__text {
		display: none;
	}

	/* Der Titel bleibt - ungekappt, damit er nicht mittendrin endet. */
	.dc-publikationen__karte-titel {
		display: block;
		overflow: visible;
	}
}