/*
 * Blok: Data en programma (template-parts/data.php).
 * Dezelfde kaart als "Aankomende activiteiten" op de homepage (activiteiten-uitstapjes.css): links een vlak in de
 * onderwerpkleur met het kalenderblaadje, rechts onderwerp en gegevens. Breed in twee kolommen.
 */

.blok-data__lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 12px 16px; margin: 0; padding: 0; list-style: none; }

.blok-datum { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 0 16px; min-height: 140px; padding-right: 16px; overflow: hidden; background: var(--swo-color-card); border: 1px solid var(--blok-lijn); border-radius: 14px; transition: border-color .25s ease, box-shadow .25s ease; }
.blok-datum.is-link { grid-template-columns: 128px minmax(0, 1fr) 22px; }
.blok-datum.is-link:hover { border-color: #D3C6B7; box-shadow: 0 10px 26px rgba(70, 45, 20, .12); }

/* Vlak met kalenderblaadje */
.blok-datum__media { position: relative; align-self: stretch; min-height: 100%; overflow: hidden; background: var(--blok-tint); }
.blok-datum__icoon { position: absolute; right: 12px; bottom: 12px; color: var(--blok-accent); }
.blok-datum__icoon svg { display: block; width: 40px; height: 40px; stroke-width: 1.5; }
.blok-datum__blad { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; width: 62px; flex-direction: column; overflow: hidden; background: #FFFFFF; border-radius: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); line-height: 1; text-align: center; transition: transform .35s var(--blok-ease); }
.blok-datum__dag { padding: 5px 4px 4px; color: #FFFFFF; background: var(--blok-accent); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.blok-datum__blad.is-binnenkort .blok-datum__dag { padding-top: 6px; font-size: 12px; letter-spacing: 0; }
.blok-datum__nummer { padding-top: 6px; color: var(--swo-color-heading); font-size: 26px; font-weight: 800; }
.blok-datum__maand { padding: 3px 0 8px; color: #3A3530; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.blok-datum.is-link:hover .blok-datum__blad { transform: translateY(-2px); }

/* Tekst */
.blok-datum__body { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 16px 0; }
.blok-datum__labels { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; }
.blok-datum__label { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 4px; color: var(--swo-color-heading); background: var(--blok-tint); border-radius: 999px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.blok-datum__label-icoon { display: inline-flex; flex: none; width: 26px; height: 26px; align-items: center; justify-content: center; color: var(--blok-accent); background: var(--swo-color-card); border-radius: 50%; }
.blok-datum__label-icoon svg { width: 15px; height: 15px; }
.blok-datum__titel { margin: 0; color: var(--swo-color-heading); font-size: 18px; font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
.blok-datum__link { color: var(--swo-color-heading); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; }
.blok-datum__link::after { position: absolute; z-index: 3; inset: 0; content: ""; border-radius: 14px; }
.blok-datum.is-link:hover .blok-datum__link { color: var(--swo-color-primary-dark); text-decoration-color: currentColor; }
.blok-datum__link:focus-visible { outline: 0; }
.blok-datum__link:focus-visible::after { outline: 3px solid var(--swo-color-focus); outline-offset: -3px; }

.blok-datum__meta { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--swo-color-text); }
.blok-datum__meta li { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 16px; line-height: 1.45; }
.blok-datum__meta svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--blok-icoon, #6B6058); }
.blok-datum__meta strong { color: var(--swo-color-heading); font-weight: 700; }

.blok-datum__pijl { display: inline-flex; color: #6B6058; transition: color .2s ease, transform .2s ease; }
.blok-datum__pijl svg { width: 22px; height: 22px; }
.blok-datum.is-link:hover .blok-datum__pijl { color: var(--swo-color-primary-dark); transform: translateX(3px); }

.blok-data__leeg { max-width: 900px; margin: 0; padding: 20px 24px; color: var(--blok-tekst); background: var(--swo-color-card); border: 1px dashed var(--blok-lijn); border-radius: 16px; font-size: 18px; }

@media (max-width: 600px) {
	.blok-datum, .blok-datum.is-link { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-right: 0; }
	.blok-datum__pijl { display: none; }
	.blok-datum__media { min-height: 112px; }
	.blok-datum__blad { top: 10px; left: 12px; width: 58px; }
	.blok-datum__nummer { font-size: 24px; }
	.blok-datum__icoon { right: 14px; bottom: 12px; }
	.blok-datum__icoon svg { width: 36px; height: 36px; }
	.blok-datum__body { padding: 14px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.blok-datum, .blok-datum__blad, .blok-datum__pijl { transition: none; }
	.blok-datum.is-link:hover .blok-datum__blad, .blok-datum.is-link:hover .blok-datum__pijl { transform: none; }
}

@media (forced-colors: active) {
	.blok-datum, .blok-datum__blad { border: 1px solid CanvasText; }
	.blok-datum__dag, .blok-datum__label { color: CanvasText; background: Canvas; }
}