/* kontakt.css · GENEROVÁNO tools/stavba.mjs 23. 10. 2026 9:40:03. Needitovat: zdroj je src/stranky/kontakt/*.css.
   Soubory: kontakt.css */

/* ===== src/stranky/kontakt/kontakt.css ===== */
/* Kontakt a příjezd (S3 subtle, 21. 10. 2026; dřív builder Úvod + Kontakt, kolo 2 a 3). Prefixy: kontakt- cesta- prijezd-
   pred- klice-. Stránka skládá komponenty kap. 10 (12-plan-cozy.md): karta, spojení, foto, cedulka na mapě, osa,
   fakt-štítek, citace. Bez látky (dlažba ze zádveří pryč), lněné plochy, stehů a natočení.
   Sekce: 10 vizitka jako čistá karta s velkým telefonem a lucerna před domem jako fotka (dva sloupce od 699 px);
   20 cesta: mapa OSM s tenkým okrajem (jako mapa výletů na Okolí), cesta plnou švestkovou linkou, rovné cedulky na
   místech z dat, telefon výřez 4 : 5 a kroky pod mapou; 30 osa dne; 40 dva čisté sloupce Přivezte a Už tu je;
   50 klíče na vlně. */

/* ---------- 10 · vizitka a dům ---------- */
.kontakt-telo { display: grid; gap: clamp(40px, 2rem + 2vw, 56px) var(--mezera); align-items: center; }
.kontakt-text { display: grid; justify-items: start; }
.kontakt-text .perex { margin-top: var(--h-perex); }
.kontakt-vizitka { margin-top: clamp(28px, 1rem + 1.6vw, 40px); inline-size: min(100%, 30rem); padding-bottom: clamp(8px, 1vw, 14px); }
.kontakt-jmeno.karta-nazev { margin-bottom: 2px; }
.kontakt-adresa { margin-bottom: 8px; color: var(--cokolada-2); }
.kontakt-gps .spojeni-hodnota { font-size: 1.0625rem; }
.kontakt-akce { margin-top: clamp(24px, 1rem + 1vw, 32px); }
.kontakt-jinde { margin-top: 14px; max-inline-size: 30em; font-size: var(--t-text); line-height: 1.55; color: var(--cokolada-2); }
.kontakt-jinde a { display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--cokolada); font-weight: var(--w-ui); text-decoration: underline solid var(--linka-2); text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.kontakt-jinde a:hover { color: var(--svestka); text-decoration-color: currentColor; }
/* lucerna 2 : 3 ve výřezu 4 : 5: ubrat nebe nahoře jen málo (špička stříšky zůstane), zbytek dole z keřů */
.kontakt-dum-foto img { object-position: 50% 15%; }
@media (min-width: 699px) {
  .kontakt-telo { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kontakt-text { grid-column: 1 / span 7; }
  .kontakt-dum { grid-column: 8 / -1; }
}
@media (min-width: 699px) and (max-width: 1023px) {
  .kontakt-text { grid-column: 1 / span 6; }
  .kontakt-dum { grid-column: 7 / -1; }
}
@media (max-width: 698px) {
  .kontakt-dum { inline-size: min(100%, 26rem); }
}

/* ---------- 20 · cesta k domu: jízda od Rožnova se kreslí posunem (K, zadání 16) ---------- */
/* Scéna = mapa a kroky. js/cesta.js podle posunu stránky kreslí trasu (stroke-dashoffset čáry a lemu s pathLength 1,
   čelo jízdy = malý kosočtverec) a kroky přepíná data-stav="ceka | ted | hotovo" (na mapě i v seznamu). Když se scéna
   vejde do okna pod lepivé lišty, připne se (.je-pripnuta: výška jízdy --jizda-vyska, vrch scény --scena-vrch); jinak
   se kreslí při průjezdu scény oknem. Bez JS (nebo při chybě modulu) je trasa celá a kroky bez stavů. */
.cesta-hlava > .perex { max-inline-size: 34em; }
.cesta-jizda { margin-top: var(--h-obsah); }
.cesta-jizda.je-pripnuta { block-size: var(--jizda-vyska); }
.cesta-jizda.je-pripnuta > .cesta-scena { position: sticky; top: var(--scena-vrch); }
.cesta-scena { display: grid; gap: 20px var(--mezera); align-items: start; }

/* mapa s tenkým okrajem (jedna linka, bez stínu) jako mapa výletů na Okolí; trasa a body leží přesně na obrázku */
.cesta-mapa { margin: 0; min-inline-size: 0; }
.cesta-mapa-ram { position: relative; overflow: hidden; background-color: var(--vlna-svetla); border: 1px solid var(--linka-2); border-radius: var(--r-foto); container-type: inline-size; }
.cesta-mapa-obraz { display: block; }
.cesta-mapa-obraz img { inline-size: 100%; block-size: auto; aspect-ratio: 7 / 4; }
.cesta-trasa { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.cesta-trasa-m { display: none; }
:is(.cesta-trasa-lem, .cesta-trasa-cara) { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.cesta-trasa-lem { stroke: var(--vapno); stroke-opacity: 0.92; }
.cesta-trasa-cara { stroke: var(--svestka); }
.cesta-trasa-hlava { fill: var(--svestka); stroke: var(--vapno); stroke-linejoin: round; visibility: hidden; }

/* body na mapě: číslo kroku v kosočtverci (tvar bodu mapy, ne kolečko), u startu a domu rovná cedulka */
.cesta-body { list-style: none; position: absolute; inset: 0; pointer-events: none; }
.cesta-bod { position: absolute; left: var(--xd); top: var(--yd); display: flex; align-items: center; gap: 6px; translate: -15px -50%; }
.cesta-cedulka { box-shadow: var(--stin-karta); white-space: nowrap; }
.cesta-bod-dum .cesta-cedulka { padding: 0.4em 0.8em 0.45em; }
.cesta-bod-dum .cesta-cedulka > b { font: var(--w-titul) 1.0625rem / 1.2 var(--f-titul); letter-spacing: -0.01em; }

/* číslo kroku: kosočtverec (čtverec natočený o 45° pod číslicí); hotový krok švestka, čekající jen obrys */
.cesta-znacka {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  font: var(--w-ui) 0.875rem / 1 var(--f-text);
  font-variant-numeric: tabular-nums;
  color: var(--vapno);
  isolation: isolate;
  transition: color 200ms var(--ease), scale 220ms var(--ease);
}
.cesta-znacka::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: var(--svestka);
  border: 1.5px solid var(--svestka);
  border-radius: 2px;
  rotate: 45deg;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.cesta-bod .cesta-znacka::before { box-shadow: var(--stin-karta); }
[data-stav='ceka'] > .cesta-znacka { color: var(--cokolada-2); }
[data-stav='ceka'] > .cesta-znacka::before { background: var(--vapno); border-color: var(--linka-pole); }
.cesta-bod[data-stav='ted'] > .cesta-znacka { scale: 1.14; }

/* kroky: seznam v pořadí jízdy (číslo a text, vlasové linky); aktivní krok leží na vápenné kartě */
.cesta-kroky { list-style: none; display: grid; }
.cesta-krok {
  display: flex;
  align-items: center;
  gap: 14px;
  min-block-size: 60px;
  padding: 9px 12px;
  border-top: 1px solid var(--linka-2);
  border-radius: var(--r);
  transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.cesta-krok:last-child { border-bottom: 1px solid var(--linka-2); }
.cesta-krok-text { display: grid; gap: 2px; text-align: left; }
.cesta-krok-text > b { font: var(--w-titul) 1.0625rem / 1.25 var(--f-titul); letter-spacing: -0.01em; color: var(--cokolada); transition: color 200ms var(--ease); }
.cesta-krok-text > span { font-size: 1rem; line-height: 1.35; color: var(--cokolada-2); }
.cesta-krok[data-stav='ceka'] .cesta-krok-text > b { color: var(--cokolada-2); }
.cesta-krok[data-stav='ted'] { background-color: var(--vapno); border-color: transparent; box-shadow: var(--stin-karta); }
.cesta-krok[data-stav='ted'] + .cesta-krok { border-top-color: transparent; }

/* Navigovat: jen odkaz na trasu v Mapy.cz (cíl Hutisko 207), nic se neodesílá */
.cesta-navigace { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 16px; }
.cesta-navigace-co { color: var(--cokolada-2); }
/* tip hosta: od 1 200 px v boku scény pod kroky, užší okna pod scénou (obyčejná citace na vlně) */
.cesta-tip-pod { margin-top: 26px; max-inline-size: 34rem; }
.cesta-veta { margin-top: clamp(20px, 2vw, 28px); max-inline-size: 46em; color: var(--cokolada-2); }

@media (min-width: 1000px) {
  .cesta-scena { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cesta-mapa { grid-column: 1 / span 8; }
  .cesta-bok { grid-column: 9 / -1; display: grid; gap: clamp(22px, 2vw, 32px); align-content: start; }
}
@media (min-width: 1080px) {
  .cesta-krok-text > span { font-size: var(--t-text); }
}
/* tip hosta v boku scény až od 1 200 px (užší bok by ho lámal do dlouhého sloupce a scéna by se nevešla do okna) */
@media (min-width: 1200px) {
  .cesta-tip-bok { font-size: 1.125rem; }
  .cesta-tip-pod { display: none; }
}
@media (max-width: 1199px) {
  .cesta-tip-bok { display: none; }
}
/* tablet: kroky pod mapou ve dvou sloupcích */
@media (min-width: 699px) and (max-width: 999px) {
  .cesta-kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mezera); }
  .cesta-krok:nth-last-child(2) { border-bottom: 1px solid var(--linka-2); }
}
/* telefon: výřez 4 : 5 na koridor trasy; start je jen cedulka nad místem, kde trasa vjíždí do výřezu (číslo 1 je
   v seznamu), kroky pod mapou */
@media (max-width: 698px) {
  .cesta-mapa-obraz img { aspect-ratio: 4 / 5; }
  .cesta-trasa-d { display: none; }
  .cesta-trasa-m { display: block; }
  .cesta-bod { left: var(--xm); top: var(--ym); }
  .cesta-bod-start { translate: 0 calc(-100% - 12px); }
  .cesta-bod-start > .cesta-znacka { display: none; }
  .cesta-bod-dum { flex-direction: column-reverse; align-items: flex-start; gap: 4px; translate: -15px calc(-100% + 15px); }
  .cesta-bod-dum .cesta-cedulka { padding: 0.38em 0.7em 0.42em; }
  .cesta-bod-dum .cesta-cedulka > b { font-size: 0.9375rem; }
  .cesta-scena { gap: 16px; }
  .cesta-krok { min-block-size: 50px; padding-block: 6px; }
}

/* ---------- 30 · příjezd a odjezd: osa dne ---------- */
/* od 900 px vodorovná osa ze sdílené komponenty; pevné časy 14:00 a 10:00 větší cedulkou Hahmletem. Cedulky
   různé výšky sedí středem na lince (linka je 32 px nad zastávkou, kap. 10.3 .osa) */
.prijezd-kdy { white-space: nowrap; }
@media (min-width: 900px) { .prijezd-osa .osa-kdy { top: -32px; translate: 0 -50%; } }
.prijezd-hlavni .prijezd-kdy { font: var(--w-titul) 1.25rem / 1.1 var(--f-titul); letter-spacing: -0.01em; padding: 0.42em 0.85em 0.45em; }
.prijezd-co { color: var(--cokolada-2); max-inline-size: 13em; }
.prijezd-co b { color: var(--cokolada); font-weight: var(--w-ui); }
/* do 899 px svisle: linka vede za cedulkami (jako vodorovná osa za svými zastávkami), čas vlevo, co vpravo */
@media (max-width: 899px) {
  .prijezd-osa.osa { gap: 14px; padding: 0; }
  .prijezd-osa.osa::before { left: 16px; top: 20px; bottom: 20px; }
  .prijezd-bod { grid-template-columns: 7rem minmax(0, 1fr); align-items: center; column-gap: 16px; min-block-size: 52px; }
  .prijezd-co { max-inline-size: 26em; }
}

/* ---------- 40 · Než přijedete: dva čisté sloupce ---------- */
.pred-sloupce { display: grid; gap: clamp(36px, 4vw, 48px) var(--mezera); }
.pred-sloupec { display: grid; align-content: start; gap: 14px; }
.pred-veci { list-style: none; display: grid; }
.pred-veci > li { padding-block: 12px 13px; font-size: var(--t-perex); line-height: 1.4; border-top: 1px solid var(--linka-2); }
.pred-veci > li:last-child { border-bottom: 1px solid var(--linka-2); }
.pred-veci > li::first-letter { text-transform: uppercase; }
.pred-radka { margin-top: clamp(32px, 3vw, 44px); max-inline-size: 46em; color: var(--cokolada-2); }
@media (min-width: 700px) {
  .pred-sloupce { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .pred-sloupce { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pred-sloupec { grid-column: span 5; }
  .pred-sloupec + .pred-sloupec { grid-column: 7 / span 5; }
}

/* ---------- 50 · klíče: konec stránky přímo na vlně ---------- */
.klice-telo { display: grid; justify-items: start; gap: var(--h-perex); }
.klice-telo > h2 { max-inline-size: 12em; }
.klice-telo > .perex { max-inline-size: 30em; }
.klice-tl { margin-top: clamp(14px, 1.4vw, 22px); }
@media (min-width: 900px) {
  .klice-telo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera); }
  .klice-telo > * { grid-column: 1 / span 8; }
  .klice-telo > .klice-tl { justify-self: start; }
}