/* Funktionales Grundgeruest. Die visuelle Gestaltung kommt im naechsten Schritt. */

.junik-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.junik-modal {
	width: min(32rem, calc(100vw - 2rem));
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 12px;
}

.junik-modal::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

.junik-modal__inhalt {
	position: relative;
	padding: 1.75rem;
}

.junik-modal__schliessen {
	position: absolute;
	top: 0;
	right: 0.75rem;
	background: none;
	border: 0;
	font-size: 3rem;
	line-height: 1;
	cursor: pointer;
	color: gray;
	font-weight: 200;
}

/* Rueckfragen und Meldungen. Ohne JavaScript stehen sie als offener dialog im
   Seitenfluss, mit JavaScript liegen sie als echter Modal darueber. */
.junik-modal--frage[open]:not(:modal) {
	margin: 0 auto 1.5rem;
}

.junik-modal--fehler {
	border-color: #b3261e;
	border-top-width: 4px;
}

.junik-modal__frage {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	line-height: 1.4;
}

.junik-modal__label {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.junik-modal__titel {
	margin: 0.25rem 0 0.5rem;
}

.junik-modal__meta {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	text-transform: uppercase;
}

.junik-form__feld {
	margin-bottom: 1rem;
}

.junik-form__feld label {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 0.35rem;
}

.junik-form__feld--checkbox label {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9rem;
}

.junik-form input[type="text"],
.junik-form input[type="email"],
.junik-form textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 8px;
	font: inherit;
}

.junik-form [aria-invalid="true"] {
	border-color: #b3261e;
}

.junik-form__hinweis {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
}

.junik-form__fehler {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	color: #b3261e;
}

.junik-form__fehler:empty {
	display: none;
}

.junik-form__meldung {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
}

.junik-form__meldung:empty {
	display: none;
}

.junik-form__meldung--fehler {
	color: #b3261e;
}

.junik-form__absenden {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 0;
	border-radius: 8px;
	background: #111;
	color: #fff;
	font: inherit;
	cursor: pointer;
	margin-top: 2rem;
}

.junik-form__absenden[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.junik-form__fuss {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
}

.junik-hinweis__klein {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	opacity: 0.8;
}

/* -------------------------------------------------------------------------
   Workshop-Karte
   ---------------------------------------------------------------------- */

.junik-ws {
	--junik-ws-farbe: #111;

	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	padding: 0.9rem 1.1rem 1.1rem;
	border: 1px solid #e4e4e4;
	border-top: 4px solid var(--junik-ws-farbe);
	border-radius: 10px;
	background: #fff;
}

/* Gleiche Hoehe fuer alle Karten einer Rasterzeile.

   Die Spalten des Spalten-Blocks strecken sich bereits auf die Zeilenhoehe.
   Was fehlt, ist die Weitergabe nach innen: Zwischen Spalte und Karte liegt
   der Wrapper von LazyBlocks, der die Hoehe sonst nicht durchreicht.

   :has begrenzt das auf Spalten, in denen wirklich eine Karte steckt. Andere
   Spalten der Seite bleiben unberuehrt. Browser ohne :has zeigen die Karten
   in ihrer natuerlichen Hoehe, das Raster funktioniert trotzdem. */
.wp-block-columns:has( .junik-ws ) {
	align-items: stretch;
}

.wp-block-column:has( .junik-ws ) {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.wp-block-column:has( .junik-ws ) > *,
.wp-block-column:has( .junik-ws ) > * > * {
	flex: 1 1 auto;
}

.junik-ws__meta {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--junik-ws-farbe);
}

.junik-ws__titel {
	margin: 0 0 0.2rem;
	font-size: 1.4rem;
	line-height: 1.3;
	font-weight: 400;
}

.junik-ws__leitung {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	opacity: 0.85;
}

.junik-ws__status {
	margin: 0 0 0.75rem;
	font-size: 0.76rem;
}

/* Unbefuellte Zeilen bleiben als Luecke stehen, damit Titel, Leitung und
   Platzstand ueber alle Karten einer Rasterzeile hinweg auf gleicher Hoehe
   sitzen. Ohne das rutscht bei einem Workshop ohne Leitung alles nach oben. */
.junik-ws__meta:empty,
.junik-ws__leitung:empty,
.junik-ws__status:empty {
	min-height: 1.35em;
}

.junik-ws--ausgebucht .junik-ws__status,
.junik-ws--geschlossen .junik-ws__status,
.junik-ws--abgesagt .junik-ws__status {
	opacity: 0.7;
}

/* Button und Sperrhinweis stehen beide im Markup, der Live-Status schaltet um.
   margin-top: auto haelt sie am unteren Rand, damit die Buttons aller Karten
   einer Zeile auf einer Linie sitzen. */
.junik-ws__anmelden,
.junik-ws__gesperrt {
	margin-top: auto;
}

.junik-ws__anmelden {
	align-self: flex-start;
	padding: 0.55rem 1.1rem;
	border-radius: 8px;
	background: var(--junik-ws-farbe);
	color: #fff;
	font-size: 0.9rem;
	text-decoration: none;
}
.junik-ws__anmelden:hover {
	color: #fff;
	text-decoration: underline;
}

.junik-ws__gesperrt {
	margin-bottom: 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

.junik-ws__anmelden[hidden],
.junik-ws__gesperrt[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   Details als Ballon

   Der Inhalt liegt absolut ueber der Seite. Wuerde er im Fluss stehen, wuerde
   die Karte beim Aufklappen wachsen und die ganze Rasterzeile mitspringen.
   ---------------------------------------------------------------------- */

.junik-ws__details {
	position: relative;
	margin: 0 0 0.85rem;
}

.junik-ws__details-titel {
	display: inline-block;
	cursor: pointer;
	font-size: 0.8rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.junik-ws__details-titel::marker,
.junik-ws__details-titel::-webkit-details-marker {
	display: none;
	content: "";
}

.junik-ws__details-titel::after {
	content: " ▾";
}

.junik-ws__details[open] .junik-ws__details-titel::after {
	content: " ▴";
}

/* Die geoeffnete Karte muss ueber ihren Nachbarinnen liegen. */
.junik-ws:has( .junik-ws__details[open] ) {
	z-index: 30;
}

.junik-ws__ballon-schliessen {
	position: absolute;
	top: -1px;
	right: 0.2rem;
	padding: 0 0.35rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 3rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
}

.junik-ws__ballon-schliessen:hover,
.junik-ws__ballon-schliessen:focus-visible {
	opacity: 1;
}

.junik-ws__ballon-schliessen[hidden] {
	display: none;
}
.junik-ws__ballon-kategorie {
	background: var(--junik-ws-farbe);
	color: #fff;
	font-size: 0.75rem;
	padding: 0.2rem 0.5rem;
	border-radius: 6px;
}
.junik-ws__ballon {
	position: absolute;
	z-index: 31;
	top: calc(100% + 0.7rem);
	left: -0.6rem;
	right: -0.6rem;
	max-height: min(24rem, 60vh);
	overflow-y: auto;
	padding: 0.9rem 1rem;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	font-size: 0.85rem;
	min-width: 22em;
}

/* Rechts oben sitzt das Schliessen-Kreuz, dort darf kein Text hinlaufen. */
.junik-ws__ballon:has( .junik-ws__ballon-schliessen:not( [hidden] ) ) {
	padding-right: 2.2rem;
}

/* Spitze zum Aufklapper. */
.junik-ws__ballon::before {
	content: "";
	position: absolute;
	top: -0.42rem;
	left: 1.1rem;
	width: 0.8rem;
	height: 0.8rem;
	transform: rotate(45deg);
	border-top: 1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background: #fff;
}

.junik-ws__bild {
	display: block;
	width: 100%;
	max-width: 6.6rem;
	height: auto;
	margin: 0.25rem .5rem 0 0;
	border-radius: 6px;
	text-align: right;
	float: left;
}

@media (min-width: 601px) and (max-width: 1200px) {
	.junik-ws__bild {
		float: none;
		margin-right: 0;
	}
}

.junik-ws__beschreibung {
	hyphens: auto;
	text-align: justify;
	font-size: 0.75rem;
	line-height: 1.2rem;
}

.junik-ws__beschreibung > :first-child {
	margin-top: 0;
}

.junik-ws__beschreibung > :last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	/* Auf schmalen Schirmen ist die Karte selbst so breit wie der Inhalt,
	   der Ballon darf dann nicht ueber den Rand hinausragen. */
	.junik-ws__ballon {
		left: -1rem;
		right: -1rem;
	}
}

.junik-form__meldung--erfolg {
	color: #1b5e20;
}

.junik-hinweis__felder {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

/* Nur fuer die Redaktion. Zeigt an, dass die Karte eine Kennung traegt, die das
   Verzeichnis nicht kennt, und Anmeldungen darauf abgewiesen wuerden. */
.junik-ws__warnung {
	margin: 0 0 0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: 6px;
	background: #fff3cd;
	color: #5c4400;
	font-size: 0.72rem;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Seitenrahmen

   Alles hier greift ueber die Karte hinaus in das Seitenlayout: Breite des
   Theme-Containers, der Kasten um eine Raumspalten-Reihe, Abstaende des
   Spalten-Blocks. Solche Regeln duerfen nur dort gelten, wo das Plugin
   wirklich etwas ausgibt, sie haengen deshalb an .junik-wsa-seite. Die Klasse
   setzt junik_wsa_body_class() auf Seiten mit Workshop-Block oder Shortcode.

   Vorher stand das als body.page-id-2210 im Theme-CSS und galt nur fuer die
   Testseite.
   ---------------------------------------------------------------------- */

/* Das Raster braucht mehr Breite als der Theme-Container hergibt. Das
   !important steht hier, weil die Themebreite aus dessen eigenem Stylesheet
   kommt, das je nach Einbindung nach diesem geladen wird. */
.junik-wsa-seite #content.container {
	max-width: 1390px !important;
}

.junik-wsa-seite .recovery-festival-img {
	filter: drop-shadow( 0 0 5px lightgray );
}

/* Fettes im Kartentext soll nicht auch noch die Linkfarbe des Themes tragen.
   Der erste Selektor traegt den Blocknamen aus JUNIK_WSA_BLOCK_NAME; wird der
   Block umbenannt, muss er hier mitwandern. */
.junik-wsa-seite .wp-block-lazyblock-recovery-festival-workshop b,
.junik-wsa-seite .workshop-raum-spalten strong {
	font-weight: 600;
	color: unset !important;
}

/* Kasten um eine Reihe des Rasters. Die negativen Aussenabstaende holen ihn
   ueber die Spaltenbreite hinaus, das Innenmass gleicht sie wieder aus. */
.junik-wsa-seite .workshop-raum-spalten {
	margin: 0 -3rem 2rem;
	padding: 2rem 3rem 1rem;
	border-radius: 3rem;
	box-shadow: 0 0 5px lightgray;
}

.junik-wsa-seite .workshop-raum-spalten.workshop-spacig {
	background: repeating-linear-gradient( 45deg, #3098bc, #a499ec 33.33% 0px );
}

/* Den Abstand zwischen den Raumspalten setzt der Kasten selbst. */
.junik-wsa-seite .wp-block-columns.workshop-raum-spalten {
	gap: 0;
}

.junik-wsa-seite .entry-content :where( .wp-block-columns.is-layout-flex ) {
	gap: 1em;
}