/* Etusivun kuva ja sen paalle kirjoitettu teksti (julkinen etusivu + hallinnan esikatselu).
   Mitat ovat suhteessa kuvan leveyteen (cqi), joten teksti skaalautuu kuvan mukana. */
.etukuva { position: relative; container-type: inline-size; overflow: hidden; line-height: 0; }
.etukuva > img, .etukuva > a > img { width: 100%; height: auto; display: block; }
.etukuva__varjo { position: absolute; left: 0; top: 7.5%; max-width: 56%; filter: drop-shadow(0 0.25cqi 0.5cqi rgba(0,0,0,.25)); pointer-events: none; }
.etukuva__palkki {
	background: linear-gradient(90deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.80) 55%, rgba(255,255,255,.66) 100%);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	clip-path: polygon(0 0, 100% 0, calc(100% - 7.5cqi) 100%, 0 100%);
	padding: 1.3cqi 9.5cqi 1.5cqi 1.1cqi;
	color: #111;
	line-height: 1.22;
	font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
}
.etukuva__otsikko { margin: 0; font-size: 2.15cqi; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; color: #111; }
.etukuva__teksti { margin: .55cqi 0 0; font-size: 1.5cqi; font-weight: 500; line-height: 1.35; color: #111; }
.etukuva__otsikko:empty, .etukuva__teksti:empty { display: none; }

/* Teksti oikeassa alakulmassa (viiste vasemmalla) */
.etukuva--oikea .etukuva__varjo { left: auto; right: 0; top: auto; bottom: 7.5%; }
.etukuva--oikea .etukuva__palkki { background: linear-gradient(270deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.80) 55%, rgba(255,255,255,.66) 100%); clip-path: polygon(7.5cqi 0, 100% 0, 100% 100%, 0 100%); padding: 1.3cqi 1.1cqi 1.5cqi 9.5cqi; text-align: right; }

/* Kapea nakyma (puhelin): palkki pysyy kuvan paalla, teksti suhteessa suurempi */
@container (max-width: 640px) {
	.etukuva__varjo { top: 5%; max-width: 94%; }
	.etukuva__palkki { padding: 2.4cqi 9cqi 2.6cqi 3cqi; clip-path: polygon(0 0, 100% 0, calc(100% - 6cqi) 100%, 0 100%); }
	.etukuva--oikea .etukuva__varjo { top: auto; bottom: 6%; }
	.etukuva--oikea .etukuva__palkki { padding: 2.4cqi 3cqi 2.6cqi 9cqi; clip-path: polygon(6cqi 0, 100% 0, 100% 100%, 0 100%); }
	.etukuva__otsikko { font-size: 4cqi; }
	.etukuva__teksti { font-size: 3cqi; margin-top: 1cqi; }
	.etukuva__teksti br { display: none; } /* kapealla rivit katkeavat luontevasti */
}