/*
 * taxonomy-actor.css
 * taxonomy-actor.php (タームアーカイブページ) 専用のスタイル
 * taxonomy-actress.css と同じレイアウトとサイズ設定を適用します
 */

/* ----------------------------------------------------
 * ★★ メインタイトル (h1) のサイズ調整 ★★
 * ---------------------------------------------------- */
.site-main h1 {
    /* 💡 actress.cssに合わせて 1.3em に修正 */
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 5px; /* 作品数Pタグの上に適切な余白 */
    /* 💡 PC/デフォルトは左揃えに設定 */
    text-align: left;
}

/* =================================================== */
/* 💡 新規: プロフィール画像のラッパー (中央寄せと余白用) */
/* =================================================== */

.actor-profile-image-wrapper {
    /* 💡 actress.cssに合わせてマージンを修正 */
    margin: 7px 0 0 0; 
    text-align: left; /* PCでは左寄せ */
}

/* 💡 新規: 直リンク画像 (96x96pxに固定) */
.profile-image-direct {
    width: 96px; /* 96pxに固定 */
    height: 96px; /* 96pxに固定 */
    display: block;
    border-radius: 4px; 
    object-fit: cover; /* 画像がはみ出さないように調整 */
}
/* 画像がない場合のプレースホルダー（念のため残す） */
.profile-image-placeholder {
    width: 96px; 
    height: 96px; 
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #ccc;
    color: #666;
    font-size: 0.8em;
}


/* ----------------------------------------------------
 * ★★ 作品数表示のスタイル ★★
 * ---------------------------------------------------- */
.actor-post-count { /* クラス名 actor-post-count */
    margin-top: 5px; /* h1の下に適切な余白 */
    /* 💡 actress.cssに合わせて 1.0em に修正 */
    margin-bottom: 0; 
    font-size: 1.0em; 
    color: #333;    
    text-align: left; /* PCでは左寄せ */
    font-weight: normal; 
}


/* ----------------------------------------------------
 * ★★ 男優プロフィール アコーディオンのスタイル (actress.cssと統一) ★★
 * ---------------------------------------------------- */
.actor-profile-accordion {
    /* actress.cssと統一 */
    margin-bottom: 20px; 
    border: none;
    border-radius: 0; 
    background-color: #fff; 
    padding: 0;
}

/* アコーディオンの見出し (summary) のスタイル */
.actor-profile-accordion summary {
    cursor: pointer; 
    /* 💡 actress.cssに合わせて 1.0em に修正 */
    font-size: 1.0em; 
    font-weight: normal; 
    color: #0073aa; 
    padding: 10px 15px; 
    
    list-style: none;
    
    /* 💡 PC/デフォルト: 全角1文字分左に移動 */
    position: relative; 
    transform: translateX(-1em); 
}

/* 💡 PC/デフォルトの記号を右側に表示（格納時 = 下向き「⌵」） */
.actor-profile-accordion summary::after {
    content: "⌵"; /* マークは「⌵」のまま */
    font-weight: bold;
    font-size: 0.9em; 
    color: #0073aa;
    
    /* テキストの直後に配置 */
    margin-left: 5px; 
    
    display: inline-block;
    transition: transform 0.2s; 
    
    /* 💡 格納時（デフォルト）は回転なしで通常の「⌵」（下向き）を表示 */
    transform: rotate(0deg);
    transform-origin: center;
}

/* 💡 PC/デフォルトの記号を展開時に回転させる（展開時 = 上向き「⌵」） */
.actor-profile-accordion details[open] summary::after {
    content: "⌵"; 
    
    /* 💡 展開時は180度回転させて上向きに見せる */
    transform: rotate(180deg); 
}


/* アコーディオン内のコンテンツエリアのスタイル */
.actor-profile-accordion .profile-content {
    /* actress.cssと統一 */
    padding: 10px 15px 15px 15px; 
    border-top: none; 
    background-color: #fff; 
}

/* プロフィール項目（pタグ）のスタイル */
.actor-profile-accordion .profile-content p {
    /* actress.cssと統一 */
    margin: 0 0 5px 0; 
    font-size: 0.9em; 
    line-height: 1.4;
}

/* プロフィール項目の見出し（strongタグ）の幅を揃える */
.actor-profile-accordion .profile-content strong {
    /* actress.cssと統一 */
    display: inline-block;
    width: 100px; /* 100px に固定し、コロンを揃える */
    text-align: left;
    margin-right: 5px;
}


/* ----------------------------------------------------
 * ★★ 区切り線のスタイル (新規追加) ★★
 * ---------------------------------------------------- */
.profile-separator {
    /* actress.cssと統一 */
    border: 0;
    border-top: 1px solid #ddd; /* 薄い灰色の線 */
    margin: 20px 0; /* 上下に適切な余白 */
}


/* ----------------------------------------------------
 * ★★ 各動画アイテムのレイアウト (既存/維持) ★★
 * ---------------------------------------------------- */
.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;
}


/* ----------------------------------------------------
 * ★★ 文字色とホバー効果の設定 (actor.phpの表示順序に合わせて調整) ★★
 * ---------------------------------------------------- */

/* 修正後の表示順序: 1.タイトル, 2.女優, 3.メーカー/レーベル, 4.ID, 5.リリース日 */

/* 女優名、メーカー/レーベル名、リリース日の文字色を青 (#0073aa) に設定 */
.video-custom-info p:nth-child(2), /* 女優リスト (actress) */
.video-custom-info p:nth-child(3), /* メーカー/レーベルリスト (maker/slabel) */
.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, /* メーカー/レーベルリンク */
.video-custom-info p:nth-child(5) a { /* リリース日リンク */
    color: #0073aa;
}

/* ----------------------------------------------------
 * ★★ ページネーションのサイズ調整と中央寄せ (既存/維持) ★★
 * ---------------------------------------------------- */
.site-main > nav.pagination {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 20px; 
    font-size: 0.85em; 
    line-height: 1.2;
}

.site-main > nav.pagination .nav-links .page-numbers {
    display: inline-flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    width: 30px; 
    height: 30px; 
    line-height: 1 !important; 
    padding: 0 !important; 
    margin: 0 1px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.site-main > nav.pagination .nav-links .current {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    line-height: 1 !important; 
    width: 30px; 
    height: 30px;
    padding: 0 !important;
    border: 1px solid #0073aa; 
    background-color: #e5f5ff; 
}

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

@media (max-width: 767px) {
    
    /* 💡 actress.cssに合わせて中央揃えにする */
    .site-main h1 {
        text-align: center;
    }
    
    /* 💡 actress.cssに合わせて画像ラッパーを中央に寄せる */
    .actor-profile-image-wrapper {
        text-align: center; 
        margin-left: auto; 
        margin-right: auto;
    }
    
    /* 💡 actress.cssに合わせて画像自体を中央寄せする */
    .actor-profile-image-wrapper .profile-image-direct {
        margin: 0 auto;
    }

    /* 💡 actress.cssに合わせて作品数を中央寄せにする */
    .actor-post-count {
        text-align: center; 
        margin-bottom: 0; 
    }
    
    /* 💡 actress.cssに合わせて直リンク画像も 96x96px に固定 */
    .profile-image-direct {
        width: 96px; 
        height: 96px; 
    }
    
    /* 💡 actress.cssに合わせてプロフィールアコーディオン全体を中央表示にする */
    .actor-profile-accordion {
        text-align: center; 
        margin-bottom: 15px;
    }
    
    /* 💡 actress.cssに合わせてsummary (見出し) を中央表示にする */
    .actor-profile-accordion summary {
        display: inline-block; 
        text-align: left; 
        padding: 10px 15px; 
        margin: 0 auto; 
        list-style: none;
        position: relative;
        transform: none; /* transformを削除 */
    }
    
    /* 💡 actress.cssに合わせて::after要素で記号を右側に表示し、開閉に合わせて回転させる */
    .actor-profile-accordion summary::after {
        content: "⌵"; 
        font-weight: bold;
        font-size: 0.9em; 
        color: #0073aa;
        margin-left: 5px; 
        display: inline-block;
        transition: transform 0.2s; 
        transform: rotate(0deg);
        transform-origin: center;
    }

    /* 💡 actress.cssに合わせてdetailsが開いている時のマークを上向きに調整 */
    .actor-profile-accordion details[open] summary::after {
        content: "⌵"; 
        transform: rotate(180deg); 
    }

    /* 💡 actress.cssに合わせてプロフィール内容を左寄せに戻す */
    .actor-profile-accordion .profile-content {
        text-align: left;
        margin-left: 15px;
        margin-right: 15px;
    }

    /* 💡 actress.cssに合わせてプロフィール項目の見出しの幅をリセットし、横並びに戻す */
    .actor-profile-accordion .profile-content strong {
        display: inline-block;
        width: 100px;
        text-align: left;
        margin: 0 5px 0 0;
    }

    /* 💡 actress.cssに合わせてプロフィール項目の値も左寄せに戻す */
    .actor-profile-accordion .profile-content p {
        text-align: left;
    }
    
    /* 💡 actress.cssに合わせてモバイル表示時は区切り線の上下余白を減らす */
    .profile-separator {
        margin: 15px 0;
    }
    
    /* ---------------------------------------------------- */
    /* 以下、動画一覧のモバイルレイアウト (既存/維持) */
    /* ---------------------------------------------------- */
    
    /* 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%; 
        overflow: hidden; 
        background-color: #fff; 
    }

    /* 5. サムネイル画像自体を比率コンテナ内に収める */
    .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;
        text-align: left;
        margin-left: -5px; 
        margin-right: -5px;
    }

    .site-main > nav.pagination .nav-links .page-numbers {
        line-height: 1 !important;
    }

    .site-main > nav.pagination .nav-links .current {
        line-height: 1 !important;
    }
}