/* ============================================================
   КАРТКА ОБ'ЄКТА — спільний компонент: каталог, сторінка об'єкта,
   добірки, «схоже поруч». Тому окремим файлом, а не всередині catalog.css.
   ============================================================ */

/* ---- Сітка карток ---- */
.cards{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
      transition:.18s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.card__media{aspect-ratio:4/3;position:relative;display:grid;place-items:center;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__media .pin{width:34px;height:42px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.card__media::after{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:
  repeating-linear-gradient(115deg,rgba(255,255,255,.5) 0 1px,transparent 1px 22px)}
.card__media img~::after{display:none}
.card__badges{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:1}
.card__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:8px;flex:1}
.card__region{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.card__title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.25;margin:0}
.card__title a{color:var(--text)}
.card__title a:hover{color:var(--link);text-decoration:none}
.card__excerpt{font-size:.88rem;color:var(--muted);margin:0;
               display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.card__meta{font-family:var(--font-mono);font-size:.8rem;color:var(--muted)}
@media(max-width:620px){.card__media{aspect-ratio:16/9}}

/* «Фото» поки немає — тематичні градієнти замість заглушки */
.ph-mount{background:linear-gradient(160deg,#2f6d5a,#1c4a3c 70%)}
.ph-lake{background:linear-gradient(160deg,#3f88a8,#245b73 70%)}
.ph-castle{background:linear-gradient(160deg,#8a6b4a,#5c4630 70%)}
.ph-forest{background:linear-gradient(160deg,#3f7d4e,#245234 70%)}
.ph-fun{background:linear-gradient(160deg,#d98f37,#b56a1f 70%)}
.ph-food{background:linear-gradient(160deg,#b5643f,#7d3f26 70%)}
.ph-spa{background:linear-gradient(160deg,#5f8a8f,#3c6064 70%)}

/* ---- Порожній стан і скелетони ---- */
.empty{text-align:center;padding:var(--sp-7);border:1.5px dashed var(--line);border-radius:var(--r-md)}
.empty .pin{width:34px;height:42px;opacity:.5;margin-bottom:10px}
.skeleton{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.skeleton__media{aspect-ratio:4/3;background:var(--surface-2)}
.skeleton__line{height:12px;margin:12px 16px;border-radius:6px;background:var(--surface-2)}
.skeleton__line:last-child{width:60%}
.is-loading{animation:travel-pulse 1.2s ease-in-out infinite}
@keyframes travel-pulse{0%,100%{opacity:1}50%{opacity:.55}}