/* トップページの「書籍紹介」（#bk96258993）と「関連動画」（#bk96258992）。
   PC（幅 642px 以上）では、いちばん新しい書籍（最新刊）と動画を大きな枠で目立たせ、ほかを下に並べる
   （書籍紹介のページの最新刊、動画のページのいちばん新しい動画と同じ見せ方）。
   スマホ（641px 以下）は以前のまま 1 列に並べ、大きな枠のためのラベルや説明は隠す。
   関連動画は tools/videos.mjs が content/videos.json から作る。書籍紹介は index.html を直接編集する。
   表紙の大きさ（同じ高さの枠）は _lab/books.css。BiNDup の段組みより優先させるため、ブロックの id から指定する */

/* PC の大きな枠だけで表示するもの */
.lab-top-book-label,
.lab-top-book-meta,
.lab-top-book-action,
.lab-top-video-label,
.lab-top-video-meta,
.lab-top-video-channel {
  display: none;
}

/* 関連動画: 動画を表示する前（JavaScript の実行前）も 16:9 の高さを確保する */
.lab-top-video-player {
  aspect-ratio: 16 / 9;
  background: #000;
}
.lab-top-video-text p {
  margin: 0;
}
/* 題名は、以前と同じく動画との間を 1 行分あける（c-body の行の高さ 2.3） */
#bk96258992 .lab-top-video-title {
  margin-top: 2.3em;
}

@media only screen and (min-width: 642px) {
  /* BiNDup の段組み（float・幅・余白の指定）の代わりにグリッドで並べる */
  #bk96258992 .lab-top-videos,
  #bk96258993 .lab-top-books {
    display: grid;
  }
  #bk96258992 .lab-top-videos::before,
  #bk96258992 .lab-top-videos::after,
  #bk96258993 .lab-top-books::before,
  #bk96258993 .lab-top-books::after {
    content: none;
  }
  #bk96258992 .lab-top-videos > .column,
  #bk96258993 .lab-top-books > .column {
    float: none;
    width: auto;
    margin: 0;
  }

  /* 大きな枠の共通の見た目（背景・ラベル） */
  #bk96258992 .lab-top-video.-featured,
  #bk96258993 .lab-top-book.-featured {
    grid-column: 1 / -1;
    display: grid;
    background: #f7f3ef;
  }
  #bk96258992 .lab-top-video-label,
  #bk96258993 .lab-top-book-label {
    display: inline-block;
    justify-self: start;
    margin: 0 0 0.9em;
    padding: 0.1em 0.8em;
    background: #6c3b19;
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.9;
  }

  /* 関連動画: いちばん新しい動画は幅いっぱいの枠（動画 2：説明 1）、ほかの 3 本は下に横に並べる */
  #bk96258992 .lab-top-videos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 4%;
  }
  #bk96258992 .lab-top-video.-featured {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0 40px;
    align-items: center;
    padding: 32px 36px;
  }
  #bk96258992 .lab-top-video.-featured .lab-top-video-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #bk96258992 .lab-top-video-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3em 0.8em;
  }
  .lab-top-video-meta time {
    color: #6c3b19;
    font-family: Vollkorn, serif;
    font-size: 1.1em;
    font-variant-numeric: lining-nums;
  }
  .lab-top-video-kind {
    padding: 0 0.5em;
    border: 1px solid #c9b8a6;
    color: #6c3b19;
    font-size: 0.75em;
    line-height: 1.8;
  }
  #bk96258992 .lab-top-video.-featured .lab-top-video-title {
    margin-top: 0.4em;
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.7;
  }
  #bk96258992 .lab-top-video-channel {
    display: block;
    margin-top: 0.4em;
    color: #666;
    font-size: 0.85em;
    line-height: 1.7;
  }

  /* 書籍紹介: 最新刊は幅いっぱいの枠（表紙を大きく。右に題名・著者・発売日）、ほかの 4 冊は下に横に並べる。
     題名などは BiNDup の書き方（.c-body の中）のままなので、.c-body を枠に溶け込ませて（display: contents）配置する */
  #bk96258993 .lab-top-books {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 56px 5%;
  }
  #bk96258993 .lab-top-book.-featured {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: 1fr repeat(5, auto) 1fr;
    grid-template-areas: "cover ." "cover label" "cover title" "cover meta" "cover date" "cover action" "cover .";
    column-gap: 48px;
    padding: 40px 56px;
  }
  #bk96258993 .lab-top-book.-featured > .c-body {
    display: contents;
  }
  #bk96258993 .lab-top-book.-featured br {
    display: none;
  }
  #bk96258993 .lab-top-book.-featured .c-img {
    grid-area: cover;
  }
  /* 表紙の枠（縦横比）は _lab/books.css のまま（読み込む前から高さを確保する）。影は枠ではなく表紙の形に付ける */
  #bk96258993 .lab-top-book.-featured .c-img img {
    max-width: 220px;
    filter: drop-shadow(0 12px 14px rgba(60, 35, 15, 0.22));
  }
  #bk96258993 .lab-top-book-label {
    grid-area: label;
  }
  #bk96258993 .lab-top-book-title {
    grid-area: title;
    font-size: 1.7em;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }
  #bk96258993 .lab-top-book-title a {
    color: #202020;
  }
  .lab-top-book-sep {
    display: none;
  }
  .lab-top-book-sub {
    display: block;
    margin-top: 0.5em;
    color: #6c3b19;
    font-size: 0.55em;
    letter-spacing: 0.06em;
  }
  #bk96258993 .lab-top-book-meta {
    grid-area: meta;
    display: block;
    margin: 1.2em 0 0;
    font-size: 0.9em;
    line-height: 1.8;
  }
  #bk96258993 .lab-top-book.-featured .c-lead {
    grid-area: date;
    margin: 0.4em 0 0;
  }
  #bk96258993 .lab-top-book-action {
    grid-area: action;
    display: block;
    margin: 1.6em 0 0;
  }
}

/* 中くらいの画面（タブレットなど）: 大きな枠の余白と、最新刊の表紙を少し小さくする */
@media only screen and (min-width: 642px) and (max-width: 1024px) {
  #bk96258992 .lab-top-video.-featured {
    gap: 0 28px;
    padding: 24px;
  }
  #bk96258993 .lab-top-book.-featured {
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: 32px;
    padding: 32px;
  }
  #bk96258993 .lab-top-book.-featured .c-img img {
    max-width: 180px;
  }
  #bk96258993 .lab-top-book-title {
    font-size: 1.45em;
  }
}
/* さらに狭い画面（タブレットの縦向きなど）では、最新の動画の説明を動画の下に置く */
@media only screen and (min-width: 642px) and (max-width: 860px) {
  #bk96258992 .lab-top-video.-featured {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}