/* ======================================================================
   artlocate • Results Masonry (BEM) • v2.0 • 2026-02
   - Grid container: .c-grid (data-js="masonry")
   - Item:           .c-grid__item
   - Card:           .c-card (link)
   - Media:          .c-card__media (+ states .is-loading / .is-loaded)
   - Skeleton:       .c-skel (overlay)
   ====================================================================== */

:root{
  /* Masonry math */
  --row-unit: 0.5px;     /* must match baseRow in JS */
  --gutter: 17px;        /* horizontal gap & extra vertical added in JS */

  /* Grid */
  --grid-wt: 240px;

  /* Card */
  --card-radius: 7px;
  --card-bg: #fff;
  --card-text: #15212F;

  /* Media */
  --media-radius: var(--card-radius);

  /* Hover */
  --img-hover-scale: 1.06;

  /* Skeleton */
  --skel-line: #eef1f4;
}

/* =========================================================
   GRID (masonry container)
   ========================================================= */

.c-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-wt), 1fr));
  column-gap: var(--gutter);
  row-gap: 0;                       /* IMPORTANT: 0 for fine step masonry */
  grid-auto-rows: var(--row-unit);  /* IMPORTANT: must match JS */
}

/* item wrapper (article) */
.c-grid__item{
  background: transparent;
  /* grid-row-end will be set by JS */
}

/* =========================================================
   AD CARD (clickable)
   ========================================================= */

.c-card{
  display: block;
  height: auto;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

.c-card__content{
  display: flex;
  flex-direction: column;
}

/* =========================================================
   MEDIA (image wrapper)
   ========================================================= */

.c-card__media{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--media-radius);
  background-size: cover;
  background-position: center;
}

.c-card__media.is-loaded{
    background: #00000026 !important;
}

/* keep picture/img block-level */
.c-card__media picture,
.c-card__media img{
  display: block;
  width: 100%;
  height: 100%;
}

.c-card__img{
  object-fit: cover;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.001); /* micro anti-seam */
  will-change: transform, opacity, filter;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    opacity  .35s ease,
    filter   .45s ease;
}

/* ---------- Loading shimmer + fade-in ---------- */
.c-card__media.is-loading::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.12) 50%,
    rgba(0,0,0,.06) 100%);
  animation: c-img-shimmer 1.1s infinite;
  pointer-events: none;
}
@keyframes c-img-shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

/* loading state: invisible + blur + slight scale */
.c-card__media.is-loading .c-card__img{
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.02);
}

/* loaded state: visible + sharp */
.c-card__media.is-loaded::before{
  opacity: 0;
  transition: opacity .25s ease;
}
.c-card__media.is-loaded .c-card__img{
  opacity: 1;
  filter: blur(0);
  transform: scale(1); /* keep stable for hover scale */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .c-card__img{ transition: none; }
  .c-card__media.is-loading::before{ animation: none; }
}

/* ---------- Hover scale (desktop only when hover supported) ---------- */
@media (hover:hover) and (pointer:fine){
  .c-card:hover .c-card__img{
    transform: scale(var(--img-hover-scale));
  }
}

/* =========================================================
   BODY (text area)
   ========================================================= */

.c-card__body{
  margin-top: 0;
  padding: 10px 0;
  background: var(--card-bg);
  color: var(--card-text);
  position: relative; /* for skeleton overlay + fav */
}

/* inner content that is hidden until ready */
.c-card__bodyInner{
  opacity: 0;
  visibility: hidden;  /* keeps layout height */
  transition: opacity .18s ease;
}

/* when card is ready */
.c-grid__item.is-ready .c-card__bodyInner{
  opacity: 1;
  visibility: visible;
}

/* typography */
.c-card__title{
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.625rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 0 .4rem;
}

.c-card__subtitle{
  font-size: .9rem;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}

.c-card__meta{
  margin-top: .4rem;
  display: grid;
  gap: .35rem;
}

.c-card__dim,
.c-card__price{
  font-size: .9rem;
  margin: 0;
}

/* urgent badge */
.c-card__badge{
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ff1749;
  color: #fff;
  font-weight: 800;
  font-size: .75rem;
}

/* =========================================================
   FAV button (heart)
   ========================================================= */

.c-card__fav{
  position: absolute;
  right: 10px;
  bottom: 9px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .12s ease, background .12s ease;
}

.c-card__fav i{ pointer-events: none; }

@media (hover:hover) and (pointer:fine){
  .c-card__fav:hover{ transform: translateY(-1px); background: rgba(255,255,255,.95); }
}

.c-card__fav.is-selected{
  background: rgba(255,23,73,.10);
  border-color: rgba(255,23,73,.18);
}

/* locked variant (owner) */
.c-card__fav--locked{
  opacity: .35;
}

/* =========================================================
   SKELETON (text overlay)
   ========================================================= */

.c-skel{
  position: absolute;
  inset: 0;
  padding: 10px 0; /* must match .c-card__body padding */
  background: transparent;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease, visibility 0s linear .18s;
}

.c-grid__item.is-ready .c-skel{
  opacity: 0;
  visibility: hidden;
}

.c-skel__line{
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--skel-line);
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}
.c-skel__line:first-child{
  margin-top: 0;
  height: 10px;
}

/* widths (BEM modifiers) */
.c-skel__line--w35{ width: 35%; }
.c-skel__line--w55{ width: 55%; }
.c-skel__line--w75{ width: 75%; }

/* shimmer */
.c-skel__line::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: c-skel-shimmer 1.2s infinite;
}
@keyframes c-skel-shimmer{
  100%{ transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce){
  .c-skel__line::after{ animation: none; }
}

/* =========================================================
   FIXED HEIGHT variant (optional page modifier)
   ========================================================= */

/* Use on the grid container: <div class="c-grid c-grid--fixedMedia"> */
.c-grid--fixedMedia{
  --thumb-h: 190px;
}

.c-grid--fixedMedia .c-card__media{
  aspect-ratio: auto !important; /* neutralize inline aspect-ratio if any */
  height: var(--thumb-h);
}

/* responsive thumb height */
@media (max-width: 640px){
  .c-grid--fixedMedia{ --thumb-h: 280px; }
}
@media (min-width: 1024px){
  .c-grid--fixedMedia{ --thumb-h: 190px; }
}

/* =========================================================
   Compatibility fallback (if old helper still outputs .ad-thumb)
   ========================================================= */

.c-card__media .ad-thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
}