.place-address-price{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.place-address-price .badge{flex:0 0 auto}
.price-label--free{background:#dcfce7!important;color:#166534!important;border-color:#86efac!important}
.price-label--paid{background:#fff0e8!important;color:#9a3412!important;border-color:#fed7aa!important}
.price-label--unknown{background:#edf1f8!important;color:#4b5d78!important;border-color:#d7deea!important}

/* Shared London and Edinburgh discovery card. */
.place-discovery-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
.place-discovery-card{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;overflow:hidden;border:1px solid #dce5f2;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(10,28,54,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.place-discovery-card:hover{transform:translateY(-2px);border-color:#c9d7ea;box-shadow:0 13px 30px rgba(10,28,54,.12)}
.place-discovery-card__body{display:flex;min-width:0;flex-direction:column;padding:17px}
.place-discovery-card__heading span{display:block;margin-bottom:5px;color:var(--accent-strong,#245ca6);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.place-discovery-card__heading h3{margin:0;color:var(--ink,#12233d);font:800 1.22rem/1.2 var(--font-display,Georgia,serif);overflow-wrap:anywhere}
.place-discovery-card__description{display:-webkit-box;min-height:2.7em;margin:10px 0 13px;overflow:hidden;color:var(--muted,#4b5d78);font-size:.84rem;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.place-discovery-card__facts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.place-discovery-card__facts span{display:inline-flex;min-width:0;gap:5px;align-items:baseline;padding:6px 8px;border:1px solid #e1e8f2;border-radius:9px;background:#f7f9fc;color:#53647c;font-size:.72rem;line-height:1.3;overflow-wrap:anywhere}
.place-discovery-card__facts b{color:#233a5b;font-size:.65rem;letter-spacing:.035em;text-transform:uppercase}
.place-discovery-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto}
.place-discovery-card__button{display:inline-flex;min-width:0;min-height:44px;align-items:center;justify-content:center;padding:9px 10px;border:1px solid #cbd8e9;border-radius:11px;background:#fff;color:#31557f;font:800 .78rem/1.15 var(--font-body,Inter,sans-serif);text-align:center;cursor:pointer}
.place-discovery-card__button:hover,.place-discovery-card__button:focus-visible{border-color:var(--accent,#2563eb);color:var(--accent-strong,#174f9d);background:#f5f8ff}
.place-discovery-card__button--primary,.place-discovery-card__actions .btn--primary{border-color:var(--accent,#2563eb);background:var(--accent,#2563eb);color:#fff}
.place-discovery-card__button--primary:hover,.place-discovery-card__button--primary:focus-visible,.place-discovery-card__actions .btn--primary:hover,.place-discovery-card__actions .btn--primary:focus-visible{background:var(--accent-strong,#174f9d);color:#fff}

.place-media{position:relative;display:grid;width:100%;aspect-ratio:16/9;overflow:hidden;background:#e8eef7}
.place-media img{display:block;width:100%;height:100%;object-fit:cover}
.place-media--placeholder{place-items:center;padding:22px;text-align:center;isolation:isolate}
.place-media--placeholder::before,.place-media--placeholder::after{position:absolute;content:"";border-radius:999px;opacity:.42;z-index:-1}
.place-media--placeholder::before{width:190px;height:190px;right:-58px;top:-92px;background:rgba(255,255,255,.72)}
.place-media--placeholder::after{width:130px;height:130px;left:-42px;bottom:-66px;border:24px solid rgba(255,255,255,.5)}
.place-media--london{background:linear-gradient(145deg,#eaf3ff,#d6e7fb);color:#173e70}
.place-media--edinburgh{background:linear-gradient(145deg,#f1edfb,#e2d9f4);color:#4b3274}
.place-media--trips{background:linear-gradient(145deg,#edf3f8,#dde7f1);color:#29496d}
.place-media__icon{display:grid;width:52px;height:52px;margin:0 auto 12px;place-items:center;border:1px solid currentColor;border-radius:15px;background:rgba(255,255,255,.55)}
.place-media__icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.place-media__placeholder-copy{display:grid;gap:5px;max-width:28ch}
.place-media__placeholder-copy strong{font:800 1.05rem/1.2 var(--font-display,Georgia,serif);overflow-wrap:anywhere}
.place-media__placeholder-copy small{font-size:.72rem;font-weight:750;line-height:1.35;opacity:.78}

/* The shared backdrop other modals on these pages still use. */
.ui-modal-backdrop{position:fixed;z-index:90;inset:0;background:rgba(8,17,32,.56);backdrop-filter:blur(3px)}
/* Regional drive distance. An estimate and a routed figure are visibly
   different, so nobody mistakes one for the other. */
.place-discovery-card__drive small{display:block;margin-top:2px;color:#6d7d91;font-size:.66rem;font-weight:600}
.place-discovery-card__drive.is-routed b{color:#1c6b45}
.place-discovery-card__range{margin:8px 0 0;padding:5px 9px;border:1px solid #f2d5a7;border-radius:8px;background:#fffaef;color:#7a5410;font-size:.72rem;font-weight:700}
.place-discovery-card__alert{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:9px 0 0;padding:6px 9px;border:1px solid #dce5f2;border-left:4px solid #245ca6;border-radius:9px;background:#f4f8fd;color:#2c4a6d;font-size:.74rem;line-height:1.4}
.place-discovery-card__alert b{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.place-discovery-card__alert--important{border-color:#e9b4a2;border-left-color:#b23c17;background:#fff6f2;color:#7c3714}
.place-discovery-card__alert--warning{border-color:#f2d5a7;border-left-color:#a8720f;background:#fffaef;color:#7a5410}

@media(max-width:1099px){.place-discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:759px){
  .place-discovery-grid{grid-template-columns:1fr!important;gap:15px!important}
  .place-discovery-card__actions{gap:8px}.place-discovery-card__button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.place-discovery-card,.ui-modal-backdrop{animation:none!important;transition:none!important;scroll-behavior:auto!important}.place-discovery-card:hover{transform:none}}

/* =====================================================================
   Place detail
   ---------------------------------------------------------------------
   The panel a place card opens. It carries its own palette rather than
   inheriting the host page's, because the same panel opens on nine pages
   in four themes and a travel photograph needs one consistent dark ground
   to sit on.

   Desktop: a wide centred panel — hero, quick facts, tabs, then the
   overview, with a sticky action bar. Phone: the same content as a full
   screen app view, tabs replaced by collapsed sections.
   ===================================================================== */

.place-detail {
  --pd-bg: #0c1626;
  --pd-bg-soft: #111e33;
  --pd-card: #141f33;
  --pd-card-hover: #1b2842;
  --pd-control: #1b2740;
  --pd-line: rgba(255, 255, 255, .10);
  --pd-line-strong: rgba(255, 255, 255, .19);
  --pd-ink: #eef2f9;
  --pd-muted: #aebdd2;
  --pd-quiet: #93a3bb;
  --pd-accent: #3b82f6;
  --pd-accent-strong: #2563eb;
  --pd-accent-soft: rgba(59, 130, 246, .16);
  --pd-radius: 20px;

  position: fixed;
  z-index: 95;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(1200px, 94vw);
  max-height: min(920px, 92svh);
  overflow: hidden;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background: var(--pd-bg);
  color: var(--pd-ink);
  box-shadow: 0 40px 110px rgba(2, 7, 18, .62);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
}
.place-detail[hidden] { display: none; }
.place-detail *, .place-detail *::before, .place-detail *::after { box-sizing: border-box; }
.place-detail__sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.place-detail-backdrop { position: fixed; z-index: 90; inset: 0; background: rgba(3, 7, 15, .80); backdrop-filter: blur(8px); }
.place-detail-backdrop[hidden] { display: none; }
/* The panel sets this on the body as well as locking scroll inline, so no
   page stylesheet can hand the page behind back its scrollbar. */
body.place-detail-open { overflow: hidden !important; }

/* ---------- floating chrome: back, share, close ---------- */

.place-detail__chrome {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.place-detail__chrome-gap { flex: 1 1 auto; }
.place-detail__chrome-btn {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(7, 13, 26, .78);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  transition: background .18s ease, border-color .18s ease;
}
.place-detail__chrome-btn[hidden] { display: none; }
.place-detail__chrome-btn:hover { background: rgba(7, 13, 26, .94); border-color: rgba(255, 255, 255, .4); }
.place-detail__chrome-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.place-detail__shared { pointer-events: none; color: #fff; font-size: .78rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }

.place-detail__scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.place-detail__scroll:focus { outline: none; }
.place-detail__content { display: block; overflow-wrap: anywhere; }

/* ---------- hero ---------- */

.pd-hero {
  position: relative;
  display: flex;
  height: clamp(230px, 34vh, 380px);
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(150deg, #16273f, #0c1626);
}
.pd-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 20, .62) 0%, rgba(5, 10, 20, .10) 28%, rgba(6, 11, 22, .60) 56%, rgba(7, 13, 24, .88) 78%, rgba(9, 17, 30, .97) 92%, var(--pd-bg) 100%);
}
.pd-hero--drawn { height: clamp(160px, 21vh, 230px); }
.pd-hero__drawn { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .35); }
.pd-hero__drawn svg { width: 74px; height: 74px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pd-hero__copy { position: relative; width: 100%; padding: 0 26px 22px; }
.pd-hero--photos .pd-hero__copy { padding-right: 168px; }
.pd-hero__kicker { margin: 0 0 6px; color: #cfdcf4; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.pd-hero__title { margin: 0; color: #fff; font: 700 clamp(1.6rem, 3.4vw, 2.5rem)/1.1 var(--font-display, "Source Serif 4", Georgia, serif); text-shadow: 0 3px 22px rgba(0, 0, 0, .45); }
.pd-hero__where { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; color: #f0f3fa; font-size: .86rem; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.pd-hero__where .pd-icon { flex: 0 0 auto; }
.pd-hero__credit { position: absolute; right: 20px; bottom: 6px; max-width: 42%; margin: 0; color: rgba(255, 255, 255, .72); font-size: .63rem; line-height: 1.3; text-align: right; }
.pd-hero__photos {
  position: absolute;
  right: 20px;
  bottom: 26px;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 11px;
  background: rgba(7, 13, 26, .82);
  color: #fff;
  font: 700 .8rem/1 inherit;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.pd-hero__photos:hover { background: rgba(7, 13, 26, .95); }

.pd-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- body ---------- */

.pd-body { padding: 0 26px 26px; }

.pd-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}
.pd-fact {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--pd-line);
  border-radius: 14px;
  background: var(--pd-card);
}
.pd-fact__icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #1d2c4b; color: #9cc0ff; }
.pd-fact__text { display: grid; min-width: 0; gap: 3px; }
.pd-fact__text small { color: var(--pd-quiet); font-size: .63rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pd-fact__text strong { color: var(--pd-ink); font-size: .82rem; font-weight: 650; line-height: 1.35; }

/* ---------- tabs ---------- */

.pd-tabs {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  gap: 4px;
  margin: 20px 0 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--pd-line);
  background: var(--pd-bg);
  overflow-x: auto;
  scrollbar-width: none;
}
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tabs__tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--pd-muted);
  font: 700 .87rem/1 inherit;
  cursor: pointer;
}
.pd-tabs__tab:hover { color: var(--pd-ink); background: var(--pd-card-hover); }
.pd-tabs__tab.is-active { color: #fff; }
.pd-tabs__tab.is-active::after { position: absolute; right: 12px; bottom: -9px; left: 12px; height: 2px; border-radius: 2px; background: var(--pd-accent); content: ""; }

.pd-panel { padding-top: 18px; }
.pd-panel[hidden] { display: none; }
.pd-panel__heading { display: none; }

/* ---------- cards ---------- */

.pd-grid { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-pd-panel] .pd-grid[data-pd-cards="1"] { grid-template-columns: minmax(0, 1fr); }
[data-pd-panel="overview"] .pd-grid[data-pd-cards="2"] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
[data-pd-panel="overview"] .pd-grid[data-pd-cards="3"] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.pd-card--wide, .pd-strip { grid-column: 1 / -1; }

.pd-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--pd-line);
  border-radius: 16px;
  background: var(--pd-card);
}
.pd-card__head { display: flex; min-height: 50px; align-items: center; gap: 10px; padding: 13px 16px; list-style: none; cursor: default; }
.pd-card__head::-webkit-details-marker { display: none; }
.pd-card__head h3 { margin: 0; color: var(--pd-ink); font: 700 .95rem/1.25 inherit; }
.pd-card__chev { position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-left: auto; opacity: 0; }
.pd-card__chev::before, .pd-card__chev::after { position: absolute; top: 8px; left: 3px; width: 12px; height: 2px; border-radius: 2px; background: var(--pd-muted); content: ""; transition: transform .18s ease; }
.pd-card__chev::after { transform: rotate(90deg); }
.pd-card[open] > .pd-card__head .pd-card__chev::after { transform: rotate(0deg); }
.pd-card__body { padding: 0 16px 16px; }
.pd-card__body > *:first-child { margin-top: 0; }
.pd-card__body p { margin: 0 0 10px; color: var(--pd-muted); font-size: .84rem; line-height: 1.6; }
.pd-card__body p:last-child { margin-bottom: 0; }
.pd-card__body strong { color: var(--pd-ink); font-weight: 650; }
.pd-card__body a { color: #8ab6ff; }

.pd-list { margin: 0; padding-left: 18px; color: var(--pd-muted); font-size: .84rem; line-height: 1.6; }
.pd-list li + li { margin-top: 6px; }
.pd-list--links { padding-left: 0; list-style: none; overflow-wrap: anywhere; }
.pd-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; }
.pd-quiet { color: var(--pd-quiet) !important; font-size: .76rem !important; }
.pd-kv { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pd-kv b { color: var(--pd-quiet); font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.9; }
.pd-kv span { color: var(--pd-muted); }

/* About, with the phone's read-more */
.pd-about__text { margin: 0 !important; }
.pd-about__more { margin-top: 8px; padding: 0; border: 0; background: none; color: #8ab6ff; font: 700 .82rem/1.6 inherit; cursor: pointer; }
.pd-about__more[hidden] { display: none; }

.pd-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pd-highlights li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--pd-line);
  border-radius: 999px;
  background: var(--pd-card-hover);
  color: var(--pd-ink);
  font-size: .79rem;
  font-weight: 600;
}
.pd-highlights .pd-icon { flex: 0 0 auto; width: 14px; height: 14px; color: #63c894; }

/* A notice informs; it does not alarm. The level is always a word. */
.pd-notice { display: flex; gap: 11px; margin: 12px 0; padding: 11px 13px; border: 1px solid var(--pd-line); border-left: 3px solid var(--pd-quiet); border-radius: 12px; background: #101b2d; }
.pd-notice__icon { flex: 0 0 auto; color: var(--pd-quiet); }
.pd-notice__icon .pd-icon { width: 18px; height: 18px; }
.pd-notice__copy { min-width: 0; }
.pd-notice p { margin: 0 0 5px; font-size: .8rem; }
.pd-notice p:last-child { margin-bottom: 0; }
.pd-notice__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.pd-notice__head b { color: var(--pd-ink); font-size: .65rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pd-notice__head span { color: var(--pd-ink); font-weight: 650; }
.pd-notice__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--pd-quiet); font-size: .73rem !important; }
.pd-notice--information { border-left-color: #6f9fe0; }
.pd-notice--warning { border-left-color: #f0a94a; }
.pd-notice--important { border-left-color: #ff8079; }

.pd-note { padding: 14px 16px; border: 1px solid var(--pd-line); border-radius: 14px; background: #101b2d; }
.pd-note b { display: block; margin-bottom: 4px; color: var(--pd-ink); font-size: .84rem; }
.pd-note p { margin: 0; color: var(--pd-muted); font-size: .81rem; line-height: 1.55; }

.pd-state { display: grid; min-height: 200px; place-items: center; padding: 40px 26px; color: var(--pd-muted); text-align: center; font-weight: 650; }
.pd-state--error b { display: block; color: var(--pd-ink); font-size: 1rem; }
.pd-state--error p { margin: 6px 0 0; font-size: .84rem; font-weight: 500; }

/* ---------- map ---------- */

.pd-map { display: grid; gap: 10px; }
.pd-map__frame { position: relative; height: 176px; overflow: hidden; border: 1px solid var(--pd-line); border-radius: 12px; background: #16233a; }
.pd-map__tiles { position: absolute; left: 50%; top: 50%; width: 768px; height: 512px; }
.pd-map__tiles img { position: absolute; width: 256px; height: 256px; filter: saturate(.72) brightness(.86) contrast(1.02); }
.pd-map__pin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 3px solid #fff; border-radius: 50%; background: var(--pd-accent); box-shadow: 0 0 0 5px rgba(59, 130, 246, .32), 0 3px 10px rgba(0, 0, 0, .5); }
.pd-map__credit { position: absolute; right: 0; bottom: 0; padding: 3px 7px; border-radius: 7px 0 0 0; background: rgba(6, 12, 23, .9); color: rgba(255, 255, 255, .9) !important; font-size: .62rem; text-decoration: none; }
.pd-map__go { width: 100%; }

/* ---------- photos ---------- */

.pd-photos { display: grid; gap: 12px; }
.pd-photos__stage { overflow: hidden; border: 1px solid var(--pd-line); border-radius: 16px; background: #16233a; }
.pd-photos__stage img { display: block; width: 100%; height: clamp(220px, 40vh, 420px); object-fit: cover; }
.pd-photos__rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.pd-photos__thumb, .pd-strip__item { padding: 0; overflow: hidden; border: 1px solid var(--pd-line); border-radius: 12px; background: none; cursor: pointer; }
.pd-photos__thumb img, .pd-strip__item img { display: block; width: 100%; height: 84px; object-fit: cover; opacity: .78; transition: opacity .18s ease, transform .18s ease; }
.pd-photos__thumb:hover img, .pd-strip__item:hover img { opacity: 1; transform: scale(1.04); }
.pd-photos__thumb.is-active { border-color: var(--pd-accent); }
.pd-photos__thumb.is-active img { opacity: 1; }

.pd-strip { display: grid; gap: 10px; }
.pd-strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pd-strip__head h3 { margin: 0; color: var(--pd-ink); font: 700 .95rem/1.25 inherit; }
.pd-strip__all { padding: 6px 2px; border: 0; background: none; color: #8ab6ff; font: 700 .8rem/1 inherit; cursor: pointer; }
.pd-strip__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: thin; }

/* ---------- nearby ---------- */

.pd-nearby { display: grid; gap: 12px; }
.pd-nearby__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pd-nearby__item {
  display: flex;
  width: 100%;
  min-height: 74px;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 9px;
  border: 1px solid var(--pd-line);
  border-radius: 14px;
  background: var(--pd-card);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.pd-nearby__item:hover { border-color: var(--pd-line-strong); background: var(--pd-card-hover); }
.pd-nearby__media { display: grid; flex: 0 0 auto; width: 56px; height: 56px; place-items: center; overflow: hidden; border-radius: 10px; background: var(--pd-card-hover); color: var(--pd-quiet); }
.pd-nearby__media img { width: 100%; height: 100%; object-fit: cover; }
.pd-nearby__copy { display: grid; min-width: 0; gap: 3px; }
.pd-nearby__copy strong { color: var(--pd-ink); font-size: .87rem; font-weight: 650; }
.pd-nearby__copy small { color: var(--pd-quiet); font-size: .72rem; }
.pd-nearby__distance { margin-left: auto; color: var(--pd-muted); font-size: .78rem; font-weight: 700; white-space: nowrap; }

/* ---------- buttons and the action bar ---------- */

.pd-btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--pd-line-strong);
  border-radius: 12px;
  background: var(--pd-control);
  color: var(--pd-ink);
  font: 700 .85rem/1 inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.pd-btn:hover { background: #24334f; border-color: rgba(255, 255, 255, .3); }
.pd-btn--primary { border-color: var(--pd-accent); background: var(--pd-accent); color: #fff; }
.pd-btn--primary:hover { background: var(--pd-accent-strong); border-color: var(--pd-accent-strong); }

.place-detail__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 22px;
  border-top: 1px solid var(--pd-line);
  background: #0a1322;
}
.place-detail__bar[hidden] { display: none; }
.pd-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* The country page appends its own three actions to this bar. They carry the
   panel's own classes, not the place card's, so the card grid's responsive
   rules can never reach them. The planner action is the one that dominates. */
.place-detail__bar .pd-actions { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.place-detail__bar .pd-action {
  display: inline-flex;
  flex: 0 1 auto;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--pd-line-strong);
  border-radius: 12px;
  background: var(--pd-control);
  color: var(--pd-ink);
  font: 700 .85rem/1 inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.place-detail__bar .pd-action span { color: inherit; }
.place-detail__bar .pd-action span[data-action-glyph] { font-size: 1rem; line-height: 1; }
.place-detail__bar .pd-action:hover { border-color: rgba(255, 255, 255, .3); background: #24334f; }
.place-detail__bar .pd-action:disabled { cursor: wait; opacity: .6; }
.place-detail__bar [data-country-action="plan"] {
  border-color: var(--pd-accent);
  background: var(--pd-accent);
  color: #fff;
}
.place-detail__bar [data-country-action="plan"]:hover { border-color: var(--pd-accent-strong); background: var(--pd-accent-strong); }
.place-detail__bar [data-country-action].is-active {
  border-color: rgba(99, 200, 148, .55);
  background: rgba(99, 200, 148, .16);
  color: #a9e6c6;
}
.place-detail__bar [data-country-action="plan"].is-active {
  border-color: var(--pd-accent-strong);
  background: var(--pd-accent-strong);
  color: #fff;
}

/* ---------- focus, always visible ---------- */

.place-detail button:focus-visible,
.place-detail a:focus-visible,
.place-detail summary:focus-visible,
.place-detail [tabindex]:focus-visible { outline: 2px solid #93bbff; outline-offset: 2px; border-radius: 10px; }

/* ---------- laptop and tablet ---------- */

@media (max-width: 1180px) {
  [data-pd-panel="overview"] .pd-grid[data-pd-cards="3"] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .pd-body { padding: 0 20px 22px; }
  .pd-hero__copy { padding: 0 20px 18px; }
}

@media (max-width: 900px) {
  .place-detail { width: min(1200px, 96vw); }
  [data-pd-panel] .pd-grid[data-pd-cards],
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ---------- phone: a full screen view, not a smaller popup ---------- */

@media (max-width: 767px) {
  .place-detail {
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    transform: none;
    border: 0;
    border-radius: 0;
  }
  .place-detail__chrome { top: max(12px, env(safe-area-inset-top)); right: 12px; left: 12px; }
  .place-detail__chrome-btn { width: 44px; height: 44px; }
  .place-detail__chrome-btn--close { display: none; }

  .pd-hero { height: clamp(200px, 32dvh, 300px); }
  .pd-hero__copy { padding: 0 16px 16px; }
  .pd-hero--photos .pd-hero__copy { padding-right: 16px; }
  .pd-hero__title { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .pd-hero__photos { right: 14px; bottom: 16px; min-height: 38px; padding: 0 12px; }
  .pd-hero__credit { display: none; }

  .pd-body { padding: 0 14px 20px; }
  /* Three facts is what a phone can read at a glance. The rest of the
     detail lives in the sections below, not in a squeezed fourth chip. */
  .pd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
  .pd-facts > *:nth-child(n+4) { display: none; }
  .pd-fact { flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px; }
  .pd-fact__icon { width: 28px; height: 28px; }
  .pd-fact__text strong { font-size: .76rem; }

  .pd-tabs { display: none; }
  .pd-panel { padding-top: 16px; }
  .pd-panel__heading { display: block; margin: 4px 0 10px; color: var(--pd-quiet); font: 800 .68rem/1 inherit; letter-spacing: .1em; text-transform: uppercase; }

  /* The description opens with a readable paragraph and the rest is one tap
     away, so the phone never opens on a wall of text. */
  .pd-about:not(.is-expanded) .pd-about__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }

  /* Every section is a tappable accordion, so the page stays short. */
  .pd-card__head { min-height: 54px; cursor: pointer; }
  .pd-card__chev { opacity: 1; }
  .pd-card--wide, .pd-strip { grid-column: auto; }
  .pd-strip__rail { grid-auto-columns: 62%; margin-inline: -14px; padding-inline: 14px; }
  .pd-photos__stage img { height: clamp(200px, 32dvh, 300px); }
  .pd-photos__rail { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 34%; overflow-x: auto; margin-inline: -14px; padding-inline: 14px; }
  .pd-nearby__list { grid-template-columns: minmax(0, 1fr); }

  .place-detail__bar {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .pd-bar__group { flex: 0 1 auto; gap: 8px; }
  .pd-btn { min-height: 48px; padding: 0 13px; font-size: .8rem; }
  .pd-btn span:not([aria-hidden]) { white-space: nowrap; }
  .place-detail__bar .pd-actions { flex-wrap: nowrap; gap: 8px; }
  .place-detail__bar .pd-action { min-width: 0; padding: 0 12px; }
  /* A narrow bar reduces a label to its icon rather than dropping the
     action. The words stay in the accessible name. */
  .place-detail__bar [data-country-action="vote"] { padding: 0 13px; }
  .place-detail__bar [data-country-action="vote"] [data-action-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .place-detail__bar .pd-btn { padding: 0 13px; }
  .place-detail__bar .pd-btn > span:not([aria-hidden]),
  .place-detail__bar [data-country-action="favourite"] [data-action-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .pd-facts { gap: 6px; }
  .pd-fact { padding: 9px 8px; }
  .pd-fact__text small { font-size: .58rem; }
  .pd-fact__text strong { font-size: .72rem; }
  .pd-btn { padding: 0 11px; font-size: .76rem; }
  .place-detail__bar .pd-action { padding: 0 10px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .place-detail *, .place-detail-backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}