/* 音声ガイドについて（/audio-guide、/en/audio-guide）。指示書 09。
   主役は頭のすぐ下の「1本、聴いてみる」：七賢のページの一番上と同じ紹介ガイド（intro-guide.css）を、
   七賢の帯「音声ガイドで、七賢を知る」（guide-course.css）と同じ淡青の面に、文 : 写真 = 1 : 1.414 で置く。
   大きさと余白は白銀比の刻み（--s-*）、色は tokens.css の変数だけ。 */

/* ---------- 1本、聴いてみる ---------- */
.page-audio main .audio-try {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.414fr); grid-template-rows: auto 1fr;
  grid-template-areas: "head player" "body player"; column-gap: var(--s-6);
  margin-top: var(--s-6); padding: var(--s-6); border-radius: 4px; background: var(--ds-tint); color: var(--ds-sumi);
}
.page-audio main .audio-try__head { grid-area: head; }
.page-audio main .audio-try__player { grid-area: player; min-width: 0; }
.page-audio main .audio-try__body { grid-area: body; align-self: end; display: grid; gap: var(--s-4); }
html:root body.page-audio main .audio-try h2 { margin: 0; padding: 0; border: 0; font-size: var(--ds-h2); line-height: var(--lh-head); letter-spacing: .04em; }
.page-audio main .audio-try__where { margin: var(--s-0) 0 0; font-size: var(--s-0); line-height: var(--lh-body); }
.page-audio main .audio-try__where a { color: inherit; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* 写真の下の1行（再生ボタン・時間・点）の下端を、左の列のボタンの下端にそろえる */
.page-audio .audio-try__player > .media.intro.media--16x9:not(.is-full) { margin-bottom: calc(var(--intro-gap) + 48px); }
/* 淡青の面の上でも、写真を送る点がはっきり見えるように */
.page-audio .intro__dot::before { background: rgba(21, 21, 21, .42); }

/* 言語の札：3つずつ2段。選んだ言語は蒼の地に白 */
.page-audio main .audio-try__langs { display: grid; gap: var(--s-n2); }
.page-audio main .audio-try__label { margin: 0; color: var(--ds-muted); font-size: var(--s-n1); line-height: var(--lh-head); letter-spacing: .04em; }
.page-audio main .audio-try .topic-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-n3); margin: 0; }
.page-audio main .audio-try .topic-chip { min-width: 0; padding: 0 var(--s-n3); border-color: transparent; background: var(--semantic-color-surface-default); font-size: var(--s-n1); }
.page-audio main .audio-try .topic-chip:hover { border-color: var(--ds-sumi); }
.page-audio main .audio-try .topic-chip[aria-pressed="true"] { border-color: var(--component-button-primary-background); background: var(--component-button-primary-background); color: var(--component-button-primary-text); font-weight: 700; }
.page-audio main .audio-try .topic-chip:focus-visible { outline: 2px solid var(--base-color-ao); outline-offset: 2px; }
.page-audio main .audio-try__act { margin: 0; }
.page-audio main .audio-try__act .btn { background: var(--semantic-color-surface-default); }

/* ---------- 音声ガイドがあると：2つを横に、本文 18px ---------- */
.page-audio main .audio-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.page-audio main .audio-why__col { padding: 0; border: 0; border-radius: 0; }
html:root body.page-audio main .audio-why__col h3 { margin: 0 0 var(--s-n2); font-size: var(--ds-h3); line-height: var(--lh-head); }
.page-audio main .audio-why__col p { max-width: 40em; font-size: var(--s-0); line-height: var(--lh-body); }

/* ---------- 何が聴けるか：いま聴けるガイドは写真のカード、準備中は静かな一覧 ---------- */
.page-audio main .section--hear > p:not([class]) { max-width: 40em; margin: 0 0 var(--s-4); }
.page-audio main .guide-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.page-audio main .guide-place .media { margin-bottom: var(--s-0); }
.page-audio main .guide-place__meta { margin: var(--s-n3) 0 0; color: var(--ds-muted); font-size: var(--s-n1); line-height: var(--lh-head); }
.page-audio main .guide-place .card__act { margin-top: var(--s-1); }
.page-audio main .guide-place .card__act .btn { width: auto; }

html:root body.page-audio main .guide-soon__head { margin: var(--s-6) 0 var(--s-n2); font-size: var(--ds-h3); line-height: var(--lh-head); }
.page-audio main .guide-soon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.page-audio main .guide-soon > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-0); min-height: 48px; padding: var(--s-n2) 0; border-bottom: 1px solid var(--ds-rule); font-size: var(--s-0); line-height: var(--lh-head); }
.page-audio main .guide-soon > li:nth-child(-n+2) { border-top: 1px solid var(--ds-rule); }
.page-audio main .guide-soon a { color: var(--ds-sumi); text-decoration: none; }
.page-audio main .guide-soon a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.page-audio main .guide-soon__tag { flex: none; color: var(--ds-muted); font-size: var(--s-n1); }

/* ---------- 使い方：順番のある3つの手順を横に。料金はその下の1行 ---------- */
.page-audio main .guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.page-audio main .guide-steps > li { counter-increment: step; margin: 0; font-size: var(--s-0); line-height: var(--lh-body); }
.page-audio main .guide-steps > li::before { content: counter(step); display: block; margin-bottom: var(--s-n2); color: var(--ds-band); font-size: var(--s-6); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.page-audio main .guide-price { display: grid; gap: var(--s-n2); margin-top: var(--s-6); padding-top: var(--s-0); border-top: 1px solid var(--ds-rule); }
.page-audio main .guide-price .facts > div { grid-template-columns: calc(var(--s-0) * 5) minmax(0, 1fr); }
.page-audio main .guide-price .facts dd { font-weight: 700; }
.page-audio main .guide-price .note { margin: 0; color: var(--ds-muted); }

@media (max-width: 1023px) {
  .page-audio main .audio-try { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "player" "body"; row-gap: var(--s-1); padding: var(--s-4); }
  .page-audio main .audio-try__body { gap: var(--s-1); }
  .page-audio main .audio-try .topic-chips { grid-template-columns: repeat(6, auto); justify-content: start; }
  .page-audio main .audio-try .topic-chip { padding: 0 var(--s-0); }
}
@media (max-width: 767px) {
  .page-audio main .audio-try { margin-top: var(--s-4); margin-inline: 0; width: 100%; padding: var(--s-4) var(--gutter); border-radius: 0; }
  .page-audio main .audio-try .topic-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-audio main .audio-try .topic-chip { padding: 0 var(--s-n3); }
  .page-audio main .audio-try__act .btn { display: flex; width: 100%; }
  .page-audio main .audio-why, .page-audio main .guide-places, .page-audio main .guide-soon, .page-audio main .guide-steps { grid-template-columns: minmax(0, 1fr); }
  .page-audio main .audio-why { gap: var(--s-4); }
  .page-audio main .guide-soon > li:nth-child(2) { border-top: 0; }
  .page-audio main .guide-steps { gap: var(--s-1); }
  .page-audio main .guide-steps > li { display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr); align-items: baseline; }
  .page-audio main .guide-steps > li::before { margin: 0; font-size: var(--s-4); }
  .page-audio main .guide-price .facts > div { grid-template-columns: calc(var(--s-0) * 4) minmax(0, 1fr); }
}