/* Jiří zase jinde – osobní atlas noclehů. Bílý papír, černá typografie, jeden modrý akcent. */
:root {
  --paper: #ffffff; --ink: #0f0f0f; --muted: #5d5d5d; --faint: #b9b9b9; --hair: #dcdcdc; --blue: #1f3fd4; --ph: #f3f3f3;
  --f-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-sign: "Mrs Saint Delafield", "Snell Roundhand", cursive;
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { height: 100%; margin: 0 }
body { background: var(--paper); color: var(--ink); font: 16px/1.4 var(--f-body); -webkit-font-smoothing: antialiased; overflow: hidden }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer }
a { color: var(--blue); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px }

.app { height: 100%; display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) 1px minmax(360px, 440px); column-gap: 36px;
  padding-block: max(32px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-bottom));
  padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)) }

/* Levý sloupec */
.left { position: relative; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: none }
.left.has-portrait::before { content: ""; position: absolute; inset: -32px -60px -28px -32px; z-index: -1; pointer-events: none;
  background: url(img/portrait.jpg) right 20% / cover no-repeat; filter: grayscale(1) contrast(.9); opacity: .16;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 70%, transparent 100%) }
h1 { margin: 0; font: 800 clamp(56px, 5.6vw, 80px)/.88 var(--f-display); letter-spacing: -.05em }
.kicker { margin: 18px 0 0; color: var(--blue); font-size: 21px }
.lead { margin: 22px 0 0; font-size: 23px; line-height: 1.25 }
.small { margin: 14px 0 0; font-size: 15px; color: var(--ink); white-space: pre-line }
.signature { margin: 14px 0 4px; font: 52px/1 var(--f-sign); transform: rotate(-6deg); transform-origin: left; width: max-content }
.signature img { height: 64px; display: block }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-top: 18px }
.stat b { display: block; font: 300 64px/1 var(--f-body); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.stat span { font-size: 16px }
.cats { margin-top: 26px; display: grid; gap: 6px }
.cat { display: flex; justify-content: space-between; font-size: 19px; text-align: left; transition: color .15s }
.cat span:last-child { font-variant-numeric: tabular-nums }
.cat[aria-pressed="false"] { color: var(--faint) }
.cat:hover { color: var(--blue) }
.domain { margin-top: auto; padding-top: 22px; font-size: 18px }

/* Střed: glóbus */
.stage { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0 }
.topline { display: flex; justify-content: space-between; font-size: 16px; font-variant-numeric: tabular-nums; padding-top: 4px }
.mapwrap { position: relative; min-height: 0; margin: 8px 0 }
#map { position: absolute; inset: 0 }
#shade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.tabs { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; font-size: 21px }
.tabs button { padding-bottom: 8px; border-bottom: 2px solid transparent }
.tabs button[aria-current="true"] { color: var(--blue); font-weight: 600; border-color: var(--blue) }
.tabs button:hover { color: var(--blue) }
.scale { position: relative; height: 34px; margin: 18px auto 0; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums }
.scale i { position: absolute; bottom: 0; width: 1px; height: 7px; background: var(--ink) }
.scale i.base { height: 1px; width: 100% ; left: 0 }
.scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap }
.scale span:nth-child(3) { transform: none }
.scale span:last-child { transform: translateX(-100%) }

/* štítek u vybraného místa */
.callout { position: relative; width: 0; height: 0; pointer-events: none }
.callout .dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 9px rgba(31,63,212,.12) }
.callout svg { position: absolute; left: 0; bottom: 0; overflow: visible }
.callout .txt { position: absolute; left: 50px; top: -64px; white-space: nowrap; text-shadow: 0 0 4px #fff, 0 0 8px #fff }
.callout .txt b { display: block; color: var(--blue); font-size: 14px; font-weight: 600 }
.callout .txt span { font-size: 12px }
.callout.flip svg { transform: scaleX(-1); transform-origin: 0 0 }
.callout.flip .txt { left: auto; right: 50px; text-align: right }

/* Pravý sloupec: deník */
.divider { background: var(--ink); margin: 0 0 -4px }
.right { display: flex; flex-direction: column; min-height: 0 }
.dhead { display: flex; justify-content: space-between; align-items: baseline }
.dhead h2 { margin: 0; font: 800 clamp(48px, 4.6vw, 66px)/1 var(--f-display); letter-spacing: -.05em }
.dhead span { font-size: 22px; font-variant-numeric: tabular-nums }
.eyebrow { margin-top: 26px; color: var(--blue); font-size: 15px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase }
.entries { list-style: none; margin: 14px 0 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: thin }
.entry { border-bottom: 1px solid var(--hair) }
.entry button { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 22px; width: 100%; padding: 12px 0; text-align: left; align-items: start }
.thumb { width: 118px; height: 118px; object-fit: cover; display: block; background: var(--ph) }
.thumb.ph { display: grid; place-items: center }
.thumb.ph svg { width: 56px; height: 56px; stroke: var(--faint) }
.entry h3 { margin: 6px 0 4px; font: 400 26px/1.1 var(--f-body); letter-spacing: -.01em }
.entry .where { font-size: 15px; letter-spacing: .02em }
.entry .note { margin: 10px 0 0; font-size: 17px; line-height: 1.35 }
.entry .note.empty { color: var(--faint) }
.entry .stars { color: var(--blue); letter-spacing: 1px; font-size: 13px; margin-left: 6px }
.entry button:hover h3, .entry.sel h3 { color: var(--blue) }
.dfoot { padding-top: 16px; font-size: 15px }
.dfoot p { margin: 0 0 14px }
.pager { display: flex; align-items: center; gap: 14px; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: .06em }
.pager button { font-size: 22px; line-height: 1; padding: 0 4px }
.pager button:disabled { color: var(--hair); cursor: default }

.maplibregl-ctrl-attrib { background: rgba(255,255,255,.8) !important; font: 10.5px var(--f-body); color: var(--muted) }
.maplibregl-ctrl-attrib a { color: var(--muted) }
.maplibregl-canvas { outline: none }

@media (max-width: 1100px) {
  body { overflow: auto } html, body { height: auto }
  .app { height: auto; grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)) }
  .left { overflow: visible }
  .stage { height: 82vh; min-height: 460px }
  .divider { height: 1px; margin: 0 }
  .entries { overflow: visible }
  .tabs { gap: 20px; font-size: 18px }
}
@media (max-width: 480px) {
  /* úvod zhuštěný, aby byl glóbus vidět dřív */
  h1 { font-size: 52px }
  .kicker { margin-top: 12px; font-size: 18px }
  .lead { margin-top: 12px; font-size: 19px }
  .small { font-size: 14px; margin-top: 8px }
  .signature { font-size: 40px; margin: 6px 0 0 }
  .stats { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 12px; margin-top: 14px }
  .stat b { font-size: 36px }
  .stat span { font-size: 13px }
  .cats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px }
  .cat { font-size: 15px; gap: 6px }
  .cat span:last-child { color: var(--muted) }
  .domain { display: none }
  .stage { height: 74vh; min-height: 420px }
  .entry button { grid-template-columns: 88px minmax(0, 1fr); gap: 14px }
  .thumb { width: 88px; height: 88px }
  .entry h3 { font-size: 21px }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }