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

/* ============================================================
   PONCA PLACE INFO — info-list + hero image
   Class prefix: ponca-pi
   All per-instance values come from --ponca-pi-* custom properties
   set on the .ponca-pi wrapper by render.php (and the editor preview).
   ============================================================ */

.ponca-pi {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background: var(--ponca-pi-bg, #FFFFFF);
}
.ponca-pi *, .ponca-pi *::before, .ponca-pi *::after { box-sizing: border-box; }

/* ---- Layout ---- */
.ponca-pi__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 auto;
	width: 100%;
	max-width: var(--ponca-pi-container-max-width, 1600px);
	gap: var(--ponca-pi-container-gap, 30px);
}

.ponca-pi__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-pi-inner-gap, 60px);
}

.ponca-pi__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-pi-header-gap, 14px);
}

.ponca-pi__content {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: var(--ponca-pi-content-gap, 60px);
	align-items: var(--ponca-pi-content-align, flex-start);
}
.ponca-pi.is-reversed .ponca-pi__content { flex-direction: row-reverse; }

.ponca-pi__info-list {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: var(--ponca-pi-info-gap, 20px);
	flex: var(--ponca-pi-left-flex, 789) 1 0;
}

/* ---- Header text ---- */
.ponca-pi__eyebrow {
	margin: 0;
	color: var(--ponca-pi-eyebrow-color, #DEB209);
	font-family: var(--ponca-pi-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-pi-eyebrow-font-size, 13px);
	line-height: var(--ponca-pi-eyebrow-line-height, 22px);
	font-weight: var(--ponca-pi-eyebrow-font-weight, 600);
	font-style: var(--ponca-pi-eyebrow-font-style, normal);
	letter-spacing: var(--ponca-pi-eyebrow-letter-spacing, 3px);
	text-transform: var(--ponca-pi-eyebrow-text-transform, uppercase);
}

.ponca-pi__heading {
	margin: 0;
	font-family: var(--ponca-pi-heading-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-pi-heading-font-size, 56px);
	line-height: var(--ponca-pi-heading-line-height, 62px);
	font-weight: var(--ponca-pi-heading-font-weight, 300);
	letter-spacing: var(--ponca-pi-heading-letter-spacing, -0.56px);
}
.ponca-pi__heading-prefix {
	color: var(--ponca-pi-heading-prefix-color, #0D0F0E);
	font-style: var(--ponca-pi-heading-prefix-style, normal);
}
.ponca-pi__heading-accent {
	color: var(--ponca-pi-heading-accent-color, #B28E07);
	font-style: var(--ponca-pi-heading-accent-style, italic);
}
.ponca-pi__heading-suffix {
	color: var(--ponca-pi-heading-suffix-color, #0D0F0E);
	font-style: var(--ponca-pi-heading-suffix-style, normal);
}

/* ---- Card ---- */
.ponca-pi__card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 100%;
	min-width: 0;
	background: var(--ponca-pi-card-bg, #FFFDF6);
	border: var(--ponca-pi-card-border-width, 1px) solid var(--ponca-pi-card-border-color, #F5E7B3);
	border-radius: var(--ponca-pi-card-radius, 0px);
	padding: var(--ponca-pi-card-pad-top, 20px) var(--ponca-pi-card-pad-right, 20px) var(--ponca-pi-card-pad-bottom, 20px) var(--ponca-pi-card-pad-left, 30px);
	gap: var(--ponca-pi-card-gap, 30px);
	transition: background 180ms ease, border-color 180ms ease;
}
.ponca-pi__card:hover {
	background: var(--ponca-pi-card-hover-bg, #FAF3DA) !important;
	border-color: var(--ponca-pi-card-hover-bd, #DEB209) !important;
}
a.ponca-pi__card { text-decoration: none; }

.ponca-pi__icon-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-shrink: 0;
	padding-top: var(--ponca-pi-icon-frame-top-offset, 5px);
}
.ponca-pi__icon-frame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ponca-pi-icon-frame-size, 38px);
	height: var(--ponca-pi-icon-frame-size, 38px);
	padding: var(--ponca-pi-icon-frame-pad-y, 10px) var(--ponca-pi-icon-frame-pad-x, 12px);
	border: var(--ponca-pi-icon-frame-border-width, 1px) solid var(--ponca-pi-icon-frame-border-color, #DEB209);
	border-radius: var(--ponca-pi-icon-frame-radius, 0px);
	background: var(--ponca-pi-icon-frame-bg, transparent);
}

.ponca-pi__text-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
	gap: var(--ponca-pi-item-text-gap, 0px);
}

.ponca-pi__item-eyebrow {
	margin: 0;
	width: 100%;
	color: var(--ponca-pi-item-eyebrow-color, #B28E07);
	font-family: var(--ponca-pi-item-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-pi-item-eyebrow-font-size, 10px);
	line-height: var(--ponca-pi-item-eyebrow-line-height, 22px);
	font-weight: var(--ponca-pi-item-eyebrow-font-weight, 600);
	font-style: var(--ponca-pi-item-eyebrow-font-style, normal);
	letter-spacing: var(--ponca-pi-item-eyebrow-letter-spacing, 3px);
	text-transform: var(--ponca-pi-item-eyebrow-text-transform, uppercase);
}
.ponca-pi__item-title {
	margin: 0;
	width: 100%;
	color: var(--ponca-pi-item-title-color, #0D0F0E);
	font-family: var(--ponca-pi-item-title-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-pi-item-title-font-size, 27px);
	line-height: var(--ponca-pi-item-title-line-height, 37px);
	font-weight: var(--ponca-pi-item-title-font-weight, 300);
	font-style: var(--ponca-pi-item-title-font-style, normal);
	letter-spacing: var(--ponca-pi-item-title-letter-spacing, 0px);
}
.ponca-pi__item-subtitle {
	margin: 0;
	width: 100%;
	color: var(--ponca-pi-item-subtitle-color, #A7A7A7);
	font-family: var(--ponca-pi-item-subtitle-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-pi-item-subtitle-font-size, 14px);
	line-height: var(--ponca-pi-item-subtitle-line-height, 24px);
	font-weight: var(--ponca-pi-item-subtitle-font-weight, 400);
	font-style: var(--ponca-pi-item-subtitle-font-style, normal);
}

/* ---- Image figure ---- */
.ponca-pi__image-figure {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	flex: var(--ponca-pi-right-flex, 655) 1 0;
	min-height: var(--ponca-pi-image-min-height, 456px);
	background: var(--ponca-pi-image-bg, #E2D7CA);
	border-radius: var(--ponca-pi-image-radius, 0px);
}
.ponca-pi__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: var(--ponca-pi-image-object-fit, cover);
	object-position: var(--ponca-pi-image-object-position, center center);
}
.ponca-pi__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
	font-family: monospace;
	font-size: 11px;
}

.ponca-pi__image-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--ponca-pi-overlay-gradient, linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.63) 100%));
	mix-blend-mode: var(--ponca-pi-overlay-blend, darken);
}

.ponca-pi__caption-wrap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: var(--ponca-pi-caption-pad-y, 34px) var(--ponca-pi-caption-pad-x, 34px);
}
.ponca-pi__caption-date {
	margin: 0 0 var(--ponca-pi-date-margin-bottom, 5px);
	color: var(--ponca-pi-date-color, #DEB209);
	font-family: var(--ponca-pi-date-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-pi-date-font-size, 16px);
	line-height: var(--ponca-pi-date-line-height, 130%);
	font-weight: var(--ponca-pi-date-font-weight, 400);
	font-style: var(--ponca-pi-date-font-style, normal);
}
.ponca-pi__caption {
	margin: 0;
	color: var(--ponca-pi-caption-color, #E2D7CA);
	font-family: var(--ponca-pi-caption-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-pi-caption-font-size, 24px);
	line-height: var(--ponca-pi-caption-line-height, 130%);
	font-weight: var(--ponca-pi-caption-font-weight, 400);
	font-style: var(--ponca-pi-caption-font-style, normal);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
	.ponca-pi__heading { font-size: clamp(40px, 5vw, 56px) !important; line-height: 1.15 !important; }
}

@media (max-width: 1024px) {
	.ponca-pi__content { flex-direction: column !important; }
	.ponca-pi.is-reversed .ponca-pi__content { flex-direction: column !important; }
	.ponca-pi__image-figure { min-height: 380px !important; width: 100%; }
	.ponca-pi__item-title { font-size: 24px !important; line-height: 32px !important; }
}

@media (max-width: 768px) {
	.ponca-pi__heading { font-size: 36px !important; line-height: 42px !important; }
	.ponca-pi__info-list { min-width: 100%; }
	.ponca-pi__card { padding: 18px !important; gap: 18px !important; }
	.ponca-pi__item-title { font-size: 22px !important; line-height: 28px !important; }
	.ponca-pi__image-figure { min-height: 280px !important; }
	.ponca-pi__caption-wrap { padding: 20px !important; }
	.ponca-pi__caption { font-size: 18px !important; }
}

@media (max-width: 600px) {
	.ponca-pi__heading { font-size: 32px !important; line-height: 38px !important; }
	.ponca-pi__item-title { font-size: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ponca-pi__card { transition: none !important; }
}