/* ============================================
   Свежее из спецпроектов: full-bleed карусель
   вертикальных карточек 456×750
   Figma: 7633:1556 (файл iqDK5WETwKVxP1bEGHIpMI) —
   карточки от края до края (x=0), gap 32, стрелки в заголовке
   ============================================ */

.fresh {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 80px;
}

.fresh__header {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
}

/* Стрелки карусели */
.fresh__nav {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 32px;
}

/* Общий класс стрелок: в «Свежем» это <button> карусели, в «Лучших историях» —
   <a> на ленту блога (п. 6). Раскладка задана явно, чтобы оба тега совпадали. */
.carousel-btn {
  align-items: center;
  display: inline-flex;
  padding: 4px;
  transition: opacity 0.2s ease;
}

.carousel-btn:hover {
  opacity: 0.6;
}

.carousel-btn img {
  height: 24px;
  width: 56px;
}

/* Лента: горизонтальный скролл со снапом, скроллбар скрыт.
   Карточки впритык к краям экрана — так задано макетом */
.fresh__track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 100%;
}

.fresh__track::-webkit-scrollbar {
  display: none;
}

/* ---------- Вертикальная карточка 456×750: фото-фон + градиент + текст внизу ---------- */

/* Ширина от трека (не от 100vw!) — иначе скроллбар браузера
   добавляет перелив и 4 карточки не вмещаются ровно */
.fresh-card {
  aspect-ratio: 456 / 750;
  display: flex;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  width: calc((100% - 96px) / 4);
}

.fresh-card__photo {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Ссылка на материал растянута на всю карточку; бейдж и заголовок лежат
   выше неё и остаются самостоятельными ссылками */
.fresh-card__link {
  inset: 0;
  position: absolute;
  z-index: 1;
}

.fresh-card__tag,
.fresh-card__title {
  position: relative;
  z-index: 2;
}

.fresh-card__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: flex-end;
  padding: 80px 16px;
  position: relative;
  width: 100%;
}

.fresh-card__tag {
  color: var(--c-light-gray);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
}

/* Заголовок: Noto Serif Regular 30 (Text M) */
.fresh-card__title {
  color: var(--c-cream);
  font-family: var(--font-serif-text);
  font-size: clamp(22px, 1.56vw, 30px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
}

.fresh-card__title a:hover {
  color: var(--c-white);
}

/* ---------- Адаптив ---------- */

@media (max-width: 1200px) {
  .fresh-card {
    width: calc((100% - 64px) / 3);
  }
}

@media (max-width: 1024px) {
  .fresh {
    gap: 48px;
    padding-block: 56px;
  }

  .fresh__track {
    padding-inline: var(--pad);
    scroll-padding-inline: var(--pad);
  }

  .fresh-card {
    width: 48vw;
  }

  .fresh-card__overlay {
    padding: 48px 16px;
  }
}

@media (max-width: 768px) {
  .fresh-card {
    width: 64vw;
  }

  /* По мобильному макету карточки СП хэштег лежит в левом верхнем углу
     фото, а не над заголовком (баг-лист 12.08). Оверлей на всю карточку —
     absolute считается от её угла. */
  .fresh-card__tag {
    left: 16px;
    position: absolute;
    top: 16px;
  }
}

@media (max-width: 560px) {
  .fresh {
    gap: 32px;
    padding-block: 40px;
  }

  /* Карточка в мобильном макете 252×376 — заметно площе десктопной 456×750.
     Ширина фиксированная: карусель намеренно выходит за экран (в кадре
     полторы карточки), поэтому привязка к vw только исказила бы пропорцию. */
  .fresh-card {
    aspect-ratio: 252 / 376;
    width: 252px;
  }

  .fresh__track {
    gap: 24px;
  }

  .carousel-btn img {
    width: 40px;
  }
}