/* =============================================================
 * Ponca Tribal Healthcare — frontend styles
 * Class prefix: ponca-th
 *
 * All per-instance values arrive as --ponca-th-* custom properties set on
 * the .ponca-th wrapper by render.php (and by the editor preview). The
 * fallback in every var() is the Figma value, so the block renders exactly
 * to spec even with no attributes stored.
 *
 * Pixel mapping (Figma "Frame 94", 1920 artboard):
 *   container ....... 1504px, padding 0
 *   row ............. flex row, align center, gap 60
 *   content ......... 693 (1504 - 60 - 751), inner gap 60, intro gap 14
 *   title ........... Cormorant Garamond 300 / 56 / 62 / -0.56
 *   description ..... DM Sans 400 / 18 / 30, max-width 594
 *   buttons ......... 352x60 and 229x60, gap 24
 *   media ........... 751 x 503, radius 10
 * ============================================================= */

.ponca-th {
	position: relative;
	width: 100%;
	background: var(--ponca-th-bg, #ffffff);
}

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

/* Section padding is owned by the theme's .sec_padding (and its responsive
 * rules) unless the editor explicitly overrides it. */
.ponca-th.has-custom-padding.sec_padding {
	padding-top: var(--ponca-th-section-pad-top, 120px);
	padding-bottom: var(--ponca-th-section-pad-bottom, 120px);
	padding-left: var(--ponca-th-section-pad-x, 0px);
	padding-right: var(--ponca-th-section-pad-x, 0px);
}

/* ---------- Container ---------------------------------------- */

.ponca-th .ponca-th__container {
	max-width: var(--ponca-th-container-max, 1504px);
	padding: var(--ponca-th-container-pad-y, 0px) var(--ponca-th-container-pad-x, 0px);
}

.ponca-th__row {
	display: flex;
	flex-direction: row;
	align-items: var(--ponca-th-row-align, center);
	gap: var(--ponca-th-row-gap, 60px);
}

.ponca-th.is-reversed .ponca-th__row {
	flex-direction: row-reverse;
}

/* ---------- Content column ----------------------------------- */

.ponca-th__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ponca-th-content-gap, 60px);
	min-width: 0;
}

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

/* ---------- Eyebrow ------------------------------------------ */

.ponca-th__eyebrow {
	margin: 0;
	color: var(--ponca-th-eyebrow-color, #deb209);
	font-family: var(--ponca-th-eyebrow-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--ponca-th-eyebrow-font-size, 13px);
	line-height: var(--ponca-th-eyebrow-line-height, 22px);
	font-weight: var(--ponca-th-eyebrow-font-weight, 600);
	font-style: var(--ponca-th-eyebrow-font-style, normal);
	letter-spacing: var(--ponca-th-eyebrow-letter-spacing, 3px);
	text-transform: var(--ponca-th-eyebrow-text-transform, uppercase);
}

/* ---------- Title -------------------------------------------- */

.ponca-th__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	font-family: var(--ponca-th-title-font-family, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--ponca-th-title-font-size, 56px);
	line-height: var(--ponca-th-title-line-height, 62px);
	font-weight: var(--ponca-th-title-font-weight, 300);
	letter-spacing: var(--ponca-th-title-letter-spacing, -0.56px);
	text-transform: var(--ponca-th-title-text-transform, none);
}

/* Optional single-line layout: both halves flow inline and wrap together. */
.ponca-th.title-inline .ponca-th__title {
	display: block;
}

.ponca-th.title-inline .ponca-th__title-line--accent::before {
	content: ' ';
}

.ponca-th__title-line {
	display: block;
}

.ponca-th.title-inline .ponca-th__title-line {
	display: inline;
}

.ponca-th__title-line--primary {
	color: var(--ponca-th-title-l1-color, #0d0f0e);
	font-style: var(--ponca-th-title-l1-style, normal);
}

.ponca-th__title-line--accent {
	color: var(--ponca-th-title-l2-color, #b28e07);
	font-style: var(--ponca-th-title-l2-style, italic);
}

/* ---------- Description -------------------------------------- */

.ponca-th__description {
	max-width: var(--ponca-th-desc-max, 594px);
	margin: 0;
	color: var(--ponca-th-desc-color, #474747);
	font-family: var(--ponca-th-desc-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--ponca-th-desc-font-size, 18px);
	line-height: var(--ponca-th-desc-line-height, 30px);
	font-weight: var(--ponca-th-desc-font-weight, 400);
	font-style: var(--ponca-th-desc-font-style, normal);
	letter-spacing: var(--ponca-th-desc-letter-spacing, 0px);
}

.ponca-th__description a {
	color: var(--ponca-th-desc-link, #a78607);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Buttons ------------------------------------------ */

.ponca-th__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--ponca-th-actions-gap, 24px);
}

.ponca-th__btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.ponca-th__btn:hover,
.ponca-th__btn:focus-visible {
	text-decoration: none;
}

.ponca-th__btn:focus-visible {
	outline: 2px solid #8c1704;
	outline-offset: 3px;
}

.ponca-th__btn-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.ponca-th__btn-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Figma draws the 1px stroke *inside* the 60px box:
 *   1 + 17 + 24 (icon) + 17 + 1 = 60 tall
 *   1 + 31 + icon + gap + label + 31 + 1 = 352 / 229 wide
 * so both buttons carry a border and the padding compensates for it.
 */
.ponca-th__btn--primary {
	gap: var(--ponca-th-pri-icon-gap, 19px);
	min-height: var(--ponca-th-pri-min-h, 60px);
	padding: var(--ponca-th-pri-pad-y, 17px) var(--ponca-th-pri-pad-x, 31px);
	background-color: var(--ponca-th-pri-bg, #deb209);
	border: var(--ponca-th-pri-border-width, 1px) solid var(--ponca-th-pri-border-color, #deb209);
	border-radius: var(--ponca-th-pri-radius, 4px);
	color: var(--ponca-th-pri-color, #0d0f0e);
	font-family: var(--ponca-th-pri-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--ponca-th-pri-font-size, 16px);
	line-height: var(--ponca-th-pri-line-height, 22px);
	font-weight: var(--ponca-th-pri-font-weight, 600);
	font-style: var(--ponca-th-pri-font-style, normal);
	letter-spacing: var(--ponca-th-pri-letter-spacing, 1.2px);
	text-transform: var(--ponca-th-pri-text-transform, uppercase);
}

.ponca-th__btn--primary:hover,
.ponca-th__btn--primary:focus-visible {
	background-color: var(--ponca-th-pri-hover-bg, #b28e07);
	border-color: var(--ponca-th-pri-hover-border, #b28e07);
	color: var(--ponca-th-pri-hover-color, #0d0f0e);
}

.ponca-th__btn--primary .ponca-th__btn-icon {
	width: var(--ponca-th-pri-icon-size, 24px);
	height: var(--ponca-th-pri-icon-size, 24px);
}

.ponca-th__btn--secondary {
	gap: var(--ponca-th-sec-icon-gap, 19px);
	min-height: var(--ponca-th-sec-min-h, 60px);
	padding: var(--ponca-th-sec-pad-y, 17px) var(--ponca-th-sec-pad-x, 31px);
	background-color: var(--ponca-th-sec-bg, transparent);
	border: var(--ponca-th-sec-border-width, 1px) solid var(--ponca-th-sec-border-color, #deb209);
	border-radius: var(--ponca-th-sec-radius, 4px);
	color: var(--ponca-th-sec-color, #0d0f0e);
	font-family: var(--ponca-th-sec-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--ponca-th-sec-font-size, 16px);
	line-height: var(--ponca-th-sec-line-height, 22px);
	font-weight: var(--ponca-th-sec-font-weight, 600);
	font-style: var(--ponca-th-sec-font-style, normal);
	letter-spacing: var(--ponca-th-sec-letter-spacing, 1.2px);
	text-transform: var(--ponca-th-sec-text-transform, uppercase);
}

.ponca-th__btn--secondary:hover,
.ponca-th__btn--secondary:focus-visible {
	background-color: var(--ponca-th-sec-hover-bg, #deb209);
	border-color: var(--ponca-th-sec-hover-border, #deb209);
	color: var(--ponca-th-sec-hover-color, #0d0f0e);
}

.ponca-th__btn--secondary .ponca-th__btn-icon {
	width: var(--ponca-th-sec-icon-size, 24px);
	height: var(--ponca-th-sec-icon-size, 24px);
}

/* ---------- Media column ------------------------------------- */

.ponca-th__media {
	position: relative;
	flex: 0 1 var(--ponca-th-img-width, 751px);
	width: var(--ponca-th-img-width, 751px);
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--ponca-th-img-radius, 10px);
	aspect-ratio: var(--ponca-th-img-aspect, 751 / 503);
	background-color: var(--ponca-th-img-bg, #f5e7b3);
}

.ponca-th__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ponca-th-img-fit, cover);
	object-position: var(--ponca-th-img-position, center center);
	border-radius: inherit;
}

/* ---------- Pattern strip ------------------------------------ */

.ponca-th__pattern {
	position: absolute;
	right: 0;
	left: 0;
	bottom: var(--ponca-th-pattern-offset, 0px);
	display: block;
	height: var(--ponca-th-pattern-height, 42px);
	background-color: var(--ponca-th-pattern-band-bg, transparent);
	background-image: var(--ponca-th-pattern-image);
	background-repeat: var(--ponca-th-pattern-repeat, repeat-x);
	background-position: var(--ponca-th-pattern-pos, bottom center);
	background-size: var(--ponca-th-pattern-size, 180px 100%);
	opacity: var(--ponca-th-pattern-opacity, 1);
	pointer-events: none;
}

/* ---------- Exit safely -------------------------------------- */

.ponca-th__exit {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--ponca-th-exit-gap, 10px);
	min-width: var(--ponca-th-exit-min-w, 175px);
	min-height: var(--ponca-th-exit-min-h, 61px);
	padding: var(--ponca-th-exit-pad-y, 10px) var(--ponca-th-exit-pad-x, 26px);
	background-color: var(--ponca-th-exit-bg, #deb209);
	border-radius: var(--ponca-th-exit-radius, 100px);
	color: var(--ponca-th-exit-color, #8c1704);
	font-family: var(--ponca-th-exit-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--ponca-th-exit-font-size, 15px);
	line-height: var(--ponca-th-exit-line-height, 25px);
	font-weight: var(--ponca-th-exit-font-weight, 600);
	font-style: var(--ponca-th-exit-font-style, normal);
	letter-spacing: var(--ponca-th-exit-letter-spacing, 0.15px);
	text-transform: var(--ponca-th-exit-text-transform, uppercase);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.ponca-th__exit:hover,
.ponca-th__exit:focus-visible {
	background-color: var(--ponca-th-exit-hover-bg, #b28e07);
	color: var(--ponca-th-exit-hover-color, #8c1704);
	text-decoration: none;
}

.ponca-th__exit:focus-visible {
	outline: 2px solid #8c1704;
	outline-offset: 3px;
}

.ponca-th__exit-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--ponca-th-exit-icon-size, 24px);
	height: var(--ponca-th-exit-icon-size, 24px);
}

.ponca-th__exit-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ponca-th__exit--fixed-bottom-right,
.ponca-th__exit--fixed-bottom-left {
	position: fixed;
	bottom: var(--ponca-th-exit-offset-y, 40px);
	z-index: var(--ponca-th-exit-z, 999);
}

.ponca-th__exit--fixed-bottom-right {
	right: var(--ponca-th-exit-offset-x, 40px);
}

.ponca-th__exit--fixed-bottom-left {
	left: var(--ponca-th-exit-offset-x, 40px);
}

.ponca-th__exit--section-bottom-right {
	position: absolute;
	right: var(--ponca-th-exit-offset-x, 40px);
	bottom: var(--ponca-th-exit-offset-y, 40px);
	z-index: var(--ponca-th-exit-z, 999);
}

/* =============================================================
 * Responsive
 *
 * The theme's responsive.css already owns .container and .sec_padding
 * (max-width 100% + 100px/32px at 1580, 64px/20px at 768), so this block
 * only adapts its own internals.
 * ============================================================= */

@media (max-width: 1580px) {
	.ponca-th .ponca-th__container {
		max-width: 100%;
	}
}

@media (max-width: 1280px) {
	.ponca-th__row {
		gap: 40px;
	}

	.ponca-th__content {
		gap: 44px;
	}

	.ponca-th__title {
		font-size: clamp(40px, 4vw, 56px);
		line-height: 1.12;
	}

	.ponca-th__media {
		flex: 1 1 45%;
		width: auto;
	}
}

@media (max-width: 1024px) {

	.ponca-th__row,
	.ponca-th.is-reversed .ponca-th__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 48px;
	}

	.ponca-th__content,
	.ponca-th__media {
		flex: 0 0 auto;
		width: 100%;
	}

	.ponca-th__description {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.ponca-th__content {
		gap: 36px;
	}

	.ponca-th__title {
		font-size: 40px;
		line-height: 46px;
		letter-spacing: -0.4px;
	}

	.ponca-th__description {
		font-size: 16px;
		line-height: 27px;
	}

	.ponca-th__actions {
		gap: 16px;
	}

	.ponca-th__pattern {
		height: 32px;
	}

	.ponca-th__exit--fixed-bottom-right,
	.ponca-th__exit--fixed-bottom-left,
	.ponca-th__exit--section-bottom-right {
		bottom: 160px;
	}

	.ponca-th__exit--fixed-bottom-right,
	.ponca-th__exit--section-bottom-right {
		right: 20px;
	}

	.ponca-th__exit--fixed-bottom-left {
		left: 20px;
	}
}

@media (max-width: 560px) {
	.ponca-th__title {
		font-size: 32px;
		line-height: 38px;
	}

	.ponca-th__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.ponca-th__btn {
		justify-content: center;
		width: 100%;
	}

	.ponca-th__btn--primary,
	.ponca-th__btn--secondary {
		gap: 14px;
		padding: 16px 20px;
		font-size: 14px;
		letter-spacing: 1px;
	}

	.ponca-th__pattern {
		height: 26px;
	}

	.ponca-th__exit {
		min-width: 0;
		min-height: 48px;
		padding: 8px 18px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ponca-th__btn,
	.ponca-th__exit {
		transition: none;
	}
}