:root {
  --bg:#fff; --fg:#0f172a; --muted:#475569; --accent:#337ab7;
  --border:#e2e8f0; --card:#f8fafc; --shadow:0 10px 20px rgba(2,6,23,0.08);
}

body {
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  margin:0; background:var(--bg); color:var(--fg); line-height:1.65;
}

.wrap {
  max-width:1100px;
  margin:0 auto;
  padding:1rem 1.2rem 3rem;
  box-sizing:border-box;
}

.site-heading {
  background:#eee;
  padding:0.6rem 1rem;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:18px;
  margin-bottom:12px;
}

.site-heading__inner {
  color:#337ab7;
  font-weight:600;
  font-size:clamp(18px,2.2vw,28px);
  line-height:1;
  letter-spacing:0.2px;
  text-align:center;
  max-width:100%;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.site-heading__inner a {
  color:#337ab7;
  text-decoration:none;
}

.walks-heading {
  width:100%;
  margin-bottom:1rem;
  font-size:1.5rem;
}

#main {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

#walk-list {
  flex:1 1 380px;
  order:2;
}

#map-canvas {
  width:100%;
  height:520px;
  border-radius:1rem;
  outline:1px solid var(--border);
  box-sizing:border-box;
}

.walk-item {
  display:flex;
  gap:1rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:var(--shadow);
  margin-bottom:1rem;
  padding:0.75rem;
}

.walk-item img {
  width:120px;
  height:90px;
  object-fit:cover;
  border-radius:0.5rem;
  flex-shrink:0;
}

.walk-item div {flex:1;}
.walk-item h3 {margin:0;font-size:1rem;}
.walk-item p {margin:0.4rem 0;color:var(--muted);line-height:1.4;}

a {
  color:#337ab7;
  text-decoration:none;
}
a:hover {
  color:#3b6d9a;
  text-decoration:underline;
}

/* Desktop layout: map on right, list left */
@media (min-width:900px){
  .site-heading {padding:1rem 2rem;}
  .site-heading__inner {font-size:26px;}
  #main {flex-wrap:nowrap;}

  #walk-list {order:1;}

 #map-wrapper {
  order:2;
}

#map-wrapper {
  position: sticky;
  top: 1rem;
  align-self: flex-start;
}

#map-canvas {
  height:500px;
}
}

/* Mobile / tablet: map first, list second */
@media (max-width:900px){
  #main {flex-direction:column;}
  #map-canvas {order:1; height:400px;}
  #walk-list {order:2;}
  .walk-item img {width:90px;height:70px;}
}

.img-placeholder {
  width:120px;
  height:90px;
  border-radius:0.5rem;
  flex-shrink:0;
  display:block;
  background:transparent;
}
.walk-item img,
.img-placeholder {
  margin-right:1rem;
}
@media (max-width:900px){
  .img-placeholder {
    width:90px;
    height:70px;
  }
}

.walk-item .img-placeholder {
  flex: 0 0 auto;
}

#map-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 410px;
}

#video {
  width: 100%;
  margin-top: 1rem;
}

/* Mobile: map on top, list below, video under list */
@media (max-width: 900px) {
  #map-wrapper {
    order: 1;
  }
  #walk-list {
    order: 2;
  }
  #video {
    order: 3;
  }
}

/* Default: desktop shown, mobile hidden */
#video-desktop { display:block; padding-top:10px}
#video-mobile { display:none; }

/* Mobile: desktop hidden, mobile shown */
@media (max-width:900px){
  #video-desktop { display:none; }
  #video-mobile { 
    display:block; 
    margin-top:1rem;
order: 3;  /* ensure it’s after the list */
  }
}

.site-heading__inner a {
  color: #337ab7;           /* same as your normal colour */
  text-decoration: none;
}

.site-heading__inner a:hover,
.site-heading__inner a:focus,
.site-heading__inner a:active {
  color: #337ab7 !important; /* prevent hover colour change */
  text-decoration: none !important;
}

#more-walks {
  display: inline-block;
  margin: 1rem 0;
  padding: 0.5rem 1.2rem;
  background-color: #f8fafc; /* match card background */
  color: #337ab7;             /* same blue as links */
  border: 1px solid #337ab7;
  border-radius: 999px;       /* makes it fully rounded/ellipse-like */
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

#more-walks:hover,
#more-walks:focus {
  background-color: #337ab7;
  color: #fff;
  outline: none;
}