/* ════════════════════════════════════════════════════════════════════
   CELIK — assets/css/pages/projects.css · REDESIGN v2
   Proje listesi (projects.html): metin sekmeleri (.tabs) + tek kolon
   büyük yatay foto kartlar (.project-row) — R3.
   Genel bileşenler components.css'te; burada yalnız sayfa düzeni.
   ════════════════════════════════════════════════════════════════════ */

/* ─── SEKME ARAÇ ÇUBUĞU ───────────────────────────────────────────── */

.projects-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

/* ─── PROJE LİSTESİ ───────────────────────────────────────────────── */

/* Liste JS ile dolana kadar zemin çökmesin */
.project-grid[data-projects="all"],
.projects-list[data-projects="all"] {
  min-height: 240px;
}

/* Tam konteyner genişliği, tek kolon satır kartları (R3) */
.project-grid[data-projects="all"] {
  grid-template-columns: 1fr;
}

/* ─── KIRILIMLAR ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .projects-toolbar {
    margin-bottom: var(--space-6);
  }

  .projects-toolbar .tabs,
  .projects-toolbar .filter {
    gap: var(--space-5);
  }
}

@media (max-width: 480px) {
  .projects-toolbar .tabs,
  .projects-toolbar .filter {
    width: 100%;
    gap: var(--space-4) var(--space-5);
  }

  /* 390px'te 44px başlıkta "Промышленные" kelimesi satıra sığmayıp
     ortadan bölünüyordu — dar ekranda başlık bir kademe küçülür */
  .page-hero h1,
  .page-hero .page-hero__title {
    font-size: 2.25rem;
  }
}