/* singulary-ui/zertifikate: partners show their original logo at one height (no logo: ink wordmark); seals keep their colour, no hover. */

.fyh-zert {
	background: var(--wp--preset--color--base);
}

.fyh-zert__inner {
	width: 100%;
	max-width: var(--wp--custom--layout--shell-max, 1512px);
	margin-inline: auto;
	padding: var(--wp--custom--layout--section-space, clamp(4rem, 5.5vw, 5rem)) var(--wp--custom--layout--edge, clamp( 1.5rem, 5vw, 6rem ));
}

.fyh-zert__h2 span { color: var(--wp--preset--color--muted); }

.fyh-zert__logos {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	margin: 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid var(--wp--preset--color--hairline);
}

.fyh-zert__logo { min-width: 0; }
.fyh-zert__logo + .fyh-zert__logo { border-inline-start: 1px solid var(--wp--preset--color--hairline); }

.fyh-zert__partner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	height: 100%;
	padding: 2rem clamp( 1.25rem, 2.4vw, 2.25rem );
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.fyh-zert__logo:first-child .fyh-zert__partner { padding-inline-start: 0; }

.fyh-zert__mark {
	display: flex;
	align-items: center;
	height: 2.5rem;
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -.02em;
}

.fyh-zert__mark img { display: block; width: auto; max-width: 100%; height: 1.75rem; object-fit: contain; object-position: left center; }
/* The IVD mark carries a two-line claim; a little more height keeps it legible beside the one-line wordmarks. */
.fyh-zert__mark img[src*="/logos/ivd"] { height: 2.25rem; }

.fyh-zert__role { font-size: .875rem; line-height: 1.45; color: var(--wp--preset--color--muted); }

.fyh-zert__ext {
	position: absolute;
	top: 2rem;
	right: clamp( 1.25rem, 2.4vw, 2.25rem );
	color: var(--wp--preset--color--muted);
	transition: color 200ms ease, transform 200ms ease;
}

.fyh-zert__partner:is( :hover, :focus-visible ) .fyh-zert__ext { color: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); transform: translate( 2px, -2px ); }
.fyh-zert__partner:focus-visible { outline: 2px solid var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); outline-offset: -2px; }

/* Second row of the same 4-column grid: seals span two columns, each
   qualification is a cell with the logo-cell rhythm (title, muted source). */
.fyh-zert__proofline {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	align-items: stretch;
	border-block-end: 1px solid var(--wp--preset--color--hairline);
}

.fyh-zert__proofvisual {
	grid-column: span 2;
	display: flex;
	align-items: center;
	margin: 0;
	padding-block: 1.5rem;
}

/* Seals keep their colour, a touch calmer and lighter beside the ink wordmarks. No hover. */
.fyh-zert__proofvisual img { display: block; width: 100%; height: clamp( 5rem, 7vw, 6.5rem ); object-fit: contain; object-position: left center; mix-blend-mode: multiply; filter: saturate( .82 ) brightness( 1.06 ); }

.fyh-zert__quals { display: contents; }

.fyh-zert__qual {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	grid-template-rows: auto auto;
	align-content: center;
	column-gap: 1rem;
	row-gap: .2rem;
	min-width: 0;
	padding: 1.5rem clamp( 1.25rem, 2.4vw, 2.25rem );
	border-inline-start: 1px solid var(--wp--preset--color--hairline);
}

/* Each qualification carries a certified-seal icon (Lucide badge-check, brand)
   in a lightly tinted disc. A data URI cannot read tokens, so each brand sets its icon
   in theme.json (custom.zert.icon); the default carries the template colour. */
.fyh-zert__qual::before {
	content: "";
	grid-row: 1 / 3;
	align-self: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--custom--zert--icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23801518' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")) center / 1.375rem no-repeat color-mix( in srgb, var(--wp--custom--ui--primary, var(--wp--preset--color--brand)) 8%, var(--wp--preset--color--base) );
}

/* Without a proof visual the first qualification opens the row, flush like the logos. */
.fyh-zert__quals:first-child > .fyh-zert__qual:first-child { border-inline-start: 0; padding-inline-start: 0; }

.fyh-zert__qual strong { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--wp--preset--color--ink); }
.fyh-zert__qual span { font-size: .875rem; line-height: 1.45; color: var(--wp--preset--color--muted); }

@media ( max-width: 900px ) {
	.fyh-zert__logos, .fyh-zert__proofline { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.fyh-zert__qual:nth-child( odd ) { border-inline-start: 0; padding-inline-start: 0; }
	.fyh-zert__qual { border-block-start: 1px solid var(--wp--preset--color--hairline); }
	.fyh-zert__logo:nth-child( 3 ) { border-inline-start: 0; }
	.fyh-zert__logo:nth-child( n + 3 ) { border-block-start: 1px solid var(--wp--preset--color--hairline); }
	.fyh-zert__logo:nth-child( odd ) .fyh-zert__partner { padding-inline-start: 0; }
}

/* Phones: one qualification per row, so long titles never run into the neighbour. */
@media ( max-width: 640px ) {
	.fyh-zert__proofline { grid-template-columns: minmax( 0, 1fr ); }
	.fyh-zert__proofvisual { grid-column: 1 / -1; }
	.fyh-zert__qual { border-inline-start: 0; padding-inline: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.fyh-zert__ext { transition: none; }
}