/* ==========================================================================
   Compass Circle — 今月の質問ページ(月替り)
   Figma node 2002:548 "Circle_October2026" が元。ただしコメント投稿(2002:521)は
   別ページにせず、Thoughts の下にフォーム → その下に承認済みの声を縦並びにした。
   本文カラムは Figma の x=200 / width=1040 に合わせる。
   ========================================================================== */

.question-page {
  /* Figma: 本文は左端から200px、幅1040px(= 1440 - 200 x 2) */
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: clamp(24px, 13.9vw, 200px);
}

/* Figma: パンくずは本文カラムより50px外側(x=150) */
.question-breadcrumb {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 2.6px;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  padding-top: 60px;
}

/* 本文カラムが200pxまで開いたら、パンくただけ50px外へ出す(Figma: x=150) */
@media (min-width: 1440px) {
  .question-breadcrumb {
    margin-left: -50px;
  }
}

/* ---- HEADLINE ---------------------------------------------------------- */
.question-headline {
  text-align: center;
  padding-top: clamp(48px, 7vw, 104px);
}

.question-headline__month {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 1.4px;
  margin: 0 0 24px;
}

/* Figma: IBM Plex Mono 58px / 行送り80px */
.question-headline__title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 58px);
  line-height: 1.38;
  margin: 0 0 clamp(24px, 3vw, 44px);
}

.question-headline__rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.question-headline__lead {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 30px;
  margin: 25px 0 0;
}

/* ---- Thoughts from Toru. ----------------------------------------------- */
.question-thoughts {
  padding-top: clamp(64px, 9vw, 137px);
}

.question-section__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 13px;
}

.question-thoughts__grid {
  display: grid;
  /* Figma: 写真366px、本文は x=636 から482px */
  grid-template-columns: 366px 482px;
  justify-content: space-between;
  gap: 40px;
  align-items: start;
}

.question-thoughts__photo img {
  width: 100%;
  height: auto;
}

.question-thoughts__body p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  margin: 0;
}

/* ---- Join the conversation(フォーム) ----------------------------------- */
.question-join {
  padding-top: clamp(56px, 7vw, 96px);
  /* 入力欄は本文カラムいっぱいではなく読みやすい幅に収める */
  max-width: 760px;
}

.question-join__form .form-field textarea {
  height: auto;
  min-height: 160px;
}

/* PCではコメント欄が縦に伸びすぎるので、name と email を1行に並べ、
   入力欄の高さも contact ページ(62px)の半分に詰める。
   スマホは1カラムのままなので、この指定はPC幅だけに当てる。 */
@media (min-width: 901px) {
  .question-join__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .question-join__form .form-field {
    margin-bottom: 0;
  }

  /* 既定は2列ぶち抜き。Name と Email だけ半分幅にする。
     並び順で決めるとスパム対策プラグインが差し込む要素でずれるため、
     クラスで明示する。 */
  .question-join__form > * {
    grid-column: 1 / -1;
  }

  .question-join__form .form-field--half {
    grid-column: auto;
  }

  .question-join__form .form-field input {
    height: 30px;
    padding-block: 0;
  }

  /* 行間は grid の gap に任せる(注記の margin と二重にしない) */
  .question-join__form .question-join__note {
    margin-top: 0;
  }
}

/* 送信ボタン(Figma: 黒ベタ) */
.question-join__submit {
  display: block;
  width: 100%;
  height: 56px;
  border: 1px solid var(--color-border);
  background: var(--color-footer-bg);
  color: var(--color-footer-fg);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.8px;
  cursor: pointer;
}

.question-join__note {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 22px;
  color: var(--color-fg-muted);
  margin: 16px 0 0;
}

/* 送信直後(承認待ち)の通知 */
.question-notice {
  border: 1px solid var(--color-border);
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 32px;
}

/* ---- Voices from readers.(承認済みコメント・縦並び) --------------------- */
.question-voices {
  padding-top: clamp(56px, 7vw, 96px);
}

.voice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}

.voice-item {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding: 24px 0;
}

.voice-item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.voice-item__meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 8px;
}

.voice-item__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
}

.voice-item__date {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 24px;
  color: var(--color-fg-faint);
}

.voice-item__text {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  margin: 0;
}

.voice-list__empty {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  color: var(--color-fg-muted);
  margin: 0;
}

/* ---- CTA --------------------------------------------------------------- */
.question-cta {
  display: flex;
  justify-content: center;
  padding-top: clamp(64px, 9vw, 151px);
  padding-bottom: clamp(64px, 8vw, 121px);
}

/* Figma: 253.64 x 55.51 のボックス */
.question-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 254px;
  height: 56px;
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  text-align: center;
}

.question-cta__button + .question-cta__button {
  margin-left: -1px;
}

/* ---- レスポンシブ -------------------------------------------------------- */
@media (max-width: 900px) {
  .question-thoughts__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .question-cta {
    flex-direction: column;
    align-items: center;
  }
  .question-cta__button + .question-cta__button {
    margin-left: 0;
    margin-top: -1px;
  }
}