/*============= MIXINS ===============*/
.portfolio-block {
  background: var(--bgLight);
  padding: 60px 0;
}

.portfolio-block .portfolio__holder {
  position: relative;
}

.portfolio-block .portfolio-item__top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portfolio-block .portfolio-item__top:not(:last-child) {
  margin-bottom: 20px;
}

.portfolio-block .main-swiper {
  width: 100%;
}

.portfolio-block .main-swiper .main-swiper__image {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.portfolio-block .main-swiper .main-swiper__image:after {
  content: '';
  display: block;
  padding-bottom: 70%;
}

.portfolio-block .main-swiper .main-swiper__image.full:after {
  padding-bottom: 90.7%;
}

.portfolio-block .main-swiper .main-swiper__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-block .thumbs-swiper {
  width: 100%;
}

.portfolio-block .thumbs-swiper .thumbs-swiper__image {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
}

.portfolio-block .thumbs-swiper .thumbs-swiper__image:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.portfolio-block .thumbs-swiper .thumbs-swiper__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-block .portfolio-item {
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.portfolio-block .portfolio-item .portfolio-item__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portfolio-block .portfolio-item .portfolio-item__desc,
.portfolio-block .portfolio-item .portfolio-item__desc * {
  font-weight: 400;
  font-size: 16px;
  line-height: 135%;
  color: var(--text);
}

.portfolio-block .portfolio-item .portfolio-item__desc *:last-child {
  margin-bottom: 0;
}

.portfolio-block .portfolio-item .portfolio-item__punks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}

.portfolio-block .portfolio-item .portfolio-item__punks .portfolio-item__punks-col {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.portfolio-block .portfolio-item .portfolio-item__punks .portfolio-item__punkt-item {
  display: flex;
  gap: 10px;
  color: var(--text);
}

.portfolio-block .portfolio-item .portfolio-item__punks .portfolio-item__punkt-item svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.portfolio-block .portfolio-item .portfolio-item__price-holder {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portfolio-block .portfolio-item .portfolio-item__btn {
  width: 100%;
}

@media (max-width: 1025px) {
  .portfolio-block .portfolio-item {
    padding: 0;
  }

  .portfolio-block .portfolio-item .portfolio-item__punks {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .portfolio-block .portfolio-item .portfolio-item__punks .portfolio-item__punks-col {
    gap: 5px;
  }
}

@media (max-width: 992px) {
  .portfolio-block {
    padding: 40px 0;
  }
}

@media (max-width: 769px) {
  .portfolio-block .main-swiper .main-swiper__image.full:after {
    padding-bottom: 95.7%;
  }
}

@media (max-width: 498px) {
  .portfolio-block .main-swiper .main-swiper__image.full:after {
    padding-bottom: 104.6%;
  }

  .portfolio-block .portfolio-item__top:not(:last-child) {
    margin-bottom: 10px;
  }

  .portfolio-block .portfolio-item .portfolio-item__bottom {
    gap: 10px;
  }

  .portfolio-block .portfolio-item .portfolio-item__punks .portfolio-item__punkt-item {
    gap: 5px;
  }

  .portfolio-block .portfolio-item .portfolio-item__punks .portfolio-item__punkt-item svg {
    width: 15px;
    height: 15px;
  }

  .portfolio-block .portfolio-item .portfolio-item__desc,
  .portfolio-block .portfolio-item .portfolio-item__desc * {
    font-size: 14px;
  }

  .portfolio-block .portfolio-item .portfolio-item__price-holder {
    gap: 10px;
  }
}
/* ===== РОДИТЕЛЬ — РАВНАЯ ВЫСОТА ВСЕХ КАРТОЧЕК ===== */
.portfolio-block .portfolio__holder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  align-items: stretch; /* Все карточки одной высоты */
}

/* ===== КАРТОЧКА — ФЛЕКС-КОЛОНКА ===== */
.portfolio-block .portfolio-item {
  display: flex;
  flex-direction: column;
  min-height: 100%; /* Занимает всю высоту, выделенную гридом */
  padding: 20px;
  box-sizing: border-box;
}

/* ===== ВЕРХНЯЯ ЧАСТЬ — НЕ РАСТЯГИВАЕТСЯ ===== */
.portfolio-block .portfolio-item__top {
  flex-shrink: 0;
}

/* ===== СРЕДНЯЯ ЧАСТЬ — ТОЛЬКО ЕСЛИ ЕСТЬ КОНТЕНТ ===== */
.portfolio-block .portfolio-item .portfolio-item__bottom {
  /* УБРАЛИ flex: 1 — блок схлопывается, если внутри пусто */
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

/* Описание и пункты — не растягиваются */
.portfolio-block .portfolio-item .portfolio-item__desc,
.portfolio-block .portfolio-item .portfolio-item__punks {
  flex-shrink: 0;
}

/* ===== ЦЕНА/КНОПКА — ВСЕГДА ВНИЗУ КАРТОЧКИ ===== */
.portfolio-block .portfolio-item .portfolio-item__price-holder {
  margin-top: auto; /* Прижимает к низу ВСЕЙ карточки, а не __bottom */
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/*# sourceMappingURL=block.css.map */