/* =====================================================================
   KAVÁRNY BY NA DOHLED — Kopeček a Čechovka
   Nadstavba nad ds.css pro stránky kaváren (úvod, kavárny, spolek,
   e-shop, pokladna, razítka, soukromí). Čtenářské projekty
   (biblickezaklady, priruckauzdraveni) ji nenačítají, drží si ds.css.
   ---------------------------------------------------------------------
   · web zůstává černobílý — barvy značek (terakota, červená) se na webu
     objevují jen jako tón mlhy v dlaždicích kaváren na úvodu
   · všechno je zhruba o třetinu až polovinu menší než v ds.css:
     písmo, odsazení, tlačítka, pás, hlavička
   · žádné linkové kresby ani obrysy: obraz = rozmazaná fotka pod
     závojem barvy podkladu (.mlha); každá animace má konec
   · loga jsou černá SVG; v inverzních plochách a v tmavém režimu se
     otočí filtrem, stejně jako dřív wordmark
   ===================================================================== */

:root { --mw: 1180px; --gut: clamp(16px, 3.4vw, 40px); }

/* ---------------------------- TYPOGRAFIE ---------------------------- */
.d1.d1 { font-size: clamp(1.9rem, 5.4vw, 4.4rem); }
.d2.d2 { font-size: clamp(1.45rem, 3.2vw, 2.6rem); }
.d3.d3 { font-size: clamp(1.08rem, 1.8vw, 1.5rem); }
.d4.d4 { font-size: clamp(.95rem, 1.2vw, 1.1rem); }
.lead { font-size: clamp(.98rem, 1.25vw, 1.12rem); max-width: 44ch; }
.body { font-size: clamp(.9rem, 1vw, .97rem); }
.body-sm { font-size: .82rem; }
.num.num { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.mi { font-size: clamp(9px, .9vw, 10px); letter-spacing: .26em; }

/* ----------------------------- ODSAZENÍ ----------------------------- */
.pad { padding: clamp(40px, 5.6vw, 88px) 0; }
.pad-sm { padding: clamp(26px, 3.4vw, 50px) 0; }
.top { padding: clamp(92px, 12vh, 128px) 0 clamp(28px, 3.6vw, 48px); }
.top-title { margin: var(--s3) 0 var(--s5); }
.sec-head { margin-bottom: clamp(18px, 2.4vw, 32px); padding-bottom: var(--s3); }
.sec-head .idx, .sec-head .lbl { font-size: 10px; }
.grid { gap: var(--s5) var(--gut); }
.mb-5 { margin-bottom: var(--s4); }
.mt-6 { margin-top: var(--s5); } .mt-7 { margin-top: var(--s6); }

/* ---------------------------- PRVKY -------------------------------- */
.btn { min-height: 44px; padding: 0 var(--s4); gap: var(--s4); font-size: 10.5px; letter-spacing: .18em; }
.btn .arw { font-size: 13px; }
.card { padding: var(--s4); gap: var(--s2); }
.row { padding: var(--s3) var(--s2); }
.row-t { font-size: .92rem; }
.row-t small { font-size: .78rem; }
.row-k { font-size: 9.5px; min-width: 38px; }
.marq { padding: var(--s3) 0; }
.marq-track > span { font-size: clamp(.95rem, 1.9vw, 1.4rem); padding-right: clamp(18px, 2.4vw, 34px); }
.marq-track > span::after { width: 7px; height: 7px; margin-left: clamp(18px, 2.4vw, 34px); }
.hdr { padding: 10px var(--gut); }
.hdr-nav a { font-size: 9.5px; }
.ver-switch { padding: 7px 11px; font-size: 9px; }
.theme-btn { width: 32px; height: 32px; }
.theme-btn svg { width: 15px; height: 15px; }
.ftr { padding: clamp(36px, 4.6vw, 64px) 0 var(--s5); }
.ftr-base { margin-top: var(--s6); }
.map-wrap { max-width: 860px; }

/* ------------------------------- LOGA ------------------------------- */
.logo-ink { filter: invert(var(--invert)); }
.on-ink .logo-ink { filter: invert(calc(1 - var(--invert))); }
.hdr-brand img.logo-nd { height: 26px; }
.hdr-brand img.logo-kav { height: 24px; }
.hdr-brand .by { font-size: 8.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-46); }
.ftr-mark { height: 38px; }
.brand-h1 { margin: var(--s3) 0 var(--s4); }
.brand-h1 img { width: min(72%, 330px); height: auto; }

/* ------------------------- VELKÁ ZNAČKA „NO" ------------------------ */
.ghost-mark { position: relative; overflow: hidden; isolation: isolate; }
.ghost-mark::after {
  content: '';
  position: absolute; z-index: -1;
  right: -12%; bottom: -30%;
  width: min(70vw, 720px); aspect-ratio: 952 / 466;
  background: url('/nove/img/znacky/znacka-cerna.svg') no-repeat center / contain;
  opacity: .035;
  filter: invert(var(--invert));
  pointer-events: none;
  transition: transform .9s var(--ease);
}
.on-ink.ghost-mark::after { filter: invert(calc(1 - var(--invert))); opacity: .07; }
@media (max-width: 760px) { .ghost-mark::after { right: -30%; bottom: -12%; width: 120vw; } }

/* ------------------------ HERO = DVĚ KAVÁRNY ------------------------
   Celé úvodní hero jsou dvě kavárny vedle sebe. Každá polovina je jeden
   odkaz; Kopeček inverzní, Čechovka na papíře.
   ------------------------------------------------------------------- */
.hero2 { padding-top: 58px; }
.hero2-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); padding: var(--s4) var(--gut) var(--s3); border-bottom: var(--rule) solid var(--ink); }
.hero2-meta h1 { font-size: 10px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; }
.duo { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--rule) solid var(--ink); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
.duo-tile {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s4);
  min-height: clamp(380px, 62vh, 560px);
  padding: clamp(20px, 3vw, 40px) var(--gut);
  transition: transform .12s var(--ease-snap);
}
.duo-tile + .duo-tile { border-left: var(--rule) solid var(--ink); }
@media (max-width: 760px) { .duo-tile + .duo-tile { border-left: 0; border-top: var(--rule) solid var(--ink); } }
.duo-tile:hover.ghost-mark::after { transform: translateX(-5%) rotate(-3deg); }
.duo-tile:active { transform: translateY(2px); }
.duo-art { display: flex; align-items: center; justify-content: center; min-height: 0; }
.duo-art .mlha { width: min(100%, 460px); }
.duo-logo { width: min(80%, 260px); height: auto; }

.duo-foot { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: end; }
.duo-foot .row-v { font-size: 1.1rem; transition: transform .28s var(--ease); }
.duo-tile:hover .duo-foot .row-v { transform: translateX(6px); }

/* pás s odkazem na spolek a pás „znáte nás jako…" */
.note-band { border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); }
.link-band { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; padding: var(--s5) 0; border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); transition: padding .2s var(--ease); }
.link-band:hover { padding-left: var(--s3); }
@media (max-width: 560px) { .link-band { grid-template-columns: 1fr auto; } .link-band .mlha { display: none; } }

/* ------------------------------- MLHA --------------------------------
   Jediný obrazový prvek webu kaváren (od 10/2026 místo linkových kreseb
   a animovaných obrysů). Skutečná fotka z kavárny je silně rozmazaná a
   leží pod poloprůhledným závojem v barvě podkladu — bílým na papíře,
   černým v inverzních plochách (.on-ink) i v tmavém režimu. Fotka jen
   prosvítá jako nálada, nic nevypráví a nekřičí.

   PRINCIP KONCE ANIMACÍ: každý pohyb na webu má konec. Mlha se při
   vjetí do výřezu jednou „zaostří“ (ds.js přidá .in k .rv) a pak stojí.
   Žádné kreslení čar ani obrysy. Trvalé jsou jen dvě výjimky: pomalé
   otáčení tvarů značky v mlze (.mlha-tvary, desítky sekund na otáčku)
   a pás .marq na úvodu. Reakce na myš doběhne a zastaví se.

   Varianty: .mlha-hero (dlaždice kaváren na úvodu, 16:10, tón barvy
   značky přes --c1 / --c2), .mlha-svisla (4:5), .mlha-mini (pás odkazu).
   Fotky: /images/mlha/*.jpg, max 520 px — rozmazané víc nepotřebují.
   ------------------------------------------------------------------- */
.mlha {
  --zavoj: var(--paper);
  --zavoj-o: .5;
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  background: var(--zavoj);
}
.on-ink .mlha { --zavoj: var(--ink); --zavoj-o: .46; }
.mlha img {
  position: absolute; inset: -12%;
  width: 124%; height: 124%; max-width: none;
  object-fit: cover;
  filter: blur(26px) saturate(1.1);
  transform: scale(1.04);
}
/* závoj: barva podkladu, poloprůhledný (bez backdrop-filter — fotka je
   rozmazaná sama a obyčejné skládání vypadá ve všech prohlížečích stejně) */
.mlha::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--zavoj);
  opacity: var(--zavoj-o);
}
/* tón barvy značky nad závojem (jen hero na úvodu), obyčejné skládání */
.mlha-ton {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(70% 80% at 82% 88%, color-mix(in srgb, var(--c2) 85%, transparent) 0%, transparent 70%),
    radial-gradient(65% 75% at 14% 18%, color-mix(in srgb, var(--c1) 75%, transparent) 0%, transparent 72%);
  opacity: .55;
}
.on-ink .mlha-ton { opacity: .5; }

/* jediná animace: zaostření do mlhy při prvním vjetí do výřezu */
.mlha.rv { opacity: 1; transform: none; }
.mlha.rv img { filter: blur(40px) saturate(.6); transform: scale(1.18); transition: filter 1.6s var(--ease), transform 1.6s var(--ease); }
.mlha.rv::after { opacity: .92; transition: opacity 1.6s var(--ease); }
.mlha.rv.in img { filter: blur(26px) saturate(1.1); transform: scale(1.04); }
.mlha.rv.in::after { opacity: var(--zavoj-o); }

.mlha-hero { aspect-ratio: 16 / 10; max-width: 460px; }
.mlha-svisla { aspect-ratio: 4 / 5; max-width: 380px; }
.mlha-mini { width: 64px; aspect-ratio: 1; border-radius: 14px; }

/* Tvary značky v mlze: plný oblouk D a kruh O (ne obrysy), matné, nad
   závojem. Dvojice se jako celek pomalu otáčí, D se k tomu převaluje;
   pohyb myši je posune s paralaxou (--px, --py z nove/mlha.js). Jediná
   trvalá animace webu kromě pásu .marq — pomalá (desítky sekund na
   otáčku), takže neruší. Na tónovaném hero jsou v barvách značky, jinde
   v barvě písma s nízkou krytostí. */
.mlha-tvary {
  --px: 0; --py: 0;
  --tv1: color-mix(in srgb, var(--ink) 16%, transparent);
  --tv2: color-mix(in srgb, var(--ink) 10%, transparent);
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
}
.on-ink .mlha-tvary {
  --tv1: color-mix(in srgb, var(--paper) 18%, transparent);
  --tv2: color-mix(in srgb, var(--paper) 11%, transparent);
}
.mlha-hero .mlha-tvary {
  --tv1: color-mix(in srgb, var(--c1) 50%, transparent);
  --tv2: color-mix(in srgb, var(--c2) 38%, transparent);
}
.tv-skup {
  position: absolute; left: 50%; top: 50%;
  width: 54%; aspect-ratio: 952 / 466;
  translate: calc(-50% + var(--px) * 14px) calc(-50% + var(--py) * 10px);
  animation: tvOtoc 90s linear infinite;
}
.mlha-svisla .tv-skup { width: 76%; }
.tv {
  position: absolute; bottom: 0;
  opacity: 0;
  filter: blur(1.5px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), inset 0 0 24px color-mix(in srgb, #fff 12%, transparent);
  transition: opacity 1.4s var(--ease) .5s;
}
/* oblouk D: rovná spodní hrana, půlkruhový vršek (poměry ze značky) */
.tv-d {
  left: 0; width: 47%; height: 95.7%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(160deg, var(--tv1), var(--tv2));
  translate: calc(var(--px) * -26px) calc(var(--py) * -18px);
  animation: tvPrevaluj 38s ease-in-out infinite alternate;
}
.tv-o {
  right: 0; width: 51.6%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--tv1), var(--tv2) 72%);
  translate: calc(var(--px) * 30px) calc(var(--py) * 22px);
}
.mlha.in .tv, .mlha:not(.rv) .tv { opacity: 1; }
@keyframes tvOtoc { to { rotate: 360deg; } }
@keyframes tvPrevaluj { 0% { rotate: -12deg; } 100% { rotate: 14deg; } }
@media (prefers-reduced-motion: reduce) {
  .tv-skup, .tv-d { animation: none; }
  .tv { transition: none; }
}
.art-cell { display: flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .mlha.rv img, .mlha.rv::after { transition: none; }
  .mlha.rv img { filter: blur(26px) saturate(1.1); transform: scale(1.04); }
  .mlha.rv::after { opacity: var(--zavoj-o); }
}

/* ------------------------- COOKIE LIŠTA MENŠÍ -----------------------
   Lištu vkládá nove/track.js s vlastními styly; html#… je přebije. */
html #nadoConsent { padding: 12px var(--gut); gap: 10px 20px; }
html #nadoConsent .nc-h { font-size: 9px; margin-bottom: 4px; }
html #nadoConsent p { font-size: 12px; line-height: 1.45; }
html #nadoConsent .nc-btns { gap: 6px; }
html #nadoConsent button { min-height: 36px; padding: 0 12px; font-size: 9.5px; letter-spacing: .14em; }
@media (max-width: 820px) {
  html #nadoConsent p { font-size: 11px; }
  html #nadoConsent .nc-btns { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-mark::after, .duo-tile { transition: none; }
}

/* ------------- MĚKKÝ PŘECHOD ÚVOD ↔ KAVÁRNY (nove/prechod.js) ---------
   Obraz kavárny (fotka v mlze) a logo plynule přerostou z dlaždice na
   úvodu do hero stránky kavárny a zpět; fotka mezi poměry 16:10 a 4:5
   jen změní výřez (cover). Zbytek stránky se prolne. Animuje se jen
   transform a opacity, každá animace má konec. */
.prechod-bezi .hdr { view-transition-name: prechod-hlavicka; }
::view-transition-group(prechod-tvar),
::view-transition-group(prechod-logo) { animation-duration: .8s; animation-timing-function: cubic-bezier(.22, .8, .2, 1); }
::view-transition-old(prechod-tvar),
::view-transition-new(prechod-tvar) { animation-duration: .8s; height: 100%; object-fit: cover; }
::view-transition-group(prechod-hlavicka) { animation-duration: .45s; }
::view-transition-old(root) { animation: prechodVen .34s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: prechodDovnitr .55s .22s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes prechodVen { to { opacity: 0; } }
@keyframes prechodDovnitr { from { opacity: 0; transform: translateY(16px); } }
.bez-prechodu, .bez-prechodu * { transition: none !important; }
/* bez View Transitions: jen prolnutí obsahu (stránka se nenačítá) */
.prechod-ven body > header, .prechod-ven body > main, .prechod-ven body > footer { opacity: 0; transition: opacity .2s ease; }
.prechod-dovnitr body > main, .prechod-dovnitr body > footer { animation: prechodDovnitr .5s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}