/* .box内に.snaf-grid-articleがある場合、左右のpaddingを4pxに */
.box:has(.snaf-grid-article) {
    padding-left: 4px;
    padding-right: 4px;
}

/* category-taikendan用のサムネイル枠・背景色を上書き */
.snaf-grid-article article.category-taikendan .card-thumb {
    background-color: transparent;
    border: none;
}
.snaf-grid-article {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCで3列にする */
    gap: 20px 2%;
    max-width: 100%;
    line-height: 1.3;
}

/* サイドバー内は1列にする */
.sidebar .snaf-grid-article {
    grid-template-columns: 1fr;
}

.snaf-grid-article .article {
    list-style: none; /* すべてのカード（articleタグ）に枠線を表示 */
}

.snaf-grid-article article {
    border: 1px solid #ccc;
    padding: 0;
    box-sizing: border-box;
}

/**
 * サイドバー内ではpaddingを0にして隙間をなくす
 */ 
aside .snaf-grid-article article {
    padding: 0;
}

.snaf-grid-article article.double-thumb {
    max-width: 100%; /* 親要素の幅に合わせる */
}

.snaf-grid-article a {
    text-decoration: none;
    padding: 0; /* これがないとcocoonのcssにより隙間が空きすぎる */
}

.snaf-grid-article .card-title {
    font-size: 80%;
    color: #333;
    display: -webkit-box;
    line-clamp: 2; /* 表示する行数 */
    -webkit-line-clamp: 2; /* 表示する行数（互換性維持） */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.snaf-grid-article {
    overflow: hidden; /* 横方向のスクロールを防ぎ、横に広大な空白ができるのを防ぐ */
}

.snaf-grid-article img {
    width: 100%; /* 画像の幅を親要素に合わせる */
    height: auto; /* 縦横比を維持 */
    object-fit: cover;
    padding: 0 !important;
}

.snaf-grid-article .card-thumb {
    position: relative;
    display: flex;
    flex-wrap: nowrap; /* 横並びにする */
    justify-content: space-between; /* 画像を等間隔に配置 */
    gap: 2px; /* 画像間の隙間を調整 */
}

.snaf-grid-article .card-thumb img {
    max-width: calc(50% - 1px); /* 2枚の画像がはみ出さないように調整 */
}

.snaf-grid-article .cat-label {
    font-size: 0.8em;
    z-index: 1; /* カテゴリラベルだけ暗くするのを防ぐ */
    opacity: 0.88; /* 0.0（完全透明）から1.0（不透明）の範囲で調整 */
    background-color: #ED68A1; /* cocoonと同じ色を明示的に指定 */
}

.snaf-grid-article .double-thumb .cat-label {
    max-width: 160%; /* サムネ2つ分なので、通常の2倍を指定（最大200%） */
}

.snaf-grid-article .point-label {
    top: 20px;
    background-color: #0062da;
}

.snaf-grid-article .entry-card-meta {
    position: relative;
    color: #333;
}

.snaf-grid-article .card-thumb:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.snaf-grid-article .double-thumb .card-thumb:before {
    /** width: 200%; **/ /* 削除予定。サムネ2つ分なので、通常の2倍を指定していた。現在はこれを設定すると暗くなる部分がおかしくなる問題発生するため無効化 */
}

.snaf-grid-article .a-wrap {
    background: white;
}

.snaf-grid-article .single-thumb .card-thumb {
    background-color: #ffffff;
    /** border: 1px solid #ccc **/;
    padding: 0 10px;
    display: flex;
    justify-content: center;
}

/* 体験談・動画・ゲームカテゴリ共通スタイル */
.snaf-grid-article .category-taikendan,
.snaf-grid-article .category-video,
.snaf-grid-article .category-game {
    border: 3px solid #ED68A1;
    box-shadow: 0 4px 16px rgba(237, 104, 161, 0.18), 0 2px 8px rgba(120, 60, 100, 0.10);
    position: relative;
}

.snaf-grid-article .category-taikendan::before,
.snaf-grid-article .category-video::before,
.snaf-grid-article .category-game::before {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #6d3d82; /* ディープパープル */
    color: #fff;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9em;
    box-shadow: 0 4px 12px rgba(109, 61, 130, 0.4), 0 2px 6px rgba(90, 50, 110, 0.3);
    z-index: 2;
}

/* 各カテゴリのラベル文字 */
.snaf-grid-article .category-taikendan::before {
    content: "体験談";
}

.snaf-grid-article .category-video::before {
    content: "動画";
}

.snaf-grid-article .category-game::before {
    content: "ゲーム";
}

/* メディアクエリ */
@media (max-width: 768px) {
    .snaf-grid-article {
        grid-template-columns: repeat(2, 1fr) !important; /* スマホで2列にする */
    }

    .snaf-grid-article article.double-thumb {
        max-width: 100%; /* 余白をなくす */
    }

    .snaf-grid-article .double-thumb .card-thumb {
        display: flex;
        flex-wrap: nowrap; /* 横並びにする */
        justify-content: space-between; /* 画像を等間隔に配置 */
        gap: 2px; /* 画像間の隙間を調整 */
    }

    .snaf-grid-article .card-thumb img {
        max-width: calc(50% - 1px); /* 2枚の画像がはみ出さないように調整 */
    }

    /* mobile_limit: モバイルで表示記事数を制限（2または4のみ対応） */
    .snaf-grid-article.mobile-limit-2 > a:nth-child(n+3) {
        display: none;
    }

    .snaf-grid-article.mobile-limit-4 > a:nth-child(n+5) {
        display: none;
    }
}