/* ============================================================
   お客様の声（/voice）ページ固有スタイル
   共通: ../../css/{tokens,base,components}.css
   方針：ブラウン基調・写真無しの引用カード（2カラム）
   署名＝大きな引用符のあしらい＋属性に添える短いブラウンの罫
   ============================================================ */

/* スクリーンリーダー専用見出し */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 1. ページタイトル＋導入（中央・掛軸のあしらい） ---- */
.page-hero { padding-block: var(--space-1600) var(--space-1200); }
.page-hero__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-600); padding-top: var(--space-800);
}
/* タイトル上の縦の細線（掛軸のモチーフ） */
.page-hero__inner::before { content: ""; width: 1px; height: 56px; background: var(--color-primary); }
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-200);
  font: 500 14px/1.6 var(--font-base); color: var(--color-text-soft); letter-spacing: .12em;
}
.page-hero__eyebrow .icon { font-size: 18px; color: var(--color-primary); }
.page-hero__title {
  font: 700 56px/1.3 var(--font-display); letter-spacing: .12em; color: var(--color-primary-deep);
}
.page-hero__lead { font: 500 17px/2 var(--font-base); color: var(--color-text); max-width: 720px; }

/* ---- 2. お客様の声一覧（引用カード・2カラム） ---- */
.voice-section { gap: var(--space-800); }
.voice-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-600);
  width: 100%; list-style: none;
}
.voice-list > li { display: flex; }

.voice-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-400);
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  padding: var(--space-1200) var(--space-800) var(--space-800);
  box-shadow: 0 8px 16px rgba(63, 63, 63, .03);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* 署名＝大きな引用符（左上にやわらかく置く） */
.voice-card::before {
  content: "\201C";
  position: absolute; top: var(--space-200); left: var(--space-600);
  font: 700 64px/1 Georgia, "Times New Roman", serif;
  color: var(--color-secondary);
  transition: color .25s ease;
  pointer-events: none;
}
.voice-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 16px 36px rgba(63, 63, 63, .1);
  transform: translateY(-3px);
}
.voice-card:hover::before { color: var(--color-primary); }

.voice-card__quote {
  display: flex; flex-direction: column; gap: var(--space-300);
  margin: 0; flex: 1;
}
.voice-card__title {
  font: 700 20px/1.7 var(--font-display); letter-spacing: .02em; color: var(--color-primary-deep);
  transition: color .2s ease;
}
.voice-card:hover .voice-card__title { color: var(--color-primary); }
.voice-card__text {
  font: 400 15px/1.95 var(--font-base); color: var(--color-text-soft);
}

/* 属性（地域・年代・性別）＝短いブラウンの罫を添えて出典らしく */
.voice-card__attr {
  display: inline-flex; align-items: center; gap: var(--space-300);
  font: 700 14px/1 var(--font-base); font-style: normal; letter-spacing: .06em;
  color: var(--color-text);
}
.voice-card__attr::before {
  content: ""; width: 24px; height: 2px; background: var(--color-primary); flex: none;
}

/* ---- 3. ページ送り ---- */
.voice-pager { display: flex; justify-content: center; }
.voice-pager__next .icon-arrow { transition: transform .25s ease; }
.voice-pager__next:hover .icon-arrow { transform: translateX(4px); }

/* ============================================================
   ブラッシュアップ（uiverse由来の上品な微インタラクション）
   ・カラー/トークンの正は不変。ブラウン基調を維持しアクセントは控えめ。
   ・参考(MIT): uiverse.io satyamchaudharydev 系 hover カード／
     テスティモニアルカードの引用符あしらい。トークンに置換して採用。
   ============================================================ */

/* 1. ヒーロー：淡いブラウンの放射グラデで空気感を添える */
.page-hero { position: relative; isolation: isolate; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 78% at 50% 0%, rgba(155, 135, 89, .12), transparent 70%);
}

/* 2. 引用カード：上端のアクセントバー（ホバーで左から伸びる）＋引用符のふわっと拡大 */
.voice-card { overflow: hidden; }
.voice-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.23, 1, .32, 1);
}
.voice-card:hover::after { transform: scaleX(1); }
.voice-card::before { transition: color .25s ease, transform .25s ease; }
.voice-card:hover::before { color: var(--color-primary); transform: translateY(-2px) scale(1.06); }

/* 属性の短い罫はホバーでゆっくり伸びる */
.voice-card__attr::before { transition: width .35s cubic-bezier(.23, 1, .32, 1); }
.voice-card:hover .voice-card__attr::before { width: 40px; }

/* 3. ページ送りボタン：ホバーでわずかに浮く */
.voice-pager__next { transition: transform .25s ease, background .2s ease, box-shadow .25s ease; }
.voice-pager__next:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(155, 135, 89, .28); }

/* 4. 初回ロードの上品なフェードアップ（カードを少しずつずらして出す） */
@media (prefers-reduced-motion: no-preference) {
  @keyframes voice-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .voice-card { opacity: 0; animation: voice-rise .6s cubic-bezier(.23, 1, .32, 1) both; }
  .voice-list > li:nth-child(1) .voice-card { animation-delay: .04s; }
  .voice-list > li:nth-child(2) .voice-card { animation-delay: .10s; }
  .voice-list > li:nth-child(3) .voice-card { animation-delay: .16s; }
  .voice-list > li:nth-child(4) .voice-card { animation-delay: .22s; }
  .voice-list > li:nth-child(5) .voice-card { animation-delay: .28s; }
  .voice-list > li:nth-child(6) .voice-card { animation-delay: .34s; }
  .voice-list > li:nth-child(7) .voice-card { animation-delay: .40s; }
  .voice-list > li:nth-child(8) .voice-card { animation-delay: .46s; }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 960px) {
  .voice-list { grid-template-columns: 1fr; }
  .voice-card { padding: var(--space-1200) var(--space-600) var(--space-600); }
}
@media (max-width: 600px) {
  .page-hero__title { font-size: 40px; }
  .voice-card__title { font-size: 18px; }
  .voice-card::before { font-size: 54px; }
}