@charset "UTF-8";
/*------------------------------------------------------------------
[Event Exhibitor Manager - Programme items of an exhibitor]

Purely additive stylesheet for the "Events" section on the exhibitor
detail view. The cards themselves are styled by the Event Calendar's
own ec-single-event.css through the .ec-related-card classes - that is
deliberate, so a change of colour source, badge look or cancelled state
in that plugin carries over here without a second edit.

Everything below only does what that stylesheet cannot know about:
the hero image variant, and the box-sizing the calendar only resets
inside its own #ec-app container.

1. SECTION & SCOPE
2. HERO VARIANT
3. NON-CLICKABLE CARDS
4. RESPONSIVE
-------------------------------------------------------------------*/


/* =========================================
   1. SECTION & SCOPE
   ========================================= */

/* Abstand nur, wenn About oder Galerie darueber stehen - ist der Abschnitt das
   einzige in der Hauptspalte, sitzt er direkt oben wie About es tun wuerde. */
.eem-single-events-wrap:not(:first-child) {
	margin-top: 40px;
}

/* Die Kacheln liegen bewusst nicht in #ec-app, wo der Event Calendar sein
   box-sizing setzt - deshalb hier selbst, sonst sprengt das Padding der
   Kacheln das Grid. */
.eem-ec-scope,
.eem-ec-scope * {
	box-sizing: border-box;
}

/* Grid-Grundlage kommt aus .ec-related-grid; in der schmaleren Hauptspalte der
   Ausstellerseite darf eine Kachel etwas enger werden.
   Beide Klassen im Selektor, damit diese Regel unabhaengig von der Ladereihenfolge
   gegen .ec-related-grid gewinnt - sonst entschied, welches Stylesheet zuletzt
   im Dokument steht. */
html body .eem-ec-scope .ec-related-grid.eem-ec-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}


/* =========================================
   2. HERO VARIANT
   ========================================= */

/* Das Bild soll randlos sitzen: Das Padding der Basis-Kachel wandert
   deshalb in den Textkoerper. */
html body .eem-ec-scope .eem-ec-card.eem-ec-has-hero {
	padding: 0;
	overflow: hidden;
}

html body .eem-ec-scope .eem-ec-card-hero {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: rgba(var(--ec-s-bg-rgb, 247, 107, 21), 0.25);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

/* Dezenter Verlauf nach oben: Badge und Pille muessen auch auf einem hellen
   Foto lesbar bleiben, ohne dass das Bild abgedunkelt wirkt. */
html body .eem-ec-scope .eem-ec-card-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 60%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
	pointer-events: none;
}

html body .eem-ec-scope .eem-ec-hero-header {
	position: absolute;
	top: 10px;
	right: 10px;
	left: 10px;
	margin: 0;
	z-index: 1;
}

/* Badge behaelt die Akzentfarbe der Kachel, bekommt auf dem Foto aber eine
   Kante, damit er sich vom Bild loest. */
html body .eem-ec-scope .eem-ec-has-hero .ec-related-badge {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Die Datums-Pille ist im Original eine helle Akzenttoenung - auf einem Foto
   waere sie unlesbar. Hier deshalb deckend hell mit dunkler Schrift. */
html body .eem-ec-scope .eem-ec-has-hero .ec-related-date-pill {
	background: rgba(255, 255, 255, 0.94);
	color: #1e293b;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

html body .eem-ec-scope .eem-ec-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 14px 16px 16px 16px;
}

/* Abgesagt: Das Bild tritt zurueck, der Titel bleibt lesbar. */
html body .eem-ec-scope .eem-ec-card.ec-is-cancelled .eem-ec-card-hero {
	filter: grayscale(1);
	opacity: 0.55;
}


/* =========================================
   3. NON-CLICKABLE CARDS
   ========================================= */

/* Programmpunkte mit Klickziel "keines" im Event Calendar: Die Kachel zeigt
   dann Informationen, aber keinen Hover, der eine Verlinkung verspricht. */
html body .eem-ec-scope .eem-ec-card.eem-ec-static,
html body .eem-ec-scope .eem-ec-card.eem-ec-static:hover {
	cursor: default;
	transform: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
	background: rgba(var(--ec-s-bg-rgb, 247, 107, 21), 0.12);
	border-color: #e2e8f0;
	border-left-color: var(--ec-s-accent);
}

html body .eem-ec-scope .eem-ec-card.eem-ec-static:hover .ec-related-card-title {
	color: #0f172a;
}


/* =========================================
   4. MODAL IM MODAL
   ========================================= */

/* Wird eine Kachel im Aussteller-Modal angeklickt, oeffnet sich das
   Detail-Modal des Event Calendars darueber. Beide Plugins arbeiten mit
   z-index: 999990.
   
   Der globale Modal-Container des Event Calendars (#ec-modal-container) besitzt
   die Klasse .ec-event-calendar-app. Dadurch greift container-type: inline-size,
   was einen neuen Stacking Context auf Standard-Ebene (0) erzeugt.
   Jedes darin liegende Modal – selbst mit z-index: 999995 – bleibt innerhalb
   dieses Stacking Contexts gefangen und kann niemals vor dem Aussteller-Modal
   (z-index: 999990) liegen.

   Loesung: Wir heben den Modal-Container selbst auf z-index: 999995 an und
   neutralisieren container-type fuer diesen Container. */
html body #ec-modal-container {
	container-type: normal;
	position: relative;
	z-index: 999995;
	pointer-events: none;
}

html body #ec-modal-container > * {
	pointer-events: auto;
}

html body #ec-modal-container .ec-detail-modal,
html body #ec-modal-container .ec-detail-modal.active,
html body #ec-detail-modal.active,
html body .ec-detail-modal.ec-modal.active {
	z-index: 999995;
}

/* Der Hallenplan des Event Calendars liegt mit 1000020 von sich aus darueber -
   der bleibt bewusst unangetastet. */


/* =========================================
   5. RESPONSIVE
   ========================================= */

@media (max-width: 480px) {
	html body .eem-ec-scope .ec-related-grid.eem-ec-grid {
		grid-template-columns: 1fr;
	}

	html body .eem-ec-scope .eem-ec-card-hero {
		aspect-ratio: 2 / 1;
	}
}