/* ═══════════════════════════════════════════════════
   The Guilty Bar — Mocktails
   Saffron accent: #e8941a
   ═══════════════════════════════════════════════════ */

:root { --saffron: #e8941a; --saffron-dim: rgba(232,148,26,.15); --saffron-border: rgba(232,148,26,.3); }

/* ── Hero ── */
.mt-hero {
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(232,148,26,.14) 0%, transparent 70%),
              linear-gradient(160deg, #100d08 0%, #0d0a06 100%);
  border-bottom: 1px solid var(--saffron-border);
  padding: 1.6rem 0 1.2rem;
  text-align: center;
}
.mt-hero h1 {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 2.2rem;
  color: var(--saffron);
  margin-bottom: .3rem;
}
.mt-hero p { color: rgba(242,232,216,.65); font-size: .92rem; max-width: 600px; margin: 0 auto; }
.mt-hero-count {
  display: inline-block;
  background: var(--saffron-dim);
  border: 1px solid var(--saffron-border);
  color: var(--saffron);
  border-radius: 50px;
  padding: .25rem .9rem;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .6rem;
}

/* ── Filter bar ── */
.mt-filter-bar {
  background: rgba(20,14,8,.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: .85rem 0;
}
.mt-filter-btns { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.mt-filter-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(242,232,216,.6);
  border-radius: 50px;
  padding: .32rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  font-family: 'Jost', sans-serif;
}
.mt-filter-btn:hover, .mt-filter-btn.active {
  background: var(--saffron-dim);
  border-color: var(--saffron);
  color: var(--saffron);
}

/* ── Cards ── */
.mt-grid { padding: 2rem 0; }
.mt-card {
  background: #141008;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mt-card:hover { border-color: var(--saffron-border); transform: translateY(-3px); }
.mt-card-img {
  width: 100%; height: 200px; object-fit: cover; display: block;
  filter: brightness(.88) saturate(1.1);
  transition: filter .25s;
}
.mt-card:hover .mt-card-img { filter: brightness(.95) saturate(1.2); }
.mt-card-body { padding: 1rem 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.mt-card-emoji { font-size: 1.35rem; margin-bottom: .35rem; line-height: 1; }
.mt-card-name { font-size: 1rem; font-weight: 700; color: #f2e8d8; margin-bottom: .2rem; line-height: 1.3; }
.mt-card-tagline { font-size: .78rem; color: rgba(242,232,216,.5); line-height: 1.5; margin-bottom: .65rem; flex: 1; }
.mt-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
.mt-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 50px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(242,232,216,.55);
  white-space: nowrap;
}
.mt-tag-saffron { background: var(--saffron-dim); border-color: var(--saffron-border); color: var(--saffron); }
.mt-card-link {
  display: block;
  text-align: center;
  background: var(--saffron-dim);
  border: 1px solid var(--saffron-border);
  color: var(--saffron);
  font-size: .8rem;
  font-weight: 700;
  padding: .45rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background .18s;
  font-family: 'Jost', sans-serif;
}
.mt-card-link:hover { background: rgba(232,148,26,.25); color: var(--saffron); }
.mt-card-link i { font-size: .7rem; }

/* ── Hidden by filter ── */
.mt-card-wrap { transition: opacity .2s; }
.mt-card-wrap.mt-hidden { display: none; }

/* ── Recipe page hero ── */
.mt-recipe-hero {
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(232,148,26,.14) 0%, transparent 70%),
              linear-gradient(160deg, #100d08 0%, #06060e 60%, #0a0d12 100%);
  border-bottom: 1px solid var(--saffron-border);
  padding: 2.5rem 0 2rem;
  text-align: center;
}
.mt-recipe-hero .breadcrumb { justify-content: center; font-size: .78rem; }
.mt-recipe-hero .breadcrumb-item a { color: rgba(232,148,26,.7); text-decoration: none; }
.mt-recipe-hero .breadcrumb-item.active { color: rgba(232,232,240,.4); }
.mt-recipe-hero .breadcrumb-item+.breadcrumb-item::before { color: rgba(232,232,240,.2); }
.mt-recipe-hero h1 { font-family: 'Jost', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: .1em; font-size: 2rem; color: var(--saffron); margin: .6rem 0 .4rem; }
.mt-recipe-hero .tagline { color: rgba(242,232,216,.6); font-size: .92rem; max-width: 520px; margin: 0 auto .8rem; }
.stat-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px; padding: .3rem .8rem; font-size: .8rem; color: rgba(242,232,216,.7);
  margin: .2rem;
}
.stat-pill i { color: var(--saffron); }