/* -------------------------------------------------- */
/* Single Referenz                                      */
/* -------------------------------------------------- */

/* Key facts strip */

.section--referenz-fakten {
	padding-bottom: 0;
}

.referenz-fakten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2rem 2.5rem;
	--radius-child: var(--radius-nested);

	margin: 0;
	padding: 2rem;
	background: var(--color-bg-alt);
	border: var(--border-hairline);
	border-radius: var(--radius);
}

.referenz-fakt dt {
	font-size: var(--text-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8a8a8a;
	margin-bottom: 0.5em;
}

.referenz-fakt dd {
	margin: 0;
	font-weight: 700;
	color: var(--color-ink);
}

.referenz-fakt--module {
	grid-column: 1 / -1;
}

.referenz-module {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.referenz-module li {
	background: linear-gradient(var(--gradient-angle), var(--color-gradient-start), var(--color-gradient-end));
	color: #fff;
	font-size: var(--text-xs);
	letter-spacing: 0.02em;
	padding: 0.4em 1em;
	border-radius: var(--radius-child);
}

/* Block-editor content. The wrapper spans the full content width so
   wide-aligned blocks can breathe, while text keeps a readable measure.

   Everything here is scoped with `>` to the post's own top-level prose, and
   deliberately not written as plain descendant selectors.

   The theme's section blocks (inc/blocks.php) render a whole <section> inside
   this wrapper, carrying their own headings, images and lists. A bare
   `.entry-content img` reaches into those and rounds a Referenz logo; a bare
   `.entry-content h2` resizes every section heading. Because those sections are
   alignfull, `.entry-content .alignfull img` would also strip the radius from
   card images that have it everywhere else on the site.

   Gutenberg emits top-level prose as direct children of .entry-content, so the
   child combinator covers real post content exactly and stops at the boundary
   of any nested section. Where an element legitimately sits one level down —
   an <img> inside its <figure>, an <li> inside its list — the descendant part
   is written after the `>` so it still only applies within top-level prose. */

.entry-content > * {
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}

.entry-content > .alignwide {
	max-width: var(--max-width);
}

.entry-content > .alignfull {
	max-width: none;
}

.entry-content > h2 {
	font-size: var(--text-h2-prose);
	margin-top: 4rem;
}

.entry-content > h3 {
	margin-top: 3rem;
}

.entry-content > img,
.entry-content > figure img,
.entry-content > p img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
}

.entry-content > figure {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.entry-content > figure figcaption {
	font-size: var(--text-sm);
	color: #8a8a8a;
	text-align: center;
	margin-top: 1rem;
}

.entry-content > .alignfull img {
	border-radius: 0;
}

.entry-content > video,
.entry-content > iframe,
.entry-content > figure video,
.entry-content > figure iframe,
.entry-content > figure .wp-block-embed__wrapper,
.entry-content > .wp-block-embed__wrapper {
	width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	display: block;
}

.entry-content > blockquote {
	border-left: 4px solid var(--color-gradient-start);
	padding-left: 2rem;
	margin-top: 3rem;
	margin-bottom: 3rem;
	font-size: var(--text-lg);
	font-style: italic;
	color: var(--color-ink);
}

/* list-style set explicitly rather than left to the browser default: a
   plain ::marker colour rule (no visible marker of its own without this)
   turned out to render with no bullet/number showing at all in testing —
   forcing the type here is what actually guarantees one's there to colour. */
.entry-content > ul {
	list-style: none;
	padding-left: 1.5rem;
}

.entry-content > ol {
	list-style: decimal outside;
	padding-left: 1.5rem;
}

.entry-content > ul li,
.entry-content > ol li {
	margin-bottom: 0.5em;
}

.entry-content > ol li::marker {
	color: var(--color-gradient-start);
	font-weight: 700;
}

/* Unordered lists get a real drawn dot instead of ::marker — a positioned
   element this theme fully controls, rather than depending on the browser's
   own bullet glyph rendering (which is what silently produced nothing). */
.entry-content > ul li {
	position: relative;
}

.entry-content > ul li::before {
	content: "";
	position: absolute;
	left: -1.25rem;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-gradient-start);
}

/* Prose links only — p/li/blockquote are where Gutenberg actually puts an
   inline <a> inside top-level content; the .ld-block-section exclusion this
   whole file follows (see the comment above .entry-content > *) means a
   bare ".entry-content a" would also catch buttons and card links inside a
   nested section block, so this stays scoped the same way images/lists are. */
.entry-content > p a,
.entry-content > ul a,
.entry-content > ol a,
.entry-content > blockquote a {
	color: var(--color-gradient-start);
	text-decoration: none;
	transition: color var(--transition);
}

.entry-content > p a:hover,
.entry-content > ul a:hover,
.entry-content > ol a:hover,
.entry-content > blockquote a:hover {
	color: var(--color-gradient-end);
}

.entry-content > hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 3rem 0;
}

.entry-content > p code,
.entry-content > li code {
	background: var(--color-bg-alt);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}

.entry-content > .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.entry-content > .wp-block-table th,
.entry-content > .wp-block-table td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.entry-content > .wp-block-table th {
	font-family: var(--font-display);
	color: var(--color-ink);
}

/* Prev / next referenz */

.entry-nav {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
	max-width: var(--max-width);
	margin: 3rem auto 0;
	padding-top: 2.5rem;
}

/* A real card each now, same recipe as .blog-card / .plattform-card (white
   surface, hairline border, --shadow-card, lift on hover) — plain text
   links here read as an afterthought at the bottom of the page; a control
   with its own surface and shadow is what actually draws the eye down to
   it. */
.entry-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1 1 320px;
	max-width: 48%;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border: var(--border-hairline);
	border-radius: var(--radius-nested);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	transition: transform var(--transition), box-shadow var(--transition);
}

.entry-nav__link:hover {
	transform: translateY(var(--hover-lift));
	box-shadow: var(--shadow-card-hover);
}

.entry-nav__link--next {
	margin-left: auto;
	align-items: flex-end;
	text-align: right;
}

.entry-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--text-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8a8a8a;
}

/* The "next" link is right-aligned (text-align: right on .entry-nav__link--next
   above), so its label needs to sit at the row's own right edge too — an
   inline-flex row without this centres inside that alignment instead of
   hugging the edge like the icon+text pairing should. */
.entry-nav__link--next .entry-nav__label {
	justify-content: flex-end;
}

/* Bigger and brand-coloured, not left at the label's own small grey size —
   this is the part that actually signals "there's more to read this way",
   so it needs to read as a control, not a typographic footnote. Nudges
   further on hover the same way .leistung-card__arrow / .blog-card__arrow
   do, in whichever direction that link actually points. */
.entry-nav__label i {
	font-size: 1.15em;
	color: var(--color-gradient-start);
	transition: transform var(--transition);
}

.entry-nav__link:hover .entry-nav__label i {
	transform: translateX(-4px);
}

.entry-nav__link--next:hover .entry-nav__label i {
	transform: translateX(4px);
}

.entry-nav__titel {
	font-family: var(--font-display);
	font-size: var(--text-md);
	color: var(--color-ink);
}

.entry-nav__link:hover .entry-nav__titel {
	color: var(--color-gradient-start);
}