/*
 * Styles for Custom Horizontal Scroll Posts Plugin
 * Version: 2.2 (Adjusted by Gemini AI)
 * Description: Redesigned to match the modern and stylish aesthetic of ibeguru.com. Card size reduced, corners squared, and spacing adjusted as per request.
 */

/* --- Section Title --- */
.chs-section-title {
    font-size: 1.6rem; /* Changed: サイトの見出しに合わせてサイズを調整 */
    font-weight: 700; /* Changed: より力強い見出しに */
    margin-bottom: 1.2em; /* Changed: 余白を調整 */
    color: #1a202c; /* Changed: サイトの主要なテキストカラーに合わせる */
    border-bottom: 2px solid #e2e8f0; /* Added: セクションの区切りを明確にするボーダー */
    padding-bottom: 0.5em; /* Added: ボーダーとの余白 */
}

/* --- Scroll Wrapper --- */
.chs-scroll-wrapper {
    position: relative;
}

/* --- Scroll Container --- */
.chs-row-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}
.chs-row-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Scroll buttons */
.chs-scroll-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.92);
    color: #4a5568;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.chs-scroll-button .dashicons {
    font-size: 27px;
    width: 27px;
    height: 27px;
}

.chs-scroll-button:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}

.chs-scroll-button:focus-visible {
    outline: 2px solid #3182ce;
    outline-offset: 2px;
}

.chs-scroll-button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.chs-scroll-prev {
    left: 6px;
}

.chs-scroll-next {
    right: 6px;
}

@media (max-width: 767px) {
    .chs-scroll-button {
        width: 48px;
        height: 48px;
    }
}


/* --- Row of Cards --- */
.chs-row {
    display: flex;
    gap: 12px; /* Changed: カードサイズに合わせて余白を調整 */
    min-width: max-content;
    padding: 0 0 4px; /* Changed: ボタン分の余白を削除 */
}

/* --- Individual Card --- */
.chs-card {
    display: block;
    width: 192px; /* Changed: サイズを約8割に縮小 (240px -> 192px) */
    flex: 0 0 auto;
    background-color: #fff; /* Added: カードの背景色を明示 */
    border: 1px solid #e2e8f0; /* Changed: サイトに合わせた淡いボーダーカラー */
    border-radius: 0; /* Changed: 角丸を削除 */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Changed: 洗練されたトランジション */
    margin-bottom: 8px; /* Added: ホバー時の影が切れないようにマージンを追加 */
}
.chs-card:hover {
    transform: translateY(-5px); /* Changed: 浮き上がるようなホバーエフェクト */
    box-shadow: 0 8px 25px rgba(0,0,0,0.08); /* Changed: より繊細で広がりのある影 */
}
/* --- Card Thumbnail --- */
.chs-card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #e2e8f0; /* Added: 画像とテキストの区切り */
}
.chs-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    vertical-align: middle;
    transition: transform 0.3s ease; /* Added: ホバー時のズームエフェクト */
}
.chs-card:hover .chs-card-thumb img {
    transform: scale(1.05); /* Added: 画像が少しズームする */
}


/* --- Card Body --- */
.chs-card-body {
    padding: 10px 12px; /* Changed: カードサイズに合わせて余白を調整 */
}
.chs-card-title {
    font-size: 0.9rem; /* Changed: カードサイズに合わせて調整 */
    font-weight: 600;
    color: #2d3748; /* Changed: サイトのテキストカラーに合わせる */
    line-height: 1.4; /* Changed: 行間を調整 */
    height: 2.8em; /* 2行分 (1.4 * 2) */
    margin-bottom: 6px; /* Changed: カードサイズに合わせて余白を調整 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Metadata (Date, Members, etc.) --- */
.chs-card-date,
.chs-card-members,
.chs-card-join-state,
.chs-card-event-datetime,
.chs-card-group-name {
    margin-top: 4px; /* Changed: 上の要素との余白を少し詰める */
    line-height: 1.3; /* Changed: 行間を狭くする */
    font-size: 0.75rem; /* Changed: カードサイズに合わせて調整 */
    display: flex;
    align-items: center;
    gap: 0.5em; /* Changed: アイコンとテキストの間隔を調整 */
    color: #718096; /* Changed: 補助的な情報のカラー */
}

/* --- Specific Metadata Styling --- */
.chs-card-members .vrc-group-stats,
.chs-card-join-state .vrc-group-join-text,
.chs-card-event-datetime span,
.chs-card-group-name span {
    color: #4a5568; /* Changed: テキストカラーを少し濃く */
    font-weight: 500;
}

/* --- Dashicons --- */
.chs-card .dashicons {
    font-size: 1.1em; /* Changed: アイコンサイズを調整 */
    width: 1.1em;
    height: 1.1em;
    line-height: 1;
    color: #a0aec0; /* Changed: アイコンカラーを調整 */
}


/* --- Oshi Group Emphasis Styles --- */
.chs-card.oshi-tier-1,
.chs-card.oshi-tier-2,
.chs-card.oshi-tier-3,
.chs-card.oshi-tier-4,
.chs-card.oshi-tier-5 {
  border: 4px solid transparent;
  background-clip: padding-box;
  position: relative;
  /* 元の .chs-card スタイルにある transition と border-radius: 0 を継承します */
}

/* 既存のホバーエフェクトはそのまま適用されるため、追加のホバー定義は不要です */

/* Tier 1 (1-2 oshi): Light Blue */
.chs-card.oshi-tier-1 {
  border-image: linear-gradient(135deg, #a1c4fd, #c2e9fb) 1;
}

/* Tier 2 (3-4 oshi): Blue */
.chs-card.oshi-tier-2 {
  border-image: linear-gradient(135deg, #007bff, #4481eb) 1;
}

/* Tier 3 (5-6 oshi): Bronze */
.chs-card.oshi-tier-3 {
  border-image: linear-gradient(135deg, #b87333, #d98e54) 1;
}

/* Tier 4 (7-9 oshi): Silver */
.chs-card.oshi-tier-4 {
  border-image: linear-gradient(135deg, #c0c0c0, #e8e8e8) 1;
}

/* Tier 5 (10+ oshi): Gold */
.chs-card.oshi-tier-5 {
  border-image: linear-gradient(135deg, #ffd700, #f8c202) 1;
}