/**
 * SawaLeaf Insight — Phase 3-b CSS（archive のタグ/カテゴリ分岐 + full-bleed 修正）
 *
 * 1. Kadence Block Button を Primary Teal に強制
 * 2. Kadence Posts Block を full-bleed で 1100px まで広げる
 * 3. archive：タグ archive はタイル3列、カテゴリ archive はリスト型に分岐
 */

/* ===========================================================
 * 1. Kadence Block Button の Primary Teal 強制
 *    （33960ed から変更なし）
 * =========================================================== */

.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill,
.wp-block-kadence-singlebtn a.kb-button.kb-btn-global-fill {
  background-color: var(--wp--preset--color--primary) !important;
  color: #fff !important;
  border-color: var(--wp--preset--color--primary) !important;
}

.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill:hover,
.wp-block-kadence-singlebtn a.kb-button.kb-btn-global-fill:hover,
.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill:focus,
.wp-block-kadence-singlebtn a.kb-button.kb-btn-global-fill:focus {
  background-color: var(--wp--preset--color--primary-hover) !important;
  border-color: var(--wp--preset--color--primary-hover) !important;
  color: #fff !important;
}

.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-outline,
.wp-block-kadence-singlebtn a.kb-button.kb-btn-global-outline {
  background-color: transparent !important;
  color: var(--wp--preset--color--primary) !important;
  border-color: var(--wp--preset--color--primary) !important;
}

.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-outline:hover,
.wp-block-kadence-singlebtn a.kb-button.kb-btn-global-outline:hover {
  background-color: var(--wp--preset--color--primary) !important;
  color: #fff !important;
}

/* ===========================================================
 * 2. Kadence Posts Block の full-bleed wide 化（左寄せバグ修正）
 *
 * 旧 33960ed の margin-left:50%; transform:translateX(-50%) は
 * 親要素 740px の中央に固定されるバグがあったため撤回。
 * 代わりに「full-bleed」パターンを使う：
 *   - margin-left/right: calc(-50vw + 50%) で親 constraint を抜けて
 *     ビューポート全幅に広がる
 *   - padding-left/right で内側を 1100px に再制約
 * =========================================================== */

.wp-block-kadence-posts.grid-cols.grid-lg-col-3 {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: max(24px, calc((100vw - 1100px) / 2));
  padding-right: max(24px, calc((100vw - 1100px) / 2));
  box-sizing: border-box;
}

/* タイトルのフォントサイズと行送り（3列でも詰まらないように） */
.wp-block-kadence-posts .entry-title {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  word-break: normal;
  overflow-wrap: anywhere;
}

.wp-block-kadence-posts .entry-title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.wp-block-kadence-posts .entry-title a:hover {
  color: var(--wp--preset--color--primary);
}

/* カード内のメタ情報の控えめ化 */
.wp-block-kadence-posts .entry-meta,
.wp-block-kadence-posts .entry-taxonomies {
  font-size: 0.8rem;
  color: var(--wp--preset--color--muted);
}

.wp-block-kadence-posts .entry-taxonomies a {
  color: var(--wp--preset--color--primary);
}

/* カード内パディングの確保 */
.wp-block-kadence-posts.kb-posts-style-boxed .kb-post-list-item .entry-content-wrap {
  padding: 1.25rem;
}

/* タブレット 2 列 */
@media (max-width: 1023px) {
  .wp-block-kadence-posts.grid-cols.grid-lg-col-3 {
    grid-template-columns: 1fr 1fr !important;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* スマホ 1 列 */
@media (max-width: 599px) {
  .wp-block-kadence-posts.grid-cols.grid-lg-col-3 {
    grid-template-columns: 1fr !important;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===========================================================
 * 3. archive.html 用のスタイル（body class で分岐）
 * =========================================================== */

/* --- 共通：ヒーロー帯（Dark band） --- */

.sl-archive-hero {
  padding: 80px 24px;
  text-align: center;
}

.sl-archive-hero .sl-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.75rem;
}

.sl-archive-hero h1 {
  color: #fff !important;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 700;
  margin: 0;
}

@media (min-width: 768px) {
  .sl-archive-hero {
    padding: 100px 24px;
  }
  .sl-archive-hero h1 {
    font-size: 2.25rem;
  }
}

/* --- 本文エリア共通 --- */

.sl-archive-main {
  padding: 60px 24px 80px;
  margin-left: auto;
  margin-right: auto;
}

/* --- ページネーション（共通） --- */

.wp-block-query-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.wp-block-query-pagination a.page-numbers,
.wp-block-query-pagination span.page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
  background-color: var(--wp--preset--color--subtle);
  color: var(--wp--preset--color--primary-hover);
}

.wp-block-query-pagination .page-numbers.current {
  background-color: var(--wp--preset--color--primary);
  color: #fff;
  font-weight: 600;
}

.wp-block-query-pagination .page-numbers.dots {
  color: var(--wp--preset--color--muted);
}

.wp-block-query-no-results {
  text-align: center;
  padding: 3rem 0;
  color: var(--wp--preset--color--muted);
}

/* ===========================================================
 * 3-A. body.tag の archive：タイル3列
 *      （シリーズもの想定）
 * =========================================================== */

body.tag .sl-archive-main {
  max-width: 1100px;
}

body.tag .sl-archive-grid,
body.tag .wp-block-post-template.is-layout-grid.sl-archive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 1023px) {
  body.tag .sl-archive-grid,
  body.tag .wp-block-post-template.is-layout-grid.sl-archive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 599px) {
  body.tag .sl-archive-grid,
  body.tag .wp-block-post-template.is-layout-grid.sl-archive-grid {
    grid-template-columns: 1fr !important;
  }
}

body.tag .sl-archive-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background: transparent;
  transition: transform 0.2s ease;
}

body.tag .sl-archive-card:hover {
  transform: translateY(-2px);
}

body.tag .sl-archive-card .sl-card-thumb {
  display: block;
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: 8px;
}

body.tag .sl-archive-card .sl-card-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.3s ease;
}

body.tag .sl-archive-card:hover .sl-card-thumb img {
  transform: scale(1.03);
}

body.tag .sl-archive-card .sl-card-cat {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

body.tag .sl-archive-card .sl-card-cat a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

body.tag .sl-archive-card .sl-card-cat a:hover {
  color: var(--wp--preset--color--primary-hover);
}

body.tag .sl-archive-card .sl-card-title {
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 700;
  margin: 0 0 0.5rem;
  flex-grow: 1;
}

body.tag .sl-archive-card .sl-card-title a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

body.tag .sl-archive-card .sl-card-title a:hover {
  color: var(--wp--preset--color--primary);
}

body.tag .sl-archive-card .sl-card-date {
  font-size: 0.8rem;
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* ===========================================================
 * 3-B. body.category / body.author / body.date の archive：リスト型
 *      （個別記事の集合想定）
 *      アイキャッチ左 150px + タイトル・投稿日右
 * =========================================================== */

body.category .sl-archive-main,
body.author .sl-archive-main,
body.date .sl-archive-main {
  max-width: 800px;
}

/* グリッドレイアウトを撤回、縦リストに */
body.category .sl-archive-grid,
body.category .wp-block-post-template.is-layout-grid.sl-archive-grid,
body.author .sl-archive-grid,
body.author .wp-block-post-template.is-layout-grid.sl-archive-grid,
body.date .sl-archive-grid,
body.date .wp-block-post-template.is-layout-grid.sl-archive-grid {
  display: block !important;
  grid-template-columns: none !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各カードを横並びレイアウトに（grid 配置を明示、スペースを十分に確保） */
body.category .sl-archive-card,
body.author .sl-archive-card,
body.date .sl-archive-card {
  display: grid !important;
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto auto auto;
  gap: 0 1.25rem;
  align-items: start;
  margin: 0 0 4.5rem;
  padding: 0 0 3rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease;
}

body.category .sl-archive-card:last-child,
body.author .sl-archive-card:last-child,
body.date .sl-archive-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* アイキャッチ：左列・全行に伸びる */
body.category .sl-archive-card .sl-card-thumb,
body.author .sl-archive-card .sl-card-thumb,
body.date .sl-archive-card .sl-card-thumb {
  grid-column: 1;
  grid-row: 1 / -1;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
}

body.category .sl-archive-card .sl-card-thumb img,
body.author .sl-archive-card .sl-card-thumb img,
body.date .sl-archive-card .sl-card-thumb img {
  display: block;
  width: 150px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* リスト型ではカテゴリリンク非表示
   （同じカテゴリの一覧なので冗長） */
body.category .sl-archive-card .sl-card-cat {
  display: none;
}

/* 著者・日付 archive ではカテゴリリンクは小さく出す（右列・1 行目） */
body.author .sl-archive-card .sl-card-cat,
body.date .sl-archive-card .sl-card-cat {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
  line-height: 1.4;
}

body.author .sl-archive-card .sl-card-cat a,
body.date .sl-archive-card .sl-card-cat a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

/* タイトル：右列・1 行目（カテゴリリンクがある著者/日付 archive では 2 行目） */
body.category .sl-archive-card .sl-card-title,
body.author .sl-archive-card .sl-card-title,
body.date .sl-archive-card .sl-card-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

/* 著者・日付 archive ではタイトルは 2 行目 */
body.author .sl-archive-card .sl-card-title,
body.date .sl-archive-card .sl-card-title {
  grid-row: 2;
}

body.category .sl-archive-card .sl-card-title a,
body.author .sl-archive-card .sl-card-title a,
body.date .sl-archive-card .sl-card-title a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

body.category .sl-archive-card .sl-card-title a:hover,
body.author .sl-archive-card .sl-card-title a:hover,
body.date .sl-archive-card .sl-card-title a:hover {
  color: var(--wp--preset--color--primary-hover);
  text-decoration: underline;
}

/* 投稿日：右列・タイトルの直下、Muted */
body.category .sl-archive-card .sl-card-date,
body.author .sl-archive-card .sl-card-date,
body.date .sl-archive-card .sl-card-date {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  margin: 0;
  align-self: start;
}

/* 著者・日付 archive では投稿日は 3 行目 */
body.author .sl-archive-card .sl-card-date,
body.date .sl-archive-card .sl-card-date {
  grid-row: 3;
}

/* スマホ：アイキャッチを少し小さく、レイアウトはそのまま横並び */
@media (max-width: 599px) {
  body.category .sl-archive-card,
  body.author .sl-archive-card,
  body.date .sl-archive-card {
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 1rem;
    margin: 0 0 3rem;
    padding: 0 0 2.5rem;
  }

  body.category .sl-archive-card .sl-card-thumb img,
  body.author .sl-archive-card .sl-card-thumb img,
  body.date .sl-archive-card .sl-card-thumb img {
    width: 100px;
  }

  body.category .sl-archive-card .sl-card-title,
  body.author .sl-archive-card .sl-card-title,
  body.date .sl-archive-card .sl-card-title {
    font-size: 0.95rem;
  }
}

/* ===========================================================
 * 4. ナビゲーション z-index 修正（調査ベース）
 *
 * 原因（調査結果）:
 *   - Hero テキスト .sl-hero-inner は position:relative; z-index:2
 *     （ホーム本文 ID607 の self-contained CSS）
 *   - サブメニュー .wp-block-navigation__submenu-container は
 *     コア(TT5)CSS で position:absolute; z-index:2
 *   - ヘッダー <header.wp-block-template-part> は stacking context を
 *     作らない（z-index:auto）。ナビ祖先(.wp-block-navigation /
 *     -submenu)も position:relative のみで z-index 無し。
 *   → 両者が同一 z-index:2 でルート文脈で競合し、DOM 後方の Hero が
 *     サブメニュー下方項目を覆っていた（3項目目以降クリック不可）。
 *
 * 対策（最小限）:
 *   - ヘッダーを stacking context 化し z-index:10（> Hero の 2）で前面に。
 *     これだけでヘッダー配下のサブメニューは Hero より前面になる。
 *   - サブメニューはヘッダー文脈内で z-index:20（保険）。
 *
 * 安全性（調査確認済み）:
 *   - ページ内 z-index は 1 / 2 / 10000 / 100000 のみ。11〜99999 は皆無。
 *   - モバイルメニュー(.wp-block-navigation__responsive-container,
 *     z-index:100000) はヘッダーの子要素のため、ヘッダー z-index:10 化の
 *     影響を受けず従来どおり全画面オーバーレイとして機能する。
 *   - 99999 等の極端値や Hero テキストの z-index 打ち消し（背景グラデの
 *     下に落ちるリスク）は採用しない。
 * =========================================================== */

header.wp-block-template-part {
  position: relative;
  z-index: 10;
}

.wp-block-navigation__submenu-container {
  z-index: 20 !important;
}

/* ===========================================================
 * 5. Latest Posts ブロックのアイキャッチを 16:9 に統一
 *    （固定ページ insight-blog 等。既定 thumbnail=150x150 正方形 →
 *     content 側で featuredImageSizeSlug:"medium" に変更し、
 *     ここで表示を 16:9・適切なサイズに整形する）
 * =========================================================== */

.wp-block-latest-posts__featured-image img {
  width: 160px !important;
  height: 90px !important;
  max-width: 160px !important;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 599px) {
  .wp-block-latest-posts__featured-image img {
    width: 120px !important;
    height: 68px !important;
    max-width: 120px !important;
  }
}

/* ===========================================================
 * 8. 記事末尾「投稿をさらに読み込む」Query Loop のアイテム間隔
 *    （調査結果：各 li 内が flex space-between is-nowrap で、
 *     縦 padding が spacing30・タイトル/日付間に gap が無く詰まる）
 *    対象を「space-between の flex 行」に限定し archive(sl-archive-card)
 *    には影響させない。
 * =========================================================== */

.wp-block-query .wp-block-post-template > li > .wp-block-group.is-content-justification-space-between {
  gap: 0.5rem 1.5rem;
  padding-top: var(--wp--preset--spacing--40) !important;
  padding-bottom: var(--wp--preset--spacing--40) !important;
}