/* =========================================================
   ПРОЕКТЫ — СТРАНИЧНЫЕ СТИЛИ
   Подключается ПОСЛЕ styles.css. НИЧЕГО НЕ МЕНЯЛ по селекторам
   и значениям — только структурировал и добавил комментарии.
   Блоки: Page Hero → Projects Grid/Card → CTA → Advantages.
   У каждого блока — свой подпункт адаптива (если нужен).
   ========================================================= */


/* ===================== 1) PAGE HERO ===================== */
/* Верхний заголовок страницы + подзаголовок */
.page-hero { padding: 1.75rem 0 0.5rem; }

.page-hero h1{
  margin:0 0 12px;
  font-size:var(--section-title-size);
  font-weight:var(--section-title-weight);
  color:var(--ink);
  text-align:center;
  line-height:1.2;
}

/* --- Page Hero: АДАПТИВ (резерв под узкие экраны) --- */
@media (max-width:540px){
  /* (пока специальных правок нет — базовые стили уже адаптивны) */
}


/* ===================== 2) PROJECTS LIST & CARDS ===================== */
/* Секция-обёртка со списком карточек */
.projects-list{ padding:1.25rem 0 0.5rem; }

/* Сетка карточек с авто-вписыванием */
.projects-grid{
  display:grid;
  gap:1.125rem; /* 18px */
  grid-template-columns:repeat(auto-fit, minmax(17.5rem, 1fr)); /* 280px */
}

/* Карточка проекта: контейнер */
.project-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 6px 20px rgba(17,25,40,.04);
  display:flex; flex-direction:column;
  cursor:pointer;
  transition:transform .2s ease;
}
.project-card:hover{ transform:scale(1.03); position:relative; z-index:5; }

/* Медиа-блок в карточке (соотношение сторон) */
.card-media{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#ddd; overflow:hidden;
}
.card-media img{ width:100%; height:100%; object-fit:cover; }

/* Оверлей внизу карточки: градиент, заголовок и цена */
.card-overlay{
  position:absolute; inset:auto 0 0 0;
  padding:1.125rem; /* 18px */
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(14,17,23,.65) 80%);
  color:#fff;
  display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:flex-end; text-align:center;
}
.card-overlay.dark{
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(8,10,15,.75) 85%);
}
.card-overlay h3{ margin:0; font-size:clamp(1.125rem, 2.4vw, 1.5rem); font-weight:800; }
.card-overlay .price{ font-weight:600; white-space:nowrap; }

/* Характеристики карточки (НЕ путать с глобальными .features) */
.project-card .features{
  /* Ровно 2 колонки х 2 строки на всех карточках */
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0.875rem 1.125rem; /* 14px 18px */
  list-style:none; margin:0.875rem 1rem 0.625rem; padding:0; /* 14px 16px 10px */
}
.project-card .features li{
  display:flex; align-items:center; gap:8px;
  color:var(--ink); font-weight:600;
  /* Исключаем перенос, чтобы сетка не «прыгала» */
  white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.project-card .features img{ width:1.125rem; height:1.125rem; opacity:.9; flex:0 0 auto; }

/* Теги карточки */
.project-card .tags{
  display:flex; flex-wrap:wrap; gap:0.5rem; /* 8px */
  list-style:none; margin:0 1rem 1rem; padding:0; /* 16px */
}
.project-card .tags li{
  font-size:0.8125rem; /* 13px */ padding:0.375rem 0.625rem; /* 6px 10px */
  background:var(--chip); border:1px solid var(--line);
  color:#29323d; border-radius:999px; white-space:nowrap;
}

/* --- Projects: АДАПТИВ (резерв) --- */
@media (max-width:920px){
  /* (глобальная сетка и auto-fit уже отрабатывают адаптив) */
}


/* ===================== 3) CTA: ИНДИВИДУАЛЬНЫЙ ПРОЕКТ ===================== */
/* Горизонтальная секция-призыв внизу страницы */
.custom-project-cta{
  padding:48px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg);
}

.cta-inner{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:14px; max-width:820px; margin:0 auto;
}

/* Кнопка акцентная (переиспользует палитру проекта) */
.btn-accent{ background:var(--blue); color:#fff; }
.btn-accent:hover{ filter:brightness(.95); }

/* --- CTA: АДАПТИВ (резерв) --- */
@media (max-width:540px){
  /* (доп. правки для узких экранов можно добавить здесь при необходимости) */
}


/* ===================== 4) ADVANTAGES (локальный блок) ===================== */
/* Локальная версия блока «Почему выбирают нас?» для этой страницы */
.advantages{ padding:2.5rem 0 1.75rem; }

.advantages-list{
  display:grid; gap:1rem; /* 16px */
  grid-template-columns:repeat(auto-fit, minmax(13.75rem, 1fr)); /* 220px */
  list-style:none; margin:0; padding:0;
}

.adv-item{
  background:#fff; border:1px solid var(--line); border-radius:1rem; /* 16px */
  padding:1.125rem; /* 18px */ text-align:center;
}
.adv-icon{ width:3.5rem; height:3.5rem; margin:0 auto 0.625rem; opacity:.9; display:block; }
.adv-item h3{ margin:4px 0 6px; font-size:1.125rem; }
.adv-item p{ margin:0; color:var(--muted); }

/* --- Advantages: АДАПТИВ (резерв) --- */
@media (max-width:540px){
  /* (блок уже резиновый благодаря auto-fit) */
}