/* special.css — the specials pages (2026-09-14, C23). Card styles copied from zoeken.php so both look the same. */
.zk-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){.zk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.zk-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.zk-card a{display:block;background:var(--sheet);border-radius:14px;padding:7px 7px 12px;text-decoration:none;color:inherit;border:1px solid var(--rule);transition:transform .15s,box-shadow .15s;height:100%;box-sizing:border-box}
.zk-card a:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgb(25 28 24 / .14)}
.zk-card .ph{position:relative;aspect-ratio:1/1;border-radius:9px;overflow:hidden;background:var(--sunk)}
.zk-card img{width:100%;height:100%;object-fit:cover;display:block}
.zk-card .nofoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Newsreader,serif;font-size:15px;color:var(--ink-3);padding:14px;text-align:center;line-height:1.3}
.zk-card .tijd{position:absolute;left:8px;bottom:8px;background:rgb(25 28 24 / .78);color:#fff;font-size:12px;padding:3px 8px;border-radius:999px;backdrop-filter:blur(4px)}
.zk-card .nm{display:block;margin:9px 4px 3px;font-family:Newsreader,serif;font-size:17px;line-height:1.2;font-weight:500;color:var(--ink)}
.zk-card .mt{display:flex;gap:6px;flex-wrap:wrap;margin:0 4px;font-size:12px;color:var(--ink-3);align-items:center}
.zk-card .mt b{font-weight:500;color:var(--bota)}
.zk-card .sc{color:#B7791F;font-weight:600}
.zk-card .tag{background:var(--bota-bg);color:var(--bota-ink);padding:2px 7px;border-radius:999px;font-size:11px}
.page>.sp-page{grid-column:main;width:100%;max-width:1120px;margin:0 auto;padding:0 0 60px;box-sizing:border-box}
.page>.crumbs{grid-column:main;max-width:1120px;margin:0 auto;width:100%}
.sp-kop{padding:22px 0 6px}
.sp-kop h1{font-family:Newsreader,serif;font-weight:500;font-size:clamp(28px,4vw,44px);line-height:1.08;margin:6px 0 10px;letter-spacing:-.01em}
.sp-lede{font-family:Newsreader,serif;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--ink-2);margin:0 0 18px;max-width:64ch}
.sp-hero{margin:0 0 18px}
.sp-hero img{width:100%;max-width:600px;height:auto;border-radius:16px;display:block;background:var(--sunk)}
.sp-toc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px;padding:12px 14px;background:var(--sunk);border-radius:12px}
.sp-toc .dlab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.sp-toc a{font-size:13.5px;color:var(--bota);text-decoration:none;border:1px solid var(--rule-strong);border-radius:999px;padding:5px 11px;background:var(--paper)}
.sp-toc a:hover{background:var(--bota);color:#fff;border-color:var(--bota)}
.sp-tekst{max-width:72ch;font-size:17px;line-height:1.65;color:var(--ink)}
.sp-tekst h2{font-family:Newsreader,serif;font-weight:500;font-size:clamp(22px,2.6vw,28px);margin:30px 0 8px;scroll-margin-top:76px;line-height:1.15}
.sp-tekst p{margin:0 0 14px}
.sp-tekst a{color:var(--bota)}
.sp-tekst ul,.sp-tekst ol{padding-left:22px}
.sp-recepten,.sp-leesook{margin-top:34px;border-top:1px solid var(--rule);padding-top:22px;scroll-margin-top:76px}
.sp-meer{margin:16px 0 0}
.sp-recepten h2,.sp-leesook h2,.sp-groep h2{font-family:Newsreader,serif;font-weight:500;font-size:clamp(22px,2.6vw,28px);margin:0 0 14px;line-height:1.15}
.sp-groep h2 small{font-size:14px;color:var(--ink-3);font-family:Archivo,system-ui,sans-serif;margin-left:6px}
.sp-groep{margin-top:26px}
.knop{display:inline-block;background:var(--bota);color:#fff;text-decoration:none;font-weight:600;padding:11px 18px;border-radius:10px}
.knop:hover{background:var(--bota-ink)}
.sp-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(min-width:900px){.sp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.sp-grid a{display:flex;gap:12px;align-items:center;background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:10px;text-decoration:none;color:inherit;height:100%;box-sizing:border-box;transition:transform .15s,box-shadow .15s}
.sp-grid a:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgb(25 28 24 / .14)}
.sp-grid .ph{width:64px;height:64px;flex:none;border-radius:10px;overflow:hidden;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.sp-grid img{width:100%;height:100%;object-fit:cover;display:block}
.sp-grid .nofoto{font-family:Newsreader,serif;font-size:26px;color:var(--ink-3)}
.sp-grid .nm{display:block;font-family:Newsreader,serif;font-size:17px;line-height:1.2;font-weight:500;color:var(--ink)}
.sp-grid .mt{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.sp-grid li{min-width:0}.sp-grid .tx{display:flex;flex-direction:column;min-width:0;flex:1}
.sp-grid .mt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-voet{grid-column:main;max-width:1120px;margin:0 auto;width:100%;padding:24px 0 40px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-3)}
.sp-voet a{color:var(--ink-3);text-decoration:none}.sp-voet a:hover{color:var(--bota)}
.topbar .zoekveld{text-decoration:none}
@media(max-width:600px){.sp-tekst{font-size:16px}.sp-grid{gap:10px}.sp-grid a{padding:8px}.sp-grid .ph{width:54px;height:54px}}
/* ingredient pages (2026-09-14, C22) */
.ing-feiten{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 18px;padding:12px 16px;background:var(--sunk);border-radius:12px}
.ing-feiten .fact{display:flex;flex-direction:column;gap:2px;margin:0}
.ing-feiten dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ing-feiten dd{margin:0;font-size:14.5px;color:var(--ink)}
.ing-vormen{margin:22px 0 0;font-size:13.5px;line-height:2;color:var(--ink-3)}
.ing-vormen .dlab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-right:6px}
.ing-vormen a{display:inline-block;margin:0 6px 4px 0;padding:3px 10px;border:1px solid var(--rule-strong);border-radius:999px;color:var(--ink-2);text-decoration:none;background:var(--paper)}
.ing-vormen a:hover{border-color:var(--bota);color:var(--bota)}