/*
 * taxonomy-video-names.css
 * taxonomy-video_names.php (タームアーカイブページ) 専用のスタイル
 * front-page.cssと同じレイアウトを適用
 */

/* 各動画アイテムのレイアウト設定 */
.latest-videos-list article {
    /* 記事ごとに下線と余白を追加して区切りを明確に */
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
    
    /* PC/デフォルト: 横並び */
    display: flex;  
    flex-direction: row;  
    gap: 15px;  
    align-items: flex-start;  
}

/* サムネイルを囲む要素 (左側 150px) */
.latest-videos-list article .video-item-meta {
    flex-shrink: 0; 
    width: 150px; 
}

/* テキストコンテンツを囲む要素 (右側 残りの幅) */
.latest-videos-list article .video-item-content {
    flex-grow: 1; 
}

/* 投稿タイトル (1行目) のスタイルを調整 */
.video-item-content .video-custom-info p:first-child {
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 5px;
}

/* ID、女優、メーカー、公開日などのメタ情報の行間を調整 */
.video-item-content p {
    margin: 0 0 3px 0;  
    line-height: 1.4;
}

/* ----------------------------------------------------
 * ★★ 文字色とホバー効果の設定 ★★
 * ---------------------------------------------------- */

/* 女優名 (2行目)、メーカー/レーベル名 (3行目)、公開日 (5行目) のデフォルト文字色を青 #0073aa に設定 */
.video-custom-info p:nth-child(2),
.video-custom-info p:nth-child(3),
.video-custom-info p:nth-child(5) {
    color: #0073aa;  
}

/* リンク要素の下線をデフォルトで非表示に */
.latest-videos-list a {
    text-decoration: none;
    color: inherit;  
}

/* タイトルリンクの色をデフォルトの黒に戻す (非ホバー時) */
.video-info-title a {
    color: #333;  
}

/* タイトル、女優、メーカーのリンクにホバーした時の共通効果 */
.latest-videos-list a:hover {
    text-decoration: underline;  
}

/* タイトルリンクにホバーした時の色を青 (#0073aa) に変更 */
.video-info-title a:hover {
    color: #0073aa;
}

/* 女優名とメーカー名の中の aタグ（リンク）の文字色を青 (#0073aa) に設定 */
.video-custom-info p:nth-child(2) a,
.video-custom-info p:nth-child(3) a {
    color: #0073aa;
}

/* ----------------------------------------------------
 * ★★ ページネーションのサイズ調整と区切り線の統一 (メイン設定) ★★
 * ---------------------------------------------------- */

/* ページネーション全体 (nav.pagination) のスタイル */
.site-main > nav.pagination {
    /* 動画アイテムの区切り線と同じ色と太さを適用 */
    border-bottom: 1px solid #ddd;
    
    /* 動画リストとの間に余白を持たせる */
    padding-bottom: 15px;
    margin-bottom: 20px; 

    /* サイズ調整: 全体のフォントサイズ (PC/タブレット) */
    font-size: 0.85em; 
    line-height: 1.2;
}

/* ページネーションの数字やテキストのリンク（<a>/<span>）のスタイルを調整 */
/* nav-links内のすべてのページ番号（<a>と<span>）に適用 */
.site-main > nav.pagination .nav-links .page-numbers {
    /* 💡 中央寄せと正方形化を強制 (nav-links内のすべてのpage-numbersに適用) */
    
    /* 中央寄せを強制 */
    display: inline-flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    
    /* サイズ固定で正方形 */
    width: 30px; 
    height: 30px; 
    
    /* line-heightをリセットして中央寄せを妨げないようにする */
    line-height: 1 !important; 
    
    /* パディングをゼロに設定（width/heightを優先）*/
    padding: 0 !important; 
    
    /* マージンは安全な1pxを維持 */
    margin: 0 1px;
    
    /* ボーダーを追加して枠を明確にする */
    border: 1px solid #ccc;
    border-radius: 2px; /* 角丸の調整 */
}

/* 現在のページを示す数字（.current）のスタイルも統一 */
.site-main > nav.pagination .nav-links .current {
    /* 💡 中央寄せを強制 */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* line-heightをリセット */
    line-height: 1 !important; 
    
    /* サイズ固定で正方形 */
    width: 30px; 
    height: 30px;
    padding: 0 !important; /* paddingをリセット */
    
    /* 色設定 */
    border: 1px solid #0073aa; 
    background-color: #e5f5ff; 
}


/* ----------------------------------------------------
 * ★★ レスポンシブ対応 (スマホレイアウトと画像サイズ最適化) ★★
 * ---------------------------------------------------- */

@media (max-width: 767px) {
    /* 1. レイアウトを縦並び（上から下）に変更 */
    .latest-videos-list article {
        flex-direction: column;  
        gap: 5px;  
        align-items: stretch;  
    }

    /* 2. サムネイルエリア (上部) の幅を親要素に合わせる */
    .latest-videos-list article .video-item-meta {
        width: 100%;  
        margin-bottom: 5px;  
    }

    /* 3. 画像全体を囲む <a> タグをブロック要素にし、幅100%にする */
    .latest-videos-list article .video-item-meta > a {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;  
    }

    /* 4. アスペクト比 3:2 のコンテナ設定 (Padding Hack) */
    .thumbnail-aspect-ratio-box {
        position: relative; /* 子要素の絶対配置の基準 */
        width: 100%;
        padding-top: 66.66%; /* (2 / 3) * 100 = 66.66...% で 3:2 を表現 */
        overflow: hidden;  
        /* 余白の色を白に変更 */
        background-color: #fff;  
    }

    /* 5. サムネイル画像自体を比率コンテナ内に収める */
    /* <picture> タグと <img> タグの両方にスタイルを適用 */
    .thumbnail-aspect-ratio-box picture,
    .thumbnail-aspect-ratio-box img {
        position: absolute !important;  
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        
        /* 比率を維持し、余白（左右の隙間）を作って収める */
        object-fit: contain !important;  
        
        /* その他のプロパティを念のため上書き */
        max-width: 100% !important;  
        display: block !important;  
    }
    
    /* 6. テキストコンテンツ (下部) の幅は自動調整 */
    .latest-videos-list article .video-item-content {
        flex-grow: 1;
        /* テキストを中央揃えにする */
        text-align: center;  
    }

    /* 投稿タイトルの上部のマージンを少し開ける（縦並びになったため） */
    .video-item-content .video-custom-info p:first-child {
        margin-top: 5px;
    }

    /* ----------------------------------------------------
     * ★★ ページネーションのスマホ向けサイズ調整 (特化) ★★
     * ---------------------------------------------------- */
    
    /* ページネーション全体をさらに小さく */
    .site-main > nav.pagination {
        font-size: 0.7em; 
        margin-bottom: 15px;
        
        /* ★ 💡 修正箇所: 1行に収めるための調整 ★ */
        text-align: left; /* 左寄せ */
        /* コンテナの幅を強制的に広げ、要素の隙間を吸収 */
        margin-left: -5px; 
        margin-right: -5px;
    }

    /* 💡 修正箇所: スマホでのページネーションサイズを拡大 (25px → 30px) */
    .site-main > nav.pagination .nav-links .page-numbers {
        /* 中央寄せを強制 */
        line-height: 1 !important; /* 👈 垂直中央寄せを確保 */
        
        /* サイズを 30px に拡大 */
        width: 30px; 
        height: 30px; 
        
        border-radius: 2px;
    }

    .site-main > nav.pagination .nav-links .current {
        /* 中央寄せを強制 */
        line-height: 1 !important; /* 👈 垂直中央寄せを確保 */
        
        /* サイズを 30px に拡大 */
        width: 30px;
        height: 30px;
    }
}