/* ============================================================
   BLOCK: Catalog — «Каталог»
   Mobile: 2 колонки, подпись в две строки.
   Tablet: 2 колонки со смещением второй колонки.
   Desktop: 3 колонки по 4 колонки 12-колоночной сетки (как в макете).
   ============================================================ */

.catalog {
  --catalog-gap-x: clamp(0.75rem, 1.146vw, 1.5rem);
  --catalog-gap-y: clamp(2rem, 3vw, 4rem);
  --catalog-pad: clamp(1rem, 0.94vw, 2.5rem);

  padding: clamp(3.5rem, 8vw, 5rem) var(--catalog-pad) clamp(3.5rem, 8vw, 5rem);
}

.catalog__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.1vw, 2.75rem);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
}

.catalog__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--catalog-gap-y) var(--catalog-gap-x);
}

.catalog__item {
  min-width: 0;
}

.catalog__card {
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.9vw, 1rem);
  overflow: hidden;
}

.catalog__card img {
  width: 100%;
  aspect-ratio: 768 / 1376;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--dur-slow) var(--ease-out);
}

.catalog__caption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: clamp(0.875rem, 1.1vw, 1.25rem);
  font-weight: 350;
  line-height: 1.3;
}

.catalog__price {
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Hover: мягкое приближение фото ---------- */
@media (hover: hover) and (pointer: fine) {
  .catalog__card:hover img {
    transform: scale(1.04);
  }
}

/* ---------- Появление карточек при прокрутке ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .catalog__item {
      animation: catalog-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}

@keyframes catalog-in {
  from {
    opacity: 0;
    transform: translateY(2.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Tablet: вторая колонка смещена вниз ---------- */
@media (min-width: 640px) {
  .catalog__list > .catalog__item:nth-child(even) {
    margin-top: clamp(3rem, 8vw, 6rem);
  }
}

/* ---------- Desktop: три колонки, точная раскладка макета ---------- */
@media (min-width: 1024px) {
  .catalog {
    padding: 16.8vw 0.94vw 5.9vw;
  }

  .catalog__title {
    margin-bottom: 0.9vw;
  }

  .catalog__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.146vw;
  }

  .catalog__list > .catalog__item:nth-child(even) {
    margin-top: 0;
  }

  .catalog__caption {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog__card img {
    transition: none;
  }
}