/* ==========================================================================
   listing-image-fit.css — Глобални правила за коректно оразмеряване на
   снимки в картите на обявите (независимо от ориентацията им).

   ПРОБЛЕМ: Дълги (вертикални / portrait) снимки не се покриват коректно с
   object-fit:cover, защото родителят има height:auto + aspect-ratio, а
   детето има height:100% — което не работи класически при родител с
   height:auto. Резултатът е whitespace (letterbox) около снимката.

   РЕШЕНИЕ: Прави <img> с position:absolute;inset:0;object-fit:cover,
   така че да запълни родителя независимо от неговата височина.
   Запазва оригиналните пропорции на снимката (без разтягане).
   ========================================================================== */

/* ====================== HOMEPAGE — .hp-listing-image ====================== */
.hp-listing-image {
  position: relative;
  background: #edf2f8;
  overflow: hidden;             /* предотвратява излизане на големи снимки */
}

.hp-listing-image > a {
  display: block;
  position: absolute;           /* пълни родителя независимо от height:auto */
  inset: 0;
  width: 100%;
  height: 100%;
}

.hp-listing-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* покрива целия контейнер, изрязва излишното */
  object-position: center;      /* центрира снимката (важно за portrait) */
}

/* Wanted listing (Търся) — също пълни контейнера */
.hp-listing-image .wanted-listing-visual {
  position: absolute;
  inset: 0;
}

/* ====================== MARKETPLACE — .market-card .ad-thumb ====================== */
.market-card .ad-thumb,
.ad-thumb {
  position: relative;
  overflow: hidden;
  background: #f0f5f1;
}

.market-card .ad-thumb > a.ad-image-link,
.ad-thumb > a.ad-image-link,
.ad-thumb > a {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.market-card .ad-thumb img,
.ad-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Placeholder (no-image.svg) — използвай contain, не cover */
.market-card .ad-thumb img.placeholder-image,
.ad-thumb img.placeholder-image {
  object-fit: contain !important;
  padding: 12px;
  background: #f1f7f4;
  position: static;             /* override на absolute за placeholder */
  width: 100%;
  height: 100%;
}

/* ====================== AD-VIEW related ads ====================== */
.ad-related-image-link {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f1f7f4;
}

.ad-related-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .25s ease;
}

.ad-related-image-link img.placeholder-image {
  object-fit: contain !important;
  padding: 12px;
}

/* ====================== RESPONSIVE ОВЕРРАЙДИ ====================== */

/* Desktop — фиксирана височина */
@media (min-width: 561px) {
  .hp-listing-image { height: 128px; }
  .market-card .ad-thumb img,
  .ad-thumb img { height: 160px; }
}

/* Tablet */
@media (max-width: 1100px) {
  .hp-listing-image { height: 155px; }
}

/* Mobile — използвай aspect-ratio БЕЗ height:auto (който чупи height:100% на детето) */
@media (max-width: 560px) {
  .hp-listing-image {
    height: 0;                  /* премахваме height:auto, оставяме aspect-ratio да управлява */
    aspect-ratio: 4 / 3;       /* по-балансирано от 1.35 */
    min-height: 110px;
  }
  .ad-thumb {
    height: 0;
    aspect-ratio: 4 / 3;
    min-height: 100px;
  }
  .ad-thumb img {
    height: 100%;               /* вече работи, защото родителят има aspect-ratio без height:auto */
  }
}

/* Много тесни екрани */
@media (max-width: 380px) {
  .hp-listing-image {
    aspect-ratio: 1 / 1;       /* квадрат на тесни екрани */
  }
  .ad-thumb {
    aspect-ratio: 1 / 1;
  }
}

/* ====================== ЗАЩИТА: ако браузърът не поддържа aspect-ratio ====================== */
@supports not (aspect-ratio: 1) {
  /* Fallback: фиксирана височина на всички размери */
  .hp-listing-image { height: 140px !important; }
  .ad-thumb { height: 140px !important; }
  @media (max-width: 560px) {
    .hp-listing-image { height: 130px !important; }
    .ad-thumb { height: 130px !important; }
  }
}

/* ====================== HOVER ефекти (запазват се от оригиналния CSS) ====================== */
.market-card:hover .ad-thumb img:not(.placeholder-image),
.hp-listing-card:hover .hp-listing-image img:not(.placeholder-image) {
  transform: scale(1.025);
  transition: transform .35s ease;
}

/* ====================== Reduced motion ====================== */
@media (prefers-reduced-motion: reduce) {
  .market-card .ad-thumb img,
  .hp-listing-image img,
  .ad-related-image-link img {
    transition: none !important;
    transform: none !important;
  }
}