/*
 * Page-specific layout: about — thai-massage
 * Spec: DESIGN.md §6（Concept → Amenity & Room → Access）/ structure-draft §5-1
 *   pageHeader → Concept → Amenity & Room → Access(地図+NAP) → CTA(ダーク帯)
 *
 * - 各アンカーセクションの上下余白 / scroll-margin-top（ヘッダー被り対策）
 * - .about-section--alt で交互背景
 * - Concept / Access / gallery のレイアウトは各 components/*.css が担う。
 *   本ファイルは
 *     1) section-header--script（参照の中央スクリプト見出し + 短い gold ライン）
 *     2) Amenity & Room 本文 + 画像グリッド
 *     3) CTA ダーク帯
 *   のページ固有レイアウトを受け持つ。
 * - 色は var(--color-*)・サイズは token のみ（ハードコード禁止 / !important 禁止）。
 */

.page-about__main {
  display: block;
}

.about-section {
  padding: var(--section-padding-y) var(--container-padding-x);
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.about-section--alt {
  background: var(--color-bg-section-alt);
}

/* ── Section header（script 版）─────────────────────────────────
   参照は長い両側ライン（index 流用の section-header 既定）ではなく、
   中央スクリプト英字 + 直下に短い gold ラインの落ち着いた見出し。
   共有 section-header.css は編集せず、当ページ修飾子で上書きする。 */
.section-header--script .section-title {
  font-size: var(--fs-display-md);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
}

/* 両側の長いラインを消し、見出し直下に短い gold ラインを置く。 */
.section-header--script .section-title::before {
  display: none;
}
.section-header--script .section-title::after {
  display: block;
  margin: var(--gap-md) auto 0;
  flex-basis: auto;
  width: 48px;
}

.section-header--script .section-subtitle {
  font-size: var(--fs-heading-sm);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wider);
  margin-top: var(--gap-md);
}

/* ── Amenity & Room ──────────────────────────────────────────
   section-header（script）の下に、和文リード見出し + 本文を中央寄せで配置し、
   その下に画像グリッドを置く。 */
.amenity-section__body {
  max-width: 760px;
  margin: 0 auto var(--gap-2xl);
  text-align: center;
}

.amenity-section__headline {
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-lg);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 var(--gap-md);
  /* 編集者の改行を反映（既定 normal だと改行が空白に潰れる）。 */
  white-space: pre-line;
}

.amenity-section__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  margin: 0;
  white-space: pre-line;
}

/* 画像グリッド: 最大 3 枚をコンテナ幅に収め、マス間に余白を持たせる。
   固定 3 ブロックをインライン記述し、画像 url が空のセルは :has で非表示。 */
.amenity-section__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-md);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.amenity-section__cell {
  margin: 0;
}

/* 未使用ブロック非表示（:empty / :has 規約の踏襲）。
   url が空文字に解決された img はセルごと隠す。 */
.amenity-section__cell:has(.amenity-section__img[src=""]) {
  display: none;
}

.amenity-section__figure {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* 個室・設備の3枚横並びの角に控えめな丸み（6px・CTA / カード / バナーと統一・宮田指示）。 */
  border-radius: 6px;
}

.amenity-section__figure picture {
  display: block;
  width: 100%;
  height: 100%;
}

.amenity-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Access ──────────────────────────────────────────────────
   2 カラム（NAP dl / 地図 iframe）は components/access-section.css が担うため
   ここでは追加スタイル不要。 */

/* ── CTA（ダーク帯）─────────────────────────────────────────
   参照: 深ブラウン帯にロゴ（店舗名）+ 見出し + 予約(btn-primary)/電話(btn-secondary)。
   btn-secondary は既定が明るい背景向け（濃ブラウン文字）のため、暗背景では
   文脈側で白へ上書きする（buttons.css のコメントが指示する運用）。 */
.about-cta {
  background: var(--color-bg-dark);
}

.about-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
}

.about-cta__brand {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 300;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-on-dark);
  margin: 0;
}

.about-cta__heading {
  font-family: var(--font-display);
  font-size: var(--fs-heading-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
  margin: 0;
}

.about-cta__text {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text-on-dark-sub);
  margin: var(--gap-xs) 0 var(--gap-md);
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-md);
}

/* 暗背景上の btn-secondary を白系へ上書き（文脈オーバーライド）。 */
.about-cta .btn-secondary {
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}

.about-cta .btn-secondary:hover,
.about-cta .btn-secondary:focus-visible {
  background: var(--color-text-on-dark);
  color: var(--color-text);
  border-color: var(--color-text-on-dark);
}

.about-cta .btn-primary:focus-visible,
.about-cta .btn-secondary:focus-visible {
  outline-color: var(--color-accent);
}

@media (max-width: 1024px) {
  .amenity-section__gallery {
    gap: var(--gap-sm);
  }
}

@media (max-width: 768px) {
  .about-section {
    padding: var(--section-padding-y-mobile) var(--container-padding-x-mobile);
  }
  .amenity-section__body {
    margin-bottom: var(--gap-xl);
  }
  .amenity-section__headline {
    font-size: var(--fs-heading-md);
  }
  /* 画像は 1 列に積む（マスが潰れないよう縦積み）。 */
  .amenity-section__gallery {
    grid-template-columns: 1fr;
    gap: var(--gap-md);
  }
  .about-cta__actions {
    flex-direction: column;
    align-self: stretch;
  }
  .about-cta__actions .btn-primary,
  .about-cta__actions .btn-secondary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .section-header--script .section-title {
    font-size: var(--fs-heading-xl);
  }
}

/* ── インタビュー動画（YouTube 埋め込み・16:9・コンテンツ幅中央 / 宮田 FB） ── */
.about-movie__frame {
  max-width: 880px;
  margin: var(--gap-2xl) auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-bg-section-alt);
}
.about-movie__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* aboutPage.movie 未設定時（youtubeId 空）は section ごと非表示。 */
.about-movie[data-yt=''] {
  display: none;
}