/* ============================================================
   recipes.css : hub grid + filters + single-recipe layout.
   Builds on tokens.css / base.css / components.css.
   ============================================================ */

/* ---------- hub: filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.filter{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:44px;
  font-family:var(--body);font-size:var(--fs-xs);font-weight:700;
  padding:7px 16px;border-radius:var(--r-pill);border:1px solid var(--crema-deep);
  background:var(--surface);color:var(--muted);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.filter:hover{border-color:var(--accent);color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.filter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.filter-count{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--s-3)}

.empty-state{text-align:center;color:var(--muted);padding:var(--s-8) 0;font-size:var(--fs-lead)}

/* ---------- single recipe ---------- */
.recipe-top{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-7);align-items:center}
.recipe-top .recipe-hero img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-card);
  box-shadow:var(--sh-2);aspect-ratio:3/2}
.recipe-title{font-size:var(--fs-h1);margin:var(--s-2) 0 var(--s-2)}
/* Same tracking as .eyebrow - this is the eyebrow under another name. uppercase
   stays: unlike .eyebrow this one holds an English word ("Espresso"), so the
   rule actually does something here. */
.recipe-en{font-family:var(--body);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);font-size:var(--fs-xs);margin:0}
.recipe-lead{font-size:var(--fs-lead);color:var(--muted);margin:0 0 var(--s-4)}
.recipe-meta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-4)}
.rmeta{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-ctrl);padding:10px 16px;min-width:92px}
.rmeta b{font-family:var(--display);font-size:var(--fs-h4);color:var(--ink)}
.rmeta span{font-size:var(--fs-xs);color:var(--muted);font-weight:700;letter-spacing:.04em}

.recipe-body{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s-8);margin-top:var(--s-8);align-items:start}
.rsection{margin-bottom:var(--s-7)}
.rsection > h2{font-size:var(--fs-h3);margin:0 0 var(--s-4);padding-bottom:var(--s-2);
  border-bottom:2px solid var(--crema-deep)}

/* ingredients + equipment lists */
.ing-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s-1)}
.ing-list li{display:flex;gap:var(--s-3);padding:10px 0;border-bottom:1px solid var(--line)}
.ing-list li:last-child{border-bottom:0}
.ing-list .q{flex:0 0 92px;font-weight:800;color:var(--accent-ink)}
.ing-list .nm{color:var(--ink)}
.equip-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s-3)}
.equip-list li b{display:block;color:var(--ink);margin-bottom:2px}
.equip-list li span{color:var(--muted);font-size:var(--fs-sm)}

/* steps */
.steps-list{list-style:none;counter-reset:step;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s-4)}
.steps-list li{counter-increment:step;position:relative;padding-inline-start:56px;min-height:40px}
.steps-list li::before{content:counter(step);position:absolute;inset-inline-start:0;top:0;
  width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center}
.steps-list .s-text{color:var(--ink);line-height:1.7}
.steps-list .s-tip{display:flex;gap:8px;margin-top:8px;padding:10px 12px;
  background:var(--crema);border-radius:var(--r-ctrl);font-size:var(--fs-sm);color:var(--muted)}
.steps-list .s-tip b{color:var(--accent-2)}

/* bean recommendations */
.rbeans{display:flex;flex-direction:column;gap:var(--s-3)}
.rbean{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-4);text-decoration:none;color:inherit;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.rbean .rb-name{font-family:var(--display);font-size:var(--fs-h4);margin:0 0 4px;color:var(--ink)}
.rbean .rb-why{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--s-3)}
.rbean .rb-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.rbean .rb-price{font-weight:800;color:var(--ink)}
.rbean .rb-buy{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);font-weight:700;font-size:var(--fs-sm)}

/* sub-lists (subs / tips / mistakes) */
.rlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s-3)}
.rlist li{display:flex;gap:10px;color:var(--ink);--lh:1.65;line-height:var(--lh)}
/* base.css svg{height:auto} plus the flex default align-items:stretch inflated
   this 18x18 icon to the full item height (53-81px measured) and
   preserveAspectRatio then dropped the glyph to line two. Lock the box and
   centre it on the first line box; margin-top reads --lh above so the two
   numbers can't drift apart if the line-height ever changes. */
.rlist li .mk{flex:0 0 auto;width:18px;height:18px;
  margin-top:calc((var(--lh) * 1em - 18px) / 2);color:var(--accent-2)}
.rlist.warn li .mk{color:var(--accent)}

/* aside boxes */
.aside-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-5);margin-bottom:var(--s-5)}
.aside-box h3{font-size:var(--fs-h4);margin:0 0 var(--s-3)}
.roast-line{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.roast-dots{display:inline-flex;gap:4px}
.roast-dots i{width:var(--roast-dot);height:var(--roast-dot);border-radius:50%;background:var(--roast-dot-off);display:inline-block}
.roast-dots i.on{background:var(--roast-dot-on)}
.term-item{padding:var(--s-2) 0;border-bottom:1px solid var(--line)}
.term-item:last-child{border-bottom:0}
.term-item b{display:block;color:var(--accent-2);margin-bottom:2px}
.term-item span{color:var(--muted);font-size:var(--fs-sm)}

/* related */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-4)}

@media(max-width:900px){
  .recipe-top{grid-template-columns:1fr;gap:var(--s-5)}
  .recipe-top .recipe-hero{order:-1}
  .recipe-body{grid-template-columns:1fr;gap:var(--s-6)}
}
@media(max-width:768px){
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .related-grid{grid-template-columns:1fr}
  .ing-list .q{flex-basis:78px}
}