/* --------------------------------------------------------------------------
 * Alakolmio — osiolohkon jälkeen renderöity, alaspäin osoittava kolmio (Figman
 * osioerottimet, esim. node 1:627). Pelkkää CSS:ää, ei SVG:tä.
 *
 * Kolmio on OMA elementti (<div class="froggy-triangle">), jonka kukin
 * osiolohko renderöi omassa render.php/edit.js:ssään, kun hasTriangle-
 * attribuutti on tosi. Kytkin Tyyli-välilehdellä on jaettu komponentti
 * (block-components/triangle-control.js). Erillinen elementti välttää editorin
 * lohkopseudojen (.block-editor-block-list__block::after) kanssa syntyvät
 * ristiriidat, joten !important-temppuja ei tarvita.
 *
 * Div on normaalivirrassa lohkon ja seuraavan lohkon välissä, joten se lisää
 * väliin oman korkeutensa (--triangle-h) eikä lohkojen omat paddingit muutu.
 *
 * Kaksi väriä sisaruksista:
 *   - Kolmio itse (::before) = EDELLISEN lohkon (oman osion) taustaväri
 *     -> .is-style-* + .froggy-triangle.
 *   - Kulmat (divin tausta)  = SEURAAVAN lohkon taustaväri
 *     -> .froggy-triangle:has(+ .is-style-*).
 *
 * Oletusväri on valkoinen = sivun oletustausta (theme.json background).
 * ----------------------------------------------------------------------- */

.froggy-triangle {
	--froggy-triangle-fill: var(--wp--preset--color--white);
	--froggy-triangle-under: var(--wp--preset--color--white);
	--froggy-triangle-h: clamp(2.5rem, 5vw, 4.5rem);

	position: relative;
	height: var(--froggy-triangle-h);
	background-color: var(--froggy-triangle-under);
	pointer-events: none;
}

/* Kolmion väri = edellisen (oman) lohkon moodi. */
.is-style-brand + .froggy-triangle {
	--froggy-triangle-fill: var(--wp--preset--color--primary);
}

.is-style-accent + .froggy-triangle {
	--froggy-triangle-fill: var(--wp--preset--color--accent);
}

/* Kulmien (alla olevan) väri = seuraavan lohkon moodi. */
.froggy-triangle:has(+ .is-style-brand) {
	--froggy-triangle-under: var(--wp--preset--color--primary);
}

.froggy-triangle:has(+ .is-style-accent) {
	--froggy-triangle-under: var(--wp--preset--color--accent);
}

/* Kolmio (oman lohkon väri) divin päälle. inset: -1px ylhäällä nostaa kolmiota
   pikselin edellisen lohkon sisään, jotta clip-pathin sub-pikselirako ei näy;
   väri on sama kuin edellisen lohkon tausta, joten peitto on näkymätön. */
.froggy-triangle::before {
	content: "";
	position: absolute;
	inset: -1px 0 0;
	background-color: var(--froggy-triangle-fill);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}