/* ===========================================
   香水レビュー／読みもの の一覧

   中身は data/site-index.json、
   各ページへの書き込みは tools/build-side-index.py。
   ここでは見た目だけを決めています。

   ★このファイルを直したら、tools/build-side-index.py の
     CSS_VERSION も必ず上げること。上げないとブラウザが
     古いCSSを使い続けます。

   ★書く順番に注意。共通の指定 → 個別の指定 の順です。
     逆にすると、あとに書いたほうが勝って効かなくなります。
   =========================================== */


/* ============================================================
   1. 共通の見た目（リンク・見出し）
   ============================================================ */

.side-block { margin-bottom: 34px; }
.side-block:last-child { margin-bottom: 0; }

.side-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dark);
  letter-spacing: 0.1em;
  padding-bottom: 9px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--pink-light);
}
.side-title .en {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  font-weight: 300;
  color: var(--pink-deep);
  letter-spacing: 0.2em;
  margin-bottom: 4px;
}

.side-group {
  font-size: 10.5px;
  color: var(--pink-deep);
  letter-spacing: 0.12em;
  margin: 16px 0 5px;
}

.side-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-block li { margin: 0; }

.side-block li a,
.side-block li span.side-current {
  display: block;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-light);
  text-decoration: none;
  padding: 7px 0 7px 13px;
  position: relative;
  transition: color 0.2s;
}
.side-block li a::before,
.side-block li span.side-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 4px;
  height: 1px;
  background: var(--pink-light);
  transition: width 0.2s, background 0.2s;
}
.side-block li a:hover { color: var(--pink-deep); }
.side-block li a:hover::before {
  width: 8px;
  background: var(--pink-deep);
}

/* いま開いているページ */
.side-block li span.side-current {
  color: var(--pink-deep);
  font-weight: 400;
}
.side-block li span.side-current::before {
  width: 8px;
  background: var(--pink-deep);
}

.side-more {
  display: inline-block;
  font-size: 11.5px;
  color: var(--pink-deep);
  text-decoration: none;
  margin-top: 10px;
  letter-spacing: 0.05em;
}
.side-more:hover { text-decoration: underline; }

/* 一覧が追従するときの共通設定。
   ★ overscroll-behavior: contain は絶対に付けないこと。
     付けると、カーソルが一覧の上にあるときマウスホイールが
     一覧の中に閉じ込められ、ページが動かなくなります。 */
/* 一覧は、記事本文と見分けがつくように淡い下地を敷く。
   サイトの --pink-pale（#fdf0f2）をさらに薄めた色。 */
.side-index {
  background: #fdf7f8;
  border: 1px solid #f7e4e8;
  border-radius: 14px;
  padding: 24px 20px;
}
.side-index::-webkit-scrollbar { width: 5px; }
.side-index::-webkit-scrollbar-thumb {
  background: var(--pink-light);
  border-radius: 3px;
}
.side-index::-webkit-scrollbar-track { background: transparent; }


/* ============================================================
   2. トピックスのページ
      本文と一覧の2カラムを、まとめて中央に置く形
   ============================================================ */

.blog-main.has-side-index {
  max-width: 1120px;
}

.side-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
.side-layout > .side-index {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

@media (max-width: 900px) {
  .side-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .side-layout > .side-index {
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 48px;
  }
  .side-layout .side-block li a,
  .side-layout .side-block li span.side-current {
    font-size: 13.5px;
    padding: 9px 0 9px 13px;
  }
  .side-layout .side-block li a::before,
  .side-layout .side-block li span.side-current::before { top: 17px; }
}


/* ============================================================
   3. ブログ記事のページ

      パンくず・アイキャッチ・タイトルは、2カラムの「上」に出す。
      アイキャッチは枠いっぱいに広がるので、
      枠ごと中央にあれば、アイキャッチも必ず中央に来る。

      その下から本文と一覧を横に並べる。
      本文・タイトル・アイキャッチの左端はすべてそろう。

      幅が足りない画面では、一覧が本文の下に積まれる。
   ============================================================ */

.blog-main.has-side-index.is-centered {
  max-width: 1140px;
}

/* アイキャッチは枠いっぱい（＝画面の中央）。
   タイトルとパンくずは本文と同じ幅にそろえて、左端を合わせる。 */
.is-centered .breadcrumb,
.is-centered .blog-header {
  max-width: 740px;
}

.side-layout-centered {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
.side-layout-centered > .side-index {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/* 1100px 未満は、一覧を本文の下へ。
   本文の幅も元の740pxに戻すので、見え方は横に置く前と同じ。 */
@media (max-width: 1100px) {
  .blog-main.has-side-index.is-centered {
    max-width: 740px;
  }
  .side-layout-centered {
    display: block;
  }
  .side-layout-centered > .side-index {
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 48px;
  }
  .side-layout-centered .side-block { margin-bottom: 40px; }
  .side-layout-centered .side-block > ul,
  .side-layout-centered .side-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
  .side-layout-centered .side-groups > div { break-inside: avoid; }
  .side-layout-centered .side-group { margin-top: 18px; }
}

/* 狭い画面では1列に */
@media (max-width: 680px) {
  .side-layout-centered .side-block > ul,
  .side-layout-centered .side-groups {
    grid-template-columns: 1fr;
  }
  .side-layout-centered .side-block li a,
  .side-layout-centered .side-block li span.side-current {
    font-size: 13.5px;
    padding: 9px 0 9px 13px;
  }
  .side-layout-centered .side-block li a::before,
  .side-layout-centered .side-block li span.side-current::before { top: 17px; }
}