/* ---------------------------------------------------------------------------
   Kiubo — everything theme.json cannot express:
   the two colour modes, the accent takeover, transitions, :has() and motion.
   Every value below either is a token or references one. No stray literals
   except the signature colours themselves, which live here because they are
   mode-dependent pairs, not single values.
   --------------------------------------------------------------------------- */

/* The design assumes border-box throughout: the service row's 2.2 : 1 grow
   ratio only comes out right if card padding sits inside the flex basis.
   WordPress does not set this globally, so the theme must. */
*, *::before, *::after { box-sizing: border-box; }

/* --- 1. The two modes ---------------------------------------------------- */

:root {
	--kb-bg: #0E1014;
	--kb-bg-2: #14171C;
	--kb-bg-3: #1B1F25;
	--kb-ink: #F4F6F8;
	--kb-muted: #AEB6BE;
	--kb-line: rgba(244, 246, 248, 0.26);
	--kb-panel: #F4F6F8;
	--kb-panel-ink: #0E1014;
	--kb-blur: rgba(14, 16, 20, 0.8);
	color-scheme: dark;
}

@media (prefers-color-scheme: light) {
	:root:not([data-kb-mode="dark"]) {
		--kb-bg: #EEF1F4;
		--kb-bg-2: #E2E6EB;
		--kb-bg-3: #D5DAE1;
		--kb-ink: #14171B;
		--kb-muted: #4C5560;
		--kb-line: rgba(20, 23, 27, 0.22);
		--kb-panel: #14171B;
		--kb-panel-ink: #EEF1F4;
		--kb-blur: rgba(238, 241, 244, 0.8);
		color-scheme: light;
	}
}

:root[data-kb-mode="light"] {
	--kb-bg: #EEF1F4;
	--kb-bg-2: #E2E6EB;
	--kb-bg-3: #D5DAE1;
	--kb-ink: #14171B;
	--kb-muted: #4C5560;
	--kb-line: rgba(20, 23, 27, 0.22);
	--kb-panel: #14171B;
	--kb-panel-ink: #EEF1F4;
	--kb-blur: rgba(238, 241, 244, 0.8);
	color-scheme: light;
}

/* --- 2. The accent takeover ---------------------------------------------
   --kb-acc          the surface colour
   --kb-acc-ink      the fixed, WCAG-checked type colour ON that surface
   --kb-acc-text     the same hue used AS text against a section background,
                     which needs a different, mode-dependent value
   Ecommerce is the resting state; the home page swaps the attribute on hover.
   ------------------------------------------------------------------------ */

:root,
:root[data-kb-acc="ecommerce"] { --kb-acc: #FF4A1C; --kb-acc-ink: #12100D; --kb-acc-text: #FF4A1C; }
:root[data-kb-acc="webdesign"]  { --kb-acc: #7DF5B0; --kb-acc-ink: #12100D; --kb-acc-text: #7DF5B0; }
:root[data-kb-acc="automation"] { --kb-acc: #7C4DFF; --kb-acc-ink: #FFFFFF; --kb-acc-text: #926BFF; }
:root[data-kb-acc="plugins"]    { --kb-acc: #FFE347; --kb-acc-ink: #12100D; --kb-acc-text: #FFE347; }
:root[data-kb-acc="seo"]        { --kb-acc: #4FC3F7; --kb-acc-ink: #12100D; --kb-acc-text: #4FC3F7; }

/* Light mode darkens every accent-as-text so it clears 4.5:1 on --kb-bg-3. */
:root[data-kb-mode="light"],
:root[data-kb-mode="light"][data-kb-acc="ecommerce"] { --kb-acc-text: #AF3313; }
:root[data-kb-mode="light"][data-kb-acc="webdesign"]  { --kb-acc-text: #35694B; }
:root[data-kb-mode="light"][data-kb-acc="automation"] { --kb-acc-text: #6840D6; }
:root[data-kb-mode="light"][data-kb-acc="plugins"]    { --kb-acc-text: #6B5F1D; }
:root[data-kb-mode="light"][data-kb-acc="seo"]        { --kb-acc-text: #296580; }

@media (prefers-color-scheme: light) {
	:root:not([data-kb-mode="dark"]),
	:root:not([data-kb-mode="dark"])[data-kb-acc="ecommerce"] { --kb-acc-text: #AF3313; }
	:root:not([data-kb-mode="dark"])[data-kb-acc="webdesign"]  { --kb-acc-text: #35694B; }
	:root:not([data-kb-mode="dark"])[data-kb-acc="automation"] { --kb-acc-text: #6840D6; }
	:root:not([data-kb-mode="dark"])[data-kb-acc="plugins"]    { --kb-acc-text: #6B5F1D; }
	:root:not([data-kb-mode="dark"])[data-kb-acc="seo"]        { --kb-acc-text: #296580; }
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* not hidden: hidden makes a scroll container and kills position:sticky */
	transition: background-color 0.45s, color 0.45s;
}

.wp-site-blocks > * { transition: background-color 0.45s, color 0.45s; }

/* --- 3. Focus, which the prototype never defined -------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--kb-acc);
	outline-offset: 3px;
	border-radius: 0;
}

.kb-skip-link {
	position: absolute;
	left: var(--wp--custom--gutter);
	top: 0;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--kb-panel);
	color: var(--kb-panel-ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono-sm);
	transform: translateY(-150%);
	transition: transform 0.2s;
}

.kb-skip-link:focus { transform: translateY(0); }

/* --- 4. Header ----------------------------------------------------------- */

.kb-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 70;
	backdrop-filter: blur(16px);
	background: var(--kb-blur);
	border-bottom: 1px solid var(--kb-line);
}

.kb-logo { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.kb-logo__mark { display: block; width: 38px; height: 38px; color: var(--kb-acc); transition: color 0.45s; }
.kb-logo__mark svg { display: block; width: 100%; height: 100%; }

.kb-logo__word {
	display: block;
	width: 84px;
	height: 24px;
	background: var(--kb-ink);
	transition: background-color 0.45s;
	-webkit-mask: var(--kb-wordmark) left center / contain no-repeat;
	mask: var(--kb-wordmark) left center / contain no-repeat;
}

.kb-header .wp-block-navigation__container { gap: 7px; }

.kb-header .wp-block-navigation-item__content {
	border: 1px solid var(--kb-line);
	padding: 8px 14px;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
}

.kb-header .wp-block-navigation-item__content:hover,
.kb-header .wp-block-navigation-item__content:focus-visible {
	background: var(--kb-acc);
	color: var(--kb-acc-ink);
	border-color: transparent;
	transform: translateY(-2px);
}

.kb-mode {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	background: none;
	border: 1px solid var(--kb-line);
	color: var(--kb-ink);
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
}

.kb-mode:hover { background: var(--kb-acc); color: var(--kb-acc-ink); border-color: transparent; transform: translateY(-2px); }
.kb-mode svg { display: block; }
:root[data-kb-mode="light"] .kb-mode__moon { display: none; }
:root[data-kb-mode="dark"]  .kb-mode__sun  { display: none; }
:root:not([data-kb-mode]) .kb-mode__sun { display: none; }
@media (prefers-color-scheme: light) {
	:root:not([data-kb-mode]) .kb-mode__sun  { display: block; }
	:root:not([data-kb-mode]) .kb-mode__moon { display: none; }
}

/* --- 5. The code motif --------------------------------------------------- */

.kb-marker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono-sm);
	letter-spacing: 0.08em;
	color: var(--kb-muted);
}

.kb-glyph {
	font-family: var(--wp--preset--font-family--mono);
	line-height: 0.86;
	color: var(--kb-acc);
	transition: color 0.45s;
	flex: 0 0 auto;
	user-select: none;
}

.kb-glyph-hero { font-size: clamp(2.4rem, 8.5vw, 8rem); }
.kb-glyph-sub  { font-size: clamp(1.5rem, 4.2vw, 4.6rem); }
.kb-glyph-end  { align-self: flex-end; }

@media (max-width: 700px) {
	.kb-glyph { display: none; }
}

/* --- 6. Hero and typewriter ---------------------------------------------- */

.kb-hero__lines > span { display: block; white-space: nowrap; }

/* The designed line breaks only hold where there is room for them next to the
   < /> glyphs. Below 900px they are released so the hero cannot push the page
   into a horizontal scroll. Same specificity as the rule above and declared
   after it, or it loses. */
@media (max-width: 900px) {
	.kb-hero__lines > span { white-space: normal; }
}

/* Zero advance width. The caret travels with the typing position, so if it
   occupied inline space each line would grow and shrink as it passed through,
   and the hero column, which is sized by the H1, would shift left and right
   the whole way. The bar is painted by an absolutely positioned pseudo so the
   line box never changes. */
.kb-type__caret {
	position: relative;
	display: inline-block;
	width: 0;
	height: 0.78em;
	vertical-align: baseline;
	animation: kb-caret 1.06s steps(1) infinite;
}

.kb-type__caret::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.06em;
	width: max(2px, 0.06em);
	background: var(--kb-acc);
}

@keyframes kb-caret { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }

/* Typing hides characters without removing them: the text stays in the DOM
   for search engines and screen readers even mid-animation. */
.kb-type--running .kb-type__hidden { visibility: hidden; }

/* --- 7. Scroll reveal ---------------------------------------------------- */

/* Fail open. The hidden start state is applied only once JS has confirmed it
   is running AND that IntersectionObserver exists, because anything that stops
   the reveal from firing would otherwise leave the whole page at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
	:root.kb-reveal-ready .kb-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
	:root.kb-reveal-ready .kb-reveal.is-in { opacity: 1; transform: none; }
}

/* --- 8. Service cards: two rows, one grows ------------------------------- */

.kb-row { display: flex; flex-wrap: nowrap; gap: clamp(12px, 1.4vw, 22px); align-items: stretch; }
/* Core adds margin-block-start to every non-first child of a flow layout. Any
   container CSS turns into a flex row or grid has to undo that, or items 2..n
   hang lower than the first. Add new such containers to this list. */
.kb-row > *,
.kb-demo > * { margin-block-start: 0; }

.kb-card {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	height: var(--wp--custom--card-height);
	/* The height is fixed by design, so anything that does not fit is clipped
	   rather than allowed to spill over the neighbouring card. */
	overflow: hidden;
	transition: flex-grow 0.85s cubic-bezier(0.32, 0.72, 0.24, 1), background-color 0.45s, color 0.45s, border-color 0.3s;
}

.kb-row-short .kb-card { height: var(--wp--custom--card-height-sm); }
.kb-card-big { flex-grow: 2.2; }

/* Only a small card grows; the wide one gives way. Hovering the wide card
   changes no widths, so the row never lurches under the pointer. */
.kb-row:has(.kb-card:not(.kb-card-big):is(:hover, :focus-within)) .kb-card:not(.kb-card-big):is(:hover, :focus-within) { flex-grow: 2.2; }
.kb-row:has(.kb-card:not(.kb-card-big):is(:hover, :focus-within)) .kb-card-big { flex-grow: 1; }

/* The body slot always occupies its space, so card height never changes. */
.kb-card__body { height: 5.2em; overflow: hidden; opacity: 0; transition: opacity 0.5s ease 0.2s; }
.kb-card-big .kb-card__body,
.kb-card:is(:hover, :focus-within) .kb-card__body { opacity: 1; }

/* One link per card, stretched over the whole card: the accessible name stays
   the heading rather than the entire card's text. */
.kb-card__title a::after { content: ""; position: absolute; inset: 0; }
.kb-card__arrow { font-size: 20px; opacity: 0; transition: transform 0.3s, opacity 0.3s; }
.kb-card-big .kb-card__arrow { opacity: 0.75; }
.kb-card:is(:hover, :focus-within) .kb-card__arrow { transform: translateX(6px); opacity: 1; }
.kb-card__tag { font-family: var(--wp--preset--font-family--mono); font-size: 11.5px; letter-spacing: 0.06em; white-space: nowrap; opacity: 0.88; }

@media (max-width: 760px) {
	.kb-row { flex-wrap: wrap; }
	.kb-card, .kb-card-big { flex: 1 1 100%; height: auto; min-height: 240px; }
	.kb-card__body { height: auto; opacity: 1; }
}

/* --- 9. Project cards ---------------------------------------------------- */

.kb-work { position: relative; }
.kb-work__frame { overflow: hidden; aspect-ratio: 4 / 3; }
.kb-work__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.kb-work:hover .kb-work__frame img { transform: scale(1.05) rotate(0.5deg); }

.kb-work__rule { height: 2px; background: var(--kb-line); position: relative; }
.kb-work__rule::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--kb-acc);
	transition: width 0.45s ease;
}
.kb-work:is(:hover, :focus-within) .kb-work__rule::after { width: 100%; }
.kb-work__title a::after { content: ""; position: absolute; inset: 0; }

/* --- 10. Plugin cards and the platform filter ---------------------------- */

.kb-plug { transition: transform 0.3s, border-color 0.3s; }
.kb-plug:is(:hover, :focus-within) { transform: translateY(-5px); border-color: var(--kb-acc); }

.kb-pcard { position: relative; transition: transform 0.45s cubic-bezier(0.32, 0.72, 0.24, 1), border-color 0.3s; }
.kb-pcard:is(:hover, :focus-within) { transform: translateY(-6px); border-color: var(--kb-acc); }
.kb-pcard__title a::after { content: ""; position: absolute; inset: 0; }
.kb-pcard__arrow { font-size: 19px; opacity: 0.55; transition: transform 0.3s, opacity 0.3s; }
.kb-pcard:is(:hover, :focus-within) .kb-pcard__arrow { transform: translateX(7px); opacity: 1; }
.kb-pcard[hidden] { display: none; }

.kb-filter {
	background: none;
	border: 1px solid var(--kb-line);
	color: var(--kb-ink);
	padding: 9px 15px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.kb-filter[aria-pressed="true"] { background: var(--kb-acc); color: var(--kb-acc-ink); border-color: transparent; }

.kb-flag {
	padding: 4px 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
}

.kb-status { border: 1px solid var(--kb-line); color: var(--kb-muted); }
.kb-status-pending { border-style: dashed; }

/* --- 11. Accent-coloured odds and ends ----------------------------------- */

.kb-acc-rule { height: 2px; width: 44px; background: var(--kb-acc); transition: background-color 0.45s; }
.kb-acc-text { color: var(--kb-acc-text); transition: color 0.45s; }
.kb-mail { font-family: var(--wp--preset--font-family--mono); border-bottom: 1px solid var(--kb-line); padding-bottom: 4px; }
.kb-mail:hover { border-bottom-color: var(--kb-acc); }

/* Buttons lift; the colour itself comes from theme.json. */
.wp-block-button__link { transition: transform 0.18s, background-color 0.45s, color 0.45s; }
.wp-block-button__link:hover { transform: translateY(-3px); }

/* --- 12. The page-change curtain ----------------------------------------- */

.kb-wipe { position: fixed; inset: 0; z-index: 90; pointer-events: none; }

.kb-wipe__half {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 52%;
	background: var(--kb-wipe, var(--kb-acc));
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(3rem, 9vw, 8rem);
	line-height: 1;
	color: var(--kb-wipe-ink, var(--kb-acc-ink));
	transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.kb-wipe__half-l { left: 0; justify-content: flex-start; padding-left: min(7vw, 90px); transform: translateX(-101%); }
.kb-wipe__half-r { right: 0; justify-content: flex-end; padding-right: min(7vw, 90px); transform: translateX(101%); }
.kb-wipe.is-closed .kb-wipe__half { transform: translateX(0); }
.kb-wipe.is-opening .kb-wipe__half { transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.62, 0.02, 0.24, 1); }

.kb-wipe__label {
	margin: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(2.1rem, 7.4vw, 6.4rem);
	text-transform: uppercase;
	color: var(--kb-wipe-ink, var(--kb-acc-ink));
	opacity: 0;
	transition: opacity 0.25s;
	white-space: nowrap;
	max-width: calc(100vw - min(30vw, 360px));
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.kb-wipe.is-labelled .kb-wipe__label { opacity: 1; }

/* The arriving page starts under a lid set by an inline script in <head>,
   so there is no frame in which the new page shows through. */
:root[data-kb-arriving] .kb-wipe__half { transform: translateX(0); transition: none; }

/* --- 13. Nala ------------------------------------------------------------ */

.kb-mascot {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 65;
	width: 64px;
	height: 64px;
	transform: translateY(140%);
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kb-mascot.is-in { transform: translateY(0); }
.kb-mascot__art { position: absolute; inset: 0; animation: kb-bob 4.5s ease-in-out infinite; }
.kb-mascot__tip {
	position: absolute;
	left: 72px;
	bottom: 8px;
	white-space: nowrap;
	background: var(--kb-panel);
	color: var(--kb-panel-ink);
	padding: 8px 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}
.kb-mascot:is(:hover, :focus-within) .kb-mascot__tip { opacity: 1; transform: translateY(0); }

@keyframes kb-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }

/* --- 14. Motion off ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
	}
	.kb-mascot__art { animation: none; }
	.kb-card__body { opacity: 1; }
}

/* --- 15. Layout glue the block markup needs ------------------------------ */

.kb-hero { display: flex; flex-direction: column; justify-content: center; }

/* The section is a flex container so the hero can centre vertically, and core
   puts margin-inline:auto on constrained children. Auto margins on the cross
   axis switch off stretch, so the row would shrink-wrap to its text and drift
   left and right as the headline types itself. A definite width pins it. */
.kb-hero > * { width: 100%; }
.kb-hero__col { flex: 1 1 auto; min-width: 0; }

/* Markers and small labels are paragraphs so they stay editable; they must
   not inherit the paragraph rhythm. */
/* The header is fixed, so an anchor jump would land with the section's first
   line hidden underneath it. */
html { scroll-behavior: smooth; }
:target, [id]:is(section, .wp-block-group) { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* German compounds are long and the display face is wide. Without this a
   headline that outgrows its column paints over the next grid item instead of
   breaking, which is how "KEINER DAZWISCHEN" ended up under the team photos. */
:where(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }

.kb-marker { margin-block: 0; }
.kb-marker-panel { color: inherit; opacity: 0.75; }
.kb-measure { max-width: 52ch; }

.kb-card__top,
.kb-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kb-pcard__flags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kb-pcard__foot { border-top: 1px solid var(--kb-line); padding-top: 14px; }
.kb-pcard__meta { font-family: var(--wp--preset--font-family--mono); font-size: 11.5px; color: var(--kb-muted); }

.kb-card__badge {
	background: var(--wp--preset--color--seo);
	color: var(--wp--preset--color--signal-ink);
	padding: 3px 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	transition: background-color 0.45s, color 0.45s;
}

.kb-card-outline { border: 1px solid var(--kb-line); }
.kb-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.kb-empty { display: block; margin-top: 28px; }
.kb-empty[hidden] { display: none; }

.kb-portrait { aspect-ratio: 3 / 4; overflow: hidden; }
.kb-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Images are placeholders until real files are attached in the editor: an
   empty src must not paint a broken-image icon over the coloured frame. */
.wp-block-image img[src=""] { display: none; }
.kb-work__frame, .kb-portrait { position: relative; }

/* The inverted panel keeps its own type colour whatever the section does. */
.kb-panel a { color: inherit; }

/* --- 16. Plugin detail pages -------------------------------------------- */

/* Bullet lists. Real <ul>s so they stay editable and read as lists; the marker
   is a square in the accent colour, hollow for the "does not do" list. */
.kb-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
/* The marker is absolutely positioned rather than a grid column: inline markup
   inside the item (a <strong>, a link) would otherwise split the text into
   separate grid items and drop each fragment into the 14px marker column. */
.kb-ticks li { position: relative; padding-left: 25px; }
.kb-ticks li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 8px; height: 8px; background: var(--kb-acc); transition: background-color 0.45s; }
.kb-ticks-hollow li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--kb-muted); }

.kb-fcard { transition: border-color 0.3s, transform 0.45s cubic-bezier(0.32, 0.72, 0.24, 1); }
.kb-fcard:is(:hover, :focus-within) { border-color: var(--kb-acc); transform: translateY(-4px); }

.kb-price { transition: border-color 0.3s, transform 0.45s cubic-bezier(0.32, 0.72, 0.24, 1); }
.kb-price:is(:hover, :focus-within) { transform: translateY(-4px); }
.kb-price-lead { border-color: var(--kb-acc); }

.kb-step { border-top: 2px solid var(--kb-acc); transition: border-color 0.45s; }
.kb-chip { border: 1px solid var(--kb-line); padding: 4px 10px; font-family: var(--wp--preset--font-family--mono); font-size: 11px; }
.kb-syncbar { border: 1px solid var(--kb-line); padding: 11px 13px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.kb-syncbar__btn { background: var(--kb-acc); color: var(--kb-acc-ink); padding: 4px 10px; transition: background-color 0.45s, color 0.45s; }

/* The card demo mimics what the plugin renders on a client site, so its colours
   are deliberately independent of the page's dark/light modes. */
.kb-demo {
	--demo-card: #FFFFFF;
	--demo-title: #14171B;
	--demo-meta: #5A6270;
	--demo-body: #3D444E;
	--demo-btn: #14171B;
	--demo-btn-ink: #FFFFFF;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 24px);
}

.kb-evcard { display: flex; flex-direction: column; background: var(--demo-card); color: var(--demo-title); min-width: 0; }
/* An empty core/image renders to nothing, so the aspect ratio lives on a
   wrapper that survives until a real picture is attached in the editor. */
.kb-evimg { aspect-ratio: 3 / 2; overflow: hidden; }
.kb-evimg .wp-block-image { margin: 0; height: 100%; }
.kb-evimg img { width: 100%; height: 100%; object-fit: cover; }
.kb-evbody { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 16px; }
.kb-evbody :is(h4, p) { margin: 0; }
.kb-evbody h4 { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 1.06rem; line-height: 1.15; text-transform: none; letter-spacing: 0; color: var(--demo-title); }
.kb-evmeta { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.4; color: var(--demo-meta); }
.kb-evmeta > span { display: flex; gap: 8px; align-items: flex-start; }
.kb-evmeta svg { flex: 0 0 auto; margin-top: 2px; }
.kb-evbody p { font-size: 13.5px; line-height: 1.5; color: var(--demo-body); }
.kb-evbtn { margin-top: auto; align-self: flex-start; background: var(--demo-btn); color: var(--demo-btn-ink); padding: 9px 16px; font-size: 13px; font-weight: 600; }

/* The second card style: the image sits inside the card's padding. */
.kb-demo.is-inset .kb-evcard { padding: 12px; }
.kb-demo.is-inset .kb-evbody { padding: 14px 2px 2px; }

.kb-stylebtn { transition: background-color 0.25s, color 0.25s, border-color 0.25s; cursor: pointer; }
.kb-stylebtn[aria-pressed="true"] { background: var(--kb-acc); color: var(--kb-acc-ink); border-color: transparent; }

@media (max-width: 900px) {
	.kb-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kb-demo > :nth-child(3) { display: none; }
}

@media (max-width: 620px) {
	.kb-demo { grid-template-columns: 1fr; }
	.kb-demo > :nth-child(2) { display: none; }
}

.kb-backlink {
	color: var(--kb-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	border-bottom: 1px solid var(--kb-line);
	padding-bottom: 2px;
}

.kb-backlink:hover { color: var(--kb-ink); border-bottom-color: var(--kb-acc); }
.kb-evbody code, .kb-acc-text code { font-family: var(--wp--preset--font-family--mono); background: none; padding: 0; }