/*
 * Blok: Kaarten (template-parts/kaarten.php).
 * Zelfde beeldtaal als de dienstkaarten op de homepage: foto met een waas in de onderwerpkleur, icoon in een rondje
 * dat over de rand van de foto valt. Zonder foto en tekst: een compacte tegel met icoon, titel en pijl.
 */

.blok-kaarten__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.blok-kaarten__raster > .blok-kaart:only-child { max-width: 440px; }
/* Elke kaart kan een eigen kleur hebben (inline --blok-accent); de tint rekent daarom per kaart opnieuw. */
.blok-kaart { --blok-tint: color-mix(in srgb, var(--blok-accent) 10%, #FFFFFF); position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: var(--swo-color-card); border: 1px solid var(--blok-lijn); border-radius: 16px; box-shadow: 0 2px 10px rgba(70, 45, 20, .05); transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--blok-ease); }
/* Gekleurde rand bovenaan, net als de dienstkaarten op de homepage (niet bij de compacte tegels). */
.blok-kaart:not(.is-compact)::before { position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 6px; content: ""; background: var(--blok-accent); }
.blok-kaart.is-link:hover { border-color: var(--blok-accent); box-shadow: 0 10px 26px rgba(70, 45, 20, .12); transform: translateY(-4px); }
.blok-kaart.is-link:focus-within { outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }

.blok-kaart__media { position: relative; overflow: hidden; aspect-ratio: 16 / 8; background: #EEE8E1; }
.blok-kaart__media::after { position: absolute; inset: 0; content: ""; background: var(--blok-accent); opacity: .2; pointer-events: none; transition: opacity .2s ease; }
.blok-kaart__foto { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blok-kaart.is-link:hover .blok-kaart__foto { transform: scale(1.03); }
.blok-kaart.is-link:hover .blok-kaart__media::after { opacity: .3; }

.blok-kaart__inhoud { position: relative; display: flex; flex: 1; flex-direction: column; padding: 22px 24px 22px; }
.blok-kaart__icoon { margin-bottom: 14px; }
.blok-kaart.heeft-foto .blok-kaart__icoon { margin-top: -50px; color: #FFFFFF; background: var(--blok-accent); border: 4px solid var(--swo-color-card); width: 58px; height: 58px; box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.blok-kaart.heeft-foto .blok-kaart__icoon svg { width: 26px; height: 26px; }
.blok-kaart__titel { margin: 0; color: var(--swo-color-heading); font-size: 21px; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.blok-kaart__link { color: inherit; text-decoration: none; }
.blok-kaart__link::after { position: absolute; z-index: 2; inset: 0; content: ""; }
.blok-kaart__link:focus-visible { outline: none; }
.blok-kaart__tekst { margin: 8px 0 0; color: var(--blok-tekst); font-size: 18px; line-height: 1.55; }
.blok-kaart__meer { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto; padding-top: 16px; color: var(--swo-color-heading); font-size: 17px; font-weight: 700; }
.blok-kaart__meer svg { width: 20px; height: 20px; color: var(--blok-accent); transition: transform .2s var(--blok-ease); }
.blok-kaart.is-link:hover .blok-kaart__meer span { text-decoration: underline; text-decoration-color: var(--blok-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blok-kaart.is-link:hover .blok-kaart__meer svg { transform: translateX(4px); }

/* Compacte tegel */
.blok-kaart.is-compact .blok-kaart__inhoud { flex-direction: row; align-items: center; gap: 16px; padding: 16px 20px; }
.blok-kaart.is-compact .blok-kaart__icoon { margin: 0; }
.blok-kaart.is-compact .blok-kaart__titel { flex: 1; font-size: 19px; }
.blok-kaart.is-compact .blok-kaart__meer { margin: 0; padding: 0; }

@media (max-width: 600px) {
	.blok-kaarten__raster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.blok-kaart__inhoud { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.blok-kaart, .blok-kaart__foto, .blok-kaart__meer svg { transition: none; }
	.blok-kaart.is-link:hover, .blok-kaart.is-link:hover .blok-kaart__foto { transform: none; }
}

@media (forced-colors: active) {
	.blok-kaart { border-color: CanvasText; }
}