/* ---------- ОБЩИЙ КОНТЕЙНЕР ---------- */
.projects-container{
    display:flex;
    width:100%;          /* больше не ограничиваем 1000 px */
    padding:40px 20px;
    gap:20px;
    box-sizing:border-box;
    align-items:flex-start;
}

/* ---------- Левая колонка (категории) ---------- */
.categories-column{
    width:280px;
    background:#D9D9D9;
    border-radius:10px;
    padding:20px;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    align-self:flex-start;
}
.categories-column h2{
    font-size:18px;
    margin-bottom:15px;
    text-align:center;
    color:#002366;
    border-bottom:2px solid #ccc;
    padding-bottom:5px;
}
/* ссылки оставляем без изменений … */

/* ---------- ПРАВАЯ ЧАСТЬ (список проектов) ---------- */
.projects-section{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;      /* выравниваем влево, чтобы h1 «прилип» */
}

/* Оранжевый заголовок, как в макете */
.projects-section h1{
    margin:0 0 30px 0;
    background:#ff6600;
    color:#000;
    font-size:32px;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:10px 22px;
    box-shadow:2px 2px 8px rgba(0,0,0,.2);
}

/* --- Сетка проектов --- */
.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); /* 3 × 400 px на десктопе */
    gap:40px 20px;        /* вертикаль / горизонт */
    width:100%;
}

/* --- Карточка проекта --- */
.project-card{
    width:400px;
    height:440px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    text-decoration:none;
    color:inherit;
    display:flex;
    flex-direction:column;
}
.project-card img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}
.project-info{
    height:120px;         /* 440 – 320 */
    background:#6a6a6a;   /* тёмно-серый, как на макете */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    box-sizing:border-box;
    text-align:center;
}
.project-info h3{
    margin:0;
    font-size:18px;
    line-height:1.3;
    color:#fff;
}

body {                 /* файл projects.css подключается только на этой странице,                  так что глобальные стили других разделов не затрагиваем */
    background:#BFBFBF;
}

/* ===== 3. Ссылки категорий без подчёркивания + убираем маркеры UL ===== */

.categories-list{ list-style:none; margin:0; padding:0; }
.categories-list li + li{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,.12);
}

.categories-column ul,
.categories-list a{
  display:block;
  padding:6px 2px;
  line-height:1.35;
  letter-spacing:.3px;
  text-decoration:none;
  color:#2f2f2f;
  background:#cfcfcf;
  text-align: center;
}
.categories-list a:hover{ text-decoration:underline; }

.categories-list a{
    text-decoration:none;      /* убираем подчёркивание */
    color: #646465;
}



/* ---------- Бургер + выпадающее меню категорий (-mobile only) ---------- */

/* по умолчанию (десктоп ≥769 px) бургер скрыт,
   колонка стоит слева, как раньше */
.categories-toggle      {display:none;}
.categories-column.open {pointer-events:auto;}  /* страховка */

/* ====== мобильная зона ====== */
@media (max-width:768px){

  .project-card{
    width:350px;
    height:385px;
  }

  .project-card img {
    width:350px;
    height:280px;
  }

  .projects-container{
      flex-direction:column;
      align-items:center;           /* по центру */
      gap:0;                        /* убираем внутренний зазор */
  }

  .projects-section {
    width: auto;
    max-width: 350px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* оранжевая плашка + бургер */
  .projects-header{
      width:100%;                   /* на всю строку ... */
      max-width:350px;              /* ... но не шире карточки */
      margin: 20px 0px;           /* «воздух» ТОЛЬКО снизу */
      padding:10px 0;               /* внутр. отступы убрали по сторонам */
      display:flex;
      align-items:center;
      gap:12px;
      background:#FF6600;
      box-shadow:2px 2px 8px rgba(0,0,0,.2);
      box-sizing:border-box;        /* ширина учитывает padding */
      z-index:2600;
  }
  .projects-header h1{
      margin:0;background:none;font-size:24px;flex:1;
      text-align:center;            /* заголовок по центру */
  }

  /* бургер — крупная кликабельная зона */
  .categories-toggle{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:40px;
    height:40px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    z-index:2700;
    pointer-events:auto; /* клики точно ловим */
  }
  .categories-toggle span{
      width:26px;height:3px;background:#000;border-radius:2px;margin:3px 0;
  }

  /* выпадающее меню */
  .categories-column{
    position:fixed;
    left:0; right:0;
    background:#D9D9D9;
    padding:16px 20px;
    border-radius:0 0 6px 6px;
    transform:translateY(-120%);
    opacity:0;
    transition:.25s ease;
    z-index:2100;

    /* ↓↓↓    добавьте эти 2 строки  ↓↓↓ */
    pointer-events:none;      /* ничего не перехватываем */
    touch-action:none;        /* Android / iOS */
  }
  .categories-column.open{transform:translateY(0);opacity:1;}
  .categories-column h2{display:none;}
  .categories-column ul{list-style:none;margin:0;padding:0;}
  .categories-list a{text-decoration:none;color:#646465;}
}