/* Раздел /portfolio на лендинге, по подобию longcatdev.com/portfolio.
   Отдельный файл со своими классами: старые data/style.css и
   assets/style.css не трогаем, чтобы не задеть вёрстку главной.
   Акцент лендинга #05b86d, контейнер .wrap 1224px. */

/* Кнопка «Главная» рядом с «Портфолио»: та же кнопка лендинга, только уже,
   с зазором до соседки. На телефоне прячем: там есть «Меню». */
.header__home button {
  width: auto;
  padding: 0 20px;
  margin-right: 12px;
}

@media (max-width: 767px) {
  .header__home {
    display: none;
  }
}

/* Шапка лендинга стилизована только внутри .first-block, поэтому обёртку
   сохраняем, но на внутренних страницах гасим первый экран. */
.first-block--inner {
  padding: 0;
}
.first-block--inner:before {
  display: none;
}

/* На главной шапка прозрачная поверх картинки первого экрана (белый логотип),
   белой она становится только после прокрутки (класс .fixed из common.js).
   На внутренних страницах картинки нет, поэтому держим «прокрученный» вид
   сразу, иначе белый логотип на белом фоне. */
.first-block--inner .header {
  padding: 16px 0;
  background: #fff;
  box-shadow: rgba(1, 1, 1, 0.1) 0 0 10px;
}
.first-block--inner .header .logo a {
  display: inline-block;
  width: 130px;
  height: 50px;
  background: url('/data/img/logo2.svg');
}
.first-block--inner .header .logo a img {
  display: none;
}

/* ---------- /portfolio: лента кейсов + сайдбар, как на longcatdev ----------
   Шрифт Glober (@font-face объявлен в case.css, подключается на всех
   страницах лендинга). */

.portfolio-list {
  /* компенсируем фиксированную шапку */
  padding: 138px 0 0;
  font-family: 'Glober', Arial, sans-serif;
  color: #222222;
}

.portfolio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 64px;
  padding-bottom: 96px;
}

.portfolio-layout__main {
  min-width: 0;
}

.portfolio-layout__aside {
  min-width: 0;
  position: sticky;
  top: 100px;
  align-self: start;
}

.portfolio-list__title {
  margin: 0 0 48px;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 700;
}

.portfolio-list__title--mini {
  margin-top: 72px;
  scroll-margin-top: 110px;  /* якорь #early не ныряет под липкую шапку */
}

.portfolio-list__note {
  margin: -32px 0 32px;
  font-size: 16px;
  line-height: 1.55;
  color: #757575;
}

.portfolio-list__note a {
  color: #05b86d;
}

/* Лента карточек: обложка-гифка без затемнения, текст под ней */
.feed__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}

.feed-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ebecee;
  border-radius: 16px;
  background: #f5f5f6;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.feed-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
}

.feed-card__media {
  display: block;
  background: #e9e9e9;
}

.feed-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  image-rendering: pixelated;
}

.feed-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 22px 20px;
}

.feed-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 13px;
  color: #757575;
}

/* Теги — квадратики, как на longcatdev */
.tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

.tag--kind {
  background: #05b86d;
  color: #ffffff;
}

.tag--extra {
  border: 1px solid #cfcfcf;
  background: #ffffff;
  color: #757575;
}

.tag--video {
  background: #222222;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.tag--video:hover {
  background: #05b86d;
}

.feed-card__title {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
}

.feed-card__title a {
  color: inherit;
  text-decoration: none;
}

.feed-card__title a:hover {
  color: #05b86d;
}

.feed-card__descr {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.65;
}

.feed__empty {
  margin: 8px 0 0;
  color: #757575;
}

/* Ранние проекты: группы по сферам, раскрываются кликом */
.early-intro {
  max-width: 760px;
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.6;
}

.early-group {
  border-bottom: 1px solid #e8e8ea;
}

.early-group:first-child {
  border-top: 1px solid #e8e8ea;
}

.early-group summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  font-size: 21px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.early-group summary::-webkit-details-marker {
  display: none;
}

.early-group__count {
  margin-left: auto;
  font-size: 14px;
  font-weight: 400;
  color: #757575;
}

.early-group summary svg {
  flex: none;
  color: #757575;
  transition: transform 0.2s;
}

.early-group[open] summary svg {
  transform: rotate(180deg);
}

.early-group__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 48px;
  padding: 4px 4px 32px;
}

.early-project__title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}

.early-project__sphere {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 400;
  color: #757575;
}

.early-project__about {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.55;
}

.early-project__customer {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #757575;
}

.early-project__customer strong {
  color: #05b86d;
}

/* Сайдбар: фильтры сворачиваются, заголовок — summary с шевроном */
.filter-side {
  padding: 24px;
  border-radius: 16px;
  background: #f5f5f6;
}

.filter-side + .filter-side {
  margin-top: 20px;
}

.filter-side__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.filter-side__title::-webkit-details-marker {
  display: none;
}

.filter-side__box:not([open]) > .filter-side__title {
  margin-bottom: 0;
}

.filter-side__chevron {
  flex: none;
  color: #757575;
  transition: transform 0.2s;
}

.filter-side__box:not([open]) .filter-side__chevron {
  transform: rotate(-90deg);
}

.filter-side__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-side__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  padding: 8px 0 8px 14px;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #757575;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.filter-side__link span {
  font-size: 12px;
  font-weight: 400;
}

.filter-side__link:hover {
  color: #222222;
}

.filter-side__link--active {
  border-left-color: #05b86d;
  color: #05b86d;
}

/* Сайдбар в Glober: приглашение ИИ-подбора и кнопка наследуют шрифт */
.portfolio-layout__aside .ai-match-invite,
.portfolio-layout__aside .ai-match-btn {
  font-family: inherit;
}

/* Попап видеоразбора кейса (компонент VideoPopup с longcatdev) */
.video-popup {
  width: min(920px, calc(100vw - 40px));
  padding: 28px;
  border: 0;
  border-left: 4px solid #05b86d;
  border-radius: 16px;
  font-family: 'Glober', Arial, sans-serif;
}

.video-popup::backdrop {
  background: rgba(17, 17, 17, 0.55);
}

.video-popup__close {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: #7a7d80;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.video-popup__close:hover {
  color: #222222;
}

.video-popup__title {
  margin: 0 30px 14px 0;
  font-size: 20px;
  font-weight: 700;
}

.video-popup__player {
  display: block;
  width: 100%;
  border-radius: 10px;
  background: #111111;
}

.video-popup__link {
  display: inline-block;
  margin-top: 16px;
  color: #05b86d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1240px) {
  .portfolio-list {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1000px) {
  .portfolio-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .portfolio-layout__aside {
    position: static;
  }
  .early-group__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .portfolio-list {
    padding-top: 100px;
  }
  .portfolio-list__title {
    font-size: 30px;
  }
  .feed__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Сообщения формы заявки (отправка стала фоновой) ---------- */

.callback__note {
  margin: 10px 0 0;
  font-size: 14px;
  color: #666666;
}

.callback__note.is-error {
  color: #d0342c;
}

.callback__done {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #05b86d;
}