/* ===================================================================
   Recipe categories (design: recipes.html).
   No sidebar: filter chips to the recipe categories, featured recipe
   (.recipe-feature in base.css), "menu ledger" grid.
   =================================================================== */

.page-head .lede{font-size:16px; line-height:1.6; opacity:.65; max-width:56ch; margin-top:12px;}
.page-head .lede > * + *{margin-top:.6em;}

/* ---- filter chip bar ---- */
.recipe-filters{padding-bottom:26px; margin-bottom:36px; border-bottom:2px solid var(--gold);}
.recipe-filters-list{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0;}
.recipe-filters-list.is-sub{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
.filter-chip{display:inline-block; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink); padding:9px 18px; font-family:var(--font-mono); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; transition:background .12s ease, color .12s ease;}
.recipe-filters-list.is-sub .filter-chip{padding:6px 13px; font-size:10.5px;}
.filter-chip.active{background:var(--ink); color:var(--cream);}
.filter-chip:hover:not(.active){background:var(--cream);}

/* ---- featured recipe: deeper overlap than the shared default ---- */
.recipe-feature{margin-bottom:130px;}

/* ---- recipe index: menu ledger ---- */
.recipes-grid{border-top:2px solid var(--ink); display:grid; grid-template-columns:1fr 1fr; column-gap:48px;}

.recipe{position:relative; display:grid; grid-template-columns:176px 1fr 96px auto; align-items:center; gap:14px; padding:14px 2px; border-bottom:1px dotted var(--ink); text-decoration:none;}
.recipe:hover{background:var(--cream);}
.recipe:focus-visible{outline-offset:-2px;}

.recipe .thumb{width:176px; height:88px; overflow:hidden; border:1.5px solid var(--ink);}
.recipe .thumb img{width:100%; height:100%; object-fit:cover; display:block;}

.recipe .recipe-title{font-family:var(--font-display); font-size:17px; font-weight:700; line-height:1.28; white-space:normal; overflow-wrap:break-word; min-width:0;}

.recipe .leader{width:96px; border-bottom:1.5px dotted var(--line); justify-self:stretch;}

.recipe .fan-time{font-family:var(--font-mono); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; opacity:.6; white-space:nowrap;}

.empty-state{text-align:center; padding:70px 20px;}

@media (max-width:1080px){
  .recipe-feature{margin-bottom:44px;}
  .recipes-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .recipe-filters-list{gap:8px;}
  .filter-chip{padding:8px 14px; font-size:10.5px;}
  .recipe{grid-template-columns:120px 1fr; row-gap:6px;}
  .recipe .thumb{width:120px; height:80px; grid-row:span 2;}
  .recipe .leader{display:none;}
  .recipe .fan-time{align-self:start;}
}
