/**
 * "How To" block styles.
 *
 * Mobile-first: image stacks above the content by default, and the
 * min-width:768px query below switches to a two-column layout, matching
 * the mobile-first min-width breakpoint pattern used elsewhere in this
 * theme (see blocks/faq/faq.css). The CTA button's shape is a skewed,
 * rounded ::after box behind an upright label, so its background/border/
 * glow can be restyled per block via the CTA Style field (see
 * how-to.php/block.php).
 *
 * Font sizes (heading, steps, disclaimer, CTA button, CTA caption), the
 * CTA label color, and the CTA button's width/height all come from this
 * block's ACF fields, passed in as CSS custom properties on the block
 * wrapper's inline style (see how-to.php) — the mobile value is the
 * default and the min-width:768px query below swaps each one over to its
 * desktop value, matching blocks/faq/faq.css. Width/height default to
 * 100%/auto on mobile and auto/auto on desktop, so a fresh block spans
 * full-width on phones without any fields set.
 */
.spz-howto {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 2rem auto;
	color: var(--color-text, #ffffff);
	font-family: var(--font-family, inherit);
}

.spz-howto__media {
	flex: 0 0 auto;
	/* Both default to source order (media first): top on mobile, left on
	   desktop. The modifier classes below move the image to the opposite
	   side by swapping which one gets order:1. */
	order: 0;
}

/* Mobile image position (spz-howto is flex-direction:column here). */
.spz-howto--img-mobile-bottom .spz-howto__media {
	order: 1;
}

.spz-howto--img-mobile-bottom .spz-howto__content {
	order: 0;
}

.spz-howto__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1rem;
}

.spz-howto__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.spz-howto__heading {
	font-size: var(--spz-howto-heading-fs-m, 24px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.spz-howto__steps {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spz-howto__step {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

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

/* Number style: filled circle with the step index. */
.spz-howto__steps--number .spz-howto__step-marker {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: linear-gradient(140deg, #08f 0%, #003cff 100%);
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 700;
}

/* Bullet style: small dot, drawn in CSS (no markup needed per step). */
.spz-howto__steps--bullet .spz-howto__step-marker {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: linear-gradient(140deg, #08f 0%, #003cff 100%);
}

/* Icon style: the uploaded marker icon, same footprint as the number circle. */
.spz-howto__steps--icon .spz-howto__step-marker {
	width: 1.75rem;
	height: 1.75rem;
}

.spz-howto__step-marker-icon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.spz-howto__step-text {
	flex: 1 1 auto;
	font-size: var(--spz-howto-step-fs-m, 14px);
	line-height: 1.6;
}

.spz-howto__step-text > *:first-child {
	margin-top: 0;
}

.spz-howto__step-text > *:last-child {
	margin-bottom: 0;
}

.spz-howto__disclaimer {
	font-size: var(--spz-howto-disclaimer-fs-m, 14px);
	line-height: 1.5;
	opacity: 0.7;
}

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

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

.spz-howto__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.spz-howto__cta-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--spz-howto-cta-width-m, 100%);
	height: var(--spz-howto-cta-height-m, auto);
	padding: 1rem 2rem;
	text-decoration: none;
	overflow: visible;
	transition: opacity 0.2s ease;
}

.spz-howto__cta-button:hover {
	opacity: 0.92;
}

/* The button's visible shape: a skewed, rounded ::after box sitting behind
   the label (plain background/border/filter, not SVG fill/stroke — those
   don't render reliably as gradients across browsers). Its background/
   border/glow default here but are normally overridden per block by the
   scoped <style> block the CTA Style field produces (see how-to.php) —
   the field's own default value matches the declarations below, so a
   freshly added block looks the same either way. */
.spz-howto__cta-button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	transform: skewX(-12deg);
	transform-origin: center;
	background: linear-gradient(90deg, #ffe3ab 0%, var(--10_CTA3, #f5c566) 122.16%);
	border: 3px solid #ffe2a8;
	filter: drop-shadow(0 0 12px #fdeccb);
	z-index: 0;
}

.spz-howto__cta-label {
	position: relative;
	z-index: 1;
	color: var(--spz-howto-cta-label-color, #5f510c);
	font-size: var(--spz-howto-cta-fs-m, 26px);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
}

.spz-howto__cta-caption {
	margin: 0;
	font-size: var(--spz-howto-cta-caption-fs-m, 11px);
	line-height: 1.4;
	opacity: 0.7;
}

.spz-howto-block-placeholder {
	margin: 0;
	padding: 12px;
	border: 1px dashed #757575;
	border-radius: 2px;
	background: #f6f7f7;
	color: #1e1e1e;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
}

@media (min-width: 768px) {
	.spz-howto {
		flex-direction: row;
		align-items: center;
		gap: 2rem;
	}

	.spz-howto__media {
		flex: 0 0 40%;
		max-width: 40%;
	}

	/* Desktop image position: left is source order (default); right swaps
	   which side gets order:1, same technique as the mobile top/bottom
	   modifiers above. */
	.spz-howto--img-desktop-right .spz-howto__media {
		order: 1;
	}

	.spz-howto--img-desktop-right .spz-howto__content {
		order: 0;
	}

	.spz-howto__content {
		flex: 1 1 auto;
	}

	.spz-howto__heading {
		font-size: var(--spz-howto-heading-fs-d, 40px);
	}

	.spz-howto__step-text {
		font-size: var(--spz-howto-step-fs-d, 24px);
	}

	.spz-howto__disclaimer {
		font-size: var(--spz-howto-disclaimer-fs-d, 18px);
	}

	.spz-howto__cta-button {
		width: var(--spz-howto-cta-width-d, auto);
		height: var(--spz-howto-cta-height-d, auto);
	}

	.spz-howto__cta-label {
		font-size: var(--spz-howto-cta-fs-d, 32px);
	}

	.spz-howto__cta-caption {
		font-size: var(--spz-howto-cta-caption-fs-d, 14px);
	}
}