/**
 * Case and blog templates (single-level.php, single.php; helpers in inc/single.php).
 * Oracle: Oxygen template 72 (case: #section-3-56, #div_block-26-56, #link-158-72) and
 * template 774 (post: #section-3-774, #section-51-774). Tokens only.
 *
 *   .lvl-casestudy__hero   label + H1
 *   .lvl-casestudy__body   .lvl-flow container with the blocks
 *   .lvl-casestudy__next   "Next Case" link, full width, centred
 *   .lvl-article__hero     date + H1 + subtext
 *   .lvl-article__body     .lvl-flow container (full | text | narrow | flush | center)
 *   .lvl-article__newsletter  newsletter section (Gravity Form 4)
 */

/* ---------- Case ---------- */
.lvl-casestudy__hero {
	position: relative;
	display: flow-root; /* the H1 margin stays inside the hero, like the oracle flex wrap */
	padding-top: var(--lvl-space-100);
}

.lvl-casestudy__label {
	margin-bottom: var(--lvl-space-20);
}

.lvl-casestudy__title {
	margin-bottom: var(--lvl-space-6rem);
}

.lvl-casestudy__title sup {
	position: relative;
	top: -0.6em;
	font-size: 0.7em;
}

/* #div_block-26-56: 75px under the last block. */
.lvl-casestudy__body {
	padding-bottom: 4.6875rem;
}

/* #link-158-72 (.link--witth-icon.w-100.mb-100) */
.lvl-casestudy__next {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.62rem;
	width: 100%;
	margin-bottom: var(--lvl-space-100);
	color: var(--lvl-color-text);
	text-decoration: none;
	text-transform: uppercase;
}

.lvl-casestudy__next:hover {
	color: var(--lvl-color-text);
	text-decoration: underline;
}

.lvl-casestudy__next-icon {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* ---------- Blog post ---------- */
/* #section-3-774 (.z-1): date (pink label), H1, subtext. */
.lvl-article__hero {
	position: relative;
	z-index: 1;
	display: flow-root;
	padding-block: var(--lvl-space-100);
}

.lvl-article__date {
	color: var(--lvl-color-pink);
}

.lvl-article__subtext {
	margin: 0;
}

/* Body (#section-69-774 + the post's own section): width from ACF "Textbreite".
   full: container width, no spacing. text / narrow: the oracle's nested section
   (spacing above and below, 20px more inset). flush: 1000px on the container edge
   with section spacing (oracle #_rich_text-4-934: the w-1000 rich text directly in the
   inner wrap). center: 1000px section, centred. */
.lvl-article__body {
	display: flow-root;
}

.lvl-article__body--text,
.lvl-article__body--narrow,
.lvl-article__body--flush,
.lvl-article__body--center {
	padding-block: var(--lvl-space-100);
}

.lvl-article__body--text,
.lvl-article__body--narrow,
.lvl-article__body--center {
	padding-inline: calc(2 * var(--lvl-container-pad));
}

.lvl-article__body--narrow > *,
.lvl-article__body--flush > * {
	max-width: var(--lvl-width-narrow);
}

/* An inset table (style "Eingerückt") keeps its 40px side margins inside the 1000px. */
.lvl-article__body--narrow > .wp-block-table.is-style-lvl-inset,
.lvl-article__body--flush > .wp-block-table.is-style-lvl-inset {
	max-width: calc(var(--lvl-width-narrow) - 5rem);
}

.lvl-article__body--center {
	max-width: calc(var(--lvl-width-narrow) + 2 * var(--lvl-container-pad));
}

/* Running text (core blocks). The oracle rich text drops the first top and the last
   bottom margin; separators are the 1px rule of base.css. */
.lvl-article__body > :first-child {
	margin-top: 0;
}

.lvl-article__body:not(.lvl-article__body--full) > :last-child {
	margin-bottom: 0;
}

.lvl-article__body > .wp-block-separator {
	border: 0;
}

/* Image in running text (oracle: img.mt-25.mb-40 after the TOC rich text: 20px list margin
   + 25px, 45px in all). */
.lvl-article__body > .wp-block-image {
	margin: 2.8125rem 0 var(--lvl-space-40);
}

/* A block section after running text starts a new section (oracle: the FAQ was its
   own section, bottom + top padding of the two sections). */
.lvl-article__body > :not(.lvl-section) + .lvl-section {
	padding-top: calc(2 * var(--lvl-space-100));
}

/* Spacing "Sektion" (no flow/none class) in a post body: the block is its own section
   again, like the oracle FAQ after the post body section. It keeps its section padding;
   the running text before it keeps its closing space (padding on the last text element,
   added to that element's own margin, so the space belongs to the text above); a closing
   block replaces the body's bottom spacing. The spacing is the block's own choice and
   the editor shows it. */
.lvl-article__body > .lvl-section:not(.lvl-section--flow, .lvl-section--none) {
	padding-block: var(--lvl-space-100);
}

.lvl-article__body > :not(.lvl-section):has(+ .lvl-section:not(.lvl-section--flow, .lvl-section--none)) {
	padding-bottom: var(--lvl-space-100);
}

.lvl-article__body:not(.lvl-article__body--full):has(> .lvl-section:not(.lvl-section--flow, .lvl-section--none):last-child) {
	padding-bottom: 0;
}

/* FAQ rows in posts: label and icon without a gap (oracle .oxel_accordion__row: the
   label takes the row minus the 18px icon and its 8px margin; 252px at 390). */
.lvl-article__body .lvl-accordion__trigger {
	gap: 0;
}

.lvl-article__body > .wp-block-image img {
	display: block;
	height: auto;
}

/* In a spaced body the body's bottom spacing replaces a closing factbox's own. */
:is(.lvl-article__body--text, .lvl-article__body--narrow, .lvl-article__body--flush, .lvl-article__body--center) > .lvl-factbox:last-child .lvl-factbox__columns {
	padding-bottom: 0;
}

/* #section-51-774: newsletter, centred in a 1300px wrap. Layout follows live levels.dev
   (the oracle form is unstyled): the column is as wide as its content (live: the 760px
   form card or a one-line heading), no longer 50 %. */
.lvl-article__newsletter {
	padding-block: var(--lvl-space-100);
}

.lvl-article__newsletter .lvl-container {
	max-width: 81.25rem;
}

.lvl-article__newsletter-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.lvl-article__newsletter-label {
	margin-bottom: var(--lvl-space-20);
	text-align: center;
}

.lvl-article__newsletter-title {
	margin-bottom: 1.56rem;
	text-align: center;
}

.lvl-article__newsletter-inner .gform_wrapper {
	width: 100%;
}

/* .h1-style: no bottom margin below 992px (wins over .mb-25 in the oracle). */
@media (max-width: 991px) {
	.lvl-article__newsletter-title {
		margin-bottom: 0;
	}
}

@media (max-width: 767px) {
	.lvl-article__newsletter-inner {
		width: 100%;
	}
}

/* Gravity Forms colours: theme/assets/css/forms.css (shared with the kontakt form). */

/* Hero with the featured image (live template 774 since 2026-09: #section-3-774.grid-2
   .center-horizontal): two equal columns, 20px gap, vertically centred; one column below 768px,
   image after the text. Image: full width of its column, natural ratio, object-fit cover. */
.lvl-article__hero-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.lvl-article__hero--media .lvl-article__hero-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: center;
}

.lvl-article__hero-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

@media (max-width: 767px) {
	.lvl-article__hero--media .lvl-article__hero-inner {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
	}
}

/* Live template 774 since 2026-07 (prod CSS: #inner_content-10-774 max-width 1000px,
   .blog-content-section .ct-section-inner-wrap { padding-top/bottom: 0 }): every post body
   sits in ONE centred 1000px column with 20px inner padding and no top/bottom padding of its own. This supersedes the per-post "Textbreite" modes for the look (the field
   stays; phase 2 decides whether to drop it). Doubled class: beats the mode rules above. */
.lvl-article__body.lvl-article__body {
	max-width: calc(var(--lvl-width-narrow) + 2 * var(--lvl-container-pad));
	padding-block: 0;
	padding-inline: calc(2 * var(--lvl-container-pad));
}


/* "Voll" (oracle sections .case-content-*): on live the inner wraps have no side padding, so
   the content spans the full 1000px, and the meta columns have no vertical padding
   (live /oxygen-4-to-oxygen-6-converter: image 1000 x 562.5, meta directly below). */
.lvl-article__body--full.lvl-article__body--full {
	padding-inline: var(--lvl-container-pad);
}

.lvl-article__body--full .lvl-factbox__columns {
	padding-block: 0;
}