@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500&display=swap');

/* ============================================================
   Ponca Community Events — frontend styles
   Layout lives here; editor-controlled tokens arrive as --pce-*
   custom properties set on the .ponca-ce wrapper.
   ============================================================ */

.ponca-ce {
	position: relative;
	box-sizing: border-box;
	padding: var(--pce-py, 128px) var(--pce-px, 48px);
	overflow-x: clip; /* don't let the full-width footer pattern create a horizontal scrollbar */
}

.ponca-ce *,
.ponca-ce *::before,
.ponca-ce *::after {
	box-sizing: border-box;
}

.ponca-ce__container {
	width: 100%;
	max-width: var(--pce-container-maxw, 1600px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(30px, 4vw, 60px);
}

/* ---------- Header ---------- */
.ponca-ce__eyebrow {
	margin: 0;
	color: var(--pce-eyebrow-color, #DEB209);
	font-family: var(--pce-eyebrow-font-family);
	font-size: var(--pce-eyebrow-font-size);
	line-height: var(--pce-eyebrow-line-height);
	font-weight: var(--pce-eyebrow-font-weight);
	font-style: var(--pce-eyebrow-font-style);
	letter-spacing: var(--pce-eyebrow-letter-spacing);
	text-transform: var(--pce-eyebrow-text-transform);
}
.ponca-ce__title {
	margin: var(--pce-title-mt, 14px) 0 0;
	color: var(--pce-title-color, #0D0F0E);
	font-family: var(--pce-title-font-family);
	font-size: var(--pce-title-font-size);
	line-height: var(--pce-title-line-height);
	font-weight: var(--pce-title-font-weight);
	font-style: var(--pce-title-font-style);
	letter-spacing: var(--pce-title-letter-spacing);
	text-transform: var(--pce-title-text-transform);
}
.ponca-ce__title-part-2 {
	color: var(--pce-title-accent-color, #A78607);
	font-style: var(--pce-title-accent-style, normal);
}
.ponca-ce__taxonomy-description {
	margin-top: 20px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--text-primary);
}
.ponca-ce__taxonomy-description p,
.ponca-ce__taxonomy-description img,
.ponca-ce__taxonomy-description iframe {
	margin-top: 30px;
}
.ponca-ce__taxonomy-description p:first-child {
	margin-top: 0;
}
.ponca-ce__taxonomy-description ul,
.ponca-ce__taxonomy-description ol {
	margin: 30px 0px 30px 30px;
}
.ponca-ce__taxonomy-description ul li {
	list-style: disc !important;
}
.ponca-ce__taxonomy-description ol li {
	list-style: decimal !important;
}
.ponca-ce__taxonomy-description a {
	color: var(--color-yellow-300);
}

/* ---------- Filter row ---------- */
.ponca-ce__filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pce-filter-gap, 16px);
	align-items: stretch;
}

/* ---------- Search ---------- */
.ponca-ce__search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 280px;
	min-width: 240px;
	background: var(--pce-search-bg, #FBFBFB);
	border: 1px solid var(--pce-search-border, #B4B4B4);
	border-radius: var(--pce-search-radius, 6px);
	padding: var(--pce-search-padding, 16px);
	height: var(--pce-search-height, 58px);
}
.ponca-ce__search-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--pce-search-icon-color, #A7A7A7);
}
.ponca-ce__search-input {
	flex: 1 1 auto;
	border: none;
	background: transparent;
	outline: none;
	color: var(--pce-search-text-color, #474747);
	font-family: var(--pce-search-font-family);
	font-size: var(--pce-search-font-size);
	line-height: var(--pce-search-line-height);
	font-weight: var(--pce-search-font-weight);
	font-style: var(--pce-search-font-style);
	letter-spacing: var(--pce-search-letter-spacing);
	text-transform: var(--pce-search-text-transform);
}
.ponca-ce__search-input::placeholder {
	color: var(--pce-placeholder-color, #A7A7A7);
	opacity: 1;
}
.ponca-ce__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* ---------- Dropdown ---------- */
.ponca-ce__dropdown-trigger {
	margin: 0;
	box-sizing: border-box;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background: var(--pce-dd-bg, #FBFBFB);
	border: 1px solid var(--pce-dd-border, #B4B4B4);
	border-radius: var(--pce-dd-radius, 6px);
	padding: var(--pce-dd-padding, 16px);
	min-width: var(--pce-dd-minw, 267px);
	height: var(--pce-dd-height, 58px);
	color: var(--pce-dd-color, #474747);
	font-family: var(--pce-dropdown-font-family);
	font-size: var(--pce-dropdown-font-size);
	line-height: var(--pce-dropdown-line-height);
	font-weight: var(--pce-dropdown-font-weight);
	font-style: var(--pce-dropdown-font-style);
	letter-spacing: var(--pce-dropdown-letter-spacing);
	text-transform: var(--pce-dropdown-text-transform);
}
.ponca-ce__dropdown-trigger:focus-visible {
	outline: 2px solid #A78607;
	outline-offset: 2px;
}
.ponca-ce__dropdown-arrow {
	color: var(--pce-dd-arrow-color, #A7A7A7);
}

/* Dropdown menu list reset (positioning is set by JS) */
.ponca-ce__dropdown-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ponca-ce__dropdown-menu[hidden] { display: none; }

.ponca-ce__dropdown-option:focus-visible {
	outline: 2px solid #A78607;
	outline-offset: -2px;
}

/* Custom scrollbar inside the dropdown menu */
.ponca-ce__dropdown-menu::-webkit-scrollbar { width: 8px; }
.ponca-ce__dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.ponca-ce__dropdown-menu::-webkit-scrollbar-thumb {
	background: rgba(167,167,167,.4);
	border-radius: 4px;
}

/* ---------- Active filter chips ---------- */
.ponca-ce__active-row {
	display: none; /* JS sets to flex when chips are present */
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.ponca-ce__active-chip-slot {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ponca-ce__active-chip-remove {
	color: inherit;
}
.ponca-ce__active-chip-remove:hover {
	background: rgba(167,167,167,.15) !important;
}
.ponca-ce__clear-all {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--pce-clearall-color, #848484);
	font-family: var(--pce-count-font-family);
	font-size: var(--pce-count-font-size);
	line-height: var(--pce-count-line-height);
	font-weight: var(--pce-count-font-weight);
	font-style: var(--pce-count-font-style);
	letter-spacing: var(--pce-count-letter-spacing);
	text-transform: var(--pce-count-text-transform);
}
.ponca-ce__clear-all:hover {
	text-decoration: underline;
}

/* ---------- Event list + cards ---------- */
.ponca-ce__list {
	display: flex;
	flex-direction: column;
	gap: var(--pce-list-gap, 30px);
}

/* Hide cards beyond initialVisibleCount until JS reveals them */
.ponca-ce__card.pce-card--initial-hidden,
.ponca-ce__card.pce-card--filtered-out {
	display: none !important;
}

.ponca-ce__card {
	background: var(--pce-card-bg, #FFFFFF);
	border: 1px solid var(--pce-card-border, #F3F3F3);
	border-radius: var(--pce-card-radius, 10px);
	padding: var(--pce-card-padding, 24px);
}
.ponca-ce__card-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pce-card-gap, 40px);
	align-items: flex-start;
}
.ponca-ce__card-image {
	flex: 0 0 auto;
	width: var(--pce-card-image-w, 322px);
	max-width: 100%;
}
.ponca-ce__card-image img {
	display: block;
	width: 100%;
	height: var(--pce-card-image-h, 241px);
	object-fit: cover;
	border-radius: var(--pce-card-image-radius, 10px);
	border: 1px solid var(--pce-card-image-border, #F3F3F3);
}
.ponca-ce__card-content {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.ponca-ce__card-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	align-items: flex-start;
}
.ponca-ce__card-main {
	flex: 1 1 clamp(300px, 31.9vw, 480px);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pce-card-main-gap, 20px);
}
.ponca-ce__card-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ponca-ce__card-title {
	margin: 0;
	color: var(--pce-card-title-color, #0D0F0E);
	font-family: var(--pce-card-title-font-family);
	font-size: var(--pce-card-title-font-size);
	line-height: var(--pce-card-title-line-height);
	font-weight: var(--pce-card-title-font-weight);
	font-style: var(--pce-card-title-font-style);
	letter-spacing: var(--pce-card-title-letter-spacing);
	text-transform: var(--pce-card-title-text-transform);
}
.ponca-ce__card-title a {
	color: inherit;
	text-decoration: none;
}
.ponca-ce__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pce-meta-gap, 30px);
	color: var(--pce-meta-color, #474747);
	font-family: var(--pce-meta-font-family);
	font-size: var(--pce-meta-font-size);
	line-height: var(--pce-meta-line-height);
	font-weight: var(--pce-meta-font-weight);
	font-style: var(--pce-meta-font-style);
	letter-spacing: var(--pce-meta-letter-spacing);
	text-transform: var(--pce-meta-text-transform);
}
.ponca-ce__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.ponca-ce__meta-icon {
	display: inline-flex;
	color: var(--pce-meta-icon-color, #B28E07);
}
.ponca-ce__card-desc {
	color: var(--pce-desc-color, #474747);
	font-family: var(--pce-desc-font-family);
	font-size: var(--pce-desc-font-size);
	line-height: var(--pce-desc-line-height);
	font-weight: var(--pce-desc-font-weight);
	font-style: var(--pce-desc-font-style);
	letter-spacing: var(--pce-desc-letter-spacing);
	text-transform: var(--pce-desc-text-transform);
	overflow-wrap: anywhere;
    word-break: break-word;
}
.ponca-ce__card-desc p { margin: 0 0 .8em; }
.ponca-ce__card-desc p:last-child { margin-bottom: 0; }

/* Action buttons */
.ponca-ce__card-actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--pce-action-gap, 12px);
}
.ponca-ce__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	background: var(--pce-action-bg, transparent);
	border: 1px solid var(--pce-action-border, #A78607);
	border-radius: var(--pce-action-radius, 4px);
	padding: var(--pce-action-padding, 10px 16px);
	color: var(--pce-action-color, #A78607);
	min-width: var(--pce-action-minw, 189px);
	font-family: var(--pce-action-font-family);
	font-size: var(--pce-action-font-size);
	line-height: var(--pce-action-line-height);
	font-weight: var(--pce-action-font-weight);
	font-style: var(--pce-action-font-style);
	letter-spacing: var(--pce-action-letter-spacing);
	text-transform: var(--pce-action-text-transform);
	transition: background .18s ease, color .18s ease;
}
.ponca-ce__btn:hover {
	background: var(--pce-action-hover-bg, #A78607);
	color: var(--pce-action-hover-color, #FFFFFF);
}
.ponca-ce__btn:focus-visible {
	outline: 2px solid #A78607;
	outline-offset: 2px;
}

/* Divider */
.ponca-ce__card-divider {
	height: 1px;
	width: 100%;
	background: var(--pce-card-divider, #A7A7A7);
}

/* Card bottom — share + countdown */
.ponca-ce__card-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	align-items: center;
}
.ponca-ce__share {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--pce-share-label-color, #474747);
	font-family: var(--pce-meta-font-family);
	font-size: var(--pce-meta-font-size);
	line-height: var(--pce-meta-line-height);
	font-weight: var(--pce-meta-font-weight);
	font-style: var(--pce-meta-font-style);
	letter-spacing: var(--pce-meta-letter-spacing);
	text-transform: var(--pce-meta-text-transform);
}
.ponca-ce__share-icons {
	display: inline-flex;
	align-items: center;
	gap: var(--pce-share-icon-gap, 14px);
	color: var(--pce-share-icon-color, #A1A0A0);
}
.ponca-ce__share-icon {
	display: inline-flex;
	color: inherit;
	transition: color .18s ease;
}
.ponca-ce__share-icon:hover {
	color: var(--pce-share-hover-color, #A78607);
}
.ponca-ce__countdown {
	color: var(--pce-countdown-color, #474747);
	font-family: var(--pce-countdown-font-family);
	font-size: var(--pce-countdown-font-size);
	line-height: var(--pce-countdown-line-height);
	font-weight: var(--pce-countdown-font-weight);
	font-style: var(--pce-countdown-font-style);
	letter-spacing: var(--pce-countdown-letter-spacing);
	text-transform: var(--pce-countdown-text-transform);
}

/* ---------- Footer row — count + load more ---------- */
.ponca-ce__footer-row {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: center;
}
.ponca-ce__count {
	margin: 0;
	align-self: flex-start;
	color: var(--pce-count-color, #474747);
	font-family: var(--pce-count-font-family);
	font-size: var(--pce-count-font-size);
	line-height: var(--pce-count-line-height);
	font-weight: var(--pce-count-font-weight);
	font-style: var(--pce-count-font-style);
	letter-spacing: var(--pce-count-letter-spacing);
	text-transform: var(--pce-count-text-transform);
}
.ponca-ce__load-more-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}
.ponca-ce__load-more {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	cursor: pointer;
	background: var(--pce-loadmore-bg, transparent);
	border: 1px solid var(--pce-loadmore-border, #474747);
	border-radius: var(--pce-loadmore-radius, 4px);
	padding: var(--pce-loadmore-padding, 10px 16px);
	color: var(--pce-loadmore-color, #474747);
	font-family: var(--pce-loadmore-font-family);
	font-size: var(--pce-loadmore-font-size);
	line-height: var(--pce-loadmore-line-height);
	font-weight: var(--pce-loadmore-font-weight);
	font-style: var(--pce-loadmore-font-style);
	letter-spacing: var(--pce-loadmore-letter-spacing);
	text-transform: var(--pce-loadmore-text-transform);
	transition: background .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
	.ponca-ce__load-more:hover {
		background: var(--pce-loadmore-hover-bg, #0D0F0E);
		color: var(--pce-loadmore-hover-color, #FFFFFF);
	}
}
.ponca-ce__load-more:focus-visible {
	outline: 2px solid #0D0F0E;
	outline-offset: 2px;
}

/* Empty state — initial display:none lives inline so view.js can reveal it with style.display='' */
.ponca-ce__empty {
	padding: 60px 20px;
	text-align: center;
	color: var(--pce-empty-color, #848484);
	font-family: var(--pce-empty-ff, 'DM Sans', sans-serif);
	font-size: var(--pce-empty-fs, 16px);
}

/* ---------- Footer pattern — full viewport width, flush bottom ---------- */
.ponca-ce__footer-pattern {
	display: block;
	margin: 0 !important;
	pointer-events: none;
	width: 100%;
	height: var(--pce-footer-h, 83px);
	background-color: var(--pce-footer-bg, transparent);
	background-image: var(--pce-footer-image);
	background-repeat: var(--pce-footer-repeat, repeat-x);
	background-size: var(--pce-footer-size, auto 100%);
	background-position: var(--pce-footer-position, center bottom);
	opacity: var(--pce-footer-opacity, 1);
}
.ponca-ce__footer-pattern.is-full-width {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.ponca-ce.has-footer-pattern {
	padding-bottom: 0 !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
	.ponca-ce__filter-row {
		gap: 12px !important;
	}
	.ponca-ce__filter-row > .ponca-ce__dropdown,
	.ponca-ce__filter-row > .ponca-ce__search {
		flex: 1 1 calc(50% - 12px);
		min-width: 220px;
	}
}

@media (max-width: 768px) {
	.ponca-ce__card-main {
		flex: 1 ;
	}
	.ponca-ce__card-inner {
		flex-direction: column !important;
	}
	.ponca-ce__card-image {
		width: 100% !important;
	}
	.ponca-ce__card-image img {
		height: auto !important;
		max-height: 280px;
	}
	.ponca-ce__card-top {
		flex-direction: column !important;
	}
	.ponca-ce__card-actions {
		width: 100%;
	}
	.ponca-ce__btn {
		min-width: 0 !important;
		width: 100%;
	}
	.ponca-ce__title {
		font-size: clamp(28px, 7vw, 48px) !important;
		line-height: 1.1 !important;
	}
	.ponca-ce__card-title {
		font-size: clamp(22px, 5vw, 32px) !important;
		line-height: 1.2 !important;
	}
	.ponca-ce__card-bottom {
		flex-direction: column-reverse !important;
		align-items: flex-start !important;
	}
}

@media (max-width: 480px) {
	.ponca-ce__card-meta {
		gap: 12px !important;
		flex-direction: column;
		align-items: flex-start !important;
	}
}