/**
 * zuyan-content-templates core stylesheet.
 *
 * Owns: design tokens, the connected/seam contract, the Generic Fallback
 * styling, and slot primitives. Per-Variant stylesheets set token VALUES only
 * and must never write `+ .zct-template` adjacency selectors (lint-enforced).
 */

:where(.zct-template) {
	--zct-radius: 12px;
	--zct-border-width: 1px;
	--zct-border-color: #e3e3e3;
	--zct-border-style: solid;
	--zct-seam-width: var(--zct-border-width);
	--zct-seam-color: var(--zct-border-color);
	--zct-seam-style: var(--zct-border-style);
	--zct-gap: 10px;
	--zct-pad-inline: 16px;
	--zct-pad-block: 16px;
	--zct-bg: #fff;

	display: flow-root;
	box-sizing: border-box;
	margin-block: 1.2em;
	padding: var(--zct-pad-block) var(--zct-pad-inline);
	background: var(--zct-bg);
	border: var(--zct-border-width) var(--zct-border-style) var(--zct-border-color);
	border-radius: var(--zct-radius);
}

:where(.zct-template) > * + * {
	margin-block-start: var(--zct-gap);
}

/* --- Connected / seam contract (core-owned only) -------------------------- */
/* Following sibling owns the seam; upper block drops its bottom edge. */
.zct-template + .zct-template {
	margin-block-start: 0;
	border-block-start-width: var(--zct-seam-width);
	border-block-start-style: var(--zct-seam-style);
	border-block-start-color: var(--zct-seam-color);
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}
.zct-template:has(+ .zct-template) {
	border-block-end-width: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

/* --- LayoutEngine primitives ---------------------------------------------
 * Structural only; Variant CSS supplies the token VALUES the engine writes
 * inline as --zct-grid-cols / --zct-grid-gap / --zct-stack-gap /
 * --zct-stack-dir / --zct-sep-size (+ optional -sm / -md / -lg variants).
 *
 * RESPONSIVE = one DOM tree. A stack/grid renders once; per-breakpoint
 * overrides are extra custom properties on the same element, resolved by the
 * three @media blocks below (mobile-first: each breakpoint falls back to the
 * previous one that was set, then to the base). A Slot is never emitted twice.
 */
:where(.zct-l-container) {
	display: flow-root;
}
:where(.zct-l-stack) {
	display: flex;
	flex-direction: var(--zct-stack-dir, column);
	gap: var(--zct-stack-gap, var(--zct-gap));
}
:where(.zct-l-stack[style*="--zct-stack-dir:row"]) {
	align-items: start;
}
:where(.zct-l-grid) {
	display: grid;
	grid-template-columns: var(--zct-grid-cols, 1fr);
	grid-template-rows: var(--zct-grid-rows, none);
	gap: var(--zct-grid-gap, var(--zct-gap));
}
:where(.zct-sep) {
	border: 0;
	margin: 0;
}
:where(.zct-sep--line) {
	block-size: var(--zct-border-width);
	background: var(--zct-border-color);
}
:where(.zct-sep--space) {
	block-size: var(--zct-sep-size, var(--zct-gap));
}

/* Named breakpoints — the ONLY responsive granularity the engine offers.
   Anything finer / bespoke is a Code Variant, never a second DOM copy. */
@media (min-width: 40rem) {
	:where(.zct-l-stack) {
		flex-direction: var(--zct-stack-dir-sm, var(--zct-stack-dir, column));
		gap: var(--zct-stack-gap-sm, var(--zct-stack-gap, var(--zct-gap)));
	}
	:where(.zct-l-grid) {
		grid-template-columns: var(--zct-grid-cols-sm, var(--zct-grid-cols, 1fr));
		gap: var(--zct-grid-gap-sm, var(--zct-grid-gap, var(--zct-gap)));
	}
}
@media (min-width: 48rem) {
	:where(.zct-l-stack) {
		flex-direction: var(--zct-stack-dir-md, var(--zct-stack-dir-sm, var(--zct-stack-dir, column)));
		gap: var(--zct-stack-gap-md, var(--zct-stack-gap-sm, var(--zct-stack-gap, var(--zct-gap))));
	}
	:where(.zct-l-grid) {
		grid-template-columns: var(--zct-grid-cols-md, var(--zct-grid-cols-sm, var(--zct-grid-cols, 1fr)));
		gap: var(--zct-grid-gap-md, var(--zct-grid-gap-sm, var(--zct-grid-gap, var(--zct-gap))));
	}
}
@media (min-width: 64rem) {
	:where(.zct-l-stack) {
		flex-direction: var(--zct-stack-dir-lg, var(--zct-stack-dir-md, var(--zct-stack-dir-sm, var(--zct-stack-dir, column))));
		gap: var(--zct-stack-gap-lg, var(--zct-stack-gap-md, var(--zct-stack-gap-sm, var(--zct-stack-gap, var(--zct-gap)))));
	}
	:where(.zct-l-grid) {
		grid-template-columns: var(--zct-grid-cols-lg, var(--zct-grid-cols-md, var(--zct-grid-cols-sm, var(--zct-grid-cols, 1fr))));
		gap: var(--zct-grid-gap-lg, var(--zct-grid-gap-md, var(--zct-grid-gap-sm, var(--zct-grid-gap, var(--zct-gap)))));
	}
}

/* --- Media primitive --------------------------------------------------
 * The <figure> is the fixed-ratio viewport (aspect-ratio set inline by the
 * engine). A framed <img> is absolutely positioned inside it with
 * percentage geometry from MediaFraming — resolution-independent, zero JS.
 * A required-but-empty slot keeps the transparent viewport.
 */
:where(.zct-media) {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	background: transparent;
}
:where(.zct-media) > img {
	display: block;
}
:where(.zct-media--empty),
:where(.zct-media--pending) {
	background: var(--zct-media-placeholder, rgba(0, 0, 0, 0.04));
}

/* --- Generic Fallback (also the plugin-inactive appearance) ------------- */
.zct-fallback-host,
.zct-fallback {
	display: block;
}
.zct-fallback__media {
	margin: 0 0 0.75em;
}
.zct-fallback__media img {
	max-width: 100%;
	height: auto;
}
.zct-fallback__slot + .zct-fallback__slot {
	margin-top: 0.5em;
}