/* ========== БЛОК ТРЕЙЛЕРОВ ========== */
.trailers-section {
max-width: 1400px;
margin: 50px auto;
padding: 0 20px;
}
.trailers-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.trailers-title {
font-size: 1.8rem;
font-weight: 700;
color: #2c3e50;
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.trailers-title i {
color: #e94560;
font-size: 1.6rem;
}
.trailers-counter {
font-size: 0.9rem;
color: #7f8c8d;
background: #f8f9fa;
padding: 6px 14px;
border-radius: 20px;
font-weight: 500;
}
.trailers-container {
background: #ffffff;
border-radius: 16px;
padding: 30px;
border: 1px solid #e1e8ed;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.trailers-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
align-items: stretch;
}
/* Видеоплеер - соотношение 21:9 */
.trailer-main {
position: relative;
width: 100%;
}
.video-player-wrapper {
position: relative;
width: 100%;
background: #000;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 21/9;
}
/* Видео и iframe на весь экран */
.video-player-wrapper iframe,
.video-player-wrapper video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
border: none;
background: #000;
}
/* Для видео файлов используем object-fit: cover */
.video-player-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
transform: none;
top: 0;
left: 0;
}
/* Компактный список трейлеров */
.trailer-sidebar {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.trailer-list {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
max-height: 100%;
overflow-y: auto;
padding-right: 4px;
}
/* Стилизация скроллбара */
.trailer-list::-webkit-scrollbar {
width: 4px;
}
.trailer-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.trailer-list::-webkit-scrollbar-thumb {
background: #e94560;
border-radius: 4px;
}
/* Миниатюры трейлеров */
.trailer-thumbnail {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 6px;
border-radius: 8px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.2s ease;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
min-height: 68px;
overflow: hidden;
}
.trailer-thumbnail:hover {
border-color: #ffcdd2;
background: #fafafa;
transform: translateX(4px);
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
/* Активный ролик */
.trailer-thumbnail.active {
border: 1px solid #ffb3b3;
background: #fff5f5;
box-shadow: 0 2px 8px rgba(233, 69, 96, 0.15);
position: relative;
}
/* Акцентная полоска */
.trailer-thumbnail.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 35px;
background: #e94560;
border-radius: 0 3px 3px 0;
}
/* Контейнер для изображения */
.trailer-thumbnail-image {
position: relative;
width: 90px;
height: 52px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: #f1f5f9;
}
.trailer-thumbnail-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.trailer-thumbnail:hover .trailer-thumbnail-image img {
transform: scale(1.05);
}
.trailer-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
}
.trailer-placeholder i {
font-size: 1.2rem;
}
/* Оверлей при наведении */
.trailer-thumbnail-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 1;
border-radius: 6px;
}
.trailer-thumbnail:hover .trailer-thumbnail-overlay {
opacity: 1;
}
.trailer-thumbnail-overlay i {
color: white;
font-size: 1.3rem;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
/* Информация о трейлере */
.trailer-thumbnail-info {
flex: 1;
min-width: 0;
}
.trailer-thumbnail-title {
font-size: 0.85rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trailer-thumbnail-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.65rem;
color: #7f8c8d;
margin-bottom: 2px;
}
.trailer-thumbnail-meta span {
display: flex;
align-items: center;
gap: 2px;
}
.trailer-thumbnail-meta i {
font-size: 0.6rem;
color: #e94560;
}
/* Описание трейлера */
.trailer-thumbnail-description {
    font-size: 0.7rem;
    color: #555;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    max-width: 100%;
    white-space: normal !important;
}
/* Индикатор загрузки */
.loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
.loading-spinner i {
font-size: 1.8rem;
color: #e94560;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Скрытые элементы */
.trailer-info,
.trailer-controls,
.trailer-current-title,
.trailer-current-desc {
display: none;
}
/* Сообщение об ошибке */
.error-message {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
z-index: 5;
border-radius: 12px;
}
.error-message i {
font-size: 2.2rem;
color: #e94560;
margin-bottom: 12px;
}
.error-message p {
margin-bottom: 12px;
font-size: 0.85rem;
color: #fff;
}
.error-message button {
padding: 6px 16px;
background: #e94560;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s;
}
.error-message button:hover {
background: #c73e54;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(233, 69, 96, 0.3);
}
/* Адаптивность */
@media (max-width: 1024px) {
.trailers-wrapper {
grid-template-columns: 1fr;
gap: 25px;
}
.trailer-sidebar {
max-height: none;
height: auto;
}
.trailer-list {
flex-direction: row;
flex-wrap: wrap;
max-height: none;
height: auto;
overflow-y: visible;
}
.trailer-thumbnail {
flex: 0 0 calc(50% - 4px);
min-height: 68px;
}
.trailer-thumbnail.active::before {
display: none;
}
.trailer-thumbnail.active {
border: 1px solid #e94560;
background: #fff5f5;
}
}
@media (max-width: 768px) {
.trailers-section {
margin: 30px auto;
padding: 0 15px;
}
.trailers-container {
padding: 20px;
}
.trailers-title {
font-size: 1.4rem;
}
.trailer-thumbnail {
flex: 0 0 100%;
}
}
@media (max-width: 480px) {
.trailers-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.trailers-container {
padding: 15px;
}
.trailer-thumbnail-image {
width: 80px;
height: 46px;
}
}