/* ==========================================================================
   Derbort Events – Frontend Styles
   Orientiert am Screenshot: dunkle Karten, Bild links, Content rechts
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom Properties (überschreibbar per Enfold Customizer)
   -------------------------------------------------------------------------- */
:root {
	--de-card-bg:         #3a3a2e;
	--de-card-bg-hover:   #44443a;
	--de-card-border:     rgba(255, 255, 255, 0.08);
	--de-text-primary:    #f0ead8;
	--de-text-secondary:  #c8bfa0;
	--de-accent:          #c8a96e;   /* goldenes Highlight, anpassbar */
	--de-btn-bg:          #c8a96e;
	--de-btn-color:       #1a1a14;
	--de-btn-hover-bg:    #d4b87a;
	--de-radius:          6px;
	--de-gap:             20px;
	--de-image-width:     280px;
	--de-font:            inherit;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.derbort-events-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--de-gap);
	font-family:    var(--de-font);
	max-width:      100%;
}

.derbort-events-empty {
	color:      var(--de-text-secondary);
	font-style: italic;
	padding:    20px 0;
}

/* --------------------------------------------------------------------------
   Event Card
   -------------------------------------------------------------------------- */
.derbort-event-card {
	display:        flex;
	flex-direction: row;
	background:     var(--de-card-bg);
	border:         1px solid var(--de-card-border);
	border-radius:  var(--de-radius);
	overflow:       hidden;
}

/* --------------------------------------------------------------------------
   Bild-Bereich (links)
   -------------------------------------------------------------------------- */
.derbort-event-image {
	flex:            0 0 var(--de-image-width);
	max-width:       var(--de-image-width);
	overflow:        hidden;
	position:        relative;
}

.derbort-event-image img {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Content-Bereich (rechts)
   -------------------------------------------------------------------------- */
.derbort-event-content {
	flex:    1;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap:     12px;
}

.derbort-event-content--noimage {
	padding-left: 28px;
}

/* --------------------------------------------------------------------------
   Titel
   -------------------------------------------------------------------------- */
.derbort-event-title {
	margin:      0;
	padding:     0;
	font-size:   1.2rem;
	font-weight: 600;
	color:       var(--de-text-primary);
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Einleitung / Excerpt
   -------------------------------------------------------------------------- */
.derbort-event-excerpt {
	color:       var(--de-text-secondary);
	font-size:   0.92rem;
	line-height: 1.6;
	flex:        1;
}

.derbort-event-excerpt p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Meta-Liste (Datum, Uhrzeit, Ort, Preis)
   -------------------------------------------------------------------------- */
.derbort-event-meta {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-wrap:  wrap;
	gap:        6px 20px;
}

.derbort-event-meta li {
	display:       flex;
	align-items:   center;
	gap:           7px;
	font-size:     1rem;
	color:         var(--de-text-secondary);
	border:        1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	padding:       4px 10px;
}

/* SVG-Icons via CSS – kein externesIconfont nötig */
.derbort-event-icon {
	display:          inline-block;
	width:            18px;
	height:           18px;
	flex-shrink:      0;
	background-color: var(--de-accent);
	-webkit-mask-repeat:   no-repeat;
	mask-repeat:           no-repeat;
	-webkit-mask-size:     contain;
	mask-size:             contain;
	-webkit-mask-position: center;
	mask-position:         center;
}

.derbort-icon-calendar {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.derbort-icon-clock {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.derbort-icon-pin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.derbort-icon-ticket {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6'/%3E%3Cpath d='M22 12H2'/%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='m9 5 3-3 3 3'/%3E%3C/svg%3E");
	mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6'/%3E%3Cpath d='M22 12H2'/%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='m9 5 3-3 3 3'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.derbort-event-btn {
	display:         inline-block;
	align-self:      flex-start;
	margin-top:      18px;
	padding:         10px 22px;
	background:      var(--de-btn-bg);
	color:           var(--de-btn-color) !important;
	font-size:       0.85rem;
	font-weight:     600;
	text-decoration: none !important;
	border-radius:   var(--de-radius);
	white-space:     nowrap;
}

.derbort-event-btn:focus-visible {
	outline:        2px solid var(--de-accent);
	outline-offset: 3px;
}

/* ==========================================================================
   RESPONSIVE – Tablet (≤ 768 px)
   ========================================================================== */
@media (max-width: 768px) {
	:root {
		--de-image-width: 200px;
	}

	.derbort-event-content {
		padding: 18px 20px;
	}
}

/* ==========================================================================
   RESPONSIVE – Mobil (≤ 560 px)
   ========================================================================== */
@media (max-width: 560px) {
	.derbort-event-meta li {
		font-size: 0.9rem;
	}
	.derbort-event-icon {
		width:  16px;
		height: 16px;
	}

	.derbort-event-card {
		flex-direction: column;
	}

	.derbort-event-image {
		flex:      0 0 auto;
		max-width: 100%;
		width:     100%;
		max-height: 220px;
	}

	.derbort-event-image img {
		height:     220px;
		object-fit: cover;
	}

	.derbort-event-content {
		padding: 16px;
	}

	.derbort-event-title {
		font-size: 1.05rem;
	}

	.derbort-event-btn {
		align-self: stretch;
		text-align: center;
	}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
	.derbort-event-btn {
		display: none;
	}
	.derbort-event-card {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}