@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --gd:#1b2e1b; --gm:#2d4a2d; --gl:#4a7a4a;
  --gp:#eaf3ea; --mu:#8ab88a; --sand:#f7f2eb;
  --txt:#1c1c1c; --mut:#607060; --rule:#e4ece4;
  --drive:#2a3a5a; --drive-l:#e8edf8;
}

html { scroll-behavior:smooth; scroll-padding-top:46px }  /* 46px = sticky nav height */
body { font-family:'Inter',sans-serif; background:#ddd8d0; color:var(--txt); font-size:14px; line-height:1.65 }

/* ── Card wrapper ── */
.card { max-width:560px; margin:24px auto; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 70px rgba(0,0,0,.18) }

/* ── Cover ── */
.cover {
  background: linear-gradient(170deg,#0f1f0f 0%,#1b3020 40%,#2d4a30 70%,#253828 100%);
  padding: 30px 28px 24px;
  position: relative; overflow: hidden;
}
.cover-img { width:100%; display:block; margin-bottom:20px; border-radius:10px; object-fit:cover; height:180px }
.c-badge {
  display:inline-block; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:var(--mu); font-size:9px; letter-spacing:3.5px; text-transform:uppercase;
  padding:5px 14px; border-radius:20px; margin-bottom:12px; position:relative; z-index:1
}
.c-title { font-family:'Playfair Display',serif; font-size:36px; color:#fff; line-height:1; margin-bottom:6px; position:relative; z-index:1 }
.c-sub   { font-size:12.5px; color:rgba(255,255,255,.6); font-weight:300; position:relative; z-index:1; margin-bottom:20px }
.c-dates { display:flex; border-top:1px solid rgba(255,255,255,.12); padding-top:16px; position:relative; z-index:1 }
.cd      { text-align:center; flex:1; border-right:1px solid rgba(255,255,255,.1) }
.cd:last-child { border-right:none }
.cd-n    { font-size:17px; font-weight:600; color:#fff; line-height:1 }
.cd-l    { font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mu); margin-top:3px }

/* ── Sticky nav ── */
.nav { position:sticky; top:0; z-index:50; background:rgba(27,46,27,.97); backdrop-filter:blur(10px); border-bottom:1px solid rgba(168,200,168,.12) }
.nav-i { display:flex; align-items:center; height:46px; overflow-x:auto; padding:0 16px; scrollbar-width:none }
.nav-i::-webkit-scrollbar { display:none }
.nl { color:var(--mu); text-decoration:none; font-size:11px; letter-spacing:.5px; padding:6px 12px; border-radius:16px; transition:all .15s; white-space:nowrap; flex-shrink:0 }
.nl:hover { background:rgba(255,255,255,.1); color:#fff }

/* ── Section heads ── */
.sh { padding:18px 24px 8px; border-bottom:2px solid var(--rule) }
.sl { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gl); margin-bottom:3px }
.st { font-family:'Playfair Display',serif; font-size:20px; color:var(--gd) }

/* ── Day cards ── */
.day-card { border-bottom:1px solid var(--rule) }
.day-card:last-of-type { border-bottom:none }

.day-card.drive .day-hd { background:linear-gradient(135deg,#1e2d4a,#2a3d5a) }
.day-card.drive .day-hd .dc-date { color:#a0b8e0 }
.day-card.hike  .day-hd { background:linear-gradient(135deg,var(--gm),#3d6040) }
.day-card.rest  .day-hd { background:linear-gradient(135deg,#3a3020,#5a4a30) }

.day-hd   { padding:16px 24px; color:#fff }
.dc-top   { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap }
.dc-date  { font-size:9.5px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:4px }
.dc-title { font-family:'Playfair Display',serif; font-size:19px; color:#fff; line-height:1.2; margin-bottom:4px }
.dc-sub   { font-size:12px; color:rgba(255,255,255,.65); line-height:1.5 }
.dc-pills { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px }
.dpill    { background:rgba(255,255,255,.15); color:#fff; font-size:10px; font-weight:500; padding:3px 9px; border-radius:12px; border:1px solid rgba(255,255,255,.15) }
.dpill.warn { background:rgba(255,180,60,.2); border-color:rgba(255,180,60,.3); color:#ffd090 }

.day-body { padding:16px 24px 20px }
.day-desc { font-size:13px; color:var(--txt); line-height:1.75; margin-bottom:14px }

/* ── Drive timeline ── */
.drive-tl { display:flex; flex-direction:column; margin-bottom:14px }
.dtl-step { display:flex; gap:12px; align-items:flex-start; padding:8px 0; border-bottom:1px solid #f0f0f0 }
.dtl-step:last-child { border-bottom:none }
.dtl-time    { font-weight:600; font-size:12px; color:var(--drive); width:46px; flex-shrink:0; padding-top:1px }
.dtl-dot-col { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:14px }
.dtl-dot     { width:10px; height:10px; border-radius:50%; background:#4a6aaa; flex-shrink:0 }
.dtl-dot.green { background:#4a8a4a }
.dtl-line    { width:2px; flex:1; background:#e0e8f0; margin-top:2px; min-height:16px }
.dtl-txt     { flex:1; font-size:12.5px; color:var(--txt); line-height:1.5 }
.dtl-txt strong { color:var(--drive) }
.dtl-txt span   { color:var(--mut); font-size:11.5px; display:block }

/* ── Hike route list ── */
.route-list { list-style:none; margin-bottom:12px }
.route-list li { display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--txt); margin-bottom:7px }
.route-list li::before { content:''; width:5px; height:5px; background:var(--gm); border-radius:50%; margin-top:8px; flex-shrink:0 }

/* ── Callout boxes ── */
.tip-box  { background:var(--gp); border-left:3px solid var(--gm); border-radius:0 8px 8px 0; padding:10px 13px; margin-bottom:12px; font-size:12.5px; color:var(--gd); line-height:1.6; font-style:italic }
.info-box { background:var(--drive-l); border-left:3px solid #4a6aaa; border-radius:0 8px 8px 0; padding:10px 13px; margin-bottom:12px; font-size:12.5px; color:#1a2a4a; line-height:1.6 }

/* ── Accommodation & links ── */
.hotel-row  { display:flex; gap:8px; align-items:flex-start; margin-bottom:6px; font-size:12.5px }
.hotel-ico  { font-size:14px; flex-shrink:0 }
.hotel-name { font-weight:600; color:var(--gd) }
.hotel-desc { color:var(--mut); font-size:11.5px }

.links-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.ext-link  { display:inline-flex; align-items:center; gap:5px; background:#f0f4f0; border:1px solid #cddccd; color:var(--gm); font-size:11px; font-weight:500; padding:4px 10px; border-radius:20px; text-decoration:none }
.ext-link.blue { background:#eef1f8; border-color:#c0cce0; color:#2a3a6a }

/* ── Overview strip ── */
.overview    { background:var(--gd); padding:20px 24px }
.overview h3 { font-family:'Playfair Display',serif; font-size:17px; color:var(--mu); margin-bottom:14px }
.ov-row  { display:flex; align-items:stretch }
.ov-day  { flex:1; text-align:center; padding:10px 4px; border-right:1px solid rgba(255,255,255,.08) }
.ov-day:last-child { border-right:none }
.ov-icon  { font-size:18px; margin-bottom:4px }
.ov-date  { font-size:9px; color:var(--mu); letter-spacing:1px; text-transform:uppercase }
.ov-label { font-size:10.5px; font-weight:500; margin-top:3px; line-height:1.3 }
.ov-day.drive-day .ov-label { color:#a0b8e0 }
.ov-day.hike-day  .ov-label { color:#a8d0a8 }
.ov-day.rest-day  .ov-label { color:#d0c0a0 }

/* ── Logistics ── */
.logi-wrap { padding:16px 24px 20px }
.logi-box  { background:var(--gd); border-radius:12px; padding:18px 20px; color:#fff; margin-bottom:14px }
.logi-box h3 { font-family:'Playfair Display',serif; font-size:16px; color:var(--mu); margin-bottom:12px }
.logi-row  { display:flex; gap:10px; align-items:flex-start; margin-bottom:9px }
.logi-ico  { font-size:15px; flex-shrink:0; margin-top:1px }
.logi-t strong { display:block; font-size:12.5px; color:#fff }
.logi-t span   { font-size:11.5px; color:var(--mu) }

/* ── Checklist ── */
.clist    { background:var(--gd); padding:18px 24px 22px }
.clist .sl { color:var(--mu) }
.clist .st { color:#fff; margin-bottom:12px }
.cl-grid  { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.cl-item  { display:flex; gap:7px; align-items:flex-start; background:rgba(255,255,255,.06); border-radius:7px; padding:8px 9px; font-size:11.5px; color:rgba(255,255,255,.85); line-height:1.45 }
.clc      { color:var(--mu); font-size:13px; flex-shrink:0; margin-top:1px }

/* ── Useful links ── */
.useful    { background:var(--sand); padding:18px 24px 22px }
.useful .sl { margin-bottom:4px }
.useful .st { font-size:18px; margin-bottom:14px }
.link-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.lc        { background:#fff; border:1px solid var(--rule); border-radius:10px; padding:10px 12px; text-decoration:none; display:block }
.lc-label  { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--gl); margin-bottom:2px }
.lc-title  { font-weight:600; font-size:12px; color:var(--gd); margin-bottom:1px }
.lc-url    { font-size:10px; color:var(--mut) }

/* ── Map ── */
.map-wrap { border-bottom: 1px solid var(--rule) }
.trip-map {
  height: 340px;
  position: relative;
  z-index: 0;          /* keep Leaflet z-indexes from leaking */
  background: #e8e4dc;
}
.map-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--mut);
}
.map-hint {
  padding: 6px 14px;
  font-size: 10.5px;
  color: var(--mut);
  background: var(--sand);
  border-top: 1px solid var(--rule);
  text-align: center;
  letter-spacing: .2px;
}
/* ── GPX route stats strip ── */
.map-stats {
  background: var(--sand);
  border-top: 1px solid var(--rule);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ms-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--txt);
}
.ms-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ms-label { flex: 1; font-weight: 500; color: var(--gd) }
.ms-stat  { color: var(--mut); font-size: 11px; white-space: nowrap }
/* Ensure Leaflet controls sit above map tiles but below our nav */
.leaflet-top, .leaflet-bottom { z-index: 400 !important }

/* ── Images in day body ── */
.day-images { display:flex; gap:8px; margin-bottom:12px; overflow-x:auto }
.day-img    { height:130px; border-radius:8px; object-fit:cover; flex-shrink:0; cursor:pointer }
.day-img.full { width:100%; height:180px; flex-shrink:unset }

/* ── Footer ── */
.foot   { background:#111b11; padding:14px 24px; display:flex; justify-content:space-between; align-items:center }
.foot-t { font-family:'Playfair Display',serif; font-size:12px; color:rgba(255,255,255,.45) }
.foot-d { font-size:10px; color:rgba(255,255,255,.25); margin-top:2px }
.foot-r { font-size:10px; color:rgba(255,255,255,.25); text-align:right; line-height:1.6 }

/* ── Mobile: full-bleed card ─────────────────────────────── */
@media(max-width:559px) {
  .card { margin:0; border-radius:0; min-height:100vh; box-shadow:none }
  .cl-grid, .link-grid { grid-template-columns:1fr }
  .ov-date { display:none }
}

/* ── Desktop: sidebar layout ─────────────────────────────── */
@media(min-width:860px) {
  html { scroll-padding-top: 0 }
  body { background: #e8e4de; padding: 0 }

  /* Push content right of the fixed sidebar */
  .card {
    max-width: none;
    margin: 0 0 0 220px;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;   /* let fixed nav escape the card box */
    min-height: 100vh;
  }

  /* ── Fixed sidebar nav ── */
  .nav {
    position: fixed;
    top: 0; left: 0;
    width: 220px;
    height: 100vh;
    overflow-y: auto;
    background: rgba(22,38,22,.98);
    border-bottom: none;
    border-right: 1px solid rgba(168,200,168,.1);
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
  }
  .nav-i {
    flex-direction: column;
    height: auto;
    padding: 32px 14px 24px;
    gap: 2px;
    align-items: flex-start;
    overflow-x: visible;
  }
  /* Small "back" label at top of sidebar */
  .nav-i::before {
    content: 'Turer';
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(138,184,138,.5);
    padding: 0 12px;
    margin-bottom: 12px;
  }
  .nl {
    width: 100%;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11.5px;
  }

  /* ── Cover: more breathing room ── */
  .cover { padding: 52px 44px 40px }
  .c-title { font-size: 46px }
  .c-sub { font-size: 13.5px; margin-bottom: 28px }
  .cover-img { height: 220px }

  /* ── Content sections: more padding ── */
  .day-hd   { padding: 22px 40px }
  .day-body { padding: 22px 40px 28px; max-width: 800px }
  .sh       { padding: 22px 40px 10px }
  .overview { padding: 24px 40px }
  .logi-wrap { padding: 20px 40px 24px }
  .clist    { padding: 22px 40px 28px }
  .useful   { padding: 22px 40px 28px }
  .foot     { padding: 18px 40px }

  /* ── Wider grids ── */
  .cl-grid   { grid-template-columns: 1fr 1fr 1fr }
  .link-grid { grid-template-columns: 1fr 1fr 1fr }

  /* ── Day header: slightly bigger title ── */
  .dc-title { font-size: 22px }

  /* ── Overview strip: wrappable ── */
  .ov-row { flex-wrap: wrap }
  .ov-day { min-width: 80px }

  /* ── Map: taller on desktop ── */
  .trip-map { height: 460px }
  .map-hint { text-align: left; padding: 7px 40px }
}