/* ==========================================================================
   c-ranking — Figma: ranking-block + Rank/Text（「よく読まれている記事」 24381:7521）
   bg/subtle・枠 border/default・上下 24px 左右 16px・見出し renewal/JP/Label/18/Bold
   順位: 22px の枠の中央に 20px の丸。1〜3 位 bg/brand + text/inverse、4 位以降 bg/placeholder + text/muted
   PC は 1 行で省略（Figma: 高さ 22px で clip）、SP は枠線なし・12px で折り返し（静的HTML の c-ranking と同じ）
   WP: 閲覧数の多い順に自動反映（Figma 注記）
   ========================================================================== */

.c-ranking {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24) var(--space-16);
  background-color: var(--color-bg-subtle);
  /* 枠線は内側の box-shadow（寸法に含めない。静的HTML と同じ） */
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}

.c-ranking__title {
  color: var(--color-text-base);
}

.c-ranking__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  counter-reset: rank;
}

.c-ranking__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  color: var(--color-text-base);
}

.c-ranking__number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px; /* Figma 固有寸法: 順位の丸 */
  height: 20px;
  margin: 1px; /* Figma: 22px の枠の中央に 20px の丸 */
  border-radius: var(--radius-full);
  background-color: var(--color-bg-placeholder);
  color: var(--color-text-muted);
  /* renewal/EN/Caption/12/Bold（行間 12px） */
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  /* 数字を丸の中央に置く: Sofia Pro は 12px の行の中で数字（高さ約 8px）が 1px 下に寄るため、
     下に 2px 余白を取って数字を 1px 上げる（border-box なので丸の大きさは 20px のまま）。
     text-box（trim-both cap alphabetic）は flex コンテナには効かないため使わない */
  padding-bottom: 2px;
  /* 字間（--letter-spacing-base）は最後の文字の後ろにも付き、数字が左に寄るため、左に同じ幅の余白を取って打ち消す */
  padding-left: var(--letter-spacing-base);
}

/* 2 桁（10 位〜）: 先頭の「1」は細く左に旗が出る字形のため、幾何学的に中央でも左に寄って見える。さらに 0.5px 右へ */
.c-ranking__number--double {
  padding-left: calc(var(--letter-spacing-base) + 1px);
}

.c-ranking__item:nth-child(-n + 3) .c-ranking__number {
  background-color: var(--color-bg-brand);
  color: var(--color-text-inverse);
}

.c-ranking__label {
  flex: 1 0 0;
  overflow: hidden;
  min-width: 0;
  line-height: 22px; /* Figma 固有寸法: 1 行の高さ */
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-ranking__link:hover .c-ranking__label,
.c-ranking__link:focus-visible .c-ranking__label {
  color: var(--color-text-brand);
  text-decoration: underline;
}

@media (max-width: 1023px) {

  .c-ranking {
    box-shadow: none;
  }

  .c-ranking__label {
    font-size: 0.75rem; /* SP: 12px（Figma実測値） */
    white-space: normal;
  }
}