/* DSD Designer Feature 001 — front-end defaults = the reference image.
   Every value is var(--dsdqp-…, DEFAULT) so an untouched control changes nothing.
   Font: Jost, confirmed from the theme's own @font-face source.
   Typography confirmed directly from the user's exported "About Me" page CSS
   (post-116_YAcJ.css, the Elementor page-specific stylesheet for that exact
   page — includes the actual per-element rules, not just linked assets like
   the earlier zip): title 29px/400/1.2 line-height/#222222, kicker color
   #222222, contact heading 16px/500, contact body 18px/300/1.3 line-height,
   body text color #777777 (theme's --e-global-color-text). Photo and
   signature are the reference page's own actual images (same export),
   baked in as data: URIs. */

.dsdqp-block {
	--dsdqp-gap: var(--dsdqp-section-colgap, 70px);
	box-sizing: border-box;
	width: var(--dsdqp-section-width, 100%);
	max-width: var(--dsdqp-section-maxwidth, 1200px);
	margin-left: var(--dsdqp-section-marginx, auto);
	margin-right: var(--dsdqp-section-marginx, auto);
	padding: var(--dsdqp-section-paddingt, 0) var(--dsdqp-section-paddingr, 20px) var(--dsdqp-section-paddingb, 0) var(--dsdqp-section-paddingl, 20px);
	background: var(--dsdqp-section-background, transparent);
	display: grid;
	grid-template-columns: var(--dsdqp-section-colratio, 1fr 1fr);
	gap: var(--dsdqp-gap);
	align-items: stretch;
	text-align: var(--dsdqp-section-align, left);
}
.dsdqp-block *, .dsdqp-block *::before, .dsdqp-block *::after { box-sizing: border-box; }
.dsdqp-block ::before, .dsdqp-block ::after { display: none !important; content: none !important; }

.dsdqp-col-media {
	position: relative;
	order: var(--dsdqp-photo-order, 0);
	/* Photo breaks out to the true left edge of the page, independent of
	   the section's own centering/max-width/padding — confirmed as the
	   reference layout's actual behavior. Only this column breaks out;
	   the text column stays inside the configured section width. */
	margin-left: calc( ( 100vw - var(--dsdqp-section-maxwidth, 1200px) ) / -2 - var(--dsdqp-section-paddingl, 20px) );
}
.dsdqp-photo-wrap { position: relative; width: 100%; height: 100%; }
.dsdqp-photo {
	display: block;
	width: 100%;
	height: var(--dsdqp-photo-height, 100%);
	min-height: var(--dsdqp-photo-minheight, 520px);
	object-fit: var(--dsdqp-photo-fit, cover);
	border-radius: var(--dsdqp-photo-radius, 0px);
	border: var(--dsdqp-photo-border, none);
}

.dsdqp-badge {
	position: absolute;
	left: var(--dsdqp-badge-left, 0px);
	bottom: var(--dsdqp-badge-bottom, 0px);
	width: var(--dsdqp-badge-size, 74px);
	height: var(--dsdqp-badge-size, 74px);
	border-radius: var(--dsdqp-badge-radius, 50%);
	background: var(--dsdqp-badge-background, #86c440);
	color: var(--dsdqp-badge-color, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--dsdqp-badge-fontsize, 22px);
	font-weight: var(--dsdqp-badge-fontweight, 700);
	box-shadow: var(--dsdqp-badge-shadow, 0 4px 14px rgba(0,0,0,.18));
	border: var(--dsdqp-badge-border, none);
}
.dsdqp-badge-icon {
	position: absolute;
	left: var(--dsdqp-badge-iconoffsetx, -10px);
	bottom: var(--dsdqp-badge-iconoffsety, -10px);
	width: var(--dsdqp-badge-iconsize, 30px);
	height: var(--dsdqp-badge-iconsize, 30px);
	border-radius: 50%;
	background: var(--dsdqp-badge-iconbackground, #86c440);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dsdqp-badge-color, #ffffff);
}
.dsdqp-badge-icon svg { width: 55%; height: 55%; }
.dsdqp-badge-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.dsdqp-col-content {
	display: flex;
	flex-direction: column;
	justify-content: var(--dsdqp-content-valign, center);
	align-items: var(--dsdqp-content-halign, flex-start);
	text-align: var(--dsdqp-content-align, left);
	padding: var(--dsdqp-content-padding, 0px);
}

.dsdqp-kicker {
	margin: 0 0 var(--dsdqp-kicker-marginbottom, 14px);
	font-family: var(--dsdqp-kicker-fontfamily, 'Jost', sans-serif);
	font-size: var(--dsdqp-kicker-fontsize, 13px);
	font-weight: var(--dsdqp-kicker-fontweight, 500);
	color: var(--dsdqp-kicker-color, #222222);
	line-height: var(--dsdqp-kicker-lineheight, 1.4);
	letter-spacing: var(--dsdqp-kicker-letterspacing, 0.3px);
	text-transform: var(--dsdqp-kicker-texttransform, none);
	text-align: var(--dsdqp-kicker-align, inherit);
}

.dsdqp-title {
	margin: 0 0 var(--dsdqp-title-marginbottom, 22px);
	max-width: var(--dsdqp-title-maxwidth, 560px);
	font-family: var(--dsdqp-title-fontfamily, 'Jost', sans-serif);
	font-size: var(--dsdqp-title-fontsize, 29px);
	font-weight: var(--dsdqp-title-fontweight, 400);
	color: var(--dsdqp-title-color, #222222);
	line-height: var(--dsdqp-title-lineheight, 1.2);
	letter-spacing: var(--dsdqp-title-letterspacing, normal);
	text-align: var(--dsdqp-title-align, inherit);
}

.dsdqp-desc {
	margin: 0 0 var(--dsdqp-desc-marginbottom, 26px);
	max-width: var(--dsdqp-desc-maxwidth, 520px);
	text-align: var(--dsdqp-desc-align, inherit);
}
.dsdqp-desc p {
	margin: 0 0 var(--dsdqp-desc-parambottom, 18px);
	font-family: var(--dsdqp-desc-fontfamily, 'Jost', sans-serif);
	font-size: var(--dsdqp-desc-fontsize, 14px);
	font-weight: var(--dsdqp-desc-fontweight, 400);
	color: var(--dsdqp-desc-color, #777777);
	line-height: var(--dsdqp-desc-lineheight, 1.85);
	letter-spacing: var(--dsdqp-desc-letterspacing, normal);
}
.dsdqp-desc p:last-child { margin-bottom: 0; }

.dsdqp-sig {
	display: block;
	width: var(--dsdqp-sig-width, 140px);
	height: var(--dsdqp-sig-height, auto);
	margin: 0 0 var(--dsdqp-sig-marginbottom, 0px);
}

.dsdqp-divider {
	width: var(--dsdqp-divider-width, 100%);
	height: var(--dsdqp-divider-thickness, 1px);
	background: var(--dsdqp-divider-color, #e6e6e6);
	margin: var(--dsdqp-divider-margintop, 40px) 0 var(--dsdqp-divider-marginbottom, 30px);
}

.dsdqp-cols {
	display: grid;
	grid-template-columns: var(--dsdqp-colHeading-colratio, 1fr 1fr);
	gap: var(--dsdqp-colHeading-colgap, 40px);
	width: 100%;
}
.dsdqp-col-heading {
	margin: 0 0 var(--dsdqp-colHeading-marginbottom, 10px);
	font-family: var(--dsdqp-colHeading-fontfamily, 'Jost', sans-serif);
	font-size: var(--dsdqp-colHeading-fontsize, 16px);
	font-weight: var(--dsdqp-colHeading-fontweight, 500);
	color: var(--dsdqp-colHeading-color, #1a1a1a);
	letter-spacing: var(--dsdqp-colHeading-letterspacing, 0.4px);
	text-transform: var(--dsdqp-colHeading-texttransform, uppercase);
	text-align: var(--dsdqp-colHeading-align, inherit);
}
.dsdqp-col-body {
	margin: 0;
	font-family: var(--dsdqp-colBody-fontfamily, 'Jost', sans-serif);
	font-size: var(--dsdqp-colBody-fontsize, 18px);
	font-weight: var(--dsdqp-colBody-fontweight, 300);
	color: var(--dsdqp-colBody-color, #777777);
	line-height: var(--dsdqp-colBody-lineheight, 1.3);
	letter-spacing: var(--dsdqp-colBody-letterspacing, normal);
	text-align: var(--dsdqp-colBody-align, inherit);
}

@media (max-width: 782px) {
	.dsdqp-block { grid-template-columns: 1fr; }
	.dsdqp-cols { grid-template-columns: 1fr 1fr; }
}