/**
 * ホームページ (Issue #153 PR2)
 *
 * - kk-carousel: Bootstrap CDN と衝突しない命名（旧 netflix-carousel/.carousel-*）。
 *   衝突がないため、旧版にあった打ち消し用の !important 群は不要になった。
 * - 色・形はすべて global-design-system.css のトークンを使用
 *   （ライト/ダークはトークン再マップで自動追従。ページ内ダークブロックなし）。
 * - デスクトップ: 3.5枚表示の「半カードピーク」でスクロール可能性を示す。
 *   矢印・ドラッグ・キーボードは assets/js/carousel-optimization.js。
 * - モバイル: 1枚表示の swipe カルーセル＋ドット（index.php 内 JS）。
 */

.homepage {
    min-height: 100vh;
    background: transparent; /* 背景は body（--bg-page）が描く */
}

/* セクションのリズム: 箱の中の箱をやめ、余白とミンサー下線で区切る */
.homepage .content-section {
    margin-bottom: 0;
    padding: var(--space-4) 0 var(--space-3);
}

.homepage .content-section:first-child {
    padding-top: var(--space-3);
}

/* ================================
   カルーセル
   ================================ */

.kk-carousel {
    position: relative;
}

.kk-carousel__track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 14px; /* hover の持ち上がり・影の逃げ */
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 4px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* スクロールバーは隠す（ピーク・矢印・ドラッグが代替の手掛かり） */
    scrollbar-width: none;
}

.kk-carousel__track::-webkit-scrollbar {
    display: none;
}

.kk-carousel__item {
    /* 3.5枚表示: 半カードのピークが「まだ続きがある」ことを伝える */
    flex: 0 0 calc((100% - 3 * var(--space-2)) / 3.5);
    min-width: 0;
    scroll-snap-align: start;
    display: flex; /* kk-card を等高に伸ばす */
}

.kk-carousel__item .kk-card {
    width: 100%;
    position: relative;
}

/* カード内の回数バッジ（画像右上に重ねる） */
.kk-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.kk-card__badge strong {
    font-size: 1.05em;
    font-weight: 800;
    margin: 0 1px;
}

/* 画像なしプレースホルダー */
.kk-card__image--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kk-card__image--empty svg {
    opacity: 0.6;
}

/* カード全体クリック時のホバー画像ズーム（さりげなく） */
.kk-card__image img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.kk-card:hover .kk-card__image img {
    transform: scale(1.05);
}

/* 抜粋は3行でクランプ */
.kk-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* フッターリンクは小さめのゴースト */
.kk-btn--small {
    font-size: 0.88rem;
    padding: 7px 18px;
}

/* ================================
   矢印・進捗（carousel-optimization.js が生成）
   ================================ */

.kk-carousel__frame {
    position: relative;
}

.kk-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--accent-strong);
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease;
    box-shadow: var(--shadow-card);
}

.kk-carousel__frame:hover .kk-carousel__arrow,
.kk-carousel__arrow:focus-visible {
    opacity: 1;
    visibility: visible;
}

.kk-carousel__arrow:hover {
    background: var(--bg-inset);
    transform: translateY(-50%) scale(1.06);
}

.kk-carousel__arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

.kk-carousel__arrow--left {
    left: -10px;
}

.kk-carousel__arrow--right {
    right: -10px;
}

.kk-carousel__arrow:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/* スクロール進捗バー */
.kk-carousel__progress {
    height: 3px;
    margin: 2px 4px 0;
    background: var(--bg-inset);
    border-radius: 2px;
    overflow: hidden;
}

.kk-carousel__progress-bar {
    height: 100%;
    min-width: 20px;
    border-radius: 2px;
    background: var(--grad-accent);
    transition: width 0.25s ease;
}

/* ================================
   モバイル用ドット（デスクトップでは非表示）
   ================================ */

.kk-carousel__dots {
    display: none;
}

/* ================================
   空状態
   ================================ */

.no-content,
.no-posts {
    text-align: center;
    padding: var(--space-4);
    color: var(--accent);
    opacity: 0.8;
}

/* ================================
   モバイル: 1枚表示カルーセル＋ドット
   ================================ */

@media (max-width: 768px) {
    .homepage .content-section {
        padding: var(--space-3) 0 var(--space-2);
    }

    .kk-section-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .kk-section-title {
        font-size: 1.35rem;
    }

    .kk-section-title::after {
        margin-left: auto;
        margin-right: auto;
    }

    /* 1枚表示: JS が translateX で送る */
    .kk-carousel {
        overflow: hidden;
        padding: 0 6px;
    }

    .kk-carousel__track {
        gap: 0;
        overflow: visible;
        padding: 4px 0 8px;
        scroll-snap-type: none;
        transition: transform 0.3s ease;
    }

    .kk-carousel__item {
        flex: 0 0 100%;
        padding: 0 6px;
        box-sizing: border-box;
    }

    /* 矢印・進捗はモバイル不要（スワイプ＋ドット） */
    .kk-carousel__arrow,
    .kk-carousel__progress {
        display: none;
    }

    .kk-carousel__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
    }

    .kk-carousel__dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--border-mid);
        cursor: pointer;
        transition: transform 0.25s ease, background 0.25s ease;
    }

    .kk-carousel__dot.is-active {
        background: var(--grad-accent);
        transform: scale(1.3);
    }
}

@media (max-width: 480px) {
    .kk-section-title {
        font-size: 1.15rem;
    }

    .kk-card__title {
        font-size: 1.02rem;
    }
}

/* ================================
   アクセシビリティ
   ================================ */

@media (prefers-reduced-motion: reduce) {
    .kk-carousel__track {
        scroll-behavior: auto;
        transition: none;
    }

    .kk-card__image img,
    .kk-carousel__arrow,
    .kk-carousel__dot {
        transition: none;
    }

    .kk-card:hover .kk-card__image img {
        transform: none;
    }
}