/**
 * SHH Series Grid — ジャンル絞り込みボタン
 *
 * 一覧 (Post Cards) の直上に置くピル型のフィルター。選択中は AppTopBar と同じ
 * ワインレッド (#b61055) で塗ってサイトの配色に揃える。
 */

/**
 * フィルター全体の器 (<details>)。ボタンのリンクは #<id> 付きなので、押した後もページ
 * 先頭に飛ばずここへ着地する。site-header が fixed-scroll + shrink-sticky-header で
 * 追従してくるため、scroll-margin-top で潜り込みを防ぐ (縮んだヘッダー ≒ 60-70px + 余白)。
 */
.shh-series-grid-filters {
    scroll-margin-top: 90px;
    margin: 0 0 20px;
}

/* 開閉トグル。既定の三角マーカーは消して自前の ▼ / ▲ を出す。 */
.shh-series-grid-filters > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 9px 14px;
    border: 1px solid #ccc;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.shh-series-grid-filters > summary::-webkit-details-marker {
    display: none;
}

.shh-series-grid-filters > summary::after {
    content: '▼';
    font-size: 9px;
    color: #888;
}

.shh-series-grid-filters[open] > summary {
    margin-bottom: 10px;
}

.shh-series-grid-filters[open] > summary::after {
    content: '▲';
}

/* 絞り込み中はトグル自体を色付きにして、閉じていても効いていると分かるようにする。 */
.shh-series-grid-filters > summary:hover {
    border-color: #b61055;
    color: #b61055;
}

/**
 * PC は畳む必要が無いので JS (assets/shh-series-grid.js) が open にし、この class を付ける。
 * JS が動かなかった場合は summary が出たままなので、タップすれば開ける = 壊れない。
 */
.shh-series-grid-js .shh-series-grid-filters > summary {
    display: none;
}

/* 1 軸 = 1 行。2 軸目 (対象年齢) を出すと 2 行並ぶ。 */
.shh-genre-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.shh-genre-filter-row:last-of-type {
    margin-bottom: 20px;
}

/* 行ラベル (genre_label / tag_label を指定したときだけ出る) */
.shh-genre-filter-label {
    flex: none;
    font-size: 13px;
    font-weight: bold;
    color: #666;
}

.shh-genre-filter {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.shh-genre-filter li {
    margin: 0;
}

.shh-genre-filter a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.shh-genre-filter a:hover,
.shh-genre-filter a:focus {
    border-color: #b61055;
    color: #b61055;
}

.shh-genre-filter .is-active a {
    background: #b61055;
    border-color: #b61055;
    color: #fff;
}

/* show_count="true" のときだけ出る件数。ラベルより控えめに見せる。 */
.shh-genre-filter-count {
    font-size: 12px;
    opacity: 0.75;
}

/**
 * スマホは開いたときの高さも詰める。実測 (375px 幅・ジャンル12個):
 *   既定                          304px / ジャンル4行
 *   font 14→12px だけ             288px / 4行のまま  ← 単独ではほぼ無意味
 *   padding / gap だけ            280-292px / 4行のまま
 *   padding + gap (font は 14px)  233px / 3行        ← 折返しが1行減る閾値を超える
 * font を落としても行数は減らず可読性が下がるだけなので、14px は維持する。
 * (シニア向けの情報も扱うサイトなので文字は小さくしない)
 */
@media (max-width: 767px) {
    .shh-genre-filter,
    .shh-genre-filter-row {
        gap: 6px;
    }

    .shh-genre-filter a {
        padding: 4px 10px;
    }
}

/* 設定ミス時の案内。編集権限があるユーザーにしか出力されない。 */
.shh-series-grid-error {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid #b61055;
    border-radius: 6px;
    background: #fff5f8;
    color: #333;
    font-size: 13px;
    line-height: 1.6;
}

.shh-series-grid-error p {
    margin: 0 0 8px;
}

.shh-series-grid-error p:last-child {
    margin-bottom: 0;
}

.shh-series-grid-error code {
    word-break: break-all;
}