/* =====================================================================
   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') 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 -------------------------------
   eyebrow → heading → 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; }

.kpick__eyebrow {
  margin: 0 0 max(5px, .5cqw);
  color: var(--kp-soft);
  font-size: max(8px, .58cqw);
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.kpick__title {
  margin: 0 0 max(10px, 1.2cqw);
  color: var(--kp-accent);
  font-size: max(18px, 2cqw);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  /* The reference keeps it on one line. */
  white-space: nowrap;
}

.kpick__tabs {
  display: flex;
  align-items: center;
  gap: max(12px, 1.35cqw);
  margin: 0 0 max(14px, 1.5cqw);
}
.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. */
  line-height: 1.58;
  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.8cqw);
  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. */
.kpick__pins { position: absolute; inset: 0; }

.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;
}
/* 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; }
}