/* =============================================================
 * Ponca Crisis Lifeline — frontend styles
 * Class prefix: ponca-cl
 *
 * All per-instance values arrive as --ponca-cl-* custom properties set on
 * the .ponca-cl 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 (1920 artboard, "Content Wrapper"):
 *   container ....... 1504px, padding 0
 *   row ............. flex row, align center, gap 60
 *   media ........... 644 x 322, radius 20
 *   content ......... 800 wide, column, gap 24 (icon <-> caption)
 *   icon ............ 60x60 box, 50x50 glyph, 3.2px stroke
 *   caption ......... DM Sans 600 / 20 / 30, color #E9E9E9, max-width 800
 * ============================================================= */

.ponca-cl {
	position: relative;
	width: 100%;
	background: var(--ponca-cl-bg, #0d0f0e);
}

.ponca-cl *,
.ponca-cl *::before,
.ponca-cl *::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-cl.has-custom-padding.sec_padding {
	padding-top: var(--ponca-cl-section-pad-top, 80px);
	padding-bottom: var(--ponca-cl-section-pad-bottom, 80px);
}

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

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

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

.ponca-cl.is-reversed .ponca-cl__row {
	flex-direction: row-reverse;
}

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

.ponca-cl__media {
	position: relative;
	flex: 0 1 var(--ponca-cl-img-width, 644px);
	width: var(--ponca-cl-img-width, 644px);
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--ponca-cl-img-radius, 20px);
	aspect-ratio: var(--ponca-cl-img-aspect, 644 / 322);
	background-color: var(--ponca-cl-img-bg, #1a1c1b);
}

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

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

.ponca-cl__content {
	display: flex;
	flex: 1 1 var(--ponca-cl-content-width, 800px);
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: var(--ponca-cl-content-width, 800px);
	max-width: 100%;
	min-width: 0;
	gap: var(--ponca-cl-content-gap, 24px);
}

/* ---------- Icon -------------------------------------------------- */

.ponca-cl__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--ponca-cl-icon-box, 60px);
	height: var(--ponca-cl-icon-box, 60px);
	background-color: var(--ponca-cl-icon-bg, transparent);
	color: var(--ponca-cl-icon-color, #deb209);
}

.ponca-cl__icon svg,
.ponca-cl__icon-image {
	display: block;
	width: var(--ponca-cl-icon-size, 50px);
	height: var(--ponca-cl-icon-size, 50px);
	object-fit: contain;
}

/* ---------- Caption ------------------------------------------------ */

.ponca-cl__caption {
	margin: 0;
	max-width: var(--ponca-cl-caption-max, 800px);
	color: var(--ponca-cl-caption-color, #e9e9e9);
	font-family: var(--ponca-cl-caption-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--ponca-cl-caption-font-size, 20px);
	line-height: var(--ponca-cl-caption-line-height, 30px);
	font-weight: var(--ponca-cl-caption-font-weight, 600);
	letter-spacing: var(--ponca-cl-caption-letter-spacing, 0.2px);
}

.ponca-cl__caption strong,
.ponca-cl__caption b {
	font-weight: inherit;
	font-style: normal;
	color: var(--ponca-cl-caption-hl1, #deb209);
}

.ponca-cl__caption em,
.ponca-cl__caption i {
	font-weight: inherit;
	font-style: normal;
	color: var(--ponca-cl-caption-hl2, #2fbfbf);
}

.ponca-cl__caption a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================
 * Responsive
 * ============================================================= */

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

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

@media (max-width: 1024px) {
	.ponca-cl__row,
	.ponca-cl.is-reversed .ponca-cl__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.ponca-cl__media,
	.ponca-cl__content {
		flex: 0 0 auto;
		width: 100%;
	}
}

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

	.ponca-cl__caption {
		font-size: 17px;
		line-height: 27px;
	}

	.ponca-cl__icon {
		width: 48px;
		height: 48px;
	}

	.ponca-cl__icon svg,
	.ponca-cl__icon-image {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 560px) {
	.ponca-cl__caption {
		font-size: 15px;
		line-height: 24px;
	}
}