/* ── Seitenkopf mit Kopfbild (Vorlage „Kopfbild“, templates/page-kopfbild.html) ──
   Chris, 04.10.2026 (WIR Netzwerker): Der Kopf geht wie bei den Mitgliedern über die ganze Breite und schließt
   identisch mit der Hügelkante ab. Das Beitragsbild ist die dunkle Fläche des Kopfs, der Titel steht darauf.
   Für dunkle Illustrationen gedacht (Grund = Wald, Format 3,75 : 1), nicht für Fotos – die bleiben als Band.
   Raster statt Absolutlage: Bild, Verlauf, Titel, Bildnachweis und Kante teilen sich eine Rasterzelle.
   Der Bildnachweis (ODbL) steht als kleiner Kasten unten rechts auf dem Bild über der Kante – eine gerade
   Unterschrift unter der welligen Kante passte nicht (Chris). Ohne Bild bleibt es ein normaler Seitenkopf. */
.wir-seitenkopf--bild:has(> .wir-seitenkopf__bild img) {
	display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; background: none;
}
.wir-seitenkopf--bild > .wir-seitenkopf__bild { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.wir-seitenkopf--bild > .wir-seitenkopf__bild img {
	grid-area: 1 / 1; display: block; width: 100%; height: clamp(15rem, 26.667vw, 30rem); object-fit: cover; object-position: 50% 30%;
}
.wir-seitenkopf--bild:has(> .wir-seitenkopf__bild img) > .wir-huelle { grid-area: 1 / 1; align-self: start; position: relative; z-index: 1; padding-top: clamp(2rem, 5vw, 3.5rem); } /* wie Jobs und Archiv */
.wir-seitenkopf--bild:has(> .wir-seitenkopf__bild img)::before,
.wir-seitenkopf--bild:has(> .wir-seitenkopf__bild img)::after { grid-area: 1 / 1; align-self: end; position: relative; bottom: -1px; }
.wir-seitenkopf--bild > .wir-huelle, .wir-seitenkopf--bild > .wir-huelle > .wp-block-post-title { margin-block-start: 0; } /* sonst Flow-Abstand nach dem Bild: Titel 28 px tiefer als bei Jobs */
.seite:has(> .wir-seitenkopf--bild:first-child) { padding-top: 0; } /* Kopf schließt direkt an die Navigation an, wie bei Mitgliedern und Jobs */
.wir-seitenkopf--bild + .wp-block-post-content { margin-block-start: var(--wp--preset--spacing--l); } /* 20 px wie bei Jobs war zu knapp: der Reiter des Steckbriefs stieß an die Kante */

/* Dunkler Verlauf von links (Chris, 04.10.2026: „von links rein ein toller Farbverlauf“, danach „fast ein bisschen
   zu dunkel“, dann „ein bisschen heller darf das Bild oben wieder sein“). Links ruhig für den Titel, nach rechts bleibt die Zeichnung sichtbar. */
.wir-seitenkopf--bild > .wir-seitenkopf__bild::after {
	content: ""; grid-area: 1 / 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(6, 27, 15, .76) 0%, rgba(6, 27, 15, .55) 30%, rgba(6, 27, 15, .26) 62%, rgba(6, 27, 15, .08) 100%);
}

/* Bildnachweis als kleiner Kasten unten rechts, bündig mit der Hülle, über der Kante */
.wir-seitenkopf--bild > .wir-seitenkopf__bild figcaption {
	grid-area: 1 / 1; align-self: end; justify-self: end; position: relative; z-index: 2; box-sizing: border-box;
	max-width: min(34rem, calc(100% - 2 * var(--wp--style--root--padding-left, 1.25rem)));
	margin: 0 max(var(--wp--style--root--padding-right, 1.25rem), (100% - var(--wp--style--global--wide-size)) / 2) calc(var(--wir-kante) + .75rem) 0;
	padding: .45rem .95rem; border: 0; border-radius: var(--wp--custom--radius--klein); /* Maße wie .wir-film__text (Text auf Bild); Ecke statt Pille, weil der Nachweis zweizeilig ist */
	background: rgba(6, 27, 15, .9); color: var(--wp--preset--color--auf-dunkel);
	font-size: var(--wp--preset--font-size--klein); line-height: 1.4;
}
.wir-seitenkopf--bild > .wir-seitenkopf__bild figcaption :is(strong, b) { color: var(--wp--preset--color--flaeche); }

@media (max-width: 782px) {
	.wir-seitenkopf--bild > .wir-seitenkopf__bild img { height: max(15rem, 58vw); }
	.wir-seitenkopf--bild > .wir-seitenkopf__bild::after { background: linear-gradient(90deg, rgba(6, 27, 15, .74) 0%, rgba(6, 27, 15, .48) 60%, rgba(6, 27, 15, .28) 100%); }
	.wir-seitenkopf--bild > .wir-seitenkopf__bild figcaption { margin-bottom: calc(var(--wir-kante) + .5rem); }
}