/* app/assets/styles/reviews.css */

/* === reviews index: hero header === */
.reviews-index-header {
    padding: 1.1rem 1.2rem 1.2rem;
    margin-bottom: 1.2rem;
    border-radius: .95rem;
    border: 1px solid #fed7aa;
    background: radial-gradient(circle at top left, #ffedd5 0%, #fff7ed 55%, #ffffff 100%);
    box-shadow: 0 12px 32px rgba(248, 113, 22, .14);
}

.reviews-index-headline {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.reviews-index-text {
    min-width: 0;
}

.reviews-index-kicker {
    margin: 0 0 .2rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #c2410c;
    background: rgba(255, 237, 213, .9);
    border: 1px solid rgba(253, 186, 116, .9);
}

.reviews-index-kicker-dot {
    width: .35rem;
    height: .35rem;
    border-radius: 999px;
    background: #f97316;
}

.reviews-index-title {
    margin: 0 0 .2rem;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: #111827;
}

@media (min-width: 992px) {
    .reviews-index-title {
        font-size: 1.45rem;
    }
}

.reviews-index-sub {
    margin: 0;
    font-size: .86rem;
    color: #4b5563;
}

/* ▼ 表示期間 / 表示順 / カテゴリ 行 共通 */
.reviews-index-meta {
    margin-top: .55rem;
    font-size: .78rem;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    /* ★ 折り返し前提に変更 */
    gap: .35rem;
    align-items: center;
}

/* カテゴリ行専用 */
.reviews-index-meta--categories {
    margin-top: .6rem;
}

/* === pill 共通っぽい見た目（TCD風） === */
.range-pill,
.category-pill {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    border: 1px solid #e5e7eb;
    color: #374151;
    background: linear-gradient(135deg, #ffffff, #f9fafb);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(148, 163, 184, .15);
    transition:
        background .12s ease-out,
        box-shadow .12s ease-out,
        transform .12s ease-out,
        color .12s ease-out;
}

.range-pill:hover,
.category-pill:hover {
    text-decoration: none;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    box-shadow: 0 4px 10px rgba(148, 163, 184, .35);
    transform: translateY(-1px);
}

/* ▼ 期間フィルタ用ピル */
.range-pill--active {
    border-color: #f97316;
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    color: #b45309;
    box-shadow: 0 4px 12px rgba(248, 113, 22, .35);
}

/* ▼ カテゴリピル */
.category-pill {
    padding: .25rem .8rem;
}

.category-pill--active {
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    border-color: #fdba74;
    color: #c2410c;
    box-shadow: 0 4px 12px rgba(248, 113, 22, .32);
}

/* ▼ カテゴリと表示期間の間の破線（セパレータ） */
.reviews-index-nav {
    margin-top: .4rem;
    padding-top: .35rem;
    border-top: 1px dashed rgba(248, 113, 22, .35);
}

/* スマホ調整 */
@media (max-width: 575.98px) {
    .reviews-index-header {
        padding: .95rem .9rem 1.1rem;
    }

    .reviews-index-headline {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .reviews-index-text {
        width: 100%;
    }

    .reviews-index-title {
        font-size: 1.15rem;
    }

    .reviews-index-sub {
        font-size: .8rem;
    }

    .reviews-index-meta {
        font-size: .72rem;
    }

    .category-pill {
        font-size: .78rem;
        padding: .2rem .65rem;
        margin-bottom: .2rem;
    }
}

/* === cards / container 共通（TCDっぽいカードシェル） === */
.review-list-card,
.review-body,
.form-card,
.ranking-card {
    background: #ffffff;
    border-radius: .9rem;
    border: 1px solid #e5e7eb;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, .06),
        0 1px 0 rgba(255, 255, 255, .9) inset;
    position: relative;
    overflow: hidden;
}

.review-body {
    margin-top: .5rem;
}

/* ▼ カード上部アクセントライン（TCD風グラデーション） */
.review-list-card::before,
.review-body::before,
.form-card::before,
.ranking-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #f97316, #fb923c, #fed7aa);
    opacity: .98;
    pointer-events: none;
}

/* === review cards (index main grid) === */
/* グリッドのカラムとカード間隔をゆったりめに */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    column-gap: 2rem;
    row-gap: 2rem;
}

/* 一覧カード自体は「サムネイルのみ」のブロックにしておく */
.review-card {
    position: relative;
    padding: 0;
    border-top: none;
    border-radius: .9rem;
    overflow: hidden;
    transform: translateZ(0);
    /* アンチエイリアス対策 */
    transition:
        background .12s ease-out,
        transform .12s ease-out,
        box-shadow .12s ease-out;
}

/* 先頭の記事だけ線を消す（border-top は使っていないが念のため） */
.review-card:first-child {
    border-top: none;
}

/* hoverで少し浮かせる（TCD風リスト） */
.review-card:hover {
    background: transparent;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(148, 163, 184, .28);
}

/* 1〜3位用：PCでは2カラムぶち抜き＋サムネ一回り小さく */
.review-card--large {
    grid-column: span 2;
}

/* サムネイル枠（全クリックエリア） */
.review-card-thumb-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.review-card-thumb-link:hover {
    text-decoration: none;
}

/* サムネイルの枠そのもの */
.review-card-thumb-wrap {
    position: relative;
    width: 100%;
    border-radius: .9rem;
    overflow: hidden;
}

/* PC時：TOP3サムネは横幅を少し抑えて中央寄せ（サイズ一回り小さく） */
@media (min-width: 992px) {
    .review-card--large .review-card-thumb-wrap {
        max-width: 520px;
        margin: 0 auto;
    }
}

/* サムネイル画像：大きめ＋16:9寄りで全面表示 */
.review-card-thumb {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .18);
    transition:
        transform .16s ease-out,
        box-shadow .16s ease-out,
        filter .12s ease-out;
}

/* サムネ hover 時の強調 */
.review-card-thumb-wrap:hover .review-card-thumb {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .35);
    filter: brightness(1.03);
}

/* 黒透過オーバーレイ（タイトル・メタ情報・統計） */
.review-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: .6rem .7rem .7rem;
    /* 下側だけにうっすらかかるライトなグラデーション */
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.45) 22%,
            rgba(0, 0, 0, 0.18) 40%,
            rgba(0, 0, 0, 0.0) 70%);
    color: #f9fafb;
    z-index: 1;
}

/* 上段：チャンネル名／公開日 */
.review-card-overlay-top {
    font-size: .75rem;
    opacity: .95;
    margin-bottom: .2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* チャンネル名＋公開日を黒背景・白文字のピルに統一 */
.review-card-overlay-top span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .08rem .45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.85);
    color: #f9fafb;
}

/* 中段：タイトル（indexでは非表示だが、再利用用に残しておく） */
.review-card-overlay-title {
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: .35rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}

/* 下段：再生数・高評価 */
.review-card-overlay-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .4rem;
    font-size: .72rem;
}

/* オーバーレイ内バッジ（Bootstrapの .badge を上書き） */
.review-card-overlay-bottom .badge {
    border-radius: 999px;
    padding: .18rem .55rem;
    background: rgba(15, 23, 42, .85);
    color: #f9fafb;
    font-weight: 600;
    border: 1px solid rgba(148, 163, 184, .6);
}

/* ランクバッジ（サムネ左上・ギリギリ寄せ） */
.rank-badge {
    position: absolute;
    top: .15rem;
    left: .15rem;
    padding: .05rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: #fefce8;
    background: linear-gradient(135deg, #f97316, #ec4899);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
    z-index: 2;
}

/* 旧 .review-card-body / .review-card-meta / .review-card-stats は
   今回のオーバーレイ用にのみ利用 */
.review-card-body {
    display: none;
}

.review-card-meta {
    font-size: .78rem;
    color: #6b7280;
}

.review-card-stats {
    margin-top: .25rem;
    font-size: .78rem;
    color: #4b5563;
    display: flex;
    gap: .75rem;
}

/* スマホ時は少しコンパクトに＋前後に余白を追加 */
@media (max-width: 575.98px) {
    .review-card-thumb-wrap {
        border-radius: .85rem;
    }

    .review-card-overlay {
        padding: .55rem .6rem .6rem;
    }

    .review-card-overlay-title {
        font-size: .9rem;
    }

    .review-card-overlay-top,
    .review-card-overlay-bottom {
        font-size: .7rem;
    }

    .rank-badge {
        top: .12rem;
        left: .12rem;
        font-size: .7rem;
    }

    /* スマホでは TOP1〜3 も通常カードと同じ 1列＋全幅 */
    .review-card--large {
        grid-column: span 1;
    }

    .review-card--large .review-card-thumb-wrap {
        max-width: 100%;
    }

    /* ★ スマホ時はカード群の「前後」にもゆとりを持たせる */
    .review-grid {
        row-gap: 2.4rem;
        /* カード同士の間隔を少し広めに */
        padding-top: .6rem;
        /* 最初のカードの上側余白 */
        padding-bottom: 1.2rem;
        /* 最後のカードの下側余白 */
    }
}

/* === ranking sidebar / section boxes === */
.ranking-card {
    padding: .9rem .9rem .8rem;
}

.ranking-title {
    margin: 0 0 .6rem;
    padding-bottom: .25rem;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 1px solid rgba(148, 163, 184, .45);
}

.ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ranking-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .35rem 0;
    border-top: 1px dashed #e5e7eb;
}

.ranking-item:first-child {
    border-top: none;
}

.ranking-num {
    width: 1.5rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    color: #f97316;
}

.ranking-thumb img {
    width: 60px;
    height: 34px;
    object-fit: cover;
    border-radius: .4rem;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .2);
}

.ranking-body {
    flex: 1;
}

.ranking-item-title {
    font-size: .8rem;
    margin: 0 0 .15rem;
}

.ranking-meta {
    font-size: .72rem;
    color: #6b7280;
}

/* スマホ時のランキング調整 */
@media (max-width: 575.98px) {
    .ranking-card {
        padding: .7rem .8rem;
    }

    .ranking-thumb img {
        width: 72px;
        height: 40px;
    }

    .ranking-item-title {
        font-size: .78rem;
    }

    .ranking-meta {
        font-size: .7rem;
    }
}

/* ▼ アクセスランキング専用：サムネ全面オーバーレイ版 */
.ranking-list--thumb-overlay .ranking-item {
    display: block;
    border-top: none;
    padding: .35rem 0;
}

.ranking-list--thumb-overlay .ranking-thumb {
    width: 100%;
}

/* 既存の 60x34 指定を上書き */
.ranking-list--thumb-overlay .ranking-thumb img {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
}

.ranking-thumb-wrap {
    position: relative;
    border-radius: .85rem;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .22);
}

/* サイドバー用コンパクトオーバーレイ */
.review-card-overlay--sm {
    padding: .45rem .55rem .55rem;
}

.review-card-overlay--sm .review-card-overlay-title {
    font-size: .82rem;
    margin-bottom: .2rem;
}

.review-card-overlay--sm .review-card-overlay-bottom .badge {
    font-size: .7rem;
    padding: .12rem .5rem;
}

/* ランクバッジ（サイドバー用小さめ） */
.rank-badge--sm {
    font-size: .68rem;
    padding: .03rem .45rem;
}

@media (max-width: 575.98px) {
    .ranking-list--thumb-overlay .ranking-item {
        padding: .25rem 0;
    }

    .ranking-thumb-wrap {
        border-radius: .75rem;
    }
}

/* ▼ show: 同じカテゴリの他のレビュー用グリッド */
.ranking-list--related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem .75rem;
    margin: 0;
    padding: 0;
}

.ranking-list--related-grid .ranking-item {
    display: block;
    border-top: none;
    padding: 0;
}

.ranking-list--related-grid .ranking-thumb {
    width: 100%;
    margin: 0 0 .35rem;
}

.ranking-list--related-grid .ranking-thumb img {
    width: 100%;
    height: auto;
    border-radius: .7rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .16);
}

.ranking-list--related-grid .ranking-body {
    padding: 0 .05rem;
}

.ranking-list--related-grid .ranking-item-title {
    font-size: .82rem;
}

/* === review show: header === */
.review-header {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: .5rem;
}

/* === サムネ枠共通 === */
.thumbnail-bordered {
    border: 3px solid rgba(255, 153, 0, 0.8);
    border-radius: 0.5rem;
    transition: box-shadow 0.2s ease, transform 0.16s ease-out;
}

.thumbnail-bordered:hover {
    box-shadow: 0 0 12px rgba(255, 153, 0, 0.5);
    transform: translateY(-1px);
}

/* === hashtag links === */
.hashtag-link {
    display: inline-block;
    margin: 0 .15rem .15rem 0;
    padding: .1rem .45rem;
    font-size: .75rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
}

/* === breadcrumbs（show専用） === */
.breadcrumbs-back {
    margin-bottom: .35rem;
}

/* 「← 一覧に戻る」ボタン */
.bc-back-link {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .26rem .85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ea580c, #f59e0b);
    color: #ffffff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(234, 88, 12, .28);
    transition:
        transform .12s ease-out,
        box-shadow .12s ease-out,
        filter .12s ease-out;
}

.bc-back-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 12px 30px rgba(234, 88, 12, .38);
}

.bc-back-link:active {
    transform: translateY(0);
}

/* パンくず本体（カテゴリ > タイトル） */
.breadcrumbs-line {
    display: flex;
    gap: .35rem;
    align-items: center;
    font-size: .78rem;
    line-height: 1.35;
    padding: .38rem .65rem;
    background: rgba(255, 255, 255, .9);
    border-radius: .82rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* スクロールバー非表示 */
.breadcrumbs-line::-webkit-scrollbar {
    display: none;
}

.breadcrumbs-line {
    scrollbar-width: none;
}

/* 各リンク */
.bc-link {
    color: #6b7280;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.bc-link:hover {
    color: #374151;
    border-color: #ddd;
}

/* 現在ページ */
.bc-current {
    font-weight: 800;
    color: #374151;
}

/* 区切り（>） */
.bc-sep {
    opacity: .46;
    margin: 0 .1rem;
}

/* モバイル調整 */
@media (max-width: 575.98px) {
    .bc-back-link {
        font-size: .78rem;
        padding: .22rem .75rem;
    }

    .breadcrumbs-line {
        font-size: .74rem;
        padding: .30rem .55rem;
        border-radius: .7rem;
    }
}

/* === review show: inline meta (channel / date / stats) === */
.review-meta-inline {
    font-size: .8rem;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

@media (max-width: 575.98px) {
    .review-meta-inline {
        font-size: .76rem;
        gap: .5rem;
    }
}

/* Markdown の **強調** を青系にする */
.review-body strong,
.review-body b {
    color: #1a51c7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* カテゴリ説明（SEOリード）のスタイル */
.category-lead {
    background: #f9fafb;
    /* ほんのりグレーで浮かない */
    border-left: 4px solid #f59e0b;
    /* Ytnavi のブランドカラー系統（オレンジ） */
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.category-lead p {
    margin-bottom: .4rem;
}

.category-lead .fw-bold {
    font-size: 1rem;
    color: #1f2937;
    /* 少し濃いグレーで読みやすく */
}

.category-lead .text-muted {
    color: #4b5563 !important;
    /* 薄すぎたので少し濃く */
    line-height: 1.55;
    font-size: .9rem;
}

/* スマホのときはアクセスランキングを閉じない（常に開いておく） */
@media (max-width: 575.98px) {

    /* collapse の「箱」そのものを常に表示 */
    #indexRankingCollapse.collapse,
    #indexRankingCollapse.collapsing {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    /* スマホでは「アクセスランキングを開く」ボタン自体を消す */
    button[data-bs-target="#indexRankingCollapse"] {
        display: none !important;
    }
}