/* wygge Shop — block layer (R2). Shared by the plugin's blocks, the capsule format and the block styles "Markenpanel mit
   Slash" and "Kicker". Loaded only on pages that use one of them (and in the editor).

   Colours are TOKENS, never hex values: the storefront theme's semantic tokens (--ad-*, light and dark) first, then the
   tenant branding the plugin prints (--wygge-color-*, --wygge-on-*), then the wygge guide default. Without the theme the
   blocks therefore still look right; with it they follow its light/dark sets. Brand rules (Notion "Designsystem"):
   emphasis = accent capsule, y-slash only top right on brand panels, 1.5 px borders, radii 6/10/12/14, flat surfaces,
   hover = background only, reduced motion respected. */

:root {
	--wyb-panel: var(--ad-panel, var(--wygge-color-primary, #032425));
	--wyb-on-panel: var(--ad-on-panel, var(--wygge-on-primary, #fff));
	--wyb-on-panel-muted: var(--ad-on-panel-muted, color-mix(in srgb, var(--wyb-on-panel) 82%, transparent));
	--wyb-accent: var(--ad-accent, var(--wygge-color-accent, #c8ff16));
	--wyb-on-accent: var(--ad-on-accent, var(--wygge-on-accent, #032425));
	--wyb-accent-hover: var(--ad-accent-hover, color-mix(in srgb, var(--wyb-accent) 90%, #000));
	--wyb-accent-on-panel: var(--ad-accent-ink, var(--wyb-accent));
	--wyb-text: var(--ad-text, var(--wygge-color-text, #032425));
	--wyb-muted: var(--ad-text-muted, color-mix(in srgb, var(--wyb-text) 74%, transparent));
	--wyb-kicker: var(--ad-kicker, var(--wygge-color-secondary, #416858));
	--wyb-link: var(--ad-link, var(--wygge-color-secondary, #416858));
	--wyb-border: var(--ad-divider, #e5eae6);
	--wyb-surface: var(--ad-surface, var(--wygge-color-background, #fff));
	--wyb-surface-2: var(--ad-surface-2, #f2f5f3);
	--wyb-ill: var(--ad-ill, #e5eae6);
	--wyb-focus: var(--ad-focus, var(--wygge-color-primary, #032425));
	--wyb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--wyb-radius: 14px;
	--wyb-radius-card: var(--ad-radius-card, 10px);
	--wyb-radius-cta: var(--ad-radius-cta, 12px);
	--wyb-radius-tag: 6px;
}

/* ---- capsule: the emphasis format "Betonung" ---- */
mark.wygge-capsule {
	background: var(--wyb-accent);
	color: var(--wyb-on-accent);
	padding: 0 0.18em;
	border-radius: var(--wyb-radius-tag);
	font-style: normal;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* W6 F0 (FND-1619): the background of an inline box is as tall as the font's content area (1.4 em), far taller than a headline's line
   (line-height 1.04): the capsule covered the baseline and the descenders of the line above. In a headline it is a box of ITS line instead:
   exactly line-height tall, plus a little under the baseline so the descenders of the capsule text stay inside it. */
:is(h1, h2, h3, h4, h5, h6) mark.wygge-capsule {
	display: inline-block;
	max-width: 100%;
	line-height: inherit;
	padding-block: 0 0.06em;
	margin-block-end: -0.06em;
}

/* ---- block style "Kicker (Überzeile)" ---- */
.is-style-wygge-kicker {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wyb-kicker);
}

/* ---- block style "Markenpanel mit Slash" (core/group, core/cover): a brand panel with the y-slash top right ---- */
.is-style-wygge-slash {
	position: relative;
	overflow: hidden;
	background-color: var(--wyb-panel);
	color: var(--wyb-on-panel);
	border-radius: var(--wyb-radius);
	--wyb-slash-w: 64px;
	--wyb-slash-h: 132px;
	--wyb-slash-right: 22px;
}
.is-style-wygge-slash.wp-block-cover {
	/* a cover shows its picture; the panel colour is only the ground behind it */
	background-color: var(--wyb-panel);
}
.is-style-wygge-slash::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	right: var(--wyb-slash-right);
	width: var(--wyb-slash-w);
	height: var(--wyb-slash-h);
	background: var(--wyb-accent-on-panel);
	opacity: 0.95;
	clip-path: polygon(62% 0, 100% 0, 38% 100%, 0 100%);
	pointer-events: none;
}
.is-style-wygge-slash > *:not(.wp-block-cover__image-background):not(.wp-block-cover__background) {
	position: relative;
	z-index: 1;
}
.is-style-wygge-slash :where(.is-style-wygge-kicker, .wygge-kicker) {
	color: var(--wyb-accent-on-panel);
}
.is-style-wygge-slash :where(h1, h2, h3, h4, p, li) {
	color: inherit;
}
.is-style-wygge-slash :where(a:not(.wp-element-button)) {
	color: inherit;
}

@media (max-width: 781px) {
	.is-style-wygge-slash {
		--wyb-slash-w: 44px;
		--wyb-slash-h: 92px;
		--wyb-slash-right: 14px;
	}
}

/* ---- teaser patterns (home-teasers-3 / home-teasers-2): composed of core blocks, hooked by class ---- */
.wygge-teaser {
	position: relative;
}
.wygge-teaser > * {
	margin-block-end: 0;
}
/* the whole tile is one link: the headline's link is stretched over it (the picture is decorative, no second link) */
.wygge-teaser :where(h3, .wp-block-heading) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.wygge-teaser :where(h3, .wp-block-heading) a:focus-visible {
	outline: none;
}
.wygge-teaser :where(h3, .wp-block-heading) a:focus-visible::after {
	outline: 2px solid var(--wyb-focus);
	outline-offset: 2px;
	border-radius: var(--wyb-radius-card);
}
.wygge-teaser .wp-block-image {
	overflow: hidden;
	border-radius: var(--wyb-radius-card);
	background: var(--wyb-ill);
}
.wygge-teaser .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 400ms var(--wyb-ease);
}
.wygge-teaser:hover .wp-block-image img {
	transform: scale(1.025);
}
.wygge-teaser .is-style-wygge-kicker {
	font-size: 11.5px;
}
.wygge-teaser :where(h3, .wp-block-heading) {
	font-size: 21px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
}
.wygge-teaser :where(h3 a, .wp-block-heading a) {
	color: inherit;
	text-decoration: none;
}
.wygge-teaser :where(h3 a, .wp-block-heading a):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wygge-teaser p:not(.is-style-wygge-kicker) {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--wyb-muted);
}
@media (max-width: 719px) {
	.wygge-teaser-grid.is-layout-grid,
	.wygge-duo-grid.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

.wygge-duo-card {
	min-height: 300px;
	border-radius: var(--wyb-radius);
	overflow: hidden;
	background-color: var(--wyb-surface-2);
	color: var(--wyb-text);
}
.wygge-duo-card {
	display: flex;
	flex-direction: column;
}
.wygge-duo-card > .wp-block-columns {
	flex: 1 1 auto;
	margin: 0;
	align-items: stretch;
}
.wygge-duo-card .wp-block-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.wygge-duo-card .wp-block-column > * {
	flex: 1 1 auto;
	margin: 0;
}
.wygge-duo-card__text {
	box-sizing: border-box;
	padding: 30px 80px 30px 30px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	border-radius: 0;
}
.wygge-duo-card__text > * {
	margin: 0;
}
.wygge-duo-card__text :where(h3, .wp-block-heading) {
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
}
.wygge-duo-card__text p:not(.is-style-wygge-kicker) {
	font-size: 14.5px;
	line-height: 1.5;
	opacity: 0.88;
}
.wygge-duo-card__text .wp-block-buttons {
	margin-top: 4px;
}
.wygge-duo-card .wp-block-button__link {
	background: var(--wyb-panel);
	color: var(--wyb-on-panel);
	border: 1.5px solid var(--wyb-panel);
	border-radius: var(--wyb-radius-cta);
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
}
.wygge-duo-card .is-style-wygge-slash .wp-block-button__link {
	background: var(--wyb-accent);
	color: var(--wyb-on-accent);
	border-color: var(--wyb-accent);
}
.wygge-duo-card .wp-block-button__link:hover {
	filter: brightness(1.12);
}
.wygge-duo-card__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.wygge-duo-card__steps > p {
	margin: 0;
	padding: 7px 9px;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	opacity: 1;
	background: color-mix(in srgb, currentColor 12%, transparent);
}
.wygge-duo-card .wp-block-cover {
	min-height: 300px;
	padding: 0;
	border-radius: 0;
	background-color: var(--wyb-ill);
}
@media (max-width: 781px) {
	.wygge-duo-card__text {
		padding: 28px 22px 26px;
	}
	.wygge-duo-card .wp-block-cover {
		min-height: 220px;
	}
	.wygge-duo-card__text.is-style-wygge-slash {
		padding-right: 70px;
	}
}

/* ---- promo action (renders only an action that comes from the API) ---- */
.wygge-promo-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding: 16px 20px;
	border: 1.5px solid var(--wyb-border);
	border-radius: var(--wyb-radius-card);
	background: var(--wyb-surface-2);
	color: var(--wyb-text);
}
.wygge-promo-action p {
	margin: 0;
}
.wygge-promo-action__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wyb-kicker);
}
.wygge-promo-action__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}
.wygge-promo-action__text {
	margin-top: 4px;
	font-size: 14px;
	color: var(--wyb-muted);
}
.wygge-promo-action__cta {
	display: inline-block;
	padding: 11px 16px;
	border-radius: var(--wyb-radius-cta);
	background: var(--wyb-accent);
	color: var(--wyb-on-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
}
.wygge-promo-action__cta:hover {
	background: var(--wyb-accent-hover);
}
.wygge-promo-action.is-editor-placeholder {
	border-style: dashed;
}

/* ---- example-text note on the seeded info pages ---- */
.wygge-example-note {
	padding: 12px 16px;
	border: 1.5px dashed var(--wyb-border);
	border-radius: var(--wyb-radius-card);
	background: var(--wyb-surface-2);
	font-size: 14px;
	color: var(--wyb-muted);
}
.wygge-example-note p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wygge-teaser .wp-block-image img {
		transition: none;
	}
	.wygge-teaser:hover .wp-block-image img {
		transform: none;
	}
}