/* --- Общие стили --- */
body { margin: 0; font-family: sans-serif; background: #f4f4f4; color: #333; }
a { text-decoration: none; color: inherit; }
* { box-sizing: border-box; } /* Важно для правильных отступов */

/* --- СТИЛИ ДЛЯ ГАЛЕРЕИ (index.php) --- */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.video-grid { 
    display: grid; 
    /* Адаптивная сетка: плитки не меньше 200px, но растягиваются */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px; 
}

.video-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}
.video-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

.video-card img {
    width: 100%;
    display: block;
    /* Делаем вертикальные плитки (Shorts style) */
    aspect-ratio: 9 / 16; 
    object-fit: cover;
}

.card-info { padding: 15px; flex-grow: 1; }
.card-title { font-weight: bold; margin-bottom: 5px; font-size: 1.1em; }
.card-desc { font-size: 0.9em; color: #666; }


/* --- СТИЛИ ДЛЯ ПРОСМОТРА (watch.php) --- */

/* Обертка на весь экран (для ПК) */
.watch-wrapper {
    display: flex;       
    height: 100vh;       
    width: 100%;
    background: #000;    /* Фон подложки */
}

/* Левая колонка (Текст) */
.info-col {
    flex: 0 0 400px;     /* Фиксируем ширину колонки с текстом */
    background: white;
    padding: 30px;
    overflow-y: auto;    /* Прокрутка только у текста */
    z-index: 10;
    display: flex;
    flex-direction: column;
}

/* Правая колонка (Видео) */
.video-col {
    flex: 1;             /* Занимает всё остальное место */
    display: flex;       
    justify-content: center;
    align-items: center;
    background: #000;
}

/* Видео плеер */
.video-col video {
    max-width: 100%;
    max-height: 100%;
    outline: none;
}

/* Кнопка назад */
.back-btn {
    display: inline-block;
    width: fit-content;
    padding: 8px 15px;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.back-btn:hover { background: #e0e0e0; }

.source-block { margin-top: auto; padding-top: 20px; border-top: 1px solid #eee; font-size: 0.9em;}
.source-link { color: #007bff; word-break: break-all; }


/* --- МОБИЛЬНАЯ АДАПТАЦИЯ (Media Queries) --- */
@media (max-width: 768px) {
    /* Меняем структуру watch.php на вертикальную */
    .watch-wrapper {
        flex-direction: column-reverse; /* Текст снизу, видео сверху */
        height: auto; /* Высота по содержимому, убираем 100vh */
    }

    /* Видео прилипает к верху экрана */
    .video-col {
        height: 60vh; /* Видео занимает 60% экрана мобилки */
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* Текст идет следом */
    .info-col {
        flex: auto;
        width: 100%;
        height: auto;
        padding: 20px;
        overflow-y: visible;
    }
}