/*
 * ブログ(一覧・記事・アーカイブ・検索)専用CSS — Figma PC/SP_ブログ一覧・ブログ記事準拠
 * 旧 First Track テーマ style.css から抽出。ブログ系ビューでのみ読み込む(functions.php)。
 * 変数は --c-* 等の独自プレフィックス(共通 style.css の --color-* 等とは衝突しない)。
 * 2026-08: 一覧まわりを Figma PC_ブログ一覧(1722-436)に合わせて調整
 *   - コンテンツ幅 1280→1120(実効1080=.l-inner と一致)
 *   - フィルタ: 左寄せ/h40/アクティブ #B08E5A/非アクティブ #FAF5F0 枠線なし
 *   - カード: 背景 #FBF9F5/radius 8/padding 20/バッジ #E8E0D6/タイトル weight400
 *   - カード内メタ: 長いカテゴリ名が折り返すため Figma の横並びから縦2段に変更
 *   - ページネーション: current=白背景+枠線/36×36/radius 8/無効 Prev・Next を CSS で補完
 */
:root {
  /* Primary */
  --c-red: #D05D58;
  --c-gold: #B8956A;
  --c-gold-badge: #B39163;
  --c-brand-brown: #B08E5A; /* Figma フィルタアクティブ色(--c-gold とは別色) */
  /* Text */
  --c-text: #3D3330;
  --c-text-dark: #1A1414;
  --c-brown-warm: #4A3F28;
  --c-gold-accent: #A48B43;
  --c-gold-warm: #A57F56;
  --c-cat-brown: #6B5744;   /* カテゴリバッジ文字 */
  /* Background */
  --c-bg-dark: #0F0D0D;
  --c-pink-light: #EDDCDC;
  --c-bg-gold-badge: #E7DFC6;
  --c-cat-beige: #E8E0D6;   /* カテゴリバッジ背景 */
  --c-warm-1: #FBF9F5;
  --c-warm-2: #FAF8F4;
  --c-warm-3: #FAF5F0;
  --c-tan: #F3EADC;
  /* Functional */
  --c-line: #06C755;
  --c-phone: #D80A30;
  --c-script: #C28D8B;
  --c-footer-link: #C4C2C1;
  --c-footer-copy: #818181;
  --c-date-gray: #AAAAAA;
  /* Radius */
  --r-small: 4px;
  --r-card: 8px;
  --r-card-lg: 10px;
  --r-pill: 30px;
  /* Spacing */
  --sp-page-x: 20px;
  --sp-section: 40px;
  /* Fonts */
  --f-script: "Allura", cursive;
  /* Layout — 1080(コンテンツ) + 20×2(padding)。.l-inner(1130-25×2=1080) と揃える */
  --content-max: 1120px;
  --article-max: 1000px;
}

/* ==========================================================================
   Blog list — カテゴリフィルタ+カードグリッド(PC4列/SP2列)
   ========================================================================== */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  max-width: var(--content-max);
  margin: 24px auto 8px;
  padding: 0 var(--sp-page-x);
}
.blog-filter a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--c-text);
  background: var(--c-warm-3);
}
.blog-filter a:not(.is-active):hover { background: var(--c-tan); }
.blog-filter a.is-active {
  background: var(--c-brand-brown);
  color: #fff;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: var(--content-max);
  margin: 32px auto;
  padding: 0 var(--sp-page-x);
}

.blog-empty {
  text-align: center;
  margin: 64px 0;
}

/* Blog Card — Figma 252×301・radius8・border rgba(0,0,0,.06) */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--c-warm-1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card:hover {
  box-shadow: 0 6px 18px rgba(61, 51, 48, .12);
  transform: translateY(-2px);
}
.blog-card__thumb {
  aspect-ratio: 4 / 3;
  background: var(--c-tan);
  overflow: hidden;
}
.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-script);
  font-size: 28px;
  color: var(--c-gold-badge);
}
.blog-card__body { padding: 20px; }
/* メタは縦2段(カテゴリ→日付)。カード内幅212pxに対し最長カテゴリ「格安結婚式の提携会場」が
   145px あり、日付67pxと横並びにすると必ず折り返すため縦積みにする。
   万一さらに長いカテゴリが追加された場合は折り返さず末尾を省略(…)する */
.blog-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 0;
  margin-bottom: 4px;
}
.blog-card__cat {
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--c-cat-beige);
  color: var(--c-cat-brown);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-card__date {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-date-gray);
  white-space: nowrap;
}
.blog-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Pagination — ← Previous 1 2 Next →
   current は白背景+枠線(Figma)。1ページ目の Previous / 最終ページの Next は
   WP が出力しないため、:has() フォールバックで無効表示(opacity .4)を補完 */
.blog-pagination {
  margin: 40px 0 64px;
  text-align: center;
}
.blog-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-card);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--c-text);
}
.blog-pagination .page-numbers.current {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.blog-pagination a.page-numbers:hover { background: var(--c-warm-3); }
.blog-pagination .nav-links:not(:has(.prev))::before {
  content: "← Previous";
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-text);
  opacity: .4;
}
.blog-pagination .nav-links:not(:has(.next))::after {
  content: "Next →";
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-text);
  opacity: .4;
}

/* ==========================================================================
   Single — Article(本文幅720・要素間40)
   ========================================================================== */
.article {
  max-width: var(--article-max);
  margin: 24px auto 0;
  padding: 0 var(--sp-page-x);
}
.article__header { margin-bottom: 32px; }
.article__title {
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.55;
}
.article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--c-footer-copy);
}
.article__meta a {
  display: inline-block;
  padding: 3px 14px;
  border-radius: var(--r-pill);
  background: var(--c-pink-light);
  color: var(--c-text);
  font-size: 12px;
  text-decoration: none;
}

/* 旧MT記事(リッチテキストHTML)+新規投稿の本文共通スタイル */
.article__body { font-size: 15px; line-height: 1.9; }
.article__body > * { margin: 0 0 1.6em; }
.article__body h1,
.article__body h2 {
  margin: 2.6em 0 1em;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E0DB;
  font-size: 22px;
  font-weight: 700;
}
.article__body h3 {
  margin: 2.2em 0 .8em;
  font-size: 18px;
  font-weight: 700;
}
.article__body img {
  display: block;
  margin: 32px auto;
  border-radius: var(--r-card);
}
.article__body a { color: var(--c-gold-accent); }
.article__body ul, .article__body ol { padding-left: 1.4em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li { margin-bottom: .4em; }
.article__body ul li::marker { color: var(--c-gold); }
.article__body blockquote {
  margin: 2em 0;
  padding: 20px 24px;
  background: var(--c-warm-3);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__body .wp-caption { max-width: 100%; }
.article__body .wp-caption-text,
.article__body figcaption {
  font-size: 12px;
  color: var(--c-footer-copy);
  text-align: center;
  margin-top: -20px;
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0;
}
.article__tags a {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: var(--c-warm-2);
  border: 1px solid #EEE7DD;
  font-size: 12px;
  color: var(--c-brown-warm);
  text-decoration: none;
}

/* CTAボックス — 現在は非表示（記事下部は下部共通CTA(p-cta)のみとする）。
   再表示する場合は display: none の行を削除する */
.article-cta {
  display: none;
  margin: 40px 0 64px;
  padding: 36px 24px;
  background: var(--c-warm-3);
  border-radius: var(--r-card);
  text-align: center;
}
.article-cta__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}
.article-cta__text {
  margin: 0 0 20px;
  font-size: 13px;
}
.article-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.article-cta__buttons a {
  display: inline-block;
  min-width: 200px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.article-cta__buttons .cta-reserve { background: var(--c-gold-warm); }
.article-cta__buttons .cta-line { background: var(--c-line); }
.article-cta__buttons a:hover { opacity: .85; }

/* 関連記事 */
.related {
  background: var(--c-warm-1);
  padding: var(--sp-section) 0 56px;
}
.related__title {
  margin: 0 0 4px;
  text-align: center;
  font-family: var(--f-script);
  font-size: 34px;
  font-weight: 400;
  color: var(--c-script);
}
.related__title-jp {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
.related__title-jp::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: var(--c-gold);
  margin: 12px auto 0;
}
.related .blog-grid { margin-top: 28px; }
/* 関連記事セクションの背景がカードと同色(#FBF9F5)のため、ここだけカードを白にして輪郭を出す */
.related .blog-card { background: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  /* 3列の最小幅(641px)ではカード184px=内幅144pxとなり最長カテゴリ145pxが入らないため詰める */
  .blog-card__body { padding: 16px; }
}
@media (max-width: 640px) {
  /* カテゴリフィルタは折り返さず1行横スクロール(Figma SP_ブログ一覧 1722-182)。
     gap は PC の 12px ではなく 8px。ボタンの高さ・色・文字サイズは PC と同一 */
  .blog-filter {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog-filter::-webkit-scrollbar { display: none; }
  .blog-filter a { flex-shrink: 0; }

  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* 2列の最小幅(375px)ではカード161px。padding12+カテゴリ11pxで内幅137px>134px */
  .blog-card__body { padding: 14px 12px 16px; }
  .blog-card__cat { font-size: 11px; padding: 3px 8px; }
  .article__title { font-size: 22px; }
  .article__body h2 { font-size: 19px; }
  .article__body h3 { font-size: 16px; }
}