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

/* ============================================================
   PONCA VISIT INFO — Frontend Styles
   Class prefix: ponca-vi
   All per-instance values come from --ponca-vi-* custom properties
   set on the .ponca-vi wrapper by render.php (and the editor preview).
   Every var() carries a matching default as its fallback, so the
   block looks correct even before any attribute is set.
   ============================================================ */

.ponca-vi {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background: var(--ponca-vi-bg, #FFFFFF);
	padding: var(--ponca-vi-section-pad-y, 0px) var(--ponca-vi-section-pad-x, 160px);
}
.ponca-vi *, .ponca-vi *::before, .ponca-vi *::after { box-sizing: border-box; }

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

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

.ponca-vi__columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	align-items: var(--ponca-vi-columns-align, stretch);
	justify-content: var(--ponca-vi-columns-justify, flex-start);
	gap: var(--ponca-vi-columns-gap, 30px);
}
.ponca-vi.is-reversed .ponca-vi__columns { flex-direction: row-reverse; }

.ponca-vi__left {
	min-width: var(--ponca-vi-col-min-width, 320px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: var(--ponca-vi-left-flex, 567) 1 var(--ponca-vi-col-min-width, 320px);
}
.ponca-vi__right {
	min-width: var(--ponca-vi-col-min-width, 320px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: var(--ponca-vi-right-flex, 950) 1 var(--ponca-vi-col-min-width, 320px);
}

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

.ponca-vi__heading {
	margin: 0;
	width: 100%;
	color: var(--ponca-vi-heading-prefix-color, #0D0F0E);
	font-family: var(--ponca-vi-heading-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-vi-heading-font-size, 56px);
	line-height: var(--ponca-vi-heading-line-height, 62px);
	font-weight: var(--ponca-vi-heading-font-weight, 300);
	letter-spacing: var(--ponca-vi-heading-letter-spacing, -0.56px);
	text-align: var(--ponca-vi-heading-text-align, left);
}
.ponca-vi__heading-prefix {
	display: inline;
	color: var(--ponca-vi-heading-prefix-color, #0D0F0E);
	font-style: var(--ponca-vi-heading-prefix-style, normal);
}
.ponca-vi__heading-accent {
	display: inline;
	color: var(--ponca-vi-heading-accent-color, #B28E07);
	font-style: var(--ponca-vi-heading-accent-style, italic);
}
.ponca-vi__heading-suffix {
	display: inline;
	color: var(--ponca-vi-heading-suffix-color, #0D0F0E);
	font-style: var(--ponca-vi-heading-suffix-style, normal);
}

/* ---- Dark card ---- */
.ponca-vi__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	background: var(--ponca-vi-card-bg, #0D0F0E);
	border: var(--ponca-vi-card-border-width, 0px) var(--ponca-vi-card-border-style, solid) var(--ponca-vi-card-border-color, transparent);
	border-radius: var(--ponca-vi-card-radius, 0px);
	padding: var(--ponca-vi-card-pad-y, 40px) var(--ponca-vi-card-pad-x, 40px);
	gap: var(--ponca-vi-card-gap, 30px);
}
.ponca-vi.is-card-fill .ponca-vi__card { height: 100%; flex: 1 1 auto; }

.ponca-vi__card-eyebrow {
	margin: 0;
	width: 100%;
	color: var(--ponca-vi-card-eyebrow-color, #A78607);
	font-family: var(--ponca-vi-card-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-vi-card-eyebrow-font-size, 10px);
	line-height: var(--ponca-vi-card-eyebrow-line-height, 22px);
	font-weight: var(--ponca-vi-card-eyebrow-font-weight, 600);
	font-style: var(--ponca-vi-card-eyebrow-font-style, normal);
	letter-spacing: var(--ponca-vi-card-eyebrow-letter-spacing, 3px);
	text-transform: var(--ponca-vi-card-eyebrow-text-transform, uppercase);
}

/* ---- Info rows ---- */
.ponca-vi__info {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: var(--ponca-vi-info-gap, 24px);
}
.ponca-vi__info-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: var(--ponca-vi-info-row-gap, 8px);
}
.ponca-vi__info-head {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	gap: var(--ponca-vi-info-icon-label-gap, 10px);
}
.ponca-vi__info-label {
	margin: 0;
	color: var(--ponca-vi-info-label-color, #FFFDF6);
	font-family: var(--ponca-vi-info-label-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-vi-info-label-font-size, 16px);
	line-height: var(--ponca-vi-info-label-line-height, 25px);
	font-weight: var(--ponca-vi-info-label-font-weight, 600);
	font-style: var(--ponca-vi-info-label-font-style, normal);
	letter-spacing: var(--ponca-vi-info-label-letter-spacing, 0px);
}
.ponca-vi__info-value {
	display: block;
	margin: 0;
	text-decoration: none;
	white-space: pre-line;
	padding-left: var(--ponca-vi-info-value-indent, 30px);
	color: var(--ponca-vi-info-value-color, #A7A7A7);
	font-family: var(--ponca-vi-info-value-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-vi-info-value-font-size, 16px);
	line-height: var(--ponca-vi-info-value-line-height, 25px);
	font-weight: var(--ponca-vi-info-value-font-weight, 400);
	font-style: var(--ponca-vi-info-value-font-style, normal);
	letter-spacing: var(--ponca-vi-info-value-letter-spacing, 0px);
}

/* Value rows that are links get a subtle hover */
a.ponca-vi__info-value {
	transition: opacity 240ms ease, color 240ms ease;
}
a.ponca-vi__info-value:hover,
a.ponca-vi__info-value:focus-visible {
	opacity: 0.78;
}

.ponca-vi__icon-svg { display: block; }

/* ---- Image ---- */
.ponca-vi__image {
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	background: var(--ponca-vi-image-bg, #F4F0E6);
	border-radius: var(--ponca-vi-image-radius, 0px);
	min-height: var(--ponca-vi-image-min-height, 360px);
}
.ponca-vi.is-image-fill .ponca-vi__image { height: 100%; flex: 1 1 auto; }

.ponca-vi__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ponca-vi-image-object-fit, cover);
	object-position: var(--ponca-vi-image-object-position, center);
	border-radius: var(--ponca-vi-image-radius, 0px);
}

/* ---- Ornament ---- */
.ponca-vi__ornament {
	width: 100%;
	pointer-events: none;
	height: var(--ponca-vi-ornament-height, 82px);
	margin-top: var(--ponca-vi-ornament-margin-top, 0px);
	background-color: var(--ponca-vi-ornament-bg, transparent);
	background-image: var(--ponca-vi-ornament-image, none);
	background-repeat: var(--ponca-vi-ornament-repeat, repeat-x);
	background-position: var(--ponca-vi-ornament-position, center bottom);
	background-size: var(--ponca-vi-ornament-size, auto 100%);
	opacity: var(--ponca-vi-ornament-opacity, 1);
}

/* Full-viewport ornament guard against themes that hide overflow on parents. */
.ponca-vi:has(.ponca-vi__ornament--full) { overflow: visible; }
.ponca-vi__ornament--full {
	position: absolute;
	left: 0;
	bottom: 0;
	/*right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;*/
	width: 100vw;
	max-width: 100vw;
}

.ponca-vi.alignwide,
.ponca-vi.alignfull { max-width: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1440px) {
	.ponca-vi {
		padding-left: max(48px, 4vw) !important;
		padding-right: max(48px, 4vw) !important;
	}
}

@media (max-width: 1280px) {
	.ponca-vi {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.ponca-vi__heading {
		font-size: clamp(40px, 4.5vw, 56px) !important;
		line-height: 1.15 !important;
	}
	.ponca-vi__columns {
		gap: 28px !important;
	}
}

@media (max-width: 1024px) {
	.ponca-vi {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.ponca-vi__columns,
	.ponca-vi.is-reversed .ponca-vi__columns {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 24px !important;
	}
	.ponca-vi__left,
	.ponca-vi__right {
		flex: 1 1 100% !important;
		min-width: 100% !important;
	}
	.ponca-vi__card {
		padding: 32px !important;
	}
}

@media (max-width: 720px) {
	.ponca-vi {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.ponca-vi__heading {
		font-size: 36px !important;
		line-height: 42px !important;
	}
	.ponca-vi__card {
		padding: 24px !important;
		gap: 24px !important;
	}
	.ponca-vi__info-label,
	.ponca-vi__info-value {
		font-size: 15px !important;
	}
	.ponca-vi__image {
		min-height: 240px !important;
	}
	.ponca-vi__ornament {
		height: 56px !important;
	}
}

@media (max-width: 420px) {
	.ponca-vi__heading {
		font-size: 30px !important;
		line-height: 36px !important;
	}
}

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