/* ============================================================================
* 撮影の証拠ブロック（SPOT-SHOTS / SPOT-ROUTE）の見た目
* ----------------------------------------------------------------------------
* 記事への読み込みタグは scripts/seo-spot-evidence.js が に入れる（SPOT-CSS）。
* /assets/* は1年 immutable なので、ここを直したら同スクリプトの CSS_VERSION を上げて流し直す。
*
* 色・文字サイズは記事ページの変数（--ink / --bg-cream-deep / --fs など）をそのまま使い、
* 変数が無いページでも崩れないようにフォールバックを書く。
*
* 🔴 拡大表示ゼロ（index.html と同じ不変条件「ファイルの実幅 ≧ 表示CSS幅 × DPR」）
* 各 ![]()
には style="--w:px" が付いている。表示幅の上限を
* --w ÷ 端末の DPR にするので、縦位置（最上段 800px）の作品は DPR3 のスマホで 266px、
* DPR2 で 400px に収まり、引き伸ばされない。
* 画像そのものは width:100% で、枠（またはこの上限）の中央に置く。object-fit は使わない
* （2026-08-21 に srcset＋object-fit のカードが iPhone で中央に来なくなった経緯があるため、
* トリミングも枠合わせもしない素直な縦横比のまま出す）。
*
* 🔴 画像保護の CSS（user-select / touch-callout）はここに書かない。assets/image-protect.css が
* img[src*="uploads/"] に一括で効く。pointer-events も触らない。
* ========================================================================== */
.spot-shots { --dpr: 1; margin: 40px 0 8px; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { .spot-shots { --dpr: 1.5; } }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .spot-shots { --dpr: 2; } }
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .spot-shots { --dpr: 3; } }
.spot-shots h2 { margin-top: 0; }
/* 日本語の見出しは （生成器が入れる）と空白でだけ折り返す。長すぎる時の逃げ道も付ける */
.spot-shots h2,
.spot-route h2 { word-break: keep-all; overflow-wrap: anywhere; }
.spot-shots-note {
font-size: calc(13px * var(--fs, 1));
color: var(--ink-mute, #908371);
line-height: 1.7;
margin: 0 0 16px;
}
.spot-shots-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 22px 16px;
align-items: start;
}
.spot-shot { margin: 0; min-width: 0; }
.spot-shot > a { display: block; }
.spot-shot img {
display: block;
width: 100%;
height: auto;
max-width: min(100%, calc(var(--w, 1200px) / var(--dpr, 1)));
margin: 0 auto;
border-radius: 10px;
background: var(--bg-cream-deep, #F4E8C9);
}
.spot-shot figcaption {
margin-top: 8px;
font-size: calc(12.5px * var(--fs, 1));
line-height: 1.65;
color: var(--ink-soft, #5C5042);
overflow-wrap: anywhere;
}
.spot-shot figcaption b {
display: block;
font-weight: 700;
font-size: calc(13.5px * var(--fs, 1));
color: var(--ink, #2B241A);
}
.spot-shot-place,
.spot-shot-when,
.spot-shot-exif,
.spot-shot-award { display: block; }
.spot-shot-place { color: var(--ink-mute, #908371); }
.spot-shot-exif > span,
.spot-shot-when time { white-space: nowrap; }
.spot-shot-award { color: var(--pink-deep, #D67890); font-weight: 700; }
/* PC（記事本文 720px）: 写真の数だけ列に並べる。1枚のときは大きくなりすぎないよう幅を絞る */
@media (min-width: 681px) {
.spot-shots--n2 .spot-shots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spot-shots--n3 .spot-shots-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spot-shots--n1 .spot-shot { max-width: 520px; margin: 0 auto; }
.spot-shots--n1 .spot-shot.is-portrait { max-width: 380px; }
}
/* ── この日の順路 ─────────────────────────────────────────────────────── */
.spot-route {
background: var(--bg-cream-deep, #F4E8C9);
border-radius: 16px;
padding: 18px 20px 10px;
margin: 28px 0 8px;
}
.spot-route h2 {
margin: 0 0 6px;
font-size: calc(17px * var(--fs, 1));
line-height: 1.5;
}
.spot-route-note {
font-size: calc(12.5px * var(--fs, 1));
color: var(--ink-mute, #908371);
line-height: 1.7;
margin: 0 0 6px;
}
.spot-route ol { list-style: none; margin: 0; padding: 0; }
.spot-route li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 12px;
padding: 10px 0;
border-top: 1px solid rgba(43, 36, 26, .08);
font-size: calc(14px * var(--fs, 1));
line-height: 1.6;
}
.spot-route li:first-child { border-top: 0; }
.spot-route time {
flex: none;
min-width: 7.2em;
font-weight: 700;
color: var(--ink-soft, #5C5042);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
html[lang="en"] .spot-route time { min-width: 9.8em; }
.spot-route li > a,
.spot-route-here { flex: 1 1 10em; min-width: 0; font-weight: 700; }
.spot-route-here { color: var(--ink, #2B241A); }
.spot-route-here small {
font-weight: 500;
font-size: calc(12px * var(--fs, 1));
color: var(--ink-mute, #908371);
}
.spot-route + .spot-route { margin-top: 14px; }