Alikategoriat: välilehdet kategorian alla

- defaultCategories(): subcategories-kenttä jokaisella kategorialla
  (reseptit: kasvis/vegaaniset/jälkiruuat, neulominen: aloittelijoille/
  vaatteet/kodin tekstiilit)
- 30 julkaisua merkitty subcategory-kentällä
- script.js: currentSubFilter-tila, setSubFilter(), renderSubFilters()
  renderöi alafiltterit kun kategoria on valittu; filterPosts() ottaa
  molemmat filtterit huomioon; cards saavat data-subcategory-attribuutin
- index.html: #subCategoryFilters-div kategoriafilttereiden alle
- style.css: .sub-filter-btn -tyyli (pienempi, tummanharmaa aktiiviasennossa)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

script.js

@@ -177,7 +177,7 @@ function renderCards() {
       ? `<div class="card-img card-has-photo"><img src="${imgSrc}" alt="${p.title}" /></div>`
       : `<div class="card-img">${p.emoji}</div>`;
     return `
-      <article class="recipe-card" data-category="${p.category}">
+      <article class="recipe-card" data-category="${p.category}" data-subcategory="${p.subcategory || ''}">
         ${cardImgHTML}
         <div class="card-body">
           <span class="category-tag">${getCategoryLabel(p.category)}</span>
@@ -201,25 +201,48 @@ function renderCards() {
 // ===========================
 // FILTER & SEARCH
 // ===========================
-let currentFilter = 'all';
+let currentFilter    = 'all';
+let currentSubFilter = 'all';
 
 function setFilter(category, btn) {
-  currentFilter = category;
+  currentFilter    = category;
+  currentSubFilter = 'all';
   document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
   btn.classList.add('active');
+  renderSubFilters();
   filterPosts();
 }
 
+function setSubFilter(sub, btn) {
+  currentSubFilter = sub;
+  document.querySelectorAll('.sub-filter-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  filterPosts();
+}
+
+function renderSubFilters() {
+  const container = document.getElementById('subCategoryFilters');
+  if (!container) return;
+  if (currentFilter === 'all') { container.innerHTML = ''; return; }
+  const cat = APP.categories.find(c => c.id === currentFilter);
+  const subs = cat?.subcategories || [];
+  if (!subs.length) { container.innerHTML = ''; return; }
+  container.innerHTML =
+    `<button class="sub-filter-btn ${currentSubFilter === 'all' ? 'active' : ''}" onclick="setSubFilter('all',this)">Kaikki</button>` +
+    subs.map(s => `<button class="sub-filter-btn ${currentSubFilter === s.id ? 'active' : ''}" onclick="setSubFilter('${s.id}',this)">${s.fi}</button>`).join('');
+}
+
 function filterPosts() {
   const query = (document.getElementById('search')?.value || '').toLowerCase();
   const cards = document.querySelectorAll('.recipe-card');
   let visible = 0;
   cards.forEach(card => {
     const matchesCat = currentFilter === 'all' || card.dataset.category === currentFilter;
+    const matchesSub = currentSubFilter === 'all' || card.dataset.subcategory === currentSubFilter;
     const title = card.querySelector('h3').textContent.toLowerCase();
     const desc = card.querySelector('p:not(.card-author)').textContent.toLowerCase();
     const matchesSearch = title.includes(query) || desc.includes(query);
-    const show = matchesCat && matchesSearch;
+    const show = matchesCat && matchesSub && matchesSearch;
     card.style.display = show ? '' : 'none';
     if (show) visible++;
   });
@@ -605,6 +628,7 @@ async function init() {
   }
   applyTranslations();
   renderCategoryFilters();
+  renderSubFilters();
   renderCards();
 }