/*
 * taxonomy-actress.css
 * taxonomy-actress.php (タームアーカイブページ) 専用のスタイル
 */

/* ----------------------------------------------------
 * ★★ メインタイトル (h1) のサイズ調整 ★★
 * ---------------------------------------------------- */
.site-main h1 {
    /* 💡 修正: アイテム欄のタイトル (1.1em) より少し大きく 1.3em に変更 */
    font-size: 1.3em; 
    margin-top: 0;
    margin-bottom: 5px; /* 作品数Pタグの上に適切な余白 */
    /* 💡 PC/デフォルトは左揃えのまま */
    text-align: left;
}

/* =================================================== */
/* 💡 修正: 1カラムレイアウト関連 */
/* =================================================== */

/* 💡 新規: プロフィール画像のラッパー (中央寄せと余白用) */
.actress-profile-image-wrapper {
    /* 💡 修正済み: 上の余白を15pxから7pxに短縮。下の余白は0px。 */
    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; /* 画像がはみ出さないように調整 */
}
/* 画像がない場合のプレースホルダー（削除されましたが、CSSは念のため残します） */
.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;
}


/* ----------------------------------------------------
 * ★★ 作品数表示のスタイル ★★
 * ---------------------------------------------------- */
.actress-post-count { /* クラス名を actress-post-count に設定 */
    margin-top: 5px; /* h1の下に適切な余白 */
    /* 💡 修正: アイテム欄の女優名/メーカー名と同じサイズ (1.0em) に変更 */
    margin-bottom: 0; 
    font-size: 1.0em; 
    color: #333;    
    text-align: left; /* PCでは左寄せ */
    font-weight: normal; 
}


/* ----------------------------------------------------
 * ★★ 女優プロフィール アコーディオンのスタイル (1カラム用) ★★
 * ---------------------------------------------------- */
.actress-profile-accordion {
    /* 1カラム化したため、次のコンテンツ(動画一覧)との間に余白を設定 */
    margin-bottom: 20px; 
    /* 枠線と背景を削除 */
    border: none;
    border-radius: 0; 
    background-color: #fff; 
    padding: 0;
}

/* アコーディオンの見出し (summary) のスタイル */
.actress-profile-accordion summary {
    cursor: pointer; 
    /* 💡 修正: アイテム欄の女優名/メーカー名と同じサイズ (1.0em) に変更 */
    font-size: 1.0em; 
    font-weight: normal; 
    color: #0073aa; 
    padding: 10px 15px; 
    
    /* 💡 PC/デフォルト: デフォルトのマーカーを非表示にする */
    list-style: none;
    
    /* 💡 PCでのみ、全角1文字分左に移動 */
    position: relative; 
    transform: translateX(-1em); 
}

/* 💡 PC/デフォルトの記号を右側に表示（格納時 = 下向き「⌵」） */
.actress-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/デフォルトの記号を展開時に回転させる（展開時 = 上向き「⌵」） */
.actress-profile-accordion details[open] summary::after {
    content: "⌵"; 
    
    /* 💡 展開時は180度回転させて上向きに見せる */
    transform: rotate(180deg); 
}


/* アコーディオン内のコンテンツエリアのスタイル */
.actress-profile-accordion .profile-content {
    padding: 10px 15px 15px 15px; /* 上下左右のパディング */
    border-top: none; 
    background-color: #fff; 
}

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

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


/* ----------------------------------------------------
 * ★★ 区切り線のスタイル (新規追加) ★★
 * ---------------------------------------------------- */
.profile-separator {
    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;
    /* アイテム欄のメタ情報（女優名、メーカー名など） */
}


/* ----------------------------------------------------
 * ★★ 文字色とホバー効果の設定 (既存) ★★
 * ---------------------------------------------------- */
.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, 
.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) {
    
    /* 💡 新規: メインタイトルを中央揃えにする */
    .site-main h1 {
        text-align: center;
    }
    
    /* 💡 修正: 画像を中央に寄せる */
    .actress-profile-image-wrapper {
        text-align: center; 
        margin-left: auto; 
        margin-right: auto;
    }
    
    /* 💡 追加: 画像自体（display: block;要素）を中央寄せする */
    .actress-profile-image-wrapper .profile-image-direct {
        margin: 0 auto;
    }

    /* 💡 修正: 作品数を中央寄せにする */
    .actress-post-count {
        text-align: center; 
        margin-bottom: 0; 
    }
    
    /* 💡 修正: 直リンク画像も 96x96px に固定 (既存) */
    .profile-image-direct {
        width: 96px; 
        height: 96px; 
    }
    
    /* 💡 修正: プロフィールアコーディオン全体を中央表示にする */
    .actress-profile-accordion {
        text-align: center; 
        margin-bottom: 15px;
    }
    
    /* 💡 修正: summary (見出し: プロフィール ⌵) を中央表示にする */
    .actress-profile-accordion summary {
        display: inline-block; 
        text-align: left; 
        
        /* 記号が右側に来るため、左側のパディングは不要 */
        padding: 10px 15px; 
        
        margin: 0 auto; 
        list-style: none; /* デフォルトのマーカーを非表示 */
        position: relative;
        
        /* 💡 transformを削除し、中央寄せを維持 */
        transform: none;
    }
    
    /* 💡 修正: ::after要素で記号を右側に表示し、開閉に合わせて回転させる */
    .actress-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;
    }

    /* 💡 修正: detailsが開いている時（展開時）のマークを上向きに調整 */
    .actress-profile-accordion details[open] summary::after {
        content: "⌵"; /* 統一: マークは「⌵」のまま */
        
        /* 💡 展開時は180度回転させて上向きに見せる */
        transform: rotate(180deg); 
    }

    /* 💡 修正: プロフィール内容を中央寄せにする (左寄せに変更) */
    .actress-profile-accordion .profile-content {
        /* text-align: center; を削除または left に変更 */
        text-align: left;
        margin-left: 15px;
        margin-right: 15px;
    }

    /* 💡 修正: プロフィール項目の見出しの幅をリセットし、横並びに戻す */
    .actress-profile-accordion .profile-content strong {
        display: inline-block; /* 💡 修正: 横並びに戻す */
        width: 100px; /* 💡 PCと同じ幅を再設定 */
        text-align: left; /* 💡 左揃えに戻す */
        margin: 0 5px 0 0; /* 💡 PCと同じマージンに戻す */
    }

    /* 💡 修正: プロフィール項目の値も左寄せに戻す */
    .actress-profile-accordion .profile-content p {
        text-align: left; /* 💡 修正: 左揃えに戻す */
    }
    
    /* 💡 追加: モバイル表示時は区切り線の上下余白を減らす */
    .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;
    }
}