/* The v2 route page (resources/views/Routes/routepage.htm). Colours only from the tokens. */

.routex { padding-top: 22px; padding-bottom: 24px; }
.routex-head { display: flex; flex-direction: column; gap: 12px; }
.routex-head .breadcrumb { margin: 0; }
.routex-badges { display: flex; gap: 8px; align-items: center; }
.routex-titlerow { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.routex-titlerow .h1 { font-size: clamp(30px, 4vw, 46px); }
.routex-titlerow .lead { margin-top: 8px; max-width: 760px; }
.routex-actions { flex-shrink: 0; }

/* ---- photo mosaic: one big, four small ---- */
.routex-mosaic {
  position: relative; margin-top: 22px; display: grid; gap: 8px; height: clamp(260px, 32vw, 450px);
  grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; border-radius: var(--r-xl); overflow: hidden;
}
.routex-tile { display: block; overflow: hidden; background: var(--c-surface-2); }
.routex-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.routex-tile:hover img { transform: scale(1.03); }
.routex-tile:first-child { grid-row: 1 / span 2; }
.routex-tile.is-extra { display: none; }
.routex-mosaic.count-1 { grid-template-columns: 1fr; }
.routex-mosaic.count-2 { grid-template-columns: 2fr 1fr; }
.routex-mosaic.count-2 .routex-tile:nth-child(2) { grid-row: 1 / span 2; }
.routex-mosaic.count-3 { grid-template-columns: 2fr 1fr; }
.routex-mosaic.count-4 { grid-template-columns: 2fr 1fr 1fr; }
.routex-mosaic.count-4 .routex-tile:nth-child(4) { grid-column: 2 / span 2; }
.routex-allphotos { position: absolute; right: 16px; bottom: 16px; box-shadow: var(--shadow-1); }

/* ---- the numbers ---- */
.routex-stats { margin-top: 18px; align-items: center; }
.routex-stats .stat b { display: inline-flex; align-items: center; gap: 4px; font-size: 22px; }
.routex-stats .stat b a { color: var(--c-text); }
.routex-mapbtn { margin-left: auto; margin-right: 22px; }

/* ---- main and side ---- */
.routex-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 24px; align-items: start; }
.routex-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.routex-main > .section:first-of-type, .routex-main .routex-about { padding-top: clamp(36px, 4vw, 56px); }
.routex-main .section { padding-top: clamp(36px, 4vw, 56px); }
.routex-main .section .h2 { margin-bottom: 16px; }

.routex-mapcard { overflow: hidden; }
.routex-map { position: relative; height: clamp(320px, 38vw, 460px); }
.routex-canvas { position: absolute; inset: 0; background: var(--c-surface-2); }
.routex-dim { position: absolute; left: 14px; top: 14px; z-index: 2; box-shadow: var(--shadow-1); }
.routex-fly { position: absolute; right: 14px; top: 14px; z-index: 2; box-shadow: var(--shadow-1); }
.routex-fly.is-on { background: var(--c-primary); color: var(--c-on-primary); }
.routex-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--c-accent); border: 3px solid #fff; box-shadow: 0 1px 6px rgb(0 0 0 / .35); }

.routex-profile { padding: 16px 18px 12px; border-top: 1px solid var(--c-outline); }
.routex-profile-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.routex-chart { position: relative; height: 180px; touch-action: none; cursor: crosshair; }
.routex-chart svg { width: 100%; height: 100%; display: block; }
.routex-chart .area { fill: var(--c-primary-container); }
.routex-chart .line { fill: none; stroke: var(--c-primary); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.routex-chart .grid { stroke: var(--c-outline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.routex-chart .cursor { stroke: var(--c-accent); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.routex-chart .ylab { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; color: var(--c-text-2); }
.routex-chart .xlab { position: absolute; bottom: 0; font-size: 11px; color: var(--c-text-2); }
.routex-chart .xlab.end { right: 0; }
.routex-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--c-text); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; }

.routex-text { font-family: var(--font-serif); font-size: 18px; line-height: 1.65; }
.routex-text.is-clamped { max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.routex-more { margin-top: 8px; }
.routex-places { display: flex; flex-direction: column; }
.routex-places .list-row { border-radius: 0; border-bottom: 1px solid var(--c-outline); padding: 12px 4px; }
.routex-places .list-row b { display: block; }
.routex-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; background: #000; }
.routex-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.routex-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.routex-links a { display: inline-flex; gap: 6px; align-items: center; }
.routex-banner img { margin-inline: auto; border-radius: var(--r-m); }

.routex-walked { background: var(--c-primary); color: #fff; border-radius: var(--r-l); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.routex-walked .h3 { color: #fff; }
.routex-walked p { font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / .86); }
.routex-box .h3, .routex-walked .h3 { font: 700 17px/1.3 var(--font-ui); margin-bottom: 12px; }
.routex-walked .h3 { margin: 0; font-size: 19px; }
.routex-weather { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.routex-weather li { display: flex; justify-content: space-between; gap: 8px; }
.routex-weather a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.routex-guide { display: flex; gap: 12px; align-items: center; color: var(--c-text); margin-bottom: 10px; }
.routex-guide img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.routex-guide b, .routex-app b { display: block; }
a.routex-app { display: flex; flex-direction: row; gap: 14px; align-items: center; text-align: left; color: var(--c-text); }
.routex-box .list-row { padding: 8px 0; }
.routex-box .list-row img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.routex-box .list-row b { display: block; font-size: 14px; }
.routex-bar { display: none; }

@media (max-width: 1100px) {
  .routex-grid { grid-template-columns: 1fr; }
  .routex-side { position: static; }
}
@media (max-width: 860px) {
  .routex-mapbtn { display: none; }
  .routex-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; background: none; border: 0; }
  .routex-stats .stat { background: var(--c-surface); border: 1px solid var(--c-outline); border-radius: var(--r-m); padding: 12px 14px; }
  .routex-stats .stat b { font-size: 18px; }
  .routex-mosaic { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 300px; margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .routex-mosaic .routex-tile:not(:first-child) { display: none; }
  .routex-mosaic .routex-tile:first-child { grid-row: auto; }
  .routex-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: sticky; bottom: 0; z-index: 20;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--c-surface); border-top: 1px solid var(--c-outline);
  }
  .routex-bar .btn { justify-content: center; }
  .routex-bar .btn:only-child { grid-column: 1 / span 2; }
  .routex-titlerow .routex-actions { width: 100%; }
}
.route-compact .routex-bar, .route-compact .routex-side, .route-compact .cm-comments, .route-compact .cm-gallery { display: none; }
.route-compact .routex-grid { grid-template-columns: 1fr; }

.routex-ad { padding: 0; }