/* =========================================================
   cards_feature.css ── フィーチャー/サービス/ボタン/バンド
   ── 特設(page_netsu)由来の便利な要素を「森テーマの共通
      コンポーネント」として通常記事でも使えるよう取込んだもの。
      (合併メモ: design-docs/10_netsu_merge.md)

   【このファイルの責務】
   - .feature-grid / .feature-card（アイコン+見出し+説明の3カラム）
   - .service-grid / .service-card（画像+見出し+抜粋のカード）
   - .lb-btn（--primary / --outline / --hero）（CTA ボタン）
   - .section--dark / .band（強調バンド：深い森の地 + 淡色文字）

   【alias 互換】
   ・各セレクタに .netsu-* を複合追加。通常記事では森で表示。
   ・特設ページ内 (.netsu-page .netsu-*) は page_netsu.css が後勝ち
     するため従来の熱デザインのまま（後方互換）。

   【関連ファイル】
   - 書架/著者カード   → cards_shelf.css
   - 写真/関連記事     → cards_photo.css
   - ボタン(ピル)      → layout.css (.lb-pill)
========================================================= */

/* =========================================================
   フィーチャーカード（.feature-card / .netsu-feature-card）
========================================================= */
.feature-grid,
.netsu-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.feature-card,
.netsu-feature-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-bottom: 4px solid transparent;
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.feature-card:hover,
.netsu-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-bottom-color: var(--accent);
}

.feature-card__icon,
.netsu-feature-card__icon {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--accent);
}

.feature-card__title,
.netsu-feature-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: .03em;
}

.feature-card__text,
.netsu-feature-card__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.8;
}

/* =========================================================
   サービスカード（.service-card / .netsu-service-card）
========================================================= */
.service-grid,
.netsu-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.service-card,
.netsu-service-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.service-card:hover,
.netsu-service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--accent-2);
}

.service-card__image,
.netsu-service-card__image {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, var(--paper-3), var(--accent-soft));
  object-fit: cover;
  width: 100%;
}

.service-card__body,
.netsu-service-card__body {
  padding: 16px 18px 18px;
}

.service-card__title,
.netsu-service-card__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: .03em;
}

.service-card__excerpt,
.netsu-service-card__excerpt {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.75;
}

/* =========================================================
   CTA ボタン（.lb-btn / .netsu-btn）
   ── ピル(.lb-pill)より主張の強い行動誘導ボタン
========================================================= */
.lb-btn,
.netsu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .7em 1.8em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lb-btn:hover,
.lb-btn:focus-visible,
.netsu-btn:hover,
.netsu-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.lb-btn:active,
.netsu-btn:active { transform: translateY(0); }

/* 塗り（主アクション） */
.lb-btn--primary,
.lb-btn--hero,
.netsu-btn--primary,
.netsu-btn--hero {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.lb-btn--primary:hover,
.lb-btn--hero:hover,
.netsu-btn--primary:hover,
.netsu-btn--hero:hover {
  background: #3d5236;
  border-color: #3d5236;
  color: #fff;
}

/* ヒーロー用は大きめ */
.lb-btn--hero,
.netsu-btn--hero {
  font-size: 16px;
  padding: .85em 2.3em;
}

/* 線（副アクション） */
.lb-btn--outline,
.netsu-btn--outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.lb-btn--outline:hover,
.netsu-btn--outline:hover {
  background: var(--accent);
  color: #fff;
}

/* =========================================================
   強調バンド（.section--dark / .band / .netsu-section--dark）
   ── 深い森の地 + 淡色文字。CTA や引用の強調に
========================================================= */
.band,
.section--dark,
.netsu-section--dark {
  background: #2b3524;          /* 深い森 */
  color: #eef0e2;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 44px);
  margin: 32px 0;
}

/* バンド内: 見出し・説明・ラベルを淡色化 */
.section--dark .section__title,
.band .section__title { color: #fff; }
.section--dark .section__desc,
.band .section__desc { color: rgba(238,240,226,.8); }
.section--dark .section__title::before,
.section--dark .section__title::after,
.band .section__title::before,
.band .section__title::after {
  background: linear-gradient(90deg, transparent, rgba(238,240,226,.5), transparent);
}

/* バンド内の葉番号(章扉)も淡色 */
.section--dark .section__title.is-chapter::before,
.band .section__title.is-chapter::before { background: var(--accent-2); }

/* バンド内ラベル */
.band__label,
.netsu-section__label--light {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #cdd6b0;
  background: rgba(168,180,110,.16);
  padding: .35em 1.2em;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* バンド内のアウトラインボタンは淡色枠に */
.band .lb-btn--outline,
.section--dark .lb-btn--outline {
  color: #eef0e2;
  border-color: rgba(238,240,226,.6);
}
.band .lb-btn--outline:hover,
.section--dark .lb-btn--outline:hover {
  background: #eef0e2;
  color: #2b3524;
}

/* =========================================================
   汎用フォーム（.lb-form / Contact Form 7 / .netsu-form）
   ── 問い合わせ等の入力フォームを森テーマで統一。
      Contact Form 7 (.wpcf7-form) のコントロールにも適用。
      特設ページ内の .netsu-section--dark .wpcf7-form は
      page_netsu.css が後勝ち（後方互換）。
========================================================= */
.lb-form,
.wpcf7-form {
  max-width: 560px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lb-form label,
.wpcf7-form label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb-form input[type="text"],
.lb-form input[type="email"],
.lb-form input[type="tel"],
.lb-form textarea,
.lb-form select,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.lb-form input:focus,
.lb-form textarea:focus,
.lb-form select:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.lb-form textarea,
.wpcf7-form textarea { min-height: 140px; resize: vertical; }

/* 送信ボタン = lb-btn--primary と同等の森塗りボタン */
.lb-form button[type="submit"],
.lb-form input[type="submit"],
.wpcf7-form input[type="submit"] {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 999px;
  padding: .7em 2em;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.lb-form input[type="submit"]:hover,
.lb-form button[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover {
  background: #3d5236;
  border-color: #3d5236;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}