/**
 * ZeltaCode Scope — front-end styles.
 *
 * Every value a control writes is a custom property or a property this file
 * never touches. Elementor's control CSS is unscoped and outranks a plugin
 * media query, so anything set in both places would be unfixable at
 * breakpoints. What needs to change per breakpoint is a breakpoint default on
 * the control instead; the media queries here only flip layout that no control
 * writes.
 */

.zcsc {
	position: relative;
	box-sizing: border-box;
}

.zcsc *,
.zcsc *::before,
.zcsc *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Intro -- */

.zcsc__intro {
	display: block;
	max-width: 100%;
}

.zcsc__eyebrow {
	display: block;
	margin: 0;
	overflow-wrap: break-word;
}

.zcsc__heading {
	display: block;
	margin: 0;
	padding: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- Panel -- */

.zcsc__panel {
	position: relative;
	max-width: 100%;
}

/**
 * One grid, not two lists side by side.
 *
 * Two independent columns can only line up by coincidence — the moment one
 * side's rows are a different height, or a row wraps, they drift apart. Here
 * every row of both columns is placed on an explicit grid row (written inline
 * by the renderer), so a "this" row and the "not this" row beside it ARE the
 * same row. The taller of the pair sets the height and the other stretches to
 * match. Nothing to keep in sync by hand.
 *
 * Row 1 holds the two column labels when they are shown.
 */
.zcsc__cols {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, var(--zcsc-not-w, 47%)) minmax(0, 1fr);
	grid-auto-rows: minmax(var(--zcsc-row-h, 0px), auto);
	column-gap: var(--zcsc-col-gap, 36px);
	row-gap: var(--zcsc-row-gap, 10px);
	align-items: stretch;
}

/* Lifts the rows into the grid above without flattening the list markup. */
.zcsc__list {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zcsc__col-label {
	display: block;
	grid-row: 1;
	margin: 0;
	align-self: end;
	overflow-wrap: break-word;
}

.zcsc__col-label--not,
.zcsc__item--not {
	grid-column: 1;
}

.zcsc__col-label--do,
.zcsc__item--do {
	grid-column: 2;
}

/**
 * The divider is drawn down the middle of the column gap rather than as a
 * border on a column, because with one shared grid there is no column element
 * to hang it on. It ships at 0 thickness.
 */
.zcsc__cols::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--zcsc-not-w, 47%) + (var(--zcsc-col-gap, 36px) / 2));
	width: var(--zcsc-divider-w, 0px);
	background-color: var(--zcsc-divider-c, transparent);
	transform: translateX(-50%);
	pointer-events: none;
}

/* ---------------------------------------------------------------- Rows --- */

.zcsc__item {
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	list-style: none;
}

.zcsc__item::before,
.zcsc__item::marker {
	content: none;
}

.zcsc__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
}

.zcsc__icon i {
	font-size: inherit;
	line-height: 1;
}

.zcsc__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

.zcsc__text {
	display: block;
	min-width: 0;
	overflow-wrap: break-word;
}

/**
 * Keyed on the -yes class, not the bare prefix: prefix_class writes nothing at
 * all for an empty switcher value, so there is no "off" class to style against.
 */
.zcsc-strike-yes .zcsc__item--not .zcsc__text {
	text-decoration: line-through;
	-webkit-text-decoration-line: line-through;
	text-decoration-thickness: 1px;
	text-underline-offset: 0;
}

/* ----------------------------------------------------------------- Note -- */

.zcsc__note {
	max-width: 100%;
	overflow-wrap: break-word;
}

.zcsc__note > *:first-child {
	margin-top: 0;
}

.zcsc__note > *:last-child {
	margin-bottom: 0;
}

.zcsc__note p {
	margin: 0 0 1em;
}

.zcsc__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------- Stacking -- */

/**
 * Stacked, the pairing has nothing to do, so the explicit placement is dropped
 * and the DOM order takes over: the "not this" label and its rows, then the
 * "this" label and its rows. grid-row needs !important because the renderer
 * writes that one inline, per row.
 */
@media (max-width: 1024px) {

	.zcsc-stack-tablet .zcsc__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.zcsc-stack-tablet .zcsc__col-label,
	.zcsc-stack-tablet .zcsc__item {
		grid-column: 1;
		grid-row: auto !important;
	}

	.zcsc-stack-tablet .zcsc__col-label--do {
		margin-top: var(--zcsc-col-gap, 36px);
	}

	.zcsc-stack-tablet .zcsc__cols::before {
		display: none;
	}
}

@media (max-width: 767px) {

	.zcsc-stack-mobile .zcsc__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.zcsc-stack-mobile .zcsc__col-label,
	.zcsc-stack-mobile .zcsc__item {
		grid-column: 1;
		grid-row: auto !important;
	}

	.zcsc-stack-mobile .zcsc__col-label--do {
		margin-top: var(--zcsc-col-gap, 36px);
	}

	.zcsc-stack-mobile .zcsc__cols::before {
		display: none;
	}
}