/**
 * ニュース / ブログ関連
 *
 * Smooooth の一覧・記事出力に対応するスタイルをまとめたファイル。
 * 12_main.css からは、土台のリセットと汎用の .list / .__mat を残して切り出した。
 */

:root {
  /* サムネイルに画像が無いときのフォールバック。案件ごとに差し替える */
  --thumbnail-fallback: url("/system_panel/uploads/images/ogp.png");

  /* ページネーション */
  --pagination-gap: 1.25rem;
  --pagination-item-size: 3rem;
  --pagination-item-radius: 0.25rem;
  --pagination-nav-padding-x: 0.75rem;
  --pagination-hover-bg: hsl(from var(--ink) h s l / 0.06);
  --pagination-current-bg: var(--ink);
  --pagination-current-fg: var(--snow);

  /* 記事本文。罫線・補助テキストの色と、コードブロックや表ヘッダの下地 */
  --article-rule-color: var(--light-gray);
  --article-muted-color: var(--dark-gray);
  --article-surface: hsl(from var(--ink) h s l / 0.05);
}

/**
 * ページネーション
 *
 * こちらが書けるのは <div class="webgene-pagination"></div> の空 div だけで、
 * ul の中身は CMS が生成する。実際の出力（2ページ目にいる場合）:
 *
 *   <div class="webgene-pagination">
 *     <ul>
 *       <li class="prev"><a>前へ</a></li>
 *       <li class="number"><a>1</a></li>
 *       <li class="number selected"><a>2</a></li>
 *       <li class="number"><a>3</a></li>
 *       <li class="next"><a>次へ</a></li>
 *     </ul>
 *   </div>
 *
 * prev / next は端のページでは出力されない。中身は常に a になる。
 *
 * .prev / .next / .number / .selected はいずれも総称的な名前なので、
 * 案件側の同名クラスと衝突しないよう .webgene-pagination の配下に限定する。
 */
.webgene-pagination {
  & ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--pagination-gap);
    padding: 0;
    margin: 0;

    & li {
      min-width: var(--pagination-item-size);
      line-height: var(--pagination-item-size);
      text-align: center;
      border-radius: var(--pagination-item-radius);

      & > a {
        display: block;
        color: inherit;
        text-decoration: none;
      }

      /* 前へ / 次へ は文字数が一定しないため、正方形ではなく
       * 左右の余白で形を作る */
      &.prev,
      &.next {
        padding-inline: var(--pagination-nav-padding-x);
      }

      &:hover {
        background-color: var(--pagination-hover-bg);
      }

      &.selected {
        background-color: var(--pagination-current-bg);
        color: var(--pagination-current-fg);
        cursor: default;

        &:hover {
          background-color: var(--pagination-current-bg);
        }
      }
    }
  }
}

/**
 * 前後の記事へのリンク（記事詳細）
 *
 * %prevPageLink.to("前の記事へ","前の記事はありません")% は、対象が無いとき
 * a にならずプレーンテキストへ置き換わる。リンクが無い状態を弱く見せる。
 */
.webgene-item-aroundPageLink {
  margin: 0;
  color: var(--gray);

  & a {
    color: var(--ink);
  }
}

/**
 * .webgene-item（記事カード）には既定のスタイルを置かない。
 *
 * カードの見た目は案件ごとに大きく違い、共通の既定を持つと必ず打ち消す作業が
 * 発生する。一覧に並ぶこと自体は .blog-list 側のグリッドで担保している。
 */

/* 件数・ページ位置の表示。中身は %pageItems% などを並べて自分で書く枠 */
.webgene-legend {
  font-size: 0.875rem;
  color: var(--gray);
  text-align: center;

  & p {
    margin: 0;
  }
}

/* 該当なしの表示。マークアップは 04_List.js が生成する */
.webgene-no-items {
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
}

/**
 * サムネイル
 *
 * 比率の修飾子は 10_objects.css の .aspect-* と値が重複する。比率を指定するのは
 * 案件側の HTML で、稼働中の案件でクラスを付け替えるコストのほうが大きいため
 * 残している。新規のマークアップではユーティリティ側を使う。
 */
.thumbnail {
  position: relative;

  &.thumbnail--square {
    aspect-ratio: 1 / 1;
  }
  &.thumbnail--16x9 {
    aspect-ratio: 16 / 9;
  }
  &.thumbnail--3x2 {
    aspect-ratio: 3 / 2;
  }

  & img,
  & video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 画像が無いときのフォールバック。::before はインラインなので、
   * 箱いっぱいに広げるには絶対配置が要る */
  &:empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--thumbnail-fallback);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

/*
 * 今後スタイルを定義するためのプレースホルダー
 * リストのクラスに合わせてコピーして使用する
 */
.blog-list {
  & .webgene-blog {
    display: grid;
  }
  @media (min-width: 768px) {
    & .webgene-blog {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    & .webgene-pagination,
    & .webgene-legend,
    & .webgene-no-items {
      grid-column: span 2 / span 2;
    }
  }
  @media (min-width: 1200px) {
    & .webgene-blog {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    & .webgene-pagination,
    & .webgene-legend,
    & .webgene-no-items {
      grid-column: span 3 / span 3;
    }
  }
}
.insta-list {
  & .webgene-blog {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  & .webgene-pagination,
  & .webgene-legend,
  & .webgene-no-items {
    grid-column: span 2 / span 2;
  }
  @media (min-width: 768px) {
    & .webgene-blog {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    & .webgene-pagination,
    & .webgene-legend,
    & .webgene-no-items {
      grid-column: span 4 / span 4;
    }
  }
}

.article-body {
  & > p {
    margin: 1em 0;
  }

  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    margin: 2em 0 1em;
  }

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }

  & a,
  & a:hover {
    color: var(--blue);
    text-decoration: underline;
  }

  /* CMS の出力にはクラスが付かないため、要素セレクタで体裁を与える。
   * 12_main.css で見出しの font-weight は inherit にしてあり、そのままでは
   * 本文と見分けが付かないためここで戻す。 */
  & > h1 {
    font-size: 1.75em;
  }
  & > h2 {
    font-size: 1.5em;
  }
  & > h3 {
    font-size: 1.25em;
  }
  & > h4 {
    font-size: 1.125em;
  }
  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    font-weight: 700;
    line-height: 1.4;
  }

  & > ul,
  & > ol {
    margin: 1em 0;
    padding-left: 1.5em;
  }
  & > ul {
    list-style: disc outside;
  }
  & > ol {
    list-style: decimal outside;
  }
  & li + li {
    margin-top: 0.5em;
  }
  & li > ul,
  & li > ol {
    margin: 0.5em 0;
  }

  & > blockquote {
    margin: 1.5em 0;
    padding: 0.75em 1.25em;
    border-left: 3px solid var(--article-rule-color);
    color: var(--article-muted-color);
  }

  & > figure {
    margin: 1.5em 0;
  }
  & figcaption {
    margin-top: 0.5em;
    font-size: 0.875em;
    color: var(--article-muted-color);
  }

  & img {
    height: auto;
  }

  /* 幅の広い表は本文をはみ出させず、表の中だけ横スクロールさせる */
  & > table {
    display: block;
    width: 100%;
    margin: 1.5em 0;
    overflow-x: auto;
    border-collapse: collapse;
  }
  & th,
  & td {
    padding: 0.5em 0.75em;
    border: 1px solid var(--article-rule-color);
  }
  & th {
    background-color: var(--article-surface);
    text-align: left;
    font-weight: 700;
  }

  & > pre {
    margin: 1.5em 0;
    padding: 1em;
    overflow-x: auto;
    background-color: var(--article-surface);
    border-radius: 0.25rem;
  }
  & code {
    font-family: var(--font-mono);
    font-size: 0.9375em;
  }
  & > pre code {
    font-size: inherit;
  }

  & > hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--article-rule-color);
  }

  & strong,
  & b {
    font-weight: 700;
  }
}

/**
 * 記事の画像のスタイル
 * Lightboxと併せて使用することを前提に、アスペクト比を固定している
 */
.item-images {
  & .item-image {
    & img {
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }
  }
}

/**
 * 記事の動画のスタイル（YouTube埋め込み）
 */
.item-video {
  position: relative;
  width: 100%;
  & iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}