/* 人気ブログランキング — 全幅・5列・カテゴリータブ */

/*
 * 全幅ブレイクアウト（ブログカルーセルと同系）
 * テーマの .col / .align* が具体性で勝つ箇所のみ !important（色・余白の装飾用途には使わない）
 */
.col:has(> .wp-block-arc-editing-blog-ranking),
.col:has(> .wp-block-arc-editing-blog-ranking > .arc-blog-ranking) {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  overflow: visible !important;
}

.row:has(> .col > .wp-block-arc-editing-blog-ranking) {
  overflow: visible !important;
}

.wp-block-arc-editing-blog-ranking,
.wp-block-arc-editing-blog-ranking.alignfull,
.wp-block-arc-editing-blog-ranking.alignwide {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  float: none !important;
}

/*
 * .arc-showcase-section の max-width:75rem / padding-inline を上書き。
 * 見出し揃えは blog/style.css の .arc-blog-heading--align-* を共用。
 */
.arc-blog-ranking.arc-showcase-section {
  --arc-ss-type-heading: clamp(1.5rem, 3.7vw, 2.1875rem);
  --arc-blog-ranking-gap: clamp(0.75rem, 1.6vw, 1.15rem);
  /* 左右余白 ≈ 100px → 6.25rem（16px 基準） */
  --arc-blog-ranking-pad-x: 6.25rem;
  --arc-showcase-pad-x: var(--arc-blog-ranking-pad-x);
  --arc-blog-card-radius: clamp(0.75rem, 2vw, 1.125rem);
  --arc-blog-media-ratio: 16 / 10;
  --arc-blog-reveal-offset: clamp(0.5rem, 1.5vw, 0.875rem);
  --arc-blog-badge-peek: 0.85rem;
  color: var(--arc-brand-dark, #2c2e36);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: var(--arc-showcase-pad-block, clamp(3rem, 8vw, 5rem));
  padding-inline: var(--arc-blog-ranking-pad-x);
  overflow: visible;
}

/*
 * 見出し ↔ カテゴリータブの余白・タイポ。
 * blog/style.css に依存しない（トップでは blog CSS がインラインされず欠けるため）。
 */
.arc-blog-ranking .arc-blog__heading.arc-split-story__heading {
  margin: 0 0 clamp(0.85rem, 2vw, 1.35rem);
  padding-bottom: 1.5rem;
  font-size: var(--arc-ss-type-heading);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--arc-brand-dark, #2c2e36);
}

/* カテゴリー切り替え（2つ以上選択時のみ表示）— 常に1行 */
.arc-blog-ranking__tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.arc-blog-ranking__tabs::-webkit-scrollbar {
  display: none;
}

.arc-blog-ranking.arc-blog-heading--align-center .arc-blog-ranking__tabs {
  justify-content: center;
}

.arc-blog-ranking.arc-blog-heading--align-right .arc-blog-ranking__tabs {
  justify-content: flex-end;
}

.arc-blog-ranking__tab {
  appearance: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.45em 1em;
  border: 1px solid var(--arc-brand-dark, #2c2e36);
  border-radius: 999px;
  background: transparent;
  color: var(--arc-brand-dark, #2c2e36);
  font: inherit;
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.arc-blog-ranking__tab:hover,
.arc-blog-ranking__tab:focus-visible {
  background: rgba(44, 46, 54, 0.06);
}

.arc-blog-ranking__tab:focus-visible {
  outline: 2px solid var(--arc-brand-cyan, #009ace);
  outline-offset: 2px;
}

/* すべて = ダーク。カテゴリータブは --arc-blog-ranking-tab-* で色付け */
.arc-blog-ranking__tab.is-active,
.arc-blog-ranking__tab.is-active:hover,
.arc-blog-ranking__tab.is-active:focus-visible {
  background: var(--arc-blog-ranking-tab-active, var(--arc-brand-dark, #2c2e36));
  color: var(--arc-blog-ranking-tab-ink, #fbf9ef);
  border-color: var(--arc-blog-ranking-tab-active, var(--arc-brand-dark, #2c2e36));
}

/*
 * 非表示パネルは hidden="until-found"（UA / ブラウザ既定の非表示）。
 * display:none を上書きしない（until-found の content-visibility を壊さない）。
 * 初期 HTML には全カテゴリー分のカードを出力する。
 */

.arc-blog-ranking__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--arc-blog-ranking-gap);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: var(--arc-blog-badge-peek);
  overflow: visible;
}

.arc-blog-ranking__empty {
  margin: 0;
  font-size: 0.9375rem;
  color: #5a5f6b;
}

.arc-blog-ranking.arc-split-story--colorful {
  --arc-ss-heading-color: var(--arc-brand-dark, #2c2e36);
  --arc-ss-text-color: var(--arc-brand-dark, #2c2e36);
}

@media (max-width: 72rem) {
  .arc-blog-ranking.arc-showcase-section {
    --arc-blog-ranking-pad-x: clamp(1.25rem, 4vw, 2.5rem);
  }

  .arc-blog-ranking__grid {
    display: flex;
    gap: var(--arc-blog-ranking-gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.35rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .arc-blog-ranking__grid::-webkit-scrollbar {
    display: none;
  }

  .arc-blog-ranking__grid > .arc-blog__card {
    flex: 0 0 min(15.5rem, 78vw);
    scroll-snap-align: start;
  }

  /*
   * グリッド全体へ pan-x するとタイトル等の上でもページ縦スクロール不能になる。
   * アイキャッチ上のジェスチャだけ横優先にし、文言エリアからは縦スクロール可能にする。
   */
  .arc-blog-ranking .arc-blog__media,
  .arc-blog-ranking .arc-blog__image-wrap,
  .arc-blog-ranking .arc-blog__image {
    touch-action: pan-x;
  }
}

/* モバイル — ブログカルーセル SP と同じ 5:4 / タブを1行に収める */
@media (max-width: 40rem) {
  .arc-blog-ranking.arc-showcase-section {
    --arc-blog-media-ratio: 5 / 4;
    --arc-blog-ranking-pad-x: 1rem;
  }

  .arc-blog-ranking .arc-blog__media {
    aspect-ratio: 5 / 4;
  }

  .arc-blog-ranking__tabs {
    gap: 0.35rem;
  }

  .arc-blog-ranking__tab {
    padding: 0.4em 0.7em;
    font-size: 0.6875rem;
  }

  .arc-blog-ranking__grid > .arc-blog__card {
    flex: 0 0 min(16.5rem, 82vw);
  }
}

/*
 * PC 順次入場（1位→5位）
 * - view.js が .arc-blog-ranking--reveal を PC のみ付与（JS 無効時は非適用＝SEO 安全）
 * - 遅れは transition-delay（!important 不使用）
 * - 72rem 以下では隠さない（リサイズやクラス残留時の保険）
 */
.arc-blog-ranking {
  --arc-blog-ranking-reveal-dur: 1.1s;
  --arc-blog-ranking-stagger: 0.18s;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 72.01rem) {
  .arc-blog-ranking__panel.arc-blog-ranking--reveal > .arc-blog-ranking__grid > .arc-blog__card {
    transition:
      opacity var(--arc-blog-ranking-reveal-dur) ease,
      transform var(--arc-blog-ranking-reveal-dur) ease;
    transition-delay: calc(var(--arc-blog-ranking-stagger) * var(--arc-rank-i, 0));
  }

  .arc-blog-ranking__panel.arc-blog-ranking--reveal > .arc-blog-ranking__grid > .arc-blog__card:not(.is-visible) {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }

  .arc-blog-ranking__panel.arc-blog-ranking--reveal > .arc-blog-ranking__grid > .arc-blog__card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .arc-blog-ranking__panel.arc-blog-ranking--reveal > .arc-blog-ranking__grid > .arc-blog__card:nth-child(1) {
    --arc-rank-i: 0;
  }

  .arc-blog-ranking__panel.arc-blog-ranking--reveal > .arc-blog-ranking__grid > .arc-blog__card:nth-child(2) {
    --arc-rank-i: 1;
  }

  .arc-blog-ranking__panel.arc-blog-ranking--reveal > .arc-blog-ranking__grid > .arc-blog__card:nth-child(3) {
    --arc-rank-i: 2;
  }

  .arc-blog-ranking__panel.arc-blog-ranking--reveal > .arc-blog-ranking__grid > .arc-blog__card:nth-child(4) {
    --arc-rank-i: 3;
  }

  .arc-blog-ranking__panel.arc-blog-ranking--reveal > .arc-blog-ranking__grid > .arc-blog__card:nth-child(5) {
    --arc-rank-i: 4;
  }
}

/* タブ切替リセット時はフェードアウトさせない */
.arc-blog-ranking__panel.arc-blog-ranking--reveal.is-resetting > .arc-blog-ranking__grid > .arc-blog__card {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .arc-blog-ranking__tab {
    transition: none;
  }
}