/* ===========================================
   MEDCOPY — Portfolio Page Styles
   =========================================== */

.portfolio-section {
   padding-top: 63px;
   /* Отступ от хедера 63px */
   padding-bottom: 100px;
}

.portfolio-title {
   font-family: var(--font-heading);
   font-size: 32px;
   font-weight: 700;
   color: var(--color-text);
   margin-bottom: 63px;
   /* Отступ до карточек 63px */
   text-align: center;
}

/* Контейнер для сетки карточек */
.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(300px, 471px));
   gap: 32px;
   /* Padding removed to allow justify-content: center to handle the 113px gaps naturally within the 1200px container */
   justify-content: center;
   align-items: start;
   /* Чтобы карточки разной высоты не растягивались */
}

/* Колонки сетки (для эффекта Masonry) */
.portfolio-col {
   display: flex;
   flex-direction: column;
   gap: 32px;
}

/* Карточка */
.portfolio-card {
   background-color: var(--color-surface);
   border-radius: 24px;
   padding: 32px;
   /* paddings 32px внутри карточки */
   width: 100%;
   max-width: 471px;
   box-sizing: border-box;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   /* Мягкая тень */
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
}

/* Плашка (Badge) */
.portfolio-card-badge {
   background-color: #DAE0D9;
   /* color DAE0D9 */
   color: var(--color-text);
   font-family: var(--font-body);
   font-weight: 600;
   /* semi bold 16px */
   font-size: 16px;
   padding: 7px 16px;
   /* horizontal 16, vertical 7 */
   border-radius: 100px;
   margin-bottom: 16px;
   /* gap между плашкой и первым заголовком 16px */
   transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Активная при скролле (мобилка) -> меняем плашку */
@media (max-width: 1024px) {
   .portfolio-card.is-active-card .portfolio-card-badge {
      background-color: var(--color-secondary);
      color: var(--color-surface);
   }
}

@media (min-width: 769px) {

   /* Ховер карточки (десктоп) -> меняем плашку */
   .portfolio-card:hover .portfolio-card-badge {
      background-color: var(--color-secondary);
      color: var(--color-surface);
   }
}

/* Контент карточки */
.portfolio-card-content {
   display: flex;
   flex-direction: column;
   width: 100%;
}

/* Заголовок статьи */
.portfolio-card-title {
   font-family: var(--font-heading);
   font-size: 24px;
   /* pt serif bold 24px */
   font-weight: 700;
   color: var(--color-text);
   margin: 0 0 16px 0;
   /* Между текстом gap 16px */
   line-height: 1.3;
}

/* Ссылка */
.portfolio-card-link {
   display: inline-flex;
   align-items: center;
   align-self: flex-start;
   width: fit-content;
   gap: 2px;
   /* gap 2px */
   font-family: var(--font-body);
   font-size: 15px;
   /* inter medium 15 px */
   font-weight: 500;
   color: var(--color-text);
   text-decoration: none;
   transition: color var(--transition-fast);
}

.portfolio-card-link svg {
   width: 20px;
   height: 20px;
   transition: transform var(--transition-fast);
}

@media (min-width: 1025px) {
   .portfolio-card-link:hover {
      color: var(--color-primary);
   }

   /* Анимация стрелочки при наведении (вверх и вправо) */
   .portfolio-card-link:hover svg {
      transform: translate(2px, -2px);
   }
}

/* Разделитель (на будущее, если два заголовка) */
.portfolio-card-divider {
   height: 1px;
   background-color: #DAE0D9;
   margin: 24px 0;
   /* gap между ними 24px и разделительная линия */
   width: 100%;
}

/* --- Адаптив --- */
@media (max-width: 1100px) {
   .portfolio-grid {
      justify-content: center;
   }
}

@media (max-width: 1024px) {
   .portfolio-grid {
      display: flex;
      flex-direction: column;
   }

   .portfolio-col {
      width: 100%;
      align-items: center;
   }

   .portfolio-card {
      width: 100% !important;
      max-width: 620px !important;
   }

   .portfolio-card-link {
      background-color: var(--color-primary);
      color: #FFFFFF;
      padding: 12px 0;
      border-radius: 12px;
      gap: 8px;
      width: 177px;
      justify-content: center;
   }
}

@media (max-width: 768px) {
   .portfolio-grid {
      display: flex;
      flex-direction: column;
   }

   .portfolio-card {
      width: 100% !important;
      max-width: 620px !important;
      flex-direction: column;
   }

   .portfolio-card-badge {
      font-size: 14px;
   }
}