/* ── NUMBERED COLUMNS KOMPONENTE ────────────────────────────────── */

/*
 * Argumente-Abschnitt: Kopfbereich (Titel, Untertitel, Einleitung) und
 * darunter nummerierte Spalten (Blöcke acf/numbered-columns +
 * acf/numbered-column).
 *
 * HTML-Struktur:
 *   <section class="numbered-section section-bg-grey section-padding">
 *     <div class="center center--wide">
 *       <div class="numbered-layout">
 *         <div class="numbered-header">
 *           <h2 class="numbered-header__title">…</h2>
 *           <h3 class="numbered-header__subtitle">…</h3>
 *           <p class="numbered-header__lead">…</p>
 *         </div>
 *         <div class="numbered-grid">
 *           <div class="numbered-column">
 *             <h3 class="numbered-column__title">…</h3>
 *             <p class="numbered-column__text">…</p>
 *           </div>
 *           …
 *         </div>
 *       </div>
 *     </div>
 *   </section>
 *
 * Ziffer und Trennstrich kommen aus CSS (Counter + ::before/::after),
 * nicht aus dem Markup – kein JS.
 */

/* ── Layout ────────────────────────────────────────────────────── */

.numbered-layout {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* ── Kopfbereich ───────────────────────────────────────────────── */

.numbered-header {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.numbered-header__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.4px;
	color: var(--wp--preset--color--font, #5b5c63);
}

.numbered-header__subtitle {
	margin: 0;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--font, #5b5c63);
}

.numbered-header__lead {
	margin: 0;
	max-width: 1000px;
	font-size: var(--wp--preset--font-size--normal, 19px);
	line-height: 1.5;
	color: var(--wp--preset--color--grey-75, #b7b8c0);
}

/* ── Spaltenraster ─────────────────────────────────────────────── */

/*
 * counter-reset auf dem Grid, counter-increment auf der Spalte: die
 * Nummerierung folgt automatisch der DOM-Reihenfolge und stimmt damit
 * auch nach Umsortieren, Löschen oder Ergänzen im Editor.
 *
 * auto-fit statt fester 3 Spalten: die Vorlage zeigt drei, zwei oder vier
 * bleiben dadurch ohne CSS-Änderung möglich; minmax(260px) bricht auf
 * schmalen Containern automatisch um.
 */
.numbered-grid {
	counter-reset: numbered-column;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 48px;
	align-items: start;
}

/* ── Spalte ────────────────────────────────────────────────────── */

.numbered-column {
	counter-increment: numbered-column;
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* Platz für Ziffer und Trennstrich, die per ::before/::after
	   oberhalb des Inhalts sitzen */
	padding-top: 76px;
	position: relative;
}

/* Ziffer, zweistellig mit führender Null (01, 02, …) */
.numbered-column::before {
	content: counter(numbered-column, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--primary-light, #975257);
}

/* Trennstrich unter der Ziffer */
.numbered-column::after {
	content: '';
	position: absolute;
	top: 46px;
	left: 0;
	width: 72px;
	height: 1px;
	background-color: var(--wp--preset--color--primary-lighter, #d8bec0);
}

.numbered-column__title {
	margin: 0;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--font, #5b5c63);
}

.numbered-column__text {
	margin: 0;
	max-width: none;
	font-size: var(--wp--preset--font-size--small, 16px);
	line-height: 1.5;
	color: var(--wp--preset--color--font, #5b5c63);
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.numbered-layout {
		gap: 40px;
	}

	.numbered-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.numbered-column {
		padding-top: 64px;
	}

	.numbered-column::after {
		top: 40px;
	}
}

/* ── core/group-Margins neutralisieren ──────────────────────────
 *
 * .numbered-layout, .numbered-header und .numbered-grid sind im Block
 * core/group und tragen .is-layout-flow. Dessen globale Regel
 * ":root :where(.is-layout-flow) > *" gibt jedem Kind ausser dem ersten
 * ein margin-block-start (spacing--40, bis 16px) – die Abstaende kommen
 * hier aber aus "gap", sonst waeren die Spalten gegeneinander versetzt.
 */
.numbered-layout > *,
.numbered-header > *,
.numbered-grid > *,
.numbered-column > * {
	margin-block: 0;
}

/* ── ACF-InnerBlocks-Wrapper (Block acf/numbered-columns) ───────
 *
 * ACF rendert um die InnerBlocks ein <div class="acf-innerblocks-
 * container"> – auch im Frontend. Ohne display:contents waeren Kopf und
 * Grid keine Flex-Kinder von .numbered-layout und die Spalten keine
 * Grid-Kinder von .numbered-grid; ausserdem zaehlte der CSS-Counter
 * falsch, weil counter-increment sonst in einem fremden Element saesse.
 */
.numbered-layout > .acf-innerblocks-container,
.numbered-header > .acf-innerblocks-container,
.numbered-grid > .acf-innerblocks-container,
.numbered-column > .acf-innerblocks-container {
	display: contents;
}