/* Styles for the provaide/* patterns that blocks and theme.json can't
   express: dark section texture, circuit lines, nodes, corner brackets.
   Measurements: design/figma-measurements.md (1200 px frames). */

:root {
	--provaide-line: 2.5px;             /* "Leiterbahn": 2.5 px, accent */
	--provaide-node: 22px;              /* "Knoten": ring 22 px with a 9 px dot */
	--provaide-bracket: 11px;           /* "Eckklammern" arm length, 2 px stroke */
	/* "Körnung": blue grain (Figma noise, #344FF0, density 50 %) */
	--provaide-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .204 0 0 0 0 .31 0 0 0 0 .94 0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	/* Display type (wordmark, landing H1) hangs 30 px left of the content column. */
	--provaide-hang: clamp(-30px, -2.5vw, 0px);
	--provaide-dark-bg:
		linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)),
		radial-gradient(ellipse farthest-corner at 50% 50%, #111111 72%, #1a2577 90%, #344FF0 100%);
}

/* Full-width sections follow each other without a gap. */
.wp-block-post-content > .alignfull { margin-block: 0; }

/* Constrained layouts force auto margins on children; pull these left. */
.provaide-hang { margin-left: var(--provaide-hang) !important; }
/* "Wide" in the frames is the content column plus 30 px on each side
   (x 60–1140); WordPress would cap alignwide at the padded parent. */
.is-layout-constrained > .alignwide {
	max-width: none;
	margin-left: var(--provaide-hang) !important;
	margin-right: var(--provaide-hang) !important;
}

/* Dark sections ("Verlauf Schwarz–Blau"): #111 in the middle, blue only in
   the corners, a 20 % black layer, blue grain. */
.provaide-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-image: var(--provaide-dark-bg);
}
.provaide-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--provaide-grain);
	opacity: 0.35;
	pointer-events: none;
}

/* Hero: 640 px high, five grid lines at every sixth of the width. */
.provaide-hero {
	min-height: clamp(440px, 53.33vw, 640px);
	box-sizing: border-box;
}
.provaide-hero__grid {
	background-image: linear-gradient(to right, rgb(52 79 240 / 0.2) 1px, transparent 1px), var(--provaide-dark-bg);
	background-size: 16.6667% 100%, auto, auto;
	background-repeat: repeat-x, no-repeat, no-repeat;
}
/* Wordmark (Morpheus, as SVG from Figma): 670 px wide at x 60 in the 1200 frame. */
.provaide-wordmark { margin-block: 0; }
.provaide-wordmark img { display: block; width: clamp(240px, 55.8vw, 670px); max-width: 100%; height: auto; }
/* Fluid gaps live here: WordPress drops blockGap values containing "(". */
.provaide-hero > .provaide-hero__questions { margin-block-start: clamp(32px, 4.7vw, 56px); }
/* Questions start at x 500 of 1200 (40 % into the content column), 15 px apart. */
.provaide-hero__questions { padding-left: 40%; box-sizing: border-box; }
.provaide-hero__questions p { margin: 0; line-height: 1; }
.provaide-hero__questions p + p { margin-top: 15px; }
/* "SCROLL ↓" sits on the header inset (x 40), 38 px above the bottom. */
.provaide-hero__scroll {
	position: absolute;
	left: var(--provaide-bar-left);
	bottom: 38px;
	margin: 0 !important;
	line-height: 1;
	text-transform: uppercase;
}

/* Landing H1 is 609 px wide in the frame (two lines). */
.provaide-intro h1 { max-width: 640px; }
/* Two text columns (intro, status): text 500 wide, second column at x 645
   of 1200; label, then text 30 px below. */
.provaide-intro > .provaide-two-col { margin-block-start: clamp(48px, 8.5vw, 102px); }
.provaide-status > .provaide-two-col { margin-block-start: clamp(48px, 9.25vw, 111px); }
@media (min-width: 782px) {
	.provaide-two-col > .wp-block-column:first-child { flex: 0 0 54.4%; }
	.provaide-two-col > .wp-block-column { max-width: 505px; }
}
.provaide-two-col .wp-block-column > * { margin-block: 0; }
.provaide-two-col .wp-block-column > * + * { margin-block-start: 30px; }

/* Corner brackets around a content block */
.provaide-brackets {
	position: relative;
	--c: var(--wp--preset--color--accent);
	--a: var(--provaide-bracket);
	--w: 2px;
	background:
		linear-gradient(var(--c), var(--c)) 0 0 / var(--a) var(--w),
		linear-gradient(var(--c), var(--c)) 0 0 / var(--w) var(--a),
		linear-gradient(var(--c), var(--c)) 100% 0 / var(--a) var(--w),
		linear-gradient(var(--c), var(--c)) 100% 0 / var(--w) var(--a),
		linear-gradient(var(--c), var(--c)) 0 100% / var(--a) var(--w),
		linear-gradient(var(--c), var(--c)) 0 100% / var(--w) var(--a),
		linear-gradient(var(--c), var(--c)) 100% 100% / var(--a) var(--w),
		linear-gradient(var(--c), var(--c)) 100% 100% / var(--w) var(--a);
	background-repeat: no-repeat;
}
.provaide-brackets > * { margin-block: 0; }
.provaide-brackets > * + * { margin-block-start: 12px; }

/* Research flow: rows of steps on a circuit line (section shadow 0 4 4 25 %).
   Per step: number (y 0), line and node (y 40), bracket box (y 90, 247 high,
   starting 20 px left of the text so the node sits above the text).
   Each step draws its node and the line to the next node (45° offsets in
   the middle); rows draw the lead-in from the left edge and, for the first
   row, the exit to the right edge. */
.provaide-flow { position: relative; z-index: 1; overflow: hidden; box-shadow: 0 4px 4px rgb(0 0 0 / 0.25); }
.provaide-flow__row {
	position: relative;
	column-gap: 20px !important;
	row-gap: clamp(32px, 4.2vw, 50px) !important;
	--gap: 20px;
	--y: 40px;
}
.provaide-flow > .wp-block-group:first-child + .provaide-flow__row { margin-block-start: clamp(48px, 8vw, 96px) !important; }
.provaide-flow__row + .provaide-flow__row { margin-block-start: clamp(32px, 4.2vw, 50px) !important; }
.provaide-step { position: relative; }
.provaide-step__nr { margin: 0 0 76px -8px !important; line-height: 14px !important; }
.provaide-step .provaide-brackets {
	/* explicit width: auto would grow by the negative margin */
	width: 100%;
	margin-left: -20px;
	min-height: 247px;
	box-sizing: border-box;
	padding: 22px 20px 24px;
}
/* "05" sits centred above the end point, 8 px higher. */
.provaide-step--end .provaide-step__nr { text-align: right; margin-right: calc(20px + 21px - 8.5px) !important; transform: translateY(-8px); }

.provaide-step::before { /* node: ring with dot */
	content: "";
	position: absolute;
	z-index: 1;
	top: calc(var(--y) - var(--provaide-node) / 2);
	left: calc(var(--provaide-node) / -2);
	width: var(--provaide-node);
	height: var(--provaide-node);
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: radial-gradient(circle, var(--wp--preset--color--accent) 0 4.5px, var(--wp--preset--color--surface-alt) 5px);
}
.provaide-step--end::before { /* end point: 42 frame ⊃ 28 blue ⊃ 14 light ⊃ 6 blue */
	left: calc(100% - 20px - 21px);
	top: calc(var(--y) - 21px);
	width: 42px;
	height: 42px;
	border-width: 1.5px;
	border-radius: 0;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) center / 6px 6px no-repeat,
		linear-gradient(var(--wp--preset--color--surface-alt), var(--wp--preset--color--surface-alt)) center / 14px 14px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) center / 28px 28px no-repeat;
}
.provaide-step::after { /* line from this node to the next one */
	content: "";
	position: absolute;
	top: calc(var(--y) + var(--provaide-line) / 2 - 14px);
	left: calc(var(--provaide-node) / 2);
	width: calc(100% + var(--gap) - var(--provaide-node));
	height: 14px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M0 12.75H12L23.5 1.25H96.5L108 12.75H120' fill='none' stroke='%23344FF0' stroke-width='2.5'/%3E%3C/svg%3E") center / 120px 14px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) left bottom / calc(50% - 59px) var(--provaide-line) no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) right bottom / calc(50% - 59px) var(--provaide-line) no-repeat;
}
/* The last step of row 1 runs straight out to the right edge. */
.provaide-flow__row--exit > .provaide-step:last-child::after {
	width: 100vw;
	background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) left bottom / 100% var(--provaide-line) no-repeat;
}
/* The end point has no line after it; the step before it ends at its frame. */
.provaide-step--end::after { display: none; }
.provaide-flow__row:not(.provaide-flow__row--exit) > .provaide-step:nth-last-child(2)::after {
	width: calc(200% + var(--gap) * 2 - 20px - var(--provaide-node) / 2 - 21px);
}
/* Lead-in from the left edge of the screen to the first node. */
.provaide-flow__row::before {
	content: "";
	position: absolute;
	top: calc(var(--y) - var(--provaide-line) / 2);
	right: 100%;
	width: 100vw;
	height: var(--provaide-line);
	background: var(--wp--preset--color--accent);
}
/* A thin branch leaves the line after node 01 (70×10, 1.5 px). */
.provaide-flow__row--exit > .provaide-step:first-child .provaide-step__nr::after {
	content: "";
	position: absolute;
	top: calc(var(--y) - 18px);
	left: 40px;
	width: 70px;
	height: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='10' viewBox='0 0 70 10'%3E%3Cpath d='M0 9.25H61L69.5 .75' fill='none' stroke='%23344FF0' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat;
}

/* Steps appear one after another, row by row, where the browser supports
   scroll-driven animations; elsewhere they are simply visible. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.provaide-step .provaide-brackets {
			animation: provaide-appear linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 60%;
		}
		.provaide-step:nth-child(2) .provaide-brackets { animation-range: entry 25% entry 75%; }
		.provaide-step:nth-child(3) .provaide-brackets { animation-range: entry 40% entry 90%; }
	}
}
@keyframes provaide-appear { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 781px) {
	.provaide-hero__questions { padding-left: 0; }
	/* Stacked: one step per row, the line runs down the left side. */
	.provaide-flow__row { grid-template-columns: 1fr !important; --y: 7px; row-gap: 40px !important; }
	.provaide-flow__row + .provaide-flow__row,
	.provaide-flow > .wp-block-group:first-child + .provaide-flow__row { margin-block-start: 40px !important; }
	.provaide-step { padding-left: 40px; }
	.provaide-step__nr { margin: 0 0 14px !important; }
	.provaide-step .provaide-brackets { margin-left: 0; min-height: 0; }
	.provaide-step::before { left: 0; }
	.provaide-step--end::before { left: -10px; }
	.provaide-step--end .provaide-step__nr { text-align: left; margin-right: 0 !important; transform: none; }
	.provaide-flow__row::before,
	.provaide-flow__row--exit > .provaide-step:first-child .provaide-step__nr::after { display: none; }
	.provaide-step::after,
	.provaide-flow__row--exit > .provaide-step:last-child::after,
	.provaide-flow__row:not(.provaide-flow__row--exit) > .provaide-step:nth-last-child(2)::after {
		top: var(--y);
		left: calc(var(--provaide-node) / 2 - var(--provaide-line) / 2);
		width: var(--provaide-line);
		height: calc(100% + 40px);
		background: var(--wp--preset--color--accent);
	}
	.provaide-step--end::after { display: none; }
}

/* Phase line in "Wo stehen wir?" (wide, 1080): points 18 px, labels 120
   wide and centred under them; 3 px line, blue up to --progress. */
.provaide-phases {
	position: relative;
	padding-top: 34px;
	margin-top: clamp(40px, 4.7vw, 56px) !important;
	--edge: 60px;
	--progress: 83px;
	--todo: var(--wp--preset--color--accent-light);
}
.provaide-phases::before { /* the line, with the progress in blue */
	content: "";
	position: absolute;
	top: 7.5px;
	left: var(--edge);
	right: var(--edge);
	height: 3px;
	background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 0 0 / var(--progress) 100% no-repeat, var(--todo);
}
.provaide-phase {
	position: relative;
	flex: 0 0 120px;
	margin: 0;
	text-align: center;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-muted);
}
.provaide-phase::before { /* the point */
	content: "";
	position: absolute;
	z-index: 1;
	top: -34px;
	left: calc(50% - 9px);
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--dark);
}
.provaide-phase::after { /* 1 px line from under the label to the section bottom, fading in */
	content: "";
	position: absolute;
	top: 30px;
	left: calc(50% - 0.5px);
	width: 1px;
	height: 2000px;
	background: linear-gradient(rgb(52 79 240 / 0), var(--wp--preset--color--accent) 160px);
	pointer-events: none;
}
.provaide-phase.is-current, .provaide-phase.is-next { color: var(--wp--preset--color--surface-alt); }
.provaide-phase.is-current { font-weight: 700; }
.provaide-phase.is-current::before { background: var(--wp--preset--color--accent); }
@media (max-width: 781px) {
	.provaide-phases { --edge: 12.5%; --progress: 20px; }
	.provaide-phase { flex: 1 1 0; min-width: 0; }
}

/* Research Journal cards: 300 high, image 304×120, tag, title, meta at the bottom. */
.provaide-card { height: 100%; min-height: 300px; box-sizing: border-box; }
.provaide-card > * { margin: 0; }
.provaide-card .wp-block-post-featured-image img { border-radius: 0; }
.provaide-card__tag { margin-top: 18px !important; line-height: 1; }
.provaide-card__title { margin-top: 10px !important; }
.provaide-card__meta { margin-top: auto !important; padding-top: 16px; line-height: 1.3; }
.provaide-card__meta p { margin: 0; }
/* No featured image yet: the light-blue placeholder from the design. */
.provaide-card:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 304 / 120;
	background: var(--wp--preset--color--accent-light);
}
.provaide-card .wp-block-post-title a { text-decoration: none; }
.provaide-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.provaide-card .wp-block-post-terms a { text-decoration: none; }

/* Newsletter box: label, heading 14 px below, text 13 px below that. */
.provaide-newsletter > * { margin-block: 0; }
.provaide-newsletter h2 { margin-block-start: 14px !important; }
.provaide-newsletter__text { max-width: 440px; margin-block-start: 13px !important; }

/* Partner and funding logos (assets/logos/, from material-mdr/logos).
   Heights balance the logos optically, as on the A1 poster. */
.provaide-logos { gap: clamp(24px, 6.7vw, 80px) !important; }
.provaide-partner-logo { margin: 0; --h: 34px; }
.provaide-partner-logo img { display: block; width: auto; height: var(--h); max-width: 100%; }
.provaide-partner-logo--infai { --h: 37px; }
.provaide-partner-logo--ecpmf { --h: 36px; }
/* Funding box: white, holds the official BMFTR logo with its own clear space. */
.provaide-funding { box-sizing: border-box; }
.provaide-funding > * { margin: 0; }
.provaide-funding-logo { margin: 0; }
.provaide-funding-logo img { display: block; width: auto; height: 112px; }
@media (max-width: 781px) {
	.provaide-partner-logo { --h: 28px; }
	.provaide-partner-logo--infai { --h: 30px; }
	.provaide-partner-logo--ecpmf { --h: 29px; }
	.provaide-funding { margin-top: 32px !important; }
}

/* Page heads (Team, Kontakt): lead text keeps a short measure. */
.provaide-page-head > * { margin-block: 0; }
.provaide-page-head > * + * { margin-block-start: 14px; }
/* Constrained layouts centre narrow children with !important auto margins;
   start them where the content column starts, flush with the heading. */
.provaide-page-head > .provaide-lead,
.provaide-page-head > .provaide-contact-intro { margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important; }
.provaide-page-head > .provaide-lead { max-width: 560px; line-height: 1.5; }
/* Kontakt: what people can write to us about, below the lead. */
.provaide-page-head > .provaide-contact-intro { max-width: 640px; line-height: 1.6; }
.provaide-page-head > .provaide-lead + .provaide-contact-intro { margin-block-start: 24px; }

/* Team cards: portrait 231×270, then name and role 8 px apart. */
.provaide-person > * { margin: 0; }
.provaide-person > * + * { margin-top: 8px; }
.provaide-person__photo img { display: block; width: 100%; }
.provaide-person h3 { line-height: 1.2; }

/* Partner tiles on the team page: 180×90, gap 30, logo centred. */
.provaide-partner-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 180px)) !important; }
.provaide-partner-tile {
	display: grid;
	place-items: center;
	height: 90px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 8px;
	background: var(--wp--preset--color--surface-alt);
}
.provaide-partner-tile img { display: block; width: auto; height: calc(var(--h, 34px) * 0.8); max-width: 100%; }
.provaide-partner-tile.provaide-partner-logo--infai { --h: 37px; }
.provaide-partner-tile.provaide-partner-logo--ecpmf { --h: 36px; }

/* Contact column: groups 36 px apart, label 8 px above each value. */
.provaide-contact-info { padding-top: 10px; }
.provaide-contact-info > * { margin-block: 0; }
.provaide-contact-info > .is-style-label:not(:first-child) { margin-top: 36px; }
.provaide-contact-info > .is-style-label + p { margin-top: 8px; line-height: 1.5; }
.provaide-contact-info a { color: inherit; text-decoration: none; }
.provaide-contact-info a:hover { color: var(--wp--preset--color--accent); }

/* Impressum, Datenschutz: long legal text, smaller section headings. */
.provaide-legal { line-height: 1.6; }
.provaide-legal h2 { font-size: var(--wp--preset--font-size--l); margin-block: 40px 12px; }
.provaide-legal h2:first-child { margin-top: 0; }
.provaide-legal p, .provaide-legal ol, .provaide-legal ul { margin-block: 0 14px; }
.provaide-legal li + li { margin-top: 8px; }

/* Newsletter page: the plugin's form (or its messages) in the form box,
   flush with the heading like the page-head lead, styled like the
   contact form (forms.css). */
.provaide-newsletter-box {
	box-sizing: border-box;
	max-width: 560px;
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
}
.provaide-newsletter-box .tnp-subscription { margin: 0; max-width: none; }
.provaide-newsletter-box .tnp-field { margin: 0 0 20px; }
.provaide-newsletter-box .tnp-field label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.provaide-newsletter-box .tnp-privacy-field label { display: inline; font-weight: 400; color: var(--wp--preset--color--ink-muted); }
.provaide-newsletter-box .tnp-privacy-field a { color: inherit; }
.provaide-newsletter-box input.tnp-privacy {
	appearance: none;
	width: 16px;
	height: 16px;
	margin: 0 10px 0 0;
	vertical-align: -3px;
	border: 1px solid var(--wp--preset--color--ink-muted);
	border-radius: 3px;
	background: var(--wp--preset--color--surface-alt);
	cursor: pointer;
}
.provaide-newsletter-box input.tnp-privacy:checked {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23EDEDED' stroke-width='1.6'/%3E%3C/svg%3E") center no-repeat;
}
.provaide-newsletter-box .tnp :is(input, button).tnp-submit {
	width: auto;
	height: auto;
	padding: 16px 28px;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface-alt);
	font: 600 14px/1.2 var(--wp--preset--font-family--body);
	cursor: pointer;
}
.provaide-newsletter-box .tnp :is(input, button).tnp-submit:hover { background: var(--wp--preset--color--dark); }
.provaide-newsletter-box > p:only-child { margin: 0; font-size: var(--wp--preset--font-size--lead); }