/* Discover Durrës: driving-time map on the home page.
   Loaded only on pages that show the map. Colours come from the site's own variables, so light and dark
   follow the site. Everything is scoped to .dmap so it can't touch the rest of the page. */

.dmap {
  --dm-card: var(--paper);
  --dm-hub: var(--ink); --dm-his: #B08A2E; --dm-coast: #3A5E2D;
  --dm-sel: rgba(168, 0, 8, .08); --dm-hover: #C8101A;
  --dm-tiles: saturate(.45) sepia(.35) brightness(1.04) contrast(.92);
  --dm-top: calc(64px + env(safe-area-inset-top, 0px));   /* the header once it has shrunk */
  display: grid;
  grid-template-columns: minmax(290px, 390px) minmax(0, 1fr);
  grid-template-areas: "head map" "list map" "note map";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(28px, 4vw, 56px);
}
:root[data-theme="dark"] .dmap {
  --dm-his: #D2AE55; --dm-coast: #7FA86B;
  --dm-sel: rgba(240, 106, 110, .14); --dm-hover: #F48A8D;
  --dm-tiles: invert(1) hue-rotate(180deg) brightness(.85) saturate(.5) sepia(.25);
}

/* Left column: title, places, note. The map stays in view beside it while the list scrolls. */
.dmap__head { grid-area: head; padding-bottom: 28px; }
.dmap__title { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.02; letter-spacing: -.03em; margin: 0; }
.dmap__head .lede { margin-top: 1rem; font-size: 1.05rem; }
.dmap__body { display: contents; }
.dmap__list { grid-area: list; }
.dmap__note { grid-area: note; margin: 28px 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

.dmap__group + .dmap__group { margin-top: 22px; }
.dmap__gh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 .78rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.dmap__gh i { width: 10px; height: 10px; border-radius: 999px; background: var(--c); flex: none; }
.dmap__group[data-g="hub"] { --c: var(--dm-hub); }
.dmap__group[data-g="his"] { --c: var(--dm-his); }
.dmap__group[data-g="coast"] { --c: var(--dm-coast); }
.dmap__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dmap__group button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; transition: background .15s;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 6px 14px 6px 6px; border-radius: var(--r);
}
.dmap__group button:hover { background: var(--dm-card); }
.dmap__group button:focus-visible { outline: 2px solid var(--em); outline-offset: 2px; }
.dmap__group button.active { background: var(--dm-sel); }
.dmap__emo { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--dm-card); border: 2.5px solid var(--c); box-sizing: border-box; }
.dmap__name { font-size: 1.03rem; font-weight: 600; line-height: 1.2; }
.dmap__name small { display: block; font-size: .87rem; font-weight: 400; color: var(--ink-2); }
.dmap__min { font-size: 1rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dmap__group button.active .dmap__min { color: var(--em); }

/* Right column: the map */
.dmap__map { grid-area: map; position: sticky; top: calc(var(--dm-top) + 14px); align-self: start; display: flex; flex-direction: column; height: clamp(520px, calc(100svh - 64px - 48px), 780px); z-index: 2; }
.dmap__frame { position: relative; flex: 1; min-height: 0; isolation: isolate; }
.dmap__canvas { position: absolute; inset: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--cream); border: 1px solid var(--line); box-shadow: var(--shadow-sm); box-sizing: border-box; }
.dmap__canvas:focus-visible { outline: 2px solid var(--em); outline-offset: 3px; }
.dmap__fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.dmap__fallback svg { width: 34px; height: 34px; color: var(--em); }
.dmap__fallback:hover span { text-decoration: underline; }
.dmap__hint { display: none; margin: 8px 0 0; text-align: center; font-size: .8rem; color: var(--ink-2); }

.dmap__views { position: absolute; top: 16px; right: 16px; z-index: 500; display: flex; gap: 4px; padding: 5px; border-radius: var(--r); background: var(--dm-card); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.dmap__views[hidden], .dmap__gbtn[hidden] { display: none; }
.dmap__views button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: var(--r); font: 600 .95rem/1.2 var(--font-body); color: var(--ink); transition: background .15s; }
.dmap__views button:hover { background: var(--dm-sel); }
.dmap__views button[aria-pressed="true"] { background: var(--em); color: var(--dm-card); }
.dmap__views button[aria-pressed="true"]:hover { background: var(--dm-hover); }
.dmap__views button:focus-visible { outline: 2px solid var(--em); outline-offset: 2px; }

.dmap__gbtn, .dmap .dm-gbtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: var(--r); background: var(--em); color: var(--dm-card); font: 600 .93rem/1.2 var(--font-body); text-decoration: none; box-shadow: var(--shadow-sm); transition: background .15s; }
.dmap__gbtn { position: absolute; left: 16px; bottom: 16px; z-index: 500; max-width: calc(100% - 96px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmap__gbtn:hover, .dmap .dm-gbtn:hover { background: var(--dm-hover); color: var(--dm-card); }
.dmap__gbtn:focus-visible, .dmap .dm-gbtn:focus-visible { outline: 2px solid var(--em); outline-offset: 2px; }
.dmap__gbtn svg, .dm-gbtn svg { flex: none; width: 16px; height: 16px; stroke-width: 2.5; }

/* Leaflet parts, restyled (Leaflet's stylesheet is inserted before this one, so these win) */
.dmap .leaflet-container { font-family: var(--font-body); background: var(--cream); }
.dmap .leaflet-tile-pane { filter: var(--dm-tiles); }
/* the site sizes every <svg> to 1em; Leaflet draws all routes in one big SVG whose size it sets itself */
.dmap .leaflet-pane > svg { width: auto; height: auto; }
.dmap .leaflet-container a { color: var(--em); }
.dmap .dm-pin { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; background: var(--dm-card); border: 3px solid; box-shadow: var(--shadow-sm); box-sizing: border-box; transition: transform .15s; }
.dmap .dm-pin.sel { transform: scale(1.2); }
.dmap .leaflet-marker-icon:focus-visible .dm-pin { outline: 2px solid var(--em); outline-offset: 3px; }
.dmap .dm-camp { display: flex; align-items: center; gap: 6px; transform: translate(-15px, -50%); width: max-content; }
.dmap .dm-camp i { width: 30px; height: 30px; border-radius: 999px; background: var(--em); color: var(--dm-card); display: flex; align-items: center; justify-content: center; border: 2px solid var(--dm-card); box-shadow: 0 6px 14px -6px rgba(28, 20, 10, .5); box-sizing: border-box; flex: none; }
.dmap .dm-camp svg { width: 15px; height: 15px; stroke-width: 2.75; }
.dmap .dm-camp span { padding: 3px 9px; border-radius: var(--r); background: var(--dm-card); color: var(--em); font: 600 .82rem/1.3 var(--font-body); white-space: nowrap; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.dmap .is-narrow .dm-camp { flex-direction: column; gap: 4px; transform: translate(-50%, -15px); }
.dmap .dm-bubble { transform: translate(-50%, -50%); width: max-content; display: flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: var(--r); background: var(--dm-card); box-shadow: 0 10px 26px -10px rgba(28, 20, 10, .4); border: 1px solid var(--line); font: 700 1rem/1.2 var(--font-body); color: var(--em); white-space: nowrap; pointer-events: none; }
.dmap .dm-bubble span { font-weight: 500; color: var(--ink-2); font-size: .87rem; }
.dmap .is-narrow .dm-bubble span { display: none; }   /* the place name is already in the list and on the button */
.dmap .leaflet-tooltip.dm-lbl { background: var(--dm-card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 3px 10px; font: 600 .87rem/1.3 var(--font-body); color: var(--ink); }
.dmap .leaflet-tooltip.dm-lbl::before { display: none; }
.dmap .is-far .leaflet-tooltip.dm-lbl { display: none; }
.dmap .leaflet-popup-content-wrapper { border-radius: var(--r); background: var(--dm-card); color: var(--ink); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.dmap .leaflet-popup-tip { background: var(--dm-card); }
.dmap .leaflet-popup-content { font-family: var(--font-body); margin: 12px 16px; }
.dmap .leaflet-container a.leaflet-popup-close-button { color: var(--ink-2); }
.dmap .dm-pop b { display: block; font-size: 1.07rem; }
.dmap .dm-pop span { display: block; font-size: .93rem; color: var(--ink-2); }
.dmap .dm-pop .dm-gbtn { margin-top: 10px; padding: 8px 14px 8px 10px; font-size: .87rem; }
.dmap .leaflet-container a.dm-gbtn { color: var(--dm-card); }
.dmap .leaflet-control-zoom.leaflet-bar { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.dmap .leaflet-control-zoom.leaflet-bar a { background: var(--dm-card); color: var(--ink); border-bottom-color: var(--line); }
.dmap .leaflet-control-zoom.leaflet-bar a:hover { background: var(--dm-sel); }
.dmap .leaflet-control-attribution { background: color-mix(in srgb, var(--dm-card) 85%, transparent); color: var(--ink-2); border-radius: var(--r) 0 0 0; }
.dmap .leaflet-control-attribution a { color: var(--ink-2); }

html.a11y-contrast .dmap__canvas, html.a11y-contrast .dmap__views { box-shadow: 0 0 0 2px var(--ink); }

/* Tablet and phone: one column. The map stays pinned under the header while the list scrolls beneath it,
   so tapping a place always shows its route. */
@media (max-width: 999px) {
  .dmap, .dmap__body { display: block; }
  .dmap__head { padding-bottom: 18px; }
  .dmap__map { top: var(--dm-top); height: clamp(280px, 46svh, 440px); margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter) 12px; background: var(--cream); }
  .dmap__list { padding-top: 8px; }
  .dmap__views { top: 26px; right: calc(var(--gutter) + 10px); }
  .dmap__gbtn { left: calc(var(--gutter) + 10px); bottom: calc(12px + 10px); }
}
@media (hover: none) and (pointer: coarse) { .dmap__hint { display: block; } }
@media (max-width: 999px) and (max-height: 560px) { .dmap__map { position: static; height: 300px; } }
@media (max-width: 520px) {
  .dmap__views button { padding: 7px 10px; font-size: .88rem; }
  .dmap__gbtn { font-size: .85rem; white-space: normal; text-align: left; line-height: 1.25; padding: 8px 14px 8px 10px; }
}