/* ===========================================================================
   The community map

   The map and the form that adds to it are one page. Dropping a pin is one
   act — you point at where you are and you say what you grew — and splitting
   the pointing from the saying would make it two.

   The map is drawn rather than tiled. A real slippy map means OpenStreetMap
   requests on every load and a different visual language from everything
   else here, to show a shape nobody is navigating by. See
   views/partials/ahmedabad.njk.
   =========================================================================== */

/* One line, the way the mockup sets it. No measure on it: the sentence is the
   headline and breaking it in half halfway through "growing what" loses the
   question it is asking. It wraps on a phone, where it has to. */
.citymap__title {
  font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: .9rem 0 1.1rem;
  max-width: none;
  text-wrap: balance;
}
.citymap__lede {
  font-size: clamp(1.02rem, .98rem + .26vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 0;
}

.citymap {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 3.2rem);
}

/* --- the map ------------------------------------------------------------- */
/* Leaflet and OpenStreetMap, the same as the directory, and greyed back by the
   rule already in ekatra.css so the pins are the only colour on it. */

.citymap__card {
  position: relative;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-sunk);
}
.citymap__canvas { height: clamp(24rem, 62vh, 40rem); width: 100%; }
.citymap__card[hidden] { display: none; }

.citymap__foot {
  margin: 0;
  padding: .6rem clamp(.8rem, 2vw, 1.1rem);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-faint);
  max-width: none;
}

/* --- pins ---------------------------------------------------------------- */
/* Drawn by Leaflet as divIcons rather than its default teardrop, which is a
   stock graphic and the wrong weight beside everything else here. */

.cmpin-marker {
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
  transition: transform .2s ease;
}
.cmpin-marker:hover { transform: scale(1.3); }
.cmpin-marker--draft {
  background: var(--paper);
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 97, 68, .18);
}

.leaflet-popup-content { font-size: var(--step--1); margin: .6rem .8rem; }

/* --- the form ------------------------------------------------------------ */

.addplant__hint {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin: -.9rem 0 1.4rem;
  max-width: none;
}
.addplant__hint.is-set { color: var(--accent); }

.addplant__note {
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 1.1rem 0 0;
  max-width: none;
}


@media (max-width: 58rem) {
  .citymap { grid-template-columns: 1fr; }
}

/* Said in words when no tile server answers, instead of leaving a grey box
   that reads as a broken page. */
.map__nota {
  margin: .7rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-muted);
}