/* =======================================================
   LEAN TOPER CSS — минимальный набор + анимации
   ======================================================= */

/* ===== Сетка (3 колонки, отступы справа/снизу) ===== */
.srochnyak .srochnyak__grid{
  display:grid;
  grid-template-columns:1fr;
  row-gap:16px;
  column-gap:22px;
  padding-right:22px;
  padding-bottom:22px;
  align-items:start;
}
@media (min-width:720px){
  .srochnyak .srochnyak__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .srochnyak .srochnyak__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.srochnyak .srochnyak__grid > *{
  width:100%;
  margin:0;
}

/* ===== Заголовок секции ===== */
.srochnyak{ text-align:center; }
.srochnyak h2#urgent-ads{
  position:relative;
  display:inline-block;
  margin:0 auto 22px;
  padding:12px 64px;      /* отступ текста до «усов» */
  font:600 26px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:#0f172a;
  background:transparent; /* без фона */
  border:0;
  animation:slideDown .6s ease-out forwards;
}
.srochnyak h2#urgent-ads::before,
.srochnyak h2#urgent-ads::after{
  content:"";
  position:absolute;
  top:50%;
  width:48px; height:4px;
  background:linear-gradient(90deg,#ef4444,#dc2626);
  border-radius:4px;
  transform:translateY(-50%);
}
.srochnyak h2#urgent-ads::before{ left:0; }
.srochnyak h2#urgent-ads::after{ right:0; }
@keyframes slideDown{ from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:none} }
@media (max-width:560px){
  .srochnyak h2#urgent-ads{ font-size:22px; padding:8px 48px }
  .srochnyak h2#urgent-ads::before,.srochnyak h2#urgent-ads::after{ width:36px }
}

/* ===== Карточка объявления ===== */
.toper-card{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  opacity:1; transform:none; filter:none;
}
.toper-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,#ef4444,#dc2626);
}
.toper-thumb{ position:relative; display:block; aspect-ratio:3/2; background:#f6f7f9; overflow:hidden; }
.toper-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.toper-body{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:8px; background:#fff; }

/* Заголовок карточки (2 строки) */
.toper-title{
  margin:0; color:#0f172a; font-weight:800; font-size:18px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.toper-title a{ color:inherit; text-decoration:none; }
.toper-title a:hover{ text-decoration:underline; }

/* Описание (короткий текст — 3 строки) */
.toper-short{
  color:#6b7280; font-size:14px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.toper-short *{ all:unset; }

/* ===== Список характеристик (ofornrn) — с красивой анимацией ===== */
.ofornrn{
  position:relative;
  margin:0 auto 0;
  display:inline-block;
  max-width:100%;
  padding:0;
  list-style:none;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  text-align:left;
  /* Появление контейнера */
  opacity:0; transform:translateY(-8px);
  animation:ofListWrapIn .42s ease-out .05s forwards;
}
@keyframes ofListWrapIn{
  to{ opacity:1; transform:translateY(0) }
}

/* Верхняя красная полоса — анимированный “свип” слева направо */
.ofornrn::before{
  content:"";
  position:absolute; left:0; top:0;
  height:3px; width:0%;
  background:linear-gradient(90deg,#ef4444,#dc2626);
  animation:ofListBarSweep .6s ease-out .14s forwards;
}
@keyframes ofListBarSweep{
  from{ width:0% }
  to  { width:100% }
}

/* Элементы списка (ступенчатая анимация + лёгкое свечение) */
.ofornrn li{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:12px 18px; border-bottom:1px solid #f1f2f4;
  font-size:15px; line-height:1.4; color:#0f172a; font-weight:600; background:#fff;
  opacity:0; transform:translateY(-10px) scale(.98);
  animation:ofListItemIn .38s cubic-bezier(.2,.8,.2,1) forwards;
  box-shadow:0 0 0 0 rgba(239,68,68,0);
}
.ofornrn li:last-child{ border-bottom:none; }
.ofornrn li:nth-child(1){ animation-delay:.12s }
.ofornrn li:nth-child(2){ animation-delay:.17s }
.ofornrn li:nth-child(3){ animation-delay:.22s }
.ofornrn li:nth-child(4){ animation-delay:.27s }
.ofornrn li:nth-child(5){ animation-delay:.32s }
@keyframes ofListItemIn{
  0%  { opacity:0; transform:translateY(-10px) scale(.98); box-shadow:0 0 0 0 rgba(239,68,68,0); }
  60% { opacity:1; transform:translateY(2px)  scale(1.005); box-shadow:0 8px 24px rgba(239,68,68,.08); }
  100%{ opacity:1; transform:translateY(0)    scale(1);     box-shadow:0 0 0 0 rgba(239,68,68,0); }
}
.ofornrn li span{ font-weight:700; color:#dc2626; }

/* Ховер эффект строки — аккуратная подложка */
.ofornrn li:hover{
  background:linear-gradient(90deg,rgba(239,68,68,.06),rgba(220,38,38,.06));
}

/* Мобильная версия — делаем шире */
@media (max-width:560px){
  .ofornrn{
    display:block;
    width:96%;
    margin:0 auto 6px;
  }
  .ofornrn li{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    font-size:14px;
    padding:12px 14px;
  }
}

/* ===== Блок статуса (зелёный текстовый) ===== */
.statuse{
  display:inline-flex; align-items:center; gap:8px;
  margin:10px auto 28px; padding:10px 26px 10px 32px;
  background:#fff; border:1px solid #d1fae5; border-radius:8px;
  font-size:19px; font-weight:700; color:#065f46; line-height:1.2;
}
.statuse span{ font-weight:600; color:#064e3b; margin-right:6px; }
.statuse strong{ color:#10b981; font-weight:800; }

/* ===== Блок цены (тёмный + мигает только значение на hover) ===== */
.priccce{
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin:4px auto 10px; padding:6px 10px; background:transparent; border:none;
  font-size:20px; font-weight:700; color:#202d4b; line-height:1.2; text-align:center;
}
.priccce > span:first-child{ font-weight:400; color:#202d4b; }
.priccce .price-value{ color:#202d4b; font-weight:400; display:inline-block; transition:color .2s ease; }
.priccce:hover .price-value{ animation:blinkPrice 1s infinite alternate ease-in-out; }
@keyframes blinkPrice{ 0%{color:#202d4b} 50%{color:#b91c1c} 100%{color:#202d4b} }
@media (max-width:560px){ .priccce{ font-size:18px; padding:4px 8px } }

/* ===== Статус поверх картинки: исчезает на hover, картинка зумится ===== */
.toper-thumb{ position:relative; display:block; overflow:hidden; }
.toper-thumb:hover img{ transform:scale(1.07); }

.statusek{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:100%; padding:14px 10px; text-align:center;
  color:#ffffff; font-size:15px; font-weight:100; text-transform:uppercase; letter-spacing:.3px;
  z-index:3; opacity:1;
  background:rgba(17,24,39,.65); backdrop-filter:saturate(130%) blur(4px);
  border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
  transition:opacity .35s ease, color .35s ease, background .35s ease, border-color .35s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.statusek::before,
.statusek::after{
  content:""; position:absolute; top:50%; width:40px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,#34d399,#059669);
  transform:translateY(-50%); opacity:.95;
  transition:opacity .35s ease, transform .35s ease;
}
.statusek::before{ left:8%; }
.statusek::after{ right:8%; }
.toper-thumb:hover .statusek{
  opacity:0; background:transparent; color:transparent; border-color:transparent;
}
.toper-thumb:hover .statusek::before,
.toper-thumb:hover .statusek::after{ opacity:0; transform:translateY(-50%) scaleX(.85); }

/* ===== АНИМАЦИИ КАРТОЧЕК (десктоп — первые 6 сверху, мобилка — по скроллу) ===== */

/* Десктоп старт: скрыто/смещено/слегка повернуто/размыто */
.toper-enter{
  opacity:0;
  transform:translateY(-26px) scale(.96) rotate(-0.6deg);
  filter:blur(6px);
  will-change:transform, opacity, filter;
}
.toper-enter.toper-enter--active{
  animation:cardEnter .68s cubic-bezier(.2,.8,.2,1) var(--enter-delay, 0ms) forwards;
}
@keyframes cardEnter{
  0%  { opacity:0; transform:translateY(-26px) scale(.96) rotate(-0.6deg); filter:blur(6px); }
  60% { opacity:1; transform:translateY(2px)   scale(1.01) rotate(0deg);   filter:blur(0);   }
  100%{ opacity:1; transform:translateY(0)     scale(1)    rotate(0deg);   filter:blur(0);   }
}

/* Мобилка: reveal на скролле */
@media (max-width:1023.98px){
  .toper-card.reveal-mobile{
    animation:mobileReveal .55s ease-out forwards;
  }
  @keyframes mobileReveal{
    from{ opacity:0; transform:translateY(14px) scale(.98); }
    to  { opacity:1; transform:translateY(0)    scale(1);   }
  }
}

/* Мелочи и уважение к системным настройкам */
.srochnyak img{ max-width:100%; height:auto; display:block; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}