/* ============================================================================================
   BydliHub 2.6: vzhľad, smer „Mapa mesta“ (6. 11. 2026)
   Farby sú tie isté ako na súčasnom BydliHube (zelená #0d6a4d, tmavozelená, oranžová #ff6a2b, mätová a broskyňová;
   tmavý režim zelenočierny). Svet: plán mesta pre študenta. Svetlé pozadie s jemnou mriežkou ako mapa, kruhy
   vzdialeností, zastávky, štítky ako na orientačných tabuliach. Hlavný je svetlý režim, tmavý je „nočná mapa“.
   Pohyb: Emil Kowalski (ease-out, krátko, len transform a opacity, nič pri obmedzenom pohybe). Kontrast WCAG AA.
   ============================================================================================ */

/* ===== 1. PÍSMA (vendor/fonts, licencie OFL tamtiež). Archivo nemá azbuku: ukrajinčinu doplní Inter Tight ===== */
@font-face { font-family: "BHDisplay"; src: url("vendor/fonts/archivo-latin-800-normal.woff2") format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "BHDisplay"; src: url("vendor/fonts/archivo-latin-ext-800-normal.woff2") format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "BHDisplay"; src: url("vendor/fonts/inter-tight-cyrillic-800-normal.woff2") format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "BHText"; src: url("vendor/fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "BHText"; src: url("vendor/fonts/archivo-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "BHText"; src: url("vendor/fonts/inter-tight-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "BHText"; src: url("vendor/fonts/archivo-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "BHText"; src: url("vendor/fonts/archivo-latin-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "BHText"; src: url("vendor/fonts/inter-tight-cyrillic-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "BHText"; src: url("vendor/fonts/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "BHText"; src: url("vendor/fonts/archivo-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "BHText"; src: url("vendor/fonts/inter-tight-cyrillic-600-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* ===== 2. FARBY (rovnaké ako súčasný BydliHub) ===== */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --bg-2: #f2f5f3; --surface: #ffffff; --surface-2: #f2f5f3; --tint: #e4f1ea;
  --text: #0f1a15; --heading: #0b130f; --muted: #46534c; --line: #e1e8e3; --border: #ccd7d0;
  --green: #0d6a4d; --green-2: #09543c; --accent: #0a5a41; --deep: #0b3a2b;
  --sun: #ff6a2b; --sun-2: #ff8250; --on-sun: #0f1a15;
  --focus: #d9480f;   /* rámik fokusu: tmavšia oranžová, na bielom 4,3 : 1 (svetlá --sun mala len 2,9 : 1) */
  --mint: #d4efe1; --mint-ink: #08513a; --peach: #ffe0d1; --peach-ink: #7c2c06;
  --ok: #0b6b4a; --ok-bg: #dcf4e8; --warn: #8a4600; --warn-bg: #fff3dc;
  --inv-bg: #0f1a15; --inv-fg: #ffffff;
  --header-bg: rgba(255, 255, 255, .9);
  --grid: rgba(13, 106, 77, .075);     /* mriežka „mapy“ v pozadí */
  --ring: #9dbcab;                      /* kruhy vzdialeností */
  --dot: #0d6a4d;                       /* bod ponuky na mape */
  --final-bg: #0d6a4d;
  --hero-tiles: saturate(.5) contrast(.96) brightness(1.02);
  --shadow: 0 1px 2px rgba(15, 26, 21, .05), 0 8px 24px rgba(15, 26, 21, .06);
  --shadow-lg: 0 24px 60px rgba(8, 20, 14, .18);
  --map-filter: none;
  --display: "BHDisplay", "BHText", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sans: "BHText", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --r: 18px; --r-sm: 12px; --r-btn: 12px;
}
:root[data-theme="dark"] {
  --focus: #ff6a2b;
  color-scheme: dark;
  --bg: #070a09; --bg-2: #0b100e; --surface: #0e1311; --surface-2: #141a17; --tint: #0f1c17;
  --text: #e3e5e9; --heading: #f4f5f7; --muted: #9ba7a1; --line: #1a221e; --border: #2f3a35;
  --green: #1a7d5c; --green-2: #14684c; --accent: #6fdfb0; --deep: #0a1611;
  --mint: rgba(90, 220, 160, .14); --mint-ink: #92e8bc; --peach: rgba(255, 120, 70, .16); --peach-ink: #ffb393;
  --ok: #7fdca0; --ok-bg: rgba(127, 220, 160, .13); --warn: #ffb866; --warn-bg: rgba(255, 184, 102, .1);
  --inv-bg: #f4f5f7; --inv-fg: #070a09;
  --header-bg: rgba(7, 10, 9, .86);
  --grid: rgba(111, 223, 176, .06);
  --ring: #2e4a3e;
  --dot: #6fdfb0;
  --final-bg: #0d3b2c;
  --hero-tiles: invert(1) hue-rotate(180deg) brightness(.8) contrast(.9) saturate(.25);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --map-filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.88) saturate(.3);
}

/* ===== 3. ZÁKLAD ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; color: var(--heading); text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
p { margin: 0 0 12px; }
a { color: var(--accent); text-underline-offset: 3px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { color: var(--on-sun); background: var(--sun); }
input, textarea { caret-color: var(--sun); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.skip { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 1000; padding: 10px 16px; font-weight: 700; color: #fff; background: var(--green); border-radius: var(--r-btn); text-decoration: none; transform: translateY(-160%); }
.skip:focus, .skip:focus-visible { transform: none; outline: 3px solid var(--focus); outline-offset: 2px; }
#app:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* štítok ako na orientačnej tabuli: nad poliami, v pätičke, pri zdroji ponuky */
.lbl { font: 600 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.lead { max-width: 60ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); }
[hidden] { display: none !important; }
/* tlačidlá (trieda .pill ostala z 2.6, tvar je zaoblený obdĺžnik ako tabuľa) */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px;
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: var(--r-btn);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease);
}
.pill:active { transform: scale(.97); }
.pill.sun { color: var(--on-sun); background: var(--sun); border-color: var(--sun); }
.pill.sun:hover { background: var(--sun-2); border-color: var(--sun-2); }
.pill.ghost:hover { border-color: var(--text); }
.pill.light { color: var(--inv-fg); background: var(--inv-bg); border-color: var(--inv-bg); }
.pill.sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.pill.big { min-height: 56px; max-width: 100%; padding: 12px 28px; font-size: 17px; line-height: 1.2; white-space: normal; text-align: center; }   /* dlhý text (uk) sa zalomí, nevytečie */
.pill.on-green { color: #fff; border-color: rgba(255, 255, 255, .45); }
.pill.on-green:hover { border-color: #fff; }
.pill:disabled { opacity: .55; cursor: default; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--text); text-decoration: none; }
.text-link svg { transition: transform .2s var(--ease); }
.text-link:hover { color: var(--green); }
.text-link:hover svg { transform: translateX(3px); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: var(--r-btn); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.icon-btn:hover { border-color: var(--text); }

/* ===== 4. HLAVIČKA, MENU, PÄTIČKA ===== */
header#site-header { position: sticky; top: 0; z-index: 30; background: var(--header-bg); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease; }
.scrolled header#site-header { box-shadow: 0 8px 24px -16px rgba(15, 26, 21, .35); }
.hdr { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 21px/1 var(--display); letter-spacing: -.03em; color: var(--heading); text-decoration: none; }
.logo b { color: var(--sun); font-weight: 800; }
.logo svg { width: 32px; height: 32px; }
.nav { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-ind { position: absolute; left: 0; bottom: -2px; width: 100px; height: 2.5px; background: var(--sun); border-radius: 2px; transform-origin: 0 50%; opacity: 0; pointer-events: none; transition: transform .45s var(--ease), opacity .2s ease; }
.nav-a { padding: 8px 12px; font-size: 14.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-radius: 10px; transition: color .15s ease, background-color .15s ease; }
.nav-a:hover { color: var(--text); }
.nav-a[aria-current="page"] { color: var(--heading); }
.nav-saved span { margin-left: 2px; font: 700 12px/1 var(--sans); color: var(--sun); }
.hdr-tools { display: flex; align-items: center; gap: 8px; }
.mini-sel { height: 40px; padding: 0 28px 0 12px; font-size: 13px; color: var(--text); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ba7a1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center; border: 1px solid var(--border); border-radius: 10px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mini-sel option { color: #111; background: #fff; }
.icon-btn#theme-btn { width: 40px; height: 40px; border-radius: 10px; }
.hdr-add { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.menu-btn { display: none; width: 44px; height: 44px; }
.burger { position: relative; display: block; width: 18px; height: 10px; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transform-origin: 50% 50%; transition: transform .25s var(--ease), top .25s var(--ease); }
.burger i:first-child { top: 0; } .burger i:last-child { top: 8px; }
.menu-open .burger i:first-child { top: 4px; transform: rotate(45deg); }
.menu-open .burger i:last-child { top: 4px; transform: rotate(-45deg); }
#menu { position: fixed; inset: 68px 0 0; z-index: 29; padding-top: 12px; background: var(--bg); overflow-y: auto; }
.menu-in { display: grid; }
.menu-a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font: 800 clamp(26px, 7vw, 38px)/1.1 var(--display); letter-spacing: -.03em; color: var(--heading); text-decoration: none; border-bottom: 1px solid var(--line); animation: menuIn .35s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
.menu-a svg { flex: none; color: var(--muted); }
.menu-a[aria-current="page"] { color: var(--green); }
@keyframes menuIn { from { opacity: 0; transform: translateY(10px); } }
.menu-open { overflow: hidden; }
.menu-tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px 0 40px; }
.menu-tools .mini-sel { height: 44px; font-size: 15px; }

#site-footer { margin-top: 120px; padding: 64px 0 48px; border-top: 1px solid var(--line); background: var(--bg-2); }
.foot-cols { display: grid; grid-template-columns: 1.3fr 1fr 2fr; gap: 40px; }
.foot-logo { margin-bottom: 16px; }
.foot-cols a:not(.logo) { display: block; padding: 4px 0; font-size: 15px; color: var(--text); text-decoration: none; }
.foot-cols a:not(.logo):hover { color: var(--green); }
.foot-cols .lbl { margin-bottom: 12px; }
.foot-cols p { font-size: 15px; color: var(--muted); }
.foot-cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; align-content: start; }
.foot-cities .lbl { grid-column: 1 / -1; }
.foot-mail { color: var(--dot) !important; font-weight: 600; }   /* --dot: v tmavom režime svetlejšia zelená (kontrast 4,5 : 1) */
.foot-legal { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot-legal a { color: var(--muted); text-decoration: none; } .foot-legal a:hover { color: var(--text); }

/* ===== 5. ÚVOD ===== */
.hero { position: relative; isolation: isolate; padding: 40px 0 24px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy map" "near map"; gap: 28px 56px; align-items: start; }
.hero-copy { grid-area: copy; padding-top: 28px; }
.hero-t { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -.035em; }
.hero-sub { max-width: 48ch; margin: 22px 0 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); }
.finder-form { position: relative; display: flex; gap: 8px; max-width: 600px; margin-top: 28px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.finder-form .finder { position: relative; flex: 1; min-width: 0; }
.finder-form input { width: 100%; height: 50px; padding: 0 16px; font-size: 17px; background: transparent; border: 0; outline: none; }
.finder-form:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }   /* pole hľadania: celý rámik, nie len 1 px */
.finder-form .pill { min-height: 50px; }
.finder-msg { position: absolute; left: 18px; top: calc(100% + 8px); margin: 0; font-size: 14px; color: var(--muted); }
.finder-msg:empty { display: none; }
.finder-list { position: absolute; z-index: 40; left: -6px; right: -6px; top: calc(100% + 14px); max-height: min(52vh, 420px); overflow-y: auto; margin: 0; padding: 8px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); animation: pop .18s var(--ease); }
.finder-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 14px; border-radius: 10px; cursor: pointer; }
.finder-list li.on, .finder-list li:hover { background: var(--surface-2); }
.finder-list li.on { box-shadow: inset 0 0 0 1.5px var(--sun); }
.finder-list .f-l { font-weight: 600; } .finder-list .f-s { font-size: 13px; color: var(--muted); text-align: right; }
.finder-list .f-school { padding-left: 26px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 20px 0 0; }
.hero-links a { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color .15s ease, text-decoration-color .15s ease; }
.hero-links a:hover { color: var(--green); text-decoration-color: var(--sun); }

/* mapa vzdialeností: body ponúk na skutočných miestach okolo školy, kruhy po 1 alebo 2 km */
.dmap-panel { grid-area: map; display: grid; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.dmap-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dmap-head b { font: 800 24px/1.1 var(--display); letter-spacing: -.02em; color: var(--heading); }
.dmap-head span { font-size: 14px; color: var(--muted); }
.dmap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 7px 12px; font: 700 14px/1.2 var(--sans); color: var(--text); background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s var(--ease); }
.mchip small { font-size: 12px; font-weight: 500; color: var(--muted); }
.mchip:hover { border-color: var(--border); }
.mchip:active { transform: scale(.97); }
.mchip[aria-pressed="true"] { color: #fff; background: var(--green); }
.mchip[aria-pressed="true"] small { color: #fff; }   /* biela .8 mala v tmavom režime len 3,9 : 1 */
/* skutočná mapa (Leaflet + OpenStreetMap): dlaždice tlmené, aby vynikli kruhy, budovy školy a body ponúk */
.dmap { position: relative; z-index: 0; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--bg-2); border-radius: 16px; }
.dmap .leaflet-tile-pane { filter: var(--hero-tiles); }
.dmap .leaflet-control-zoom { border: 0; box-shadow: var(--shadow); }
.dmap .leaflet-bar a { width: 34px; height: 34px; line-height: 32px; color: var(--text); background: var(--surface); border-color: var(--line); transition: background-color .15s ease; }
.dmap .leaflet-bar a:hover { background: var(--surface-2); }
.dmap .leaflet-control-attribution { font-size: 10.5px; color: var(--muted); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.dmap .leaflet-control-attribution a { color: var(--accent); }
.lring { stroke: var(--green); stroke-width: 1.6; stroke-dasharray: 5 7; fill: none; opacity: .75; }
.lcore { stroke: var(--sun); stroke-width: 2.5; fill: var(--surface); fill-opacity: 1; }
.lring-l span { position: absolute; transform: translate(-50%, -50%); padding: 1px 7px; font: 700 11px/1.4 var(--sans); white-space: nowrap; color: var(--green); background: var(--surface); border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); font-variant-numeric: tabular-nums; }
.lsite i { display: block; width: 12px; height: 12px; background: var(--sun); border-radius: 3px; box-shadow: 0 0 0 2px var(--surface); }
.lsite b { position: absolute; left: 16px; top: -2px; font: 700 11px/1.3 var(--sans); white-space: nowrap; color: var(--heading); text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 3px var(--surface); }
.lmk-dot { display: block; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s ease; animation: dotIn .5s var(--ease) backwards; animation-delay: calc(.25s + var(--i, 0) * 22ms); }
.lmk-dot.dorm { background: var(--dot); box-shadow: 0 0 0 3px var(--surface), 0 2px 6px rgba(0, 0, 0, .3); }
.lmk-dot.flat { background: var(--surface); box-shadow: inset 0 0 0 4px var(--dot), 0 0 0 2px var(--surface), 0 2px 6px rgba(0, 0, 0, .3); }
.lmk:hover .lmk-dot, .lmk.hl .lmk-dot { transform: scale(1.35); box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px rgba(255, 106, 43, .45); }
.lmk.hl { z-index: 1000 !important; }
@keyframes dotIn { from { opacity: 0; transform: scale(0); } }
@keyframes fadeIn { from { opacity: 0; } }
.leaflet-tooltip.dtip { display: grid; justify-items: start; gap: 5px; width: 230px; padding: 10px 12px; font: 400 13.5px/1.4 var(--sans); white-space: normal; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); animation: tipIn .18s var(--ease); }
.leaflet-tooltip-top.dtip::before { border-top-color: var(--surface); }
.dtip b { font: 700 14px/1.3 var(--sans); color: var(--heading); }
.dtip > span:not(.chip-km) { font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes tipIn { from { opacity: 0; } }
.dmap-foot p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dmap-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--text); }
.dmap-legend li { display: inline-flex; align-items: center; gap: 8px; }
.lg { width: 12px; height: 12px; border-radius: 50%; }
.lg.dorm { background: var(--dot); }
.lg.flat { box-shadow: inset 0 0 0 3px var(--dot); }
.lg.site { width: 10px; height: 10px; background: var(--sun); border-radius: 2px; }

/* najbližšie ponuky k vybranej škole (pod vyhľadávaním; riadok zvýrazní bod na mape) */
.hero-near { grid-area: near; display: grid; gap: 10px; align-content: start; }
.near { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.near-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; width: 100%; padding: 12px 8px; text-align: left; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color .15s ease; }
.near li:last-child .near-row { border-bottom: 0; }
.near-row:hover, .near-row.hl { background: var(--surface-2); }
.near-dot { width: 12px; height: 12px; border-radius: 50%; }
.near-dot.dorm { background: var(--dot); }
.near-dot.flat { box-shadow: inset 0 0 0 3px var(--dot); }
.near-t { min-width: 0; }
.near-t b { display: block; font: 700 15.5px/1.3 var(--sans); color: var(--heading); }
.near-t small { font-size: 13px; color: var(--muted); }
.near-r { display: grid; justify-items: end; gap: 5px; }
.near-p { font: 700 14px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--heading); text-align: right; }
.hero-near .text-link { justify-self: start; }

/* sekcie úvodu */
.sec { position: relative; padding: 120px 0 0; }
.sec-t { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: 36px; }
.sec-head .lead { margin: 14px 0 0; }

/* cesta v zastávkach (ako linka električky): čiara sa dokreslí, keď sa ukáže; posledná zastávka je cieľ */
.route { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 44px 0 0; padding: 0; list-style: none; }
.route::before, .route::after { content: ""; position: absolute; top: 20.5px; left: 22px; right: calc((100% - 64px) / 3 - 22px); height: 3px; border-radius: 3px; }
.route::before { background: var(--line); }
.route::after { background: var(--green); transform-origin: left center; transform: scaleX(0); transition: transform 1.1s var(--ease) .15s; }
.route.in::after { transform: none; }
.route li { display: grid; gap: 10px; align-content: start; }
.stop { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; font: 800 18px/1 var(--display); color: var(--green); background: var(--bg); border: 3px solid var(--green); border-radius: 50%; }
.route li:last-child .stop { color: var(--on-sun); background: var(--sun); border-color: var(--sun); }
.route h3, .route h2 { margin-top: 8px; font-size: 22px; letter-spacing: -.015em; line-height: 1.2; }   /* h2 na Pridať inzerát vyzerá ako h3 */
.route p { max-width: 38ch; margin: 0; color: var(--muted); }
/* na úvode sa zastávky dajú preklikať: zelená čiara dôjde k vybranej, pod ňou sa vymení náhľad */
.route.live { margin-top: 40px; }
.route.live::after { transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease); }
.stop-tab { display: grid; gap: 10px; align-content: start; justify-items: start; width: 100%; padding: 0 0 6px; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
.stop-tab .stop { transition: transform .25s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease; }
.stop-tab:focus-visible { outline-offset: 6px; border-radius: 10px; }
.stop-t { margin-top: 8px; font: 800 22px/1.2 var(--display); letter-spacing: -.015em; color: var(--muted); transition: color .2s ease; }
.stop-p { max-width: 38ch; color: var(--muted); }
.stop-tab[aria-selected="true"] .stop { color: #fff; background: var(--green); }
.stop-tab[aria-selected="true"] .stop-t, .stop-tab:hover .stop-t { color: var(--heading); }
.route.live li:last-child .stop { color: var(--sun); background: var(--bg); border-color: var(--sun); }
.route.live li:last-child .stop-tab[aria-selected="true"] .stop { color: var(--on-sun); background: var(--sun); }
.how-pane { margin-top: 28px; padding: 22px; background: var(--surface-2); border-radius: 20px; }
.how-cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.how-city { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 2px 10px; padding: 14px 16px; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s ease, transform .25s var(--ease); }
.how-city b { font: 800 20px/1.2 var(--display); letter-spacing: -.015em; color: var(--heading); }
.how-city span { grid-row: 2; font-size: 14px; color: var(--muted); }
.how-city svg { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); transition: transform .2s var(--ease), color .15s ease; }
.how-cmp { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.how-cmp button { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 6px 16px; width: 100%; padding: 14px 16px; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s ease, transform .25s var(--ease); }
.how-cmp b { font: 700 16px/1.3 var(--sans); color: var(--heading); }
.how-cmp em { font: 800 18px/1.1 var(--display); font-style: normal; color: var(--heading); font-variant-numeric: tabular-nums; text-align: right; }
.how-schools { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.city-rest { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
.city-rest a { font-weight: 600; color: var(--text); }
.city-cr { margin: 8px 0 0; font-size: 13.5px; }
.city-cr a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.how-src { display: grid; justify-items: start; gap: 8px; max-width: 560px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.how-src b { font: 800 22px/1.2 var(--display); letter-spacing: -.015em; color: var(--heading); }
.how-src p { margin: 0; }
.how-src .pill { margin-top: 8px; }

/* mestá: dlaždice s fotkou (úvod = mozaika, hľadanie a vysoké školy = rad hlavných miest); autor fotky je vždy pri nej */
.ctile { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 100%; overflow: hidden; color: #fff; text-decoration: none; background: var(--deep); border-radius: 18px; }
.ctile-img { position: absolute; inset: 0; z-index: -2; }
.ctile-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ctile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 12, 9, 0) 35%, rgba(5, 12, 9, .8)); }
.ctile-txt { display: grid; gap: 2px; padding: 16px 18px; }
.ctile-txt b { font: 800 clamp(20px, 1.9vw, 28px)/1.1 var(--display); letter-spacing: -.02em; }
.ctile-txt span { font-size: 14px; color: rgba(255, 255, 255, .88); }
.ctile-cr { position: absolute; right: 8px; top: 8px; max-width: calc(100% - 16px); padding: 2px 7px; font-size: 11px; font-weight: 500; line-height: 1.5; color: #fff; background: rgba(5, 12, 9, .72); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctile.no-photo { color: var(--heading); background: var(--surface-2); }
.ctile.no-photo::before { display: none; }
.ctile.no-photo .ctile-txt span { color: var(--muted); }
.ctile.xl .ctile-txt { padding: 22px 24px; }
.ctile.xl .ctile-txt b { font-size: clamp(30px, 3.2vw, 46px); }
.ctile.sm { aspect-ratio: 4 / 3; border-radius: 14px; }
.ctile.sm .ctile-txt { padding: 10px 12px; }
.ctile.sm .ctile-txt b { font-size: 17px; }
.ctile.sm .ctile-txt span { font-size: 12.5px; }
.ctile.sm .ctile-cr { font-size: 10.5px; padding: 1px 6px; }
.city-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 14vw, 200px); grid-auto-flow: dense; gap: 12px; }
.city-mosaic .xl { grid-column: span 2; grid-row: span 2; }
.city-mosaic .wide { grid-column: span 2; }
.city-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }

/* banner mesta: hľadanie s vybraným mestom, výsledky vysokých škôl */
.city-hero { padding: 24px 0 8px; }
.city-banner { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(220px, 26vw, 340px); overflow: hidden; color: #fff; background: var(--deep); border-radius: 24px; }
.city-banner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: bannerIn 1.2s var(--ease) backwards; }
.city-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 12, 9, .05) 25%, rgba(5, 12, 9, .78)); }
@keyframes bannerIn { from { transform: scale(1.08); } }
.cb-txt { padding: clamp(20px, 3vw, 36px); }
.cb-txt .page-t, .cb-txt h2 { color: #fff; }
.cb-txt .page-meta, .cb-txt .lbl { color: rgba(255, 255, 255, .88); }
.cb-txt .page-meta a { color: #fff; }
.city-banner .ctile-cr { top: auto; bottom: 10px; right: 12px; }
.city-banner.sm { min-height: 170px; margin: 0 0 18px; border-radius: 20px; }
.city-banner.sm h2 { margin-top: 4px; font-size: clamp(28px, 3vw, 40px); }

/* záznam kontrol: časová os s dátumami; vedľa „čo BydliHub nie je“ */
.checks-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 56px; align-items: start; }
.checks .lead { margin-top: 14px; }
.log { position: relative; display: grid; margin: 32px 0 12px; padding: 0; list-style: none; }
.log::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 26px; width: 2px; background: var(--line); }   /* os časovej osi */
.log > li { position: relative; padding: 0 0 26px 26px; }
.log > li::before { content: ""; position: absolute; left: -8px; z-index: 1; top: 4px; width: 14px; height: 14px; background: var(--bg); border: 2.5px solid var(--green); border-radius: 50%; }
.log > li:first-child::before { background: var(--green); }
.log time { display: block; margin-bottom: 8px; font: 700 15px/1.4 var(--sans); color: var(--heading); }
.log ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; font-size: 16px; color: var(--muted); }
.not-box { position: sticky; top: 100px; padding: 26px; background: var(--surface-2); border-radius: var(--r); }
.not-box h3 { margin-bottom: 16px; font-size: 22px; }
.not-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.not-list li { position: relative; display: grid; gap: 2px; padding-left: 32px; }
.not-list li::before { content: "×"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; font: 700 15px/1 var(--sans); color: var(--peach-ink); background: var(--peach); border-radius: 50%; }
.not-list b { color: var(--heading); }
.not-list span { font-size: 15px; color: var(--muted); }

/* autor: fotka na výšku, popis ako štítok na mape */
.why-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 64px; align-items: center; }
.why-photo { margin: 0; }
.why-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 24px; }
.why-photo figcaption { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; font: 600 13.5px/1.3 var(--sans); color: var(--heading); background: var(--surface-2); border-radius: 999px; }
.why-photo figcaption i { width: 8px; height: 8px; background: var(--sun); border-radius: 50%; }
.why-copy .sec-t { margin-bottom: 24px; }
.why-quote { font: 800 clamp(20px, 1.9vw, 25px)/1.35 var(--display); letter-spacing: -.012em; color: var(--heading); }
.why-copy p { max-width: 60ch; color: var(--muted); }
.why-copy .why-quote { color: var(--heading); }
.why-solo { padding-top: 18px; border-top: 1px solid var(--line); }

/* otázky */
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.faq .sec-t { position: sticky; top: 100px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 2px; font: 700 clamp(17px, 1.5vw, 20px)/1.35 var(--sans); cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary b { font: inherit; }
.acc summary .lbl { margin-left: auto; }
.plus { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; transition: transform .25s var(--ease), background-color .2s ease, border-color .2s ease; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > summary .plus { transform: rotate(45deg); color: #fff; background: var(--green); border-color: var(--green); }
.acc details > p, .acc-body { margin: 0; padding: 0 2px 24px; max-width: 64ch; color: var(--muted); }
.acc details { interpolate-size: allow-keywords; }
.acc details::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
.acc details[open]::details-content { height: auto; }
.acc details[open] > p, .acc details[open] > .acc-body { animation: accIn .45s var(--ease); }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } }
.acc summary { transition: color .15s ease; }
.acc summary:hover { color: var(--green); }
.acc summary:hover .plus { border-color: var(--green); }
.acc-body h3 { margin: 14px 0 4px; font-size: 18px; }

/* záver: zelená plocha so sústrednými kruhmi ako na mape */
.final { padding: 120px 0 0; }
.final-in { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: start; gap: 14px; padding: clamp(32px, 6vw, 72px); color: #fff; background: var(--final-bg); border-radius: 28px; }
.final-in::before { content: ""; position: absolute; z-index: -1; right: -14%; top: 50%; width: min(80vw, 760px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 46px, rgba(255, 255, 255, .13) 46px 47.5px); }
.final-in::after { content: ""; position: absolute; z-index: -1; right: calc(-14% + min(80vw, 760px) / 2 - 7px); top: calc(50% - 7px); width: 14px; height: 14px; background: var(--sun); border-radius: 50%; box-shadow: 0 0 0 4px var(--final-bg); }
.final-in h2 { max-width: 16ch; font-size: clamp(32px, 4.2vw, 58px); color: #fff; }
.final-in p { max-width: 48ch; margin: 0; font-size: 18px; color: rgba(255, 255, 255, .85); }
.final-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* ===== 6. STRÁNKY: hlavička stránky ===== */
.page-hero { position: relative; isolation: isolate; padding: 56px 0 32px; }
.page-t { font-size: clamp(36px, 5vw, 68px); line-height: 1.04; letter-spacing: -.035em; overflow-wrap: anywhere; }
.page-hero .lead { margin-top: 18px; }
.page-meta { margin: 18px 0 0; }
.page-meta a { color: var(--green); }

/* hľadanie: lišta filtrov sa drží pod hlavičkou */
/* filtre: plávajúca lišta pod hlavičkou (okolo nej sa dá klikať na obsah) */
.filters { position: sticky; top: 68px; z-index: 20; padding: 10px 0; pointer-events: none; }
.dock { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; padding: 12px 14px; pointer-events: auto; background: var(--header-bg); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.f-toggle { display: none; }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.seg-a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--muted); text-decoration: none; border-radius: 9px; transition: color .15s ease, background-color .15s ease; }
.seg-a:hover { color: var(--text); }
.seg-a[aria-current="true"] { color: #fff; background: var(--green); }
.f-panel { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; flex: 1 1 auto; }
.f-field { display: grid; gap: 6px; min-width: 0; }
.f-field .lbl { font-size: 11px; }
.f-field select, .f-field input { height: 44px; min-width: 140px; max-width: 220px; padding: 0 14px; font-size: 14.5px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.f-field select { padding-right: 32px; -webkit-appearance: none; appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ba7a1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center; }
.f-field select option { color: #111; background: #fff; }
.f-field input:focus, .f-field select:focus { border-color: var(--sun); outline: none; box-shadow: 0 0 0 3px rgba(255, 106, 43, .18); }
.f-q { margin: 0; } .f-q input { min-width: 200px; }
.view-seg { margin-left: auto; }
.results { padding-top: 22px; }
.results-note { max-width: 72ch; margin: 22px 0 0; }
@media (hover: hover) and (pointer: fine) { .est { cursor: help; } }
.note { margin: 0 0 14px; padding: 12px 16px; font-size: 14.5px; color: var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }

/* karta ponuky */
.card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s ease, box-shadow .2s ease; }
.card-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.card-media.ph { background: linear-gradient(135deg, var(--tint), var(--surface-2) 75%); }
.card-media.ph::before { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); background: var(--green); opacity: .22; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5L12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5L12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.card-type { position: absolute; left: 10px; top: 10px; z-index: 1; max-width: calc(100% - 70px); padding: 4px 9px; font: 600 11.5px/1.35 var(--sans); color: var(--heading); background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 8px; }
.card .fav { position: absolute; right: 10px; top: 10px; z-index: 2; background: color-mix(in srgb, var(--surface) 90%, transparent); border-color: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.credit { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 3px 9px; font: 500 11.5px/1.4 var(--sans); color: #fff; background: rgba(7, 10, 9, .74); border-radius: 6px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credit a { color: #fff; }
.card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.card-src { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.card-src i { width: 8px; height: 8px; border-radius: 2px; background: var(--sc, var(--sun)); }
.card h3 { font-size: 21px; line-height: 1.2; }
.card-open { display: block; padding: 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.card-open::after { content: ""; position: absolute; inset: 0; z-index: 0; }   /* celá karta je klikacia (tlačidlá nad ňou zostávajú) */
.card .card-act, .card a:not(.credit) { position: relative; z-index: 1; }
.card .credit { z-index: 1; }   /* zostáva absolútne na fotke (relatívne by ho posunulo pod okraj a orezalo) */
.card-where { margin: 0; font-size: 15px; color: var(--muted); }
.card-price { font: 800 27px/1.05 var(--display); letter-spacing: -.025em; color: var(--heading); font-variant-numeric: tabular-nums; }
.card-price .p-main { display: block; }
.card-price .p-conv { display: block; margin-top: 6px; font: 500 13px/1.3 var(--sans); letter-spacing: 0; color: var(--muted); }
.card-facts { margin: 0; font-size: 15px; }
.card-dist { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-km { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 13px; color: var(--mint-ink); background: var(--mint); border-radius: 8px; }
.chip-km b { font: 700 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 4px 9px; font: 600 11px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-radius: 6px; }
.tag.warn { color: var(--warn); background: var(--warn-bg); }
.tag.ok { color: var(--ok); background: var(--ok-bg); }
.card-meta { margin: 0; font-size: 11px; }
.card-act { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.card-act .pill { flex: 1; }
.fav { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .16s var(--ease); }
.fav svg { fill: transparent; }
.fav:active { transform: scale(.94); }
.fav[aria-pressed="true"] { color: var(--on-sun); background: var(--sun); border-color: var(--sun); }
.fav[aria-pressed="true"] svg { fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--border); box-shadow: var(--shadow); }
  .card:hover .card-media img { transform: scale(1.04); }
  .fav:hover { border-color: var(--sun); color: var(--sun); }
}
.empty { display: grid; justify-items: center; gap: 10px; padding: 72px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r); }
.empty h2 { font-size: clamp(28px, 3.4vw, 40px); }
.empty p { max-width: 52ch; color: var(--muted); }

/* mapa v hľadaní (Leaflet) */
.map-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; align-items: start; }
.map-box { position: sticky; top: 160px; height: calc(100svh - 190px); min-height: 420px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.map-list { display: grid; gap: 16px; }
.leaflet-container { font-family: var(--sans); background: var(--surface-2); }
.leaflet-tile-pane { filter: var(--map-filter); }
.pin span { position: absolute; transform: translate(-50%, -100%); padding: 5px 9px; font: 700 12.5px/1 var(--sans); white-space: nowrap; color: var(--on-sun); background: var(--sun); border-radius: 8px; box-shadow: 0 0 0 2px var(--bg), 0 6px 14px rgba(0, 0, 0, .3); transition: transform .15s var(--ease); }
.pin:hover span, .pin.hl span { transform: translate(-50%, -100%) scale(1.1); color: #fff; background: var(--green); }
.pin-cluster span { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; transform: translate(-50%, -50%); font: 700 13px/1 var(--sans); color: #fff; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 3px var(--bg); }
.leaflet-popup-content-wrapper { color: var(--text); background: var(--surface); border-radius: 14px; }
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content .btn { display: inline-block; margin-top: 8px; padding: 7px 14px; font-weight: 600; color: var(--on-sun); background: var(--sun); border: 0; border-radius: 8px; cursor: pointer; }
.leaflet-tooltip.site-tip { padding: 2px 8px; font: 600 11px var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
.leaflet-tooltip.site-tip::before { display: none; }
.u { white-space: nowrap; margin-right: 10px; } .u b { color: var(--text); }

/* detail ponuky: panel sprava */
dialog#detail { position: fixed; inset: 0 0 0 auto; width: min(600px, 100%); max-width: none; height: 100%; max-height: none; margin: 0 0 0 auto; padding: 0; color: var(--text); background: var(--bg); border: 0; border-left: 1px solid var(--line); border-radius: 22px 0 0 22px; box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain; }
dialog#detail[open] { animation: drawerIn .32s var(--ease); }
dialog#detail::backdrop { background: rgba(4, 8, 6, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } }
.dr { position: relative; display: grid; gap: 16px; padding: 24px 28px 32px; }
.dr-x { position: sticky; top: 0; z-index: 3; justify-self: end; margin-bottom: -60px; background: var(--bg); }
.dr-photo { position: relative; margin: 0 0 6px; overflow: hidden; border-radius: 16px; background: var(--surface-2); }
.dr-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.dr-photo .credit { white-space: normal; }   /* s odkazom na zdroj: zalomí sa, aby odkaz nebol odrezaný */
.dr-t { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.08; padding-right: 50px; }
.dr-price { font-size: 36px; }
.warn-box { margin: 0; padding: 14px 16px; color: var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-weight: 600; }
.dr-desc { padding: 18px 20px; background: var(--surface-2); border-radius: 14px; white-space: pre-line; }
.dr-contact, .dr-dist { display: grid; gap: 8px; }
.dr-contact p, .dr-dist p { margin: 0; }
.dr-dist ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.dr-dist li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dr-dist li b { font: 700 14px/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--mint-ink); }
.dr-map { height: 240px; margin-top: 8px; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); }
/* detail: hore cena a čas do školy, pod tým prihláška; podrobnosti zbalené */
.dr-head { display: grid; gap: 8px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.dr-chips li { padding: 5px 10px; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--surface-2); border-radius: 8px; }
.dr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dr-tags .lbl { color: var(--muted); }
.dr-comm { padding: 10px 12px; color: var(--text); background: var(--surface-2); border-radius: var(--r-sm); white-space: normal; }
.dr-comm.warn { color: var(--warn); background: var(--warn-bg); }
.dr-sec { display: grid; gap: 10px; padding: 18px; background: var(--surface-2); border-radius: 16px; }
.dr-sec h3 { font-size: 18px; }
.dr-sec p { margin: 0; }
.dr-trip ul, .dr-keys { display: grid; margin: 0; padding: 0; list-style: none; }
.dr-trip li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dr-trip li:last-child { border-bottom: 0; }
.dt-s, .dt-k { display: grid; min-width: 0; }
.dt-s b, .dt-k b { font-weight: 700; color: var(--heading); }
.dt-s small, .dt-k small { font-size: 12.5px; color: var(--muted); }
.dt-k { text-align: right; }
.dr-trip a { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.dr-keys { gap: 4px; }
.dr-keys b { color: var(--heading); }
.dr-mores { border-top: 1px solid var(--line); }
.dr-more { border-bottom: 1px solid var(--line); }
.dr-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 2px; font-weight: 700; color: var(--heading); cursor: pointer; list-style: none; }
.dr-more summary::-webkit-details-marker { display: none; }
.dr-more-b { display: grid; gap: 8px; padding: 0 2px 16px; color: var(--muted); white-space: pre-line; }
.dr-more-b p { margin: 0; }
.dr-more[open] > .dr-more-b { animation: accIn .4s var(--ease); }
.dr-act { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px -28px -32px; padding: 16px 28px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
.dr-act .pill.sun { flex: 1 1 100%; }

/* ===== 7. DLHÉ STRÁNKY: obsah vľavo, text vpravo ===== */
.doc { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 72px; align-items: start; padding-top: 24px; }
.doc-toc { position: sticky; top: 100px; max-height: calc(100vh - 140px); overflow: auto; }
.doc-toc ol { display: grid; gap: 2px; margin: 14px 0 0; padding: 0; list-style: none; }
.doc-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 10px; font-size: 14.5px; line-height: 1.35; color: var(--muted); text-decoration: none; border-radius: 10px; transition: color .15s ease, background-color .15s ease; }
.doc-toc a .lbl { padding-top: 1px; }
.doc-toc a:hover { color: var(--text); }
.doc-toc a.on { color: var(--heading); background: var(--surface-2); }
.doc-toc a.on .lbl { color: var(--dot); }   /* --dot: v tmavom režime svetlejšia zelená */
.doc-sec { padding: 40px 0 8px; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.doc-sec:first-child { border-top: 0; padding-top: 0; }
.doc-sec h2 { margin-bottom: 20px; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.08; hyphens: auto; overflow-wrap: break-word; }   /* „novoprichádzajúcich“ na úzkom mobile */
.doc-sec ul, .doc-sec ol { display: grid; gap: 10px; margin: 0 0 16px; padding-left: 22px; }
.doc-sec li::marker { color: var(--green); }
.doc-sec ul.check, .doc-sec ul.links, .doc-sec ul.not-list { padding-left: 0; list-style: none; }
.doc-sec ul.check li { position: relative; padding: 12px 16px 12px 48px; background: var(--surface-2); border-radius: 12px; }
.doc-sec ul.check li::before { content: "✓"; position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 22px; height: 22px; font-size: 13px; color: #fff; background: var(--green); border-radius: 50%; }
.doc-sec ul.links li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc-sec ul.links a { font-weight: 600; text-decoration: none; }
.num-list { counter-reset: n; list-style: none; padding-left: 0 !important; }
.num-list li { position: relative; padding-left: 44px; counter-increment: n; }
.num-list li::before { content: counter(n); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 26px; height: 26px; font: 700 13px/1 var(--sans); color: var(--green); border: 2px solid var(--green); border-radius: 50%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.table-wrap { overflow-x: auto; margin: 10px 0 18px; border: 1px solid var(--line); border-radius: 14px; }
.costs { width: 100%; border-collapse: collapse; font-size: 15px; }
.costs th, .costs td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.costs thead th { font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.costs tbody tr:last-child > * { border-bottom: 0; }
.costs td.num { text-align: right; }
.rules { display: grid; gap: 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
.rule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rule dt { color: var(--muted); } .rule dd { margin: 0; font-weight: 600; }
.log-day { padding: 14px 0; border-top: 1px solid var(--line); }
.log-day h3 { margin-bottom: 8px; color: var(--heading); }
.about-me { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; align-items: start; }
.about-me img { width: 160px; height: 200px; object-fit: cover; object-position: 50% 20%; border-radius: 20px; }
.gl { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.gl-pop { position: absolute; z-index: 60; max-width: 300px; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.gl-pop b { color: var(--green); }
.gl-group { margin: 20px 0 8px; font-size: 20px; }
.gl-list { display: grid; grid-template-columns: fit-content(38%) minmax(0, 1fr); gap: 8px 18px; margin: 0; }   /* dlhý pojem sa zalomí, vysvetlenie nezúži */
.gl-list dt { font-weight: 700; } .gl-list dd { margin: 0; color: var(--muted); }

/* vysoké školy: karty z schools.js (schoolCardHtml) v novom vzhľade */
.sch-form { margin: 0 0 18px; }
.sch-try { margin: 26px 0 30px; }
.sch-try .city-strip { margin-top: 10px; }
.sch-found { margin: 0 0 16px; }
.sch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 18px; }
.sc { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.sc-dorm { margin: 0; font-size: 14.5px; color: var(--muted); }
.sc-dorm b { color: var(--heading); }
.sc-dorm span { display: block; margin-top: 2px; font-weight: 600; color: var(--green); }
.sc-more { border-top: 1px solid var(--line); }
.sc-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 0; font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none; }
.sc-more summary::-webkit-details-marker { display: none; }
.sc-more .plus { width: 26px; height: 26px; }
.sc-more[open] { display: grid; gap: 10px; padding-bottom: 6px; }
.sc-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 14px; }
.sc-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.sc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: start; }   /* štítok typu sa pri dlhom názve zalomí pod neho */
.sc-head > div { flex: 1 1 200px; min-width: 0; }
.sc h3 { hyphens: auto; overflow-wrap: break-word; }
.sc h3 { font-size: 24px; }
.sc-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.sc-type { flex: none; padding: 5px 10px; font: 600 11px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mint-ink); background: var(--mint); border-radius: 6px; white-space: nowrap; }
.sc-type.t-private, .sc-type.t-foreign { color: var(--peach-ink); background: var(--peach); }
.sc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sc-facts > div { padding: 12px 14px; background: var(--surface-2); border-radius: 12px; }
.sc-facts dt { font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-facts dd { margin: 4px 0 0; font: 700 16px/1.3 var(--sans); color: var(--heading); }
.sc-facts dt, .sc-facts dd { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.sc .sub, .sc .na { font-weight: 400; color: var(--muted); }
.sc-note, .sc-also, .sc-addr { margin: 0; font-size: 14px; color: var(--muted); }
.sc-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 14px; }
.sc .btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-weight: 600; text-decoration: none; color: var(--on-sun); background: var(--sun); border: 1px solid var(--sun); border-radius: 10px; }
.sc .btn.outline, .sc .btn.tonal { color: var(--text); background: transparent; border-color: var(--border); }
.sc .btn.sc-housing { color: var(--on-sun); background: var(--sun); border-color: var(--sun); }
.sch-src { margin-top: 36px; }

/* pridať inzerát */
.add-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.add-form { display: grid; gap: 22px; }
.add-form fieldset { display: grid; gap: 16px; margin: 0; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.add-form legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font: 800 26px/1.1 var(--display); letter-spacing: -.02em; color: var(--heading); }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld label { font: 600 11.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fld input, .fld select, .fld textarea { width: 100%; padding: 13px 16px; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); }
.fld select { -webkit-appearance: none; appearance: none; padding-right: 36px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ba7a1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.fld select option { color: #111; background: #fff; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--sun); outline: none; box-shadow: 0 0 0 3px rgba(255, 106, 43, .18); }
.fld-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fld-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hint { margin: 0; font-size: 13.5px; color: var(--muted); }
label.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; }
label.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; }
.err { margin: 0; padding: 12px 16px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); }
.add-form > .pill { justify-self: start; }
.add-rules { position: sticky; top: 100px; padding: 24px; background: var(--surface-2); border-radius: var(--r); }
.add-rules ul { display: grid; gap: 10px; margin: 14px 0 0; padding-left: 20px; color: var(--muted); }
.add-rules li::marker { color: var(--green); }
.add > .route { margin: 8px 0 48px; }
.done { display: grid; gap: 12px; padding: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.done h2 { font-size: clamp(30px, 4vw, 52px); }

/* zásady a podmienky (legal.js má vlastné triedy) */
.page-head { padding: 56px 0 24px; }
.page-title { font: 800 clamp(36px, 5vw, 68px)/1.04 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.page-head .lead { margin-top: 18px; }
.guide.legal { max-width: 760px; }
.guide.legal .g-sec { padding: 34px 0 6px; border-top: 1px solid var(--line); }
.guide.legal .g-sec h2 { margin-bottom: 16px; font-size: clamp(26px, 3vw, 38px); }
.guide.legal ul { display: grid; gap: 8px; padding-left: 22px; } .guide.legal li::marker { color: var(--green); }
.legal .btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; font-weight: 600; text-decoration: none; border-radius: var(--r-btn); cursor: pointer; }
.legal .btn.primary { color: var(--on-sun); background: var(--sun); border: 1px solid var(--sun); }
.legal .btn.outline { color: var(--text); background: transparent; border: 1px solid var(--border); }
.legal .ok { color: var(--ok); font-weight: 600; }

/* ===== 8. ODKRÝVANIE ===== */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.rv.in { opacity: 1; transform: none; }
/* pri prekliknutí na inú stránku nastúpia jej sekcie zdola postupne (core.js pridá #app.enter) */
#app.enter > * { animation: pageIn .6s var(--ease) backwards; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes pageIn { from { opacity: 0; transform: translateY(24px); } }
#app:not(.again) .grid > .card { animation: cardIn .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
#app.again .results { animation: fadeIn .25s ease-out; }   /* zmena filtra: výsledky sa krátko prelínajú */
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } }

/* ===== 9. MENŠIE OBRAZOVKY ===== */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .hdr-tools { margin-left: auto; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc-toc { position: static; max-height: none; margin-bottom: 24px; padding: 16px; background: var(--surface-2); border-radius: var(--r); }
  .doc-toc ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .hero-grid { gap: 28px 36px; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "map" "near"; }
  .hero-copy { padding-top: 8px; }
  .checks-grid, .why-grid, .faq-grid, .add-grid, .map-split { grid-template-columns: minmax(0, 1fr); }
  .faq .sec-t, .not-box, .add-rules, .map-box { position: static; }
  .why-grid { gap: 32px; }
  .why-photo { max-width: 420px; }
  .map-box { height: 60svh; }
  .city-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .city-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* cesta zvisle: zastávky pod sebou, čiara vľavo */
  .route { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .route li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; }
  .route .stop { grid-row: span 2; }
  .route h3, .route h2 { margin-top: 9px; }
  .route::before, .route::after { top: 22px; bottom: 22px; left: 20.5px; right: auto; width: 3px; height: auto; }
  .route::after { transform-origin: center top; transform: scaleY(0); }
  .route.live::after { transform: scaleY(var(--p, 0)); }
  .route.live li { display: block; }
  .stop-tab { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; }
  .stop-tab .stop { grid-row: span 2; }
  .stop-t { margin-top: 9px; }
  .how-cities, .how-schools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .f-toggle { display: inline-flex; }
  .filters .f-panel { display: none; flex-basis: 100%; }
  .filters.open .f-panel { display: flex; }
  .view-seg { margin-left: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hdr { min-height: 60px; gap: 10px; }
  #menu { top: 60px; }
  .filters { top: 60px; padding: 8px 0; }
  .hdr-tools .mini-sel, .hdr-tools #theme-btn, .hdr-add { display: none; }
  .sec, .final { padding-top: 88px; }
  .finder-form { flex-direction: column; }
  .finder-form .pill { width: 100%; }
  .pill { max-width: 100%; padding-top: 8px; padding-bottom: 8px; line-height: 1.2; white-space: normal; text-align: center; }   /* dlhé popisy (uk) sa na úzkom displeji zalomia */
  .dmap-panel { padding: 12px; gap: 12px; border-radius: 18px; }
  .lsite b { display: none; }   /* skratky fakúlt by sa na malej mape prekrývali; názov je pri ťuknutí */
  .lmk-dot { width: 14px; height: 14px; margin: 2px; }   /* menšie body na malej mape (ikona ostáva 18 px, ťuká sa ľahko) */
  .mchip { min-height: 34px; padding: 6px 10px; }
  .mchip small { display: none; }   /* mesto je v nadpise mapy; tlačidlá sa zmestia do 2 až 3 riadkov */
  .near-row { grid-template-columns: 12px minmax(0, 1fr); }
  .near-r { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; gap: 10px; }
  .city-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; gap: 8px; }
  .city-mosaic .wide { grid-column: span 1; }
  .city-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ctile-txt { padding: 12px 14px; }
  .city-banner { border-radius: 18px; }
  .sc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-facts > div { padding: 10px 11px; }
  .sc-facts dt { letter-spacing: .04em; }
  .dock { padding: 10px; border-radius: 16px; }
  .how-pane { padding: 14px; }
  .how-cities, .how-schools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-city { padding: 12px; column-gap: 6px; }
  .how-city b { font-size: 17px; overflow-wrap: anywhere; }
  .dr-trip li { grid-template-columns: minmax(0, 1fr) auto; }
  .dr-trip a { grid-column: 1 / -1; }
  .how-cmp button { grid-template-columns: 12px minmax(0, 1fr); }
  .how-cmp .chip-km, .how-cmp em { grid-column: 2; justify-self: start; text-align: left; }
  .final-in::before { right: -40%; }
  .final-in::after { right: calc(-40% + min(80vw, 760px) / 2 - 7px); }
  .fld-row, .fld-row.three, .facts, .rule, .about-me { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .seg { display: flex; flex-wrap: wrap; max-width: 100%; }   /* všetky typy viditeľné, nič neschované za okrajom */
  .seg-a { flex: 1 1 auto; justify-content: center; }
  /* tabuľka nákladov: riadky ako karty (mesto + odkaz hore, ceny pod tým s popisom) */
  .costs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .costs, .costs tbody { display: block; }
  .costs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .costs tbody tr:last-child { border-bottom: 0; }
  .costs th, .costs td { padding: 0; border: 0; }
  .costs th[scope="row"] { font-weight: 600; color: var(--heading); }
  .costs td.num { grid-column: 2; grid-row: 1; }
  .costs td[data-label] { grid-column: 1 / -1; display: grid; gap: 2px; }
  .costs td[data-label]::before { content: attr(data-label); font: 600 11px/1.9 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .f-field select, .f-field input { max-width: none; width: 100%; }
  .f-panel .f-field, .f-q { flex: 1 1 100%; }
  dialog#detail { border-radius: 0; width: 100%; }
  .dr { padding: 18px 18px 28px; } .dr-act { margin: 8px -18px -28px; padding-left: 18px; padding-right: 18px; }
  .gl-list { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }   /* pojem nad vysvetlením */
  .gl-list dd { margin-bottom: 12px; }
}

/* ===== POHYB PRI MYŠI (len skutočná myš; na dotyku a s obmedzeným pohybom nič) ===== */
@media (hover: hover) and (pointer: fine) {
  /* tlačidlá: farba sa „vleje“ zľava (transform pseudo-prvku), šípka poskočí doprava */
  .pill { position: relative; isolation: isolate; overflow: hidden; }
  .pill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill, var(--surface-2)); transform: scaleX(0); transform-origin: left center; transition: transform .42s var(--ease); }
  .pill:hover::before { transform: none; }
  .pill.sun { --fill: var(--sun-2); }
  .pill.sun:hover { background: var(--sun); }
  .pill.light { --fill: var(--green); }
  .pill.light:hover { color: #fff; border-color: var(--green); }
  .pill.on-green { --fill: rgba(255, 255, 255, .16); }
  .pill svg { transition: transform .25s var(--ease); }
  .pill:hover svg { transform: translateX(3px); }
  .magnetic { transition: transform .3s var(--ease), background-color .2s ease, border-color .2s ease, color .2s ease; }
  /* karty a riadky sa nadvihnú alebo posunú */
  .card { transition: border-color .2s ease, box-shadow .25s ease, transform .3s var(--ease); }
  .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(15, 26, 21, .4); }
  .mchip:hover { transform: translateY(-2px); }
  .ctile:hover .ctile-img img { transform: scale(1.06); }
  .near-dot { transition: transform .2s var(--ease); }
  .near-row:hover .near-dot, .near-row.hl .near-dot { transform: scale(1.4); }
  .how-city:hover { border-color: var(--green); transform: translateY(-2px); }
  .how-city:hover svg { color: var(--sun); transform: translateX(3px); }
  .how-cmp button:hover { border-color: var(--green); transform: translateX(4px); }
  .stop-tab:hover .stop { transform: scale(1.08); }
  .sc { transition: border-color .2s ease, transform .3s var(--ease); }
  .sc:hover { border-color: var(--border); transform: translateY(-3px); }
  .foot-cols a:not(.logo) { transition: color .15s ease, transform .25s var(--ease); }
  .foot-cols a:not(.logo):hover { transform: translateX(3px); }
  .nav-a { transition: color .15s ease, background-color .15s ease; }
  .nav-a:hover { background: var(--surface-2); }
  .theme-toggle:hover svg { rotate: 20deg; }
  .fav:hover { transform: scale(1.08); }
}

/* ===== 10. ANIMÁCIE: logo, prepínač motívu, prechody stránok (krátke, ease-out, len transform/opacity) ===== */
/* logo: po kliknutí domček poskočí (prikrčenie, skok, dopad), oči žmurknú, úsmev sa roztiahne, „Hub“ sa nadhodí */
.logo svg { overflow: visible; }
.logo .lm-house, .logo .lm-eyes, .logo .lm-smile { transform-box: fill-box; transform-origin: 50% 100%; }
.logo .lm-eyes { transform-origin: 50% 50%; }
.logo .lm-smile { transform-origin: 50% 0; transition: transform .3s var(--ease); }
.logo b { display: inline-block; }
.logo.pop svg { animation: lmTilt .7s var(--ease); }
.logo.pop .lm-house { animation: lmHop .7s var(--ease); }   /* tvar skoku je v kľúčových snímkach, krivka bez prekmitu */
.logo.pop .lm-eyes { animation: lmBlink .36s .2s ease-out; }
.logo.pop .lm-smile { animation: lmGrin .6s .12s var(--ease); }
.logo.pop b { animation: lmHub .62s .06s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .logo:hover .lm-smile { transform: scale(1.14, 1.2); }
}
@keyframes lmTilt { 0%, 100% { transform: none; } 30% { transform: rotate(-7deg); } 62% { transform: rotate(3deg); } }
@keyframes lmHop {
  0%, 100% { transform: none; }
  16% { transform: translateY(1px) scale(1.12, .84); }
  44% { transform: translateY(-4.5px) scale(.94, 1.08); }
  72% { transform: translateY(0) scale(1.06, .94); }
}
@keyframes lmBlink { 0%, 100% { transform: none; } 45% { transform: scaleY(.1); } }
@keyframes lmGrin { 0%, 100% { transform: none; } 45% { transform: scale(1.3, 1.45); } }
@keyframes lmHub { 0%, 100% { transform: none; } 34% { transform: translateY(-5px) rotate(-6deg); } 66% { transform: translateY(1px) rotate(1deg); } }

/* prepínač motívu: mesiac sa odtočí a zmenší, slnko sa vytočí (a naopak) */
.theme-toggle { overflow: hidden; }
.theme-toggle svg { grid-area: 1 / 1; transition: transform .5s var(--ease), opacity .22s ease-out, scale .12s ease-out, rotate .3s var(--ease); }
.theme-toggle .ic-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="dark"] .theme-toggle .ic-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
:root[data-theme="dark"] .theme-toggle .ic-sun { opacity: 1; transform: none; }
.theme-toggle:active svg { scale: .88; }

/* prechody (View Transitions): hlavička stojí, obsah sa prelína; motív sa rozleje v kruhu (clip-path v core.js) */
header#site-header { view-transition-name: site-header; }
:root[data-vt="theme"] header#site-header { view-transition-name: none; }   /* pri zmene motívu sa mení celá obrazovka naraz */
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
:root[data-vt="page"]::view-transition-old(root) { animation: vtOut .18s cubic-bezier(.4, 0, 1, 1) both; }
:root[data-vt="page"]::view-transition-new(root) { animation: none; }   /* nový obsah nastupuje sám (#app.enter) */
:root[data-vt="swap"]::view-transition-old(root) { animation: vtFadeOut .14s ease-out both; }
:root[data-vt="swap"]::view-transition-new(root) { animation: vtFadeIn .3s var(--ease) both; }
:root[data-vt="theme"]::view-transition-old(root), :root[data-vt="theme"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtFadeOut { to { opacity: 0; } }
@keyframes vtFadeIn { from { opacity: 0; } }

/* kto má vypnuté animácie, nehýbe sa nič a všetko je hneď vidieť */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .rv { opacity: 1; transform: none; }
  .route:not(.live)::after { transform: none; }
}