/**
 * Embed/Widget.
 *
 * The section owns the page rhythm; `__inner` owns the container cap; `__frame`
 * owns the surface the third-party content sits on. Keeping those three jobs on
 * three elements is what lets the `band` variant run full-bleed while its
 * contents stay contained, without a second set of rules.
 */

.zerodigital-embed {
	padding: clamp(var(--wp--preset--spacing--lg, 2rem), 4vw, var(--wp--preset--spacing--2xl, 4rem)) var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem));
	position: relative;
}

.zerodigital-embed__inner {
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	margin-inline: auto;
}

.zerodigital-embed__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--zd-step-h2, clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem));
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}

.zerodigital-embed__intro {
	font-size: var(--zd-step-lede, 1.125rem);
	max-width: 60ch;
	margin: 0 0 var(--wp--preset--spacing--lg, 2rem);
}

/* --------------------------------------------------------------------------
 * The frame.
 *
 * --zd-embed-min-h is written as an inline custom property by render.php
 * rather than as a direct min-height, so a child theme can re-point it at a
 * different value per breakpoint without having to out-specify an inline style.
 * -------------------------------------------------------------------------- */

.zerodigital-embed__frame {
	position: relative;
	min-height: var(--zd-embed-min-h, 0);
	margin-inline: auto;
}

.zerodigital-embed__frame iframe {
	width: 100%;
	/* Fills the reserved box when there is one, so the frame and the space held
	   for it are the same size and nothing moves on arrival. */
	min-height: var(--zd-embed-min-h, 320px);
	border: 0;
	border-radius: var(--zd-media-radius, var(--wp--custom--radius--lg, 0.75rem));
	display: block;
}

/* --------------------------------------------------------------------------
 * Variants. A border or a shadow, never both — cards separate with a hairline,
 * and shadows are reserved for genuine elevation.
 * -------------------------------------------------------------------------- */

.zerodigital-embed--card .zerodigital-embed__frame {
	background: var(--zd-card-bg, #fff);
	border: var(--zd-border, 1px solid #e4e6e9);
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
}

.zerodigital-embed--panel .zerodigital-embed__frame {
	background: var(--zd-accent-tint, rgba(31, 79, 63, 0.08));
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
}

.zerodigital-embed--bordered .zerodigital-embed__frame {
	border: var(--zd-border, 1px solid #e4e6e9);
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
}

/* `clip`, not `hidden`. overflow:hidden makes the element a scroll container,
   which breaks position:sticky inside it and lets a stray wide child be
   scrolled to rather than clipped. Same reasoning as the CTA Banner. */
.zerodigital-embed--band {
	overflow: clip;
	background: var(--zd-card-bg, #fff);
	padding-block: clamp(var(--wp--preset--spacing--xl, 3rem), 5vw, var(--wp--preset--spacing--2xl, 4rem));
}

/* A background chosen in Layout Settings wins over the band's default fill —
   otherwise picking one appears to do nothing. */
.zerodigital-embed--band.zerodigital-embed--has-bg-media,
.zerodigital-embed--band[style*="background"] {
	background-color: transparent;
}

/* --------------------------------------------------------------------------
 * Widget alignment.
 *
 * Aimed at the widget itself — the frame's direct children — not at the frame.
 * The frame fills the section, so moving it moves nothing; it only appeared to
 * work while a separate width field capped the frame, and that field is gone.
 *
 * margin-inline rather than flex or grid alignment: both of those shrink a
 * fluid widget down to its content width. An auto margin moves a fixed-width
 * child and leaves a full-width one exactly where it was. Not text-align
 * either, which would re-align the vendor's own text.
 * -------------------------------------------------------------------------- */

.zerodigital-embed--align-left .zerodigital-embed__frame > * {
	margin-inline: 0 auto;
}

.zerodigital-embed--align-centre .zerodigital-embed__frame > * {
	margin-inline: auto;
}

.zerodigital-embed--align-right .zerodigital-embed__frame > * {
	margin-inline: auto 0;
}

/* -------------------------------------------------------------------------- */

.zerodigital-embed--pad-none .zerodigital-embed__frame {
	padding: 0;
}

.zerodigital-embed--pad-compact .zerodigital-embed__frame {
	padding: var(--wp--preset--spacing--sm, 1rem);
}

.zerodigital-embed--pad-normal .zerodigital-embed__frame {
	padding: var(--wp--preset--spacing--lg, 2rem);
}

/* Plain has no surface at all, so padding it only pushes the widget away from
   copy it should sit with. */
.zerodigital-embed--plain .zerodigital-embed__frame {
	padding: 0;
}

/* --------------------------------------------------------------------------
 * Force light surface.
 *
 * The one place in this file where literal colours are right rather than lazy:
 * the entire point is to be immune to the active site variation, so resolving
 * these through tokens would defeat it. Vendor widgets almost always assume a
 * light ground, and on a dark section they otherwise arrive as a white
 * rectangle with clashing edges.
 * -------------------------------------------------------------------------- */

.zerodigital-embed--force-light .zerodigital-embed__frame {
	color-scheme: light;
	background: #fff;
	color: #101828;
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
}

/* --------------------------------------------------------------------------
 * The click-to-load facade.
 * -------------------------------------------------------------------------- */

.zerodigital-embed__facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2xs, 0.5rem);
	width: 100%;
	/* Fills the reserved box, so the target is the size the widget will be and
	   activating it moves nothing. */
	min-height: var(--zd-embed-min-h, 12rem);
	padding: var(--wp--preset--spacing--lg, 2rem);
	background: var(--zd-card-bg, #fff);
	border: var(--zd-border, 1px solid #e4e6e9);
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
	cursor: pointer;
	text-align: center;
	transition: border-color 0.2s var(--zd-ease, ease);
}

.zerodigital-embed__facade:hover {
	border-color: var(--wp--preset--color--primary, #1f4f3f);
}

.zerodigital-embed__facade:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #1f4f3f);
	outline-offset: 2px;
}

.zerodigital-embed__facade-label {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--zd-step-h3, 1.25rem);
	line-height: 1.2;
}

.zerodigital-embed__facade-note {
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
 * Fallback and disclaimer.
 * -------------------------------------------------------------------------- */

/* Stated explicitly: a display rule on an ancestor can otherwise beat the user
   agent's [hidden] and leave the fallback visible under a working embed. */
.zerodigital-embed__fallback[hidden] {
	display: none !important;
}

.zerodigital-embed__fallback {
	margin: 0;
	padding: var(--wp--preset--spacing--md, 1.5rem);
	text-align: center;
}

.zerodigital-embed__disclaimer {
	margin: var(--wp--preset--spacing--md, 1.5rem) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.75;
	max-width: 70ch;
}

/* --------------------------------------------------------------------------
 * Editor preview card. Never rendered on the front end — see render.php for
 * why a vendor snippet must not execute in the editor canvas.
 * -------------------------------------------------------------------------- */

.zerodigital-embed__preview {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2xs, 0.5rem);
	min-height: var(--zd-embed-min-h, 8rem);
	padding: var(--wp--preset--spacing--md, 1.5rem);
	background: var(--zd-card-bg, #fff);
	border: 1px dashed var(--wp--preset--color--border, #e4e6e9);
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg, 0.75rem));
}

.zerodigital-embed__preview-type {
	margin: 0;
	opacity: 0.6;
}

.zerodigital-embed__preview-host {
	margin: 0;
	font-family: var(--zd-mono, ui-monospace, monospace);
	font-size: 0.875rem;
	word-break: break-all;
}

.zerodigital-embed__preview-facts {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	opacity: 0.75;
}

.zerodigital-embed__preview-notice {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

.zerodigital-embed__preview-note {
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.6;
}

@media (max-width: 782px) {
	.zerodigital-embed__frame {
		/* A fixed-width vendor widget must not push the page sideways. */
		overflow-x: auto;
	}
}