/* =============================================================
 * Ponca Connect Hero — frontend styles
 * Pixel-perfect of the "Let's Connect" contact hero design.
 * ============================================================= */

.ponca-connect-hero {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	isolation: isolate;
	width: 100%;
	min-height: var(--pch-min-h, 748);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	background-color: var(--pch-bg-solid, #0D0F0E);
}

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

.ponca-connect-hero::before,
.ponca-connect-hero::after {
	content: none !important;
}

/* Background image / gradient layer */
.ponca-connect-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: var(--pch-bg-size, cover);
	background-position: var(--pch-bg-pos, center center);
	background-repeat: no-repeat;
}

.ponca-connect-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Container */
.ponca-connect-hero__container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--pch-max, 1600px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pch-stack-gap, 48px);
}

/* Eyebrow */
.ponca-connect-hero__eyebrow {
	margin: 0;
	display: inline-block;
	color: var(--pch-eyebrow-color, #A78607);
	font-family: var(--pch-eyebrow-font-family);
	font-size: var(--pch-eyebrow-font-size);
	line-height: var(--pch-eyebrow-line-height);
	font-style: var(--pch-eyebrow-font-style);
	font-weight: var(--pch-eyebrow-font-weight);
	letter-spacing: var(--pch-eyebrow-letter-spacing);
	text-transform: var(--pch-eyebrow-text-transform);
}

/* Body columns: left typography + right cards */
.ponca-connect-hero__body {
	width: 100%;
	display: grid;
	grid-template-columns: var(--pch-left-w, 1fr) var(--pch-right-w, 728px);
	gap: var(--pch-col-gap, 48px);
	align-items: var(--pch-cols-align, flex-start);
}

/* Left column — typography */
.ponca-connect-hero__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ponca-connect-hero__title {
	margin: 0;
	padding: 0;
	font-family: var(--pch-title-font-family);
	font-size: var(--pch-title-font-size);
	line-height: var(--pch-title-line-height);
	letter-spacing: var(--pch-title-letter-spacing);
}

.ponca-connect-hero__title-line1 {
	color: var(--pch-title-l1-color, #F0EBE4);
	font-style: var(--pch-title-l1-style, normal);
	font-weight: var(--pch-title-l1-weight, 300);
}

.ponca-connect-hero__title-line2 {
	color: var(--pch-title-l2-color, #DEB209);
	font-style: var(--pch-title-l2-style, italic);
	font-weight: var(--pch-title-l2-weight, 300);
}

.ponca-connect-hero__title--stacked {
	display: flex;
	flex-direction: column;
}

.ponca-connect-hero__title--stacked .ponca-connect-hero__title-line1,
.ponca-connect-hero__title--stacked .ponca-connect-hero__title-line2 {
	display: block;
}

.ponca-connect-hero__title--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.ponca-connect-hero__title--inline .ponca-connect-hero__title-line1,
.ponca-connect-hero__title--inline .ponca-connect-hero__title-line2 {
	display: inline;
}

.ponca-connect-hero__title--inline .ponca-connect-hero__title-line1+.ponca-connect-hero__title-line2::before {
	content: "";
	display: inline-block;
	width: var(--pch-title-gap, 0.25em);
}

.ponca-connect-hero__description {
	margin: 0;
	margin-top: var(--pch-title-desc-gap, 47px);
	max-width: var(--pch-desc-max, 522px);
	color: var(--pch-desc-color, rgba(240, 235, 228, 0.6));
	font-family: var(--pch-desc-font-family);
	font-size: var(--pch-desc-font-size);
	line-height: var(--pch-desc-line-height);
	font-style: var(--pch-desc-font-style);
	font-weight: var(--pch-desc-font-weight);
	letter-spacing: var(--pch-desc-letter-spacing);
}

.ponca-connect-hero__description a {
	color: var(--pch-card-arrow-bg, #DEB209);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ponca-connect-hero__description a:hover {
	text-decoration: none;
}

.ponca-connect-hero__description strong {
	font-weight: 600;
}

.ponca-connect-hero__description em {
	font-style: italic;
}

/* Right column — cards */
.ponca-connect-hero__cards {
	display: flex;
	flex-direction: column;
	gap: var(--pch-cards-gap, 20px);
	width: 100%;
}

.ponca-connect-hero__card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--pch-card-inner-gap, 32px);
	padding:
		var(--pch-card-pad-y, 10px) var(--pch-card-pad-x, 32px);
	min-height: var(--pch-card-min-h, 78px);
	background: var(--pch-card-bg, rgba(78, 62, 3, 0.4));
	border:
		var(--pch-card-border-w, 1px) var(--pch-card-border-style, solid) var(--pch-card-border-color, rgba(184, 120, 78, 0.2));
	border-radius: var(--pch-card-radius, 8px);
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ponca-connect-hero__card:hover {
	border-color: rgba(184, 120, 78, 0.4);
}

.ponca-connect-hero__card-label {
	flex: 0 0 auto;
	width: var(--pch-card-label-w, 100px);
	margin: 0;
	padding: 0 0 4px 0;
	display: inline-flex;
	align-items: center;
	color: var(--pch-card-label-color, #DEB209);
	font-family: var(--pch-card-label-font-family);
	font-size: var(--pch-card-label-font-size);
	line-height: var(--pch-card-label-line-height);
	font-style: var(--pch-card-label-font-style);
	font-weight: var(--pch-card-label-font-weight);
	letter-spacing: var(--pch-card-label-letter-spacing);
	text-transform: var(--pch-card-label-text-transform);
}

.ponca-connect-hero__card-value-wrap {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

.ponca-connect-hero__card-value {
	margin: 0;
	padding: 0;
	display: inline;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--pch-card-value-color, #F0EBE4);
	font-family: var(--pch-card-value-font-family);
	font-size: var(--pch-card-value-font-size);
	line-height: var(--pch-card-value-line-height);
	font-style: var(--pch-card-value-font-style);
	font-weight: var(--pch-card-value-font-weight);
	letter-spacing: var(--pch-card-value-letter-spacing);
}

a.ponca-connect-hero__card-value-link {
	color: var(--pch-card-value-color, #F0EBE4);
	text-decoration: none;
}

a.ponca-connect-hero__card-value-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Arrow button */
.ponca-connect-hero__card-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pch-arrow-size, 34px);
	height: var(--pch-arrow-size, 34px);
	border-radius: var(--pch-arrow-radius, 50%);
	background: var(--pch-arrow-bg, #A78607);
	color: var(--pch-arrow-icon-color, #F0EBE4);
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ponca-connect-hero__card-arrow:hover {
	background: var(--pch-arrow-hover-bg, #C8A008);
	transform: translate(2px, -2px);
}

.ponca-connect-hero__card-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ponca-connect-hero__card-arrow-icon {
	width: var(--pch-arrow-icon-size, 20px);
	height: var(--pch-arrow-icon-size, 20px);
	display: block;
}

.ponca-connect-hero__card-arrow-icon path,
.ponca-connect-hero__card-arrow-icon line {
	stroke: currentColor;
	stroke-width: var(--pch-arrow-stroke, 1.66);
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

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

@media (max-width: 960px) {
	.ponca-connect-hero__body {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: start;
		gap: clamp(2rem, 5vw, 3rem);
	}

	.ponca-connect-hero__title--stacked {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	.ponca-connect-hero {
		min-height: auto;
	}

	.ponca-connect-hero.sec_padding {
		padding-top: 180px
	}
}

@media (max-width: 640px) {
	.ponca-connect-hero__card {
		flex-wrap: wrap;
		gap: 4px;
		padding: 16px 20px;
		min-height: 0;
	}

	.ponca-connect-hero__card-label {
		width: 100%;
		padding-bottom: 0;
	}

	.ponca-connect-hero__card-value-wrap {
		flex: 1 1 0;
	}

	.ponca-connect-hero__card-value {
		line-height: 1.3 !important;
		white-space: normal;
	}
}

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

	.ponca-connect-hero__card,
	.ponca-connect-hero__card-arrow {
		transition: none !important;
	}
}