/* ==========================================================================
   記事一覧カード

   JIN の記事一覧構造（basic スタイル）:
     .post-list                    グリッドコンテナ
       article.post-list-item      カード1枚
         a.post-list-link          クリッカブルな全面リンク
           .post-list-inner        内部フレックスコンテナ（横並び）
             .post-list-thumb      サムネイル（カテゴリータグも内包）
               span.post-list-cat  カテゴリーバッジ
               img
             .post-list-meta       テキスト情報エリア
               h2.post-list-title  記事タイトル
               span.post-list-date 公開日
               span.writer         著者名
               span.post-list-desc 抜粋（PC のみ）

   magazine スタイルも同じクラスを使うため、同じスタイルで統一できる。
   ========================================================================== */

/* --- 記事一覧グリッド --- */

/* basicstyle: 縦並びリスト */
.post-list.basicstyle {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

/* magazinestyle: 2カラムグリッド */
.post-list.magazinestyle {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   16px;
}

/* --- カード本体 --- */

.post-list-item {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    overflow:         hidden;

    /* ホバー時に transform を使うため、GPU 合成層を事前に作る */
    will-change: transform;

    transition:
        border-color var(--transition-base),
        box-shadow   var(--transition-base),
        transform    var(--transition-base);
}

.post-list-item:hover {
    border-color: var(--color-primary);
    box-shadow:   var(--shadow-glow);
    /* 2px 浮き上がる動き: 控えめだが「インタラクティブ感」を十分に伝える */
    transform:    translateY(-2px);
}

/* --- カードリンク全体 --- */

.post-list-link {
    display:         block;
    color:           inherit;
    text-decoration: none;
}

/* a:hover の opacity 変化をカード単位で打ち消す（カード全体で制御するため） */
.post-list-link:hover {
    opacity: 1;
}

/* --- カード内レイアウト（横並び） --- */

.post-list-inner {
    display: flex;
}

/* --- サムネイル --- */

.post-list-thumb {
    position:    relative;
    overflow:    hidden; /* scale 時に枠からはみ出さないようにクリップ */
    flex-shrink: 0;      /* メタエリアが長くてもサムネイルが潰れない */
    width:       160px;
    min-height:  120px;
}

.post-list-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover; /* アスペクト比を保ちつつ領域を埋める */

    transition: transform var(--transition-base);
}

/* ホバー時に画像を軽く拡大してインタラクティブ感を演出 */
.post-list-item:hover .post-list-thumb img {
    transform: scale(1.05);
}

/* --- カテゴリータグ --- */

/* JIN カスタマイザーが `.post-list-mag .post-list-cat, .post-list .post-list-cat { background-color: #ffcd44 !important; }`
   などを注入する。詳細度 (0,2,0) で !important のため、ID セレクタで (1,1,0) + !important にして上回る。 */
#main-contents .post-list-cat {
    background-color: var(--color-primary) !important;
    color:            #0d1117 !important;
}

.post-list-cat {
    position:         absolute;
    top:              8px;
    left:             8px;
    background-color: var(--color-primary);
    color:            #0d1117; /* 明るい青背景 + 濃い文字でコントラスト確保 */
    font-size:        0.7em;
    font-weight:      700;
    padding:          3px 8px;
    border-radius:    var(--radius-tag);
    line-height:      1.4;
    z-index:          1;

    /* タグは複数行にならないよう制限 */
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     calc(100% - 16px);
}

.post-list-cat a {
    color:           inherit;
    text-decoration: none;
}

/* --- メタ情報エリア --- */

.post-list-meta {
    padding:        16px;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    flex:           1;
    min-width:      0; /* フレックス内でテキストがはみ出す問題を防ぐ */
}

/* --- 記事タイトル --- */

/* JIN カスタマイザーが `.post-list-title { color: #3b4675 !important; }` (0,1,0) を注入するため
   ID セレクタ付きで (1,1,0) + !important に上回る */
#main-contents .post-list-title {
    color: var(--color-text) !important;
}

#main-contents .post-list-item:hover .post-list-title {
    color: var(--color-primary) !important;
}

.post-list-title {
    color:       var(--color-text);
    font-size:   0.95em;
    font-weight: 700;
    line-height: 1.5;
    margin:      0;

    /* 3行以上は省略（一覧は読み飛ばしやすさが重要なため） */
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;

    transition: color var(--transition-base);
}

.post-list-item:hover .post-list-title {
    color: var(--color-primary);
}

/* --- 日付・著者名 --- */

.post-list-date,
.post-list-item .writer,
.post-list-item .author-name {
    color:     var(--color-text-muted);
    font-size: 0.75em;
}

/* --- 抜粋（PC のみ表示） --- */

.post-list-desc {
    color:       var(--color-text-muted);
    font-size:   0.8em;
    line-height: 1.6;

    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* --- magazine スタイル調整 --- */

/* magazine スタイルはサムネイルを上部に配置 */
.post-list.magazinestyle .post-list-inner {
    flex-direction: column;
}

.post-list.magazinestyle .post-list-thumb {
    width:      100%;
    height:     180px;
    min-height: unset;
}

/* magazine でカテゴリータグをメタエリア内に表示する場合 */
.post-list.magazinestyle .post-list-cat {
    position: static;
    display:  inline-block;
    margin:   0;
}

/* --- ページネーション ---

   JIN の実際の HTML 構造:
     section.pager-top
       ul.pagination.ef
         li.current > a > span   (現在ページ)
         li > a.inactive > span  (他ページ)
         li.spancount > span     (省略記号 ...)
         li.last > a > span      (最終ページ)
*/

.pager-top {
    margin-top:  40px;
    text-align:  center;
}

/* ul の余白・装飾をリセット */
.pager-top ul.pagination {
    display:         flex;
    justify-content: center;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             6px;
    list-style:      none;
    margin:          0;
    padding:         0;
}

/* 各ページリンク（li > a, li > span） */
.pager-top .pagination li > a,
.pager-top .pagination li > span {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        40px;
    height:           40px;
    padding:          0 12px;
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-tag);
    color:            var(--color-text-muted) !important; /* カスタマイザー上書き対策 */
    font-size:        0.9em;
    transition:
        border-color     var(--transition-base),
        color            var(--transition-base),
        background-color var(--transition-base);
}

.pager-top .pagination li > a:hover {
    border-color:     var(--color-primary);
    color:            var(--color-primary) !important;
    background-color: rgba(88, 166, 255, 0.08);
    opacity:          1;
}

/* 現在ページ (li.current > a)
   JIN: `.pagination li.current a { background-color: #3b4675 !important; border-color: #3b4675 !important; }` */
.pager-top .pagination li.current > a,
.pager-top .pagination li.current > span {
    border-color:     var(--color-primary) !important;
    color:            var(--color-primary) !important;
    background-color: rgba(88, 166, 255, 0.12) !important;
}

/* 省略記号 (li.spancount) */
.pager-top .pagination li.spancount > span {
    border: none;
    color:  var(--color-text-muted) !important;
}

/* --- トップページのタブ（カテゴリー切り替え） --- */

.tabBtn-mag {
    display:    flex;
    gap:        8px;
    flex-wrap:  wrap;
    padding:    0 0 16px;
    margin:     0;
    list-style: none;
}

.tabBtn-mag label {
    display:          inline-block;
    padding:          6px 14px;
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-tag);
    color:            var(--color-text-muted);
    font-size:        0.85em;
    cursor:           pointer;
    transition:
        border-color     var(--transition-base),
        color            var(--transition-base),
        background-color var(--transition-base);
}

/* ラジオボタン選択時のアクティブタブ */
input[name="switch"]:checked + label,
.tabBtn-mag label:hover {
    border-color:     var(--color-primary);
    color:            var(--color-primary);
    background-color: rgba(88, 166, 255, 0.08);
}

/* ラジオボタン自体は非表示 */
input[name="switch"] {
    display: none;
}