/* Reels CPT アーカイブ (/reels/ およびトップページ) — 縦スワイプフィード */
/* margin/padding のリセット・ベースフォントは base.css 側で共通定義済み */

html, body {
    height: 100%;
    background: linear-gradient(180deg, #4D4D4D 0%, #1A1A1C 100%);
    overflow: hidden;
}

.kajima-swiper {
    width: 100vw;
    height: 100vh;
    height: 100dvh; 
}
.kajima-swiper .swiper-slide {
    position: relative;
    display: flex;
    /* 縦長/横長どちらのメディアも中央配置（object-fit:containで絵柄自体もボックス中央に置く）。 */
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #4D4D4D 0%, #1A1A1C 100%);
    color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    /* タブヘッダー分だけ表示エリアを下げる。縦横比が画面より縦長な画像/動画は
     * object-fit:contain で画面いっぱいまで使われるため、これが無いとコンテンツ上端が
     * タブヘッダー（半透明+ぼかし）の裏に入り込んで読めなくなる。 */
    padding-top: calc(env(safe-area-inset-top, 0) + var(--tabs-height));
}

.kajima-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* 下部: キャプション */
.kajima-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0));
    color: #fff;
    z-index: var(--z-overlay);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.kajima-caption {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
    opacity: 0.95;
}

.kajima-empty {
    color: #aaa;
    padding: 2rem;
    text-align: center;
}
.kajima-empty a {
    color: #6cf;
}

/* PC専用の固定キャプション / スクロールヒント。モバイルでは非表示にし、
 * モバイル用のスライド内 .kajima-overlay をそのまま使う。 */
.kajima-caption-fixed,
.kajima-scroll-hint {
    display: none;
}

/* 管理バー表示中(.admin-bar)の調整。.admin-bar の付与条件・値の根拠は variables.css の
 * --wp-adminbar-height / --wp-adminbar-height-mobile とそのコメントを参照。
 * Reels 固有の理由: 管理バーで全画面(100vh/100dvh)が下にずれ、下端が overflow:hidden で切れるため、管理バー高さ分だけ縮める。 */
.admin-bar .kajima-swiper {
    height: calc(100vh - var(--wp-adminbar-height));
    height: calc(100dvh - var(--wp-adminbar-height));
}
@media screen and (max-width: 782px) {
    .admin-bar .kajima-swiper {
        height: calc(100vh - var(--wp-adminbar-height-mobile));
        height: calc(100dvh - var(--wp-adminbar-height-mobile));
    }
}

/* PC breakpoint (768px) — see assets/css/variables.css --bp-pc
 * スマホの動画アプリ風に、画面中央へ縦長固定幅で表示する。左右の余白は
 * html,body の background（上部で定義済みのグラデーション）がそのまま背景として見える。 */
@media (min-width: 768px) {
    .kajima-swiper {
        width: var(--layout-width-reels-pc);
        margin: 0 auto;
    }

    /* モバイル用の「画像に重ねる」キャプションはPCでは使わない（画面基準の固定キャプションに置き換える） */
    .kajima-overlay {
        display: none;
    }

    /* 画面(body)基準の左下固定キャプション。.kajima-swiper 内の要素ではなく兄弟要素なので、
     * Swiperのtransformの影響を受けず、正しく画面全体を基準にした position:fixed になる。 */
    .kajima-caption-fixed {
        display: block;
        position: fixed;
        left: 2rem;
        bottom: 2rem;
        max-width: 20rem;
        color: #fff;
        z-index: var(--z-overlay);
    }
    .kajima-caption-fixed[hidden] {
        display: none;
    }
    .kajima-caption-fixed__text {
        margin: 0;
        font-size: 1rem;
        line-height: 1.45;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .kajima-scroll-hint {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        position: fixed;
        bottom: 2rem;
        left: calc(50% + (var(--layout-width-reels-pc) / 2) + 2rem);
        color: #fff;
    }
    .kajima-scroll-hint__text {
        /* 縦書きにしつつ、文字自体は90度回転させる（縦に並べるだけでなく文字も横倒しにする） */
        writing-mode: vertical-rl;
        font-size: 1.2rem;
        font-weight: 500;
    }
    .kajima-scroll-hint__line {
        display: block;
        height: 80px;
        width: auto;
    }
}