/* /stations の「都道府県から路線を選ぶ」と /lines/:slug の駅一覧。
   どちらも .konya-airport-discovery（背景 --airport-soft）の中に置かれる前提で、
   home-airports.css の配色・余白・ホバー挙動に揃えてある。 */
:root{--station-navy:#062b63;--station-deep:#021e46;--station-line:#d9e1eb;--station-muted:#6f7f93}

/* ヘッダーが固定なので、ジャンプリンクの着地点を header 分ずらす。 */
.station-page #station-search,.station-page #station-major,.station-page #station-discovery{scroll-margin-top:90px}

/* ---- 地方タブ ---- */
.station-region-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.station-region-tabs button{min-height:44px;padding:0 20px;border:1px solid var(--station-line);border-radius:999px;background:rgba(255,255,255,.72);color:var(--station-muted);font:600 14px "DM Sans","Noto Sans JP",sans-serif;letter-spacing:.04em;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.station-region-tabs button:hover{border-color:#9cadc0;color:var(--station-deep)}
.station-region-tabs button.is-selected{border-color:var(--station-navy);background:var(--station-navy);color:#fff;box-shadow:0 8px 18px rgba(3,34,76,.15)}

/* ---- 都道府県ブロック ---- */
.station-region-panel{display:none}
.station-region-panel.is-active{display:grid;gap:30px}
.station-pref+.station-pref{padding-top:26px;border-top:1px solid var(--station-line)}
.station-pref>header{margin-bottom:15px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.station-pref h4{margin:0;color:var(--station-deep);font-size:20px;letter-spacing:.04em}
.station-pref>header small{color:#7a8899;font-size:12px;font-weight:600;letter-spacing:.08em;white-space:nowrap}

/* ---- 路線リンク ---- */
.station-line-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.station-line-grid>a{min-width:0;min-height:74px;padding:15px 18px;display:grid;grid-template-columns:minmax(0,1fr) 20px;align-content:center;gap:6px 12px;border:1px solid transparent;background:rgba(255,255,255,.72);color:#19273a;text-decoration:none;transition:background-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease}
.station-line-grid>a:hover{z-index:1;background:var(--station-navy);color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px rgba(3,34,76,.13)}
.station-line-grid>a>span{overflow:hidden;font-size:15px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.station-line-grid>a>small{grid-column:1;color:#6c7c90;font-size:12px;letter-spacing:.03em}
.station-line-grid>a>i{grid-column:2;grid-row:1/3;align-self:center;color:var(--station-navy);font-size:19px;font-style:normal}
.station-line-grid>a:hover>small,.station-line-grid>a:hover>i{color:#fff}

/* ---- 路線ページの駅一覧 ---- */
/* 起点からの順番が意味を持つので、グリッドではなく縦一列の路線図で見せる。
   --route-color は路線データの line_color_c を各ページから渡し、無い路線は既定の紺。 */
.station-route{--route-color:var(--station-navy);margin:0;padding:0;list-style:none;display:grid;gap:0}
.station-route>li{position:relative;padding-left:34px}
.station-route>li::before{content:"";position:absolute;top:0;bottom:0;left:7px;width:2px;background:var(--route-color);opacity:.35}
.station-route>li:first-child::before{top:31px}
.station-route>li:last-child::before{bottom:calc(100% - 31px)}
.station-route>li>a{position:relative;min-height:62px;padding:11px 16px 11px 4px;display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:12px;border-bottom:1px solid var(--station-line);color:#19273a;text-decoration:none;transition:background-color .18s ease,color .18s ease}
.station-route>li:last-child>a{border-bottom:0}
.station-route>li>a:hover{background:var(--station-navy);color:#fff;box-shadow:-6px 0 0 var(--station-navy),14px 0 0 var(--station-navy)}
.station-route-mark{position:absolute;top:50%;left:-34px;width:16px;height:16px;margin-top:-8px;border:3px solid var(--route-color);border-radius:50%;background:#fff}
.station-route-body{min-width:0;display:grid;gap:4px}
.station-route-body strong{overflow:hidden;font-size:17px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.station-route-body small{color:#6c7c90;font-size:12px;letter-spacing:.03em}
.station-route>li>a>i{color:var(--station-navy);font-size:19px;font-style:normal}
.station-route>li>a:hover .station-route-body small,.station-route>li>a:hover>i{color:#fff}
/* 周辺にホテルが無い駅は選んでも空振りになるので、印を白抜きにして控えめに見せる。
   ページ自体は開けるので非表示にはしない。 */
.station-route>li.is-empty>a{opacity:.62}
.station-route>li.is-empty .station-route-mark{border-width:2px;border-color:#a9b6c5}

/* .konya-airport-* の文字サイズは home-airports.css 側で全ページ分まとめて
   引き上げてあるので、ここでは上書きしない。 */

@media(max-width:960px){.station-line-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .station-region-tabs{gap:7px;margin-bottom:26px}
  .station-region-tabs button{min-height:40px;padding:0 16px;font-size:13px}
  .station-region-panel.is-active{gap:24px}
  .station-pref h4{font-size:18px}
  .station-pref>header small{font-size:11px}
  .station-line-grid{grid-template-columns:1fr;gap:7px}
  .station-line-grid>a{min-height:68px;padding:13px 15px}
  .station-line-grid>a>span{font-size:14px}
  .station-route>li>a{min-height:58px}
  .station-route-body strong{font-size:16px}
  .station-route>li>a:hover{box-shadow:-4px 0 0 var(--station-navy),8px 0 0 var(--station-navy)}
}

/* Station pages use a clean white content field below the main visual. */
.station-page .konya-airport-discovery{
  background:#fff;
}
.station-page #station-major,
.station-page #line-stations{
  padding-top:58px;
}
.station-page #station-discovery{
  border-top:1px solid #e2e8f0;
}

@media(max-width:620px){
  .station-page #station-major,
  .station-page #line-stations{
    padding-top:40px;
  }
}

/* Restore clear card surfaces and a compact two-column rhythm on phones. */
.station-page .konya-airport-grid>a,
.station-page .station-line-grid>a{
  border-color:#d9e2ec;
  border-radius:5px;
  background:#f7f9fc;
  box-shadow:0 4px 12px rgba(3,34,76,.04);
}

@media(max-width:620px){
  .station-page .konya-airport-heading{
    margin-bottom:24px;
  }
  .station-page .konya-airport-heading>p{
    font-size:13px;
    line-height:1.75;
  }
  .station-page #station-major .konya-airport-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .station-page #station-major .konya-airport-grid>a{
    min-height:84px;
    padding:12px 11px;
    grid-template-columns:minmax(0,1fr) 16px;
    gap:7px;
    border:1px solid #d9e2ec;
    border-radius:5px;
    background:#f7f9fc;
    box-shadow:0 4px 12px rgba(3,34,76,.04);
  }
  .station-page #station-major .konya-airport-code{
    display:none;
  }
  .station-page #station-major .konya-airport-name{
    grid-column:1;
  }
  .station-page #station-major .konya-airport-name strong{
    font-size:14px;
  }
  .station-page #station-major .konya-airport-name small{
    margin-top:5px;
    overflow:hidden;
    font-size:10px;
    line-height:1.45;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .station-page #station-major .konya-airport-grid>a>b{
    grid-column:2;
    align-self:center;
    font-size:16px;
  }
  .station-page .konya-airport-note{
    margin-top:16px;
    font-size:11px;
  }
  .station-page .station-region-tabs{
    margin-right:-20px;
    padding-right:20px;
    padding-bottom:5px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .station-page .station-region-tabs::-webkit-scrollbar{
    display:none;
  }
  .station-page .station-region-tabs button{
    flex:0 0 auto;
  }
  .station-page .station-line-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .station-page .station-line-grid>a{
    min-height:72px;
    padding:11px 10px;
    grid-template-columns:minmax(0,1fr) 16px;
    gap:5px 6px;
    border:1px solid #d9e2ec;
    border-radius:5px;
    background:#f7f9fc;
    box-shadow:0 4px 12px rgba(3,34,76,.04);
  }
  .station-page .station-line-grid>a>span{
    font-size:13px;
  }
  .station-page .station-line-grid>a>small{
    overflow:hidden;
    font-size:10px;
    line-height:1.4;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .station-page .station-line-grid>a>i{
    font-size:16px;
  }
}