/* =========================================
   poster-layout.css - ポスター表示用の上書き設定
   ========================================= */



/* =========================================
   ポスターモード時の上書きレイアウト
   ========================================= */

/* ポスターモードの時は、表示枚数を増やす（例：6枚 → 8枚） */
body.poster-mode {
    --display-cards: 8; 
}

/* 画面が狭い時（ノートPC）は 7枚にするなど */
@media (max-width: 1950px) {
    body.poster-mode {
        --display-cards: 7 !important;
    }
}

/* 対象のカードを強制的に 2:3 に変更 */
/* ※続けて観る(resume-card) や マイメディア(library-card) は横長を維持するため除外します */
body.poster-mode .poster-card {
    aspect-ratio: 2 / 3 !important;
}

/* ポスターモードの時は、画像をポスター用（Primary）に切り替える演出を追加したい場合はJS側で対応が必要ですが、
   現状の object-fit: cover; によって、横長画像の中央部分が綺麗に切り取られてポスター風に表示されます */

/* =========================================
   ポスター画像のアスペクト比統一 (2:3)
   ========================================= */

/* 1. 画像を包む「枠 (wrapper)」の比率を固定する */
body.poster-mode .poster-card .thumb-wrapper,
body.poster-mode .resume-card .thumb-wrapper {
    width: 100%;
    /* ここで縦横比を「2:3」に強制固定します */
    aspect-ratio: 2 / 3 !important;
    /* はみ出た画像は見えなくする */
    overflow: hidden;
    /* 念のため高さをリセット */
    height: auto !important;
    /* 角丸などを維持 */
    border-radius: 8px;
}

/* 2. 枠の中にある「画像 (img)」の表示方法を指定する */
body.poster-mode .poster-card .thumb-wrapper img,
body.poster-mode .resume-card .thumb-wrapper img {
    width: 100%;
    height: 100%;
    /* ★最重要：縦横比を維持したまま、枠いっぱいに広げて隙間を埋める（はみ出た部分はトリミングされる） */
    object-fit: cover !important;
    /* トリミングする際、画像の「上・中央」を優先して表示する（顔が切れにくくなる） */
    object-position: center top !important;
}

/* （任意）続けて観るの進捗バーの位置調整 */
body.poster-mode .resume-card .progress-container {
    bottom: 13px !important; /* 下からの距離。20px〜30px程度が綺麗に見えます */
    
    /* 横幅や左右の余白を微調整したい場合は以下も調整可能です */
    width: calc(100% - 20px) !important;
    left: 10px !important;
}

/* =========================================
   ポスターモード時のハンドル（矢印）高さ調整
   ========================================= */

/* ポスターモードの時だけ、ハンドルの高さを枠いっぱいに広げる */






/* 2. Jellyfin標準の左スクロールボタンが被る場合も非表示 */
#popularity-grid ~ .emby-scrollbuttons-left,
#popularity-grid ~ .emby-scrollbuttons-button.left {
    display: none !important;
}

/* 3. 「ちだのおすすめ」専用の戻るハンドルを最前面に確保 */
#recommend-left-reset-handle {
    z-index: 9999 !important;
}
















/* =========================================
   ポスターモード：サムネと完全に縁を切る独立スタイル
   ========================================= */

/* =========================================
   ハンドルの影消し ＆ グラデーション（最終確定版）
   ========================================= */
/* =========================================
   ポスターモード：ハンドルの完全制御（最優先版）
   ========================================= */

/* 1. 通常状態：マウスが乗るまで透明 */
body.poster-mode .handle {
    height: 100% !important;
    top: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    z-index: 50 !important;
    box-shadow: none !important;
}

/* 2. マウスが乗った時に表示する命令 */
body.poster-mode .slider-wrapper:hover .handle {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 3. ★最重要：端にいる時は、ホバーの「表示しろ」という命令を完全にねじ伏せる */
/* 「.slider-wrapper:hover」を含めた記述にすることで、優先順位を最大化します */
body.poster-mode .slider-wrapper:hover .handle.is-at-edge,
body.poster-mode .handle.is-at-edge {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    /* 再出現を防ぐため、この時はアニメーションを無効化します */
    transition: none !important; 
}
body.poster-mode .slider-wrapper.is-scrolling .handle:not(.is-at-edge) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important; 
}
body.poster-mode.disable-hover .slider-wrapper:hover .handle:not(.is-at-edge) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; 
}
/* 4. スクロール中の表示維持 */
body.poster-mode.disable-hover .slider-wrapper:hover .handle:not(.is-at-edge) {
    opacity: 1 !important;
    visibility: visible !important;
    /* クリックもすぐに受け付ける */
    pointer-events: auto !important;
}

/* 5. グラデーション（pointer-events: auto に修正） */
body.poster-mode .handle-left {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, transparent 100%) !important;
    left: 0 !important;
    pointer-events: auto !important;
}

body.poster-mode .handle-right {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, transparent 100%) !important;
    right: 0 !important;
    pointer-events: auto !important;
}