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

/* ===== src/stranky/okoli/okoli.css ===== */
/* Chata Hutisko · Okolí a výlety (W-O, 22. 10. 2026; dřív S3 subtle a builder Okolí + Ceník, kolo 3).
   Prefixy: okoli- vylet- vylety- mapa- tipy-. Stránka jen skládá komponenty kap. 10 a 11 (12-plan-cozy.md): shrnutí,
   lišta kapitol, cedulka, fakt-štítek, foto s kreditem v rohu, karta, pás karet, citace. Bez látky, stehů a natočení.
   10 · věta hostitele a shrnutí ve fakt-štítcích (časy od domu vedou na výlety);
   20 · mapa výletů s trasami od domu (js/okoli.js): od 900 px vlevo lepivá vedle seznamu (lepí se vedle textu, nikdy
        přes něj), pod 900 px nad pásem karet (.pas); výlet = název (tlačítko přes celou kartu), Trasa, fotka, řádka,
        fakt-štítky; další tipy;
   70 · citace hosta na vlně a karta s nejbližším volným víkendem. */

/* ==================== 10 · začátek: věta a shrnutí ==================== */
.okoli-zacatek > .perex { max-inline-size: 24em; }

/* ==================== 20 · výlety: mapa s trasami a seznam ==================== */
.vylety-mrizka { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 3vw, 32px); }
.vylety-hlava { align-self: end; }
.vylety-hlava > .perex { max-inline-size: 26em; }

/* tablet na výšku: mapa vlevo (8/12), nadpis vpravo dole vedle ní, pás karet pod nimi přes celou šířku */
@media (min-width: 700px) and (max-width: 899px) {
  .vylety-mrizka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera); }
  .vylety-hlava { grid-column: 9 / -1; grid-row: 1; align-self: start; }
  .mapa-vyletu { grid-column: 1 / span 8; grid-row: 1; }
  .vylety-pas, .vylet-tipy { grid-column: 1 / -1; }
}
/* od 900 px: mapa vlevo lepivá pod lištou kapitol, vpravo nadpis, výlety pod sebou a další tipy. Mapa je čtverec tak
   velký, aby se i s popiskem vešel do okna pod lištou (nejvýš 54 % šířky), seznam bere zbytek: žádná prázdná mezera
   mezi mapou a seznamem, když okno není vysoké. Lepí se jen vedle seznamu, přes text nikdy. */
@media (min-width: 900px) {
  .vylety-mrizka {
    --mapa-strana: clamp(320px, calc(100svh - var(--lepivy-vrch) - 112px), calc((100% - var(--mezera) * 1.5) * 0.54));
    grid-template-columns: var(--mapa-strana) minmax(0, 1fr);
    column-gap: calc(var(--mezera) * 1.5);
    row-gap: 0;
    align-items: start;
  }
  .mapa-vyletu { grid-column: 1; grid-row: 1 / span 3; }
  .vylety-hlava { grid-column: 2; grid-row: 1; align-self: start; margin-bottom: var(--h-obsah); }
  .vylety-pas { grid-column: 2; grid-row: 2; }
  .vylet-tipy { grid-column: 2; grid-row: 3; }
}
@media (min-width: 900px) and (min-height: 600px) {
  .mapa-vyletu { position: sticky; top: calc(var(--lepivy-vrch) + 16px); }
}

/* mapa: tisk s tenkým okrajem, čtverec; vrstvy: rastr (kamera transformem), trasy (SVG, viewBox), body, karta */
.mapa-vyletu { margin: 0; min-inline-size: 0; }
.mapa-okno {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--vlna-svetla);
  border: 1px solid var(--linka-2);
  border-radius: var(--r-foto);
  isolation: isolate;
}
.mapa-plocha { position: absolute; inset: 0; transform-origin: 0 0; }
.mapa-okno.je-v-pohybu .mapa-plocha { will-change: transform; }
.mapa-plocha picture, .mapa-obraz { display: block; inline-size: 100%; block-size: 100%; }
.mapa-obraz { object-fit: cover; }

/* trasa od domu: vápenný lem a švestková čára; kreslí se podél cesty (pathLength 1), délka kresby podle trasy */
.mapa-trasy { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: hidden; pointer-events: none; }
.mapa-trasa { opacity: 0; transition: opacity 160ms var(--ease); }
.mapa-trasa path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  /* po zmizení se kresba vrátí na začátek až za tmou (bez couvání trasy) */
  transition: stroke-dashoffset 0s linear 200ms;
}
.mapa-trasa-lem { stroke: var(--vapno); stroke-width: var(--mapa-sirka-lem, 7); stroke-opacity: 0.94; }
.mapa-trasa-cara { stroke: var(--svestka); stroke-width: var(--mapa-sirka, 3.2); }
.mapa-trasa .mapa-lanovka.mapa-trasa-cara { stroke: var(--cokolada); stroke-width: calc(var(--mapa-sirka, 3.2) * 0.75); }
.mapa-trasa.je-videt { opacity: 1; transition-duration: 120ms; }
.mapa-trasa.je-videt path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--trasa-d, 600ms) var(--ease); }
/* lanová dráha se rozjede, až trasa autem dojede k Ráztoce */
.mapa-trasa.je-videt .mapa-lanovka { transition-duration: 360ms; transition-delay: calc(var(--trasa-d, 600ms) * 0.62); }
@media (prefers-reduced-motion: reduce) {
  .mapa-trasa.je-videt path, .mapa-trasa.je-videt .mapa-lanovka { transition: none; }
}

/* body: kosočtverec a cedulka, štítky vždy vidět a ostré (posun dělá kamera, nezvětšují se) */
.mapa-body { list-style: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mapa-bod {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  display: flex;
  align-items: center;
  gap: 6px;
  max-inline-size: 62%;
  translate: -7px -50%;
}
/* bod = malý švestkový kosočtverec s vápenným lemem (stejný jako bod na fotce), dům čokoládový */
.mapa-bod::before {
  content: '';
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  margin-inline: 2px;
  background: var(--svestka);
  outline: 2px solid var(--vapno);
  rotate: 45deg;
  box-shadow: var(--stin-karta);
}
/* bod se štítkem vlevo se kotví zprava, aby měl štítek místo až k levému okraji mapy */
.mapa-bod[data-strana='vlevo'] { left: auto; right: calc(100% - var(--bx)); flex-direction: row-reverse; translate: 7px -50%; }
/* štítek nad bodem (úzká mapa, kde se vedle nevejde; js/okoli.js) */
.mapa-bod[data-strana='nahore'] { flex-direction: column-reverse; gap: 4px; translate: -50% calc(-100% + 7px); }
.mapa-bod[data-venku] { visibility: hidden; }
.mapa-bod-dum { z-index: 2; }
.mapa-bod-dum::before { background: var(--cokolada); }
.mapa-stitek.cedulka { display: block; line-height: 1.25; white-space: nowrap; transition: background-color var(--d-cedulka) var(--ease), color var(--d-cedulka) var(--ease); }
.mapa-stitek-dum.cedulka { font-weight: var(--w-ui); }
/* odkaz bodu má plochu pro prst aspoň 44 px, cedulka uvnitř zůstává malá */
.mapa-odkaz { display: flex; align-items: center; min-block-size: 44px; min-inline-size: 0; color: inherit; text-decoration: none; pointer-events: auto; }
.mapa-odkaz:focus-visible { outline-offset: -2px; }
.mapa-bod.je-aktivni { z-index: 3; }
.mapa-bod.je-aktivni .mapa-stitek, .mapa-odkaz:hover .mapa-stitek { --c-podklad: var(--svestka); --c-text: var(--vapno); }
/* konec trasy mimo bod (rozhledna, obec, Ráztoka): ukáže se, až k němu trasa dojede */
.mapa-cil { opacity: 0; visibility: hidden; transition: opacity 160ms var(--ease), visibility 0s linear 160ms; }
.mapa-cil .mapa-stitek { --c-podklad: var(--svestka); --c-text: var(--vapno); }
.mapa-cil.je-videt { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease) calc(var(--trasa-d, 600ms) * 0.7), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .mapa-cil.je-videt { transition: none; } }

/* karta výletu na přiblížené mapě (klik na bod): fotka nahoře, název a čas; dole na straně dál od místa */
.mapa-karta.karta {
  position: absolute;
  z-index: 4;
  left: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  inline-size: min(300px, calc(100% - 24px));
  padding: 10px 10px 12px;
}
.mapa-karta[hidden] { display: none; }
.mapa-karta[data-strana='vpravo'] { left: auto; right: 12px; }
.mapa-karta-foto picture, .mapa-karta-foto img { display: block; inline-size: 100%; }
.mapa-karta-foto img { aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--ohnisko, 50% 50%); border-radius: var(--r); }
.mapa-karta-text { display: grid; gap: 2px; padding-inline: 4px; }
.mapa-karta-nazev { font: var(--w-titul) var(--t-h4) / 1.2 var(--f-titul); letter-spacing: -0.01em; color: var(--cokolada); }
.mapa-karta-cas { font: 500 1rem / 1.35 var(--f-text); color: var(--cokolada-2); }
@media (prefers-reduced-motion: no-preference) {
  .mapa-karta.je-nova { animation: mapa-karta 220ms var(--ease) both; }
}
@keyframes mapa-karta { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
/* úzká mapa (telefon): karta vodorovně přes celou šířku, malá fotka vlevo */
@media (max-width: 559px) {
  .mapa-karta.karta { left: 8px; right: 8px; bottom: 8px; inline-size: auto; grid-template-columns: 88px minmax(0, 1fr); align-items: center; padding: 8px; }
  .mapa-karta[data-strana='vpravo'] { left: 8px; right: 8px; }
  .mapa-karta-foto img { aspect-ratio: 1; }
}
/* pod mapou: nápověda (myš / dotyk), na přiblížené mapě místo ní Zpět na celou mapu; kredit OpenStreetMap */
.mapa-pod { display: grid; gap: 4px; margin-top: 10px; }
.mapa-ovladani { display: grid; align-items: center; min-block-size: 44px; }
.mapa-ovladani > * { grid-area: 1 / 1; }
.mapa-cela.odkaz { justify-self: start; }
.mapa-cela[hidden] { display: none; }
.mapa-okno.je-priblizena + .sr + .mapa-pod .mapa-napoveda { visibility: hidden; }
.mapa-napoveda { font-size: var(--t-male); line-height: 1.45; color: var(--cokolada-2); text-wrap: pretty; }
.mapa-napoveda-dotyk { display: none; }
@media (hover: none), (pointer: coarse) {
  .mapa-napoveda-mys { display: none; }
  .mapa-napoveda-dotyk { display: inline; }
}
.mapa-kredit { display: block; }

/* výlet: fotka s kreditem v rohu, pod ní název (tlačítko přes celou kartu) s Trasou, jedna řádka, fakt-štítky */
.vylet { position: relative; display: grid; align-content: start; scroll-margin-top: 12px; }
.vylet-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 0 16px; margin-top: 16px; }
.vylet-nazev { min-inline-size: 0; transition: color var(--d-cedulka) var(--ease); }
.vylet-tl {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-block: -6px;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
/* tlačítko pokrývá celou kartu výletu; odkazy uvnitř (Trasa, kredit) leží nad ním */
.vylet-tl::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.vylet-tl:focus-visible { outline: none; }
.vylet:has(.vylet-tl:focus-visible) { outline: 2px solid var(--svestka); outline-offset: 6px; border-radius: var(--r); }
.vylet-trasa { position: relative; z-index: 2; flex: none; margin-block: -12px; }
.vylet .kredit-na-fotce { z-index: 2; }
.vylet.je-aktivni .vylet-nazev, .vylet-tl[aria-pressed='true'] { color: var(--svestka); }
.vylet-obraz img { object-position: var(--ohnisko, 50% 50%); }
.vylet-obraz { transition: box-shadow var(--d-cedulka) var(--ease); }
.vylet-proc { margin-top: 10px; color: var(--cokolada-2); max-inline-size: 34em; }
.vylet-fakty { margin-top: 12px; }
.vylet-cas { font-weight: var(--w-ui); }
@media (hover: hover) {
  .vylet:hover .vylet-nazev { color: var(--svestka); }
  .vylet.je-aktivni .vylet-obraz, .vylet:hover .vylet-obraz { box-shadow: var(--stin-foto-zvednuta); }
}
/* od 900 px výlety pod sebou ve sloupci vedle mapy (pás karet je jen pod 900 px) */
@media (min-width: 900px) {
  .vylet-seznam.pas-rada { display: grid; gap: clamp(48px, 4.6vw, 72px); }
}
/* pás karet (pod 900 px): fotky v jednotném poměru 4 : 3 (karty stojí v jedné výšce); z karty, která není celá
   vidět, vykukuje jen fotka (.pas-text) */
@media (max-width: 899px) {
  .vylet-obraz { --pomer: 4 / 3; }
  .vylet { scroll-margin-top: 8px; }
  .vylet-hlava { margin-top: 14px; }
  .vylet-proc { margin-top: 8px; }
  .vylet:has(.vylet-tl:focus-visible) { outline-offset: 2px; }
}

/* další tipy: jedna řada fakt-štítků pod seznamem; kotva z jiné stránky (#vylet-les-poskla) štítek zvýrazní. Po skoku
   z lišty kapitol dopadne nadpis 16–40 px pod lištu (odsazení nad nadpisem se odečte). */
.vylet-tipy { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--linka-2); scroll-margin-top: -16px; }
.vylet-tipy-rada > li { scroll-margin-top: 16px; }
.vylet-tipy-rada > li:target > .fakt { background-color: var(--svestka-svetla); border-color: var(--svestka); }

/* ==================== 70 · hosté o okolí a výzva ==================== */
.tipy-mrizka { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); }
.tipy-hlas { display: grid; justify-items: start; }
.tipy-citace { margin-top: var(--h-obsah); max-inline-size: 24em; text-wrap: pretty; }
.tipy-vyzva { display: grid; gap: 6px; justify-items: start; align-self: end; }
.tipy-vyzva-co { font: var(--w-ui) var(--t-text) / 1.3 var(--f-text); color: var(--cokolada-2); }
.tipy-vyzva-kdy { font: var(--w-titul) var(--t-h3) / 1.15 var(--f-titul); letter-spacing: -0.014em; font-variant-numeric: lining-nums; }
.tipy-vyzva-cena { display: block; margin-top: 4px; font: 500 var(--t-text) / 1.35 var(--f-text); letter-spacing: 0; color: var(--cokolada-2); }
.tipy-vyzva-cena:empty { display: none; }
.tipy-vyzva-akce { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 14px; }
@media (min-width: 900px) {
  .tipy-mrizka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mezera); align-items: start; }
  .tipy-hlas { grid-column: 1 / span 7; }
  .tipy-vyzva { grid-column: 9 / -1; }
}