/*
 * Page-specific layout: therapist — thai-massage
 * Spec: docs/thai-massage-structure-draft.md §5-1 / §5-5
 *   pageHeader → セラピストグリッド(E-E-A-T・CSS Grid 自動整列)
 *
 * - グリッドセクションの上下余白
 * - tagline (任意リード) の中央寄せ
 * - グリッド本体・1名中央単独/2-3名左詰め/4名以上自然流れ・空カード非表示は
 *   components/therapist-card.css 側が担う (DESIGN.md §5-5 / §6-6)
 */

.page-therapist__main {
  display: block;
}

/* ──────────────────────────────────────────────
 * 中央キャッチ + 本文（page-header 直下・参照準拠）
 *   introLead = --font-serif-jp の中央キャッチ見出し
 *   introBody = 本文（読みやすい行幅に制限し中央寄せ）
 *   いずれも config 任意項目 → 空（:empty）なら各行を非表示。
 *   両方空ならセクションごと非表示（:has）。
 *   ※ about-service-intro と同方式（thai 共通パターン）。
 * ────────────────────────────────────────────── */
.therapist-intro {
  padding: var(--section-padding-y) var(--container-padding-x) 0;
  text-align: center;
  background: var(--color-bg-main);
}

.therapist-intro__lead {
  max-width: 40rem;
  margin: 0 auto;
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-xl);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--color-text);
  /* 編集者がヒアリングで入れた改行を反映（既定 normal だと改行が空白に潰れる）。 */
  white-space: pre-line;
}

.therapist-intro__body {
  max-width: 40rem;
  margin: var(--gap-md) auto 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  white-space: pre-line;
}

.therapist-intro__lead:empty,
.therapist-intro__body:empty {
  display: none;
}

.therapist-intro:has(.therapist-intro__lead:empty):has(.therapist-intro__body:empty) {
  display: none;
}

.therapist-section {
  padding: var(--section-padding-y) var(--container-padding-x);
  background: var(--color-bg-main);
}

.therapist-section__tagline {
  max-width: 720px;
  margin: 0 auto var(--gap-2xl);
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .therapist-section {
    padding: var(--section-padding-y-mobile) var(--container-padding-x-mobile);
  }
}

/* ============================================================
   THERAPIST GALLERY — 正方形画像 3 枚を隙間なく横並び
   （HOME CONCEPT 3連ギャラリー page-index.css `.index-concept__images` から
     ハードコピー・CLAUDE.md ルール7。therapist 専用クラスで独立保持）。
============================================================ */
.therapist-gallery {
  padding: 0 var(--container-padding-x) var(--section-padding-y);
  background: var(--color-bg-main);
}

/* 写真が任意のため、1 枚も無い（全 img の src が空）ときはセクションごと非表示にする
   （宮田指示・placeholder は出さない）。テンプレエンジンは条件分岐非対応のため出し分けは CSS。 */
.therapist-gallery:not(:has(.therapist-gallery__media img[src]:not([src='']))) {
  display: none;
}

/* 部分的に未設定（例: 3 枠中 2 枠のみ）の場合は、空の画像セルだけを個別に隠す。 */
.therapist-gallery__image:has(img[src='']),
.therapist-gallery__image:has(img:not([src])) {
  display: none;
}

.therapist-gallery__images {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--container-max-width);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* 隙間なく並べる（CONCEPT と同方針） */
}

.therapist-gallery__image {
  margin: 0;
}

.therapist-gallery__media {
  display: block;
  margin: 0;
  aspect-ratio: 1 / 1; /* 正方形 */
  overflow: hidden;
  background: var(--color-bg-section-alt);
}

.therapist-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 帯全体の外側 4 角だけ 6px に丸める（CTA / カードと統一）。内側は直角＝連続した帯。 */
.therapist-gallery__image:first-child .therapist-gallery__media {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.therapist-gallery__image:last-child .therapist-gallery__media {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* sub-pixel 継ぎ目対策（1fr トラック境界の端数で写真間に 1px 白線が出るのを覆う）。
   内側 2 枚を右へ 1px 重ね、__media の overflow:hidden でクリップ。 */
.therapist-gallery__image:not(:last-child) {
  margin-right: -1px;
}

@media (max-width: 768px) {
  .therapist-gallery {
    padding: 0 var(--container-padding-x-mobile) var(--section-padding-y-mobile);
  }
  /* 3 枚横並び・正方形を維持（CONCEPT と同様） */
  .therapist-gallery__media {
    aspect-ratio: 1 / 1;
  }
}