/* ==== PlitkaOne — 5 Random Stones Section ==== */
:root{
  --brand:#4C5458; --accent:#D08A3E; --link:#3F7A7A;
  --sand:#C9BEA3; --bg:#F7F7F5; --card:#fff;
  --text:#2F3437; --muted:#6D747A; --border:#E7E8EA;
  --r:18px; --sh:0 6px 18px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#111315; --card:#161A1D; --text:#E9ECEF; --muted:#A4ABB2; --border:#252A2E; --sh:none; }
}

.stones-5{ margin-top:28px; }
.stones-5__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.stones-5__title{ margin:0; font-size:1.3rem; color:var(--brand); }
.stones-5__subtitle{ color:var(--muted); font-size:.96rem; }

.stones-5__grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width:600px){ .stones-5__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:992px){ .stones-5__grid{ grid-template-columns: repeat(5, 1fr); } }

.stone{
  display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--border); border-radius:var(--r);
  background:var(--card); color:var(--text); overflow:hidden;
  box-shadow:var(--sh);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.stone:hover{ transform:translateY(-3px); border-color:#dcdfe3; box-shadow:0 10px 28px rgba(0,0,0,.08); }

/* Фиксированная высота блока + центрирование */
.stone__media{
  height: 200px;                 /* единый размер блока */
  background: #f3f3f3;           /* фон по краям, когда у фото другие пропорции */
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;              /* на всякий случай */
}

/* Картинка вписывается целиком, не обрезается */
.stone__media img{
  max-width: 100%;
  max-height: 100%;
  width: auto;                   /* сохраняем пропорции */
  height: auto;                  /* сохраняем пропорции */
  display: block;
  background: #f3f3f3;           /* если у webp прозрачность */
}

/* Под разные ширины сетки можно слегка варьировать высоту блока */
@media (min-width:600px){ .stone__media{ height: 220px; } }
@media (min-width:992px){ .stone__media{ height: 180px; } }
@supports (aspect-ratio: 1 / 1) {
  .stone__media{ height: auto; } /* если есть aspect-ratio — не жёсткая высота */
}
.stone__body{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:6px; }
.stone__title{ margin:2px 0 0; font-size:1.02rem; color:var(--brand); line-height:1.25; }
.stone__meta{ color:var(--muted); font-size:.94rem; display:flex; gap:8px; }
.stone__price{ margin-top:2px; font-weight:700; }
.stone__cta{ margin-top:auto; color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:6px; }