/* ==========================================================================
   Solution — アーカイブ・個別ページ レイアウト
   ========================================================================== */

/* アーカイブ：リード文 */
.solution-archive-lead {
  margin-bottom: 3rem;
  color: #555;
}

/* アーカイブ：コンテンツとフッターの間の余白 */
.solution-archive {
  padding-bottom: 5rem;
}

/* アーカイブ：グリッド（PC=3カラム固定） */
.solution-grid {
  gap: 2rem;
}

.solution-archive .solution-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .solution-archive .solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .solution-archive .solution-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* アーカイブ：カード */
.solution-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.solution-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.solution-card .wp-block-post-featured-image {
  margin: 0;
}

.solution-card .wp-block-post-featured-image img {
  border-bottom: 1px solid #eee;
  /* ヒーロー用の横長画像・ロゴ等もカードに収まるよう contain 表示 */
  object-fit: contain !important;
  background: #fff;
}

.solution-card .wp-block-post-title {
  font-size: 1.2rem;
  margin: 1.25rem 1.5rem 0.5rem;
}

.solution-card .wp-block-post-title a {
  color: #0051af;
  text-decoration: none;
}

.solution-card .wp-block-post-title a:hover {
  text-decoration: underline;
}

.solution-card .wp-block-post-excerpt {
  margin: 0 1.5rem 1rem;
  font-size: 0.9rem;
  color: #555;
  flex-grow: 1;
}

.solution-card .wp-block-post-excerpt p {
  margin: 0;
}

/* 抜粋内の「続きを読む」リンクは非表示（カード下部の「詳しく見る」に集約） */
.solution-card .wp-block-post-excerpt__more-text {
  display: none;
}

.solution-card .wp-block-read-more {
  margin: 0 1.5rem 1.25rem;
  align-self: flex-end;
  color: #0051af;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.solution-card .wp-block-read-more::after {
  content: " →";
}

.solution-card .wp-block-read-more:hover {
  text-decoration: underline;
}

/* ==========================================================================
   カタログダウンロードページ：カード内側の余白
   （枠線・角丸・ホバーは .solution-card を共用）
   ========================================================================== */
.catalog-card {
  height: 100%;
}

.catalog-card .wp-block-image {
  margin: 0;
}

.catalog-card .wp-block-image img {
  width: 100%;
}

/* 内側余白はアーカイブカード（.solution-card）と同じ 1.5rem 基準 */
.catalog-card h3 {
  margin: 1.25rem 1.5rem 0.5rem;
  font-size: 1.2rem;
}

.catalog-card p {
  margin: 0 1.5rem 1rem;
  flex-grow: 1;
}

.catalog-card .wp-block-buttons {
  margin: auto 1.5rem 1.25rem;
}

/* ダウンロードボタン下のPDFサイズ表記 */
.catalog-card .wp-block-buttons:has(+ p.pdf-size) {
  margin-bottom: 0;
}

.catalog-card p.pdf-size {
  flex-grow: 0;
  margin: 0.5rem 1.5rem 1.25rem;
  text-align: center;
  font-size: 13px;
  color: var(--wp--preset--color--primary);
}

/* 個別ページ：h2 上の余白を2倍に（デフォルト 24px → 48px） */
.solution-single h2.wp-block-heading {
  margin-top: 48px;
}

/* ==========================================================================
   特長項目のアイコン（Material Symbols Outlined）
   見出しブロックに ficon-{アイコン名} クラスを付けると ::before で表示。
   アイコンを追加するときは functions.php の icon_names にも名前を追記する。
   ========================================================================== */
.solution-single h3[class*="ficon-"]::before {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  display: inline-block;
  vertical-align: -0.22em;
  margin-right: 0.5rem;
  font-size: 1.3em;
  line-height: 1;
  color: #0051af;
  -webkit-font-smoothing: antialiased;
}

/* AI BOX */
.ficon-cable::before { content: "cable"; }
.ficon-psychology::before { content: "psychology"; }
.ficon-hub::before { content: "hub"; }
.ficon-factory::before { content: "factory"; }
.ficon-dashboard::before { content: "dashboard"; }
.ficon-videocam::before { content: "videocam"; }

/* AVIGILON */
.ficon-4k::before { content: "4k"; }
.ficon-person-search::before { content: "person_search"; }
.ficon-cell-tower::before { content: "cell_tower"; }
.ficon-search::before { content: "search"; }
.ficon-extension::before { content: "extension"; }
.ficon-cloud::before { content: "cloud"; }

/* ボディカメラ */
.ficon-notifications-active::before { content: "notifications_active"; }
.ficon-picture-in-picture::before { content: "picture_in_picture"; }
.ficon-radar::before { content: "radar"; }
.ficon-badge::before { content: "badge"; }
.ficon-fact-check::before { content: "fact_check"; }
.ficon-security::before { content: "security"; }

/* OTRS10 */
.ficon-analytics::before { content: "analytics"; }
.ficon-compare::before { content: "compare"; }
.ficon-bar-chart::before { content: "bar_chart"; }
.ficon-description::before { content: "description"; }
.ficon-auto-awesome::before { content: "auto_awesome"; }
.ficon-smartphone::before { content: "smartphone"; }

/* 3T's */
.ficon-content-cut::before { content: "content_cut"; }
.ficon-subtitles::before { content: "subtitles"; }
.ficon-play-circle::before { content: "play_circle"; }
.ficon-all-inclusive::before { content: "all_inclusive"; }
.ficon-translate::before { content: "translate"; }
.ficon-timeline::before { content: "timeline"; }
.ficon-map::before { content: "map"; }

/* ==========================================================================
   個別ページ：フルワイドヒーロー（背景 = アイキャッチ画像）
   タイトルとキャッチを記事カラム（1100px）の左端に白文字で重ねる
   ========================================================================== */
.solution-hero-cover {
  margin-top: 88px; /* 固定ヘッダーの高さ分のオフセット */
}

.solution-hero-cover .wp-block-post-title {
  color: #fff;
  text-align: left;
  font-size: 48px;
  margin: 0 0 1rem;
}

.solution-hero-cover .solution-hero-catch p {
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 600px) {
  .solution-hero-cover .wp-block-post-title {
    font-size: 1.8rem;
  }

  .solution-hero-cover .solution-hero-catch p {
    font-size: 1.4rem;
  }
}

/* ヒーロー直下のパンくずは既定の80pxオフセットを持たせない */
.solution-single .yoast-breadcrumbs {
  padding-top: 1rem;
}

/* 共通ヒーローを使わないページ（VisualFactracer など）は
   固定ヘッダー分のオフセットを main 側で確保する */
body:not(:has(.solution-hero-cover)) .solution-single {
  padding-top: 88px;
}

/* 記事直下の背景色付きセクション（VFRの独自ヘッダー・業界別活用例など）を
   ブラウザ幅いっぱいに広げ、中身は記事カラム幅（1100px）で中央寄せする。
   constrained レイアウトは子の margin を auto !important にするため
   transform でセンター基準のフルブリードにする */
.solution-single .wp-block-post-content > .has-background {
  width: 100vw;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* HOME と同じ内側余白 */
  padding-left: 38px;
  padding-right: 38px;
}

/* 先頭が背景付きセクション（VFRの独自ヘッダー等）のページは
   main 側の固定ヘッダー用オフセット（88px）を打ち消し、
   セクションをヘッダー直下まで引き上げる */
.solution-single:has(.wp-block-post-content > .has-background:first-child) {
  padding-top: 0;
}

.solution-single:has(.wp-block-post-content > .has-background:first-child) .wp-block-post-content {
  margin-block-start: 0;
}

/* 独自ヘッダー型ページ（VFR）は HOME と同じく記事幅の制限（1100px）を外し、
   ブラウザ幅に合わせて大きく表示する */
.solution-single:has(.wp-block-post-content > .has-background:first-child) .wp-block-post-content,
.solution-single:has(.wp-block-post-content > .has-background:first-child) .wp-block-post-content > * {
  max-width: none;
}

/* 固定ヘッダーに隠れる分（88px）をセクションの上パディングで確保しつつ、
   見た目の上余白が下パディング（spacing 70 = 約54px）と揃うようにする */
.solution-single .wp-block-post-content > .has-background:first-child {
  margin-top: 0;
  padding-top: calc(88px + var(--wp--preset--spacing--70)) !important;
}

/* 記事末尾（ボタン）下の余白 */
.solution-single {
  padding-bottom: 5rem;
}

/* 資料ダウンロード／お問い合わせ ボタンの幅を揃える */
.solution-single .wp-block-buttons .wp-block-button__link {
  min-width: 260px;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  /* ブロック側のインライン指定（spacing プリセット）を上書き */
  padding-left: 20px !important;
  padding-right: 20px !important;
}

@media (max-width: 480px) {
  .solution-single .wp-block-buttons .wp-block-button__link {
    min-width: 0;
    width: 100%;
  }
}

/* 固定ヘッダー対策のフォールバック：
   本来は Yoast パンくずリスト（.yoast-breadcrumbs の padding-top: 80px）が
   固定ヘッダー分の余白を確保する設計。Yoast のパンくず出力が無効な環境では
   タイトルがヘッダーに隠れるため、パンくず不在時のみ余白を補う。 */
body:not(:has(.yoast-breadcrumbs)) .solution-archive,
body:not(:has(.yoast-breadcrumbs)) .products-archive {
  padding-top: 100px;
}