/* City page. Loaded after pmd.css, which owns the tokens, bar, chips, cards and placeholder. */

/* ---------- hero ---------- */
.ci-hero{
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
  padding:26px 0 30px;
}
/* With a photograph of the city behind it.
   This is the page somebody opens to look at their own town, and it used to open on a flat grey
   band. The picture is cut by us and served from here, so it cannot go the way of a hotlink. */
.ci-hero.has-shot{
  position:relative;isolation:isolate;
  background-size:cover;background-position:center 42%;
  border-bottom:0;padding:34px 0 36px;
}
/* Two passes: across, so the heading has a near-solid ground and the right side stays a
   photograph rather than a gradient; and down into the page colour, so the picture ends by
   becoming the page instead of stopping against a line. */
.ci-hero.has-shot .ci-veil{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(97deg,rgba(11,15,20,.95) 0%,rgba(11,15,20,.86) 34%,rgba(11,15,20,.44) 66%,rgba(11,15,20,.2) 100%),
    linear-gradient(180deg,rgba(11,15,20,.5) 0%,rgba(11,15,20,.1) 34%,rgba(11,15,20,.62) 84%,var(--bg) 100%);
}
.ci-hero.has-shot .ci-hero-in{position:relative;z-index:1}
.ci-hero.has-shot .ci-hero-text h1{color:#fff}

.ci-hero-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:34px;align-items:center;
}
/* The photographer, named under the thing they photographed. */
.ci-shot-credit{margin:16px 0 0;font-size:11px;color:rgba(255,255,255,.42)}
.ci-hero-text h1{font-size:clamp(28px,4vw,42px);margin:0 0 8px}
.ci-count{margin:0 0 10px;color:var(--ink);font-size:15px;font-weight:600}
.ci-intro{margin:0 0 16px;color:var(--dim);font-size:14.5px;max-width:56ch}
.ci-styles{margin:0 0 20px}
.ci-cta{display:flex;flex-wrap:wrap;gap:10px}

/* Real pins, not decoration: the shape of the scene before you scroll. Non-interactive on
   purpose — a small map you can accidentally pan is a trap, so the whole thing is one link. */
.ci-hero-map{display:block;text-decoration:none}
.ci-hero-map #ciMap{
  height:260px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-soft);background:var(--card);
}
.ci-hero-map .leaflet-tile-pane{filter:brightness(1.32)}
.ci-hero-map .leaflet-container{background:#0c0e11}
.ci-hero-map:hover #ciMap{border-color:var(--pmd-red-soft)}

/* ---------- utility bar ---------- */
.ci-places{padding-top:30px}
.ci-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.ci-bar h2{font-size:20px;margin:0}
.ci-filter{display:flex;flex-wrap:wrap;gap:6px}
.ci-f{
  border:1px solid var(--line-soft);background:var(--surface);color:var(--dim);
  font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;
  transition:background .14s,color .14s,border-color .14s;
}
.ci-f:hover{color:#fff}
.ci-f.active{background:var(--pmd-red);border-color:var(--pmd-red);color:#fff}

/* ---------- cards ---------- */
.ci-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ci-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .15s,border-color .15s;
}
a.ci-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.ci-card[hidden]{display:none}
.ci-card .pmd-ph{border-radius:0;border:0;border-bottom:1px solid var(--line-soft)}
.ci-card-body{padding:14px 15px 12px;flex:1}
.ci-card-body h3{font-size:15px;margin:0 0 4px;line-height:1.3}
.ci-addr{margin:0 0 9px;color:var(--faint);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-desc{
  margin:9px 0 0;color:var(--dim);font-size:13px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ci-card-foot{display:flex;gap:10px;padding:0 15px 13px;color:var(--faint)}
.ci-ico{display:block;line-height:0}
.ci-empty{color:var(--faint);font-size:14px;padding:24px 0}

/* ---------- upcoming ---------- */
.ci-upcoming,.ci-near{padding-top:44px}
.ci-upcoming h2,.ci-near h2{font-size:20px;margin:0 0 16px}
.ci-events{list-style:none;margin:0;padding:0}
.ci-events li{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14px;
}
.ci-ev-date{
  flex:0 0 130px;color:var(--pmd-red);font-weight:700;font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.ci-ev-name{flex:1;min-width:200px}

/* ---------- neighbours ---------- */
.ci-near-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ci-near-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s;
}
.ci-near-card:hover{border-color:rgba(255,255,255,.2)}
/* Flatter than the tiles in /cities on purpose: this strip is a way out of the page, not the
   page. 2:1 keeps four cities readable without the row competing with the studios above it. */
.ci-near-card .pmd-ph{border-radius:0;border:0;aspect-ratio:2/1}
.ci-near-body{display:flex;flex-direction:column;gap:3px;padding:11px 14px 13px}
.ci-near-body strong{font-size:15px}
/* Scoped to the body, not the card: the photograph's credit is a span inside .pmd-ph too, and
   `.ci-near-card span` outranks `.pmd-credit` on specificity — it would repaint the 9px credit
   chip in body text. */
.ci-near-body span{color:var(--faint);font-size:12.5px}

@media(max-width:960px){
  .ci-hero-in{grid-template-columns:1fr;gap:22px}
  .ci-hero-map #ciMap{height:200px}
  .ci-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ci-near-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .ci-grid{grid-template-columns:1fr}
  .ci-ev-date{flex-basis:100%}
}

/* ---------- city index tiles ---------- */
/* The photo is one of that city's own pins. Never an empty tile: a city with no usable photo
   still gets the branded placeholder rather than a grey hole in the grid. */
.cx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cx-tile{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;transition:transform .15s,border-color .15s;
}
.cx-tile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.cx-tile .pmd-ph{border-radius:0;border:0}
.cx-body{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px}
.cx-body strong{font-family:var(--font-head);font-size:15.5px}
.cx-country{color:var(--faint);font-size:12.5px}
.cx-n{color:var(--pmd-red);font-size:12px;font-weight:700;margin-top:3px}

@media(max-width:960px){ .cx-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:700px){ .cx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }