/* Single event layout (The Events Calendar override). Loaded only on single
 * event pages. Replaces the old Neve grid + Material Icons webfont with the
 * theme's own two-column layout and self-hosted inline SVG icons. */

.pf-event {
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.5rem) 40px clamp(3rem, 6vw, 5rem);
}

/* The back link itself is fixed-positioned (via tribe-events.css), so the
 * wrapper must not reserve vertical space — otherwise the content starts lower
 * than on live. */
.pf-event__back {
	margin: 0;
}

.pf-event__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--primary-green);
}

.pf-event__back a:hover {
	color: var(--wp--preset--color--dark-green);
}

.pf-event__layout {
	display: grid;
	grid-template-columns: 330px 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

/* Meta sidebar on the left, main content on the right. */
.pf-event__sidebar {
	order: -1;
	position: sticky;
	top: calc(var(--pf-header-height, 120px) + 1rem);
}

.pf-event__main {
	min-width: 0;
}

@media (max-width: 900px) {
	.pf-event__layout {
		grid-template-columns: 1fr;
	}

	.pf-event__sidebar {
		position: static;
	}
}

/* --- Main content --- */
.pf-event__article .tribe-events-event-image img,
.pf-event__article .wp-post-image {
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin-bottom: 1.75rem;
}

.pf-event .tribe-events-single-event-title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
	line-height: 1.05;
	color: var(--wp--preset--color--dark-green);
}

.pf-event .tribe-events-schedule {
	margin: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--primary-green);
	font-weight: 500;
}

.pf-event .tribe-events-cost {
	display: inline-block;
	margin-top: 0.25rem;
}

.pf-event .tribe-events-event-categories-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.pf-event .tribe-events-event-categories {
	display: inline-block;
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-green);
}

.pf-event .tribe-events-single-event-description {
	line-height: 1.7;
}

.pf-event .tribe-events-single-event-description > * + * {
	margin-top: 1rem;
}

/* --- Sidebar / meta --- */
.pf-event__sidebar .tribe-events-ticket-container {
	margin-bottom: 1.5rem;
}

.pf-event__sidebar .tribe-events-ticket-container .pf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	font-size: 1rem;
}

.pf-event__sidebar .tribe-events-ticket-container .pf-icon {
	font-size: 1.25rem;
}

.pf-event .tribe-events-single-section {
	background-color: var(--wp--preset--color--white);
	border-radius: 20px;
	padding: 1.75rem;
	margin-bottom: 1.5rem;
}

/* Secondary meta section (e.g. the "Ab 18 Jahre" admission notice) — yellow
 * highlight box, centered, like the live site. */
.pf-event .tribe-events-single-section.secondary {
	background-color: var(--wp--preset--color--yellow);
	padding: 0.7rem 1.5rem;
	text-align: center;
	font-weight: 700;
	color: var(--wp--preset--color--dark-green);
}

.pf-event .tribe-events-single-section-title {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--body); /* Geist Mono, like live */
	font-weight: 700;
	font-size: 22px;
	color: var(--wp--preset--color--dark-green);
}

.pf-event .tribe-events-meta-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pf-event .tribe-events-meta-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 0; /* override the legacy 20px; the list uses gap instead */
}

/* Override the legacy 140px icon column from tribe-events.css so the icon only
 * takes its own width and the text can fill the rest. */
.pf-event .tribe-events-meta-label {
	display: inline-flex;
	flex-shrink: 0;
	width: auto;
	padding: 0;
	color: var(--wp--preset--color--orange-cta);
	font-size: 25px;
	line-height: 1.3;
}

/* Override the legacy padding-left:35px / padding-top:6px so the value sits
 * right next to the icon and uses the full remaining width. */
.pf-event .tribe-events-event-meta .tribe-events-meta-item .tribe-events-meta-value {
	flex: 1;
	min-width: 0;
	padding: 0;
	line-height: 1.5;
}

.pf-event .tribe-events-meta-value a {
	word-break: break-word;
}

.pf-event .custom-venue-wrapper .tribe-block__venue {
	flex: 1;
	min-width: 0;
}

.pf-event .custom-venue-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

/* --- Prev / next navigation --- */
.pf-event__nav {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--wp--preset--color--cream-alt);
}

.pf-event__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
}

.pf-event__nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	color: var(--wp--preset--color--primary-green);
	font-weight: 500;
}

.pf-event__nav a:hover {
	color: var(--wp--preset--color--dark-green);
}

.pf-event__nav .tribe-events-nav-next {
	margin-left: auto;
	text-align: right;
}

/* --- The Events Calendar "before/after HTML" (the "Puffies Termine" intro and
 * the long SEO outro) belongs on the events archive, not on a single event.
 * Hide it here to avoid a duplicate H1 and the stray text block (as on live). */
body.single-tribe_events .tribe-events-before-html,
body.single-tribe_events .tribe-events-after-html {
	display: none !important;
}

/* The legacy tribe-events.css caps #tribe-events-pg-template at 1100px, which
 * also clips the full-width related band. Remove that cap on single events and
 * let the .pf-event layout (max-width 1200) control the content width, so the
 * related band can span edge to edge. */
body.single-tribe_events #tribe-events-pg-template {
	max-width: none !important;
	margin: 0 !important;
}

/* --- Related events band. The theme copy of tribe-events.css scopes this to
 * .neve-main (which we no longer use), so restyle it here: a leaf-zigzag khaki
 * band, matching the live site. clip-path values taken over from neve-child. */
.related-events-section {
	background: #e7e1b0;
	margin-top: 3rem;
	/* Pull the band out to the viewport edges (cancels the surrounding 20px inset)
	 * so the beige background spans the full width. */
	margin-left: -20px;
	margin-right: -20px;
	/* Extra bottom padding so the khaki band extends behind the footer's zigzag
	 * teeth — combined with the footer overlap below, no white/cream shows in the
	 * notches (the band flows into the footer, as on live). */
	padding: clamp(2.5rem, 5vw, 4rem) 0 220px;
	color: var(--wp--preset--color--dark-green);
	/* Zigzag on the top edge only (footer-style teeth); the site footer's own
	 * top zigzag provides the transition at the bottom. */
	clip-path: polygon(0% 100%, 100% 100%, 100.05% 3.62%, 93.39% 0%, 93.47% 3.18%, 88.96% 0%, 89.01% 4.74%, 83.96% 0%, 84.06% 4.77%, 77.97% 0%, 78.02% 4.09%, 72.03% 0%, 72% 4.25%, 64.95% 0%, 65% 5.75%, 55.94% 0%, 55.99% 5.5%, 48.96% 0.81%, 49% 6.25%, 39.01% 0%, 39.01% 4.5%, 30.99% 0%, 31% 4.5%, 25.94% 0.26%, 26% 5.5%, 17.86% 0%, 17.92% 5.16%, 11.88% 0%, 11.95% 5.43%, 4.94% 0%, 4.9% 5.34%, 0% 0%);
}

/* Pull the footer up so it overlaps the band's bottom padding: the footer's
 * zigzag teeth then reveal the khaki band behind them, never white. */
body.single-tribe_events .pf-site-footer {
	margin-top: -180px;
	position: relative;
}

/* No horizontal spacing around the related cards, and no list bullets/indent. */
.related-events-section .container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 0;
}

/* Higher specificity than the legacy `.tribe-events-content ul { list-style:
 * circle; margin-left: 40px }`, which was adding bullets + a left indent. */
.related-events-section ul.tribe-related-events,
.related-events-section ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.related-events-section ul.tribe-related-events li,
.related-events-section li {
	list-style: none;
	margin-left: 0;
}

.related-events-section img {
	border-radius: 10px;
}

@media (max-width: 1300px) {
	.related-events-section {
		clip-path: polygon(0% 100%, 100% 100%, 100.05% 3.62%, 88.96% 0%, 89.01% 4.74%, 77.97% 0%, 78.02% 4.09%, 64.95% 0%, 65% 5.75%, 48.96% 0.81%, 49% 6.25%, 30.99% 0%, 31% 4.5%, 20.24% 0%, 20.11% 5.94%, 9.17% 0%, 9% 5.94%, 0% 0%);
	}
}