/**
 * Heftbeitrag – magazine-style articles (see inc/heftbeitrag.php).
 * Everything hangs off block styles, so the editor shows the same as the front end.
 */

/* Template: the opener sits directly below the header. */
.jkc-heftbeitrag {
	margin-block-start: 0;
}

/* Template: the header lies transparently on top of the opener in the post's text color; on dark fonds the logo turns light. */
.post-template-single-heftbeitrag .wp-site-blocks {
	position: relative;
}

.post-template-single-heftbeitrag .wp-site-blocks > header.wp-block-template-part {
	position: absolute;
	inset: 0 0 auto;
	z-index: 20;
	color: var(--heft-text, #efe9e0);
}

.post-template-single-heftbeitrag header.wp-block-template-part > .has-background {
	background-color: transparent !important;
}

.jkc-heft-dunkel header.wp-block-template-part .custom-logo {
	filter: brightness(0) invert(0.96);
}

.post-template-single-heftbeitrag header.wp-block-template-part .wp-block-navigation:not(.has-text-color),
.post-template-single-heftbeitrag header.wp-block-template-part :is(.wp-block-woocommerce-customer-account, .wc-block-customer-account__link, .wp-block-woocommerce-mini-cart) {
	color: inherit;
}

/* ---------- Fond & typography (Group style "Heftbeitrag") ---------- */

/*
 * Colors come per post as custom properties (see inc/heftbeitrag.php); the fallbacks are the dark default.
 * Muted text, lines and tinted areas are derived from the text color.
 */
.wp-block-group.is-style-heft {
	background-color: var(--heft-fond, #4b433d);
	color: var(--heft-text, #efe9e0);
	--heft-leise: color-mix(in srgb, currentColor 80%, transparent);
	--heft-linie: color-mix(in srgb, currentColor 30%, transparent);
	--heft-flaeche: color-mix(in srgb, currentColor 8%, transparent);

	font-size: clamp(1.06rem, 1rem + 0.25vw, 1.18rem);
	line-height: 1.7;
	padding-bottom: var(--wp--preset--spacing--50);
	hyphens: auto;
	overflow-wrap: break-word;
}

.is-style-heft :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.is-style-heft > h2.wp-block-heading {
	color: var(--heft-ueberschrift, inherit);
}

.is-style-heft a:where(:not(.wp-element-button)) {
	color: var(--heft-akzent, #dcc07a);
	text-underline-offset: 0.15em;
}

.is-style-heft > :first-child {
	margin-block-start: 0;
}

/* Section headings: site heading font, set a little smaller for long reads. */
.is-style-heft > h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	margin-block-start: 2.2em;
	margin-block-end: 0;
	hyphens: manual;
}

.is-style-heft > h2.wp-block-heading + * {
	margin-block-start: 0.6rem;
}

/* Running text: consecutive paragraphs are indented instead of spaced. */
.is-style-heft > p:not(.has-small-font-size) + p:not([class*="is-style-"], .has-drop-cap) {
	margin-block-start: 0;
	text-indent: 1.5em;
}

/* Drop cap (core "Initial") in the heading font. */
.is-style-heft .has-drop-cap:not(:focus)::first-letter {
	color: var(--heft-akzent, #dcc07a);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 4.4em;
	font-weight: 700;
	line-height: 0.8;
	margin: 0.06em 0.1em 0 0;
}

/* ---------- Images & captions ---------- */

/* Optional per scheme: --heft-bildmischung: multiply lets scans on white paper blend into a paper fond. */
.is-style-heft :is(.wp-block-image, .wp-block-media-text__media) img {
	mix-blend-mode: var(--heft-bildmischung, normal);
}

.is-style-heft .wp-block-image {
	margin-block: 2.5rem;
}

.is-style-heft > .alignwide {
	margin-block: 3rem;
}

.is-style-heft figcaption,
.is-style-heft .wp-element-caption {
	color: var(--heft-leise);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-align: left;
	margin-block: 0.75em 0;
	hyphens: auto;
}

/* Image groups (Bildpaar / Bildreihe): columns of captioned images. */
.is-style-heft .wp-block-columns.alignwide {
	gap: 2rem;
}

.is-style-heft .wp-block-column > .wp-block-image {
	margin: 0;
}

/* Floated images with text wrap; on wide screens they reach into the margin. */
.is-style-heft > .wp-block-image:is(.alignleft, .alignright) {
	display: block;
	margin-block: 0.4em 1.5rem;
}

.is-style-heft > .wp-block-image:is(.alignleft, .alignright) img {
	width: 100%;
}

.is-style-heft > .wp-block-image:is(.alignleft, .alignright) figcaption {
	display: block;
}

@media (max-width: 599px) {
	.is-style-heft > .wp-block-image:is(.alignleft, .alignright) {
		float: none;
		margin-inline: 0;
		width: auto;
	}
}

@media (min-width: 600px) {
	.is-style-heft > .wp-block-image.alignright {
		width: min(44%, 22rem);
		margin-inline: 2rem 0;
	}

	.is-style-heft > .wp-block-image.alignleft {
		width: min(44%, 22rem);
		margin-inline: 0 2rem;
	}
}

@media (min-width: 1100px) {
	.is-style-heft > .wp-block-image.alignright {
		width: 24rem;
		margin-inline-end: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2 - 12rem));
	}

	.is-style-heft > .wp-block-image.alignleft {
		width: 24rem;
		margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2 - 12rem));
	}
}

/* ---------- Pull quote & inscription ---------- */

.is-style-heft .wp-block-pullquote {
	border: 0;
	border-block: 1px solid var(--heft-linie);
	border-radius: 0;
	margin-block: 3rem;
	padding: 2rem 0;
	text-align: center;
}

.is-style-heft .wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem);
	font-style: italic;
	line-height: 1.3;
	hyphens: manual;
}

.is-style-heft .wp-block-pullquote cite {
	color: var(--heft-leise);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

.wp-block-quote.is-style-heft-inschrift {
	border: 0;
	border-radius: 0;
	border-top: 2px solid var(--heft-akzent, #dcc07a);
	background: var(--heft-flaeche, rgba(0, 0, 0, 0.06));
	margin-block: 2.5rem;
	padding: 2rem clamp(1.25rem, 4vw, 2.75rem);
	text-align: center;
}

.wp-block-quote.is-style-heft-inschrift p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.15em;
	font-weight: 400;
	font-style: italic;
	line-height: 1.6;
	text-indent: 0;
}

.wp-block-quote.is-style-heft-inschrift cite {
	display: block;
	margin-top: 1.25rem;
	color: var(--heft-leise, inherit);
	font-size: 0.95em;
	font-style: normal;
}

/* ---------- Opener: centered head (Group style "Heft-Kopf") ---------- */

/* Like the front page: centered headline with intro, the header lies on top. */
.wp-block-group.is-style-heft-kopf {
	padding-block: calc(var(--wp--preset--spacing--50) + 5rem) var(--wp--preset--spacing--40);
	text-align: center;
}

.is-style-heft-kopf > * {
	margin-inline: auto;
}

.is-style-heft-kopf .wp-block-post-title {
	max-width: 20em;
	margin-block: 1rem 0;
	color: inherit;
	font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.75rem);
	line-height: 1.08;
	hyphens: manual;
}

.is-style-heft-kopf .is-style-heft-unterzeile {
	max-width: 36rem;
	margin-block-start: 1.5rem;
}

.is-style-heft-kopf .is-style-heft-autor {
	margin-block-start: 1.25rem;
	text-align: center;
}

/* An image directly below the head (instead of the full-width cover) is centered with its caption. */
.is-style-heft > .is-style-heft-kopf + .wp-block-image {
	margin-block-start: 0;
}

.is-style-heft > .is-style-heft-kopf + .wp-block-image figcaption {
	text-align: center;
}

/* ---------- Full-width image fading into the fond (Cover style "Verlauf") ---------- */

/* A mask instead of a color gradient, so the image fades into whatever fond the scheme sets. */
.wp-block-cover.is-style-heft-verlauf {
	margin-block: 0;
	padding-bottom: 24vh;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 100%);
}

@media (max-width: 781px) {
	.wp-block-cover.is-style-heft-verlauf {
		min-height: 60svh !important;
		padding-bottom: 16svh;
	}
}

/* Caption inside the image cover. */
.is-style-heft .wp-block-cover .has-small-font-size {
	max-width: 34rem;
	color: #eee8df;
	line-height: 1.5;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ---------- Title image with the head on top (Cover style "Titelbild") ---------- */

/*
 * The image starts at the very top (the header lies on it); the head sits at the bottom on a gradient
 * into the fond, a light veil at the top keeps the header readable. Both use the post's fond color.
 */
.wp-block-cover.is-style-heft-titelbild {
	margin-block: 0;
	min-height: 100svh;
	padding: 0 clamp(1.25rem, 5vw, 3rem);
	align-items: flex-end;
}

.wp-block-cover.is-style-heft-titelbild::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--heft-fond, #4b433d) 70%, transparent) 0, transparent 9rem),
		linear-gradient(to top, var(--heft-fond, #4b433d) 0, color-mix(in srgb, var(--heft-fond, #4b433d) 88%, transparent) 22%, transparent 62%);
	pointer-events: none;
}

.wp-block-cover.is-style-heft-titelbild .wp-block-cover__inner-container {
	z-index: 2;
	color: var(--heft-text, #efe9e0);
}

.is-style-heft-titelbild .is-style-heft-kopf {
	padding-block: 0 var(--wp--preset--spacing--30);
}

.is-style-heft-titelbild .is-style-heft-kopf .wp-block-post-title {
	text-shadow: 0 1px 24px color-mix(in srgb, var(--heft-fond, #4b433d) 60%, transparent);
}

/* Caption of the title image, right below it. */
.is-style-heft > .is-style-heft-titelbild + p.has-small-font-size {
	margin-block-start: 0;
	text-align: center;
}

.is-style-heft > .is-style-heft-titelbild + p.has-small-font-size + *,
.is-style-heft > .is-style-heft-titelbild + :not(p.has-small-font-size) {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Opener texts (paragraph styles) ---------- */

/* Section label, like the category line of regular posts. */
.is-style-heft-rubrik,
.wp-block-cover .is-style-heft-rubrik {
	color: var(--heft-akzent, #dcc07a);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Intro / standfirst. */
.is-style-heft-unterzeile {
	color: var(--heft-leise, inherit);
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
	line-height: 1.5;
}

.is-style-heft-autor {
	font-style: italic;
	text-align: right;
}

/* End mark, flush right on the last line (space reserved so it never wraps alone). */
.is-style-heft-schluss {
	position: relative;
	box-sizing: border-box;
	padding-inline-end: 1.2em;
}

.is-style-heft-schluss::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0.55em;
	width: 0.55em;
	height: 0.55em;
	background: currentColor;
}

/* ---------- Notes, credits, issue box ---------- */

.is-style-heft .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--heft-linie);
	background: none;
	opacity: 1;
	margin-block: 4rem 0;
}

.is-style-heft sup.fn a {
	color: var(--heft-akzent, #dcc07a);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-decoration: none;
	padding-inline: 0.1em;
}

.is-style-heft .wp-block-footnotes {
	color: var(--heft-leise);
	font-size: 0.86rem;
	line-height: 1.55;
	padding-inline-start: 1.4em;
}

.is-style-heft .wp-block-footnotes li {
	margin-block-end: 0.6em;
}

.is-style-heft :is(sup.fn a, .wp-block-footnotes li) {
	scroll-margin-top: 6rem;
}

.is-style-heft .has-small-font-size {
	color: var(--heft-leise);
}

.is-style-heft .jkc-heft-hinweis {
	background-color: var(--heft-flaeche);
	margin-block-start: 3rem;
}

.is-style-heft .jkc-heft-hinweis .wp-block-media-text__content {
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.is-style-heft .jkc-heft-hinweis .wp-element-button {
	background-color: var(--heft-akzent, #dcc07a);
	color: var(--heft-akzent-kontrast, #1c1a17);
}

/* Breathing room after the opener; wide elements and quotes clear floated images. */
.is-style-heft > .is-style-heft-verlauf + * {
	margin-block-start: clamp(1rem, 3vw, 2.5rem);
}

.is-style-heft > :is(.alignwide, .alignfull, .wp-block-pullquote, .wp-block-separator, .is-style-heft-inschrift) {
	clear: both;
}