/*
 * TradeKit Content Section block styles.
 */

.tk-content-section {
	--tk-content-bg: var(--wp--preset--color--light);
	--tk-content-heading: var(--wp--preset--color--dark);
	--tk-content-body: var(--wp--preset--color--neutral-600);
	--tk-content-accent: var(--wp--preset--color--accent);
	--tk-content-panel-bg: color-mix(in srgb, #fff 92%, var(--tk-content-bg) 8%);
	--tk-content-panel-text: var(--wp--preset--color--dark);
	--tk-content-overlay: #0f172a;
	--tk-content-overlay-opacity: 0.42;
	background: var(--tk-content-bg);
	color: var(--tk-content-heading);
}

.wp-block-tradekit-content-section,
.tk-content-section {
	max-inline-size: 100%;
	width: 100%;
}

.wp-block-tradekit-content-section.alignfull,
.tk-content-section.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	width: auto;
}

.tk-content-section .tk-section-block__background-overlay {
	background-color: var(--tk-content-overlay);
	opacity: var(--tk-content-overlay-opacity);
}

.tk-content-section :where(.tk-section-intro__eyebrow) {
	--tk-section-accent: var(--tk-content-accent);
}

.tk-content-section :where(.tk-section-intro__headline) {
	--tk-section-heading: var(--tk-content-heading);
}

.tk-content-section :where(.tk-section-intro__copy) {
	--tk-section-body: var(--tk-content-body);
}

.tk-content-section__container {
	display: grid;
	gap: clamp(16px, 2vw, 30px);
}

.tk-content-section__content {
	background: color-mix(in srgb, var(--tk-content-panel-bg) 100%, transparent);
	border: 1px solid color-mix(in srgb, var(--tk-content-heading) 10%, transparent);
	border-radius: var(--tk-radius-default);
	color: var(--tk-content-panel-text);
	padding: clamp(16px, 2vw, 30px);
}

.tk-content-section--panel-outline-none .tk-content-section__content {
	border: 0;
}

.tk-content-section--geometry-clean .tk-content-section__content {
	border-radius: var(--tk-radius-clean);
}

.tk-content-section--geometry-soft .tk-content-section__content {
	border-radius: var(--tk-radius-soft);
}

.tk-content-section--geometry-cut .tk-content-section__content {
	border-radius: 0;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.tk-content-section--intro-center .tk-section-intro {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

.tk-content-section--intro-center .tk-section-intro__actions {
	justify-content: center;
}

.tk-content-section--surface-dark {
	--tk-content-bg: var(--wp--preset--color--dark);
	--tk-content-heading: var(--wp--preset--color--light);
	--tk-content-body: var(--wp--preset--color--neutral-100);
	--tk-content-panel-bg: color-mix(in srgb, var(--wp--preset--color--dark) 82%, #1e293b 18%);
	--tk-content-panel-text: var(--wp--preset--color--light);
}

.tk-content-section--surface-brand {
	--tk-content-bg: var(--wp--preset--color--primary);
	--tk-content-heading: var(--wp--preset--color--light);
	--tk-content-body: var(--wp--preset--color--neutral-100);
	--tk-content-accent: var(--wp--preset--color--light);
	--tk-content-panel-bg: color-mix(in srgb, var(--wp--preset--color--light) 94%, var(--wp--preset--color--primary) 6%);
	--tk-content-panel-text: var(--wp--preset--color--dark);
}

.tk-content-section--color-custom {
	background: var(--tk-content-bg, var(--wp--preset--color--light));
}

.tk-content-section__content :where(p, ul, ol, blockquote, table, pre, figure) {
	margin-block: 0 1rem;
}

.tk-content-section__content :where(*:last-child) {
	margin-bottom: 0;
}

@media (max-width: 782px) {

	.tk-content-section__content {
		padding: clamp(14px, 4vw, 22px);
	}
}