/* =====================================================================
   PICK YOUR DESTINATION
   The supplied artwork is the whole band: cream on the left for the writing,
   the map drawn into the right. The frame holds the artwork's own proportions
   so that markers, which are placed in percentages of it, land where they
   should. The writing inside keeps to the site's column, so this row lines up
   with the sections above and below it.

   One place is chosen at a time. Choosing it turns its marker and its name to
   the site's Champagne; everything else stays in the map's own inks. The map
   itself is a drawing rather than a projection, so no district fills in — the
   red shape in the picture is painted there and marks Srinagar.
   ===================================================================== */
.kpick {
  --kp-ink: #2e4755;
  --kp-soft: rgba(46, 71, 85, .62);
  --kp-accent: #BD830D;
  --kp-region: rgba(46, 71, 85, .45);
  --kp-ease: cubic-bezier(.22, .61, .36, 1);
  /* Clear of the sections above and below, so neither the heading nor the
     closing link butts up against a neighbour. */
  padding: clamp(40px, 5vw, 96px) 0;
  color: var(--kp-ink);
}

/* The artwork's own aspect, so a percentage down the frame is the same
   percentage down the picture and the markers cannot drift. */
.kpick__frame {
  position: relative;
  aspect-ratio: 2343 / 831;
  background: #EEF0F3 url('../images/sections/pick-map-bg.jpg?v=2') center / 100% 100% no-repeat;
  /* Marker and label sizes are read off the frame, so the map scales whole. */
  container-type: inline-size;
}

/* The writing takes the same 69.4% column every other section sits on. */
.kpick__inner {
  position: absolute;
  inset: 0;
  padding-inline: clamp(18px, 4vw, 92px);
}
@media (min-width: 1100px) {
  .kpick__inner {
    max-width: 69.4%;
    margin-inline: auto;
    padding-inline: 0;
  }
}

.kpick__grid {
  display: grid;
  /* The artwork's landmass begins 54.25% across the frame and the column
     starts at 15.3%, so the names can run out to about 44.2% and still leave a
     clear band of cream between the list and the map. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr);
  align-items: center;
  height: 100%;
  gap: clamp(18px, 2.2vw, 42px);
}

/* ------------------------------- the copy -------------------------------
   heading → line → tabs → lists → link. Each step is sized and spaced off
   the frame, so the whole column keeps its rhythm as the section scales. */
.kpick__copy { min-width: 0; }

/* The heading is the section's one piece of display type: Playfair Display,
   the face the split banner's headlines already use, set upright in the
   site's ink over an italic line in its Champagne with a drawn swash beneath
   it. The italic is set a little larger than the upright line above it, so the
   eye lands on "Trip Your Way" rather than on "Plan Your"; it is sized in em
   against the title, so the two keep their proportion at every width and the
   swash, measured the same way, grows with it. The whole column has to clear a
   frame of fixed proportions, so the second line is paid for out of the leading
   of the list below. */
.kpick__title {
  /* room for the swash, which hangs below the second line's own box */
  margin: 0 0 max(14px, 1.25cqw);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: max(18px, 2cqw);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.005em;
}
/* Both lines are written out rather than left to wrap, so the break falls in
   the same place at every width and the block keeps its shape. Each hugs its
   own words, so the swash can be measured against them rather than against
   the column. */
.kpick__tline {
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
}
.kpick__tline--ink { color: var(--kp-ink); }
.kpick__tline--gold {
  position: relative;
  color: var(--kp-accent);
  font-style: italic;
  /* Larger than the line above. In em, so it tracks the title's own cqw
     sizing instead of pinning this line to a fixed width. */
  font-size: 1.15em;
  /* the italic leans out past its own box; this keeps the swash under it */
  padding-right: .1em;
}
/* Champagne is a metal, so the italic carries a little of its light: pale at
   the top, deep at the foot. Guarded, because where the text cannot be
   painted this way it must stay the solid colour set above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kpick__tline--gold {
    background: linear-gradient(180deg, #D9A62B 0%, #BD830D 58%, #9C6B08 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* The swash is drawn rather than ruled, so it tapers to a point the way a
   brush does, and is stretched to the width of the words above it. It is set
   low enough to pass under the feet of the descenders rather than through
   the middle of them, where it read as a strike-through. */
.kpick__swash {
  position: absolute;
  left: 0;
  bottom: -.34em;
  width: 100%;
  height: .3em;
  fill: var(--kp-accent);
  pointer-events: none;
}

/* The line under it: what the section is for, in plain words. It sits nearer
   the heading than the tabs sit to it, so the two read as one block. */
.kpick__lede {
  margin: 0 0 max(13px, 1.52cqw);
  color: var(--kp-soft);
  font-size: max(10px, .8cqw);
  font-weight: 500;
  line-height: 1.45;
}

.kpick__tabs {
  display: flex;
  align-items: center;
  gap: max(12px, 1.35cqw);
  margin: 0 0 max(12px, 1.25cqw);
}
.kpick__tab {
  font-size: max(11px, 1.08cqw);
  font-weight: 600;
  color: var(--kp-ink);
  white-space: nowrap;
}
/* The heading over the first column, marked as the reference marks it. */
.kpick__tab.is-on {
  color: var(--kp-accent);
  padding-bottom: 5px;
  border-bottom: 2px solid var(--kp-accent);
}
.kpick__bar {
  width: 1px;
  height: 1.1em;
  background: rgba(46, 71, 85, .28);
}

/* Two columns, never three: thirteen names to a column, as the two headings
   read. */
.kpick__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(12px, 2cqw);
}
.kpick__list { margin: 0; padding: 0; list-style: none; }

.kpick__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 1px 0;
  border: 0;
  background: none;
  color: var(--kp-ink);
  font: inherit;
  font-size: max(10px, .92cqw);
  font-weight: 500;
  /* Thirteen rows have to clear the frame, which holds the artwork's own
     proportions — so the rhythm is set here rather than left to chance. The
     heading above now runs to two lines, and the rows give up a little of
     their own leading to pay for it, so the column still sits clear of the
     top and bottom edges rather than crowding them. */
  line-height: 1.42;
  text-align: left;
  /* One name to a line — "Mughal Gardens" breaking across two throws the two
     columns out of step with each other. */
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s var(--kp-ease);
}
.kpick__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kp-accent);
  transition: transform .2s var(--kp-ease);
}
.kpick__item:hover { color: var(--kp-accent); }
.kpick__item:hover .kpick__dot { transform: scale(1.3); }
.kpick__item.is-on { color: var(--kp-accent); font-weight: 700; }
.kpick__item.is-on .kpick__dot { transform: scale(1.45); }
.kpick__item:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 3px; border-radius: 3px; }

.kpick__all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: max(14px, 1.35cqw);
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--kp-accent);
  color: var(--kp-accent);
  font-size: max(10px, .95cqw);
  font-weight: 600;
  text-decoration: none;
}
.kpick__all svg { width: 18px; height: 18px; transition: transform .22s var(--kp-ease); }
.kpick__all:hover svg { transform: translateX(4px); }

/* ------------------------------ the markers ------------------------------
   Every marker is placed in percentages of the frame, which holds the
   artwork's proportions — so the dot stays on its spot at any width. The dot
   sits exactly on the point; the name runs out to whichever side has room. */
/* The pin layer covers the whole frame, so it must let clicks fall through to
   the list beneath it; only the pins themselves take the pointer back. */
.kpick__pins { position: absolute; inset: 0; pointer-events: none; }

.kpin {
  position: absolute;
  left: var(--px);
  top: var(--py);
  display: flex;
  align-items: center;
  gap: max(4px, .34cqw);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
/* The dot is the anchor: to its right by default, and on the right-hand end
   of the box when the name runs left. */
.kpin--r { transform: translateY(-50%); }
.kpin--l { transform: translate(-100%, -50%); flex-direction: row-reverse; }

.kpin__dot {
  flex: none;
  width: max(5px, .42cqw);
  height: max(5px, .42cqw);
  border-radius: 50%;
  background: var(--kp-accent);
  transition: transform .25s var(--kp-ease), background-color .25s var(--kp-ease);
}
.kpin__lbl {
  color: var(--kp-ink);
  font-size: max(9px, .72cqw);
  font-weight: 500;
  line-height: 1;
  /* A breath of the ground behind the letters, so a name crossing a border
     still reads. Invisible where it is already on white. */
  text-shadow: 0 0 3px #FFFFFF, 0 0 7px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .8);
  transition: color .25s var(--kp-ease), opacity .22s var(--kp-ease);
}

/* Context: on the map, but not for sale. */
.kpin--ctx { pointer-events: none; }
.kpin--ctx .kpin__dot { background: var(--kp-ink); opacity: .62; }
.kpin--ctx .kpin__lbl { color: var(--kp-soft); }

/* The quiet ones — the Srinagar cluster and the smaller valleys. Ten of these
   sit within a few kilometres of each other, so even bare dots piled into a
   smudge over the city. They are off the map altogether until their name is
   chosen from the list, and then only that one arrives. They take no pointer
   while hidden, so nothing can be hovered into view by accident. */
.kpin.is-quiet {
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s var(--kp-ease);
}
.kpin.is-quiet.is-on {
  pointer-events: auto;
  opacity: 1;
}

.kpin:hover .kpin__dot { transform: scale(1.35); background: var(--kp-accent); }
.kpin:hover .kpin__lbl { color: var(--kp-accent); }
.kpin:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 4px; border-radius: 4px; }

/* Chosen: a larger dot with a halo, and the name in the accent. */
.kpin.is-on { z-index: 3; }
.kpin.is-on .kpin__dot {
  background: var(--kp-accent);
  transform: scale(1.5);
  box-shadow: 0 0 0 max(3px, .3cqw) rgba(189, 131, 13, .26);
}
.kpin.is-on .kpin__lbl { color: var(--kp-accent); font-weight: 700; opacity: 1; }

.kpick__region {
  position: absolute;
  left: var(--px);
  top: var(--py);
  transform: translate(-50%, -50%);
  color: var(--kp-region);
  font-size: max(10px, .82cqw);
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
}

.kpick__hint {
  position: absolute;
  left: 54.27%;
  bottom: 2.5%;
  margin: 0;
  color: var(--kp-soft);
  font-size: max(9px, .7cqw);
}
.kpick__hint b { color: var(--kp-accent); font-weight: 600; }

/* ------------------------------ responsive ------------------------------
   Desktop only. On phones and tablets — everything below the site's wide
   layout at 1100px, the same line the sidebar uses — the section is left out
   entirely: without the map it was a long bare list. Being display:none, its
   map artwork is not fetched on those screens either. */
@media (max-width: 1099px) {
  .kpick { display: none; }
}

/* =====================================================================
   ADDED — the selected pin's radar, and the destination detail popup.
   All of this is additive: nothing above changes. New rules are namespaced
   under .kpx / .kpin.is-on so they cannot reach the existing markup.
   ===================================================================== */

/* ------------------------------ radar pulse ------------------------------
   A soft "here" ring that breathes out from the chosen pin — the touch-me
   signal, kept quiet: one ring, slow, in the map's own gold.

   Every place is just its name on the map; only the chosen one shows a marker
   at all — its dot, with the radar. The dot keeps its layout space while
   hidden, so a name never shifts when it is picked. */
.kpin:not(.is-on) .kpin__dot { visibility: hidden; }
.kpin.is-on .kpin__dot { position: relative; }
.kpin.is-on .kpin__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 0 max(2px, .16cqw) rgba(189, 131, 13, .55);
  animation: kpx-radar 1.9s var(--kp-ease) infinite;
  pointer-events: none;
}
@keyframes kpx-radar {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .85; }
  70%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kpin.is-on .kpin__dot::after { animation: none; }
}

/* ------------------------------ locating ---------------------------------
   A pick is two beats, not one. Before the popup comes over the top of the
   map, the map itself answers: the chosen place swells where it sits and
   sends two rings out across the valley, so the eye is taken to the spot
   first and knows, when the popup lands, which place it is looking at.

   js/home-pick.js holds .is-locating on the pin for two ring beats (700ms
   each) and opens the popup as it takes the class off — change the beat here
   and change LOCATE_MS there to match.

   These rules sit AFTER the settled radar above and carry the same weight, so
   source order is what lets them take the ::after over for the louder ring.
   The rings are drawn with a border and grown by width/height rather than by
   scale, so the circle stays a hairline all the way out instead of thickening
   into a blob the way a scaled box-shadow does. */
.kpin.is-locating { z-index: 4; }

/* The centre: bigger than the settled dot, breathing once over the two beats
   so it never goes flat while the rings travel. */
.kpin.is-locating .kpin__dot {
  position: relative; /* the rings below hang off it */
  visibility: visible;
  transform: scale(1.7);
  background: var(--kp-accent);
  animation: kpx-locate-core 700ms var(--kp-ease) infinite alternate;
}
@keyframes kpx-locate-core {
  from { box-shadow: 0 0 0 max(3px, .24cqw) rgba(189, 131, 13, .30), 0 0 max(7px, .6cqw) rgba(189, 131, 13, .40); }
  to   { box-shadow: 0 0 0 max(6px, .50cqw) rgba(189, 131, 13, .16), 0 0 max(14px, 1.2cqw) rgba(189, 131, 13, .60); }
}

/* Two rings, half a beat apart, so there is always one on its way out. */
.kpin.is-locating .kpin__dot::before,
.kpin.is-locating .kpin__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: max(1.5px, .11cqw) solid var(--kp-accent);
  border-radius: 50%;
  box-shadow: none;
  transform: translate(-50%, -50%);
  animation: kpx-locate-ring 700ms var(--kp-ease) infinite;
  pointer-events: none;
}
.kpin.is-locating .kpin__dot::after { animation-delay: 350ms; }
/* Out to roughly the width of the name itself — far enough that the ring is
   plainly a circle drawn round the place, not a thicker dot. */
@keyframes kpx-locate-ring {
  0%   { width: 100%; height: 100%; opacity: .95; }
  100% { width: 650%; height: 650%; opacity: 0; }
}

/* The name is held in the accent for the whole beat, so the list and the map
   are plainly naming the same place while the visitor waits. */
.kpin.is-locating .kpin__lbl { color: var(--kp-accent); font-weight: 700; opacity: 1; }

/* Reduced motion: the place is still marked out, with one still ring and no
   travel — and js/home-pick.js cuts the wait to a beat so the popup is not
   held back for an animation that is not playing. */
@media (prefers-reduced-motion: reduce) {
  .kpin.is-locating .kpin__dot { animation: none; }
  .kpin.is-locating .kpin__dot::before { display: none; }
  .kpin.is-locating .kpin__dot::after {
    animation: none;
    animation-delay: 0s;
    width: 300%;
    height: 300%;
    opacity: .55;
  }
}

/* -------------------------------- the popup ------------------------------
   A centred lightbox over the band. The section owns the site's inks, so the
   popup inherits --kp-accent / --kp-ink and reads as the same design. Its own
   sizing is in rem, since it sits outside the map's container context. */
html.kpx-locked { overflow: hidden; }

.kpx {
  /* self-contained tokens: the popup is portalled to <body> at runtime, so it
     can no longer inherit them from .kpick — it carries its own copy. */
  --kp-ink: #2e4755;
  --kp-soft: rgba(46, 71, 85, .62);
  --kp-accent: #BD830D;
  --kp-ease: cubic-bezier(.22, .61, .36, 1);
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 48px);
}
.kpx[hidden] { display: none; }

.kpx__scrim {
  position: absolute;
  inset: 0;
  background: rgba(24, 34, 41, .52);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s var(--kp-ease);
}
.kpx.is-open .kpx__scrim { opacity: 1; }

.kpx__dialog {
  position: relative;
  /* room for two columns of rows without the names wrapping to three lines */
  width: min(1040px, 100%);
  max-height: min(88vh, 860px);
  /* The dialog itself does NOT scroll — the open panel inside it does. When
     the dialog was the scroller, the ✕ (position:absolute against it) slid
     away with the content and there was no way out of a long list but the
     scrim or Escape. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(24, 34, 41, .34), 0 2px 0 rgba(255, 255, 255, .6) inset;
  color: var(--kp-ink);
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .3s var(--kp-ease), transform .3s var(--kp-ease);
  -webkit-overflow-scrolling: touch;
}
.kpx.is-open .kpx__dialog { opacity: 1; transform: none; }
/* shown while a place's panel is on its way from the server */
.kpx__wait { margin: 0; padding: 64px 24px; text-align: center; color: var(--kp-ink); font-size: 1rem; }
.kpx__wait[hidden] { display: none; }

.kpx__x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--kp-ink);
  box-shadow: 0 4px 14px rgba(24, 34, 41, .22);
  cursor: pointer;
  transition: transform .2s var(--kp-ease), background-color .2s var(--kp-ease);
}
.kpx__x svg { width: 20px; height: 20px; }
.kpx__x:hover { transform: rotate(90deg); background: #fff; }
.kpx__x:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; }

/* The open panel is the scroller, so the ✕ above it never moves. min-height:0
   lets a flex child actually shrink and scroll instead of growing the dialog. */
.kpx__panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.kpx__panel[hidden] { display: none; }

/* hero — the place, named over its own photograph. The picture is resolved
   in the blade: the place's own featured image, then its area's, then the
   site's stock shot; it is never the same houseboat for everything. */
.kpx__hero {
  position: relative;
  min-height: clamp(210px, 26vh, 280px);
  padding: clamp(20px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  color: #FFFFFF;
}
.kpx__hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kpx__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 34, 41, .1) 0%, rgba(24, 34, 41, .28) 42%, rgba(24, 34, 41, .82) 100%);
}
.kpx__intro { position: relative; }
/* The invitation, in capitals and tracked like the section's own heading, so
   the two read as one voice. Long place names carry it onto a second line;
   the hero grows to hold it. */
.kpx__name {
  margin: 0;
  font-size: clamp(20px, 2.9vw, 30px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Wide enough to hold the whole line at the dialog's own width — at 60ch it
   broke with "explore." stranded on a line of its own. */
.kpx__blurb {
  position: relative;
  margin: 12px 0 0;
  max-width: 42em;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
  text-wrap: pretty;
}
.kpx__count {
  position: absolute;
  top: clamp(18px, 3vw, 30px);
  left: clamp(20px, 3vw, 34px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 12px;
  font-weight: 600;
}
.kpx__count svg { width: 15px; height: 15px; }

/* ------------------------------ the jump rail ---------------------------
   The dialog scrolls through four groups, so their headings are also a row
   of links at the top. It sticks while the body moves under it. */
.kpx__rail {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px clamp(18px, 2.6vw, 26px);
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(46, 71, 85, .1);
}
.kpx__jump {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(46, 71, 85, .16);
  border-radius: 999px;
  background: #fff;
  color: var(--kp-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s var(--kp-ease), color .2s var(--kp-ease), background-color .2s var(--kp-ease);
}
.kpx__jump svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.kpx__jump:hover { border-color: var(--kp-accent); color: var(--kp-accent); }
.kpx__jump:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; }
/* the count sitting on the end of each jump link */
.kpx__jn {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(189, 131, 13, .14);
  color: var(--kp-accent);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* ------------------------------- the groups -----------------------------
   Places to visit, then stays, then cars, then things to do — stacked down
   the dialog, each one only drawn when the CMS has something to put in it. */
.kpx__group {
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.6vw, 26px) 0;
  /* clears the sticky rail when a jump link scrolls this into view */
  scroll-margin-top: 58px;
}
.kpx__group + .kpx__group { border-top: 1px solid rgba(46, 71, 85, .08); margin-top: clamp(14px, 2vw, 20px); }

.kpx__ghead {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.kpx__gicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(189, 131, 13, .13);
  color: var(--kp-accent);
}
.kpx__gicon svg { width: 18px; height: 18px; }
.kpx__gtxt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kpx__gtitle { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--kp-ink); }
.kpx__glede { font-size: 12px; line-height: 1.35; color: var(--kp-soft); }
.kpx__gall {
  flex: none;
  margin-left: auto;
  color: var(--kp-accent);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.kpx__gall:hover { text-decoration: underline; }
.kpx__gall:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; border-radius: 4px; }

/* The sub-headings inside "Places to visit" — the lakes, the gardens, the
   heritage, the trekking. Only that group is divided; the others pass one
   unnamed sub-group through the same loop and print no heading. */
.kpx__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 0 8px;
  color: var(--kp-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kpx__sub::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(46, 71, 85, .12);
}
.kpx__sn {
  order: 1;                 /* after the rule, on the right-hand end */
  color: var(--kp-accent);
  font-size: 11px;
  letter-spacing: 0;
}
/* the first sub-heading sits right under the group header, so it needs no
   extra air above it */
.kpx__rows + .kpx__sub { margin-top: 18px; }
.kpx__ghead + .kpx__sub { margin-top: 2px; }

/* --------------------------------- a row --------------------------------
   The site's own list language, the one the header's menus use: a round
   photograph, the name, a quiet line under it, and the action on the end. */
.kpx__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kpr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  transition: background-color .18s var(--kp-ease);
}
.kpr:hover { background: rgba(46, 71, 85, .045); }
.kpr__img {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(46, 71, 85, .07);
}
.kpr__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--kp-ease);
}
.kpr:hover .kpr__img img { transform: scale(1.08); }

/* Most of the listed places have no photograph in the CMS. Rather than
   repeating the area's own picture down forty rows, they wear the line
   drawing for what they are — a lake, a garden, a shrine, a fort, a trek.
   The same device the header's menus use for their iconned entries. */
.kpr__img--icon {
  background: rgba(189, 131, 13, .13);
  color: var(--kp-accent);
}
.kpr__img--icon svg { width: 22px; height: 22px; }
.kpr:hover .kpr__img--icon { background: rgba(189, 131, 13, .22); }

.kpr__txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.kpr__name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kp-ink);
  /* one long hotel name cannot push the row's action off the end */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpr__sub {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--kp-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpr__price { color: var(--kp-accent); font-weight: 700; white-space: nowrap; }

.kpr__more {
  flex: none;
  color: var(--kp-soft);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s var(--kp-ease);
}
.kpr__more:hover { color: var(--kp-accent); }
.kpr__more:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; border-radius: 4px; }

/* Add to My Trip — data-trip-add, so the site's one cart handles it and the
   same thing added here and from its own page is a single line in the trip.
   my-trip.js puts .is-in on the button and writes its aria-label. */
.kpr__act { flex: none; display: block; }
.kpr__add {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid var(--kp-accent);
  border-radius: 50%;
  background: var(--kp-accent);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--kp-ease), color .2s var(--kp-ease), transform .12s var(--kp-ease);
}
.kpr__add svg { width: 17px; height: 17px; }
.kpr__add:hover { background: #a5720b; border-color: #a5720b; }
.kpr__add:active { transform: scale(.92); }
.kpr__add:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 3px; }
.kpr__i-in { display: none; }
/* in the trip: quiet, ticked, and a second press takes it out again */
.kpr__add.is-in {
  background: rgba(189, 131, 13, .14);
  color: var(--kp-accent);
}
.kpr__add.is-in:hover { background: rgba(189, 131, 13, .24); }
.kpr__add.is-in .kpr__i-add { display: none; }
.kpr__add.is-in .kpr__i-in { display: block; }
/* the 600ms confirmation nudge my-trip.js adds to the button's parent */
.kpr__act.is-added .kpr__add { animation: kpx-pop .5s var(--kp-ease); }
@keyframes kpx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* footer actions — everything ticked above is already in the trip, so the
   first of these is the way on to pricing and booking it. */
.kpx__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(16px, 2.2vw, 22px);
  padding: clamp(14px, 2vw, 18px) clamp(18px, 2.6vw, 26px) clamp(16px, 2.2vw, 22px);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(46, 71, 85, .1);
}
.kpx-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1.5px solid rgba(46, 71, 85, .28);
  border-radius: 11px;
  color: var(--kp-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s var(--kp-ease), color .2s var(--kp-ease), background-color .2s var(--kp-ease);
}
.kpx-btn svg { width: 17px; height: 17px; transition: transform .2s var(--kp-ease); }
.kpx-btn:hover { border-color: var(--kp-accent); color: var(--kp-accent); }
.kpx-btn:hover svg { transform: translateX(3px); }
.kpx-btn:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; }
.kpx-btn--gold {
  background: var(--kp-accent);
  border-color: var(--kp-accent);
  color: #fff;
}
.kpx-btn--gold:hover { background: #a5720b; border-color: #a5720b; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .kpx__scrim, .kpx__dialog, .kpr, .kpr__img img, .kpr__add, .kpx__jump, .kpx-btn svg { transition: none; }
  .kpr__act.is-added .kpr__add { animation: none; }
}

/* narrow / short screens — the popup can still be summoned from wider
   embeds and stays usable: one column, comfortable tap targets. */
@media (max-width: 860px) {
  .kpx__rows { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kpx__ghead { flex-wrap: wrap; }
  .kpx__gall { margin-left: 45px; }
  .kpx__foot { flex-direction: column; }
  .kpx-btn { justify-content: center; }
  .kpr__more { display: none; }   /* the row itself still links from its name */
}