/*
 * Blok: Documenten en downloads (template-parts/documenten.php).
 * Lijst: één kaart met een regel per document. Met voorkant: een raster met de eerste pagina van elk document.
 */

/* ---------- Lijst ---------- */
.blok-documenten__lijst { max-width: 900px; margin: 0; padding: 0; overflow: hidden; list-style: none; background: var(--swo-color-card); border: 1px solid var(--blok-lijn); border-radius: 16px; box-shadow: 0 2px 10px rgba(70, 45, 20, .05); }
.blok-documenten__lijst > li + li { border-top: 1px solid #EFE8E0; }
.blok-document { position: relative; display: flex; min-height: 80px; align-items: center; gap: 18px; padding: 16px 24px; color: var(--swo-color-heading); text-decoration: none; transition: background-color .2s ease; }
.blok-document:hover { color: var(--swo-color-heading); background: color-mix(in srgb, var(--blok-accent) 5%, #FFFFFF); text-decoration: none; }
.blok-document:focus-visible { z-index: 1; outline: 3px solid var(--swo-color-focus); outline-offset: -3px; border-radius: 16px; }
.blok-document__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.blok-document__naam { font-size: 19px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.blok-document__meta { color: var(--blok-zacht); font-size: 16px; line-height: 1.45; }
.blok-document__actie { display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--swo-color-heading); font-size: 17px; font-weight: 700; }
.blok-document__actie svg { width: 20px; height: 20px; color: var(--blok-accent); transition: transform .2s var(--blok-ease); }
.blok-document:hover .blok-document__actie span { text-decoration: underline; text-decoration-color: var(--blok-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blok-document:hover .blok-document__actie svg { transform: translateY(-1px) scale(1.08); }

/* ---------- Met voorkant: boekenplank ---------- */
/*
 * De voorkanten staan (iets scheef, om en om) op een plank in de onderwerpkleur; titel en gegevens staan eronder.
 * Elke plek tekent zijn eigen stuk plank, een halve tussenruimte breder, zodat de stukken per rij één plank vormen.
 */
.blok-documenten__plank { --plank-gat: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 56px var(--plank-gat); margin: 0; padding: 0 20px; list-style: none; }
.blok-boek { min-width: 0; }
.blok-boek__link { display: flex; height: 100%; flex-direction: column; align-items: center; gap: 4px; color: var(--swo-color-heading); text-align: center; text-decoration: none; }
.blok-boek__link:hover { color: var(--swo-color-heading); text-decoration: none; }
.blok-boek__link:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 6px; border-radius: 10px; }

.blok-boek__plek { position: relative; display: flex; width: 100%; height: 236px; align-items: flex-end; justify-content: center; margin-bottom: 38px; }
.blok-boek__plek::after { position: absolute; z-index: 0; right: calc(var(--plank-gat) / -2 - 1px); bottom: -20px; left: calc(var(--plank-gat) / -2 - 1px); height: 20px; content: ""; background: color-mix(in srgb, var(--blok-accent) 26%, #E9DCCB); box-shadow: 0 12px 16px -10px rgba(70, 45, 20, .45); }

.blok-boek__voorkant { position: relative; z-index: 1; display: block; width: min(168px, 100%); aspect-ratio: 168 / 236; overflow: hidden; background: var(--swo-color-card); border-radius: 3px 8px 8px 3px; box-shadow: inset 5px 0 7px rgba(0, 0, 0, .07), 0 18px 22px -12px rgba(70, 45, 20, .55), 0 2px 4px rgba(70, 45, 20, .12); transform: rotate(-2deg); transform-origin: bottom center; transition: transform .3s var(--blok-ease), box-shadow .3s ease; }
.blok-boek:nth-child(even) .blok-boek__voorkant { transform: rotate(1.5deg); }
.blok-boek:nth-child(3n) .blok-boek__voorkant { transform: rotate(-1deg); }
.blok-boek__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.blok-boek__link:hover .blok-boek__voorkant, .blok-boek__link:focus-visible .blok-boek__voorkant { box-shadow: inset 5px 0 7px rgba(0, 0, 0, .07), 0 26px 28px -14px rgba(70, 45, 20, .55), 0 2px 4px rgba(70, 45, 20, .12); transform: translateY(-8px) rotate(0deg); }

/* Eigen voorkant als er geen voorbeeld is (een link, of een bestand zonder voorbeeld) */
.blok-boek__voorkant.is-eigen { display: flex; box-sizing: border-box; padding: 20px 16px 18px; flex-direction: column; color: #FFFFFF; background: var(--blok-accent); text-align: left; box-shadow: inset 6px 0 8px rgba(0, 0, 0, .15), 0 18px 22px -12px rgba(70, 45, 20, .55); }
.blok-boek__voorkant.is-eigen svg { width: 32px; height: 32px; stroke-width: 1.6; }
.blok-boek__eigen-titel { margin-top: auto; font-size: 21px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.blok-boek__eigen-afzender { margin-top: 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }

.blok-boek__naam { font-size: 19px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.blok-boek__link:hover .blok-boek__naam { text-decoration-color: var(--blok-accent); }
.blok-boek__meta { display: inline-flex; align-items: center; gap: 6px; color: var(--blok-zacht); font-size: 16px; line-height: 1.45; }
.blok-boek__meta svg { width: 16px; height: 16px; color: var(--blok-accent); }

@media (max-width: 600px) {
	.blok-document { gap: 14px; padding: 14px 16px; }
	.blok-documenten:not(.is-voorkant) .blok-document__actie span { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); white-space: nowrap; }
	.blok-documenten__plank { --plank-gat: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px var(--plank-gat); padding: 0 12px; }
	.blok-boek__plek { height: auto; min-height: 150px; margin-bottom: 34px; }
	.blok-boek__voorkant { width: min(140px, 100%); }
	.blok-boek__eigen-titel { font-size: 17px; }
	.blok-boek__naam { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.blok-document, .blok-document__actie svg, .blok-boek__voorkant { transition: none; }
	.blok-boek__link:hover .blok-boek__voorkant, .blok-boek__link:focus-visible .blok-boek__voorkant { transform: none; }
}

@media (forced-colors: active) {
	.blok-documenten__lijst, .blok-boek__voorkant { border: 1px solid CanvasText; }
	.blok-boek__plek::after { background: CanvasText; }
}