/* DNA CLEAN — klid, prostor, jasná mřížka; minimum grafiky, omezená škála písma.
   Zakázaný vzorec (SABLONA §7): typografie jako expresivní show. Proto žádné
   kontrastní dlaždice, odznaky ani obrysy — rytmus nese prostor a tenké linky. */

:root {
  --ram: 4px;
  --ram-velky: 6px;
  --ram-onas: 6px;
  --r-tile: 6px;
  --r-btn: 2px;
  --tile: color-mix(in srgb, var(--paper-2) 55%, var(--paper));

  --ease: cubic-bezier(.25, .1, .25, 1);
  --anim-t: .7s;                         /* krátké, čisté */
  --anim-dist: 14px;
  --anim-stagger: .06s;
  --marquee-t: 90s;
}

.nadpis { font-weight: 300; letter-spacing: -.02em; line-height: 1.08; }
.nadpis em, .citat em { font-style: normal; }
h3, .cena { font-weight: 400; }
.citat { font-weight: 300; }
.dlazdice .cislo-polozky { font-style: normal; font-weight: 300; font-size: 56px; }

/* textové dlaždice bez kontrastních bloků: jen tenká linka nahoře */
.dlazdice.textova:nth-of-type(odd), .dlazdice.textova:nth-of-type(even) {
  background: var(--tile); color: var(--ink); box-shadow: inset 0 1px 0 var(--line); }
.dlazdice.textova .maly { color: var(--muted); opacity: 1; }
.dlazdice.textova .kruh { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.dlazdice.textova .cislo-polozky { color: var(--accent-text); }
.ikona-dekor { display: none; }

/* O nás bez posunutého obrysu a bez točícího se odznaku */
.onas .foto::before, .onas .odznak { display: none; }

/* běžící pás: tichý, ve světlé ploše */
.marquee { background: var(--paper-2); color: var(--ink); border-block: 1px solid var(--line); padding-block: 18px; }
.marquee span { font-weight: 300; font-size: clamp(20px, 2vw, 28px); }
.marquee span::after { content: "·"; font-size: 1em; }

.tlacitko { letter-spacing: .2em; }
.hodnoceni b, .velke-cislo b { font-weight: 300; }

/* ---------- CLEAN ve všech prvcích (2026-10-09): den jako linka ----------
   Podpisový tah z hera: hrana pultu = osa dne s body (8:00 → 17:00). Na stránce tenká linka
   s bodem vede popisky sekcí, nabídku podle denní doby a rok v O nás. Žádný parallax. */

/* základní text (PRAVIDLA §3 CLEAN): Jost 300, 17 px, proklad 1,7, ~55 znaků; drobný 14 px 400 */
body.dna-clean { font-weight: 300; font-size: 17px; line-height: 1.7; }
.dna-clean .maly { font-size: 14px; font-weight: 400; letter-spacing: .02em; }
.dna-clean [data-parallax] { transform: none !important; }
/* prostor je materiál uvnitř bloků (paspartu okna, vzduch v sazbě), ne prázdné pásy mezi sekcemi (Karel 2026-10-11) */

/* nadpisy: tichý popisek za bodem s linkou (jako bod na hraně pultu v heru) */
.nadpisy-linka .popisek { display: inline-flex; align-items: center; }
.nadpisy-linka .popisek::before { content: ""; order: -2; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.nadpisy-linka .popisek::after { content: ""; order: -1; flex: none; width: 56px; height: 1px; background: var(--accent); margin-right: 14px; }
.dna-clean .nadpis { font-size: clamp(40px, 4.6vw, 72px); }

/* ---------- nabídka „Den v jednom okně" ----------
   Okno s fotkou stojí (sticky), vedle běží osa dne; fotka se mění podle zastávky. Rám okna je
   tenká linka odsazená od fotky (paspartu), čas je zasazený do linky jako popisek výkresu. */
.den { align-items: start; }
.den-okno { grid-column: 1 / 7; position: sticky; top: max(90px, 12vh); }
.den-ram { position: relative; padding: 18px; border: 1px solid var(--accent); }
.den-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--paper-2); }
.den-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.den-foto img.je { opacity: 1; }
.den-stitek { position: absolute; top: -.75em; right: 32px; background: var(--paper); padding: 0 12px; font-size: 26px; font-weight: 300; line-height: 1.4; color: var(--accent-text); letter-spacing: .02em; }
.den-osa { grid-column: 8 / -1; position: relative; padding-left: 44px; }
.den-linka { position: absolute; left: 5px; top: 8px; bottom: 0; width: 1px; background: var(--line); }
.den-linka span { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.den-zastavka { position: relative; min-height: min(38vh, 340px); padding-bottom: 40px; }
.den-zastavka:last-child { min-height: 0; }
.den-bod { position: absolute; left: -44px; top: 12px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--accent); background: var(--paper); transition: background .4s, transform .4s var(--ease); }
.den-zastavka.je .den-bod { background: var(--accent); transform: scale(1.35); }
.den-zastavka .osa-cas { transition: opacity .5s; }
.js .den-zastavka:not(.je) { opacity: .45; transition: opacity .5s; }
.js .den-zastavka.je { opacity: 1; transition: opacity .5s; }
.osa-cas { margin: 0 0 22px; color: var(--muted); }
.osa-cas b { font-weight: 300; font-size: 44px; color: var(--ink); margin-right: 12px; letter-spacing: -.01em; }
.den-osa ul, .osa-kava ul { list-style: none; margin: 0; padding: 0; }
.den-osa li { padding: 16px 0; border-top: 1px solid var(--line); }
.den-osa li:first-child { border-top: 0; padding-top: 0; }
.lr { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.ln { font-size: 21px; font-weight: 400; }
.lp { display: block; color: var(--muted); font-size: 14px; font-weight: 400; margin-top: 2px; }
.osa-kava { margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--accent); display: grid; grid-template-columns: 4fr 8fr; gap: 32px; align-items: baseline; }
.osa-kava .osa-cas { margin: 0; }
.osa-kava .osa-cas b { font-size: 22px; }
.osa-kava ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.osa-kava li { display: grid; gap: 2px; }
.osa-kava li span:first-child { font-size: 17px; }

/* ---------- O nás „Detail s vodicí linkou": tichý tmavý moment ----------
   Velká fotka, na ní tenký obdélník výřezu, linka k zvětšenému detailu téže fotky. Výřez na
   fotce odpovídá přesně tomu, co detail ukazuje (background-size × zoom, stejná pozice v %). */
.vykres { grid-column: 1 / 8; position: relative; --mc: calc(var(--dx) * (1 - 1 / var(--zoom)) + 50% / var(--zoom)); }
.vykres-celek { position: relative; width: 100%; aspect-ratio: var(--pomer); border-radius: 2px; overflow: visible; }
.vykres-celek img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }
/* výřez = jen ořezové značky v rozích (jako hledáček), ne obdélník přes fotku */
.vykres-kruh { position: absolute; left: calc(var(--dx) * (1 - 1 / var(--zoom))); top: calc(var(--dy) * (1 - 1 / var(--zoom)));
  width: calc(100% / var(--zoom)); height: calc(100% / var(--zoom)); --z: 16px; --t: 1.5px;
  background: linear-gradient(#fff 0 0) 0 0 / var(--z) var(--t), linear-gradient(#fff 0 0) 0 0 / var(--t) var(--z),
              linear-gradient(#fff 0 0) 100% 0 / var(--z) var(--t), linear-gradient(#fff 0 0) 100% 0 / var(--t) var(--z),
              linear-gradient(#fff 0 0) 0 100% / var(--z) var(--t), linear-gradient(#fff 0 0) 0 100% / var(--t) var(--z),
              linear-gradient(#fff 0 0) 100% 100% / var(--z) var(--t), linear-gradient(#fff 0 0) 100% 100% / var(--t) var(--z);
  background-repeat: no-repeat; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .35)); }
/* detail pod fotkou, bez překryvu, vycentrovaný pod výřezem (oříznutý do šířky) */
.vykres-detail { position: relative; display: block; margin-top: 40px; width: 46%; aspect-ratio: var(--pomer); border-radius: 2px;
  margin-left: clamp(0%, calc(var(--mc) - 23%), 54%);
  background-size: calc(var(--zoom) * 100%) auto; background-position: var(--dx) var(--dy); background-repeat: no-repeat; }
.vykres-linka { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.vykres-linka polyline { fill: none; stroke: var(--on-dark); stroke-width: 1; }
.vykres-linka circle { fill: var(--on-dark); }
.vykres-linka .na-fotce { stroke: #fff; }
.onas-dvojice .text { grid-column: 9 / -1; gap: 24px; }
.onas-dvojice .citat { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.25; }
.onas-dvojice .citat em { color: inherit; }
.rok-linka { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 14px; margin-top: 12px; }
.rl-bod { display: inline-flex; align-items: center; gap: 10px; }
.rl-bod::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-on-dark); }
.rl-dnes::before { background: transparent; border: 1px solid var(--accent-on-dark); }
.rl-bod b { font-weight: 300; font-size: 34px; }
.rl-cara { height: 1px; background: var(--accent-on-dark); }
.rok-linka .maly { grid-column: 1 / -1; margin-top: 4px; }

/* ---------- kontakt „Poslední zastávka": adresa, otevřeno, telefon jako zastávky na lince ----------
   Pod linkou drobné „dobré vědět" v řádku, u skutečné adresy mapa, pak krátký formulář přes šířku
   (pole v jednom řádku) — žádné dva sloupce adresa × formulář jako u ostatních DNA. */
.km-linka { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; padding-top: 40px; }
.km-linka::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--accent); }
.km-blok { position: relative; display: grid; gap: 4px; align-content: start; }
.km-blok::before { content: ""; position: absolute; top: -40px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--accent); }
.km-blok.hlavni::before { background: var(--accent); }
.kb-titul { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); font-weight: 400; }
.kb-hlavni { font-size: 26px; font-weight: 400; line-height: 1.25; margin: 0; }
.km-blok.hlavni .kb-hlavni { font-size: 34px; line-height: 1.2; margin-bottom: 6px; }   /* jiný řez než nadpis sekce (audit: „totéž, jen menší") */
.kb-hlavni a, .km-blok .maly a { color: inherit; text-decoration: none; }
.km-hodiny { display: grid; gap: 2px; margin: 0; }
.km-hodiny div { display: flex; gap: 12px; }
.km-hodiny dt { min-width: 9.5em; color: var(--muted); }
.km-hodiny dd { margin: 0; font-weight: 400; }
.km-dobre { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.km-dobre div { display: flex; gap: 10px; }
.km-dobre dt { color: var(--muted); }
.km-dobre dd { margin: 0; font-weight: 400; }
.km-plan { margin-top: 40px; aspect-ratio: 21 / 7; border-radius: var(--ram-velky); overflow: hidden; background: var(--paper-2); }
.km-plan .gmapa-obal, .km-plan iframe { width: 100%; height: 100%; display: block; border: 0; }
.km-formular { margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: 4fr 8fr; gap: 32px; align-items: start; }
.km-formular h3 { font-size: 22px; font-weight: 400; }
.km-formular form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; }
.km-formular .pole.cele, .km-formular .odeslat { grid-column: 1 / -1; }
.km-formular textarea { min-height: 96px; }
.dna-clean .pole input, .dna-clean .pole textarea { font-weight: 300; font-size: 17px; }
.tlacitko:focus-visible, .dna-clean a:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

@media (max-width: 900px) {
  .den-okno { grid-column: 1 / -1; top: 64px; z-index: 2; background: var(--paper); padding-bottom: 20px; }
  .den-ram { padding: 10px; }
  .den-foto { aspect-ratio: 16 / 10; }
  .den-stitek { font-size: 20px; right: 20px; }
  .den-osa { grid-column: 1 / -1; padding-left: 32px; margin-top: 32px; }
  .den-bod { left: -32px; }
  .den-zastavka { min-height: 0; padding-bottom: 56px; }
  .osa-kava { grid-template-columns: 1fr; }
  .osa-kava ul { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .vykres, .onas-dvojice .text { grid-column: 1 / -1; }
  .vykres { margin-bottom: 56px; }
  .km-plan { aspect-ratio: 4 / 3; }
  .km-linka { grid-template-columns: 1fr; row-gap: 32px; padding: 0 0 0 32px; }
  .km-linka::before { top: 6px; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .km-blok::before { top: 6px; left: -32px; }
  .km-formular { grid-template-columns: 1fr; }
  .km-formular form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .km-formular form { grid-template-columns: 1fr; }
}
.km-blok .odkaz { justify-self: start; }

/* ---------- patička „Konec dne": osa dne se uzavírá ---------- */
.paticka-den { padding-top: clamp(64px, 7vw, 100px); }
.den-veta { font-size: clamp(36px, 4vw, 60px); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 clamp(48px, 5vw, 80px); }
.den-konec { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 0 20px; margin-bottom: clamp(64px, 6vw, 96px); }
.dk-bod { display: grid; gap: 4px; position: relative; padding-top: 26px; }
.dk-bod::before { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-on-dark); }
.dk-zavreno { text-align: right; }
.dk-zavreno::before { left: auto; right: 0; background: transparent; border: 1px solid var(--accent-on-dark); }
.dk-bod b { font-weight: 300; font-size: 34px; line-height: 1; }
.dk-cara { height: 1px; background: var(--accent-on-dark); margin-top: 5px; }
.dk-cara { position: relative; }
.dk-cara .maly { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; white-space: nowrap; color: var(--on-dark-muted); }

/* ---------- osa O nás zrcadlově a na papíře (AUDIT_SROVNANI_DNA A3, A5): text vlevo, výkres vpravo ---------- */
.zrcadlo.onas-dvojice .text { grid-column: 1 / 5; grid-row: 1; }
.zrcadlo.onas-dvojice .vykres { grid-column: 6 / -1; grid-row: 1; }
.onas-dvojice:not(.tmava) .vykres-linka polyline:not(.na-fotce) { stroke: var(--ink); }
.onas-dvojice:not(.tmava) .vykres-linka circle { fill: var(--ink); }
.onas-dvojice:not(.tmava) .rl-bod::before { background: var(--accent); }
.onas-dvojice:not(.tmava) .rl-dnes::before { background: transparent; border-color: var(--accent); }
.onas-dvojice:not(.tmava) .rl-cara { background: var(--accent); }
.onas-dvojice:not(.tmava) .maly { color: var(--muted); }
@media (max-width: 900px) { .zrcadlo.onas-dvojice .text, .zrcadlo.onas-dvojice .vykres { grid-column: 1 / -1; grid-row: auto; } .zrcadlo.onas-dvojice .vykres { margin-top: 56px; } }

/* ---------- lepicí lišta: osa dne (AUDIT_SROVNANI_DNA D1) — bez linky, po spodní hraně jede akcentová
   linka s bodem podle toho, kde na stránce čtenář je ---------- */
.dna-clean .hlavicka { border-bottom: 0; }
.dna-clean .hlavicka::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(var(--accent) 0 0) 0 0 / calc(var(--postup, 0) * 100%) 100% no-repeat, var(--line); }
.dna-clean .hlavicka::before { content: ""; position: absolute; bottom: -4px; left: calc(var(--postup, 0) * (100% - 9px)); width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); }


/* jídlo, jehož fotka je v okně, probarvené (Karel 2026-10-11) — jen barva */
.den-osa li.je .ln { color: var(--accent-text); }