/* «Питомцы» — Figma `2318:2295`, плашка 1880×2474, r=32, фон #F4F4F4.
   Сетка 4×368 с шагом 20; широкая карточка «Персик» занимает две колонки.
   Правое поле в макете шире левого (76 против ~274) — так нарисовано.

   Карточки — flex-колонка (не absolute + fixed height): иначе на Linux
   Chrome из‑за метрик FreeType город обрезается нижней границей. */

.pets {
  margin: 0 var(--pad-page); /* 20 */
  padding: 7.5rem 4.75rem; /* 120 / 76 */
  border-radius: var(--r-xl); /* 32 */
  background: var(--c-surface-alt);
}

/* --- Фильтры --- */
.pets__filters {
  display: flex;
  gap: 1rem; /* 16 */
  margin-top: 4rem; /* 360 − 296 */
}

.pets__filter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* 4 */
  height: 3rem; /* 48 */
  padding-inline: 1rem; /* 16 */
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 1.25rem; /* 20 */
  line-height: 1.5rem; /* 24 */
  cursor: pointer;
}

.pets__filter svg {
  width: 1.5rem; /* 24 */
  height: 1.5rem;
  fill: currentColor;
}

/* --- Сетка карточек --- */
.pets__grid {
  display: grid;
  grid-template-columns: repeat(4, 23rem); /* 368 */
  gap: 1.25rem; /* 20 */
  margin-top: 2.5rem; /* 448 − 408 */
  align-items: start;
}

.pet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 38.875rem; /* 622 — ориентир макета, не потолок */
  height: auto;
  padding: 0.75rem 0.75rem 1.5rem; /* 12 / 12 / 24 */
  border: 1px solid var(--c-text);
  border-radius: var(--r-lg); /* 24 */
  background: var(--c-surface);
  overflow: visible;
}

.pet--wide {
  grid-column: span 2;
}

.pet__pic {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 27.4375rem; /* 439 */
  border-radius: var(--r-md); /* 16 */
  overflow: hidden;
  box-shadow: 0 0 1.4583rem rgba(118, 128, 163, 0.2); /* r=23.33 #7680A3/20% */
}

.pet--wide .pet__tg {
  bottom: 0.875rem; /* 14 */
}

.pet__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Круглый бейдж «написать в телеграм». Внутри фото у обычных карточек,
   у бирюзовой деталки — прямо в карточке, отступы те же. */
.pet__tg {
  position: absolute;
  right: 1.25rem; /* 20 */
  bottom: 1.25rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4rem; /* 64 */
  height: 4rem;
  border-radius: 50%;
  background: var(--c-surface-alt);
  color: var(--c-brand);
  transition: transform 0.18s ease;
}

.pet__tg:hover {
  transform: scale(1.06);
}

.pet__tg svg {
  width: 2.5rem; /* 40 */
  height: 2.5rem;
  fill: currentColor;
}

.pet__body {
  flex: 0 0 auto;
  margin-top: 1.5rem; /* 24 — как зазор 475−451 в макете */
  padding-inline: 0.75rem; /* 12 + padding карточки 12 = 24 */
}

.pet__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 2.5rem; /* 40 */
  line-height: 1.15; /* запас под метрики Playfair на Linux */
  color: var(--c-text);
}

.pet__meta {
  margin-top: 0.5833rem; /* 9.33 */
  font-size: 1.5rem; /* 24 */
  line-height: 1.25;
  color: var(--c-text-muted);
}

.pet__city {
  margin-top: 0.625rem; /* 10 */
  font-size: 1.75rem; /* 28 */
  line-height: 1.25; /* descenders не упираются в бордер */
  color: var(--c-text);
}

/* Плашка «РЕКОМЕНДУЕМ» в широкой карточке — справа от текста */
.pet__badge {
  position: absolute;
  right: 1.5rem; /* 24 */
  bottom: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.5rem; /* 40 */
  padding-inline: 1rem;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-weight: 700;
  font-size: 1.25rem; /* 20 */
  line-height: 1.5rem;
}

.pet__badge svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.pet--wide .pet__body {
  padding-right: 11rem; /* место под «РЕКОМЕНДУЕМ» */
}

/* --- Карточка-деталка (бирюзовая, без фото) --- */
.pet--detail {
  background: var(--c-brand);
  padding-top: 2rem; /* 32 */
  padding-bottom: 5.5rem; /* место под tg-бейдж */
}

.pet--detail .pet__body {
  margin-top: 0;
}

.pet--detail .pet__meta,
.pet--detail .pet__city {
  color: var(--c-on-dark);
}

.pet--detail .pet__name {
  font-size: 3rem; /* 48 */
}

.pet--detail .pet__meta {
  margin-top: 1rem; /* 92 − 32 − 44 */
}

.pet--detail .pet__city {
  margin-top: 0.75rem; /* 132 − 92 − 28 */
}

.pet--detail .pet__tg {
  color: var(--c-accent);
}

.pet__divider {
  flex: 0 0 auto;
  width: calc(100% - 1.5rem);
  height: 1px;
  border: 0;
  border-top: 1px dashed var(--c-on-dark);
  margin: 1.75rem 0.75rem 0;
}

/* Ширина и padding тегов подобраны под эталон макета. */
.pet__tags {
  flex: 0 0 auto;
  width: calc(100% - 1.5rem);
  margin: 1.5rem 0.75rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 8 */
}

.pet__tag {
  padding: 0.375rem 0.75rem; /* → высота 32 */
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 1rem; /* 16 */
  line-height: 1.25rem; /* 20 */
  white-space: nowrap;
}

/* --- Адаптив: макета нет, раскладка спроектирована здесь --- */
@media (max-width: 1199px) {
  .pets {
    margin: 0 1rem;
    padding: 3.5rem 2rem;
    border-radius: var(--r-lg);
  }

  .pets__filters {
    margin-top: 2rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .pets__filter {
    height: 2.5rem;
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .pets__grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    margin-top: 2rem;
  }

  .pet,
  .pet--wide {
    grid-column: span 1;
    min-height: 0;
  }

  .pet__pic {
    height: 17rem;
  }

  .pet__body {
    margin-top: 1rem;
  }

  .pet--wide .pet__body {
    padding-right: 0.75rem;
  }

  .pet__name {
    font-size: 1.75rem;
  }

  .pet__meta {
    font-size: 1rem;
  }

  .pet__city {
    font-size: 1.125rem;
  }

  .pet__badge {
    position: static;
    align-self: flex-start;
    margin: 1rem 0.75rem 0;
    height: 2rem;
    font-size: 0.875rem;
  }

  .pet--detail {
    padding-top: 1.5rem;
    padding-bottom: 5rem;
  }

  .pet__divider,
  .pet__tags {
    width: auto;
    margin: 1rem 0.75rem 0;
  }

  .pet__tag {
    font-size: 0.875rem;
    white-space: normal;
  }
}