/* SC Card Media: shared public/editor card behaviour. */

.sc-card-grid > .wp-block-column {
	display: flex;
}

.sc-link-card {
	display: flex !important;
	flex-direction: column;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.sc-link-card > * {
	position: relative;
	z-index: 1;
}

.sc-link-card.sc-card-has-background::before {
	content: "";
	position: absolute;
	inset: var(--sc-card-background-inset, 0);
	z-index: 0;
	border-radius: inherit;
	filter: blur(var(--sc-card-background-blur, 0px));
	transform: scale(var(--sc-card-background-scale, 1));
	transform-origin: var(--sc-card-background-x, 50%) var(--sc-card-background-y, 50%);
	background-image:
		linear-gradient(
			rgb(12 22 43 / var(--sc-card-overlay-opacity, .78)),
			rgb(12 22 43 / var(--sc-card-overlay-opacity, .78))
		),
		var(--sc-card-background);
	background-position:
		center,
		var(--sc-card-background-x, 50%) var(--sc-card-background-y, 50%);
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}

/*
 * Optional background zoom and focus/blur. Zoom scales only the image/overlay
 * layer around the selected focal point, so the card wording and icon remain
 * fixed and sharp. The same image/overlay layer is expanded
 * slightly whenever blur is enabled so the filter cannot reveal soft or
 * transparent edges at the card boundary. A value of 0 remains pixel-clean.
 */

/*
 * Optional wording protection over detailed images.
 *
 * v1.0.8 deliberately returns to ONE glyph outline instead of offset copies
 * of the wording. The saved card markup/custom properties are left unchanged
 * for Gutenberg compatibility; only their visual interpretation changes.
 *
 * The first five radius steps remain approximately one CSS pixel per step,
 * because radius 5 is the intended subtle default. Above that the visual
 * spread is progressively compressed and capped at 14px. This lets the
 * control retain its 0-100 range without ever turning into detached copies of
 * the letters or becoming large enough to blanket neighbouring wording.
 *
 * paint-order draws the protection first and the real editable text fill last.
 */
.sc-link-card.sc-card-has-background.sc-card-has-text-protection
	> :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
	--sc-card-text-protection-safe-radius:
		min(
			var(--sc-card-text-protection-far, 0px),
			calc(4px + var(--sc-card-text-protection-near, 0px)),
			14px
		);
	--sc-card-text-protection-solid-color:
		var(--sc-card-text-protection-far-color, rgb(0 0 0 / .68));

	-webkit-text-stroke-width: var(--sc-card-text-protection-safe-radius);
	-webkit-text-stroke-color: var(--sc-card-text-protection-solid-color);
	paint-order: stroke fill;

	/* Remove v1.0.7's offset-copy effect completely. */
	text-shadow: none;
	filter: none;
}

/* Keep wording and buttons above the card image/icon layers without putting
 * one text block above another. That prevents a heading's protection from
 * being deliberately stacked over the following paragraph (or vice versa). */
.sc-link-card.sc-card-has-text-protection
	> :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
	z-index: 3;
}

.sc-link-card.sc-card-has-text-protection > .wp-block-buttons {
	z-index: 4;
}

/* Direct button groups are pushed to the bottom of every link card. */
.sc-link-card > .wp-block-buttons {
	margin-top: auto !important;
	padding-top: .8rem;
}

.sc-link-card.sc-card-has-icon::after {
	content: "";
	position: absolute;
	right: 22px;
	bottom: 22px;
	z-index: 2;
	width: 68px;
	height: 68px;
	max-width: calc(100% - 44px);
	background-image: var(--sc-card-icon);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}


/*
 * Optional icon protection. This is a solid spread, not a blur, so increasing
 * the radius enlarges the protected edge instead of creating a haze. The icon
 * image itself keeps its original colour and opacity.
 */
.sc-link-card.sc-card-has-icon.sc-card-has-icon-protection::after {
	box-shadow:
		0 0 0 var(--sc-card-icon-protection-radius, 0px)
		var(--sc-card-icon-protection-color, rgb(0 0 0 / 1));
	border-radius: 14%;
}

/* Reserve only the last row for the icon, keeping the title/description wide. */
.sc-link-card.sc-card-has-icon > :last-child {
	box-sizing: border-box;
	min-height: 68px;
	padding-right: 82px;
}

@media (max-width: 600px) {
	.sc-link-card.sc-card-has-icon::after {
		right: 22px;
		bottom: 22px;
		width: 54px;
		height: 54px;
	}

	.sc-link-card.sc-card-has-icon > :last-child {
		min-height: 54px;
		padding-right: 64px;
	}
}