/* Shared reading and map surfaces, extending the approved homepage design. */
.detail-page { background:#fff; color:var(--text); font:15px/1.65 'DM Sans','Segoe UI',sans-serif; }
.detail-page .navigation { position:static; }
.detail-page .header { border-bottom:1px solid #e7ded6; }
.detail-main { width:min(1240px,calc(100% - 80px)); max-width:1240px; margin:0 auto; padding:38px 0 56px; }
.detail-main h1,.detail-main h2,.detail-main h3 { color:var(--ink); font-family:Fraunces,Georgia,serif; letter-spacing:0; }
.detail-main h1 { font-size:42px; line-height:1.17; margin:15px 0 20px; max-width:900px; overflow-wrap:break-word; }
.detail-main h2 { font-size:27px; margin:28px 0 15px; }
.detail-main h3 { font-size:21px; }
.detail-main p { margin:0 0 18px; }
.breadcrumb,.detail-main .see-all { color:var(--green); font-size:13px; font-weight:600; }
.reading-layout { display:grid; grid-template-columns:minmax(0,760px) 260px; gap:72px; justify-content:space-between; }
.article-shell { min-width:0; }
.article-meta { display:block; margin:17px 0 8px; font-size:13px; color:var(--muted); }
.article-lead { font-size:19px; line-height:1.7; color:#4b6257; max-width:760px; }
.article-tags { display:flex; flex-wrap:wrap; gap:8px 18px; padding-bottom:22px; margin-bottom:28px; border-bottom:1px solid var(--line); color:var(--green); font-size:12px; }
.article-tags span { padding:0; background:none; }
.article-content { font-size:17px; line-height:1.9; }
.article-content p { margin-bottom:24px; }
.article-content h2 { margin-top:36px; }
.article-content h3 { margin-top:28px; }
.article-content a:not(.article-lightbox-link):not(.map-btn) { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.article-content ul,.article-content ol { padding-left:24px; margin:20px 0; }
.article-content blockquote { border-left:3px solid #9fbf9f; margin:28px 0; padding:8px 0 8px 24px; color:#486955; }
.journey-summary { align-self:start; margin-top:50px; padding:25px 0 25px 25px; border-left:2px solid #d4e3d8; }
.journey-photo { width:100%; max-width:300px; height:155px; object-fit:cover; border-radius:4px; margin-bottom:22px; }
.journey-summary h2 { font-size:24px; margin:0 0 18px; }
.journey-summary dl { display:grid; gap:13px; margin:0 0 25px; }
.journey-summary dl > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.journey-summary dt { color:var(--muted); font-size:12px; }
.journey-summary dd { margin:0; color:var(--green); font-size:22px; font-weight:600; }
.journey-summary .primary { display:block; font-size:13px; text-align:center; padding-inline:10px; white-space:normal; }
.article-media { margin:30px 0; }
.article-media img { max-width:100%; max-height:500px; width:auto; object-fit:contain; border-radius:5px; }
.article-media figcaption { color:var(--muted); font-size:13px; margin-top:8px; }
.article-map-embed { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; padding:25px 0; margin:30px 0; border-block:1px solid #bdd4c4; background:none; }
.article-map-embed .blog-tag { color:var(--green); font-size:12px; text-transform:uppercase; font-weight:600; }
.article-map-embed h2 { font-size:26px; margin:8px 0 14px; }
.article-map-embed p { font-size:15px; line-height:1.7; margin:0 0 10px; }
.map-btn { display:inline-flex; align-items:center; min-height:42px; background:var(--green); color:#fff; padding:10px 18px; border-radius:4px; font-size:13px; font-weight:600; }
.map-btn:hover { background:#174d3d; color:#fff; }
.content-links { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 24px; padding:20px 0; margin:28px 0; border-block:1px solid var(--line); font-size:13px; }
.content-links h2 { font-size:18px; margin:0; }
.content-links a { color:var(--green); text-decoration:underline; }
.article-gallery { margin-top:34px; }
.article-gallery h2 { margin-bottom:8px; }
.article-gallery > p { font-size:15px; color:var(--muted); }
.article-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 15px; margin-top:25px; }
.article-gallery-grid figure { margin:0; min-width:0; max-width:300px; }
.article-gallery-grid img { width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; border-radius:4px; }
.article-gallery-grid figcaption { font-size:12px; color:var(--muted); margin-top:8px; line-height:1.55; overflow-wrap:anywhere; }
.article-gallery-map { width:100%; height:360px; border-radius:5px; isolation:isolate; }
.article-gallery-map-wrap { margin-top:25px; }
.article-gallery-map-wrap h3 { font-size:19px; margin-bottom:12px; }
.article-gallery .leaflet-container img.leaflet-marker-icon,.article-gallery .leaflet-container img.leaflet-marker-shadow { width:auto; max-width:none; border-radius:0; padding:0; background:none; }
.article-gallery .leaflet-container .leaflet-tile { max-width:none; border-radius:0; }
.map-photo-preview { border:0; background:none; padding:0; cursor:pointer; width:180px; }
.map-photo-preview img { width:180px; max-height:150px; object-fit:contain; border-radius:3px; }
.album-page .article-shell { max-width:1100px; margin:auto; }
.album-page .article-gallery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.album-page .article-gallery-map { height:420px; }
.detail-main .article-list { display:grid; grid-template-columns:1fr 1fr; gap:30px 50px; margin-top:34px; }
.blog-card { padding:0 0 28px; border-bottom:1px solid var(--line); }
.blog-card > a { display:grid; grid-template-columns:150px minmax(0,1fr); gap:22px; }
.card-cover { width:150px; height:115px; object-fit:cover; border-radius:5px; }
.feed-copy { min-width:0; }
.feed-copy h3 { margin:10px 0; font-size:25px; }
.feed-copy p { color:var(--muted); font-size:15px; }
.feed-copy time { display:block; font-size:12px; margin-top:8px; color:var(--muted); }
.blog-tag { font-size:11px; color:var(--green); }
.routes-catalog-list { display:grid; grid-template-columns:1fr 1fr; gap:24px 44px; margin-top:25px; }
.home-feed-item { border-bottom:1px solid var(--line); padding:0 0 25px; min-width:0; }
.home-feed-link { display:grid; grid-template-columns:140px minmax(0,1fr); gap:22px; }
.home-feed-cover { width:140px; height:112px; object-fit:cover; border-radius:5px; }
.home-feed-copy h3 { font-size:25px; margin:9px 0 12px; }
.home-feed-copy p { font-size:15px; color:var(--muted); }
.route-filter { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto auto; gap:20px; align-items:end; padding:24px; background:var(--mint); border-block:1px solid #d4e3d8; margin:25px 0 18px; }
.route-filter label { display:block; color:var(--muted); font:500 12px 'DM Sans',sans-serif; text-transform:none; margin-bottom:7px; letter-spacing:0; }
.route-filter select { background:#fff; color:var(--ink); min-height:42px; width:100%; border:1px solid #c8d5cc; border-radius:4px; padding:8px 10px; font:14px 'DM Sans',sans-serif; color-scheme:light; }
.route-filter option { background:#fff; color:var(--ink); }
.route-filter button { background:var(--green); color:#fff; font-size:14px; min-height:42px; border:0; border-radius:4px; padding:10px 20px; cursor:pointer; }
.route-filter a { color:var(--green); font-size:13px; padding:10px 0; text-decoration:underline; white-space:nowrap; }
.route-result-count,.route-empty { font-size:14px; color:var(--muted); }
.detail-main.map { max-width:1240px; }
.map-page { --terracotta:#266b55; --cream:#fff; --panel:#fff; --khaki:#64726b; --ink-soft:#425c4e; }
.map-page .detail-main > .content-links { margin:0 0 22px; padding-top:0; border-top:0; }
.map-page .route-title h1 { font-size:40px; max-width:1000px; margin:15px 0 16px; }
.map-page .route-title .small { max-width:850px; font:16px/1.7 'DM Sans',sans-serif; color:var(--muted); }
.map-page .actions { gap:12px; margin:22px 0; }
.map-page .actions .button { border:1px solid var(--green); color:var(--green); background:#fff; font-size:14px; border-radius:4px; }
.map-page .actions .button:first-child { background:var(--green); color:white; }
.map-page .actions .small { font-size:12px; color:var(--muted); }
.map-page .metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; border-block:1px solid #d3e1d8; background:var(--mint); margin:25px 0; }
.map-page .metric { border:0; border-right:1px solid #d3e1d8; border-radius:0; background:transparent; min-height:95px; padding:17px; }
.map-page .metric:last-child { border:0; }
.map-page .metric::before { display:none; }
.map-page .metric strong { font:600 29px/1.2 Fraunces,Georgia,serif; color:var(--ink); }
.map-page .metric span { font:12px/1.5 'DM Sans',sans-serif; text-transform:none; letter-spacing:0; color:var(--muted); display:block; margin-top:5px; }
.map-page .category-bar { margin:12px 0; gap:10px 18px; }
.map-page .category-pill { border:0; padding:0; font:12px 'DM Sans',sans-serif; background:none; color:var(--muted); }
.map-page .map-panel { border:1px solid var(--line); border-radius:5px; box-shadow:none; background:#f1f5f2; margin:20px 0 28px; }
.map-page #route-map { height:520px; }
.map-page .map-legend { background:#fff; padding:15px; gap:8px; }
.map-page .legend-toggle { border-radius:4px; min-height:34px; font-size:13px; }
.map-page .map-fallback { font-size:12px; }
.map-page .elevation-panel { border:1px solid var(--line); border-radius:5px; background:#fff; box-shadow:none; margin:28px 0; }
.map-page .elevation-head { padding:18px 20px; align-items:center; }
.map-page .elevation-head h2 { font-size:25px; margin:0; }
.map-page .elevation-meta { font-family:'DM Sans',sans-serif; font-size:12px; }
.map-page .elevation-label { font-family:'DM Sans',sans-serif; }
.map-page .elevation-area { fill:rgba(38,107,85,.12); }
.map-page .elevation-tooltip { background:#fff; border-radius:4px; }
.map-page .elevation-selection-info { background:var(--mint); border-radius:4px; }
.map-page .grade-distance { background:#fff; border-radius:4px; }
.map-page .grade-distance h3 { font-size:18px; margin:0 0 12px; }
.map-page .grade-distance-track { background:#edf1ee; }
.map-page .grade-distance-value { font-family:'DM Sans',sans-serif; }
.map-page table { border-radius:0; margin-top:15px; }
.map-page td { font-size:14px; }
.map-page th { font:600 12px 'DM Sans',sans-serif; text-transform:none; letter-spacing:0; color:var(--green); background:#f2f6f3; }
.map-page .group-row td { background:#edf4ef; color:var(--green); }
.data-disclosure { border-block-start:1px solid var(--line); padding:18px 0; }
.data-disclosure summary { cursor:pointer; color:var(--ink); font:600 21px Fraunces,Georgia,serif; }
.table-scroll { overflow-x:auto; }
.detail-page div.lightbox { display:none; position:fixed; inset:0; width:100%; height:100%; max-height:none; padding:24px; border:0; border-radius:0; background:rgba(12,25,21,.92); z-index:5000; }
.detail-page div.lightbox.is-open { display:flex; justify-content:center; align-items:center; }
.detail-page .lightbox-inner { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.detail-page .lightbox-inner > img { max-width:calc(100vw - 125px); max-height:82dvh; width:auto; height:auto; object-fit:contain; border-radius:4px; }
.detail-page .lightbox-caption { font-size:14px; color:white; margin-top:12px; text-align:center; max-width:800px; }
.detail-page .lightbox-close { top:16px; right:20px; }
.detail-page .lightbox-prev { left:18px; top:48%; }
.detail-page .lightbox-next { right:18px; top:48%; }
@media (max-width:1100px) {
  .detail-main { width:calc(100% - 48px); }
  .reading-layout { grid-template-columns:minmax(0,1fr) 230px; gap:38px; }
  .route-filter { gap:12px; }
  .blog-card > a { grid-template-columns:110px minmax(0,1fr); gap:17px; }
  .card-cover { width:110px; height:100px; }
  .home-feed-link { grid-template-columns:110px minmax(0,1fr); gap:17px; }
  .home-feed-cover { width:110px; height:100px; }
  .feed-copy h3,.home-feed-copy h3 { font-size:22px; }
}
@media (max-width:850px) {
  .reading-layout { display:block; }
  .journey-summary { margin-top:35px; padding:24px; background:var(--mint); }
  .journey-summary dl { grid-template-columns:repeat(3,1fr); }
  .journey-summary dl > div { display:block; }
  .journey-summary .primary { max-width:250px; }
  .detail-main .article-list,.routes-catalog-list { grid-template-columns:1fr; }
  .route-filter { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .map-page .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .map-page .metric { border-bottom:1px solid #d3e1d8; }
  .map-page .metric:nth-child(3n) { border-right:0; }
  .map-page .metric:nth-child(n+4) { border-bottom:0; }
  .album-page .article-gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .detail-main { width:calc(100% - 36px); padding-top:26px; }
  .detail-main h1,.map-page .route-title h1 { font-size:31px; line-height:1.2; }
  .article-lead { font-size:17px; }
  .article-content { font-size:16px; line-height:1.85; }
  .article-map-embed { display:block; }
  .article-map-embed .map-btn { margin-top:14px; }
  .article-gallery-grid,.album-page .article-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .article-gallery-map,.album-page .article-gallery-map { height:290px; }
  .journey-summary { padding:18px; }
  .journey-summary dd { font-size:21px; }
  .journey-summary dt { font-size:11px; }
  .route-filter { grid-template-columns:1fr 1fr; padding:18px; }
  .route-filter > div { grid-column:1/-1; }
  .route-filter button { padding-inline:12px; }
  .map-page .metric { padding:12px 10px; min-height:86px; }
  .map-page .metric strong { font-size:25px; }
  .map-page #route-map { height:390px; }
  .map-page .elevation-head { display:block; }
  .map-page .elevation-meta { margin-top:8px; text-align:left; }
  .map-page .grade-distance-row { grid-template-columns:1fr; }
  .map-page .elevation-chart svg { height:230px; }
  .detail-page .lightbox-inner > img { max-width:calc(100vw - 40px); max-height:75dvh; }
  .detail-page .lightbox-prev,.detail-page .lightbox-next { top:auto; bottom:10px; }
}