/* Trail page extras (were inline on each /explore/ trail page). */
.util-bar { position: sticky; top: 0; z-index: 101; }
.main-nav { position: sticky; top: 0; z-index: 100; }
#trail-map, .region-map { position: relative; z-index: 1; }
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 1 !important; }
.leaflet-control { z-index: 2 !important; }
html, body { overflow-x: hidden; }
img, video, canvas, iframe { max-width: 100%; }

/* Banner: photos fading in turn, or a silent YouTube loop */
.trail-hero { position: relative; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 1200ms ease; }
.trail-hero-video-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.trail-hero-video-wrap iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 100vh; min-width: 100%; min-height: 56.25vw; transform: translate(-50%, -50%); border: 0; max-width: none; }
.trail-hero-content { position: relative; z-index: 2; }

/* Route steps */
.route-h { margin: 1.5rem 0 0.75rem; font-family: var(--f-head); font-size: 1.25rem; color: #1a3340; }
.trail-section h3 { font-family: var(--f-head); font-size: 1.25rem; color: #1a3340; margin: 1.25rem 0 0.5rem; }
.trail-section ul { margin: 0.5rem 0 1rem 1.25rem; }
.trail-section li { margin-bottom: 0.35rem; line-height: 1.6; }
.route-steps { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.route-step { border-left: 3px solid var(--region-colour, #003E51); padding: 0.75rem 0 0.75rem 1rem; border-bottom: 1px solid #e8e4da; }
.route-step:last-child { border-bottom: none; }
.route-step-label { font-family: var(--f-label); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #1a3340; margin-bottom: 0.35rem; line-height: 1.3; }
.route-step-body, .route-step-body p { font-family: var(--f-body); font-size: 0.92rem; line-height: 1.65; color: #2a3a3f; margin: 0 0 0.4rem; }
.route-step-body strong { color: #1a3340; }

/* Sidebar text boxes */
.side-text p { font-size: 0.88rem; line-height: 1.65; color: #2a3a3f; margin-bottom: 0.85rem; }
.related-item { margin-bottom: 0.85rem; }
.related-item:last-child { margin-bottom: 0; }
.related-item .btn-secondary { display: inline-flex; }
.lifejacket img { width: 100%; height: auto; display: block; margin-bottom: 1rem; cursor: zoom-in; }

/* Emergency card */
.emergency-card { border-top: 3px solid #1a3340; padding: 0; overflow: hidden; }
.emg-head { background: #1a3340; padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 0.6rem; color: #fff; font-family: var(--f-label); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.emg-body { padding: 0 1.25rem; }
.emg-block { padding: 0.85rem 0 0.75rem; border-bottom: 1px solid #e8e4da; }
.emg-block.last { border-bottom: 0; }
.emg-label { font-family: var(--f-label); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7b80; margin-bottom: 0.45rem; }
.emg-list { display: flex; flex-direction: column; gap: 0.4rem; }
.emg-row { display: flex; align-items: center; gap: 0.5rem; color: #1a3340; font-family: var(--f-body); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.emg-badge { background: #1a3340; color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 3px; letter-spacing: 0.04em; }
.emg-badge.red { background: #c0392b; }
.emg-name { font-family: var(--f-body); font-size: 0.88rem; font-weight: 600; color: #1a3340; margin-bottom: 0.15rem; }
.emg-sub { font-family: var(--f-body); font-size: 0.8rem; color: #4a5a60; margin-bottom: 0.3rem; line-height: 1.5; }
.emg-sub a { color: #003E51; }
.emg-dir { font-family: var(--f-label); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #003E51; text-decoration: none; }
.emg-qr-row { display: flex; align-items: center; gap: 0.85rem; }
.qr { flex-shrink: 0; background: #fff; padding: 4px; border-radius: 4px; min-width: 80px; min-height: 80px; }
.emg-foot { padding: 0.75rem 1.25rem; border-top: 1px solid #e8e4da; display: flex; justify-content: flex-end; }
.emg-foot button { font-family: var(--f-label); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: #1a3340; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; }

#trail-alert-banner.has-info { background: #eaf4fb; border-top-color: #4986A0; color: #12354a; }
.trail-alert-status a, .trail-alert-items a { color: inherit; font-weight: 700; }

@media (max-width: 600px) {
  .stats-bar-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; }
  .stat-item { padding: 0.85rem 0.75rem; border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
  .stat-item:nth-child(2n) { border-right: none; }
  .trail-hero { min-height: 220px !important; }
  .trail-hero-h1 { font-size: 1.8rem !important; }
  .trail-hero-sub { font-size: 0.9rem !important; }
  .trail-hero-content { padding: 1.5rem 1rem !important; }
  #trail-map { height: 260px !important; }
  .map-controls { flex-wrap: wrap; gap: 6px; }
  .map-btn { font-size: 0.72rem !important; padding: 0.4rem 0.7rem !important; }
  .launch-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.8rem; }
  .breadcrumb-inner { flex-wrap: wrap; font-size: 0.75rem; }
}
@media (max-width: 900px) {
  .trail-body { display: block !important; padding: 1.5rem 1rem !important; }
  .trail-main { margin-bottom: 2rem; }
  .trail-sidebar { width: 100% !important; }
}
@media (max-width: 700px) { .trail-cards { grid-template-columns: 1fr !important; } }

/* Print = the emergency card */
@media print {
  .util-bar, .main-nav, .mob-tabbar, .mob-sheet, .breadcrumb, .trail-hero, .stats-bar, .trail-main, #trail-alert-banner,
  .gallery-section, .lb-backdrop, .nearby-section, #site-footer, .preview-flag, .cookiebar,
  .trail-sidebar > *:not(.emergency-card), .emg-foot { display: none !important; }
  .trail-body { display: block !important; padding: 0 !important; }
  .trail-sidebar { display: block !important; width: 100% !important; }
  .emergency-card { display: block !important; border: 1px solid #ccc !important; }
  .qr img { display: block !important; }
}