/* =====================================================
   🎯 レイアウトシフト(CLS)対策 - PageSpeed最適化
   ===================================================== */

/* 1. ヘッダーの高さを事前確保 */
.content-header {
    min-height: 60px; /* モバイルヘッダーの最小高さ */
    contain: layout; /* レイアウト分離 */
}

/* 2. 動画サムネイルのアスペクト比固定 */
.video-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9; /* 16:9の比率を強制 */
    overflow: hidden;
    background: #1a1a1a; /* スケルトン背景 */
}

.video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. グリッドレイアウトの安定化 */
.videos-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    contain: layout style; /* レイアウトとスタイルを分離 */
}

/* 4. ビデオカードの最小高さ確保 */
.video-card {
    min-height: 250px; /* カードの最小高さ */
    contain: layout; /* レイアウト分離 */
}

/* 5. スケルトンスクリーン（初回読み込み時） */
.video-thumbnail::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 = 9/16 = 56.25% */
}

/* 6. 画像読み込み前のプレースホルダー */
.video-thumbnail img[src=""],
.video-thumbnail img:not([src]) {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

/* モバイル最適化 */
@media (max-width: 768px) {
    .content-header {
        min-height: 50px;
    }
    
    .videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.5rem;
    }
    
    .video-card {
        min-height: 180px;
    }
}