/* FILE: assets/css/page-philosophy.css */
/* PHILOSOPHYページ（/philosophy/index.html）固有のスタイル */

/* =========================================================
   VISION / MISSION / VALUE の各ブロック

   セクションごとに地色を交互に変えて、区切りを分かりやすくする
   （HANDOVER_v3.md §5-4「ライトグレー地に白のボックスを浮かせる」）
   ========================================================= */
.philosophy-block .bar-label {
  margin-bottom: var(--space-md);
}

.philosophy-block__title {
  font-size: var(--fs-2xl);
  line-height: 1.35;
  margin-bottom: var(--space-sm);
  overflow-wrap: break-word;
}

/* 英字の見出しはやや字間を広げる */
.philosophy-block__title.lang-en {
  letter-spacing: 0.04em;
}

/* VISION の日本語サブコピー */
.philosophy-block__lead {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-ink-sub);
  padding-bottom: var(--space-md);
  border-bottom: var(--line-width) solid var(--color-line);
  margin-bottom: var(--space-lg);
}

/* 本文は1行が長くなりすぎないように幅を制限する */
.philosophy-block__body {
  max-width: 46em;
}

.philosophy-block__body p {
  line-height: 2;
}

/* =========================================================
   VALUE：黒い正方形の連番 + 淡いブルーの横帯
   （.numbered-bar は layout.css で定義。元資料の視覚言語を流用）
   ========================================================= */
.philosophy-values {
  max-width: 46em;
}

/* 連番はCSSではなくHTMLに書いてあるので、リストのマーカーは出さない */
.philosophy-values .numbered-bar {
  margin-bottom: var(--space-xs);
}

@media (max-width: 767px) {
  .philosophy-block__title {
    font-size: var(--fs-xl);
  }
  .philosophy-block__lead {
    font-size: var(--fs-base);
  }
  .philosophy-block__body p {
    line-height: 1.9;
  }
  /* 連番の枠が幅を取りすぎないようにする */
  .philosophy-values .numbered-bar__num {
    flex-basis: 48px;
    font-size: var(--fs-md);
  }
}

/* =========================================================
   Culture Deck の埋め込み（第20弾）

   スマートフォンのブラウザは、ページの中にPDFを埋め込んでも
   表示できないものが多い（真っ白になる）。
   そのため 767px以下では埋め込みを出さず、
   「別のタブで開く」リンクだけを見せる。
   ========================================================= */
.culture-deck {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--line-width) solid var(--color-line);
}

.culture-deck__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
}

.culture-deck__viewer {
  margin-top: var(--space-lg);
  background-color: var(--color-frame);
  border: 1px solid var(--color-frame-line);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

/* スライドは横長（16:9）なので、その比率で高さを確保する */
.culture-deck__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  border: 0;
}

/* ページ送りの操作 */
.culture-deck__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--line-width) solid var(--color-line);
}

.culture-deck__btn {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #FFFFFF;
  background-color: var(--color-bar);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6em 1.2em;
  cursor: pointer;
  transition: opacity 0.15s;
}

.culture-deck__btn:hover:not(:disabled) {
  opacity: 0.8;
}

.culture-deck__btn:disabled {
  background-color: var(--color-line);
  color: var(--color-muted);
  cursor: default;
}

.culture-deck__counter {
  font-size: var(--fs-sm);
  color: var(--color-ink-sub);
  min-width: 5em;
  text-align: center;
}

.culture-deck__link {
  margin-top: var(--space-sm);
}

@media (max-width: 767px) {
  /* 埋め込みは出さず、リンクだけにする */
  .culture-deck__viewer {
    display: none;
  }
  .culture-deck__link {
    margin-top: var(--space-md);
  }
}