.header-btn {     
    color: #000000;
}


/* Основной контейнер для контента этой страницы */
.content {
    padding-top: 10vh; /* Оставляем верхний отступ */
    padding-bottom: 50px; /* Оставляем нижний отступ */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;     /* Центрируем по горизонтали */
    min-height: calc(100vh - 85px - 158px); 
    box-sizing: border-box;
    
}

/* Обертка для видео - теперь управляется ВЫСОТОЙ */
.video-wrapper {
    /* height: 80vh; */
    height: 100%;
    width: 100%;
    max-width: 1700px;  
    max-height: calc(100vh - 130px); 
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    margin-left: auto;  /* Центрируем блок если он достиг max-width */
    margin-right: auto; /* Центрируем блок если он достиг max-width */
}

/* Сам видео элемент */
#player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Блок описания */
.description-block {
    width: 100%;             /* Занимает ширину контейнера */
    max-width: 1420px;       /* Ограничиваем максимальную ширину для читаемости */
    margin-top: 60px;       /* Отступ сверху от медиа (подбери значение) */
    margin-bottom: 60px;    /* Отступ снизу до сетки картинок */
    text-align: center;     /* Центрируем текст внутри блока */
}


/* Заголовок контента */
.content-title {  
    font-family: "APK-Galeria", sans-serif;
    font-size: 35px; /* Подбери размер */
    font-weight: 700; /* Или 800/900 для большей жирности */
    text-transform: uppercase;
    letter-spacing: 0.08em; /* Небольшое разрежение букв */
    color: #111; /* Почти черный */
    margin: 0; /* Убираем стандартный отступ h3 */
    padding-top: 12px; /* Отступ СВЕРХУ от линии (подбери) */
    padding-bottom: 20px; /* Отступ СНИЗУ до параграфа (подбери) */
    position: relative; /* Для позиционирования линии ::before */
}

/* Линия над заголовком */
.content-title::before {  
    content: "";
    display: block; /* Чтобы занимала строку */
    position: absolute; /* Позиционируем относительно .content-title */
    top: 0; /* Прижимаем к верху */
    left: 0; /* Выравниваем по левому краю */
    width: 100%; /* На всю ширину .content-title */
    height: 3px; /* Толщина линии (подбери) */
    background-color: #111; /* Цвет линии */
}

/* --- Стили для текста Описания --- */
.content-description {  
    font-family: "Source Code Pro", monospace;
    font-size: 24px;  
    font-weight: 400; 
    line-height: 1.5;         /* Увеличим межстрочный интервал */
    color: #2c2c2c;              /* Цвет текста (подбери под свой фон) */
    margin: 0;                /* Убираем стандартные отступы параграфа */
}

/* --- Стили для Мета-информации (теги, дата) --- */
.content-meta-info { 
    font-family: "Source Code Pro", monospace; /* Тот же моноширинный */
    font-size: 13px; /* Мельче основного текста */
    line-height: 1.6;
    color: #999; /* Светло-серый */
    margin: 0; /* Убираем стандартные отступы параграфа */
    /* Добавим отступ сверху от описания, если его не было */
    margin-top: 15px; /* Подбери значение */
}



/* --- Стили для Мета-информации (теги, дата) --- */
.meta-info {
    font-family: "Source Code Pro", monospace; /* Тот же моноширинный */
    font-size: 13px; /* Мельче основного текста */
    line-height: 1.6;
    color: #999; /* Светло-серый */
    margin: 0; /* Убираем стандартные отступы параграфа */
}

.meta-tag {
    margin-right: 0.5em; /* Небольшой отступ после тегов */
}


/* --- Стили для сетки картинок --- */
.still-single {
    width: 100%;             /* Занимает ширину контейнера */
    max-width: 1420px;       /* Ограничиваем максимальную ширину (как у .reel-description-block или .still-grid) */
    margin-top: -35px;
    margin-bottom: 60px;
    display: flex;
    justify-content: center; /* Центрируем содержимое (картинку) по горизонтали */
    align-items: center;     /* Центрируем по вертикали (на всякий случай) */
}

.still-single img {
    display: block;          /* Убирает лишнее пространство под картинкой */
    border-radius: var(--border-radius, 5px); /* Используем переменную или значение */
    max-width: 65%; /* <--- ПОДБЕРИТЕ ЗНАЧЕНИЕ в % */
    width: 100%;     /* Позволяет картинке быть меньше max-width, если сам блок .still-single узкий */
    height: auto;    /* Высота подстраивается автоматически для сохранения пропорций */
}

.still-single img:hover {
    /* Например: */
    /* transform: scale(1.03); */
    /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); */
}
.still-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* Создаем 3 колонки одинаковой ширины */
        gap: 20px; /* Зазор между картинками */
    width: 100%;             /* Занимает ширину контейнера */
    margin-bottom: 60px;    /* Отступ снизу до футера */
}

.still-grid img {  
    display: block;          /* Убирает лишнее пространство под картинкой */
    width: 100%;             /* Картинка занимает всю ширину своей ячейки */
    height: auto;            /* Высота подстраивается автоматически */
    border-radius: var(--border-radius, 5px); /* Используем переменную или значение */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

.still-grid video {  
    display: block;          /* Убирает лишнее пространство под картинкой */
    width: 100%;             /* Картинка занимает всю ширину своей ячейки */
    height: auto;            /* Высота подстраивается автоматически */
    border-radius: var(--border-radius, 5px); /* Используем переменную или значение */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

.still-grid img:hover, .still-greed img:hover {

}


/* --- Адаптивность для сетки картинок (Пример) --- */
@media (max-width: 992px) { /* Планшеты */
    .still-grid,
    .still-greed {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
        gap: 15px;
    }
    .description-block {
        max-width: 90%; /* Чуть шире на планшетах */
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .description-block-title {
        font-size: 18px;
    }
    .reel-page .still-single {
        margin-top: 50px; /* Можно немного уменьшить отступы */
        margin-bottom: 50px;
    }
    .reel-page .still-single img {
       max-width: 75%; /* Можно сделать чуть шире на средних экранах */
    }
}


@media (max-width: 576px) { /* Мобильные */
    .still-grid,
    .still-greed {
        grid-template-columns: 1fr; /* 1 колонка */
        gap: 15px;
    }
    .description-block-title {
        font-size: 16px;
    }
    .reel-page .still-single {
        margin-top: 40px; /* Еще уменьшить отступы */
        margin-bottom: 40px;
    }
    .reel-page .still-single img {
       max-width: 90%; /* Почти на всю ширину на маленьких экранах */
    }
    .content-description {
        font-size: 5vw;
    }
    .still-single img {
        max-width: 100%;
    }
}




/* --- Стили для кастомизации Plyr --- */
.plyr .plyr--full-ui input[type=range] { color: #ffcc00; }
.plyr .plyr__controls button { color: #ffffff; }
.plyr .plyr__controls button:hover { background-color: rgba(255, 255, 255, 0.1); }
.plyr .plyr__controls { background: rgba(0, 0, 0, 0)}
.plyr .plyr__time--current,
.plyr .plyr__time--duration,
.plyr__video-wrapper {background: #00000000;}
.plyr .plyr__tooltip { 
    font-family: 'APK-Protocol', sans-serif;
    font-size: 0.75vw;
    font-weight: 400;
    color: #000000; }
.plyr .plyr__progress input[type=range] {color: #b9d4ec; } 

/* Базовые стили для кнопки */
.plyr .plyr__control--overlaid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center; 
    display: block; /* Или inline-block, уже не так важно при absolute */
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff; 
    border-radius: 50%;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; /* Добавляем transform в transition */
    /* Убери width/height, если они были, размер будет зависеть от padding и контента */
}

/* Стили при наведении */
.plyr .plyr__control--overlaid:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fccd4d; 
    transform: translate(-50%, -50%) scale(1.1);
}