/* ═══════════════════════════════════════════════════════════════
   Home — Categorietegels  ("Ontdek per categorie")
   Tactiele, afgeronde toy-craft kaarten met per-categorie speelse
   verloop-achtergronden, decoratief icoon-watermerk en springerige
   pijl. Eigen classes geprefixt met .cat-* (geen botsing met fundament).
   ═══════════════════════════════════════════════════════════════ */

/* ── Grid: 4 → 2 → 1 ─────────────────────────────────────────── */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.2vw, 26px);
}
@media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cat-grid { grid-template-columns: 1fr; } }

/* ── De tegel ────────────────────────────────────────────────── */
.cat-kaart {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: clamp(248px, 30vw, 300px);
    padding: clamp(20px, 2.4vw, 28px);
    border-radius: var(--r-lg);
    background: var(--cat-bg, var(--grape-100));
    color: var(--cat-ink, var(--ink));
    box-shadow: var(--sh-sm);
    transition: transform .4s var(--veer), box-shadow .4s var(--vloei);
}
/* Zachte clay-binnenrand voor diepte */
.cat-kaart::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .35),
                inset 0 0 0 1px rgba(255, 255, 255, .14);
    pointer-events: none;
    z-index: 3;
}

/* Hover/focus: lift + lichte rotatie + diepere schaduw */
.cat-kaart:hover,
.cat-kaart:focus-visible {
    transform: translateY(-8px) rotate(-1.1deg);
    box-shadow: var(--cat-sh, var(--sh-lg));
}
.cat-kaart:active { transform: translateY(-3px) rotate(-.5deg) scale(.99); }
.cat-kaart:focus-visible { outline: 3px solid var(--cat-ring, var(--grape)); outline-offset: 4px; }

/* ── Decoratief icoon-watermerk ──────────────────────────────── */
.cat-watermerk {
    position: absolute;
    right: -28px;
    bottom: -34px;
    z-index: 0;
    line-height: 0;
    color: var(--cat-mark, rgba(24, 35, 82, .14));
    transform: rotate(-12deg);
    transition: transform .55s var(--veer);
    pointer-events: none;
}
.cat-watermerk .icoon { width: clamp(150px, 17vw, 200px); height: auto; }
.cat-kaart:hover .cat-watermerk,
.cat-kaart:focus-visible .cat-watermerk {
    transform: rotate(-4deg) scale(1.12) translateY(-6px);
}

/* Zwevende blob-accent rechtsboven */
.cat-blob {
    position: absolute;
    top: -26px;
    right: -22px;
    width: 96px;
    height: 96px;
    z-index: 0;
    border-radius: 46% 54% 60% 40% / 42% 46% 54% 58%;
    background: var(--cat-blob, rgba(255, 255, 255, .5));
    opacity: .8;
    pointer-events: none;
    transition: transform .55s var(--veer);
}
.cat-kaart:hover .cat-blob,
.cat-kaart:focus-visible .cat-blob { transform: scale(1.18) rotate(18deg); }

/* ── Tekstlaag (boven decor) ─────────────────────────────────── */
.cat-eyebrow,
.cat-naam,
.cat-tekst,
.cat-pijl { position: relative; z-index: 2; }

.cat-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-xs);
    letter-spacing: .02em;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    color: var(--cat-eyebrow-fg, var(--grape-700));
    background: var(--cat-eyebrow-bg, rgba(255, 255, 255, .7));
}
.cat-eyebrow .icoon { width: 15px; height: 15px; vertical-align: 0; }

.cat-naam {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 600;
    line-height: 1.05;
    margin-top: 16px;
    color: inherit;
}

.cat-tekst {
    margin-top: 8px;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--cat-tekst, var(--ink-soft));
}

/* ── Springerige pijl (onderaan, duwt op hover) ──────────────── */
.cat-pijl {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-sm);
    color: inherit;
}
.cat-pijl-rond {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cat-pijl-bg, var(--surface));
    color: var(--cat-pijl-fg, var(--grape));
    box-shadow: var(--sh-sm);
    transition: transform .35s var(--veer), background .25s, color .25s;
}
.cat-pijl-rond .icoon { width: 18px; height: 18px; vertical-align: 0; }
.cat-kaart:hover .cat-pijl-rond,
.cat-kaart:focus-visible .cat-pijl-rond {
    transform: translateX(6px) scale(1.12);
    animation: cat-veer .6s var(--veer);
}
@keyframes cat-veer {
    0%   { transform: translateX(0)   scale(1); }
    55%  { transform: translateX(10px) scale(1.18); }
    100% { transform: translateX(6px)  scale(1.12); }
}

/* ═══════════════════════════════════════════════════════════════
   Themavarianten — speelse verloop-achtergronden uit het palet.
   Donkere "grape"-tegel = witte tekst; lichte tints = donkere ink.
   ═══════════════════════════════════════════════════════════════ */

/* — Grape (donker, witte tekst) — */
.cat-kaart--grape {
    --cat-bg: radial-gradient(135% 120% at 18% 12%, #29499A 0%, var(--grape) 58%, var(--grape-700) 100%);
    --cat-ink: #fff;
    --cat-tekst: rgba(255, 255, 255, .82);
    --cat-mark: rgba(255, 255, 255, .16);
    --cat-blob: rgba(255, 194, 74, .55);
    --cat-eyebrow-fg: var(--ink);
    --cat-eyebrow-bg: var(--sun);
    --cat-pijl-bg: #fff;
    --cat-pijl-fg: var(--grape);
    --cat-sh: var(--sh-grape);
    --cat-ring: var(--sun);
}

/* — Koraal — */
.cat-kaart--coral {
    --cat-bg: radial-gradient(135% 125% at 80% 12%, #FFB24D 0%, var(--coral) 52%, #E2650F 100%);
    --cat-ink: #14204A;
    --cat-tekst: rgba(20, 32, 74, .86);
    --cat-mark: rgba(255, 255, 255, .22);
    --cat-blob: rgba(255, 255, 255, .45);
    --cat-eyebrow-fg: var(--coral-ink);
    --cat-eyebrow-bg: rgba(255, 255, 255, .85);
    --cat-pijl-fg: var(--coral-ink);
    --cat-sh: var(--sh-coral);
    --cat-ring: #14204A;
}

/* — Zon (geel → altijd donkere ink) — */
.cat-kaart--sun {
    --cat-bg: radial-gradient(135% 125% at 16% 86%, #FFD860 0%, var(--sun) 52%, #F2A70E 100%);
    --cat-ink: #14204A;
    --cat-tekst: rgba(20, 32, 74, .82);
    --cat-mark: rgba(20, 32, 74, .16);
    --cat-blob: rgba(255, 255, 255, .5);
    --cat-eyebrow-fg: #14204A;
    --cat-eyebrow-bg: rgba(255, 255, 255, .72);
    --cat-pijl-fg: #14204A;
    --cat-sh: 0 28px 56px rgba(242, 167, 14, .45);
    --cat-ring: #14204A;
}

/* — Teal — */
.cat-kaart--teal {
    --cat-bg: radial-gradient(135% 125% at 84% 84%, #4FD0F2 0%, var(--teal) 52%, #0A8CBE 100%);
    --cat-ink: #14204A;
    --cat-tekst: rgba(20, 32, 74, .84);
    --cat-mark: rgba(255, 255, 255, .22);
    --cat-blob: rgba(255, 255, 255, .45);
    --cat-eyebrow-fg: #0A6F7C;
    --cat-eyebrow-bg: rgba(255, 255, 255, .85);
    --cat-pijl-fg: #0A6F7C;
    --cat-sh: 0 28px 56px rgba(18, 174, 224, .42);
    --cat-ring: #14204A;
}

/* — Berry (roze) — */
.cat-kaart--berry {
    --cat-bg: radial-gradient(130% 120% at 18% 16%, #FFD0DE 0%, var(--berry-100) 52%, #FFD7E2 100%);
    --cat-tekst: #B23A63;
    --cat-mark: rgba(178, 58, 99, .16);
    --cat-blob: rgba(255, 127, 166, .5);
    --cat-eyebrow-fg: #B23A63;
    --cat-eyebrow-bg: rgba(255, 255, 255, .72);
    --cat-pijl-fg: #B23A63;
    --cat-sh: 0 28px 56px rgba(255, 127, 166, .4);
    --cat-ring: #B23A63;
}

/* ── Reduced motion: rust ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cat-kaart,
    .cat-watermerk,
    .cat-blob,
    .cat-pijl-rond { transition: none; }
    .cat-kaart:hover,
    .cat-kaart:focus-visible { transform: none; }
    .cat-kaart:hover .cat-watermerk,
    .cat-kaart:hover .cat-blob { transform: rotate(-12deg); }
    .cat-kaart:hover .cat-pijl-rond,
    .cat-kaart:focus-visible .cat-pijl-rond { animation: none; transform: none; }
}

/* ── Categorie-tegel met echte foto (Diertjes) ─────────────────── */
.cat-kaart--foto { position: relative; overflow: hidden; }
.cat-kaart--foto .cat-foto {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 62%; z-index: 0;
    transition: transform .5s var(--vloei);
}
.cat-kaart--foto:hover .cat-foto { transform: scale(1.06); }
.cat-kaart--foto::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(178deg, rgba(24,35,82,.82) 18%, rgba(24,35,82,.28) 55%, rgba(24,35,82,.62) 100%);
}
.cat-kaart--foto .cat-watermerk, .cat-kaart--foto .cat-blob { display: none; }
.cat-kaart--foto .cat-eyebrow, .cat-kaart--foto .cat-naam,
.cat-kaart--foto .cat-tekst, .cat-kaart--foto .cat-pijl { position: relative; z-index: 2; }
.cat-kaart--foto .cat-naam, .cat-kaart--foto .cat-tekst { color: #fff; }
.cat-kaart--foto .cat-eyebrow { color: #fff; background: rgba(255,255,255,.16); }