/* ==========================================================================
   Kamiran blocks: Section / Row / Column
   Each block writes its settings as CSS variables in its style attribute.
   Every block resets its own variables first so nested blocks never inherit
   a parent's settings by accident.
   Breakpoints: tablet <= 1024px, mobile <= 767px.
   ========================================================================== */

/* ---------- Section ---------- */
.k-section {
	--ks-mh: initial; --ks-mh-t: initial; --ks-mh-m: initial;
	--ks-pt: initial; --ks-pr: initial; --ks-pb: initial; --ks-pl: initial;
	--ks-pt-t: initial; --ks-pr-t: initial; --ks-pb-t: initial; --ks-pl-t: initial;
	--ks-pt-m: initial; --ks-pr-m: initial; --ks-pb-m: initial; --ks-pl-m: initial;
	--ks-mt: initial; --ks-mb: initial; --ks-mt-t: initial; --ks-mb-t: initial; --ks-mt-m: initial; --ks-mb-m: initial;
	--ks-iw: initial; --ks-va: initial;
	--ks-bgc: initial; --ks-bgg: initial;
	--ks-bgi: initial; --ks-bgi-t: initial; --ks-bgi-m: initial;
	--ks-bgp: initial; --ks-bgp-t: initial; --ks-bgp-m: initial;
	--ks-bgs: initial; --ks-bgs-t: initial; --ks-bgs-m: initial;
	--ks-bgr: initial;
	--ks-ovc: initial; --ks-ovg: initial; --ks-ovo: initial;
	--ks-tc: initial; --ks-rad: initial; --ks-bw: initial; --ks-bs: initial; --ks-bc: initial;

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: var(--ks-va, flex-start);
	min-height: var(--ks-mh, auto);
	padding: var(--ks-pt, var(--k-sec-pad)) var(--ks-pr, 0px) var(--ks-pb, var(--k-sec-pad)) var(--ks-pl, 0px);
	background-color: var(--ks-bgc, transparent);
	background-image: var(--ks-bgi, none), var(--ks-bgg, none);
	background-position: var(--ks-bgp, center center);
	background-size: var(--ks-bgs, cover);
	background-repeat: var(--ks-bgr, no-repeat);
	color: var(--ks-tc, inherit);
	border: var(--ks-bw, 0px) var(--ks-bs, solid) var(--ks-bc, currentColor);
	border-radius: var(--ks-rad, 0px);
}
.k-section.k-section { margin-top: var(--ks-mt, 0px); margin-bottom: var(--ks-mb, 0px); }

.k-section__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	margin-inline: auto;
}
.k-section--boxed > .k-section__inner {
	max-width: calc(var(--ks-iw, var(--k-container)) + var(--k-gutter) * 2);
	padding-inline: var(--k-gutter);
}
.k-section--full > .k-section__inner { max-width: none; }

.k-section__overlay,
.k-section__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
}
.k-section__overlay {
	background-color: var(--ks-ovc, transparent);
	background-image: var(--ks-ovg, none);
	opacity: var(--ks-ovo, .6);
}
.k-section__video { overflow: hidden; }
.k-section__video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.k-bg-fixed { background-attachment: fixed; }

/* ---------- Row ---------- */
.k-row {
	--kr-cg: initial; --kr-cg-t: initial; --kr-cg-m: initial;
	--kr-rg: initial; --kr-rg-t: initial; --kr-rg-m: initial;
	--kr-ai: initial; --kr-jc: initial;
	--_gap: var(--kr-cg, var(--k-col-gap));

	display: flex;
	flex-wrap: wrap;
	column-gap: var(--_gap);
	row-gap: var(--kr-rg, var(--_gap));
	align-items: var(--kr-ai, stretch);
	justify-content: var(--kr-jc, flex-start);
	width: 100%;
}

/* ---------- Column ---------- */
.k-col {
	--kc-w: initial; --kc-w-t: initial; --kc-w-m: initial;
	--kc-pt: initial; --kc-pr: initial; --kc-pb: initial; --kc-pl: initial;
	--kc-pt-t: initial; --kc-pr-t: initial; --kc-pb-t: initial; --kc-pl-t: initial;
	--kc-pt-m: initial; --kc-pr-m: initial; --kc-pb-m: initial; --kc-pl-m: initial;
	--kc-bgc: initial; --kc-bgg: initial; --kc-bgi: initial; --kc-bgp: initial; --kc-bgs: initial;
	--kc-tc: initial; --kc-rad: initial; --kc-bw: initial; --kc-bs: initial; --kc-bc: initial;
	--kc-va: initial; --kc-ta: initial; --kc-ta-t: initial; --kc-ta-m: initial;
	--kc-o: initial; --kc-o-t: initial; --kc-o-m: initial;
	--_w: var(--kc-w, 100);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: var(--kc-va, flex-start);
	flex: 0 0 calc(var(--_w) * 1% - var(--_gap, 0px) * (1 - var(--_w) / 100));
	max-width: 100%;
	min-width: 0;
	order: var(--kc-o, 0);
	padding: var(--kc-pt, 0px) var(--kc-pr, 0px) var(--kc-pb, 0px) var(--kc-pl, 0px);
	text-align: var(--kc-ta, inherit);
	color: var(--kc-tc, inherit);
	background-color: var(--kc-bgc, transparent);
	background-image: var(--kc-bgi, none), var(--kc-bgg, none);
	background-position: var(--kc-bgp, center center);
	background-size: var(--kc-bgs, cover);
	background-repeat: no-repeat;
	border: var(--kc-bw, 0px) var(--kc-bs, solid) var(--kc-bc, currentColor);
	border-radius: var(--kc-rad, 0px);
}
.k-col--auto { flex: 1 1 0; }

/* Shadows (section + column) */
.k-shadow-sm { box-shadow: 0 2px 10px rgba(11, 27, 63, .08); }
.k-shadow-md { box-shadow: 0 10px 30px rgba(11, 27, 63, .12); }
.k-shadow-lg { box-shadow: 0 24px 60px rgba(11, 27, 63, .18); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.k-section {
		min-height: var(--ks-mh-t, var(--ks-mh, auto));
		padding: var(--ks-pt-t, var(--ks-pt, var(--k-sec-pad))) var(--ks-pr-t, var(--ks-pr, 0px)) var(--ks-pb-t, var(--ks-pb, var(--k-sec-pad))) var(--ks-pl-t, var(--ks-pl, 0px));
		background-image: var(--ks-bgi-t, var(--ks-bgi, none)), var(--ks-bgg, none);
		background-position: var(--ks-bgp-t, var(--ks-bgp, center center));
		background-size: var(--ks-bgs-t, var(--ks-bgs, cover));
	}
	.k-section.k-section { margin-top: var(--ks-mt-t, var(--ks-mt, 0px)); margin-bottom: var(--ks-mb-t, var(--ks-mb, 0px)); }
	.k-bg-fixed { background-attachment: scroll; }

	.k-row { --_gap: var(--kr-cg-t, var(--kr-cg, var(--k-col-gap))); row-gap: var(--kr-rg-t, var(--kr-rg, var(--_gap))); }

	.k-col {
		--_w: var(--kc-w-t, var(--kc-w, 100));
		order: var(--kc-o-t, var(--kc-o, 0));
		padding: var(--kc-pt-t, var(--kc-pt, 0px)) var(--kc-pr-t, var(--kc-pr, 0px)) var(--kc-pb-t, var(--kc-pb, 0px)) var(--kc-pl-t, var(--kc-pl, 0px));
		text-align: var(--kc-ta-t, var(--kc-ta, inherit));
	}
	/* Rows that stack on tablet: columns go full width unless a tablet width is set. */
	.k-row--stack-tablet > .k-col,
	.k-row--stack-tablet > .k-col--auto { --_w: var(--kc-w-t, 100); flex: 0 0 calc(var(--_w) * 1% - var(--_gap, 0px) * (1 - var(--_w) / 100)); }
	.k-row--stack-tablet.k-row--reverse { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.k-section {
		min-height: var(--ks-mh-m, var(--ks-mh-t, var(--ks-mh, auto)));
		padding: var(--ks-pt-m, var(--ks-pt-t, var(--ks-pt, var(--k-sec-pad)))) var(--ks-pr-m, var(--ks-pr-t, var(--ks-pr, 0px))) var(--ks-pb-m, var(--ks-pb-t, var(--ks-pb, var(--k-sec-pad)))) var(--ks-pl-m, var(--ks-pl-t, var(--ks-pl, 0px)));
		background-image: var(--ks-bgi-m, var(--ks-bgi-t, var(--ks-bgi, none))), var(--ks-bgg, none);
		background-position: var(--ks-bgp-m, var(--ks-bgp-t, var(--ks-bgp, center center)));
		background-size: var(--ks-bgs-m, var(--ks-bgs-t, var(--ks-bgs, cover)));
	}
	.k-section.k-section { margin-top: var(--ks-mt-m, var(--ks-mt-t, var(--ks-mt, 0px))); margin-bottom: var(--ks-mb-m, var(--ks-mb-t, var(--ks-mb, 0px))); }
	.k-section__video:not(.k-video-mobile) { display: none; }

	.k-row { --_gap: var(--kr-cg-m, var(--kr-cg-t, var(--kr-cg, var(--k-col-gap)))); row-gap: var(--kr-rg-m, var(--kr-rg-t, var(--kr-rg, var(--_gap)))); }

	.k-col {
		--_w: var(--kc-w-m, var(--kc-w-t, var(--kc-w, 100)));
		order: var(--kc-o-m, var(--kc-o-t, var(--kc-o, 0)));
		padding: var(--kc-pt-m, var(--kc-pt-t, var(--kc-pt, 0px))) var(--kc-pr-m, var(--kc-pr-t, var(--kc-pr, 0px))) var(--kc-pb-m, var(--kc-pb-t, var(--kc-pb, 0px))) var(--kc-pl-m, var(--kc-pl-t, var(--kc-pl, 0px)));
		text-align: var(--kc-ta-m, var(--kc-ta-t, var(--kc-ta, inherit)));
	}
	.k-row--stack-mobile > .k-col,
	.k-row--stack-mobile > .k-col--auto,
	.k-row--stack-tablet > .k-col,
	.k-row--stack-tablet > .k-col--auto { --_w: var(--kc-w-m, 100); flex: 0 0 calc(var(--_w) * 1% - var(--_gap, 0px) * (1 - var(--_w) / 100)); }
	.k-row--stack-mobile.k-row--reverse,
	.k-row--stack-tablet.k-row--reverse { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
}

/* ---------- Visibility (front end only; the editor dims instead) ---------- */
@media (min-width: 1025px) { .k-hide-d { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .k-hide-t { display: none !important; } }
@media (max-width: 767px) { .k-hide-m { display: none !important; } }

/* ---------- Section typography helpers (used by Starter Sites & patterns) ---------- */
.k-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.k-section__inner > .k-eyebrow + h1, .k-section__inner > .k-eyebrow + h2,
.k-col > .k-eyebrow + h1, .k-col > .k-eyebrow + h2 { margin-top: .35em; }
.k-lead { font-size: 1.12em; opacity: .9; }
.k-lead.has-text-align-center { max-width: 760px; margin-left: auto; margin-right: auto; }
.k-section__inner > :is(.k-row, .k-w):not(:first-child),
.k-section__inner > .wp-block-buttons:not(:first-child) { margin-top: calc(var(--k-flow, 1.1rem) * 2); }
.k-col > .wp-block-buttons:not(:first-child), .k-col > .k-w:not(:first-child) { margin-top: calc(var(--k-flow, 1.1rem) * 1.6); }
.k-col > .k-row { margin-top: 0; }
.k-col > .wp-block-image img, .k-section__inner > .wp-block-image img { width: 100%; }
.k-cta .wp-block-buttons { gap: 12px; }
@media (max-width: 1024px) { .k-cta .wp-block-buttons.is-content-justification-right { justify-content: flex-start; } }