/* 日本百名山の各山（/hiking/mountains/<英名>/）だけの部品: 山の名前と数字・写真・ルートの地図・前後の山。共通の部品は ../style.css
   色は style.css の :root の変数だけ。地図の道筋の色もスクリプトが --red-p から読む（templates/v2/hiking/mountain_map.html） */

.mt-memo p, .pg-none-t { word-break: auto-phrase; }
.mt-period time { white-space: nowrap; }

/* ------------------------------------------------------------ 頭: 番号・山の名前・山域と登山日／標高・距離・累積標高 */
.mt-head { padding-bottom: clamp(40px, 5vw, 72px); }
.mt-head h1 { margin-top: 22px; }
.mt-h-no { display: block; font-family: var(--f-label); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.1em; line-height: 1.4; color: var(--red); }
.mt-h-name { display: block; margin-top: 6px; font-weight: 700; font-size: clamp(2.6rem, 6.2vw, 5.8rem); letter-spacing: 0.08em; line-height: 1.15; }
.mt-h-sub { margin-top: 16px; font-weight: 500; font-size: 1rem; letter-spacing: 0.12em; color: var(--fg-2); }
.mt-h-sub time { font-family: var(--f-label); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.04em; }

.mt-memo { margin-bottom: 26px; }
.mt-memo p { line-height: 1.95; }
.mt-memo-h { font-weight: 700; }

/* 旧サイトでは写真の上に大きく出していた3つの数（標高・距離・累積標高）を、トップの「19座」と同じ Anton の数字で */
.mt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--rule); }
.mt-stats > div { display: grid; align-content: start; gap: 8px; padding-top: 14px; }
.mt-stats dt { font-size: 0.78rem; letter-spacing: 0.16em; line-height: 1.5; color: var(--fg-3); }
.mt-stats dd { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 3.1vw, 2.8rem); letter-spacing: 0.01em; line-height: 1; white-space: nowrap; }
.mt-stats small { margin-left: 6px; font-family: var(--f-label); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--fg-2); }
.mt-head .sec-links { margin-top: 26px; }
.mt-size { font-family: var(--f-label); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.04em; opacity: 0.75; }

/* ------------------------------------------------------------ 写真（切らずに全体を出す。縦長は画面の高さに収める） */
.mt-photo { background: var(--dark); padding-bottom: clamp(64px, 8vw, 120px); }
.mt-photo img { width: auto; height: auto; max-width: 100%; max-height: 86svh; margin-inline: auto; background: var(--night); }

/* ------------------------------------------------------------ ルートの地図 */
.mt-route .sec-head { margin-bottom: clamp(32px, 4vw, 52px); }
.mt-inline { border-bottom: 1px solid var(--rule-strong); transition: border-color 0.2s; }
.mt-inline:hover { border-color: var(--accent); }
.rt-map { position: relative; height: clamp(440px, 70vh, 700px); background: var(--paper-2); border: 1px solid var(--line-p); overflow: hidden; }
.rt-map > .rt-canvas { position: absolute; inset: 0; } /* mapbox-gl.css の .mapboxgl-map { position: relative } に負けないように2段で */
.rt-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 0.9rem; color: var(--tx-p2); pointer-events: none; }
.rt-msg[hidden] { display: none; }
.rt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-top: 16px; }
.rt-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.86rem; color: var(--tx-p2); }
.rt-legend li { display: inline-flex; align-items: center; gap: 9px; }
.rt-foot .text-link { align-self: auto; }

/* 地図の上の印（Mapbox の Marker の要素）と凡例。記録の始めと終わりは札、山頂は赤い輪（地図では山の印と名前の下に敷く層で描き、印を囲む） */
.rt-pin {
  position: relative; display: inline-block; padding: 5px 7px 4px;
  font-family: var(--f-label); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  background: var(--tx-p); color: var(--paper); border: 1px solid var(--tx-p);
}
.rt-pin--goal { background: var(--paper); color: var(--tx-p); }
/* 山頂の名前（地図の上だけ）。和文なので本文の書体で、赤い輪の真上に置く（線を下ろさない） */
.rt-pin--top { padding: 4px 7px 3px; font-family: var(--f-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: none; line-height: 1.2; background: var(--paper); color: var(--tx-p); border-color: var(--red); }
.rt-pin--top.rt-pin--map::after { content: none; }
/* 地図の上では、札の下から点まで細い線を下ろす（Marker は anchor: bottom・8px 上にずらしてある） */
.rt-pin--map::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: var(--tx-p); }
.rt-top { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--red); box-sizing: content-box; }
.rt-line { display: inline-block; width: 22px; height: 3px; border-radius: 2px; background: var(--red-p); }

/* ------------------------------------------------------------ 前後の山と一覧への戻り（紙の面。カードはトップの百名山と同じ .mt-card） */
.mt-pager { padding-bottom: clamp(72px, 9vw, 136px); }
/* 見出し（h2）の大きさは style.css の .hm-head h2（トップの百名山の見出しと同じ） */
.pg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; margin-top: clamp(32px, 4vw, 48px); align-items: stretch; }
.pg--prev { grid-column: 1 / span 4; }
.pg--next { grid-column: 5 / span 4; }
.pg-grid .pg-end { grid-column: 9 / span 4; align-self: end; }
.pg-dir { padding-bottom: 8px; font-weight: 500; font-size: 0.86rem; letter-spacing: 0.12em; color: var(--tx-p2); }
.mt-card:hover .pg-dir { color: var(--tx-p); }
.pg--none { display: flex; flex-direction: column; }
.pg-none-t { flex: 1; display: grid; place-items: center; padding: 24px 16px; text-align: center; font-size: 0.86rem; line-height: 1.8; color: var(--tx-p2); border: 1px dashed var(--line-p); aspect-ratio: 3 / 2; }

/* ------------------------------------------------------------ 中くらいの画面 */
@media (max-width: 1080px) {
  .pg--prev { grid-column: 1 / span 6; }
  .pg--next { grid-column: 7 / span 6; }
  .pg-grid .pg-end { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ スマホ */
@media (max-width: 760px) {
  .mt-head h1 { margin-top: 16px; }
  .mt-h-name { font-size: min(2.6rem, 11vw); letter-spacing: 0.06em; }
  .mt-stats { column-gap: 12px; }
  .mt-stats dt { letter-spacing: 0.08em; }
  .mt-stats dd { font-size: min(1.9rem, 8vw); }
  .mt-stats small { margin-left: 3px; font-size: 0.82rem; }
  .mt-photo img { max-height: 80svh; }
  .rt-map { height: min(72svh, 480px); }
  .rt-foot { flex-direction: column; align-items: flex-start; }
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 28px; }
  .pg--prev { grid-column: 1; }
  .pg--next { grid-column: 2; }
  .pg-dir { font-size: 0.8rem; letter-spacing: 0.06em; }
  .pg-none-t { padding: 12px 8px; font-size: 0.8rem; }
}