/*
 * page-menu.css — MENU（メニュー）ページ
 * カテゴリカードグリッド + カテゴリ詳細（料金表）+ 施術の流れ。
 * 参考 ref_pc_menu / ref_pc_menu detail は「構造のみ」踏襲（ルール7）。色は var(--color-*) のみ（ルール10）。
 */

.page-menu__main {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 64px var(--container-padding-x) 96px;
}

/* ── 中央キャッチ ── */
.menu-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.menu-intro__lead {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--color-text);
  margin: 0 0 16px;
  /* 編集者の改行を反映（既定 normal だと改行が空白に潰れる）。 */
  white-space: pre-line;
}
.menu-intro__body {
  color: var(--color-text-secondary);
  line-height: 1.9;
  margin: 0;
  white-space: pre-line;
}
.menu-intro__lead:empty,
.menu-intro__body:empty { display: none; }

.menu-section { margin-bottom: 80px; }

/* ── カテゴリカードグリッド（auto-fill で 2〜6 枚を自動調整） ── */
.menu-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.menu-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.menu-card:hover { box-shadow: 0 10px 30px var(--color-shadow-soft); transform: translateY(-4px); }
/* 空カード（name 未設定）は非表示 */
.menu-card:has(.menu-card__name:empty) { display: none; }
.menu-card__media-wrap { aspect-ratio: 4 / 3; overflow: hidden; }
.menu-card__media,
.menu-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-card__body { padding: 24px; }
.menu-card__name-en {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-accent);
  margin: 0 0 4px;
}
.menu-card__name {
  font-family: var(--font-serif-jp);
  font-size: 1.25rem;
  color: var(--color-text);
  margin: 0 0 12px;
}
.menu-card__description {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.8;
  margin: 0;
  /* 制作者がヒアリングで入れた改行をそのまま反映（既定 normal だと改行が空白に潰れる・#4）。 */
  white-space: pre-line;
}

/* ── カテゴリ詳細（料金表） ── */
.menu-detail {
  max-width: 880px;
  margin: 0 auto 72px;
  scroll-margin-top: 100px;
}
.menu-detail:has(.menu-detail__name:empty) { display: none; }
.menu-detail__head { text-align: center; margin-bottom: 24px; }
.menu-detail__name-en {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-accent);
  margin: 0;
}
.menu-detail__name {
  font-family: var(--font-serif-jp);
  font-size: 1.75rem;
  color: var(--color-text);
  margin: 4px 0 0;
}
.menu-detail__image { display: block; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 8px; }
.menu-detail__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-detail__description {
  color: var(--color-text-secondary);
  line-height: 1.9;
  text-align: center;
  margin: 24px 0 32px;
  /* 改行を保持（#4）。 */
  white-space: pre-line;
}
.menu-price-table { border-top: 2px solid var(--color-primary); }
.menu-price-row {
  display: grid;
  /* 所要時間(3列目)・金額(4列目)を固定幅にして全行で列境界を一致させる。
     auto だと行ごとの桁数差（¥6,000 vs ¥12,000）で所要時間の位置がズレる（#5）。 */
  grid-template-columns: auto 1fr 5rem 6rem;
  gap: 12px 16px;
  align-items: baseline;
  padding: 16px 8px;
  border-bottom: 1px solid var(--color-border);
}
.menu-price-row:has(.menu-price-row__name:empty) { display: none; }
.menu-price-row__label {
  font-size: 0.75rem;
  color: var(--color-primary);
}
.menu-price-row__label:empty { display: none; }
.menu-price-row__name { color: var(--color-text); font-weight: 500; }
/* duration / price は末尾2列にピン留め（宮田指示）。
   ラベルが空（:empty → display:none）で要素が左へずれても、name とこの2列の間に
   ある 1fr 列が余白を吸収するため、コース名の長短に関わらず時間は常に金額の左隣・
   等距離に固定される（時間がコース長で動く不具合の修正）。 */
.menu-price-row__duration {
  grid-column: 3 / 4;
  justify-self: end;
  color: var(--color-text-tertiary);
  font-size: 0.9rem;
}
.menu-price-row__price {
  grid-column: 4 / 5;
  justify-self: end;
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* 施術の流れ（.menu-flow*）は /beginner/ へ移設したため削除（石田リワーク）。 */

/* ── 紹介動画（YouTube 埋め込み・16:9・コンテンツ幅中央。page-about の about-movie と同設計） ── */
.menu-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);
}
.menu-movie__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* menuPage.movie 未設定時（youtubeId 空）は section ごと非表示。 */
.menu-movie[data-yt=''] {
  display: none;
}

@media (max-width: 768px) {
  .page-menu__main { padding: 48px var(--container-padding-x-mobile) 64px; }
  .menu-card-grid { grid-template-columns: 1fr; gap: 24px; }
  .menu-price-row { grid-template-columns: 1fr auto; }
  .menu-price-row__label { grid-column: 1 / -1; }
  .menu-price-row__duration { display: none; }
  /* SP は 2 列（name / price）。desktop の grid-column: 4/5 を打ち消す。 */
  .menu-price-row__price { grid-column: 2 / 3; }
}