/**
 * Blog / Recipe layout variants
 * Styles only the classes added by the blog + recipe templates.
 * Depends on the custom properties declared in style.css.
 */

/* ---- Left sidebar layout modifier ---- */
.blog-layout--left{grid-template-columns:320px 1fr}

/* ---- Recipe facts (time / servings / difficulty) ---- */
.recipe-facts{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:0 0 15px}
.recipe-fact{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--text-light);background:var(--bg-alt);border:1px solid var(--border);border-radius:30px;padding:5px 14px;transition:var(--transition)}
.recipe-fact i{color:var(--primary);font-size:.85rem}
.recipe-card:hover .recipe-fact{border-color:var(--primary)}

/* ---- Category filter buttons (recipes grid) ---- */
.recipe-filter{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin-bottom:40px}
.recipe-filter-btn{padding:10px 25px;background:transparent;border:2px solid var(--border);border-radius:30px;font-family:inherit;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text);cursor:pointer;transition:var(--transition)}
.recipe-filter-btn:hover,.recipe-filter-btn.active{background:var(--primary);border-color:var(--primary);color:var(--white)}
.recipe-filter-empty{text-align:center;color:var(--text-light);padding:40px 0;margin:0}
.recipe-filter-empty[hidden]{display:none}

/* ---- Recipe category archive nav ---- */
.recipe-term-intro{max-width:760px;margin:0 auto 30px;text-align:center;color:var(--text-light)}
.recipe-term-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:40px}
.recipe-term-link{display:inline-block;padding:9px 22px;border:1px solid var(--border);border-radius:30px;background:var(--white);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text);transition:var(--transition)}
.recipe-term-link:hover,.recipe-term-link.active{background:var(--primary);border-color:var(--primary);color:var(--white)}

/* ---- Empty state ---- */
.blog-empty{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;padding:60px 30px;text-align:center}
.blog-empty i{font-size:2.4rem;color:var(--primary);margin-bottom:18px;display:block}
.blog-empty h3{margin-bottom:10px}
.blog-empty p{color:var(--text-light);max-width:480px;margin:0 auto}

/* ---- Responsive: sidebar stacks below the content ---- */
@media(max-width:1024px){
  .blog-layout--left{grid-template-columns:1fr}
  .blog-layout--left .sidebar{order:2}
  .blog-layout--left .blog-posts{order:1}
}
@media(max-width:768px){
  .recipe-filter{gap:10px}
  .recipe-filter-btn{padding:8px 18px;font-size:.72rem}
  .blog-empty{padding:40px 20px}
}