/*
 * front-page.css
 * front-page.php (トップページ) 専用のスタイル
 */

/* 各動画アイテムのレイアウト設定 */
.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;
}

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

@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;
    }
}