/* books.css — 書籍紹介セクション（Figma: Frame 1900 2008:10515 / LITERARY WORKS）
   実値: 青パネル radius 32 padding 120px 120px 80px / 内側 1000px gap 56
         書影 247x360 影 0,0,35,5% / 右カラム 680px gap 24
         タイトル 25.6px Bold / 受賞 18.29px Black + 王冠24px */

.books {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-120) 0;
}

.books__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--layout-max);
  padding: var(--space-120) var(--space-120) var(--space-80);
  border-radius: var(--radius-32);
  background: var(--color-primary);
  /* overflow は切らない：右下のロボット（__deco）がパネル下端からはみ出す（Figma準拠）。
     透かし（LITERARY WORKS）はパネル内に収まるためクリップ不要。 */
}

.books__watermark {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  text-align: center;
  color: var(--color-white);
  opacity: 0.11;
  pointer-events: none;
}

/* 透かしは語ごとの span。PCは1語1行（従来の nl2br と同じ見た目）。
   SPはスペース区切りの1行（components/watermark.css で上書き）。 */
.books__watermark span {
  display: block;
}

.books__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-56);
  width: 62.5rem;
  max-width: 100%;
}

.books__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.book-item__cover {
  width: 15.4375rem;
  height: 22.5rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-book);
}

.book-item__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 42.5rem;
  color: var(--color-white);
}

.book-item__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.book-item__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.book-item__title {
  margin: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.book-item__subtitle {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.book-item__author {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.book-item__line {
  display: block;
  width: 100%;
  border-top: var(--border-width) solid var(--color-white);
}

.book-item__awards {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-item__award {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-none);
  letter-spacing: var(--letter-spacing-widest);
}

.book-item__award::before {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.0625rem;
  background: url("../../images/icon-crown.svg") center / contain no-repeat;
}

.book-item__desc {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

/* 白枠付きボタン + 外部リンクアイコン（Figma: 1976:9907） */
.btn--bordered {
  border: var(--border-width) solid var(--color-white);
}

.btn--external::after {
  mask: url("../../images/icon-open-in-new.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-open-in-new.svg") center / contain no-repeat;
}

/* パネル右下のロボットイラスト（Figma: 話す4 999,941.33 193x235。
   2冊目のボタン行の高さに重なり、パネル下端から下へはみ出す） */
.books__deco {
  position: absolute;
  top: 58.833125rem; /* ⚠ Figma実値（パネル上端基準。下端基準だと実装のパネル高との差でズレる） */
  right: .5rem; /* ⚠ Figma実値 1200-(999+193) */
  width: 12.0625rem;
  height: 14.6875rem;
  object-fit: contain;
  object-position: bottom;
}

/* --- SP: 書影→本文の縦積み ------------------------------------------------- */
@media (max-width: 767px) {
  .books {
    padding: var(--space-40) var(--space-24) var(--space-40);
  }
  .books__panel {
    padding: var(--space-48) var(--space-24) var(--space-40);
  }
  .books__list {
    gap: var(--space-64);
  }
  .book-item {
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
  }
  .book-item__body {
    width: 100%;
  }
  /* 語の途中（かな1文字など）で割れないよう、改行は句読点・空白位置のみに限定し、
     さらに行長を均等化して末尾の孤立を防ぐ */
  .book-item__title,
  .book-item__subtitle,
  .book-item__desc {
  }
  .book-item__title {
    font-size: var(--font-size-h3-lg);
  }
  .book-item__subtitle {
    font-size: var(--font-size-h4);
  }
  .book-item__award {
    font-size: var(--font-size-h5);
  }
  .book-item__award::before {
    width: 1rem;
  }
  .book-item__desc {
    font-size: var(--font-size-h5);
  }
  /* 説明文はPC用の<br>を無効化し、SPは自然折返しに任せる */
  .book-item__desc br { display: none; }
  /* ロボット：パネル下端基準に置き直して縮小（Figmaの上端基準座標はSPのパネル高と合わない） */
  .books__deco {
    display: none;
    top: auto;
    bottom: -1.5rem;
    right: 0;
    width: 7.5rem;
    height: 9rem;
  }
}