/*
 * Component: Section Header — thai-massage (hydrogen からハードコピー / CLAUDE.md ルール7)
 * Spec:      DESIGN.md §6-1
 *
 * 英字ラベル (--font-display) + 和文見出し + gold ライン区切り。
 */

.section-header {
  text-align: center;
  margin-bottom: var(--gap-3xl);
}

.section-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--gap-sm);
  opacity: 0.7;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
}

/*
 * 区切りライン:
 *   - PC: ::before / ::after 各 160px、gold アクセント
 *   - Mobile (<= 768px): 各 60px
 */
.section-title::before,
.section-title::after {
  content: "";
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 160px;
  width: 160px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.7;
}

/* 和文サブ見出し (英字ラベルの下に置く想定) */
.section-subtitle {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-md);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  margin: var(--gap-sm) 0 0;
}

@media (max-width: 768px) {
  .section-header {
    margin-bottom: var(--gap-2xl);
  }
  .section-title {
    font-size: var(--fs-heading-xl);
    gap: var(--gap-sm);
  }
  .section-title::before,
  .section-title::after {
    flex-basis: 60px;
    width: 60px;
  }
}

/*
 * 375px 級: 長い英字ラベル（例 RESERVATION = 11 文字）が divider 線 2 本 + 非折返し
 * テキストで横スクロールを誘発するため、font-size / letter-spacing / 線幅を縮小して
 * コンテンツ幅内に収める（G-1 横スクロール 0 を担保）。
 */
@media (max-width: 480px) {
  .section-title {
    font-size: var(--fs-heading-lg);
    letter-spacing: 0.08em;
  }
  .section-title::before,
  .section-title::after {
    flex-basis: 32px;
    width: 32px;
  }
}