/**
 * ZeltaCode Stack Cards — 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.
 */

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

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

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

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

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

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

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

/* ----------------------------------------------------------------- Grid -- */

/**
 * Rows are built from per-card percentages, not equal columns, because the
 * design wants an uneven split — 58/42 one row, 42/58 the next.
 *
 * The gap is the awkward part: two cards at 58% and 42% add up to 100% and then
 * the gap pushes the second onto its own line. So each card gives up a share of
 * the gap proportional to its own width — the 58% card gives up 58% of it — and
 * the two shares add up to exactly one gap. That holds for any widths that sum
 * to 100, and for any number of cards in the row.
 *
 * --zcsk-w (58%) and --zcsk-wf (0.58) are both written by the one Width control.
 */
.zcsk__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zcsk-gap, 14px);
	align-items: flex-start;
}

.zcsk-equal-yes .zcsk__grid {
	align-items: stretch;
}

.zcsk__card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 calc(var(--zcsk-w, 50%) - var(--zcsk-gap, 14px) * var(--zcsk-wf, 0.5));
	max-width: calc(var(--zcsk-w, 50%) - var(--zcsk-gap, 14px) * var(--zcsk-wf, 0.5));
	min-width: 0;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

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

.zcsk__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 0;
	overflow: hidden;
	background-color: var(--zcsk-media-base, #07080c);
	background-image:
		radial-gradient(
			var(--zcsk-glow-size, 82%) var(--zcsk-glow-size, 82%)
				at var(--zcsk-glow-x, 50%) var(--zcsk-glow-y, 24%),
			var(--zcsk-glow-c, rgba(38, 96, 165, 0.5)) 0%,
			transparent 70%
		),
		radial-gradient(
			135% 100% at 50% 122%,
			var(--zcsk-vignette-c, rgba(0, 0, 0, 0.62)) 0%,
			transparent 62%
		);
}

/**
 * The dot grid is a pseudo-element so it sits over the gradient without
 * becoming part of it — the two are separate controls and neither can wipe out
 * the other.
 */
.zcsk__media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle,
		var(--zcsk-dot-c, rgba(255, 255, 255, 0.055)) var(--zcsk-dot-size, 1px),
		transparent var(--zcsk-dot-size, 1px)
	);
	background-size: var(--zcsk-dot-gap, 13px) var(--zcsk-dot-gap, 13px);
	pointer-events: none;
}

.zcsk__media img {
	position: relative;
	display: block;
	width: auto;
	max-height: 100%;
	object-fit: contain;
}

/* ----------------------------------------------------------------- Body -- */

.zcsk__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	min-width: 0;
}

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

.zcsk__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.zcsk__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	overflow: hidden;
}

.zcsk__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.25s ease, filter 0.25s ease;
}

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

/**
 * With equal heights on, the logo row is pushed to the bottom of the body, so a
 * card whose title wraps to two lines still lines its logos up with the card
 * beside it. margin-top is used here and nowhere else on this element — the
 * gap control writes gap, so the two cannot collide.
 */
.zcsk-equal-yes .zcsk__logos {
	margin-top: auto;
}

/* --------------------------------------------------------------- Motion -- */

@media (prefers-reduced-motion: reduce) {

	.zcsk__card,
	.zcsk__logo img {
		transition: none;
	}

	.zcsk__card:hover {
		transform: none;
	}
}