/* ============================================================
 * oripa.css — /oripa/ 配下スコープのデザインシステム適用
 *
 * 仕組み: body に `.oripa-scope` クラスが付いた時のみ効く。
 * 既存 style.css の CSS Custom Properties（--color-*, --ed-*）を
 * /oripa/ スコープ下で再宣言することで、既存コンポーネントの
 * class 構造を1行も触らずにモノクロ基調へ変換する（cascade経由）。
 *
 * /company/ は layout.php を経由しないため自動的に対象外。
 *
 * 設計原則:
 *  - 値は必ず --c-* / --ds-* semantic トークン経由で参照
 *  - 生hex / 生px 禁止（CLAUDE.md「デザインシステム」参照）
 * ============================================================ */

/* ============================================================
 * Layer 1: ベーステーマ（style.css :root の --color-*）のモノクロ化
 *
 * これにより var(--color-primary) などを参照する既存コンポーネント
 * 全てが /oripa/ 内では黒系で表示される（CSS cascade 経由）。
 * ボタン枠・Q.マーク・番号・タグ色などが一括で黒に変わる。
 * ============================================================ */
body.oripa-scope {
  --color-text:         var(--c-ink-black);
  --color-text-muted:   var(--c-gray-600);
  --color-bg-soft:      var(--c-gray-50);
  --color-border:       var(--c-gray-200);
  --color-primary:      var(--c-ink-black);
  --color-primary-soft: var(--c-gray-100);
  --color-accent:       var(--c-gray-700);
  --color-success:      var(--c-positive-500);
  --color-warning:      var(--c-warning-500);
  --color-danger:       var(--c-danger-500);

  background: var(--ds-color-bg-paper);
}

/* ============================================================
 * Layer 2: EDITORIAL テーマ（.area-article--editorial の --ed-*）
 * のモノクロ化。記事ページのネイビー罫線・見出し色・リンク色を黒に。
 *
 * 既存の --ed-holo（記事ヘッダー上部の細いホログラフィック区切り線）
 * は温存。ただし EDITORIAL theme 未適用の area ページのために
 * Layer 3 でホロ帯を base theme にも追加する。
 * ============================================================ */
.oripa-scope .area-article--editorial {
  --ed-navy: var(--c-ink-black);
  --ed-link: var(--c-ink-black);
}

/* ============================================================
 * Layer 3: ヒーロー装飾線（ホログラフィック）の追加・強化
 *
 * area JSON の theme 未設定ページ（堺ページなど EDITORIAL 非適用）
 * にも /oripa/ 配下なら確実にホロ帯を表示。border 厚みを 6px に
 * 上げて視認性を確保（3px では埋没していた）。
 * DESIGN.md「ヒーローセクションの細い装飾線」用途。
 * ============================================================ */
.oripa-scope .area-article__header {
  padding-top: var(--ds-space-stack-md);
  border-top: var(--ds-border-width-divider) solid transparent;
  border-image: var(--c-holo-gradient) 1;
}

/* ============================================================
 * Layer 4: 状態色の調整
 *
 * .area-key-facts の値（「0店舗」など）は danger red ではなく
 * 黒太字とする。情報整理メディアとして「強調」は太字で表現し、
 * 赤は本当の警告（エラー・取扱なし）に限定する。
 * 既存 style.css: .area-key-facts td { font-weight: 700; color: var(--color-danger) }
 * → font-weight は維持、color のみ黒に上書き
 * ============================================================ */
.oripa-scope .area-key-facts td {
  color: var(--ds-color-text);
}

/* ============================================================
 * Layer 5: card-block__image への OGP 画像埋め込み
 *
 * body_html 内の `<div class="card-block__image">XXX</div>` を
 * AreaController@pillar の str_replace で `--has-ogp` modifier 付き
 * に変換している。CSS はテキストを透明にして background-image を
 * 表示するだけ。OGP 未取得サイトは modifier が付かないため、
 * 既存のテキスト表示（ORIPAONE 等）がそのまま残る。
 * ============================================================ */
.oripa-scope .card-block__image--has-ogp {
  color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================
 * Layer 6: SP（スマートフォン）対応
 *
 * iPhone 相当幅 (375px) で /oripa/ のランキングカードが破綻する
 * 問題への対応。原因は best-pillar 系コンポーネントが固定 px
 * カラム（200px / 220px / 32px padding）で組まれており、
 * 375px viewport には総量がはみ出る点。
 *
 * 方針: .area-article--best-pillar 配下のグリッドを SP ではすべて
 * 1 カラム (stack) に倒し、固定幅は max-width に置換、左右 padding を
 * --ds-space-page-x まで詰める。値は必ず --ds-* / primitive --space-*
 * 経由。.oripa-scope 配下のみ効くため /company/ には影響しない。
 *
 * ブレークポイント:
 *   <= 640px → 縦積み・1 カラム・最小パディング (SP)
 *   641px〜768px → 中間（メトリクスは 3 列維持・CTA は横並びへ）
 * ============================================================ */
@media (max-width: 640px) {
  /* --- ヒーロー --- */
  .oripa-scope .area-article--best-pillar .hero {
    padding: var(--ds-space-stack-md) var(--ds-space-page-x) var(--ds-space-stack-lg);
  }
  .oripa-scope .area-article--best-pillar .hero__h1 {
    font-size: var(--fs-22);
    line-height: var(--lh-tight);
    word-break: break-word;
  }
  .oripa-scope .area-article--best-pillar .hero__lead {
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
  }
  .oripa-scope .area-article--best-pillar .hero__top {
    font-size: var(--fs-12);
  }

  /* --- ランキングセクション --- */
  .oripa-scope .area-article--best-pillar .ranking {
    padding: var(--ds-space-stack-lg) var(--ds-space-page-x);
  }
  .oripa-scope .area-article--best-pillar .ranking__head-title {
    font-size: var(--fs-22);
  }

  /* --- card-block 全体: SP では縦積み 1 カラム --- */
  .oripa-scope .area-article--best-pillar .card-block__head {
    grid-template-columns: 1fr;
    gap: var(--ds-space-stack-sm);
    padding: var(--ds-space-stack-sm) var(--ds-space-stack-sm);
  }
  /* OGP/サムネ画像は横幅 100% の 16:10 ボックスに */
  .oripa-scope .area-article--best-pillar .card-block__image {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 10;
    flex-shrink: 1;
  }
  /* 店名 26px → SP では 20px に縮小して 1〜2 行に収める */
  .oripa-scope .area-article--best-pillar .card-block__name {
    font-size: var(--fs-20);
    line-height: var(--lh-tight);
    word-break: break-word;
  }
  /* レーティング行は折返し許可 */
  .oripa-scope .area-article--best-pillar .card-block__rating-row {
    flex-wrap: wrap;
    row-gap: var(--ds-space-inline-sm);
  }
  /* 「比較リストに追加」は横並びを保つため min-width 0 + nowrap */
  .oripa-scope .area-article--best-pillar .card-block__compare {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    min-height: var(--ds-touch-target-min);          /* タップ領域 44px 確保 */
  }
  /* CTA カラムは横幅 100% に展開（縦積み解除） */
  .oripa-scope .area-article--best-pillar .card-block__cta {
    width: 100%;
  }
  .oripa-scope .area-article--best-pillar .card-block__apply {
    min-height: var(--ds-touch-target-min);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-14);
    letter-spacing: .08em;
  }

  /* --- メトリクス 3 カラム → 2 カラム (3 項目目は全幅) ---
   * 5 項目 (metrics 3 + sub-metrics 2) を縦 5 段から 2-1-2 構成に圧縮。
   * CSS-only では grid 跨ぎ不可なため、metrics の最終要素 (奇数番) を
   * grid-column: 1/-1 で全幅にし、sub-metrics を 2 列に戻す。
   * --------------------------------------------------------- */
  .oripa-scope .area-article--best-pillar .card-block__metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .oripa-scope .area-article--best-pillar .card-block__metric {
    padding: var(--space-4) var(--ds-space-stack-sm);
    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
    border-right: var(--ds-border-width) solid var(--ds-color-border);
  }
  .oripa-scope .area-article--best-pillar .card-block__metric:nth-child(2n) {
    border-right: 0;
  }
  /* 奇数番で最終要素 (3 項目目) → 全幅 */
  .oripa-scope .area-article--best-pillar .card-block__metric:nth-child(odd):last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }
  .oripa-scope .area-article--best-pillar .card-block__metric-value {
    font-size: var(--fs-18);
    word-break: break-word;
  }

  /* --- サブメトリクス: 2 カラム維持 (古物商許可 + 広告認知) --- */
  .oripa-scope .area-article--best-pillar .card-block__sub-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .oripa-scope .area-article--best-pillar .card-block__sub-metric {
    padding: var(--space-4) var(--ds-space-stack-sm);
    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
    border-right: var(--ds-border-width) solid var(--ds-color-border);
  }
  .oripa-scope .area-article--best-pillar .card-block__sub-metric:nth-child(2n) {
    border-right: 0;
  }
  .oripa-scope .area-article--best-pillar .card-block__sub-metric:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  /* --- ペナント / タグの左右パディング詰め --- */
  .oripa-scope .area-article--best-pillar .card-block__pennant-text {
    padding: var(--space-3) var(--ds-space-stack-sm);
    font-size: var(--fs-12);
    letter-spacing: .08em;
  }
  .oripa-scope .area-article--best-pillar .card-block__tag {
    margin: var(--ds-space-stack-sm) var(--ds-space-stack-sm) 0;
    font-size: var(--fs-12);
  }

  /* --- アコーディオン --- */
  .oripa-scope .area-article--best-pillar .card-block__acc summary {
    padding: var(--space-3) var(--ds-space-stack-sm);
    min-height: var(--ds-touch-target-min);
  }
  .oripa-scope .area-article--best-pillar .card-block__acc-body {
    padding: var(--space-3) var(--ds-space-stack-sm) var(--space-4);
  }

  /* --- FAQ 番号カラムを SP では小さく / 縦積み --- */
  .oripa-scope .area-article--best-pillar .faq-item {
    flex-direction: column;
    gap: var(--ds-space-inline-sm);
    padding: var(--ds-space-stack-md) 0;
  }
  .oripa-scope .area-article--best-pillar .faq-item__num {
    flex: 0 0 auto;
  }
  .oripa-scope .area-article--best-pillar .faq-item h3 {
    font-size: var(--fs-15);
  }

  /* --- area-key-facts table も SP で詰める --- */
  .oripa-scope .area-key-facts th,
  .oripa-scope .area-key-facts td {
    padding: var(--space-3) var(--space-2);
    font-size: var(--fs-13);
  }

  /* --- breadcrumb は折返し許可 --- */
  .oripa-scope .breadcrumb {
    flex-wrap: wrap;
    word-break: break-word;
  }
}

/* タブレット（641〜768px）: メトリクスは 3 列維持、CTA は店名行の下に */
@media (min-width: 641px) and (max-width: 768px) {
  .oripa-scope .area-article--best-pillar .card-block__head {
    grid-template-columns: 1fr;
    gap: var(--ds-space-stack-sm);
    padding: var(--ds-space-stack-md);
  }
  .oripa-scope .area-article--best-pillar .card-block__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .oripa-scope .area-article--best-pillar .card-block__cta {
    flex-direction: row;
    align-items: stretch;
  }
  .oripa-scope .area-article--best-pillar .card-block__compare,
  .oripa-scope .area-article--best-pillar .card-block__apply {
    flex: 1;
    min-height: var(--ds-touch-target-min);
    justify-content: center;
  }
}

/* ============================================================
 * Layer 7: カラーアクセント (ゴールド星評価 + 単色パステル特集バッジ)
 *
 * DESIGN.md §2.4 / §2.5 で定義した「限定アクセント色」を /oripa/
 * 配下にだけ適用する。
 *
 * - ★ 星評価をゴールドに（既存 style.css の .card-block__stars
 *   などのモノクロを上書き）
 * - 特集バッジ（「2026年 総合NO.1」「目的別おすすめ」など）に
 *   単色パステル背景を当てる
 *
 * ホロ帯（ヒーロー）と「グラデ 1 個」ルールには違反しない
 * （こちらは単色なので別カテゴリ）。
 * ============================================================ */

/* --- A. 星評価のゴールド化 --- */
.oripa-scope .card-block__stars {
  color: var(--ds-color-rating);
  letter-spacing: 0.05em;
}
.oripa-scope .card-block__stars-empty,
.oripa-scope .card-block__stars .card-block__stars-empty {
  color: var(--ds-color-rating-empty);
}

/* --- B. 特集バッジに単色パステル ---
 * 1 位ペナント（「2026年 総合No.1 オリパ」）: mint
 * 2 位以下「目的別おすすめ：◯◯」タグ: peach
 *
 * 既存 style.css は .card-block__pennant-text / .card-block__tag を
 * background: var(--soft) (≒ very light gray) で塗っているので、
 * .oripa-scope 配下でのみ background を単色パステルへ差し替える。
 * 文字色は --ds-color-badge-text (= ink-black) で読み取り性を担保。
 */
.oripa-scope .area-article--best-pillar .card-block__pennant-text {
  background: var(--ds-color-badge-bg-mint);
  color: var(--ds-color-badge-text);
}
.oripa-scope .area-article--best-pillar .card-block__tag {
  background: var(--ds-color-badge-bg-peach);
  color: var(--ds-color-badge-text);
}