/**
 * BREWING JAPAN — アーカイブページスタイル
 * 対象: カテゴリアーカイブ / タグアーカイブ / 検索結果
 * 依存: bj-design-tokens.css, bj-global.css, bj-components.css
 * 注記: category-archive.css（Widget注入版）の後継。子テーマに移管済み。
 */

/* ================================================================
   1. アーカイブ ヒーローバナー
   ================================================================ */

.archive #archive-title {
  position: relative;
  background: var(--bj-archive-hero-bg);
  color: var(--bj-archive-hero-text);
  font-family: var(--bj-archive-hero-font);
  font-size: var(--bj-archive-hero-size) !important;
  font-weight: var(--bj-archive-hero-weight) !important;
  letter-spacing: var(--bj-tracking-wider);
  line-height: var(--bj-leading-heading);
  padding: var(--bj-archive-hero-padding) !important;
  margin: 0 0 var(--bj-space-8) !important;
  border-radius: var(--bj-archive-hero-radius);
  border: none !important;
  outline: none !important;
  box-shadow: var(--bj-archive-hero-shadow);
  overflow: hidden;
  text-indent: 0 !important;
}

/* アンバーアクセントライン（タイトル上） */
.archive #archive-title::before {
  content: '';
  display: block;
  width: var(--bj-archive-hero-accent-width);
  height: var(--bj-archive-hero-accent-height);
  background: var(--bj-archive-hero-accent-color);
  margin-bottom: 14px;
  border-radius: var(--bj-archive-hero-accent-radius);
}

/* ゴーストテキスト装飾 */
.archive #archive-title::after {
  content: 'BREWING\A JAPAN';
  white-space: pre;
  position: absolute;
  right: -10px;
  bottom: -16px;
  font-family: var(--bj-font-display);
  font-size: clamp(42px, 7vw, 80px);
  font-weight: var(--bj-weight-bold);
  line-height: 1.1;
  color: var(--bj-white-10);
  letter-spacing: var(--bj-tracking-wide);
  pointer-events: none;
  user-select: none;
}

/* Cocoon フォルダアイコン非表示 */
.archive #archive-title .fa {
  display: none;
}

/* ── カテゴリ別ヒーロー配色 ──────────────────────────── */

.category-knowledge #archive-title::before,
.category-2 #archive-title::before {
  background: var(--bj-cat-knowledge);
}

.category-howtoenjoy #archive-title,
.category-4 #archive-title {
  background: linear-gradient(150deg, #13283D 55%, #1A3A4A 100%);
}
.category-howtoenjoy #archive-title::before,
.category-4 #archive-title::before {
  background: var(--bj-cat-howtoenjoy);
}

.category-openingabeerpub #archive-title,
.category-50 #archive-title {
  background: linear-gradient(150deg, var(--bj-brown) 55%, var(--bj-brown2) 100%);
}
.category-openingabeerpub #archive-title::before,
.category-50 #archive-title::before {
  background: var(--bj-cat-opening);
}

.category-news #archive-title,
.category-45 #archive-title {
  background: linear-gradient(150deg, var(--bj-navy-dark) 55%, var(--bj-navy) 100%);
}

.category-trend #archive-title,
.category-60 #archive-title {
  background: linear-gradient(150deg, var(--bj-navy-dark) 55%, var(--bj-navy) 100%);
}

.category-lecture #archive-title,
.category-49 #archive-title,
.category-type #archive-title,
.category-48 #archive-title,
.category-history #archive-title,
.category-47 #archive-title {
  background: var(--bj-archive-hero-bg);
}

/* ================================================================
   2. 記事カードグリッド
   ================================================================ */

.archive .entry-card-wrap {
  border: var(--bj-card-border) !important;
  border-radius: var(--bj-card-radius) !important;
  overflow: hidden;
  background: var(--bj-card-bg);
  box-shadow: var(--bj-card-shadow);
  transition:
    transform var(--bj-duration) var(--bj-ease),
    box-shadow var(--bj-duration) var(--bj-ease),
    border-color var(--bj-duration) var(--bj-ease) !important;
}

.archive .entry-card-wrap:hover {
  transform: var(--bj-card-translate-hover) !important;
  box-shadow: var(--bj-card-shadow-hover) !important;
  border-color: var(--bj-amber) !important;
}

/* サムネイル */
.archive .entry-card-thumb {
  overflow: hidden;
}
.archive .entry-card-thumb-image {
  display: block;
  width: 100%;
  transition: transform var(--bj-duration-slow) var(--bj-ease) !important;
}
.archive .entry-card-wrap:hover .entry-card-thumb-image {
  transform: scale(1.06) !important;
}

/* タイトル */
.archive .entry-card-title,
.archive .e-card-title {
  font-family: var(--bj-font-serif) !important;
  font-size: var(--bj-text-base) !important;
  font-weight: var(--bj-weight-bold) !important;
  line-height: var(--bj-leading-snug) !important;
  color: var(--bj-text) !important;
  letter-spacing: var(--bj-tracking-normal) !important;
}

/* スニペット */
.archive .entry-card-snippet,
.archive .e-card-snippet {
  font-family: var(--bj-font-sans) !important;
  font-size: var(--bj-text-xs) !important;
  color: var(--bj-text-muted) !important;
  line-height: var(--bj-leading-body) !important;
}

/* カテゴリラベル */
.archive .entry-card-categorys .entry-category,
.archive .e-card-categorys .entry-category {
  background: var(--bj-tag-bg) !important;
  color: var(--bj-tag-color) !important;
  font-family: var(--bj-font-sans) !important;
  font-size: var(--bj-tag-size) !important;
  font-weight: var(--bj-tag-weight) !important;
  padding: var(--bj-tag-padding) !important;
  border-radius: var(--bj-tag-radius) !important;
  letter-spacing: var(--bj-tracking-normal) !important;
  text-decoration: none !important;
  transition: background var(--bj-duration-fast) var(--bj-ease),
              color var(--bj-duration-fast) var(--bj-ease) !important;
}
.archive .entry-card-categorys .entry-category:hover {
  background: var(--bj-amber) !important;
  color: var(--bj-white) !important;
}

/* 日付・メタ情報 */
.archive .post-date,
.archive .post-update,
.archive .entry-card-date {
  font-size: var(--bj-text-3xs) !important;
  color: var(--bj-text-muted) !important;
  font-family: var(--bj-font-sans) !important;
  letter-spacing: var(--bj-tracking-normal) !important;
}

/* ================================================================
   3. ウィジェットエリア（index-top）
   ================================================================ */

.archive .widget-index-top .widgettitle,
.archive .widget-index-top .widget-title {
  font-family: var(--bj-widget-title-font) !important;
  color: var(--bj-widget-title-color) !important;
  font-size: var(--bj-widget-title-size) !important;
  font-weight: var(--bj-widget-title-weight) !important;
  border-bottom: var(--bj-widget-title-border) !important;
  padding-bottom: var(--bj-space-2) !important;
  margin-bottom: 14px !important;
  background: none !important;
}

.archive .popular-entry-card-title,
.archive .widget-entry-card-title {
  font-family: var(--bj-font-sans) !important;
  font-size: var(--bj-text-xs) !important;
  font-weight: var(--bj-weight-medium) !important;
  color: var(--bj-text) !important;
  line-height: var(--bj-leading-snug) !important;
}

/* ================================================================
   4. サイドバー
   ================================================================ */

.archive .sidebar .widgettitle,
.archive .sidebar .widget-title {
  font-family: var(--bj-font-serif) !important;
  color: var(--bj-navy) !important;
  font-size: var(--bj-widget-title-size) !important;
  font-weight: var(--bj-weight-bold) !important;
  border-left: var(--bj-border-accent) solid var(--bj-amber) !important;
  border-bottom: 1px solid var(--bj-border) !important;
  padding: var(--bj-space-1) 0 var(--bj-space-2) var(--bj-space-3) !important;
  margin-bottom: 14px !important;
  background: none !important;
}

.archive .sidebar a {
  color: var(--bj-text-sub) !important;
  font-family: var(--bj-font-sans) !important;
  font-size: var(--bj-text-xs) !important;
}
.archive .sidebar a:hover {
  color: var(--bj-amber) !important;
}

/* ================================================================
   5. ページネーション
   ================================================================ */

.archive .pagination .current,
.archive .page-numbers.current {
  background: var(--bj-pagination-active-bg) !important;
  border-color: var(--bj-pagination-active-bg) !important;
  color: var(--bj-pagination-active-text) !important;
}
.archive .pagination a:hover,
.archive .page-numbers:not(.current):hover {
  border-color: var(--bj-pagination-hover-border) !important;
  color: var(--bj-pagination-hover-text) !important;
  background: var(--bj-white) !important;
}

/* ================================================================
   6. カテゴリラベル配色（トップ共通）
   ================================================================ */

.cat-label-50 { background-color: var(--bj-amber) !important; }   /* ビアパブ開業 */
.cat-label-49 { background-color: var(--bj-navy) !important; }    /* ビール講座 */
.cat-label-48 { background-color: #2A6496 !important; }           /* ビールの種類 */
.cat-label-60 { background-color: #3A7D44 !important; }           /* トレンド */
.cat-label-53 { background-color: #7B4F8C !important; }           /* ブルワー */

/* ================================================================
   7. レスポンシブ補正
   ================================================================ */

@media (max-width: 768px) {
  .archive #archive-title {
    padding: var(--bj-space-8) var(--bj-space-5) 28px !important;
    font-size: clamp(18px, 5vw, 24px) !important;
  }
  .archive #archive-title::after {
    font-size: 48px;
    right: -8px;
    bottom: -12px;
  }
}

@media (max-width: 480px) {
  .archive #archive-title::after {
    display: none;
  }
}

/* モーションリデュース対応 */
@media (prefers-reduced-motion: reduce) {
  .archive .entry-card-wrap {
    transition: none !important;
  }
  .archive .entry-card-wrap:hover {
    transform: none !important;
  }
  .archive .entry-card-thumb-image {
    transition: none !important;
  }
}