.sxm-gallery-grid > .sxm-gallery-item,
.sxm-gallery-grid > .sxm-gallery-item.is-featured {
  grid-column: span var(--sxm-gallery-span, 4);
  grid-row: auto;
  min-height: var(--sxm-gallery-height, 310px);
}

@media (max-width: 900px) {
  .sxm-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sxm-gallery-grid > .sxm-gallery-item,
  .sxm-gallery-grid > .sxm-gallery-item.is-featured {
    grid-column: auto !important;
    min-height: 320px;
  }
  .sxm-gallery-grid > .sxm-gallery-item:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
}

@media (max-width: 620px) {
  .sxm-gallery-grid { grid-template-columns: 1fr; }
  .sxm-gallery-grid > .sxm-gallery-item,
  .sxm-gallery-grid > .sxm-gallery-item.is-featured,
  .sxm-gallery-grid > .sxm-gallery-item:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    min-height: 320px;
  }
}

/* Keep the elevation profile inside the page at every screen width. */
.sxm-elevation-chart {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.sxm-elevation-svg {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
}

@media (max-width: 620px) {
  .sxm-elevation-chart { padding: 8px 4px 0; }
  .sxm-elevation-svg text { font-size: 13px; }
  .sxm-elevation-svg .sxm-end-label { font-size: 11px; }
}

/* Trail Goats map treatment: warm sand, muted sea green and strong routes. */
.sxm-live-map,
.leaflet-container {
  background: #dce8df;
}

.leaflet-tile-pane .sxm-trailgoats-tiles {
  filter: sepia(.28) saturate(.62) hue-rotate(78deg) brightness(1.07) contrast(.86);
}

.leaflet-overlay-pane svg {
  filter: drop-shadow(0 1px 1px rgba(21, 51, 38, .22));
}

.leaflet-control-zoom a {
  background: #f4f1e8;
  color: #153326;
}

.leaflet-control-zoom a:hover {
  background: #d7f25c;
  color: #153326;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #f4f1e8;
  color: #153326;
}

.leaflet-popup-content a {
  color: #c85f34;
}

.leaflet-control-attribution {
  background: rgba(244, 241, 232, .88) !important;
  color: #536c60;
}

.sxm-empty-trail-gallery {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(28px, 6vw, 80px);
  margin: 48px 0 70px;
  padding: clamp(28px, 5vw, 58px);
  overflow: hidden;
  background: #e7e5db;
  border-left: 4px solid #ee7d4d;
  color: #153326;
}
.sxm-empty-gallery-art { min-width: 0; padding: 18px; background: #174b35; }
.sxm-empty-gallery-art svg { display: block; width: 100%; height: auto; }
.sxm-empty-gallery-art circle,.sxm-empty-gallery-goat { fill: #d7f25c; }
.sxm-empty-gallery-back { fill: #5c9d91; opacity: .7; }
.sxm-empty-gallery-front { fill: #a5cbc3; }
.sxm-empty-gallery-route { fill: none; stroke: #ee7d4d; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 8 10; }
.sxm-empty-trail-gallery>div:last-child>span { font: 900 10px/1 Arial,sans-serif; letter-spacing: .18em; color: #ee7d4d; }
.sxm-empty-trail-gallery h2 { margin: 9px 0 14px; font: 400 clamp(32px, 5vw, 52px)/1.05 Georgia,serif; letter-spacing: -.04em; }
.sxm-empty-trail-gallery p { max-width: 580px; margin: 0!important; color: #526c60!important; line-height: 1.7; }
@media(max-width:650px){.sxm-empty-trail-gallery{grid-template-columns:1fr;padding:24px 20px}.sxm-empty-gallery-art{padding:10px}.sxm-empty-gallery-art svg{max-height:180px}}
