/* Puffafish Events – frontend styles.
   Deliberately self-contained: the shared pieces (meta list, cards, pills) are
   repeated here rather than borrowed from pf-location.css, so the events plugin
   also renders correctly when the location finder is switched off.
   Token-friendly throughout; the theme can override. */

/* ---------------------------------------------------------------------------
 * Single event — mirrors the single-location layout so both detail pages read
 * as one family. This file is the sole authority for the page: the theme's
 * assets/css/event-single.css is TEC-only since 2026-08-11, because loading both
 * meant it won on specificity and put the map in a 1.75rem frame the identical
 * location map did not have. The `tribe-events-*` class names on the markup are
 * kept for the legacy overrides and can go with TEC.
 * ------------------------------------------------------------------------ */
.pf-event--single {
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp( 3rem, 5vw, 4.5rem ) 40px clamp( 3rem, 6vw, 5rem );
}
.pf-event__back { margin: 0; }
.pf-event__back a {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var( --wp--preset--font-family--body );
	font-weight: 500; text-decoration: none;
	color: var( --wp--preset--color--primary-green, #018940 );
}
/* Only park the back link in the margin once there is actually a margin to park
   it in: the layout is 1200px wide, so the viewport has to be wide enough for
   the whole label to clear it. 1400px leaves 100px a side, which the label
   overhangs — and now that the ticket button leads the sidebar, it overhung
   straight across it. */
@media ( min-width: 1560px ) {
	.pf-event__back a {
		position: fixed;
		left: clamp( 10px, 2vw, 30px );
		top: calc( var( --pf-header-height, 120px ) + 5rem );
		z-index: 20;
	}
}

.pf-event__layout {
	display: grid;
	grid-template-columns: 330px 1fr;
	gap: clamp( 2rem, 4vw, 3.5rem );
	align-items: start;
}
.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; }
	/* Stacked, the sidebar goes below: reading the map before the event name
	   and its description is the wrong way round. */
	.pf-event__sidebar { position: static; order: 1; }
	.pf-event__main { order: 0; }
	.pf-event--single { padding-inline: var( --pf-gutter, 27px ); }
}

/* Hero image: a 16:9 frame like a single location's, but the image is cropped to
   fill it rather than contained. Unlike locations — where the picture is often a
   logo and trimming it would cut off the name — event artwork is photography and
   banners, where a crop loses nothing that matters. */
.pf-event__image:has( img ) {
	aspect-ratio: 16 / 9;
	/* Generous gap to the headline: it used to sit flush against the image. */
	margin-bottom: 1.75rem;
	border-radius: 10px;
	overflow: hidden;
}
.pf-event__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	margin-bottom: 0;
	display: block;
}
.pf-event__title { margin: 0 0 1rem; }
.pf-event__schedule {
	margin: .25rem 0 1rem;
	font-family: var( --wp--preset--font-family--body );
	font-weight: 600;
	color: var( --wp--preset--color--primary-green, #018940 );
}

/* Sidebar cards */
.pf-ev-section { background-color: var( --wp--preset--color--white, #fff ); border-radius: 10px; padding: 1.75rem; margin-bottom: 1.5rem; }
.pf-ev-section--map { padding: .5rem; }
.pf-ev-section.secondary {
	background-color: var( --wp--preset--color--yellow, #fce849 );
	padding: .7rem 1.5rem; text-align: center; font-weight: 700;
	color: var( --wp--preset--color--dark-green, #183028 );
}
.pf-ev-notice--canceled { background-color: var( --wp--preset--color--orange-cta, #f9752d ); color: #fff; }
.pf-ev-section-title {
	margin: 0 0 1.25rem;
	font-family: var( --wp--preset--font-family--body );
	font-weight: 700; font-size: 22px;
	color: var( --wp--preset--color--dark-green, #183028 );
}
/* Ticket call to action: the button itself is the element, sitting directly in
   the sidebar with no panel behind it. Dark green so it reads as the primary
   action of the page rather than as one more green link. */
.pf-ev-cta { margin-bottom: 1.5rem; }
.pf-button--ticket {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	font-size: 1rem;
	background-color: var( --wp--preset--color--dark-green, #183028 );
	color: var( --wp--preset--color--cream, #fffde9 );
}
.pf-button--ticket:hover { background-color: var( --wp--preset--color--primary-green, #018940 ); }
/* The icon carries a 2px stroke on a 24px grid, so it needs a little more size
   than the cap height to read as clearly as the label beside it. */
.pf-button--ticket .pf-ev-icon { width: 1.4em; height: 1.4em; }

/* Meta list */
.pf-meta-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.pf-meta-item { display: flex; align-items: flex-start; gap: .6rem; }
.pf-meta-label { display: inline-flex; flex-shrink: 0; color: var( --wp--preset--color--orange-cta, #f9752d ); font-size: 25px; line-height: 1.3; }
.pf-meta-label:empty { display: none; }
/* Own outline icon class so the theme's `.pf-icon { fill: currentColor }` does
 * not fill our stroke-only icons. */
.pf-ev-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; fill: none; stroke: currentColor; }
.pf-meta-value { flex: 1; min-width: 0; line-height: 1.5; display: flex; flex-direction: column; }
.pf-meta-caption { font-weight: 700; color: var( --wp--preset--color--dark-green, #183028 ); }
.pf-address { display: flex; flex-direction: column; }
.pf-address__name { font-weight: 600; }
.pf-map-link { display: block; margin-top: .4rem; }
.pf-ev-details-extra { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba( 24, 48, 40, .12 ); }

/* Organizer: one icon and one heading, every way of getting in touch listed
   beneath it without repeating a caption per line. */
.pf-ev-organizer { display: flex; align-items: flex-start; gap: .6rem; }
.pf-ev-organizer__body { flex: 1; min-width: 0; }
.pf-ev-organizer__name {
	display: block;
	font-weight: 700;
	color: var( --wp--preset--color--dark-green, #183028 );
	margin-bottom: .2rem;
}
.pf-ev-organizer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.pf-ev-organizer__contact a { word-break: break-word; }

.pf-map { width: 100%; min-height: 260px; border-radius: 10px; overflow: hidden; }
.pf-map--overview { min-height: 60vh; }
.pf-map--single { min-height: 240px; }
.pf-marker svg { display: block; }

/* Category pills — same treatment as on a single location, so the two entry
   types read as one product: pale green field, green type. */
.pf-event__cats { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.pf-pill {
	display: inline-block; padding: .15rem .7rem; border-radius: 999px;
	background: rgba( 1, 137, 64, .12 );
	color: var( --wp--preset--color--primary-green, #018940 );
	font-size: .8rem; text-decoration: none;
}
.pf-pill:hover { background: rgba( 1, 137, 64, .2 ); }

.pf-event__nav ul { list-style: none; display: flex; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0; padding: 0; }
.pf-event__nav a { text-decoration: none; color: var( --wp--preset--color--primary-green, #018940 ); }

/* ---------------------------------------------------------------------------
 * Overview
 * ------------------------------------------------------------------------ */
.pf-events { max-width: 1200px; margin-inline: auto; padding-inline: 40px; }
@media ( max-width: 900px ) { .pf-events { padding-inline: var( --pf-gutter, 27px ); } }

/* Editorial bands below the map hero. Their top spacing comes from the hero-gap
   rule further down, so only the bottom is set here — except when a band opens
   the page on its own (a landing page without a hero), where it has to keep
   clear of the header's zigzag edge itself. */
.pf-events-editorial { padding-block: 0 clamp( 2rem, 4vw, 3.5rem ); }
.pf-entry__content > .pf-events-editorial:first-child,
.pf-entry__content > :first-child > .pf-events-editorial:first-child {
	padding-top: clamp( 2rem, 4vw, 3.5rem );
}

.pf-events__intro { margin-bottom: 1.5rem; }
.pf-events__intro h2 { margin: 0 0 .5rem; }
.pf-events__intro p { margin: 0; max-width: 70ch; }

.pf-events__toolbar {
	display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
	margin-bottom: 2rem;
}
.pf-events__toolbar input[type="search"],
.pf-events__toolbar select {
	border: 3px solid var( --wp--preset--color--dark-green, #183028 );
	border-radius: 10px; padding: .5rem .8rem;
	font-family: var( --wp--preset--font-family--body ); font-size: 16px;
	background-color: #fff;
}
.pf-events__toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.pf-events__filter {
	border: 0; border-radius: 999px; cursor: pointer;
	padding: .6rem 1.4rem;
	background-color: var( --wp--preset--color--primary-green, #018940 ); color: #fff;
	font-family: var( --wp--preset--font-family--body ); font-weight: 600;
}
.pf-events__filter--clear { background-color: var( --wp--preset--color--orange-cta, #f9752d ); }
.pf-events__views { display: inline-flex; gap: .25rem; margin-left: auto; }

/* On a phone the four controls stack into four rows and push the first event
   below the fold. Two columns keep the whole filter block under three rows. */
@media ( max-width: 600px ) {
	.pf-events__toolbar { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
	.pf-events__toolbar input[type="search"] { grid-column: 1 / -1; }
	.pf-events__views { grid-column: 1 / -1; margin-left: 0; }
	.pf-view-btn { flex: 1; }
}
.pf-view-btn {
	border: 0; cursor: pointer; padding: .6rem 1.1rem; border-radius: 999px;
	background-color: var( --wp--preset--color--cream, #fffde9 );
	color: var( --wp--preset--color--dark-green, #183028 );
	font-family: var( --wp--preset--font-family--body );
}
.pf-view-btn.is-active { background-color: var( --wp--preset--color--dark-green, #183028 ); color: #fff; }

.pf-events__month { margin-bottom: 2.5rem; }
.pf-events__month-title {
	margin: 0 0 1rem; font-size: 20px;
	font-family: var( --wp--preset--font-family--body ); font-weight: 700;
	color: var( --wp--preset--color--dark-green, #183028 );
}
.pf-events__featured { margin-bottom: 2.5rem; }
.pf-events__featured h3 { margin: 0 0 1rem; font-size: 18px; }
.pf-events__empty { padding: 2rem 0; }

/* ---------------------------------------------------------------------------
 * Summary view — one compact row per event
 * ------------------------------------------------------------------------ */

.pf-events-summary { list-style: none; margin: 0; padding: 0; }
.pf-events-summary__row {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	padding: .6rem 0;
	border-bottom: 1px solid rgba( 24, 48, 40, .12 );
}
.pf-events-summary__row:last-child { border-bottom: 0; }
.pf-events-summary__date {
	flex: 0 0 auto;
	min-width: 11rem;
	font-size: .8rem;
	font-weight: 600;
	color: var( --wp--preset--color--primary-green, #018940 );
}
.pf-events-summary__body { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline; }
.pf-events-summary__title {
	font-weight: 700;
	text-decoration: none;
	color: var( --wp--preset--color--dark-green, #183028 );
}
.pf-events-summary__title:hover { text-decoration: underline; }
.pf-events-summary__place { font-size: .85rem; opacity: .7; }

@media ( max-width: 600px ) {
	.pf-events-summary__row { flex-direction: column; gap: .15rem; }
	.pf-events-summary__date { min-width: 0; }
}

/* ---------------------------------------------------------------------------
 * Month view
 * ------------------------------------------------------------------------ */

.pf-month__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: .75rem;
}
.pf-month__label { font-weight: 700; font-size: 1.05rem; min-width: 11rem; text-align: center; }
.pf-month__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	text-decoration: none;
	background: rgba( 1, 137, 64, .1 );
	color: var( --wp--preset--color--primary-green, #018940 );
}
.pf-month__step:hover { background: var( --wp--preset--color--primary-green, #018940 ); color: #fff; }

.pf-month__grid {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 2px;
	background: rgba( 24, 48, 40, .12 );
	border: 1px solid rgba( 24, 48, 40, .12 );
	border-radius: 10px;
	overflow: hidden;
}
.pf-month__dow {
	background: var( --wp--preset--color--dark-green, #183028 );
	color: #fff;
	font-size: .72rem;
	font-weight: 600;
	text-align: center;
	padding: .35rem .2rem;
}
.pf-month__cell {
	background: #fff;
	min-height: 5.5rem;
	padding: .3rem;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.pf-month__cell--empty { background: rgba( 255, 255, 255, .55 ); }
.pf-month__cell.is-today { background: rgba( 252, 232, 73, .35 ); }
.pf-month__daynum { font-size: .75rem; font-weight: 600; opacity: .6; }
.pf-month__cell.is-today .pf-month__daynum { opacity: 1; }
.pf-month__event {
	display: block;
	font-size: .7rem;
	line-height: 1.2;
	padding: .15rem .3rem;
	border-radius: 5px;
	background: rgba( 1, 137, 64, .12 );
	color: var( --wp--preset--color--dark-green, #183028 );
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pf-month__event:hover { background: var( --wp--preset--color--primary-green, #018940 ); color: #fff; }
.pf-month__more { font-size: .65rem; opacity: .65; padding-left: .3rem; }

/* Narrow screens: a seven-column grid stops being readable, so the cells become
   a scrollable strip rather than being crushed. */
@media ( max-width: 700px ) {
	.pf-month__grid { font-size: .9em; }
	.pf-month__cell { min-height: 4.2rem; }
	.pf-month__event { font-size: .62rem; }
}

/* ---------------------------------------------------------------------------
 * Search type-ahead
 * ------------------------------------------------------------------------ */

.pf-suggest__wrap { position: relative; display: block; }
.pf-suggest {
	position: absolute;
	z-index: 600;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	min-width: 240px;
	max-height: 340px;
	overflow-y: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba( 0, 0, 0, .18 );
	padding: .25rem;
}
.pf-suggest__item {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	width: 100%;
	padding: .45rem .6rem;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.pf-suggest__item.is-active,
.pf-suggest__item:hover { background: rgba( 1, 137, 64, .1 ); }
.pf-suggest__label {
	font-weight: 600;
	font-size: .9rem;
	line-height: 1.25;
	color: var( --wp--preset--color--dark-green, #183028 );
}
.pf-suggest__label mark {
	background: rgba( 252, 232, 73, .7 );
	color: inherit;
	padding: 0 .1em;
	border-radius: 3px;
}
.pf-suggest__meta { font-size: .75rem; opacity: .7; }
/* Filter shortcuts read differently from the events themselves. */
.pf-suggest__item--category .pf-suggest__label,
.pf-suggest__item--region .pf-suggest__label {
	color: var( --wp--preset--color--primary-green, #018940 );
}
.pf-suggest__empty { padding: .6rem; font-size: .85rem; opacity: .7; }

/* ---------------------------------------------------------------------------
 * Map-first layout (layout="mapfull") — same shape as the location finder's,
 * so the two directories read as one product. Own class names throughout:
 * sharing pf-location's would couple the two stylesheets to each other.
 * ------------------------------------------------------------------------ */

/* Full-bleed hero: break out of the content container to the full viewport. */
.pf-events--mapfull {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 0;
	padding-inline: 0;
}
/* 50px gap to the content below. Applied as padding on the next block, because
   block flow resets the hero's own margin-block-end to 0. */
.pf-entry__content > :has( > .pf-events--mapfull ) + * { padding-top: 50px; }
.pf-entry__content > :has( > .pf-events--mapfull ) + * > :first-child { margin-top: 0; }
/* Opening the page, it tucks up under the header's zigzag teeth (the header
   pulls following content up by ~35px). Covers both a direct child and the
   usual case of the shortcode sitting inside a full-width group. */
.pf-entry--flush .pf-entry__content > .pf-events--mapfull:first-child,
.pf-entry--flush .pf-entry__content > :first-child > .pf-events--mapfull:first-child,
.pf-entry__content > .pf-events--mapfull:first-child {
	margin-top: -35px;
}
.pf-page > .pf-entry__content > .pf-events--mapfull:first-child { margin-top: calc( -2.5rem - 35px ); }

.pf-ev-mapfull {
	position: relative;
	/* Ends a little before the fold, so the headline below stays partly visible. */
	height: min( 68vh, 620px );
	min-height: 440px;
}
.pf-ev-mapfull .pf-map--full {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	min-height: 0;
}

/* Floating filter — a narrow vertical stack near the top-left, over the map. */
.pf-events__toolbar--float {
	position: absolute;
	z-index: 500;
	top: calc( 1rem + 30px );
	left: 1rem;
	right: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .5rem;
	width: auto;
	max-width: none;
	margin: 0;
	padding: .6rem;
	background: rgba( 255, 255, 255, .93 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, .15 );
}
.pf-events__toolbar--float input[type="search"],
.pf-events__toolbar--float select,
.pf-events__toolbar--float button {
	box-sizing: border-box;
	width: 230px;
	max-width: 60vw;
	/* The row layout gives the search field `flex: 1 1 220px`. Stacked, the main
	   axis is vertical, so that basis would become a 220px-tall input. */
	flex: 0 0 auto;
}

/* Right results rail — full height of the hero, scrollable. */
.pf-ev-mapfull__panel {
	position: absolute;
	z-index: 500;
	top: calc( 1rem + 30px );
	right: 1rem;
	bottom: 1rem;
	width: min( 360px, 40vw );
	display: flex;
	flex-direction: column;
	background: rgba( 255, 255, 255, .97 );
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, .18 );
	overflow: hidden;
}
.pf-ev-mapfull__head {
	flex: 0 0 auto;
	padding: .75rem 1rem;
	border-bottom: 1px solid rgba( 0, 0, 0, .08 );
	font-weight: 700;
	color: var( --wp--preset--color--dark-green, #183028 );
}
.pf-ev-mapfull__list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: .5rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

/* Result row: thumbnail left, text right, action buttons on hover. */
.pf-ev-result {
	position: relative;
	display: flex;
	gap: .7rem;
	padding: .5rem;
	border-radius: 10px;
	color: inherit;
	transition: background .15s ease;
}
.pf-ev-result:hover,
.pf-ev-result.is-active { background: rgba( 1, 137, 64, .08 ); }
.pf-ev-result__actions {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .4rem;
	border-radius: 10px;
	background: rgba( 255, 255, 255, .94 );
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.pf-ev-result:hover .pf-ev-result__actions,
.pf-ev-result:has( .pf-ev-result__btn:focus-visible ) .pf-ev-result__actions { opacity: 1; pointer-events: auto; }
.pf-ev-result__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	max-width: 100%;
	padding: .35rem .8rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.pf-ev-result__btn--go { background: var( --wp--preset--color--primary-green, #018940 ); color: #fff; }
.pf-ev-result__btn--map { background: var( --wp--preset--color--dark-green, #183028 ); color: #fff; }
.pf-ev-result__img { flex: 0 0 64px; }
.pf-ev-result__img img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.pf-ev-result__img:empty { width: 64px; height: 64px; border-radius: 10px; background: rgba( 0, 0, 0, .06 ); }
.pf-ev-result__body { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.pf-ev-result__date {
	font-size: .75rem; font-weight: 600;
	color: var( --wp--preset--color--primary-green, #018940 );
}
.pf-ev-result__title { font-weight: 700; line-height: 1.2; color: var( --wp--preset--color--dark-green, #183028 ); }
.pf-ev-result__addr { font-size: .8rem; opacity: .7; }
.pf-ev-result__text {
	font-size: .82rem; line-height: 1.4; opacity: .85;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-ev-result__details { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.pf-ev-chip {
	font-size: .7rem; padding: .1rem .5rem; border-radius: 999px;
	background: rgba( 1, 137, 64, .1 ); color: var( --wp--preset--color--primary-green, #018940 );
}

/* Stacked below the breakpoint: map, then filter, then the list — the rail
   floating over a short map would cover most of it. */
@media ( max-width: 860px ) {
	.pf-ev-mapfull { height: auto; min-height: 0; }
	.pf-ev-mapfull .pf-map--full { position: relative; inset: auto; height: 52vh; }
	.pf-events__toolbar--float {
		position: relative; inset: auto; right: auto; max-width: none; margin: .75rem;
	}
	.pf-events__toolbar--float input[type="search"],
	.pf-events__toolbar--float select,
	.pf-events__toolbar--float button { width: 100%; max-width: none; }
	.pf-ev-mapfull__panel {
		position: relative; inset: auto; width: auto; margin: 0 .75rem .75rem;
		max-height: 60vh; box-shadow: none; border: 1px solid rgba( 0, 0, 0, .1 );
	}
}

/* Keep a full-bleed hero from producing a horizontal scrollbar. */
body:has( .pf-events--mapfull ) { overflow-x: clip; }

/* ---------------------------------------------------------------------------
 * Cards (shared by overview, featured, related and teaser)
 * ------------------------------------------------------------------------ */
.pf-cards { display: grid; grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ); gap: 1.5rem; }
.pf-card {
	display: flex; flex-direction: column; text-decoration: none;
	background-color: var( --wp--preset--color--white, #fff );
	border-radius: 10px; overflow: hidden;
	color: var( --wp--preset--color--dark-green, #183028 );
}
.pf-card:hover { transform: translateY( -2px ); transition: transform .15s ease; }
.pf-card__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background-color: var( --wp--preset--color--cream, #fffde9 ); }
.pf-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-card__body { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.5rem 1.5rem; }
.pf-card__date {
	font-family: var( --wp--preset--font-family--body ); font-size: 14px; font-weight: 600;
	color: var( --wp--preset--color--primary-green, #018940 );
}
.pf-card__title { font-weight: 700; font-size: 18px; line-height: 1.3; }
.pf-card__meta { font-size: 15px; opacity: .85; }
.pf-badge {
	align-self: flex-start; margin-top: .4rem;
	padding: .2rem .7rem; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.pf-badge--canceled { background-color: var( --wp--preset--color--orange-cta, #f9752d ); color: #fff; }
.pf-badge--soldout { background-color: var( --wp--preset--color--yellow, #fce849 ); color: var( --wp--preset--color--dark-green, #183028 ); }

/* Related band + homepage teaser */
.pf-related { padding: clamp( 2.5rem, 5vw, 4rem ) 0; background-color: var( --wp--preset--color--cream, #fffde9 ); }
.pf-related__inner,
.pf-ev-teaser__inner { max-width: 1200px; margin-inline: auto; padding-inline: 40px; }
@media ( max-width: 900px ) {
	.pf-related__inner,
	.pf-ev-teaser__inner { padding-inline: var( --pf-gutter, 27px ); }
}
.pf-ev-teaser { padding: clamp( 2rem, 4vw, 3.5rem ) 0; }
.pf-ev-teaser__title { margin: 0 0 1.5rem; }
.pf-ev-teaser__cta { margin-top: 2rem; text-align: center; }

/* ---------------------------------------------------------------------------
 * Submission form additions (pf-core ships the base styles)
 * ------------------------------------------------------------------------ */
.pf-submit__row { display: flex; gap: 1rem; flex-wrap: wrap; }
.pf-submit__row > div { flex: 1; min-width: 160px; }
.pf-submit__error {
	padding: .8rem 1.2rem; border-radius: 10px; margin-bottom: 1.5rem;
	background-color: var( --wp--preset--color--orange-cta, #f9752d ); color: #fff;
}
.pf-submit__hint { font-size: 14px; opacity: .8; margin-top: .25rem; }