/* =============================================================
 * Ponca Leadership by District — frontend styles
 * ============================================================= */

.ponca-lbd {
	position: relative;
	box-sizing: border-box;
	padding: var(--lbd-pad-top, 128px) var(--lbd-pad-x, 48px) var(--lbd-pad-bottom, 128px);
	overflow: hidden;
	isolation: isolate;
	background: var(--lbd-section-bg, transparent);
}

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

.ponca-lbd__container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--lbd-max, 1600px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lbd-gap, 60px);
	padding: 0px var(--lbd-pad-x);
}

/* ---------- Section header ---------- */

.ponca-lbd__header {
	display: flex;
	flex-direction: column;
	gap: var(--lbd-eye-title-gap, 14px);
}

.ponca-lbd__eyebrow,
.ponca-lbd__title,
.ponca-lbd__description { margin: 0; padding: 0; }

.ponca-lbd__eyebrow {
	color: var(--lbd-eye-color, #DEB209);
	font-family: var(--lbd-eye-font-family, inherit);
	font-size: var(--lbd-eye-font-size, inherit);
	line-height: var(--lbd-eye-line-height, inherit);
	font-style: var(--lbd-eye-font-style, inherit);
	font-weight: var(--lbd-eye-font-weight, inherit);
	letter-spacing: var(--lbd-eye-letter-spacing, inherit);
	text-transform: var(--lbd-eye-text-transform, inherit);
}

.ponca-lbd__title {
	font-family: var(--lbd-title-font-family, inherit);
	font-size: var(--lbd-title-font-size, inherit);
	line-height: var(--lbd-title-line-height, inherit);
	font-weight: var(--lbd-title-font-weight, inherit);
	letter-spacing: var(--lbd-title-letter-spacing, inherit);
}

.ponca-lbd__title-line1 {
	color: var(--lbd-title-l1-color, #0D0F0E);
	font-style: var(--lbd-title-l1-fs, normal);
}

.ponca-lbd__title-line2 {
	color: var(--lbd-title-l2-color, #A78607);
	font-style: var(--lbd-title-l2-fs, italic);
}

.ponca-lbd__description {
	color: var(--lbd-desc-color, #474747);
	max-width: var(--lbd-desc-max, 900px);
	margin-top: var(--lbd-desc-mt, 24px);
	font-family: var(--lbd-desc-font-family, inherit);
	font-size: var(--lbd-desc-font-size, inherit);
	line-height: var(--lbd-desc-line-height, inherit);
	font-style: var(--lbd-desc-font-style, inherit);
	font-weight: var(--lbd-desc-font-weight, inherit);
	letter-spacing: var(--lbd-desc-letter-spacing, inherit);
	text-transform: var(--lbd-desc-text-transform, inherit);
}

.ponca-lbd__title--stacked { display: flex; flex-direction: column; }
.ponca-lbd__title--stacked .ponca-lbd__title-line1,
.ponca-lbd__title--stacked .ponca-lbd__title-line2 { display: block; }
.ponca-lbd__title--inline { display: block; }
.ponca-lbd__title--inline .ponca-lbd__title-line1,
.ponca-lbd__title--inline .ponca-lbd__title-line2 { display: inline; }

.ponca-lbd__description a {
	color: var(--lbd-desc-link, #A78607);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ponca-lbd__description a:hover { text-decoration: none; }
.ponca-lbd__description strong { font-weight: 600; }
.ponca-lbd__description em     { font-style: italic; }

/* ---------- Groups ---------- */

.ponca-lbd__groups {
	display: flex;
	flex-direction: column;
	gap: var(--lbd-gap, 60px);
}

.ponca-lbd__group {
	display: flex;
	flex-direction: column;
	gap: var(--lbd-group-inner-gap, 20px);
}

.ponca-lbd__group-title {
	margin: 0;
	padding: 0;
	color: var(--lbd-grp-title-color, #0D0F0E);
	font-family: var(--lbd-grp-title-font-family, inherit);
	font-size: var(--lbd-grp-title-font-size, inherit);
	line-height: var(--lbd-grp-title-line-height, inherit);
	font-style: var(--lbd-grp-title-font-style, inherit);
	font-weight: var(--lbd-grp-title-font-weight, inherit);
	letter-spacing: var(--lbd-grp-title-letter-spacing, inherit);
	text-transform: var(--lbd-grp-title-text-transform, inherit);
}

.ponca-lbd__group-divider {
	margin: 0;
	border: 0;
	border-top: var(--lbd-group-div-w, 1px) solid var(--lbd-group-div-c, #F5E7B3);
	width: 100%;
}

/* The grid: column count is per-group via the --cols variable. Cards naturally
   wrap to a second / third row when more cards exist than columns. */
.ponca-lbd__cards {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	gap: var(--lbd-cards-gap, 30px);
	align-items: stretch;
}

/* Defensive: cancel any rogue ::before / ::after content rules a theme might
   apply (e.g. counter badges via attr()), so no stray text leaks in. */
.ponca-lbd__cards::before,
.ponca-lbd__cards::after,
.ponca-lbd__card::before,
.ponca-lbd__card::after { content: none !important; }

/* ---------- Card ---------- */

.ponca-lbd__card {
	display: flex;
	flex-direction: column;
	gap: var(--lbd-card-inner-gap, 20px);
	padding: var(--lbd-card-pad, 40px);
	background: var(--lbd-card-bg, #FFFFFF);
	border: var(--lbd-card-border-w, 1px) solid var(--lbd-card-border-c, #F5E7B3);
	border-radius: var(--lbd-card-radius, 0px);
}

.ponca-lbd__avatar {
	display: block;
	width: var(--lbd-av-size, 126px);
	height: var(--lbd-av-size, 126px);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--lbd-av-bg, #F0F0F0);
	border-radius: var(--lbd-av-radius, 0px);
}
.ponca-lbd__avatar img {
	display: block;
	width: 100%; 
	height: 100%;
	object-fit: var(--lbd-av-fit, cover);
	object-position: var(--lbd-av-position, center);
}
.ponca-lbd__avatar--empty {
	background:
		repeating-linear-gradient(45deg, #f5f5f5 0 12px, #efefef 12px 24px);
}

/* SVG avatar mode: fixed 50×50 by default with chosen bg/icon color (overridable via inline style). */
.ponca-lbd__avatar--svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lbd-av-svg-size, 50px);
	height: var(--lbd-av-svg-size, 50px);
	background: var(--lbd-av-svg-bg, #FAF3DA);
	border-radius: var(--lbd-av-svg-radius, 6px);
	color: var(--lbd-av-svg-color, #A78607);
	overflow: visible;
}
.ponca-lbd__avatar--svg svg {
	display: block;
	width: 60%;
	height: 60%;
}
.ponca-lbd__avatar-svg-img {
	display: block;
	max-width: 70%;
	max-height: 70%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ponca-lbd__card-eyebrow,
.ponca-lbd__card-name,
.ponca-lbd__card-role,
.ponca-lbd__address { margin: 0; padding: 0; }

.ponca-lbd__card-eyebrow {
	color: var(--lbd-card-eye-color, #A78607);
	font-family: var(--lbd-card-eye-font-family, inherit);
	font-size: var(--lbd-card-eye-font-size, inherit);
	line-height: var(--lbd-card-eye-line-height, inherit);
	font-style: var(--lbd-card-eye-font-style, inherit);
	font-weight: var(--lbd-card-eye-font-weight, inherit);
	letter-spacing: var(--lbd-card-eye-letter-spacing, inherit);
	text-transform: var(--lbd-card-eye-text-transform, inherit);
}

.ponca-lbd__card-name {
	color: var(--lbd-card-name-color, #0D0F0E);
	font-family: var(--lbd-card-name-font-family, inherit);
	font-size: var(--lbd-card-name-font-size, inherit);
	line-height: var(--lbd-card-name-line-height, inherit);
	font-style: var(--lbd-card-name-font-style, inherit);
	font-weight: var(--lbd-card-name-font-weight, inherit);
	letter-spacing: var(--lbd-card-name-letter-spacing, inherit);
	text-transform: var(--lbd-card-name-text-transform, inherit);
}

.ponca-lbd__card-role {
	color: var(--lbd-card-role-color, #474747);
	font-family: var(--lbd-card-role-font-family, inherit);
	font-size: var(--lbd-card-role-font-size, inherit);
	line-height: var(--lbd-card-role-line-height, inherit);
	font-style: var(--lbd-card-role-font-style, inherit);
	font-weight: var(--lbd-card-role-font-weight, inherit);
	letter-spacing: var(--lbd-card-role-letter-spacing, inherit);
	text-transform: var(--lbd-card-role-text-transform, inherit);
}

.ponca-lbd__card-id {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ponca-lbd__card-divider {
	margin: 0;
	border: 0;
	border-top: var(--lbd-card-div-w, 1px) solid var(--lbd-card-div-c, #F5E7B3);
	width: 100%;
}

/* ---------- Contact rows ---------- */

.ponca-lbd__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--lbd-contact-gap, 10px);
}

.ponca-lbd__contact-row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: opacity 0.2s ease;
	color: var(--lbd-contact-color, #474747);
	font-family: var(--lbd-contact-font-family, inherit);
	font-size: var(--lbd-contact-font-size, inherit);
	line-height: var(--lbd-contact-line-height, inherit);
	font-style: var(--lbd-contact-font-style, inherit);
	font-weight: var(--lbd-contact-font-weight, inherit);
	letter-spacing: var(--lbd-contact-letter-spacing, inherit);
	text-transform: var(--lbd-contact-text-transform, inherit);
}
.ponca-lbd__contact-row:hover { opacity: 0.78; }
.ponca-lbd__contact-row:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Phone + fax group: shares phone icon column; fax stacks below phone, aligned to phone text. */
.ponca-lbd__contact-row--phone-group {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.ponca-lbd__contact-row--phone-group:hover { opacity: 1; }
.ponca-lbd__phone-fax {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ponca-lbd__phone-link {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.ponca-lbd__phone-link:hover { opacity: 0.78; }
.ponca-lbd__phone-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.ponca-lbd__fax-text { display: inline-block; }
.ponca-lbd__icon--spacer { visibility: hidden; }
.ponca-lbd__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lbd-icon-size, 20px);
	height: var(--lbd-icon-size, 20px);
	flex-shrink: 0;
	color: var(--lbd-contact-icon-color, #A78607);
}
.ponca-lbd__icon svg { display: block; width: 100%; height: 100%; }

.ponca-lbd__address {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--lbd-addr-color, #A7A7A7);
	font-family: var(--lbd-contact-font-family, inherit);
	font-size: var(--lbd-contact-font-size, inherit);
	line-height: var(--lbd-contact-line-height, inherit);
	font-style: var(--lbd-contact-font-style, inherit);
	font-weight: var(--lbd-contact-font-weight, inherit);
	letter-spacing: var(--lbd-contact-letter-spacing, inherit);
	text-transform: var(--lbd-contact-text-transform, inherit);
}

/* ---------- Button ---------- */

.ponca-lbd__button {
	display: inline-flex;
	align-items: center;
	gap: var(--lbd-btn-gap, 19px);
	padding: var(--lbd-btn-pad, 18px 32px);
	background: var(--lbd-btn-bg, #DEB209);
	color: var(--lbd-btn-text, #0D0F0E);
	border-radius: var(--lbd-btn-radius, 4px);
	text-decoration: none;
	align-self: flex-start;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-family: var(--lbd-btn-font-family, inherit);
	font-size: var(--lbd-btn-font-size, inherit);
	line-height: var(--lbd-btn-line-height, inherit);
	font-weight: var(--lbd-btn-font-weight, inherit);
	text-transform: var(--lbd-btn-text-transform, inherit);
}
.ponca-lbd__button:hover,
.ponca-lbd__button:focus-visible {
	background: var(--lbd-btn-hover-bg, #C7A008);
	color: var(--lbd-btn-hover-text, #0D0F0E);
}

/* ---------- Bottom pattern strip ---------- */

.ponca-lbd__pattern {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: var(--lbd-pattern-h, 83px);
	pointer-events: none;
	z-index: 0;
	background-image: var(--lbd-pattern-image, none);
	background-repeat: repeat-x;
	background-position: bottom center;
	background-size: cover!important;
	opacity:10!important
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.ponca-lbd {
		padding: clamp(3.5rem, 5vw + 1rem, 8rem) clamp(1.25rem, 3vw, 3rem);
	}
	.ponca-lbd__cards {
		grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	.ponca-lbd__container {
		padding:0px
	}
}
@media (max-width: 640px) {
	.ponca-lbd__cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.ponca-lbd__contact-row,
	.ponca-lbd__button { transition: none !important; }
}