/* =========================================================================
   city.css
   The city "mini-site" look: a bold banner (per-city tinted), a horizontal
   tab bar of the city's categories, and the two-column feed+sidebar body.
   ========================================================================= */

.city__banner {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: var(--sp-8) var(--sp-6);
  margin-bottom: var(--sp-5);
  color: #fff;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  isolation: isolate;
}
.city__banner::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  opacity: .25;
  background-size: cover; background-position: center;
}
/* Per-city accent stripes */
.city__banner[data-city="tel-aviv"]  { background: linear-gradient(135deg, #0e3b66, #1f6f6b); }
.city__banner[data-city="jerusalem"] { background: linear-gradient(135deg, #6b3b0e, #a8231a); }
.city__banner[data-city="haifa"]     { background: linear-gradient(135deg, #0e4f3b, #1f6f6b); }

.city__bannerinner { position: relative; max-width: 60ch; }
.city__kicker {
  display: inline-block; font-weight: 800; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.15); padding: 4px 12px; border-radius: 999px;
  margin-bottom: var(--sp-3);
}
.city__title {
  font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900; color: #fff;
  text-shadow: 0 3px 24px rgba(0,0,0,.35);
}
.city__sub { margin-top: var(--sp-2); font-size: 1.1rem; color: #f0ece6; }

/* Tabs */
.city__tabs {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
  border-bottom: 3px solid var(--ink);
  padding-bottom: 0;
}
.city__tab {
  font-weight: 800; font-size: .98rem;
  padding: 10px 16px;
  border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--paper-2); color: var(--ink-2);
  transition: background .15s, color .15s, transform .15s;
  position: relative; top: 1px;
}
.city__tab:hover { color: var(--signal); }
.city__tab.is-active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}