/* Объявления: иллюстрированные баннеры и заглушки, подбор по бюджету, чек-лист перед сделкой */

/* Баннер раздела: картинка справа, вуаль слева */
.vl--auto .vl-hero__bg::before, .vl--realty .vl-hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 96%, transparent) 0%, color-mix(in srgb, var(--surface) 88%, transparent) 38%, color-mix(in srgb, var(--surface) 28%, transparent) 70%, color-mix(in srgb, var(--surface) 4%, transparent) 100%),
    var(--vl-art);
  background-size: auto, cover; background-position: 0 0, right center; background-repeat: no-repeat;
}
.vl--auto { --vl-art: url('/assets/img/cozy-av-hero.jpg'); }
.vl--realty { --vl-art: url('/assets/img/cozy-re-hero.jpg'); }
.vl--auto .vl-hero__bg i, .vl--realty .vl-hero__bg i { opacity: .16; }
@media (max-width: 800px) {
  .vl--auto .vl-hero__bg::before, .vl--realty .vl-hero__bg::before {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface) 80%, transparent)), var(--vl-art);
    background-position: 0 0, 70% center;
  }
}

/* Иллюстрированные заглушки там, где у объявления нет фото */
.vl-ph[data-kind] { background-size: cover; background-position: center; background-repeat: no-repeat; place-content: end center; padding-bottom: 12px; position: relative; }
.vl-ph[data-kind]:not([data-kind="other"])::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 14, 26, .55), transparent 52%); }
.vl-ph[data-kind]:not([data-kind="other"]) svg { display: none; }
.vl-ph[data-kind]:not([data-kind="other"]) span { position: relative; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.vl-ph[data-kind="car"] { background-image: url('/assets/img/cozy-ph-car.jpg'); }
.vl-ph[data-kind="moto"], .vl-ph[data-kind="bike"] { background-image: url('/assets/img/cozy-ph-moto.jpg'); }
.vl-ph[data-kind="truck"] { background-image: url('/assets/img/cozy-ph-truck.jpg'); }
.vl-ph[data-kind="parts"] { background-image: url('/assets/img/cozy-ph-parts.jpg'); }
.vl-ph[data-kind="service"] { background-image: url('/assets/img/cozy-ph-service.jpg'); }
.vl-ph[data-kind="flat"], .vl-ph[data-kind="room"] { background-image: url('/assets/img/cozy-ph-flat.jpg'); }
.vl-ph[data-kind="house"] { background-image: url('/assets/img/cozy-ph-house.jpg'); }
.vl-ph[data-kind="land"] { background-image: url('/assets/img/cozy-ph-land.jpg'); }
.vl-ph[data-kind="garage"] { background-image: url('/assets/img/cozy-ph-garage.jpg'); }
.vl-ph[data-kind="commercial"] { background-image: url('/assets/img/cozy-ph-commercial.jpg'); }

/* Быстрый подбор по бюджету */
.vl-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.vl-budget__label { font: 700 12.5px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.vl-budget button { cursor: pointer; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font: 700 13.5px/1 var(--font-display); transition: transform .2s, border-color .2s, background .2s, color .2s; }
.vl-budget button:hover { border-color: var(--vl-a); transform: translateY(-1px); }
.vl-budget button.is-on { background: var(--vl-a); border-color: var(--vl-a); color: #fff; }
.vl-budget .vl-budget__random { margin-left: auto; background: transparent; border-style: dashed; }
.vl-card.is-pick { border-color: var(--vl-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vl-a) 55%, transparent), 0 22px 46px -18px var(--vl-glow); animation: vlPick 1.1s ease-in-out 2; }
@keyframes vlPick { 0%, 100% { transform: none; } 50% { transform: translateY(-6px) scale(1.015); } }

/* Чек-лист */
.vl-check__meter { height: 10px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 10px; }
.vl-check__meter i { display: block; height: 100%; width: 0; border-radius: 10px; background: linear-gradient(90deg, var(--vl-a), var(--vl-a2)); transition: width .45s var(--spring, ease); }
.vl-check__status { margin: 0 0 14px; color: var(--muted); font: 600 14px/1.5 var(--font-display); }
.vl-check__list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.vl-check__list label { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.vl-check__list label:hover { border-color: var(--vl-a); }
.vl-check__list input { position: absolute; opacity: 0; pointer-events: none; }
.vl-check__box { width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; border: 2px solid var(--line); background: var(--sunk); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.vl-check__box::after { content: "✓"; color: #fff; font: 900 14px/1 var(--font-display); transform: scale(0); transition: transform .25s var(--spring, ease); }
.vl-check__list input:checked + .vl-check__box { background: var(--vl-a); border-color: var(--vl-a); }
.vl-check__list input:checked + .vl-check__box::after { transform: scale(1); }
.vl-check__list input:checked ~ .vl-check__txt b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); opacity: .7; }
.vl-check__list input:focus-visible + .vl-check__box { outline: 3px solid var(--vl-a); outline-offset: 2px; }
.vl-check__txt { display: grid; gap: 4px; }
.vl-check__txt b { font: 800 15px/1.35 var(--font-display); }
.vl-check__txt small { color: var(--muted); font: 500 13.5px/1.5 var(--font-display); }
.vl-check__done { margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, #10b981 16%, var(--surface)); border: 1px solid color-mix(in srgb, #10b981 50%, var(--line)); font: 700 15px/1.5 var(--font-display); }
.vl-checklist.is-complete .vl-check__meter i { background: linear-gradient(90deg, #10b981, #34d399); }
@media (prefers-reduced-motion: reduce) { .vl-card.is-pick { animation: none; } .vl-check__meter i, .vl-check__box::after { transition: none; } }