/* エリアページ（/area-kaikoma・/area-yatsugatake・/area-mizugaki と英語版）。指示書 04。
   3エリアは同じ組み方。見分ける手がかりは頭の写真と名前で、地図の色は文字や面に使わない。
   刻みと色は parts.css・system.css の変数だけを使う */

/* ---------- 頭 A：全幅の写真 → 小見出し → h1 → 一文 ---------- */
.silver main .zone-banner .detail__kicker { margin: 0 0 var(--s-n2); color: var(--ds-muted); font-weight: 400; }

/* ---------- エリアの特徴：本文と要点を 1.414 : 1 ---------- */
.silver main .zone-about__grid { display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
.silver main .zone-about__text > * { max-width: 40em; }
.silver main .zone-about__text > p { margin: 0 0 var(--s-1); }
.silver main .zone-about__text > p:last-child { margin: var(--s-1) 0 0; }
.silver main .zone__town-list { display: grid; gap: 0; margin: 0; border-bottom: 1px solid var(--ds-rule); }
.silver main .zone__town-list > div { display: grid; grid-template-columns: calc(var(--s-0) * 5) minmax(0, 1fr); column-gap: var(--s-0); align-items: baseline; padding: var(--s-n2) 0; border-top: 1px solid var(--ds-rule); }
.silver main .zone__town-list dt { color: var(--ds-sumi); font-size: var(--s-0); font-weight: 700; letter-spacing: .04em; }
.silver main .zone__town-list dd { margin: 0; }
.silver main .zone-about__facts .facts { gap: 0; }
.silver main .zone-about__facts .facts > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-n4); padding: var(--s-n2) 0; border-top: 1px solid var(--ds-rule); }
.silver main .zone-about__facts .facts > div:first-child { padding-top: 0; border-top: 0; }
.silver main .zone-about__facts .facts > div:last-child { padding-bottom: 0; }

/* ---------- 行き方：小さい地図（#113 のまま）と、ICからの時間 ---------- */
.silver main .zone-route__grid { display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
.silver main .zone-route__grid .map--zones { max-width: none; margin: 0; }
.silver main .zone-route__grid .map--zones { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-1); }
.silver main .zone-route__grid .map--zones svg { flex: 0 0 100%; }
.silver main .zone-route__grid :is(.map__note, .map__legend) { margin: var(--s-n2) 0 0; font-size: var(--s-n2); color: var(--ds-muted); }
.silver main .zone-route__grid .map__legend { display: flex; align-items: center; gap: var(--s-n4); }
.silver main .zone__times { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ds-sumi); }
.silver main .zone__times > li { display: grid; row-gap: var(--s-n4); padding: var(--s-n2) 0; border-bottom: 1px solid var(--ds-rule); font-weight: 700; letter-spacing: .04em; }
.silver main .zone__times > li > span { color: var(--ds-muted); font-size: var(--s-n1); font-weight: 400; line-height: var(--lh-body); letter-spacing: 0; }
.silver main .zone-route__text > p { margin: var(--s-1) 0 0; }

/* ---------- 見どころ：リンクのない季節や山の案内だけ、カードの上に3つ並べる ---------- */
.silver main .zone__hl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-1); margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.silver main .zone__hl > li { display: grid; row-gap: var(--s-n4); align-content: start; padding: var(--s-n2) 0 0; border-top: 1px solid var(--ds-sumi); font-weight: 700; letter-spacing: .04em; }
.silver main .zone__hl-note { color: var(--ds-muted); font-size: var(--s-n1); font-weight: 400; line-height: var(--lh-body); letter-spacing: 0; }
.silver main .section > .card-grid + p { margin: var(--s-4) 0 0; }

/* ---------- 半日・1日の回り方：ツアーカードの文の列に、回る順番を入れる ---------- */
.silver main .zone-tours { display: grid; gap: var(--s-6); }
/* 写真の高さは文の列に合わせる（短いときは 1.414 : 1 を保つ） */
.silver main .zone-tours .card--tour { grid-template-rows: auto auto auto auto 1fr; column-gap: var(--s-4); container-type: inline-size; }
.silver main .zone-tours .card--tour .media { position: relative; grid-row: 1 / span 5; align-self: stretch; aspect-ratio: auto; min-height: calc((100cqw - var(--s-4)) / 2.414); overflow: hidden; }
.silver main .zone-tours .card--tour .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 写真が読み込めないときは、文の列だけで組む（左に空白を残さない） */
.silver main .zone-tours .card--tour:not(:has(.media img)) { grid-template-columns: minmax(0, 1fr); max-width: 40em; }
.silver main .zone-tours .card--tour:not(:has(.media img)) > :not(.card__link), .silver main .zone-tours .card--tour:not(:has(.media img)) .card__link > :not(.media) { grid-column: 1; }
.silver main .zone-tours .card--tour .card__title { font-size: var(--s-1); }
.silver main .zone-tours .card--tour .card__facts { gap: 0 var(--s-1); }
.silver main .route { margin: var(--s-1) 0 0; padding: var(--s-0) 0 0; list-style: none; counter-reset: stop; border-top: 1px solid var(--ds-rule); }
.silver main .route > li { position: relative; padding: 0 0 var(--s-n2) calc(var(--s-1) + var(--s-0)); counter-increment: stop; }
.silver main .route > li:last-child { padding-bottom: 0; }
.silver main .route > li::before { content: counter(stop); position: absolute; left: 0; top: calc((var(--lh-body) * 1em - var(--s-1)) / 2 + 2px); box-sizing: border-box; width: var(--s-1); height: var(--s-1); border: 1px solid var(--ds-sumi); border-radius: 50%; background: var(--semantic-color-surface-default); font-size: var(--s-n2); font-weight: 700; line-height: calc(var(--s-1) - 2px); text-align: center; }
.silver main .route > li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--s-1) / 2 - .5px); top: calc((var(--lh-body) * 1em + var(--s-1)) / 2 + 2px); bottom: 0; width: 1px; background: var(--ds-rule); }
.silver main .route a { color: var(--ds-sumi); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .route a:hover { text-decoration-thickness: 2px; }

/* 時刻つきの順番（ツアーカードがないエリア）：PC は幅いっぱいの横の線に時刻と場所を並べる。スマホは縦 */
.silver main .route.zone__stops--timed { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; column-gap: 0; margin: 0; padding: 0; border-top: 0; }
.silver main .route.zone__stops--timed > li { display: flex; flex-direction: column; gap: var(--s-n4); padding: var(--s-1) var(--s-1) 0 0; border-top: 1px solid var(--ds-sumi); }
.silver main .route.zone__stops--timed > li::before { content: ""; top: calc(var(--s-n4) / -2 - .5px); width: var(--s-n4); height: var(--s-n4); border: 0; background: var(--ds-sumi); }
.silver main .route.zone__stops--timed > li::after { content: none; }
.silver main .zone__stops--timed .zone__time { margin: 0; font-size: var(--s-1); font-weight: 700; line-height: var(--lh-head); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.silver main .zone__stops--timed > li > span:not(.zone__time) { color: var(--ds-muted); font-size: var(--s-n1); }
.silver main .zone__stops--timed + .note { margin: var(--s-0) 0 0; }
@media (max-width: 767px) {
  .silver main .route.zone__stops--timed { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
  .silver main .route.zone__stops--timed > li { display: grid; grid-template-columns: calc(var(--s-0) * 3.5) minmax(0, 1fr); column-gap: var(--s-0); align-items: baseline; padding: var(--s-n2) 0 var(--s-n2) var(--s-0); border-top: 0; border-left: 1px solid var(--ds-sumi); }
  .silver main .route.zone__stops--timed > li::before { top: calc(var(--s-n2) + (var(--lh-head) * var(--s-1) - var(--s-n4)) / 2); left: calc(var(--s-n4) / -2 - .5px); }
  .silver main .zone__stops--timed .zone__time { grid-row: 1 / span 2; font-size: var(--s-0); }
  .silver main .zone__stops--timed > li > span:not(.zone__time) { grid-column: 2; }
}

/* ---------- 泊まるなら：宿が一つだけのときは、写真と文を 1.414 : 1 で横に並べる ---------- */
.silver main .card-grid:has(> .card--place:only-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .silver main .card-grid > .card--place:only-child { display: grid; grid-template-columns: minmax(0, 1.414fr) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: var(--s-4); }
  .silver main .card-grid > .card--place:only-child .card__link { display: contents; }
  .silver main .card-grid > .card--place:only-child .media { grid-column: 1; grid-row: 1 / span 12; margin: 0; align-self: start; }
  .silver main .card-grid > .card--place:only-child > *, .silver main .card-grid > .card--place:only-child .card__link > :not(.media) { grid-column: 2; }
  .silver main .card-grid > .card--place:only-child > .btn--add { margin-top: var(--s-1); }
}

/* ---------- 隣のエリア：写真カードを2枚 ---------- */
.silver main .zone-near { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); }
.silver main .zone-near__card { display: flex; flex-direction: column; min-width: 0; }
.silver main .zone-near__link { display: block; color: inherit; text-decoration: none; }
.silver main .zone-near__link .media { aspect-ratio: 1.414 / 1; margin: 0 0 var(--s-0); }
.silver main .zone-near__link .media img { width: 100%; height: 100%; object-fit: cover; }
.silver main .zone-near__name { margin: 0; font-size: var(--s-1); letter-spacing: .04em; }
.silver main .zone-near__link:hover .zone-near__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .zone-near__link:focus-visible { outline: none; }
.silver main .zone-near__link:focus-visible .zone-near__name { outline: 2px solid var(--semantic-color-focus-default, currentColor); outline-offset: 2px; }
.silver main .zone-near__lead { margin: var(--s-n2) 0 0; }
.silver main .zone-near__note { margin: var(--s-n4) 0 0; color: var(--ds-muted); font-size: var(--s-n1); }
.silver main .zone-near + .checked { margin: var(--s-1) 0 0; }

@media (max-width: 899px) {
  .silver main :is(.zone-about__grid, .zone-route__grid) { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  .silver main .zone-about__facts { order: -1; }
}
@media (max-width: 767px) {
  .silver main .zone__hl { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-0); }
  .silver main .zone__town-list > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-n4); }
  .silver main .zone-near { grid-template-columns: minmax(0, 1fr); }
  .silver main .zone-tours { gap: var(--s-4); }
}
@media (max-width: 559px) {
  .silver main .zone-tours .card--tour .route { margin-top: var(--s-0); }
}