/* --------------------------------------------
三十六歌仙 歌仙絵と和歌（sanjurokkasen-zukan.html）
PC：番（左・右）を横並び／SP：1名ずつ縦に並べる
-------------------------------------------- */
.kasen-lead {
  line-height: 1.7;
  margin-bottom: 0.8em;
}

/* 画像の出典表記 */
.section .image-credit {
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: right;
  color: #555;
}

.kasen-list {
  margin-top: 1.5em;
}

/* 番 */
.kasen-pair {
  margin-bottom: 2.5em;
}
.section .kasen-pair__title {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-family: "Noto Serif JP", serif;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: #b82343;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0.8em;
}
.section .kasen-pair__title::before,
.section .kasen-pair__title::after {
  content: "";
  flex: 1;
  border-top: 1px solid #b82343;
}
.kasen-pair__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

/* 歌人カード */
.kasen-card {
  display: grid;
  /* 和歌欄は固定幅（現代語訳が3行の歌がはみ出ない最小幅）にし、残りを人物紹介欄に充てる */
  grid-template-columns: minmax(0, 1fr) 14.5rem;
  position: relative; /* 和歌欄（絶対配置）の基準 */
  height: 38rem; /* 全カード同じ高さ（人物紹介が最も長いカードに合わせる） */
  background: #fffdf7;
  border: 1px solid #8a7a5c;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  scroll-margin-top: 1em;
}

/* 左：歌仙絵・歌人名・人物紹介 */
.kasen-card__profile {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-right: 1px solid #8a7a5c;
  font-size: 0.9rem;
  line-height: 1.6;
}
.kasen-card__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #c9bb9a;
  margin-bottom: 0.6em;
}
.section .kasen-card__name {
  writing-mode: vertical-rl;
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-align: end; /* 縦書きなので下ぞろえ */
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
.kasen-card__name rt {
  font-size: 0.5em;
  letter-spacing: 0;
}
.kasen-card__side {
  display: inline-block;
  margin-bottom: 0.4em;
  padding: 0.2em 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #fff;
  background: #b82343;
  border-radius: 3px;
}
.section .kasen-card__life {
  font-size: 0.8em;
  color: #555;
  margin-bottom: 0.3em;
}
.section .kasen-card__text {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0.5em;
}
.section .kasen-card__note {
  font-size: inherit;
  line-height: inherit;
  color: #555;
  padding-top: 0.5em;
  border-top: 1px dotted #8a7a5c;
  margin-bottom: 0.5em;
}
.kasen-card__link {
  align-self: flex-start;
  margin-top: auto; /* 人物紹介欄の下端にそろえる */
}

/* 右：和歌（上の句・下の句）と現代語訳を縦書きで */
.kasen-card__poem {
  /* 2列目のグリッド領域に絶対配置し、カードの高さいっぱいに広げる
     （縦書き要素は通常フローだと高さを固定しないと列が折り返せないため） */
  position: absolute;
  grid-column: 2;
  grid-row: 1;
  inset: 0;
  writing-mode: vertical-rl;
  /* グリッドにし、歌人名を上の句の下（右下）に置いて現代語訳の幅を広げる
     （縦書きなので columns が上下方向、rows が右→左方向のトラックになる） */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 14px 12px;
  overflow-x: auto;
}
.section .kasen-card__kami {
  grid-row: 1;
  grid-column: 1;
}
.section .kasen-card__poem .kasen-card__name {
  grid-row: 1;
  grid-column: 2;
  margin-top: 0.6em;
}
.section .kasen-card__shimo {
  grid-row: 2;
  grid-column: 1 / -1;
}
.section .kasen-card__kami,
.section .kasen-card__shimo {
  font-family: "Kaisei HarunoUmi", "Noto Serif JP", serif;
  font-size: 1.15rem;
  line-height: 2;
  letter-spacing: 0.08em;
  margin: 0;
}
.section .kasen-card__shimo {
  padding-top: 0;
}
.section .kasen-card__kami rt,
.section .kasen-card__shimo rt {
  font-size: 0.45em;
  letter-spacing: 0;
}
.section .kasen-card__yaku {
  /* 和歌の左側の残り幅いっぱいに広げ、訳文をその左右中央に置く
     （縦書きでは align-content がブロック方向＝左右に効く。flex にするとルビが分解されるため使わない） */
  grid-row: 3;
  grid-column: 1 / -1;
  align-content: center;
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0.6em 0 0;
  padding-right: 0.5em;
  border-right: 1px solid #c9bb9a;
}

/* 中間幅：番は横並びのまま、カード内を縦積みにする
   （上：歌仙絵と人物紹介を横並び／下：和歌欄。和歌欄の高さはPCと同じにして歌と現代語訳の幅を保つ） */
@media (min-width: 641px) and (max-width: 960px) {
  .kasen-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 38rem;
    height: auto;
  }
  .kasen-card__profile {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    grid-auto-rows: min-content;
    column-gap: 12px;
    border-right: none;
    border-bottom: 1px solid #8a7a5c;
  }
  .kasen-card__zoom {
    grid-row: 1 / span 4;
  }
  .kasen-card__profile > :not(.kasen-card__zoom) {
    grid-column: 2;
  }
  .kasen-card__img {
    margin-bottom: 0;
  }
  .kasen-card__link {
    margin-top: 0.3em;
  }
  .kasen-card__poem {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    inset: auto;
  }
  /* 右半分に歌（上の句・下の句）を左右中央に、左半分に現代語訳を置き、幅を均等にする */
  .kasen-card__poem {
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr) 50%;
  }
  .section .kasen-card__kami,
  .section .kasen-card__poem .kasen-card__name {
    grid-row: 2;
  }
  .section .kasen-card__shimo {
    grid-row: 3;
  }
  .section .kasen-card__yaku {
    grid-row: 5;
    box-sizing: border-box;
    margin-right: 0;
  }
}

/* SP：1名ずつ */
@media (max-width: 640px) {
  .kasen-pair__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .kasen-card {
    grid-template-columns: minmax(0, 1fr) 13rem;
    /* 1名ずつ並ぶので高さはそろえず、人物紹介の長さに合わせる（和歌欄に必要な高さは確保） */
    height: auto;
    min-height: 30rem;
  }
  .kasen-card__profile {
    padding: 10px;
  }
  .kasen-card__poem {
    padding: 12px 6px;
  }
  .section .kasen-card__kami,
  .section .kasen-card__shimo {
    font-size: 1.05rem;
  }
  .section .kasen-card__yaku {
    line-height: 1.65;
    margin-right: 0.35em;
    padding-right: 0.35em;
  }
}

/* 検索（絞り込み） */
.kasen-search {
  margin-top: 1.2em;
}
#searchInput {
  box-sizing: border-box;
  width: 100%;
  height: 45px;
  padding: 10px 10px 8px;
  font-size: 16px;
}
.section .kasen-search__result {
  min-height: 1.5em;
  margin: 0.4em 0 0;
  font-size: 0.9rem;
  color: #555;
}
.kasen-pair[hidden],
.kasen-card[hidden] {
  display: none;
}

/* 歌仙絵の拡大（lightbox） */
.kasen-card__zoom {
  display: block;
  cursor: zoom-in;
}