/* Общие стили секции */ .services-grid-section { padding: 80px 0; max-width: 1200px; margin: 0 auto; } .section-header { text-align: center; margin-bottom: 60px; padding: 0 20px; } .section-title { font-size: 2.5rem; font-weight: 700; color: #2C3E50; margin-bottom: 15px; font-family: 'Playfair Display', Georgia, serif; } .section-subtitle { font-size: 1.1rem; color: #7F8C8D; max-width: 600px; margin: 0 auto; } /* Адаптивная сетка/слайдер */ .flex { display: flex; } .w-full { width: 100%; } .overflow-x-auto { overflow-x: auto; } .hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .hide-scrollbar::-webkit-scrollbar { display: none; } .items-stretch { align-items: stretch; } .gap-x-6 { column-gap: 24px; } .px-4 { padding-left: 16px; padding-right: 16px; } .w-2\/3 { width: 66.666667%; } .shrink-0 { flex-shrink: 0; } /* Стили карточек */ article { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: 100%; } .gap-y-4 { row-gap: 16px; } .h-full { height: 100%; } .block { display: block; } .object-cover { object-fit: cover; } .rounded-lg { border-radius: 12px; } .mb-8 { margin-bottom: 32px; } .aspect-\[432\/564\] { aspect-ratio: 432/564; } /* Стили текста */ .t-h2 { font-size: 2rem; font-weight: 600; color: #2C3E50; font-family: 'Playfair Display', Georgia, serif; } .t-h2.italic { font-style: italic; } .mb-2 { margin-bottom: 8px; } .t-body-2 { font-size: 1rem; line-height: 1.6; color: #5D6D7E; } /* Ссылка-подчеркивание */ .link-underline { display: inline-block; color: #E74C3C; text-decoration: none; font-weight: 600; font-size: 1rem; position: relative; padding-bottom: 4px; } .link-underline::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #E74C3C; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .link-underline:hover::after { transform: scaleX(1); transform-origin: left; } /* Контейнер для видео */ .video-thumbnail-container { position: relative; cursor: pointer; overflow: hidden; border-radius: 12px; } .video-thumbnail-container img { transition: transform 0.5s ease; } .video-thumbnail-container:hover img { transform: scale(1.05); } .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; z-index: 2; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .video-thumbnail-container:hover .video-play-btn { opacity: 1; } .video-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); } .video-play-btn svg circle { transition: fill 0.3s ease; } .video-play-btn:hover svg circle { fill: rgba(192, 57, 43, 0.9); } /* Попап для видео */ .video-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .video-popup.active { display: flex; } .popup-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); } .popup-container { position: relative; width: 100%; max-width: 900px; z-index: 2; border-radius: 12px; overflow: hidden; } .popup-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.5); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.3s ease; } .popup-close:hover { background: rgba(0,0,0,0.8); } .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 соотношение */ height: 0; } .youtube-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Десктопная сетка */ @media (min-width: 768px) { .md\:layout-grid { display: grid; grid-template-columns: repeat(12, 1fr); } .md\:col-span-4 { grid-column: span 4; } .md\:w-full { width: 100%; } .md\:gap-y-8 { row-gap: 32px; } .md\:gap-y-12 { row-gap: 48px; } .sm\:px-8 { padding-left: 32px; padding-right: 32px; } /* Скрываем горизонтальный скролл на десктопе */ .md\:layout-grid { overflow-x: visible; flex-wrap: wrap; } } /* Адаптивность */ @media (max-width: 767px) { .section-title { font-size: 2rem; } .section-subtitle { font-size: 1rem; } .services-grid-section { padding: 60px 0; } .section-header { margin-bottom: 40px; } .t-h2 { font-size: 1.75rem; } /* Показываем кнопку воспроизведения на мобильных */ .video-play-btn { opacity: 0.9; } } /* Планшеты */ @media (min-width: 768px) and (max-width: 1023px) { .w-2\/3 { width: 50%; } }