/* POSTS — .db-posts   (blog index, related articles)
   Prototype .bl-posts / .bl-card. Core Query Loop; presentation only.

   ⚠ THE BLOG INDEX RENDERS THROUGH templates/home.html, NOT through the "Blog"
   page's own blocks. WordPress treats a page assigned to `page_for_posts` as the
   posts archive and ignores its content entirely — the hero and posts grid saved
   on that page were never output, which is why /blog/ looked unbuilt. The page's
   blocks are left in place in case the setting is ever cleared, but they are
   currently dead; home.html is the file to edit.

   The card is the Query Loop's own `li.wp-block-post` — a post-template cannot
   carry a per-item class, so the flex column lives on that element. */
.db-posts { background: var(--cream); }

.db-posts .db-posts__query {
	padding-block: 20px 40px;
	border-bottom: 1px solid var(--line);
}

.db-posts__heading { font-size: clamp(1.5rem, 8vw, 5rem); line-height: 1.1; margin-bottom: 32px; }

/* core's grid layout emits `repeat(3, …)` at every width from columnCount:3;
   the design is one column until 861px */
.db-posts .db-posts__grid { grid-template-columns: 1fr; gap: 40px; }

.db-posts .wp-block-post {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

/* ⚠️ SCOPED TO `.db-posts__index-items`, NOT TO `.db-posts .wp-block-post`
   (§9.54). The recipe rails on /kochschule/ and /torten/ sit inside the same
   `.db-posts` section but are a different card — `db-card__*`, not
   `db-posts__*` — so a rule written against every post in the section reaches
   them too, and a `:not(.db-posts__media)` exclusion does not exclude their
   image. Same lesson as §9.52: one theme, four sites.

   The design nests two frames inside the card — image, then a content column
   with its own gaps — but a post-template renders its blocks as a flat list, so
   the nesting has to be recovered from one gap plus two corrections:

       media ─24/16─ date ─16/12─ title ─8─ excerpt ─16/12─ Weiterlesen

   The flex gap carries date→title; the media's margin adds the rest of the
   distance to the date, and the excerpt's negative margin takes back the
   difference down to 8. */
/* ⚠️ Top-aligned, not centred. The frame's card hugs its content, so its
   `justifyContent: center` is meaningless there — every card in the design has
   the same copy. In a grid the row stretches all three to the tallest, and
   centring then floats the shorter ones down: the images started 578 / 592 /
   564 from the top, a visible 28px stagger. Scoped to the index rather than
   fixed on the shared base rule, which the /kochschule/ and /torten/ recipe
   rails also use. */
.db-posts__index-items > .wp-block-post { justify-content: flex-start; }
.db-posts__index-items > .wp-block-post > .db-posts__media { margin-bottom: 4px; }
.db-posts__index-items > .wp-block-post > .db-posts__excerpt { margin-top: -4px; }

.db-posts__media { display: block; height: 200px; overflow: hidden; margin: 0; }
.db-posts__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.db-posts__media:hover img { transform: scale(1.04); }

.db-posts__date { font-size: 14px; line-height: 24px; color: rgba(0, 0, 0, 0.4); }

.db-posts__title { font-size: 1.125rem; line-height: 28px; margin-block: 0; }
.db-posts__title a:hover { color: var(--gold); }

.db-posts__excerpt { font-size: 16px; line-height: 28px; color: rgba(0, 0, 0, 0.6); }
.db-posts__excerpt .wp-block-post-excerpt__more-text { margin-top: 12px; }
/* The frame around "Weiterlesen" carries a 1px gold bottom rule and 2px of
   vertical padding — it is the same read-more affordance as the banner links. */
.db-posts__excerpt .wp-block-post-excerpt__more-link {
	display: inline-flex;
	padding-block: 2px;
	border-bottom: 1px solid var(--gold);
	font-family: var(--font-display);
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gold);
	transition: opacity .2s ease;
}
.db-posts__excerpt .wp-block-post-excerpt__more-link:hover { opacity: .7; }

.db-posts .wp-block-query-pagination { margin-top: 48px; gap: 16px; }

/* ---- the single post's header and cover  (.db-post) ----------------------
   The frame keeps breadcrumb, date, title and the cover image in one padded
   section with a 60px rhythm (24px on mobile, where the date is dropped);
   here they are two blocks, so the distance is split between the hero's
   bottom padding and the cover's margin. Frames 368:2545 / 368:5066. */
.db-hero--post .db-hero__inner { padding-bottom: 24px; }
.db-hero--post .db-hero__date { display: none; }
/* The article's own title is 80/80, not the index's 120 (368:2555 / 368:5089).
   `max-width: 16ch` on the base hero is a measure cap sized for a 120px display
   title — at 80px it resolves to 905px and wraps this title onto three lines
   inside a 1360px column. The frame gives the title `fill`, so the cap is off
   here; the article title is a sentence, not a two-word page name. */
.db-hero--post .db-hero__title { max-width: none; font-size: 2.25rem; line-height: 40px; }

/* `.db-post >` rather than the class alone: the constrained-layout rule core
   prints for this container (`.wp-container-…-is-layout-… > *`) sets
   margin-block-end and lands later in the document at equal specificity. */
.db-post > .db-post__cover { margin: 0 0 20px; }
.db-post__cover img { width: 100%; height: 200px; object-fit: cover; }

/* ---- "Weitere Artikel"  (.db-posts--related) -----------------------------
   Text-only cards, unlike the index: no image, a hairline under each column
   and a second hairline centred in the gap between them. The read-more sits on
   the baseline of a 276px column, so the excerpt grows to fill what is left. */
.db-posts--related {
	border-top: 1px solid var(--line2);
	padding-block: 40px;
}
.db-posts--related .db-posts__heading { text-align: center; }
.db-posts--related .db-posts__grid { gap: 40px; }

.db-posts--related .wp-block-post {
	position: relative;
	justify-content: flex-start;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}
.db-posts--related .db-posts__title { font-size: 1.125rem; line-height: 28px; }
.db-posts--related .db-posts__excerpt { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: -8px; }
.db-posts--related .db-posts__excerpt .wp-block-post-excerpt__more-text { margin-top: 16px; }

@media (min-width: 861px) {
	.db-posts .db-posts__query { padding-block: 60px 120px; }
	.db-posts__heading { font-size: 5rem; margin-bottom: 60px; }
	.db-posts .db-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; }

	.db-posts .wp-block-post { gap: 24px; }

	.db-posts__index-items > .wp-block-post { gap: 16px; }
	.db-posts__index-items > .wp-block-post > .db-posts__media { margin-bottom: 8px; }
	.db-posts__index-items > .wp-block-post > .db-posts__excerpt { margin-top: -8px; }
	/* The text column is inset from the card's right edge; the image is not. */
	.db-posts__index-items > .wp-block-post > .db-posts__date,
	.db-posts__index-items > .wp-block-post > .db-posts__title,
	.db-posts__index-items > .wp-block-post > .db-posts__excerpt { padding-right: 68px; }

	.db-posts__title { font-size: 1.25rem; line-height: 28px; }
	.db-posts__excerpt .wp-block-post-excerpt__more-text { margin-top: 16px; }
	.db-posts__excerpt .wp-block-post-excerpt__more-link { font-size: 16px; }

	.db-hero--post .db-hero__inner { padding-bottom: 60px; }
	.db-hero--post .db-hero__date {
		display: block;
		margin: 0;
		font-size: 14px;
		line-height: 20px;
		color: var(--muted);
	}
	/* 60px title→date is the section gap; the date sits 24px above the title. */
	.db-hero--post .db-hero__title { margin-top: -36px; font-size: 5rem; line-height: 80px; }

	.db-post > .db-post__cover { margin-bottom: 60px; }
	.db-post__cover img { height: 500px; }

	.db-posts--related { padding-block: 60px; }
	/* The 60px to the row hangs off the heading, not off the post-template:
	   the template is wrapped in the query's flow container, which zeroes its
	   children's block margins, so a `margin-top` there never survives. */
	.db-posts--related .db-posts__heading { font-size: 5rem; line-height: 88px; margin-bottom: 60px; }
	/* ⚠️ A row, not a three-column grid. The frame (368:2653) is a flex row whose
	   cards are `fill`, so two of them take half the width each. Core's
	   post-template emits `repeat(3, minmax(0,1fr))` from `columnCount:3`, which
	   left the two siblings of a three-post site sitting in the left two thirds
	   with an empty column beside them. Flex makes the row fill at any count.
	   24px of air each side of the hairline that sits in the middle of the gap. */
	.db-posts--related .db-posts__grid { display: flex; gap: 48px; }
	/* ⚠️ Repeat the card gap here. `.db-posts .wp-block-post { gap: 24px }` below
	   in this same block has equal specificity and would otherwise win on order,
	   which is what pushed date→title to 24 and title→excerpt to 16. */
	.db-posts--related .wp-block-post { flex: 1 1 0; min-width: 0; gap: 16px; }
	.db-posts--related .wp-block-post {
		min-height: 276px;
		padding-bottom: 48px;
	}
	.db-posts--related .wp-block-post:not(:first-child)::before {
		content: "";
		position: absolute;
		left: -24px;
		top: 0;
		bottom: 0;
		width: 1px;
		background: var(--line);
	}
	/* The 100px inset is on the frame holding BOTH title and excerpt, not on the
	   excerpt alone — the title has to wrap at the same measure. */
	.db-posts--related .db-posts__title { font-size: 1.5rem; line-height: 32px; padding-right: 100px; }
	.db-posts--related .db-posts__excerpt { padding-right: 100px; }
	.db-posts--related .db-posts__excerpt .wp-block-post-excerpt__more-text { margin-top: auto; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.db-posts__media img { transition: none; }
}