/* =====================================================================
   PONCA PROGRAM DETAIL — Frontend Styles
   Pixel-perfect to Frame 41 (Special Diabetes Program for Indians Grant)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,700&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;1,9..40,300;1,9..40,400&display=swap');

.ponca-pd {
	--pd-font-display: 'Cormorant Garamond', 'Georgia', serif;
	--pd-font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--pd-section-bg, #FFFDF6);
}

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

/* ---- Container ---- */
.ponca-pd__container {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: var(--pd-container-max-width, 1600px);
	padding: var(--pd-container-padding, 128px 48px);
	gap: var(--pd-container-gap, 30px);
}

/* ===========================================================
   BACK LINK (hidden by default)
   =========================================================== */
.ponca-pd__back {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
	text-decoration: none;
}
.ponca-pd__back-row {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.ponca-pd__back-arrow {
	display: inline-flex;
	align-items: center;
	transform: scaleX(-1);
	text-transform: uppercase;
	color: var(--pd-back-color, #6E6B6D);
	font-family: var(--pd-back-arrow-font-family, 'Arial', sans-serif);
	font-size: var(--pd-back-arrow-font-size, 12.8px);
	line-height: var(--pd-back-arrow-line-height, 22px);
	font-weight: var(--pd-back-arrow-font-weight, 700);
	letter-spacing: var(--pd-back-arrow-letter-spacing, 1.92px);
}
.ponca-pd__back-text {
	display: inline-flex;
	align-items: center;
	text-transform: uppercase;
	color: var(--pd-back-color, #6E6B6D);
	font-family: var(--pd-back-text-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--pd-back-text-font-size, 13px);
	line-height: var(--pd-back-text-line-height, 22px);
	font-weight: var(--pd-back-text-font-weight, 600);
	letter-spacing: var(--pd-back-text-letter-spacing, 1.92px);
}
.ponca-pd__back-divider {
	width: 145px;
	height: 1px;
	display: block;
	background-color: var(--pd-back-divider-color, #6E6B6D);
}

/* ===========================================================
   GRID (centered on cross-axis to match Frame 50 align-items:center)
   =========================================================== */
.ponca-pd__row {
	display: grid;
	grid-template-columns: var(--pd-grid-columns, minmax(0, 933fr) minmax(0, 515fr));
	width: 100%;
	align-items: var(--pd-grid-align, center);
	gap: var(--pd-grid-gap, 60px);
}

/* ===========================================================
   LEFT COLUMN
   =========================================================== */
.ponca-pd__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--pd-intro-gap, 24px);
}
.ponca-pd__intro-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--pd-intro-head-gap, 14px);
}
.ponca-pd__eyebrow {
	margin: 0;
	display: block;
	width: 100%;
	text-transform: var(--pd-eyebrow-text-transform, uppercase);
	color: var(--pd-eyebrow-color, #DEB209);
	font-family: var(--pd-eyebrow-font-family);
	font-size: var(--pd-eyebrow-font-size);
	line-height: var(--pd-eyebrow-line-height);
	font-style: var(--pd-eyebrow-font-style);
	font-weight: var(--pd-eyebrow-font-weight);
	letter-spacing: var(--pd-eyebrow-letter-spacing);
}
.ponca-pd__heading {
	margin: 0;
	display: block;
	width: 100%;
	font-family: var(--pd-heading-font-family);
	font-size: var(--pd-heading-font-size);
	line-height: var(--pd-heading-line-height);
	font-style: var(--pd-heading-font-style);
	font-weight: var(--pd-heading-font-weight);
	letter-spacing: var(--pd-heading-letter-spacing);
	text-transform: var(--pd-heading-text-transform);
}
.ponca-pd__heading-part {
	display: inline;
}
.ponca-pd__heading-part:nth-child(1) {
	color: var(--pd-heading-part1-color, #0D0F0E);
	font-style: var(--pd-heading-part1-font-style, normal);
}
.ponca-pd__heading-part:nth-child(2) {
	color: var(--pd-heading-part2-color, #A78607);
	font-style: var(--pd-heading-part2-font-style, italic);
}
/* Two-line heading: part 2 drops onto its own line below part 1 */
.ponca-pd__heading.is-two-line .ponca-pd__heading-part:nth-child(2) {
	display: block;
}
.ponca-pd__descriptions {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--pd-descriptions-gap, 16px);
}
.ponca-pd__description {
	margin: 0;
	display: block;
	color: var(--pd-description-color, #474747);
	font-family: var(--pd-description-font-family);
	font-size: var(--pd-description-font-size);
	line-height: var(--pd-description-line-height);
	font-style: var(--pd-description-font-style);
	font-weight: var(--pd-description-font-weight);
	letter-spacing: var(--pd-description-letter-spacing);
	text-transform: var(--pd-description-text-transform);
}

/* ===========================================================
   RIGHT COLUMN — Dark Eligibility Card
   =========================================================== */
.ponca-pd__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	border-style: solid;
}
.ponca-pd__card-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}
.ponca-pd__card-eyebrow,
.ponca-pd__card-heading,
.ponca-pd__card-intro,
.ponca-pd__card-footer {
	margin: 0;
	display: block;
	width: 100%;
}
.ponca-pd__card-eyebrow {
	text-transform: uppercase;
}
.ponca-pd__divider {
	width: 100%;
	height: 0;
	border-top-style: solid;
	border-top-width: 1px;
	display: block;
}

/* Rows */
.ponca-pd__rows {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.ponca-pd__row-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 100%;
}
.ponca-pd__row-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ponca-pd__row-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ponca-pd__row-icon--img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ponca-pd__row-text {
	margin: 0;
	display: block;
	flex: 1;
	white-space: pre-line;
}
.ponca-pd__row-link {
	text-decoration: none;
	color: inherit;
	transition: color 0.2s ease;
}
.ponca-pd__row-link:hover,
.ponca-pd__row-link:focus {
	color: var(--pd-row-hover, #DEB209);
}

/* Send-Message button */
.ponca-pd__btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 19px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}
.ponca-pd__btn-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.ponca-pd__btn-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ===========================================================
   FOOTER ORNAMENT BAND
   Full-viewport, edge-to-edge, touches the section's bottom.
   =========================================================== */
.ponca-pd__ornament {
	display: block;
	width: 100%;
	pointer-events: none;
	user-select: none;
	position: relative;
	z-index: 1;
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: auto 100%;
}

/* Full-viewport breakout — span edge-to-edge regardless of section width */
.ponca-pd__ornament--full {
	left:0;
	bottom:0px;
	position:absolute;
	width: 100vw;
	max-width: 100vw;
}

/* Empty-state hint when no image picked yet (frontend safety net) */
.ponca-pd__ornament-empty {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(222, 178, 9, 0.18) 8px 9px);
}

/* ===========================================================
   ALIGNMENT VARIANTS
   =========================================================== */
.ponca-pd.alignwide .ponca-pd__container,
.ponca-pd.alignfull .ponca-pd__container {
	max-width: 1504px;
}

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

@media (max-width: 980px) {
	.ponca-pd__row {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 768px) {
	.ponca-pd__heading {
		font-size: 36px !important;
		line-height: 42px !important;
	}
	.ponca-pd__description {
		font-size: 16px !important;
		line-height: 26px !important;
	}
	.ponca-pd__card-heading {
		font-size: 24px !important;
	}
	.ponca-pd__card-intro,
	.ponca-pd__card-footer,
	.ponca-pd__row-text {
		font-size: 14px !important;
		line-height: 22px !important;
	}
}

@media (max-width: 600px) {
	.ponca-pd__heading {
		font-size: 28px !important;
		line-height: 34px !important;
	}
	.ponca-pd__back-divider {
		width: 100px;
	}
}

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

/* ===========================================================
   VARIABLE CONSUMPTION (missing vars)
   Wire up the --pd-* custom properties that render.php emits
   inline but were not yet read by any rule above. Defaults match
   render.php / block.json. Selectors match the elements carrying
   each inline style string.
   =========================================================== */

/* ---- Card ---- */
.ponca-pd__card {
	background: var(--pd-card-bg, #0D0F0E);
	border-color: var(--pd-card-border-color, rgba(13, 15, 14, 0.75));
	border-width: var(--pd-card-border-width, 1px);
	border-style: var(--pd-card-border-style, solid);
	border-radius: var(--pd-card-border-radius, 0px);
	padding: var(--pd-card-padding, 40px);
	gap: var(--pd-card-gap, 20px);
}

/* ---- Card eyebrow ---- */
.ponca-pd__card-eyebrow {
	color: var(--pd-card-eyebrow-color, #A78607);
	font-family: var(--pd-card-eyebrow-font-family);
	font-size: var(--pd-card-eyebrow-font-size);
	line-height: var(--pd-card-eyebrow-line-height);
	font-style: var(--pd-card-eyebrow-font-style);
	font-weight: var(--pd-card-eyebrow-font-weight);
	letter-spacing: var(--pd-card-eyebrow-letter-spacing);
	text-transform: var(--pd-card-eyebrow-text-transform, uppercase);
}

/* ---- Card heading ---- */
.ponca-pd__card-heading {
	color: var(--pd-card-heading-color, #E2D7CA);
	font-family: var(--pd-card-heading-font-family);
	font-size: var(--pd-card-heading-font-size);
	line-height: var(--pd-card-heading-line-height);
	font-style: var(--pd-card-heading-font-style);
	font-weight: var(--pd-card-heading-font-weight);
	letter-spacing: var(--pd-card-heading-letter-spacing);
}

/* ---- Card intro ---- */
.ponca-pd__card-intro {
	color: var(--pd-card-intro-color, #A7A7A7);
	font-family: var(--pd-card-intro-font-family);
	font-size: var(--pd-card-intro-font-size);
	line-height: var(--pd-card-intro-line-height);
	font-style: var(--pd-card-intro-font-style);
	font-weight: var(--pd-card-intro-font-weight);
	letter-spacing: var(--pd-card-intro-letter-spacing);
}

/* ---- Card footer ---- */
.ponca-pd__card-footer {
	color: var(--pd-card-footer-color, #A7A7A7);
	font-family: var(--pd-card-footer-font-family);
	font-size: var(--pd-card-footer-font-size);
	line-height: var(--pd-card-footer-line-height);
	font-style: var(--pd-card-footer-font-style);
	font-weight: var(--pd-card-footer-font-weight);
	letter-spacing: var(--pd-card-footer-letter-spacing);
}

/* ---- Divider (maps onto the existing border-top declaration) ---- */
.ponca-pd__divider {
	border-top-color: var(--pd-divider-color, rgba(240, 235, 228, 0.25));
	border-top-width: var(--pd-divider-width, 1px);
	border-top-style: var(--pd-divider-style, solid);
}

/* ---- Rows block ---- */
.ponca-pd__rows {
	gap: var(--pd-rows-gap, 10px);
}

/* ---- Row item ---- */
.ponca-pd__row-item {
	gap: var(--pd-row-item-gap, 10px);
}

/* ---- Row icon ---- */
.ponca-pd__row-icon {
	width: var(--pd-row-icon-size, 20px);
	height: var(--pd-row-icon-size, 20px);
	color: var(--pd-row-icon-color, #A78607);
}

/* ---- Row text ---- */
.ponca-pd__row-text {
	color: var(--pd-row-text-color, #A7A7A7);
	font-family: var(--pd-row-text-font-family);
	font-size: var(--pd-row-text-font-size);
	line-height: var(--pd-row-text-line-height);
	font-style: var(--pd-row-text-font-style);
	font-weight: var(--pd-row-text-font-weight);
	letter-spacing: var(--pd-row-text-letter-spacing);
}

/* ---- Send-Message button ---- */
.ponca-pd__btn {
	background-color: var(--pd-btn-bg, #DEB209);
	color: var(--pd-btn-color, #0D0F0E);
	padding: var(--pd-btn-padding, 18px 32px);
	border-radius: var(--pd-btn-radius, 4px);
	font-family: var(--pd-btn-font-family);
	font-size: var(--pd-btn-font-size);
	line-height: var(--pd-btn-line-height);
	font-style: var(--pd-btn-font-style);
	font-weight: var(--pd-btn-font-weight);
	letter-spacing: var(--pd-btn-letter-spacing);
	text-transform: var(--pd-btn-text-transform, uppercase);
}

/* ---- Footer ornament band ---- */
.ponca-pd__ornament {
	height: var(--pd-ornament-height, 83px);
	background-color: var(--pd-ornament-bg, transparent);
	background-image: var(--pd-ornament-image);
	background-repeat: var(--pd-ornament-repeat, repeat-x);
	background-position: var(--pd-ornament-position, left bottom);
	background-size: var(--pd-ornament-size, auto 100%);
	opacity: var(--pd-ornament-opacity, 1);
	margin-top: var(--pd-ornament-margin-top, 0px);
}