:root{
  --brand:#4f46e5; --brand-2:#22d3ee;
  --surface:#fff; --text:#111827; --muted:#6b7280;
  --radius:1rem;
  --shadow-sm:0 .25rem .75rem rgba(0,0,0,.06);
  --shadow-lg:0 1rem 2rem rgba(0,0,0,.12);
}

/* ===== База / шапка / герой ===== */
.navbar-brand{
  font-weight:800; letter-spacing:.5px;
  background:linear-gradient(90deg,#60a5fa,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero{ position:relative; }
.hero .bg-gradient{
  position:relative;
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.92) 0%, rgba(30,58,138,.86) 45%, rgba(2,132,199,.80) 100%),
    url('/public/img/mainfon.png') !important;
  background-size:100% 100%, cover;
  background-position:center, 70% center;
  background-repeat:no-repeat, no-repeat;
  background-color:#0f172a;
  border-radius:1.25rem; min-height:300px;
}
.hero .bg-gradient::after{ content:none; }
@media (max-width:576px){ .hero .bg-gradient{ background-position:center, center; } }
.hero-bubbles{
  position:absolute; inset:-20px -20px 0 auto; width:300px; height:300px;
  background:radial-gradient(closest-side, rgba(255,255,255,.25), transparent),
             radial-gradient(closest-side, rgba(255,255,255,.15), transparent);
  filter:blur(8px); border-radius:50%; transform:translate(30%,-20%);
}

/* ===== Карточки объявлений (без absolute) ===== */

/* Ссылка-карточка */
a.listing-tile{ text-decoration:none; color:inherit; }
.listing-tile{
  display:flex; flex-direction:column; height:100%;
  background:var(--surface); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.listing-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* Медиаблок. ДВА слоя фона: [0] градиент, [1] фото.
   Фото вшиваем в CSS-переменную --bg через style="--bg:url(...)" */
.media{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:.6rem; aspect-ratio:4/3;
  background-image:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 55%), var(--bg);
  background-size:100% 100%, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.media-empty{
  display:flex; align-items:center; justify-content:center;
  background:#f3f4f6; color:#9ca3af; font-weight:600;
}

/* Верх/низ — обычные flex-полосы */
.media-top, .media-bottom{ display:flex; gap:.5rem; align-items:center; }
.media-bottom{ justify-content:space-between; }

/* Чипы */
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .7rem; border-radius:.8rem; font-weight:600; font-size:.85rem;
  white-space:nowrap;
}
.chip-price{
  color:#fff;
  background:linear-gradient(90deg,#2563eb,#22d3ee);
  box-shadow:0 .5rem 1.25rem rgba(37,99,235,.25);
}
.chip-soft{
  color:var(--text);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(6px) saturate(140%);
}

/* Текстовая часть */
.listing-body{ padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.25rem; }
.listing-category{ color:var(--muted); font-size:.875rem; }
.listing-title{
  color:var(--text); font-weight:600; font-size:1rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.listing-meta{ margin-top:.35rem; color:var(--muted); font-size:.875rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* Фильтры — косметика */
.filters .card{ border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.navbar .brand-logo{ width:196px; height:28px; object-fit:contain; display:block; }
.navbar .brand-name{ font-weight:800; letter-spacing:.5px; }
@media (min-width:992px){
  .navbar .brand-logo{ width:196px; height:64px; }
}