/* =============================================================
 * Ponca District Announcements — frontend styles
 * ============================================================= */

.ponca-dann {
	position: relative;
	box-sizing: border-box;
	padding: var(--dann-pad-top, 128px) var(--dann-pad-x, 48px) var(--dann-pad-bottom, 128px);
}

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

.ponca-dann__container {
	width: 100%;
	max-width: var(--dann-max, 1600px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--dann-gap, 60px);
	padding:0px var(--dann-pad-x)
}

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

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

.ponca-dann__eyebrow,
.ponca-dann__title,
.ponca-dann__description { margin: 0; padding: 0; }

.ponca-dann__eyebrow {
	color: var(--dann-eye-color, #DEB209);
	font-family: var(--dann-eye-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--dann-eye-font-size, 13px);
	line-height: var(--dann-eye-line-height, 22px);
	font-style: var(--dann-eye-font-style, normal);
	font-weight: var(--dann-eye-font-weight, 600);
	letter-spacing: var(--dann-eye-letter-spacing, 3px);
	text-transform: var(--dann-eye-text-transform, uppercase);
}

.ponca-dann__title {
	font-family: var(--dann-title-font-family, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--dann-title-font-size, clamp(2.25rem, 1.4rem + 3.2vw, 56px));
	line-height: var(--dann-title-line-height, 1.11);
	font-weight: var(--dann-title-font-weight, 300);
	letter-spacing: var(--dann-title-letter-spacing, -0.56px);
}

.ponca-dann__title-line1 {
	color: var(--dann-title-line1-color, #0D0F0E);
	font-style: var(--dann-title-line1-font-style, normal);
}

.ponca-dann__title-line2 {
	color: var(--dann-title-line2-color, #0D0F0E);
	font-style: var(--dann-title-line2-font-style, italic);
}

.ponca-dann__description {
	color: var(--dann-desc-color, #474747);
	max-width: var(--dann-desc-max-width, 900px);
	margin-top: var(--dann-desc-margin-top, 24px);
	font-family: var(--dann-desc-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--dann-desc-font-size, 18px);
	line-height: var(--dann-desc-line-height, 30px);
	font-style: var(--dann-desc-font-style, normal);
	font-weight: var(--dann-desc-font-weight, 400);
}

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

.ponca-dann__title--inline { display: block; }
.ponca-dann__title--inline .ponca-dann__title-line1,
.ponca-dann__title--inline .ponca-dann__title-line2 { display: inline; }

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

/* ---------- Image gallery ---------- */

.ponca-dann__gallery {
	width: 100%;
}

/*
 * Defensive reset: some themes / plugins inject `content: attr(data-*)`
 * counters via ::before / ::after on generic selectors. Suppress those
 * here so they can't paint stray numbers inside the gallery.
 */
.ponca-dann__gallery::before,
.ponca-dann__gallery::after,
.ponca-dann__img-frame::before,
.ponca-dann__img-frame::after { content: none !important; }

/* Single-image variant — keeps the original 740x572 dimensions from the design. */
.ponca-dann__gallery--single {
	display: flex;
	justify-content: var(--dann-img-single-align, flex-start);
}
.ponca-dann__gallery--single .ponca-dann__img-frame {
	width: 100%;
	max-width: var(--dann-img-single-w, 740px);
	height: var(--dann-img-single-h, 572px);
}

/* Grid variant — two-per-row by default, each tile keeps the same aspect ratio. */
.ponca-dann__gallery--grid {
	display: grid;
	grid-template-columns: repeat(var(--dann-img-cols, 2), 1fr);
	gap: var(--dann-img-gap, 30px);
}
.ponca-dann__gallery--grid .ponca-dann__img-frame {
	width: 100%;
	aspect-ratio: var(--dann-img-aspect, 740 / 572);
	height: auto;
}

.ponca-dann__img-frame {
	display: block;
	overflow: hidden;
	border: var(--dann-img-border-w, 1px) solid var(--dann-img-border-c, #F3F3F3);
	border-radius: var(--dann-img-radius, 10px);
	background-color: #f3f3f3;
}

.ponca-dann__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--dann-img-fit, cover);
	object-position: center;
}

.ponca-dann__img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: repeating-linear-gradient(45deg, #f5f5f5 0 12px, #efefef 12px 24px);
}

/* ---------- Cards ---------- */

.ponca-dann__card {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--dann-card-inner-gap, 30px);
	padding: var(--dann-card-pad, 30px);
	background: var(--dann-card-bg, #FFFDF6);
	border: var(--dann-card-border-w, 1px) solid var(--dann-card-border-c, #F5E7B3);
	border-radius: var(--dann-card-radius, 0px);
}

.ponca-dann__card-content,
.ponca-dann__card-headline {
	display: flex;
	flex-direction: column;
	gap: var(--dann-card-content-gap, 20px);
}

.ponca-dann__card-eyebrow,
.ponca-dann__card-title,
.ponca-dann__card-body,
.ponca-dann__sub-heading,
.ponca-dann__sub-body { margin: 0; padding: 0; }

.ponca-dann__card-eyebrow {
	color: var(--dann-card-eye-color, #A78607);
	font-family: var(--dann-card-eye-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--dann-card-eye-font-size, 10px);
	line-height: var(--dann-card-eye-line-height, 22px);
	font-style: var(--dann-card-eye-font-style, normal);
	font-weight: var(--dann-card-eye-font-weight, 600);
	letter-spacing: var(--dann-card-eye-letter-spacing, 3px);
	text-transform: var(--dann-card-eye-text-transform, uppercase);
}

.ponca-dann__card-title {
	color: var(--dann-card-title-color, #0D0F0E);
	font-family: var(--dann-card-title-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--dann-card-title-font-size, 28px);
	line-height: var(--dann-card-title-line-height, 36px);
	font-style: var(--dann-card-title-font-style, normal);
	font-weight: var(--dann-card-title-font-weight, 600);
}

.ponca-dann__card-body,
.ponca-dann__sub-body {
	color: var(--dann-card-body-color, #474747);
	font-family: var(--dann-card-body-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--dann-card-body-font-size, 16px);
	line-height: var(--dann-card-body-line-height, 25px);
	font-style: var(--dann-card-body-font-style, normal);
	font-weight: var(--dann-card-body-font-weight, 400);
}

.ponca-dann__sub-heading {
	color: var(--dann-sub-heading-color, #0D0F0E);
	font-family: var(--dann-sub-heading-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--dann-sub-heading-font-size, 18px);
	line-height: var(--dann-sub-heading-line-height, 23px);
	font-style: var(--dann-sub-heading-font-style, normal);
	font-weight: var(--dann-sub-heading-font-weight, 600);
}

.ponca-dann__card-body a,
.ponca-dann__sub-body a {
	color: var(--dann-body-link, #A78607);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ponca-dann__card-body a:hover,
.ponca-dann__sub-body a:hover { text-decoration: none; }

.ponca-dann__card-body strong,
.ponca-dann__sub-body strong { font-weight: 600; }
.ponca-dann__card-body em,
.ponca-dann__sub-body em     { font-style: italic; }

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

.ponca-dann__sub-sections {
	display: flex;
	flex-direction: column;
	gap: var(--dann-subs-gap, 20px);
}

.ponca-dann__sub-section {
	display: flex;
	flex-direction: column;
	gap: var(--dann-sub-gap, 12px);
}

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

.ponca-dann__button {
	display: inline-flex;
	align-items: center;
	gap: var(--dann-btn-gap, 14px);
	padding: var(--dann-btn-pad, 16px 32px 16px 24px);
	border: var(--dann-btn-border-w, 0) solid var(--dann-btn-border-c, transparent);
	border-radius: var(--dann-btn-radius, 4px);
	background: var(--dann-btn-bg, #0D0F0E);
	color: var(--dann-btn-text, #F0EBE4);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	align-self: flex-start;
	cursor: pointer;
	font-family: var(--dann-btn-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--dann-btn-font-size, 16px);
	line-height: var(--dann-btn-line-height, 25px);
	font-style: var(--dann-btn-font-style, normal);
	font-weight: var(--dann-btn-font-weight, 400);
	text-transform: var(--dann-btn-text-transform, capitalize);
}
.ponca-dann__button:hover,
.ponca-dann__button:focus-visible {
	background: var(--dann-btn-hover-bg, #2A2A2A);
	color: var(--dann-btn-hover-text, #FFFFFF);
}
.ponca-dann__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.ponca-dann__button-arrow {
	display: inline-block;
	color: var(--dann-btn-arrow, #FDFDFD);
	font-family: var(--dann-btn-arrow-font-family, Arial, sans-serif);
	font-size: var(--dann-btn-arrow-font-size, 12.8px);
	font-weight: var(--dann-btn-arrow-font-weight, 700);
	letter-spacing: var(--dann-btn-arrow-letter-spacing, 1.92px);
}

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

@media (max-width: 1100px) {
	.ponca-dann {
		padding: clamp(3.5rem, 5vw + 1rem, 8rem) clamp(1.25rem, 3vw, 3rem);
	}
	.ponca-dann__container { gap: clamp(2rem, 4vw, 3.5rem);
	padding:0px }
	.ponca-dann__gallery--single .ponca-dann__img-frame {
		height: auto;
		aspect-ratio: var(--dann-img-aspect, 740 / 572);
	}
	
}

@media (max-width: 640px) {
	.ponca-dann__gallery--grid { grid-template-columns: 1fr; }
}

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