/* ============================================================
   ANZAS v2 — page-testimonials.css(/testimonials/ 固有)
   出典: 下層カンプ「Testimonials」
   ・01 筆頭3名 = main.css の .av2-vcard(トップ 09 Voices)をリンク化して再利用
   ・02 目的別  = グループ見出し+行リスト(このページだけの形)
   ============================================================ */

/* ---------- 01 筆頭3名(カード全体がリンク) ---------- */

a.av2-vcard { display: block; color: var(--av2-body) !important; text-decoration: none; }
a.av2-vcard:hover { color: var(--av2-body) !important; }

/* カード内の「変化を読む」。入れ子リンクにできないので span で見た目だけ作る。 */
.av2-tsread { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; font-weight: 700; color: var(--av2-brand); }
.av2-tsread .av2-uline__arrow { background: var(--av2-brand); color: #fff; }

/* ---------- 02 目的別 ---------- */

.av2-tsgroup { margin-top: 48px; }
.av2-tsgroup__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--av2-brand); padding-bottom: 12px; }
.av2-tsgroup__name { margin: 0; font-size: 17px; font-weight: 900; color: var(--av2-ink); }
.av2-tsgroup__note { font-size: 12px; color: var(--av2-cap); }
/* 一覧はカード。グループ内は 3 列で、絞り込みで件数が減っても列が崩れない。 */
.av2-tsgroup__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.av2-tscard { display: flex; flex-direction: column; }
.av2-tscard p { margin: 14px 0 0; font-size: 13px; line-height: 1.9; }
.av2-tscard .av2-tsread { margin-top: auto; padding-top: 14px; }
.av2-tscard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.av2-tsrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 4px; border-bottom: 1px solid var(--av2-line); color: var(--av2-ink-mid) !important; text-decoration: none; transition: color .2s ease; }
.av2-tsrow:hover { color: var(--av2-brand) !important; }
.av2-tsrow__name { font-size: 14px; font-weight: 700; }
.av2-tsrow__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--av2-tint); color: var(--av2-brand); font-size: 10px; font-weight: 700; }
.av2-tsrow__quote { font-size: 13px; color: var(--av2-cap); }

.av2-tsfoot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 40px; }
.av2-tsfoot__note { font-size: 13px; line-height: 1.9; color: var(--av2-cap); }
.av2-tsfoot__count { font-size: 12px; font-weight: 700; color: var(--av2-cap); }

@media (max-width: 560px) {
  .av2-tsgroup { margin-top: 36px; }
  .av2-tsrow { gap: 10px; }
  .av2-tsgroup__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- 02 絞り込み検索(現行サイト /testimonials/ の移植) ----------
   JS が動くまで hidden のままなので、無効環境では一覧が全件そのまま出る。 */

.av2-tsfilter { box-sizing: border-box; margin-top: 40px; padding: 22px 24px; border: 1px solid var(--av2-line); border-radius: 16px; background: var(--av2-surface); }
/* 地色つきセクションの中では、同じグレー同士で絞り込み枠が地に沈む ─ 白に戻して浮かせる。 */
.av2-psec--surface .av2-tsfilter { background: #fff; }
.av2-tsfilter[hidden] { display: none !important; }
.av2-tsfilter__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.av2-tsfilter__title { font-size: 14px; font-weight: 900; color: var(--av2-ink); }
.av2-tsfilter__row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.av2-tsfilter__label { flex: 0 0 92px; font-size: 12px; font-weight: 700; color: var(--av2-ink-mid); }
.av2-tsfilter__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.av2-fchip { box-sizing: border-box; background: #fff; font-family: inherit; line-height: 1.7; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.av2-fchip:hover { border-color: var(--av2-tint-border); background: var(--av2-tint); color: var(--av2-brand); }
.av2-fchip[aria-pressed="true"] { background: var(--av2-brand); border-color: var(--av2-brand); color: #fff; font-weight: 700; }

.av2-fclear { box-sizing: border-box; border: 1px solid var(--av2-line); border-radius: 999px; padding: 5px 14px; background: #fff; font-family: inherit; font-size: 11px; color: var(--av2-body); cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.av2-fclear:hover:not(:disabled) { border-color: var(--av2-brand); color: var(--av2-brand); }
.av2-fclear:disabled { opacity: .4; cursor: default; }

/* 絞り込みで消える要素。カード・グループとも display 指定を持つので !important で殺す。 */
.av2-tsitem[hidden], .av2-tscard[hidden], .av2-tsrow[hidden], .av2-tsgroup[hidden] { display: none !important; }

/* オプション(アクティビティ / ボランティア)のタグ。コースのタグと色で区別する。 */
.av2-tsrow__tag--opt { background: var(--av2-surface); color: var(--av2-body); }
/* 地色つきセクションの中では同じグレー同士でタグの輪郭が消える。
   白地に罫線へ置き換え、ティントのタグ(コース)との区別は残す。 */
.av2-psec--surface .av2-tsrow__tag--opt { background: #fff; box-shadow: inset 0 0 0 1px var(--av2-line); }

.av2-tsempty { margin-top: 40px; padding: 28px 26px; border: 1px solid var(--av2-line); border-radius: 16px; background: #fff; font-size: 14px; line-height: 2.0; color: var(--av2-body); text-align: center; }
.av2-tsempty[hidden] { display: none !important; }

@media (max-width: 560px) {
  .av2-tsfilter { padding: 20px 18px; }
  .av2-tsfilter__row { gap: 8px; margin-top: 14px; }
  .av2-tsfilter__label { flex: 0 0 100%; }
  .av2-tsempty { padding: 24px 18px; }
}