/**
 * cls-fixes.css — Cumulative Layout Shift preventie
 * Wordt vóór styles.css geladen zodat de CRT-stijl deze waarden kan overschrijven.
 */

/* Basis containers */
header[role="banner"] { min-height: 100px; }
main                 { min-height: 300px; }
footer[role="contentinfo"] { min-height: 80px; }
nav[role="navigation"]     { min-height: 50px; }

/* Tools / cards */
.tool-card    { min-height: 280px; }
.tool-preview { min-height: 180px; }
.tools-grid   { min-height: 320px; }

/* Algemene image-stabiliteit */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img[width][height] { height: auto; }

html {
    overflow-y: scroll;
    font-size: 16px;
}

body { overflow-x: hidden; }

.container {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Dynamische content (e.g. release-feed) */
[data-js-load],
.js-lazy,
iframe { min-height: 1px; }

.dynamic-content {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media (prefers-reduced-motion: no-preference) {
    :root { scroll-behavior: smooth; }
    .animate {
        transition: transform 0.3s ease, opacity 0.3s ease;
        will-change: transform, opacity;
    }
}

h1, h2, h3, h4, h5, h6, p {
    font-variation-settings: normal;
}