/**
 * About: approach statement over the projects map.
 *
 * Values from Elementor #44: band #5D1520 with 1560 content and 56px padding
 * (20 on small screens), copy 24/400 white (18 small), map 500px tall.
 */

.deka-about-map__band {
  background: var(--deka-oxblood-700, #5d1520);
}

.deka-about-map__copy {
  width: min(100% - 2.5rem, var(--deka-container-wide));
  margin-inline: auto;
  padding: 3.5rem; /* 56 */
}

.deka-about-map__copy p {
  margin: 0 0 var(--deka-space-md);
  font-family: var(--deka-font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.5rem); /* 18 → 24 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.5;
  color: var(--deka-white);
}

.deka-about-map__copy p:last-child { margin-bottom: 0; }

/* --- Map -------------------------------------------------------------------- */

/* The map runs the full width of the screen, straight under the band and all the
   way down to the footer: no side margins, no rounded corners, and none of the
   96px under it or the footer's own 96px above (see the end of this file). */
.deka-about-map__frame {
  width: 100%;
}

.deka-about-map__canvas {
  height: 31.25rem; /* 500 */
  border-radius: 0;
  background: var(--deka-track); /* holds the space while tiles load */
}

/* Leaflet paints its own stacking contexts at z-index 400+; contain them so the
   header and menu overlay still sit above the map. */
.deka-about-map__canvas.leaflet-container { isolation: isolate; z-index: 0; }

.deka-about-map__canvas:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 2px;
}

/* --- Marker ----------------------------------------------------------------- */

/* Leaflet gives divIcons a white background by default. */
.deka-map__marker { background: none; border: 0; }

.deka-map__pin {
  display: grid;
  place-items: center;
  width: 2.75rem; /* 44 */
  height: 2.75rem;
  background: var(--deka-oxblood-700, #5d1520);
  /* Round on three corners, square on the fourth; rotating -45deg turns that
     corner into the point, giving the teardrop without an image. */
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
}

.deka-map__pin svg {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--deka-white);
  transform: rotate(45deg); /* upright inside the rotated pin */
}

/* --- Popup ------------------------------------------------------------------ */

.deka-map__name {
  display: block;
  font-family: var(--deka-font-display);
  font-size: 1rem;
  font-weight: var(--deka-weight-semibold);
  color: var(--deka-text);
}

.deka-map__place {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--deka-font-display);
  font-size: 0.875rem;
  color: var(--deka-text-muted);
}

.deka-map__link {
  display: inline-block;
  margin-top: var(--deka-space-2xs);
  font-family: var(--deka-font-display);
  font-size: 0.875rem;
  font-weight: var(--deka-weight-medium);
  color: var(--deka-oxblood-700, #5d1520);
}

/* --- Text fallback ----------------------------------------------------------- *
 * The map is a grid of tiles: no crawler and no screen reader can read a place
 * out of it. This list carries the same information in text, and is hidden only
 * once Leaflet has actually taken over the canvas.
 */

.deka-about-map__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deka-space-md);
  margin: var(--deka-space-md) 0 0;
  /* the frame is full width, so the fallback list takes the content column's edges */
  padding: 0 max(1.25rem, (100% - var(--deka-container-wide)) / 2) var(--deka-space-md);
  list-style: none;
  font-family: var(--deka-font-display);
  font-size: 0.875rem;
}

.deka-about-map__list a { color: var(--deka-text); }
.deka-about-map__list span { color: var(--deka-text-muted); margin-left: 0.375rem; }

/* Leaflet stamps `leaflet-container` on the canvas once it takes over, so this
   only hides the list when there is a working map to replace it. If the script
   fails, is blocked, or never runs, the list stays and the places are still
   readable. No JavaScript needed to do the swap. */
.deka-about-map__canvas.leaflet-container ~ .deka-about-map__list {
  display: none;
}

/* --- Responsive -------------------------------------------------------------- */

@media (max-width: 48rem) { /* 768 */
  .deka-about-map__copy { padding: var(--deka-space-md); }
  .deka-about-map__canvas { height: 22rem; }
}

/* Phones: back to 500px tall, the height of the live map. */
@media (max-width: 47.9375rem) { /* 767 */
  .deka-about-map__canvas { height: 31.25rem; /* 500 */ }
}

/* The map meets the footer — only when it closes the page, so no other page
   loses its footer gap. */
.deka-main:has(> .deka-about-map:last-child) ~ .deka-footer { margin-top: 0; }