/**
 * Page Banners Styles
 * Общие стили для баннеров страниц (каталог, услуги, контакты)
 * 
 * @package Coderr_ProLive
 */

/* Common Banner Styles */
.catalog-banner,
.services-banner,
.contacts-banner {
  background: var(--gradient-primary);
  color: var(--white);
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  margin-top: 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.catalog-banner::before,
.services-banner::before,
.contacts-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* Banner с фоновым изображением */
.catalog-banner-with-image,
.services-banner-with-image,
.contacts-banner-with-image {
  /* Используем только background-color, чтобы не перезаписывать background-image из inline стилей */
  background-color: rgba(0, 0, 0, 0.3);
  background-attachment: scroll;
  background-position: center center; /* Начальное выравнивание по центру */
  will-change: background-position;
  transform: translateZ(0); /* Аппаратное ускорение */
  /* Фоновое изображение задается через inline стили и будет отображаться поверх background-color */
}

.catalog-banner-with-image::before,
.services-banner-with-image::before,
.contacts-banner-with-image::before {
  background: rgba(0, 0, 0, 0.4);
  background-image: none;
}

.catalog-banner-content,
.services-banner-content,
.contacts-banner-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.catalog-banner-title,
.services-banner-title,
.contacts-banner-title {
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--white);
  font-weight: 700;
}

.catalog-banner-subtitle,
.services-banner-subtitle,
.contacts-banner-subtitle {
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 0;
  opacity: 0.95;
  color: var(--white);
}

/* Content Area */
.catalog-content-area,
.services-content-area,
.contacts-content-area {
  padding: 60px 0;
  background: var(--white);
}

.catalog-main,
.services-main,
.contacts-main {
  margin: 0 auto;
}

.catalog-page-content,
.services-page-content,
.contacts-page-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--dark-color);
}

.catalog-page-content h2,
.services-page-content h2,
.contacts-page-content h2 {
  font-size: 2rem;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--primary-color);
}

.catalog-page-content h2:first-child,
.services-page-content h2:first-child,
.contacts-page-content h2:first-child {
  margin-top: 0;
}

.catalog-page-content h3,
.services-page-content h3,
.contacts-page-content h3 {
  font-size: 1.5rem;
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--primary-dark);
}

.catalog-page-content p,
.services-page-content p,
.contacts-page-content p {
  margin-bottom: 20px;
}

.catalog-page-content ul,
.catalog-page-content ol,
.services-page-content ul,
.services-page-content ol,
.contacts-page-content ul,
.contacts-page-content ol {
  margin-bottom: 20px;
  padding-left: 30px;
}

.catalog-page-content li,
.services-page-content li,
.contacts-page-content li {
  margin-bottom: 10px;
}

/* Page Layout */
.page-template-template-catalog .content-area,
.page-template-template-services .content-area,
.page-template-template-contacts .content-area,
.catalog-page,
.services-page,
.contacts-page {
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.page-template-template-catalog .content-wrapper,
.page-template-template-services .content-wrapper,
.page-template-template-contacts .content-wrapper,
.catalog-page .content-wrapper,
.services-page .content-wrapper,
.contacts-page .content-wrapper {
  grid-template-columns: 1fr;
  gap: 0;
}

.page-template-template-catalog .widget-area,
.page-template-template-services .widget-area,
.page-template-template-contacts .widget-area,
.catalog-page .widget-area,
.services-page .widget-area,
.contacts-page .widget-area {
  display: none;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
  .catalog-main,
  .services-main,
  .contacts-main {
    max-width: 100%;
    padding: 0 20px;
  }
}

@media screen and (max-width: 768px) {
  .catalog-banner,
  .services-banner,
  .contacts-banner {
    padding: 100px 0 60px;
    margin-top: 60px;
  }
  
  .catalog-banner-title,
  .services-banner-title,
  .contacts-banner-title {
    font-size: 2.5rem;
  }
  
  .catalog-banner-subtitle,
  .services-banner-subtitle,
  .contacts-banner-subtitle {
    font-size: 1.1rem;
  }
  
  .catalog-content-area,
  .services-content-area,
  .contacts-content-area {
    padding: 40px 0;
  }
  
  .catalog-page-content,
  .services-page-content,
  .contacts-page-content {
    font-size: 1rem;
  }
  
  .catalog-page-content h2,
  .services-page-content h2,
  .contacts-page-content h2 {
    font-size: 1.75rem;
  }
  
  .catalog-page-content h3,
  .services-page-content h3,
  .contacts-page-content h3 {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 480px) {
  .catalog-banner-title,
  .services-banner-title,
  .contacts-banner-title {
    font-size: 2rem;
  }
  
  .catalog-banner-subtitle,
  .services-banner-subtitle,
  .contacts-banner-subtitle {
    font-size: 1rem;
  }
}