/* patterns/concern-tiles.php — neljä klikattavaa valokuvalaattaa ("full-link"
   Cover-tekniikka, sama kuin etusivun bannereissa / cover-full-link.css).
   Desktopilla rivissä, mobiilissa 2x2-ruudukkona — tämä on navigointipäätös,
   joten kaikkien neljän vaihtoehdon pitää näkyä kerralla ilman vieritystä. */
.concern-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

/* WordPressin automaattinen blockGap-sääntö (:root :where(.is-layout-
   constrained) > * { margin-block-start: 1.5rem }) lisää marginaalin
   jokaiselle lapselle paitsi ensimmäiselle (:first-child-poikkeus) — ilman
   tätä se jää voimaan Gridissäkin, jolloin ensimmäinen laatta näyttää
   istuvan muita korkeammalla. Gapin hoitaa jo yllä oleva gap-ominaisuus.
   :where() nollaa ytimen säännön spesifisyyden, mutta se on silti sama kuin
   pelkällä .concern-tiles > * -valitsimella (tasapeli) — .wp-block-group
   lisätään varmistamaan voitto riippumatta tulostusjärjestyksestä. */
.wp-block-group.concern-tiles > * {
	margin-block-start: 0;
}

@media (max-width: 768px) {
	.concern-tiles {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

.concern-tile.wp-block-cover {
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
}

/* Otsikon sisällä oleva linkki (laatan klikattavuus) saa selaimen oletus-
   alleviivauksen, eikä editorin tekstityökaluista löydy suoraa tapaa poistaa
   sitä sisäkkäiseltä linkiltä otsikon sisällä. */
.concern-tiles .wp-block-heading a {
	text-decoration: none;
}