/*
 * Projektit page (/projektit/, page 9656): the page-specific rules, scoped by classes that the page's blocks carry
 * (Lisäasetukset > Lisä-CSS-luokat). Never scoped by a page ID (the IDs differ online). Loaded on the front end and in
 * the editor (add_editor_style), so the editor shows the page as the site does.
 * Round 3, 2026-10-16. Content: tools/bb-migration/curated/9656.html.
 *
 * The page is built from the site's section blocks only: Teksti ja kuva (avalon/text-image), Nostot (avalon/features +
 * avalon/feature), Osio (avalon/section), Artikkelit ja referenssit (avalon/posts), Henkilöt (avalon/people) and
 * Yhteydenottokaista (avalon/cta-band). What this file adds:
 *   1. the wave mark under the block titles of the page (class an-projects), drawn automatically (no wave picture block);
 *   6. the reference list (an-projects--refs) in columns, the size note (an-projects--note).
 * The card looks of the Nostot blocks (pictures 3:2, equal-height cards with the link at the bottom, white product
 * boxes, boxed text-only cards, compact phone rows) are the block's own setting "Korttityyli" since 2026-10-16
 * (attribute cardStyle: classes ab-features--cards / ab-features--boxed, vestelli-blocks/assets/blocks.css "feature
 * cards"), so a Nostot block inserted from the inserter can have the same look.
 * Tokens: the --ab-* spacing of vestelli-blocks (blocks.css); colours of theme.json.
 */

/* ------------------------------------------------------------ 1. the wave under the section titles */

/* The block's own title (Nostot, Artikkelit) and the first heading of a Teksti ja kuva block: the wave right under the
   title, as the wave pictures of the other pages (240px, 170px on phones; 12 / 14 / 16px below the text). The people
   block draws its own centred wave (blocks.css). */
.an-projects:not(.ab-people) .ab-head > .ab-title,
.an-projects .ab-ti__text > h2:first-child {
	--an-wave-w: 240px;
	padding-bottom: calc(var(--ab-flow, 16px) - 4px + var(--an-wave-w) * 134 / 2560);
	background: url("/wp-content/uploads/2026/03/kpb-image-195fd96739e4a51363690bf58dc16ffd-2-scaled.png") no-repeat left bottom / var(--an-wave-w) auto;
}

/* on navy: the white wave */
.an-projects.is-dark:not(.ab-people) .ab-head > .ab-title,
.an-projects.is-dark .ab-ti__text > h2:first-child {
	background-image: url("/wp-content/uploads/2026/02/77cc405b684b894164f3de3e96c8b7d00c0b3c89-scaled.png");
}

@media (max-width: 768px) {
	.an-projects:not(.ab-people) .ab-head > .ab-title,
	.an-projects .ab-ti__text > h2:first-child {
		--an-wave-w: 170px;
	}
}

/* ------------------------------------------------------------ 6. reference list and the size note */

/* "Toteutettuja projektikohteita": a list in columns (three on desktops, two on tablets, one on phones), one row per
   reference with a line above it; a reference with a story is a link as high as its row (44px tap target) */
.an-projects--refs .ab-container > .wp-block-list.wp-block-list {
	columns: 3 260px;
	column-gap: var(--ab-gap, 20px);
	max-width: none;
	margin-block-start: var(--ab-flow, 16px);
	padding: 0;
	list-style: none;
}

.an-projects--refs .wp-block-list > li {
	position: relative;
	break-inside: avoid;
	margin: 0;
	padding: 11px 0 11px 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	line-height: 1.4;
}

.an-projects--refs .wp-block-list > li::before {
	content: "";
	position: absolute;
	top: calc(11px + (1.4em - 16px) / 2);
	left: 0;
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--accent, #01a6e6);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M173.898 8.5957l-166.4 166.4c-9.99707 9.99707 -9.99707 26.2061 0 36.2041l36.2031 36.2041c9.99707 9.99805 26.207 9.99805 36.2041 0l112.095 -112.095l240.095 240.095c9.99707 9.99707 26.207 9.99707 36.2041 0l36.2031 -36.2041 c9.99707 -9.99707 9.99707 -26.2061 0 -36.2041l-294.4 -294.401c-9.99805 -9.99707 -26.207 -9.99707 -36.2031 0.000976562z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M173.898 8.5957l-166.4 166.4c-9.99707 9.99707 -9.99707 26.2061 0 36.2041l36.2031 36.2041c9.99707 9.99805 26.207 9.99805 36.2041 0l112.095 -112.095l240.095 240.095c9.99707 9.99707 26.207 9.99707 36.2041 0l36.2031 -36.2041 c9.99707 -9.99707 9.99707 -26.2061 0 -36.2041l-294.4 -294.401c-9.99805 -9.99707 -26.207 -9.99707 -36.2031 0.000976562z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.an-projects--refs:not(.is-dark) .wp-block-list > li {
	border-top-color: #e3e3e3;
}

.an-projects--refs .wp-block-list > li > a:only-child {
	display: block;
	margin-block: -11px;
	padding-block: 11px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.an-projects--refs .wp-block-list > li > a:only-child:hover {
	text-decoration-thickness: 2px;
}

/* the note under the product cards ("Kokoluokat on ilmoitettu asukasvastinelukuina …"): a short line with the accent
   edge, in the text column's measure */
.an-projects--note .ab-container > p {
	max-width: var(--ab-measure, 68ch);
	padding-left: 16px;
	border-left: 3px solid var(--wp--preset--color--accent, #01a6e6);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.an-projects--note .ab-container > p {
		font-size: 16px;
	}
}