/* Generated place, municipality and index pages (scripts/site/lib/render.mjs).
   Loaded after styles.css; every class here is pp- prefixed. Design B,
   docs/superpowers/specs/2026-10-15-place-pages-design-b.md.
   /assets/** is served immutable for a year (firebase.json): if ridges.svg is
   ever redrawn, give it a new file name. */

.pp-main { padding-bottom: 56px; }
.pp-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* ---------- Horizon band ---------- */
.pp-band { position: relative; overflow: hidden; padding: 20px 0 76px;
  background: url(/assets/ridges.svg) bottom / 100% 70px no-repeat,
    linear-gradient(180deg, #F3D9C8 0%, #F7E7DC 38%, #DCE6EF 70%); }
.pp-band::before { content: ""; position: absolute; left: 58%; top: 26px; width: 46px; height: 46px;
  border-radius: 50%; background: var(--terracotta); opacity: .9; }
.pp-band h1 { position: relative; margin: 48px 0 0; font-size: 1.85rem; letter-spacing: -.02em;
  overflow-wrap: anywhere; }
.pp-crumb { position: relative; }
.pp-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px;
  font-size: .82rem; color: var(--muted); }
.pp-crumb a { color: var(--teal); text-decoration: none; }
.pp-crumb a:hover { text-decoration: underline; }

/* ---------- Pills, sitting on the ridge ---------- */
.pp-pills { list-style: none; margin: -46px 0 0; padding: 0; position: relative; display: flex;
  flex-wrap: wrap; gap: 6px; }
.pp-pills li { background: var(--surface); border: 1px solid var(--divider); border-radius: 999px;
  padding: 6px 12px; font-size: .82rem; font-weight: 650; color: var(--navy);
  box-shadow: 0 2px 6px rgba(16, 32, 58, .06); overflow-wrap: anywhere; }
.pp-pills a { color: var(--teal); text-decoration: none; }

/* ---------- Hero photo, above the pills on the ridge ---------- */
.pp-photo { position: relative; margin: -46px 0 14px; aspect-ratio: 3 / 2; overflow: hidden;
  border: 1px solid var(--divider); border-radius: 18px; background: var(--divider); }
.pp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-photo-slot:empty { display: none; }
.pp-photo + .pp-pills { margin-top: 0; }

/* ---------- Mini map (static tiles, pin tip on the place) ---------- */
.pp-map { position: relative; display: block; height: 190px; margin-top: 16px; overflow: hidden;
  border: 1px solid var(--divider); border-radius: 18px; background: var(--divider); }
.pp-map:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pp-map-tiles { position: absolute; width: 1280px; height: 512px; }
.pp-map-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; }
/* A 26 px square with one sharp corner, turned 45 degrees: the sharp corner
   points down, 18 px (26 / sqrt 2) below the square's centre, so the centre
   sits 18 px above the place and the tip on it. */
.pp-pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -31px 0 0 -13px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--navy);
  border: 3px solid var(--surface); box-shadow: 0 3px 8px rgba(16, 32, 58, .35); }
.pp-map-credit { margin: 4px 2px 0; text-align: right; font-size: .72rem; color: var(--muted); }
.pp-map-credit a { color: var(--muted); }

/* ---------- Facts and check-in ---------- */
.pp-top { display: grid; gap: 16px; margin-top: 18px; }
.pp-facts { display: none; margin: 0; background: var(--surface); border: 1px solid var(--divider);
  border-radius: 18px; padding: 6px 16px; }
.pp-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-top: 1px solid var(--divider); font-size: .9rem; }
.pp-facts div:first-child { border-top: 0; }
.pp-facts dt { color: var(--muted); }
.pp-facts dd { margin: 0; color: var(--navy); font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.pp-facts a { color: var(--teal); text-decoration: none; }
.pp-cta { margin-top: 16px; background: var(--surface); border: 1px solid var(--divider);
  border-radius: 18px; padding: 18px; }
.pp-top .pp-cta { margin-top: 0; }
.pp-cta p { margin: 0 0 12px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.pp-cta .pp-cta-title { margin-bottom: 4px; color: var(--navy); font-weight: 700; font-size: 1rem; }
.pp-cta .store-badges img { height: 40px; }

/* ---------- Section labels ---------- */
.pp-label { margin: 28px 0 10px; font-size: .76rem; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); }
.pp-label span { margin-left: 6px; letter-spacing: 0; text-transform: none; font-weight: 600; }

/* ---------- Nearby cards ---------- */
.pp-near { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-near a { display: block; height: 100%; background: var(--surface); border: 1px solid var(--divider);
  border-radius: 14px; padding: 10px 12px; text-decoration: none; }
.pp-near a:hover { border-color: var(--teal); }
.pp-near small { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; }
.pp-near strong { display: block; margin: 2px 0; color: var(--navy); font-size: .9rem; line-height: 1.25;
  overflow-wrap: anywhere; hyphens: auto; }
.pp-near span { color: var(--teal); font-size: .78rem; font-weight: 700; }

/* ---------- Municipality: jump chips and name columns ---------- */
.pp-jump { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none; }
.pp-jump::-webkit-scrollbar { display: none; }
.pp-jump li { flex: none; }
.pp-jump a { display: inline-block; background: rgba(26, 127, 176, .10); color: var(--teal);
  font-weight: 700; font-size: .8rem; border-radius: 999px; padding: 5px 11px; text-decoration: none; }
.pp-jump b { margin-left: 4px; color: var(--navy); }
.pp-group { position: relative; scroll-margin-top: 72px; }
.pp-names { list-style: none; margin: 0; padding: 10px 16px; columns: 2; column-gap: 18px;
  background: var(--surface); border: 1px solid var(--divider); border-radius: 18px; }
.pp-names li { break-inside: avoid; padding: 4px 0; font-size: .9rem; }
.pp-names a { color: var(--navy); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pp-names a:hover { color: var(--teal); }
.pp-names em { font-style: normal; color: var(--muted); font-weight: 500; font-size: .8rem; white-space: nowrap; }
.pp-fold { position: absolute; opacity: 0; pointer-events: none; }
.pp-more { display: none; margin-top: 8px; color: var(--teal); font-weight: 700; font-size: .85rem;
  cursor: pointer; }
.pp-fold:focus-visible ~ .pp-more { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- Country index ---------- */
.pp-county { margin-top: 16px; background: var(--surface); border: 1px solid var(--divider);
  border-radius: 18px; padding: 16px 18px; scroll-margin-top: 72px; }
.pp-pills + .pp-county { margin-top: 22px; }
.pp-county h2 { margin: 0 0 8px; font-size: 1.1rem; }
.pp-kommuner { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; }
.pp-kommuner li { break-inside: avoid; padding: 3px 0; font-size: .9rem; }
.pp-kommuner a { color: var(--navy); font-weight: 600; text-decoration: none; }
.pp-kommuner a:hover { color: var(--teal); }
.pp-kommuner span { margin-left: 4px; color: var(--muted); font-size: .8rem; }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .pp-folded li:nth-child(n+13) { display: none; }
  .pp-fold:checked + .pp-names li { display: block; }
  .pp-more { display: inline-block; }
  .pp-fold:checked ~ .pp-more { display: none; }
  .pp-fold:checked { display: none; }
  .pp-band::before { left: auto; right: 22px; top: 50px; width: 40px; height: 40px; }
  .pp-pills + .pp-map { margin-top: 30px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 761px) {
  .pp-band { padding: 26px 0 84px; background-size: 100% 90px, auto; }
  .pp-map { height: 250px; }
  .pp-band::before { left: 66%; top: 30px; width: 64px; height: 64px; }
  .pp-band h1 { margin-top: 40px; font-size: 2.6rem; }
  .pp-pills { margin: -52px 0 38px; }
  .pp-pills:has(+ .pp-intro) { margin-bottom: 0; }
  .pp-photo { margin-top: -52px; }
  .pp-photo + .pp-pills { margin: 0 0 38px; }
  .pp-top { grid-template-columns: 1fr 1.15fr; align-items: start; }
  .pp-facts { display: block; }
  .pp-near { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-jump { flex-wrap: wrap; overflow: visible; }
  .pp-names { columns: 4; }
  .pp-fold { display: none; }
  .pp-kommuner { columns: 3; }
}

/* Kommune intro and highlight cards. */
.pp-intro { margin: 28px 0 0; max-width: 44em; color: var(--ink); font-size: 1.08rem; line-height: 1.6; }
.pp-pills + .pp-intro { margin-top: 26px; }
.pp-hl { margin-top: 18px; }
.pp-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 761px) { .pp-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-highlights a { display: block; height: 100%; overflow: hidden; background: var(--surface);
  border: 1px solid var(--divider); border-radius: 12px; padding: 10px 12px 12px; text-decoration: none; }
.pp-highlights a:hover { border-color: var(--teal); }
.pp-highlights img { display: block; width: calc(100% + 24px); height: 96px; margin: -10px -12px 8px;
  object-fit: cover; }
.pp-highlights strong { display: block; color: var(--navy); font-size: .9rem; line-height: 1.25;
  overflow-wrap: anywhere; }
.pp-highlights small { display: block; margin: 2px 0; color: var(--muted); font-size: .72rem; font-weight: 700; }
.pp-highlights span { color: var(--teal); font-size: .78rem; font-weight: 700; }
.pp-highlights .pp-bike { margin-left: 8px; color: var(--muted); font-weight: 600; }
.pp-bike-icon { width: 1.2em; height: 1.2em; margin-right: 4px; vertical-align: -0.3em; color: var(--teal); }

.pp-kmap { height: 360px; margin: 18px 0 0; border-radius: 12px; overflow: hidden;
  background: var(--surface); }
.pp-kmap .leaflet-popup-content { margin: 10px 14px; line-height: 1.4; }
.pp-kmap .leaflet-popup-content a { color: var(--terracotta); }
@media (max-width: 760px) { .pp-kmap { height: 300px; } }