/*!
 * toppage-f-sidebar.css - サイドバー（プロフィール／人気記事／付箋）
 *
 * 担当ジョブ: ⑤-b サイドバー実装（CLD-243 の後半）
 * 配置先:     cocoon-child-master/assets/css/toppage-f-sidebar.css
 *
 * 値の出典
 *   toppage-f-prototype/static/assets/css/toppage-f.css の
 *   .f-profile* / .f-popular* / .f-side__sticky（テスト済みの先行試作）。
 *   寸法・色・傾き・余白は1つも変えていない。
 *   ⑤-bで足したのは、未集計のときの「空の枠」の見た目だけ。
 *
 * ①の共通CSS（toppage-f-base.css）が先に読み込まれている前提。
 *   - .f-card / .f-sticky（枠・影・付箋の下地）
 *   - .f-side の flex 配置と、1024px以下でメインカラムの下へ移す指定
 *   - 変数（--f-avatar-bg / --f-ink-sub / --f-red / --f-hairline …）
 *   ここでは .f-side 自体の flex-direction / width を上書きしない。
 *   段組みの切り替えは①の担当で、⑤-bが足すのは「中のカードをどう並べるか」だけ。
 *
 * ブレークポイント（①と同じ）
 *   〜768px    スマートフォン
 *   769〜1024  タブレット
 *   1025px〜   PC
 */

/* ------------------------------------------------------------------ *
 * 管理人プロフィール
 * ------------------------------------------------------------------ */
.f-profile { padding: 22px; transform: rotate(-1deg); text-align: center; }

.f-profile__avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--f-avatar-bg);
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.f-profile__avatar span { font-size: 22px; }

.f-profile__name { font-size: 17px; margin-top: 12px; }
.f-profile__text { font-size: 12px; color: var(--f-ink-sub); margin-top: 10px; line-height: 1.8; }

/* ------------------------------------------------------------------ *
 * 人気記事3件
 *
 * 中身は⑥-b（GSC連携）が差し込む。ここは枠と行の見た目だけを持つ。
 * 件数が3件から増減してもよいように、高さの決め打ちはしない。
 * ------------------------------------------------------------------ */
.f-popular { padding: 22px; transform: rotate(0.8deg); }
.f-popular__title { font-size: 16px; margin-bottom: 14px; }
.f-popular__list { display: flex; flex-direction: column; gap: 12px; }

/* 先行試作は <a class="f-popular__item"> だったが、⑤-aのバナーに合わせて
   li（項目）と a（リンク）を分けた。読み上げが「3項目のリスト」と言えるようにするため。
   横並びの指定はリンク側へ移してあるので、見た目は先行試作と同じ。 */
.f-popular__item { display: block; }
.f-popular__link { display: flex; gap: 10px; align-items: flex-start; }

.f-popular__rank { font-size: 15px; color: var(--f-red); }
.f-popular__name { font-size: 12.5px; line-height: 1.7; }
/* ホバー時の下線は①の共通指定（.f-root a:hover .f-card-title）が付ける。 */

/* --- 未集計のときの空の枠（⑤-bで追加） ---------------------------- *
 * 順位を推測で埋めない代わりに、差し込み後と同じ行数ぶんの高さだけを見せる。
 * 読み上げからは aria-hidden で外してあり、状況は .f-popular__empty の1文が伝える。 */
.f-popular__item--empty { display: flex; gap: 10px; align-items: center; }
.f-popular__item--empty .f-popular__rank { color: var(--f-hairline); }
.f-popular__bar {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  background: var(--f-hairline);
  opacity: 0.55;
}
/* 2行ぶんの記事名が入る想定の枠なので、2本目を少し短くして行の見当を付ける。 */
.f-popular__item--empty:nth-child(even) .f-popular__bar { margin-right: 22px; }

.f-popular__empty {
  font-size: 12px;
  line-height: 1.7;
  color: var(--f-ink-sub);
  margin-top: 12px;
}

/* ------------------------------------------------------------------ *
 * 付箋型コメント
 * ------------------------------------------------------------------ */
.f-side__sticky {
  transform: rotate(-2deg);
  align-self: center;
  width: 230px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
}

/* ================================================================== *
 * レスポンシブ
 *
 * .f-main-row / .f-side 自体の切り替え（横並びをやめてメインカラムの下へ）は
 * ①の共通CSSが持つ。ここでは中のカードの並び方だけを決める。
 *   1024px以下 … ①が .f-side を flex-direction: row / flex-wrap: wrap にする
 *   768px以下  … ①が .f-side を flex-direction: column に戻す
 * ================================================================== */

/* --- タブレット（769〜1024px） -------------------------------------
 * 横幅が広いので、プロフィールと人気記事は横に2枚並べる。
 * 300px を下回ると折り返って縦に積まれる。付箋はその下に1行ぶん敷く。 */
@media (max-width: 1024px) {
  .f-side > .f-profile,
  .f-side > .f-popular { flex: 1 1 300px; }
  .f-side__sticky { width: 100%; align-self: stretch; }

  /* 指で押す前提の幅なので、リンクの当たり判定を 44px 確保する。
     ⑤-aのバナー（.f-tools__link）と同じ基準。
     題名が2行になる記事は元から44px前後あるので、伸びるのは1行の記事だけ。
     先行試作から意図して変えた唯一の寸法（docs/sidebar.md に理由を書いてある）。 */
  .f-popular__link { min-height: 44px; padding: 3px 0; }
}

/* --- スマートフォン（〜768px） -------------------------------------
 * 縦1列。傾きは端が切れる原因になるので水平に戻す（②のヒーローと同じ扱い）。 */
@media (max-width: 768px) {
  .f-side > .f-profile,
  .f-side > .f-popular { flex: 1 1 auto; }
  .f-profile,
  .f-popular { transform: none; }
  .f-side__sticky { width: 100%; }
}