/* ====================================
   Page: single-portfolio_project.php
==================================== */

/* HERO-блок (тёмный фон) */
.project-page .hero-block {
  background-color: #111212 !important;
  color: #fff !important;
  padding: 60px 60px !important;
  text-align: center !important;
}
.project-page .project-title {
  font-size: 36px !important;
  color: #fff !important; 
  font-weight: 700 !important;
  margin-bottom: 50px !important;
}

/* Главное фото проекта: ограничиваем ширину и центрируем */
.project-page .project-main-photo img {
  display: block !important;
  width: 100% !important;         /* адаптивно сжимается до max-width */
  max-width: 800px !important;     /* не растягивается сильнее */
  height: auto !important;
  margin: 0 auto 50px !important;  /* центрируем и даём отступ снизу */
  border-radius: 20px !important;
}

.project-page .executor-title {
  font-size: 24px !important;
  color: #fff !important;
  margin: 20px 0 20px !important;
}
.project-page .executor-subtitle {
  font-size: 18px !important;
  color: #bcbdbe !important;
  margin-bottom: 20px !important;
}
.project-page .btn-primary {
  background-color: #F95D32 !important;
  color: #fff !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  margin-bottom:  50px !important;
  margin-top:  20px !important;
  display: inline-block !important;
  transition: transform 1s ease!important;
}

.project-page .btn-primary:hover {
 transform: translateY(4px)!important ;
}

/* Details-блок (светлый фон) */
.project-page .details-block {
  background-color: #fff !important;
  padding: 60px 60px !important;
  color: #000 !important;
}
.project-page .details-block .section-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin-bottom: 40px !important;
  text-align: center !important;
}
.project-page .project-description {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #333 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

/* Gallery-блок (тёмный фон) */
.project-page .gallery-block {
  background-color: #111212 !important;
  padding: 80px 20px !important;
  color: #fff !important;
}
.project-page .gallery-block .section-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 40px !important;
  text-align: center !important;
}
.project-page .gallery-block .projects-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}
.project-page .gallery-block .projects-grid .project-card img.project-main-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px !important;
  
}
/* Нечётное количество растягиваем */
.project-page .gallery-block .projects-grid .project-card:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
}
/* Адаптив: одна колонка на мобилках */
@media (max-width: 768px) {
  .project-page .gallery-block .projects-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Ограничиваем ширину контента на странице проекта */
/* Ограничиваем ширину только для деталей и галереи */
.project-page .details-block .container,
.project-page .gallery-block .container {
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* Возвращаем контейнеру в контактном блоке полную ширину */
.project-page .contact-block .container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 20px !important; /* по желанию, внутренние отступы */
}

/* Gallery-блок: одинаковая высота карточек и обрезка */
.project-page .gallery-block .projects-grid .project-card {
  height: 300px !important; /* установите высоту по макету */
  overflow: hidden !important;
}

.project-page .gallery-block .projects-grid .project-card img.project-main-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* сохраняет пропорции и обрезает лишнее */
}

@media (max-width: 768px) {
  .project-page .hero-block {
    padding: 60px 20px !important;
  }
}