/* Therapists page (therapists.html) — page-specific styles */

body.page-therapists { background: var(--color-black); }

/* ===== ランキングのバナー（検索の上） ===== */
/* 画像に width / height 属性を付けているので、高さは auto にして縦横比を保つ。 */
/* スマホ・PC とも縦に1枚ずつ並べる。 */
.therapists-banners { display: grid; gap: 12px; margin-bottom: 32px; }
.therapists-banner { display: block; }
.therapists-banner img { width: 100%; height: auto; }
.therapists-banner:hover { opacity: 0.85; }

/* ===== 検索（therapist-search.js がカードに hidden を付けて出し分ける） ===== */
/* .card--media などは display を持っていて hidden が効かないので、ここで確実に消す。 */
.therapists-content [hidden] { display: none !important; }

/* セラピスト名検索。こだわり検索の上に常に出す。見出しの文字は .therapist-search__filter-title と共通。 */
.therapist-search__name-title { display: block; margin-bottom: 10px; }
.therapist-search__name-input {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-card) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23c9a96e" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>') no-repeat left 16px center;
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-sm);
  padding: 12px 16px 12px 42px;
  font-family: var(--font-serif);
  font-size: 16px; /* 16px未満だと iOS Safari が入力時に画面を拡大する */
  font-weight: 500;
  color: var(--color-text-white);
}
.therapist-search__name-input::placeholder { color: var(--color-text-muted); font-weight: 300; }
.therapist-search__name-input:focus { outline: none; border-color: var(--color-gold); }

/* こだわり検索の各項目は、ラベルに並べ替えボタン（.therapist-search__sort-btn）のクラスを付けてピル型にする。
   チェックボックスは .visually-hidden で見えなくし、キーボードでは選べるようにしている。 */
.therapist-search__options { gap: 8px; }
.therapist-search__options li { position: relative; }
.therapist-search__options label { user-select: none; }
/* 0人の項目は消さずに、目立たないグレーにする（人数は therapist-search.js が選択に応じて付け替える）。
   選んだまま0人になった項目は、下の選択中の色がこの opacity で薄く出る。 */
.therapist-search__options li.is-empty label {
  background: transparent;
  color: var(--color-text-muted);
  border-color: rgba(255, 255, 255, 0.06);
  opacity: 0.5;
}
/* 選択中の色は .therapist-search__sort-btn.is-selected と同じ。 */
.therapist-search__options input:checked + label {
  background: var(--color-gold);
  color: var(--color-black);
  border-color: transparent;
  font-weight: 600;
}
.therapist-search__options input:focus-visible + label {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.therapist-search__clear {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.therapist-search__clear:hover { color: var(--color-gold); }

.therapist-search__result {
  margin-top: 20px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-text-cream);
}
.therapist-search__result span {
  margin: 0 2px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-gold);
}
.therapist-search__sort { margin-top: 12px; }

/* ===== Grid ===== */
/* 上はページ見出し（.page-hero--image）の下余白 48px に続くので、バナーが離れすぎないよう小さくしている。 */
.therapists-content { padding-top: 16px; padding-bottom: 100px; }
.therapists-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  /* 絞り込みのアニメーション用（therapist-search.js）。
     消えるカードをこの中に絶対配置で浮かせ、高さを動かしている間も行が引き伸ばされないよう上に詰める。 */
  position: relative;
  align-content: start;
}
@media (min-width: 640px) {
  .therapists-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .therapists-grid { grid-template-columns: repeat(3, 1fr); }
}

.page-therapists .card--media__photo-wrap { aspect-ratio: 4 / 5; }
.therapist-card__name-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.therapist-card__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.06em; color: var(--color-text-white); }
.therapist-card__kana { font-size: 0.68rem; color: var(--color-text-muted); }
.therapist-card__meta { font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 10px; }

/* ===== カード内 セラピストアイコン(WORKER_IMAGE) ===== */
.therapist-card__icon { margin: 6px 0 10px; }

.therapist-card__icon ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.therapist-card__icon li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 999px;
  background: rgba(201, 169, 110, 0.08);
  font-size: 0.66rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  white-space: nowrap;
}

/* 先頭の小さな菱形マーク */
.therapist-card__icon li::before {
  content: "";
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  background: var(--color-gold);
  transform: rotate(45deg);
  opacity: 0.85;
}

/* スマホ(1カラム=カード幅が広い)はやや大きめに */
@media (max-width: 639px) {
  .therapist-card__icon li { padding: 5px 12px; font-size: 0.7rem; }
}

/* タブレット〜PC(2〜3カラム=カード幅が狭い)はコンパクトに */
@media (min-width: 640px) {
  .therapist-card__icon { margin: 5px 0 9px; }
  .therapist-card__icon ul { gap: 5px; }
  .therapist-card__icon li { padding: 3px 9px; font-size: 0.62rem; letter-spacing: 0.04em; }
}
.therapist-card__tag { font-size: 0.78rem; color: var(--color-gold); font-weight: 400; margin-bottom: 14px; line-height: 1.7; }
.therapist-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.therapist-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--color-gold);
  letter-spacing: 0.08em;
}

/* ===== CTA ===== */
.therapists-cta { margin-top: 56px; }