/**
 * Event Single Page Styles
 *
 * Page-specific styles for single event pages (single-events.php)
 *
 * TYPOGRAPHY: Alle Typo-Styles in kuladu-typography.css definiert
 * Nutze Utility-Classes in Templates (.text-xl, .font-sans, .font-bold, etc.)
 */

/* ==========================================================================
   Hero Section
   ========================================================================== */

.event-header {
	background: var(--color-sand-50);
}

.event-subtitle {
	color: var(--color-black);
	margin-top: var(--space-0);
	margin-bottom: var(--space-8);
}

/* ==========================================================================
   Meta Boxes Section
   ========================================================================== */

.event-meta-section {
	background: var(--color-white);
}

/* Wrapper for meta boxes with large gap */
.event-meta-bubbles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Responsive grid: 2 columns on tablet+ */
@media (min-width: 768px) {
	.event-meta-bubbles {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Meta item groups - consistent spacing */
.event-meta__group-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Meta labels (Typography via Utility-Classes) */
.event-meta__group-label {
	color: var(--color-black);
	margin: 0;
}

/* Meta values (Typography via native <p> or Utility-Classes) */
.event-meta__group-value {
	margin: 0;
}

/* Address - normal font style */
.event-meta__group-value address {
	font-style: normal;
	margin: 0;
}

/* External link icon */
.external-link-icon {
	display: inline-block;
	margin-left: var(--space-2);
	color: currentColor;
}

/* ==========================================================================
   Hero Image Section with Gradient Background
   ========================================================================== */

.event-hero-image-section {
	background: linear-gradient(
		to bottom,
		var(--color-sand-50) 0%,
		var(--color-sand-50) 50%,
		var(--color-white) 50%,
		var(--color-white) 100%
	);
}

/* Mobile: Full width, no padding */
@media (max-width: 767px) {
	.event-hero-image-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Speech bubble: Full width, no border-radius, border only top/bottom */
	.event-hero-image-section .kuladu-speech-bubble {
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
}

/* Tablet/Desktop: Normal layout with padding */
@media (min-width: 768px) and (max-width: 1023px) {
	.event-hero-image-wrapper {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 var(--space-6);
	}
}

/* Desktop: Normal layout */
@media (min-width: 1024px) {
	.event-hero-image-wrapper {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0;
	}
}

/* ==========================================================================
   Header Image Heights - SONDERFALL Toggle OFF
   NUR wenn Toggle OFF (Rohwert: false): Begrenzte Höhe
   Sonst (Toggle ON oder kein Body-Class): Natürliche Höhe (Original)
   ========================================================================== */

/* SONDERFALL: Toggle OFF (Rohwert: false) - Begrenzte Höhe */

/* Mobile: Auch bei Toggle OFF natürliche Höhe */
@media (max-width: 767px) {
	.single-events .event-hero-image-section .kuladu-speech-bubble {
		height: auto !important;
	}

	.single-events .event-hero-image-section .kuladu-speech-bubble img {
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* Tablet+: NUR wenn KEIN event-header-auto-height = Toggle OFF = Begrenzte Höhe */
@media (min-width: 768px) {
	body:not(.event-header-auto-height).single-events .event-hero-image-section .kuladu-speech-bubble,
	body:not(.event-header-auto-height) .single-events .event-hero-image-section .kuladu-speech-bubble {
		height: 360px !important;
	}

	body:not(.event-header-auto-height).single-events .event-hero-image-section .kuladu-speech-bubble img,
	body:not(.event-header-auto-height) .single-events .event-hero-image-section .kuladu-speech-bubble img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* Desktop: Toggle OFF = 560px */
@media (min-width: 1024px) {
	body:not(.event-header-auto-height).single-events .event-hero-image-section .kuladu-speech-bubble,
	body:not(.event-header-auto-height) .single-events .event-hero-image-section .kuladu-speech-bubble {
		height: 560px !important;
	}
}

/* Large Desktop: Toggle OFF = 640px */
@media (min-width: 1440px) {
	body:not(.event-header-auto-height).single-events .event-hero-image-section .kuladu-speech-bubble,
	body:not(.event-header-auto-height) .single-events .event-hero-image-section .kuladu-speech-bubble {
		height: 640px !important;
	}
}

/* ==========================================================================
   CTA Section Styling
   ========================================================================== */

.event-cta-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-4) var(--space-2) var(--space-4) var(--space-1);
	border-top: 1px solid var(--color-gray-200);
	border-bottom: 1px solid var(--color-gray-200);
	width: 100%;
}

.event-cta-content > * {
	margin: 0 !important;
}

.event-cta__left {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: flex-start;
}

.event-cta__right {
	flex-shrink: 0;
}

/* Mobile: Stack vertically */
@media (max-width: 639px) {
	.event-cta-content {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
	}

	.event-cta__left {
		align-items: flex-start;
	}

	.event-cta__right {
		width: 100%;
	}

	.event-cta__right .kuladu-button {
		width: 100%;
	}
}

/* Badge + Hint inline layout */
.event-cta__badge-hint {
	display: flex;
	align-items: center;
	gap: var(--space-2); /* 8px between badge and hint */
	flex-wrap: wrap; /* Umbruch wenn nicht genug Platz */
}

/* CTA hint styling (Typography via Utility-Classes) */
.event-cta-hint {
	color: var(--color-black);
	margin: 0;
}

/* External link icon in button */
.kuladu-button .external-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: var(--space-1);
}

/* ==========================================================================
   Event Details Section
   ========================================================================== */

.event-details {
	background: var(--color-white);
}

/* Event Details - Nutzt native <p> Styles (kein custom Styling, erbt Farbe) */
.event-details-content {
	/* Alle Styles von globalem <p> geerbt */
}

/* ==========================================================================
   Bottom CTA Section
   ========================================================================== */

.event-cta-bottom {
	background: var(--color-primary-900);
}