/* ==========================================================================
 * lc-tours-page.css — the /walking-tours/ landing.
 *
 * Tokens are redeclared here rather than inherited. lc-tours.css carries the same
 * values but its enqueue is gated on lc_tours_is_surface(), which covers the stop
 * and tour singles and NOT this page — so relying on them would work in whatever
 * order the two happened to load and fail the moment it changed.
 *
 * ⛔ SQUARE CORNERS THROUGHOUT. One radius system per page, and on this site that
 * system is zero. A rounded card dropped into a square page is the thing that reads
 * as a template.
 *
 * ⛔ THE CLAIMS ROW IS NOT THREE CARDS. Three equal bordered boxes side by side is
 * the single most recognisable generated-page shape there is. These are three
 * sentences with air around them and one hairline between them, which is what they
 * actually are: statements, not objects.
 * ========================================================================== */

.lc-tours-landing {
  --lc-ink: #1a1a1a;
  --lc-muted: #6b6b6b;
  --lc-line: #e5e5e5;
  --lc-bg: #fff;
  --lc-bg-soft: #fafafa;
  --lc-accent: #2f6f57;
  --lc-serif: "PT Serif", Georgia, serif;
  --lc-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --lc-display: "Playfair Display", Georgia, serif;
}

/* The theme prints its own page title above the content; the hero band already
   carries the page's single visible h1. Same neutralisation every landing does. */
.lc-tours-landing #tm-main .uk-article-title,
.lc-tours-landing #tm-main .tm-page-title,
.lc-tours-landing #tm-main .uk-breadcrumb { display: none !important; }

.lc-tp__wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .lc-tp__wrap { padding: 0 32px; } }

.lc-tours-landing .lc-tp__h2 {
  font-family: var(--lc-display);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem);
  line-height: 1.18;
  color: var(--lc-ink);
  margin: 0 0 26px;
  max-width: 22ch;                 /* a heading that runs the full width reads as body */
}

/* ------------------------------------------------------------------ claims */

.lc-tp__claims { padding: 52px 0 8px; }

.lc-tp__claimlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 34px;
}
@media (min-width: 860px) {
  .lc-tp__claimlist { grid-template-columns: repeat(3, 1fr); gap: 0; }
  /* One hairline BETWEEN, never a box around. The rule separates; a border would
     containerise three sentences that are not objects. */
  .lc-tp__claim + .lc-tp__claim { border-left: 1px solid var(--lc-line); padding-left: 34px; }
  .lc-tp__claim { padding-right: 34px; }
}

.lc-tp__claimhead {
  font-family: var(--lc-display);
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--lc-ink);
  margin: 0 0 8px;
  font-weight: 700;
}
.lc-tp__claimsub {
  font-family: var(--lc-serif);
  font-size: .97rem;
  line-height: 1.6;
  color: var(--lc-muted);
  margin: 0;
  max-width: 34ch;
}

/* ------------------------------------------------------------------ tours */

.lc-tp__tours { padding: 46px 0 10px; }

.lc-tp__tour {
  display: grid;
  gap: 22px;
  padding-top: 34px;
  border-top: 1px solid var(--lc-line);
}
.lc-tp__tours .lc-tp__tour:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 860px) {
  /* Asymmetric on purpose: a 5/7 split reads as a composition, two equal halves
     read as a grid cell that happens to hold a picture. */
  .lc-tp__tour { grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }

  /* A tour with no hero photograph kept the 5-column gap and rendered 700px of nothing
     beside a 483px column of text — a hole shaped like the missing picture, which is a
     worse way to be missing a picture than simply not having the space. Without a photo
     the text takes the whole width and is capped at a reading measure instead. */
  .lc-tp__tour:not(:has(.lc-tp__tourshot)) {
    grid-template-columns: 1fr;
    max-width: 46rem;
  }
}

.lc-tp__tourshot { display: block; overflow: hidden; background: var(--lc-bg-soft); }
.lc-tp__tourshot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.lc-tp__tour:hover .lc-tp__tourshot img { transform: scale(1.03); }

.lc-tp__kicker {
  display: block;
  font-family: var(--lc-sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lc-accent);
  margin-bottom: 10px;
}

.lc-tp__tourname {
  font-family: var(--lc-display);
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.5rem);
  line-height: 1.12;
  margin: 0 0 14px;
}
.lc-tp__tourname a { color: var(--lc-ink); text-decoration: none; }
.lc-tp__tourname a:hover { color: var(--lc-accent); }

.lc-tp__tourintro {
  font-family: var(--lc-serif);
  font-size: 1.03rem;
  line-height: 1.62;
  color: #3a3a3a;
  margin: 0 0 14px;
  max-width: 52ch;
}

/* The one line that decides whether somebody sets off. It is set apart from the
   description because it is a different kind of statement: a constraint, not a
   description, and a reader scanning for it should not have to read prose to find it. */
.lc-tp__route {
  font-family: var(--lc-sans);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--lc-muted);
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 2px solid var(--lc-accent);
  max-width: 48ch;
}

.lc-tp__stoplist {
  font-family: var(--lc-serif);
  font-size: .97rem;
  line-height: 1.5;
  color: var(--lc-ink);
  margin: 0 0 22px;
  /* 1.15em fitted a single digit. At fifteen stops the marker is two digits wide and
     the leading 1 was cut off at 414px — "10." rendered as "0.". Sized for two. */
  padding-left: 1.9em;
}
.lc-tp__stoplist li { margin-bottom: 6px; }
.lc-tp__stoplist a { color: var(--lc-ink); text-decoration: none; border-bottom: 1px solid var(--lc-line); }
.lc-tp__stoplist a:hover { color: var(--lc-accent); border-bottom-color: currentColor; }

.lc-tp__go { margin: 0; }
.lc-tp__btn {
  display: inline-block;
  font-family: var(--lc-sans);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--lc-ink);
  padding: 14px 26px;
  text-decoration: none;
  transition: background .2s ease, transform .12s ease;
}
.lc-tp__btn:hover { background: var(--lc-accent); color: #fff; }
.lc-tp__btn:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ stops */

.lc-tp__stops { padding: 52px 0 12px; }

.lc-tp__stopgrid { display: grid; gap: 26px; }
@media (min-width: 620px)  { .lc-tp__stopgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lc-tp__stopgrid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.lc-tp__stopcard { display: block; text-decoration: none; color: inherit; }
.lc-tp__stopshot { display: block; overflow: hidden; background: var(--lc-bg-soft); }
.lc-tp__stopshot img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.lc-tp__stopcard:hover .lc-tp__stopshot img { transform: scale(1.04); }

.lc-tp__stopname {
  display: block;
  font-family: var(--lc-display);
  font-size: 1.06rem;
  line-height: 1.28;
  color: var(--lc-ink);
  margin: 12px 0 5px;
}
.lc-tp__stopcard:hover .lc-tp__stopname { color: var(--lc-accent); }

.lc-tp__stoplook {
  display: block;
  font-family: var(--lc-serif);
  font-size: .87rem;
  line-height: 1.5;
  color: var(--lc-muted);
}

/* A lore stop is marked here the same way it is marked on its own page, so the
   signal means one thing across the vertical rather than being decoration here. */
.lc-tp__stopcard.is-lore .lc-tp__stopshot { position: relative; }
.lc-tp__stopcard.is-lore .lc-tp__stopshot::after {
  content: "Oral tradition";
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: var(--lc-sans);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 24, 22, .82);
  padding: 6px 10px;
}

/* ------------------------------------------------------------------ credit */

.lc-tp__credit {
  font-family: var(--lc-sans);
  font-size: .72rem;
  color: var(--lc-muted);
  margin: 44px 0 0;
  padding: 16px 0 52px;
  border-top: 1px solid var(--lc-line);
}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  .lc-tp__tourshot img,
  .lc-tp__stopshot img,
  .lc-tp__btn { transition: none; }
  .lc-tp__tour:hover .lc-tp__tourshot img,
  .lc-tp__stopcard:hover .lc-tp__stopshot img { transform: none; }
}

/* ------------------------------------------------------------------ browse map */

.lc-tp__mapwrap { position: relative; margin: 0 0 18px; }
.lc-tp__map {
  height: 340px;
  background: var(--lc-bg-soft);
  border: 1px solid var(--lc-line);
}
@media (min-width: 760px) { .lc-tp__map { height: 460px; } }

/* Two-finger hint, shown only while a single finger is dragging the map. */
.lc-tp__mapwrap .lc-tm__gesture {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 500;
  font-family: var(--lc-sans);
  font-size: .72rem;
  color: #fff;
  background: rgba(20, 24, 22, .86);
  padding: 8px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.lc-tp__mapwrap .lc-tm__gesture.is-on { opacity: 1; }

/* A pin carries a glyph, not a number: on a browse map nothing is stop 3 of
   anything. The reader is looking at a town, not following a route. */
.lc-tm__pinwrap { background: none; border: 0; }
.lc-tm__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--lc-ink);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.lc-tm__pin--music    { background: #6b4f9e; }
.lc-tm__pin--maritime { background: #1f5d78; }
.lc-tm__pin--uprising { background: #8a3324; }
.lc-tm__pin--duel     { background: #3f4a3d; }
.lc-tm__pin--building { background: #6b5a3e; }
/* The city switch. Two towns a hundred miles apart cannot share an opening view, so
   this is how the second one is reachable at all. Rendered only where there are two,
   which is why it is built in JS from the pins rather than printed by the template. */
.lc-tm__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.lc-tm__city {
  font-family: var(--lc-sans);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lc-ink);
  background: transparent;
  border: 1px solid var(--lc-line);
  border-radius: 0;
  padding: 9px 15px;
  cursor: pointer;
}
.lc-tm__city:hover { border-color: var(--lc-ink); }
.lc-tm__city.is-on { background: var(--lc-ink); border-color: var(--lc-ink); color: #fff; }

.lc-tm__pin--press    { background: #4a4a52; }
.lc-tm__pin--siege    { background: #7a4a2b; }

/* Leaflet's own popup chrome is rounded and this site is not. */
.lc-tours-landing .leaflet-popup-content-wrapper,
.lc-tours-landing .leaflet-popup-tip { border-radius: 0; }
.lc-tours-landing .leaflet-popup-content { margin: 12px 14px; }

.lc-tm__popname {
  display: block;
  font-family: var(--lc-display);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--lc-ink);
  text-decoration: none;
}
.lc-tm__popname:hover { color: var(--lc-accent); }
.lc-tm__poplook {
  font-family: var(--lc-serif);
  font-size: .84rem;
  line-height: 1.45;
  color: var(--lc-muted);
  margin: 6px 0 10px;
}
.lc-tm__popgo { margin: 0; display: flex; gap: 8px; }
.lc-tm__poplisten,
.lc-tm__popdir {
  font-family: var(--lc-sans);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 12px;
}
.lc-tm__poplisten { background: var(--lc-ink); color: #fff; }
.lc-tm__poplisten:hover { background: var(--lc-accent); color: #fff; }
.lc-tm__popdir { border: 1px solid var(--lc-line); color: var(--lc-ink); }
.lc-tm__popdir:hover { border-color: var(--lc-ink); }

/* ------------------------------------------------------------------ near me */

.lc-tp__nearrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
}
.lc-tp__near {
  font-family: var(--lc-sans);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--lc-accent);
  border: 0;
  padding: 13px 22px;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease;
}
.lc-tp__near:hover:not(:disabled) { background: var(--lc-ink); }
.lc-tp__near:active:not(:disabled) { transform: translateY(1px); }
.lc-tp__near:disabled { opacity: .55; cursor: default; }

.lc-tp__nearstatus {
  font-family: var(--lc-serif);
  font-size: .9rem;
  color: var(--lc-muted);
}

.lc-tm__dist {
  display: block;
  font-family: var(--lc-sans);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lc-accent);
  margin-top: 7px;
}