/* =========================================================
   cards_photo.css  ── 写真枠・関連記事カード・4枚横並び

   【このファイルの責務】
   - .lb-photo（写真枠・リンク付き写真・キャプション付き写真）
   - .lb-photo--duo（2枚並び）/ .lb-photo--aside（小ぶり）など modifier
   - .lb-photo-row（画像横並び）
   - .lb-related（関連記事カードセクション）
   - .card--with-photo（画像付きカード：関連記事カード用）

   【触るべきとき】
   ・写真枠のデザインを変えたい         → .lb-photo__frame
   ・写真枠のキャプション文字を変えたい → .lb-photo__cap
   ・関連記事カードのデザインを変えたい → .lb-related .card--with-photo
   ・画像横並びのgapを変えたい          → .lb-photo-row の gap を調整

   【関連ファイル】
   - 書架カード・著者カード  → cards_shelf.css
   - 記事ページの本文       → article_body.css
========================================================= */

/* =========================================================
   写真枠（.lb-photo）
   ── 写真にフレームとキャプションをつけるコンポーネント
========================================================= */

/* 外側ラッパー */
.lb-photo {
  display: block;
  margin: 28px auto;
  max-width: 860px;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.entry-content .lb-photo,
.lb-article .lb-photo {
  margin-top: 1.8em;
  margin-bottom: 1.8em;
}

/* 枠＋キャプションを同幅でまとめる */
.lb-photo__inner {
  display: inline-block;
  max-width: 100%;
  text-align: left;
}

/* 写真枠（ゴールド系ボーダー＋淡いシャドウ） */
.lb-photo__frame {
  display: inline-block;
  width: auto;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  text-align: center;

  padding: 10px;
  border: 1.5px solid rgba(212, 170, 72, .26);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(250,246,232,.98) 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.92) inset,
    var(--shadow-sm);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;
}

/* 画像（サイズは HTML 側で指定） */
.lb-photo__frame img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--paper-3);
}

/* キャプション */
.lb-photo__cap {
  display: block;
  margin-top: 10px;
  padding: 0 4px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: left;
  text-decoration: none;
  transition: color .24s ease;
}

/* 画像なしリンクカード用パネル */
.lb-photo__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 92px;
  padding: 6px 4px;
  text-align: left;
}

.lb-photo__title {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  transition: color .24s ease;
}

.lb-photo__text {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: .03em;
}

/* ── リンク付き写真（a.lb-photo.lb-photo--link）のホバー ── */
a.lb-photo.lb-photo--link {
  cursor: pointer;
}

a.lb-photo.lb-photo--link:hover .lb-photo__frame,
a.lb-photo.lb-photo--link:focus-visible .lb-photo__frame {
  transform: translateY(-2px);
  box-shadow:
    0 2px 0 rgba(255,255,255,.92) inset,
    var(--shadow);
  border-color: rgba(212, 170, 72, .38);
}

a.lb-photo.lb-photo--link:hover .lb-photo__title,
a.lb-photo.lb-photo--link:focus-visible .lb-photo__title,
a.lb-photo.lb-photo--link:hover .lb-photo__cap,
a.lb-photo.lb-photo--link:focus-visible .lb-photo__cap {
  color: var(--accent-strong, #8c7020);
}

a.lb-photo.lb-photo--link:focus-visible {
  outline: none;
}

a.lb-photo.lb-photo--link:focus-visible .lb-photo__frame {
  box-shadow:
    0 2px 0 rgba(255,255,255,.92) inset,
    0 0 0 3px rgba(212,170,72,.18),
    var(--shadow);
}

/* ── ラベル（data-label 属性）── */
.lb-photo[data-label] .lb-photo__frame::before {
  content: attr(data-label);
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;

  border: 1px solid rgba(195,168,70,.24);
  border-radius: 999px;
  background: rgba(255,252,235,.90);
  box-shadow: 0 2px 8px rgba(120, 90, 20, .06);

  color: #8c7020;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

/* ── 2枚並び（.lb-photo--duo） ── */
.lb-photo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lb-photo__item {
  min-width: 0;
}

.lb-photo--duo .lb-photo__inner {
  display: block;
}

.lb-photo--duo .lb-photo__frame {
  display: block;
  width: 100%;
  padding: 12px;
}

.lb-photo--duo .lb-photo__cap {
  max-width: none;
}

/* ── 小ぶり（.lb-photo--aside） ── */
.lb-photo--aside {
  max-width: 620px;
}

.lb-photo--aside .lb-photo__frame {
  padding: 9px;
}

/* ── 縦写真向け（.lb-photo--portrait） ── */
.lb-photo--portrait {
  max-width: 620px;
}

/* ── 余白多め（.lb-photo--airy） ── */
.lb-photo--airy .lb-photo__frame {
  padding: 14px;
  border-radius: 24px;
}

/* ── メタ情報（撮影設定など） ── */
.lb-photo__meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  color: var(--muted-faint);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .04em;
}

.lb-photo__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(212,170,72,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
}

/* ── 前後の要素との間隔調整 ── */
.lb-talks + .lb-photo,
.talk + .lb-photo {
  margin-top: 18px;
}

h2 + .lb-photo,
h3 + .lb-photo,
.lb-h3 + .lb-photo {
  margin-top: 1.2em;
}

/* ── ホバー対応環境のみトランジション ── */
@media (hover: hover) {
  .lb-photo__frame {
    transition:
      transform .24s ease,
      box-shadow .24s ease,
      border-color .24s ease;
  }
}

/* ── SP ── */
@media (max-width: 680px) {
  .lb-photo {
    margin: 22px auto;
  }

  .lb-photo__inner {
    max-width: 100%;
  }

  .lb-photo__frame {
    max-width: 100%;
    padding: 8px;
    border-radius: 16px;
  }

  .lb-photo__frame img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  .lb-photo__cap {
    font-size: 18px;
    line-height: 1.6;
  }

  .lb-photo__text {
    font-size: 12px;
    line-height: 1.8;
  }

  .lb-photo__title {
    font-size: 16px;
  }

  .lb-photo__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lb-photo[data-label] .lb-photo__frame::before {
    top: 10px;
    left: 12px;
    padding: 4px 8px;
    font-size: 9px;
  }
}

/* =========================================================
   画像付きカード（.card--with-photo）
   ── 関連記事カードなど、画像＋テキストのカード形式
========================================================= */
.card--with-photo .card__tap {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card--with-photo .card__media {
  padding: 16px 16px 0;
  text-align: center;
}

.card--with-photo .card__media img {
  display: block;
  width: 100%;
  max-width: 307px;
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  background: var(--paper-3);
  border: 1.5px solid rgba(212,170,72,.22);
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    var(--shadow-sm);
}

.card--with-photo .card__inner {
  padding-top: 14px;
}

/* =========================================================
   関連記事カード（.lb-related）
   ── 記事末尾に並ぶ「あわせて読みたい」セクション
========================================================= */
.lb-related {
  margin-top: 48px;
}

.lb-related .cards {
  align-items: stretch;
  gap: 16px;
}

.lb-related .card {
  height: 100%;
  border-radius: 24px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* カード全体レイアウト */
.lb-related .card--with-photo .card__tap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  height: 100%;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
}

/* アイコン */
.lb-related .card--with-photo .card__media {
  padding: 0;
  margin: 0;
  text-align: left;
  line-height: 0;
}

.lb-related .card--with-photo .card__media img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  border-radius: 16px;
  background: var(--paper-3);
  border: 1.5px solid rgba(212,170,72,.20);
  box-shadow:
    0 2px 0 rgba(255,255,255,.92) inset,
    0 4px 14px rgba(120, 90, 20, .05);
}

/* 本文エリア */
.lb-related .card--with-photo .card__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 0;
  width: 100%;
}

/* タイトル */
.lb-related .card--with-photo .card__inner p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: #3b3428;
  transition: color .22s ease;
}

/* 「記事を読む →」導線リンク */
.lb-related .card--with-photo .lb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .03em;
  color: var(--muted);
  transition: color .22s ease, transform .22s ease;
}

.lb-related .card--with-photo .lb-link::after {
  content: "→";
  font-size: 12px;
  line-height: 1;
  transition: transform .22s ease;
}

/* ホバー */
.lb-related .card--with-photo:hover,
.lb-related .card--with-photo:focus-within {
  transform: translateY(-3px);
}

.lb-related .card--with-photo:hover .card__inner p,
.lb-related .card--with-photo:focus-within .card__inner p {
  color: var(--accent-strong, #8c7020);
}

.lb-related .card--with-photo:hover .lb-link,
.lb-related .card--with-photo:focus-within .lb-link {
  color: var(--accent-strong, #8c7020);
}

.lb-related .card--with-photo:hover .lb-link::after,
.lb-related .card--with-photo:focus-within .lb-link::after {
  transform: translateX(2px);
}

/* 小サムネイル用 */
.lb-related .card--with-photo.card--thumb-sm .card__media img {
  border-radius: 14px;
}

/* SP */
@media (max-width: 680px) {
  .lb-related {
    margin-top: 40px;
  }

  .lb-related .cards {
    gap: 12px;
  }

  .lb-related .card--with-photo .card__tap {
    gap: 10px;
    padding: 16px 16px 14px;
  }

  .lb-related .card--with-photo .card__inner {
    gap: 8px;
  }

  .lb-related .card--with-photo .card__inner p {
    font-size: 15px;
    line-height: 1.5;
  }

  .lb-related .card--with-photo .lb-link {
    font-size: 11px;
  }
}


/* =========================================================
   画像横並び（.lb-photo-row）
   ── 画像を実寸のまま横に並べられるだけ並べる。はみ出たら折り返し
========================================================= */
.lb-photo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px auto;
  align-items: flex-start;
}

.lb-photo-row img {
  display: block;
  height: auto;
  max-width: 100%;
  padding: 10px;
  border: 1.5px solid rgba(212, 170, 72, .26);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(250,246,232,.98) 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.92) inset,
    var(--shadow-sm);
  box-sizing: border-box;
}

/* SP（680px以下） */
@media (max-width: 680px) {
  .lb-photo-row {
    margin: 20px auto;
  }

  .lb-photo-row img {
    padding: 8px;
    border-radius: 16px;
    max-width: 30%;
  }
}