/* ==========================================================
   MAKKYON WEB — Brand Hub
   対象: /brands/{brand-slug}/ の固定ページ
   読み込み: functions.php の wp_enqueue_scripts フック
   ========================================================== */

/* ----------------------------------------------------------
   0. カスタムプロパティ（SWELLの変数を上書きしない独自名前空間）
   ---------------------------------------------------------- */
:root {
  --mky-radius-sm: 6px;
  --mky-radius-md: 10px;
  --mky-radius-lg: 14px;
  --mky-gap: 1.5rem;
  --mky-gap-sm: 0.75rem;
  --mky-accent: #3C3489;        /* Guides / 初心者セクション */
  --mky-accent-light: #EEEDFE;
  --mky-accent-border: #AFA9EC;
  --mky-hero-bg: #1e1e1c;       /* ヒーロー帯の背景 */
  --mky-hero-text: #d6d4cc;
  --mky-hero-muted: #888780;
  --mky-beginner-bg: #f5f3ec;   /* 初心者セクション背景 */
  --mky-star: #BA7517;
  --mky-popular-color: #D85A30;
  --mky-new-color: #185FA5;
  --mky-rival-color: #993C1D;
  --mky-related-color: #0F6E56;
}

/* ----------------------------------------------------------
   1. ページ全体ラッパー
   ---------------------------------------------------------- */
.mky-brand-hub {
  /* SWELLのコンテンツ幅制約を解除するため max-width を上書き */
  max-width: 1100px;
  margin-inline: auto;
  padding: 0 1rem 4rem;
}

/* フルワイドテンプレート使用時は SWELL 側の padding を打ち消す */
.mky-brand-hub .wp-block-group {
  padding-inline: 0;
}

/* ----------------------------------------------------------
   2. パンくずリスト
   ---------------------------------------------------------- */
.mky-breadcrumb {
  font-size: 0.75rem;
  color: var(--mky-hero-muted);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.mky-breadcrumb a {
  color: var(--mky-hero-muted);
  text-decoration: none;
}
.mky-breadcrumb a:hover {
  text-decoration: underline;
}
.mky-breadcrumb__sep {
  opacity: 0.5;
}
.mky-breadcrumb__current {
  color: var(--c-text, #1e1e1c);
  font-weight: 500;
}

/* ----------------------------------------------------------
   3. ① ヒーロー帯
   ---------------------------------------------------------- */
.mky-hero {
  background: var(--mky-hero-bg);
  border-radius: var(--mky-radius-lg);
  padding: 2rem 2.25rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.75rem;
  margin-bottom: 2rem;
}

.mky-hero__badge {
  display: inline-block;
  font-size: 0.6875rem;
  background: var(--mky-accent);
  color: #CECBF6;
  border-radius: 4px;
  padding: 3px 9px;
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}

.mky-hero__heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--mky-hero-text);
  line-height: 1.35;
  margin: 0 0 0.4rem;
}

.mky-hero__sub {
  font-size: 0.8125rem;
  color: var(--mky-hero-muted);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.mky-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.mky-hero__pill {
  font-size: 0.75rem;
  border-radius: 20px;
  padding: 3px 11px;
  white-space: nowrap;
}
.mky-hero__pill--accent {
  background: var(--mky-accent);
  color: #CECBF6;
  border: 1px solid #7F77DD;
}
.mky-hero__pill--muted {
  background: #363634;
  color: #b0aea6;
  border: 1px solid #484644;
}

.mky-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mky-hero__btn {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 5px;
  padding: 7px 16px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.mky-hero__btn:hover { opacity: 0.85; }
.mky-hero__btn--primary {
  background: #d6d4cc;
  color: #1e1e1c;
}
.mky-hero__btn--secondary {
  background: #363634;
  color: #b0aea6;
  border: 1px solid #484644;
}

/* ヒーロー右カラム */
.mky-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mky-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.mky-hero__stat {
  background: #2a2a28;
  border: 1px solid #3a3a38;
  border-radius: var(--mky-radius-sm);
  padding: 0.6rem 0.5rem;
  text-align: center;
}
.mky-hero__stat-num {
  display: block;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--mky-hero-text);
  line-height: 1;
}
.mky-hero__stat-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--mky-hero-muted);
  margin-top: 3px;
}

.mky-hero__collage {
  /* 写真コラージュ枠（実際の img タグに置き換え） */
  background: #363634;
  border-radius: var(--mky-radius-sm);
  aspect-ratio: 16 / 6;
  overflow: hidden;
  display: flex;
}
.mky-hero__collage img {
  width: 33.33%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.mky-hero__latest {
  background: #2a2a28;
  border: 1px solid #3a3a38;
  border-radius: var(--mky-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--mky-hero-muted);
}
.mky-hero__latest a {
  color: #b5d4f4;
  text-decoration: none;
}
.mky-hero__latest a:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   4. セクション共通
   ---------------------------------------------------------- */
.mky-section {
  margin-bottom: 2.5rem;
}

.mky-section__header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8e6df;
}

.mky-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mky-section__title .icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.mky-section__title .icon--popular { color: var(--mky-popular-color); }
.mky-section__title .icon--new     { color: var(--mky-new-color); }

.mky-section__note {
  font-size: 0.75rem;
  color: #888780;
  margin-left: auto;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   5. ② 初心者向け導線
   ---------------------------------------------------------- */
.mky-beginner {
  background: var(--mky-beginner-bg);
  border: 1px solid #dbd9d0;
  border-radius: var(--mky-radius-md);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.mky-beginner__heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
  text-align: center;
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.mky-beginner__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.mky-beginner__card {
  background: #fff;
  border: 1px solid #e8e6df;
  border-radius: var(--mky-radius-sm);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mky-beginner__cat {
  font-size: 0.6875rem;
  color: #888780;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mky-beginner__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #e8e6df;
}
.mky-beginner__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mky-beginner__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
  margin: 0;
}

.mky-beginner__reason {
  font-size: 0.75rem;
  color: #5a5855;
  line-height: 1.65;
  flex: 1;
}

.mky-beginner__link {
  font-size: 0.75rem;
  color: var(--mky-new-color);
  text-decoration: none;
  margin-top: auto;
}
.mky-beginner__link:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   6. ③ ベストピック
   ---------------------------------------------------------- */
.mky-best-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.mky-best-card {
  border: 1px solid #e8e6df;
  border-radius: var(--mky-radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.15s;
}
.mky-best-card:hover { border-color: #c0bdb4; }

.mky-best-card--featured {
  border: 2px solid var(--mky-accent-border);
}

.mky-best-card__badge {
  display: inline-block;
  font-size: 0.6875rem;
  border-radius: 3px;
  padding: 2px 7px;
  font-weight: 500;
}
.mky-best-card__badge--featured {
  background: var(--mky-accent-light);
  color: var(--mky-accent);
}
.mky-best-card__badge--normal {
  background: #f1efe8;
  color: #5a5855;
}

.mky-best-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #e8e6df;
}
.mky-best-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mky-best-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}
.mky-best-card__cat {
  font-size: 0.75rem;
  color: #888780;
}
.mky-best-card__stars {
  color: var(--mky-star);
  font-size: 0.8125rem;
  letter-spacing: 1px;
}
.mky-best-card__link {
  font-size: 0.75rem;
  color: var(--mky-new-color);
  text-decoration: none;
  margin-top: auto;
}
.mky-best-card__link:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   7. ④ Guides（紫帯）
   ---------------------------------------------------------- */
.mky-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.mky-guide-card {
  background: var(--mky-accent-light);
  border: 1px solid var(--mky-accent-border);
  border-radius: var(--mky-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color 0.15s;
}
.mky-guide-card:hover {
  border-color: #7F77DD;
}

.mky-guide-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #c8c5e8;
}
.mky-guide-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mky-guide-card__body {
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mky-guide-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mky-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mky-guide-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mky-accent);
  line-height: 1.45;
  margin: 0;
}

/* ----------------------------------------------------------
   8. ⑤ 記事一覧（人気 / 最新 / 全件）
   ---------------------------------------------------------- */
/* サブセクション間の区切り */
.mky-article-block + .mky-article-block {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px dashed #e0ded6;
}

.mky-article-block__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mky-article-block__meta {
  font-size: 0.6875rem;
  color: #888780;
  font-weight: 400;
  margin-left: 0.3rem;
}

/* グリッドレイアウト（デスクトップ 4列） */
.mky-post-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
}

.mky-post-card {
  border: 1px solid #e8e6df;
  border-radius: var(--mky-radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.mky-post-card:hover { border-color: #c0bdb4; }

.mky-post-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e8e6df;
  flex-shrink: 0;
}
.mky-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
.mky-post-card:hover .mky-post-card__thumb img {
  transform: scale(1.03);
}

.mky-post-card__body {
  padding: 0.625rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.mky-post-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mky-post-card__cat {
  font-size: 0.6875rem;
  color: #888780;
}

.mky-post-card__date {
  font-size: 0.6875rem;
  color: #aaa9a0;
  margin-top: auto;
}

/* 全件一覧 カテゴリーフィルター */
.mky-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.875rem;
}
.mky-filter__btn {
  font-size: 0.75rem;
  border-radius: 20px;
  padding: 4px 13px;
  cursor: pointer;
  border: 1px solid #dbd9d0;
  background: transparent;
  color: #5a5855;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.mky-filter__btn:hover,
.mky-filter__btn--active {
  background: #1e1e1c;
  color: #d6d4cc;
  border-color: #1e1e1c;
}

/* もっと見るカード */
.mky-post-card--more {
  background: #f5f3ec;
  border-style: dashed;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 120px;
  color: #888780;
  font-size: 0.8125rem;
}
.mky-post-card--more span { font-size: 1.25rem; }

/* ----------------------------------------------------------
   9. ⑥ SEOテキストエリア
   ---------------------------------------------------------- */
.mky-brand-desc {
  background: #faf9f6;
  border: 1px solid #e8e6df;
  border-radius: var(--mky-radius-md);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
}

.mky-brand-desc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.mky-brand-desc h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--c-text, #1e1e1c);
}

.mky-brand-desc h3 {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 1.25rem 0 0.4rem;
  color: var(--c-text, #1e1e1c);
}
.mky-brand-desc h3:first-of-type {
  margin-top: 0;
}

.mky-brand-desc p {
  font-size: 0.875rem;
  color: #4a4845;
  line-height: 1.8;
  margin: 0 0 0.75rem;
}

.mky-brand-desc__footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e8e6df;
  font-size: 0.75rem;
  color: #888780;
}

/* ----------------------------------------------------------
   10. ⑦ 関連ブランド
   ---------------------------------------------------------- */
.mky-related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.mky-related__group-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mky-related__group-title .icon--rival   { color: var(--mky-rival-color); }
.mky-related__group-title .icon--related { color: var(--mky-related-color); }

.mky-related__sub {
  font-size: 0.6875rem;
  color: #888780;
  font-weight: 400;
}

.mky-brand-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.mky-brand-link {
  border: 1px solid #e8e6df;
  border-radius: var(--mky-radius-sm);
  padding: 0.6rem 0.75rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.mky-brand-link:hover {
  background: #f5f3ec;
  border-color: #c0bdb4;
}
.mky-brand-link__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
}
.mky-brand-link__genre {
  font-size: 0.6875rem;
  color: #888780;
}
.mky-brand-link__count {
  font-size: 0.6875rem;
  color: var(--mky-new-color);
  margin-top: 2px;
}

/* ----------------------------------------------------------
   11. レスポンシブ
   ---------------------------------------------------------- */

/* タブレット（〜900px） */
@media (max-width: 900px) {
  .mky-hero {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
  .mky-hero__aside {
    /* タブレットでは統計のみ横並び、その他は非表示 */
  }
  .mky-hero__collage,
  .mky-hero__latest {
    display: none;
  }
  .mky-beginner__grid {
    grid-template-columns: 1fr 1fr;
  }
  .mky-best-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mky-guides-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mky-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mky-brand-desc__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* スマホ（〜600px） */
@media (max-width: 600px) {
  .mky-brand-hub {
    padding: 0 0.75rem 3rem;
  }
  .mky-hero {
    padding: 1.25rem;
    border-radius: var(--mky-radius-md);
  }
  .mky-hero__heading {
    font-size: 1.25rem;
  }
  .mky-hero__stat-num {
    font-size: 1.125rem;
  }
  .mky-beginner {
    padding: 1rem;
  }
  .mky-beginner__grid {
    grid-template-columns: 1fr;
  }
  .mky-best-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
  }
  .mky-guides-grid {
    grid-template-columns: 1fr;
  }
  /* スマホは横写真+テキスト行リスト */
  .mky-post-grid {
    grid-template-columns: 1fr;
  }
  .mky-post-card {
    flex-direction: row;
  }
  .mky-post-card__thumb {
    width: 88px;
    aspect-ratio: 1;
    flex-shrink: 0;
  }
  .mky-related {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .mky-brand-link-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mky-brand-desc {
    padding: 1.25rem;
  }
}

/* 動作低減 */
@media (prefers-reduced-motion: reduce) {
  .mky-post-card__thumb img {
    transition: none;
  }
}

/* すべて見るカード — 文字サイズ調整（margin-bottomは削除） */
.mky-post-card--more span:nth-child(2) {
  font-size: 0.875rem;
}
.mky-post-card--more span:nth-child(3) {
  font-size: 0.75rem;
}

/* 全件一覧グリッドの下マージン */
#mky-archive .mky-post-grid {
  margin-bottom: 2rem;
}

/* スマホ：編集部ベストピックを1列に */
@media (max-width: 600px) {
  .mky-best-grid {
    grid-template-columns: 1fr;
  }
}