/* ═══════════════════════════════════════════════════════════════════════
   TELEFON JAKO APLIKACE · css/telefon.css (majitel 6. 10. 2026 večer:
   „na mobilu strašně nepřehledné, moc textu… musí to působit jako jednoduchá
   mobilní appka, jde hlavně o videa a malby“).
   Načítá se jen do 640 px (atribut media u <link> na úvodu a /portret), až po
   stylech stránky, takže počítač a tablet se nemění. Princip: obrázky a videa
   velké, nadpisy krátké, vysvětlující odstavce, seznamy a formulář pryč;
   tlačítko objednávky je vždy po ruce (na úvodu plovoucí, na /portret lišta dole).
   Texty v HTML zůstávají (počítač, administrace textů), tady se jen schovávají.
   Lišta a patička jsou společné všem stránkám, jejich telefon je v css/lista.css.
   ═══════════════════════════════════════════════════════════════════════ */

:root{--sekce:52px}                                  /* sekce blíž u sebe, jako obrazovky aplikace */
.km-sek--uzitek{padding-block:var(--sekce)}

/* hlavičky sekcí: jen nadpis, bez samolepky a úvodního odstavce */
.km-sek-hlava{margin-bottom:var(--s5)}
.km-sek-hlava .km-samolepka,.pt-srov-text .km-samolepka,.km-otazky-hlava .km-samolepka{display:none}
.km-sek-hlava--stred .km-titul,.km-otazky-hlava .km-titul{margin-top:0}
.km-sek-hlava .km-t-lead,.km-otazky-hlava .km-t-lead{display:none}
.km-t-h2{font-size:28px}

/* ═══ ÚVOD: velký banner ════════════════════════════════════════════════ */
.pt-hero .pt-hero-cena .km-t-meta{display:none}       /* cena „od 990 Kč“ stačí, obraz je u cen níž */
/* Tlačítko „Chci portrét z mé fotky“ je na telefonu pořád dole (.km-cta-palec, js/uvod.js), v banneru a na nástěnce by bylo podruhé
   (majitel 6. 10. 2026: „celou dobu dole a tím pádem se nemusí zobrazovat na webu“) */
.pt-hero .km-hero-tl,.pt-zaver-tl{display:none}

/* ═══ TLAČÍTKO DOLE (úvod i /portret): samotné plovoucí tlačítko, bez pruhu pod ním (majitel 6. 10. 2026: „bez backgroundu glass“) ═══ */
.km-cta-palec,.pt-hlavni-blok{position:fixed;left:var(--okraj);right:var(--okraj);bottom:calc(12px + env(safe-area-inset-bottom));z-index:var(--z-palec);
  padding:0;background:none;box-shadow:none}
.km-cta-palec .km-tl,.pt-hlavni-blok .km-tl{--zare:0 14px 26px -10px rgb(var(--ink-rgb) / .5)}
body[data-stranka="uvod"] .km-paticka,body[data-stranka="portret"] .km-paticka{padding-bottom:calc(var(--s7) + 76px + env(safe-area-inset-bottom))}
body[data-stranka="uvod"] .km-susenky,body[data-stranka="portret"] .km-susenky{bottom:calc(84px + env(safe-area-inset-bottom))}   /* karta cookies nad lištou, tlačítko zůstane vidět */
body:has(#hlavicka.menu-otevrene) .pt-hlavni-blok,body:has(#hlavicka.menu-otevrene) .km-cta-palec{display:none}

/* ═══ ÚVOD: „Již brzy“ zůstávají na telefonu jako dřív, dva bannery pod sebou (majitel 6. 10. 2026: „to bylo lepší“) ═══ */

/* ═══ ÚVOD: řádek výhod jako čtyři krátké štítky 2 × 2 ═════════════════ */
.km-hero .km-vyhody{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-top:var(--s5)}
.km-hero .km-vyhoda{align-items:center;gap:10px}
.km-hero .km-vyhoda .km-ikona-riso{width:32px;height:32px}
.km-hero .km-vyhoda b{font-size:14px;line-height:1.25}
.km-hero .km-vyhoda b + span{display:none}

/* ═══ ÚVOD: porovnání fotka / portrét, nadpis nad obrázkem, bez odstavce a seznamu ═══ */
.pt-srov{gap:var(--s5)}
.pt-srov-text{order:-1;gap:0}
.pt-srov-text .km-t-lead,.pt-srov-body,.pt-srov-text > .km-tl{display:none}
.pt-srov-scena{gap:var(--s4)}

/* ═══ ÚVOD: videa jako pás karet přes celou šířku (jako příběhy), jen název ═══ */
.pt-priklady{grid-auto-columns:80vw;margin-top:0;padding-top:20px}
.pt-pr{gap:var(--s6)}
.pt-pr figcaption span{display:none}
.pt-pr figcaption b{font-size:20px}
.pt-videa-duvody,.pt-ukazky-akce{display:none}

/* ═══ ÚVOD: ceny zůstávají jako dřív (velké karty s odrážkami a poznámkou o platbě, majitel 6. 10. 2026:
   „ve čtverci to vypadalo lépe, teď je to moc malé“); schovaný je jen úvodní odstavec nad nimi jako u ostatních sekcí. */

/* ═══ ÚVOD: časté dotazy jen jako sbalený seznam otázek, formulář na telefonu není ═══
   Otázky zůstávají: odpovídají na nejčastější nejistoty a jedna z nich říká, jak portrét vzniká. */
.km-otazky-hlava{margin-bottom:var(--s4)}
#napiste-nam{display:none}
.km-faq-ot{min-height:56px;padding:var(--s3) 0;font-size:16px}
.km-faq-sip{width:34px;height:34px}

/* ═══ ÚVOD: nástěnka na konci, bez odstavce ═══════════════════════════ */
.pt-zaver .km-t-lead{display:none}

/* ═══ DETAIL /portret jako obrazovka produktu v aplikaci ═══════════════
   Nahoře velké video, pod ním řádek náhledů posouvaný prstem, pak název s cenou
   a dvě varianty vedle sebe. Tlačítko „Objednat za …“ je přilepené dole. */
.pt-detail{padding-block:var(--s3) var(--s6)}
.pt-mriz{grid-template-areas:"galerie" "hlava" "panel";row-gap:var(--s4)}
.pt-hlava{gap:var(--s2)}
.pt-hlava .km-drobky,.pt-hlava .pt-novinka{display:none}
.pt-hlava .km-t-h1{font-size:30px;line-height:1.1}
.pt-cena-radek .km-t-meta{font-size:14px}

.pt-galerie{gap:var(--s3)}
.pt-scena{aspect-ratio:auto;padding:22px 0 42px}
.pt-ramecek{width:84%}
.pt-galerie-veta,.pt-galerie-pozn{display:none}
.pt-nahledy{flex-wrap:nowrap;justify-content:flex-start;gap:var(--s2);width:calc(100% + 2 * var(--okraj));margin-inline:calc(var(--okraj) * -1);
  padding:6px var(--okraj) 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--okraj);scrollbar-width:none}
.pt-nahledy::-webkit-scrollbar{display:none}
.pt-nahled{flex:0 0 62px;min-width:0;max-width:none;scroll-snap-align:start}

/* varianty: dvě dlaždice vedle sebe (ikona a cena nahoře, název pod nimi), popis je v okně objednávky */
.pt-varianty legend{margin-bottom:var(--s2);font-size:15px}
.pt-varianty .km-varianty-seznam{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.km-varianta.pt-varianta{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ikona cena" "nazev nazev";gap:10px 8px;align-items:center;
  min-height:0;padding:14px}
.pt-varianta .pt-varianta-ikona{width:38px;height:38px}
.pt-varianta .pt-varianta-ikona svg{width:20px;height:20px}
.pt-varianta .km-varianta-txt > b{font-size:16px;line-height:1.2}
.pt-varianta .km-varianta-txt > span{display:none}
.pt-varianta .km-varianta-cena{justify-self:end;font-size:19px}
.pt-varianta .km-varianta-stitek{top:-12px;right:auto;left:10px;font-size:12px}

/* tlačítko s cenou přilepené dole ve spodní liště (viz výš); odhalování panelu se tu vypíná: transformace předka by fixní lištu utrhla */
html.nastup .pt-panel[data-odhal]{opacity:1;transform:none;will-change:auto}
.pt-hlavni-blok{gap:0}
.pt-pod-tlacitkem{display:none}

/* výhody: čtyři krátké štítky 2 × 2 na bílém lístku */
.pt-panel-vyhody{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-top:0;padding:var(--s4)}
.pt-panel-vyhody .km-vyhoda{align-items:center;gap:10px}
.pt-panel-vyhody .km-ikona-riso{width:32px;height:32px}
.pt-panel-vyhody .km-vyhoda b{font-size:14px;line-height:1.25}
.pt-panel-vyhody .km-vyhoda b + span{display:none}

/* časté otázky pod detailem: sbalený seznam (první otevřenou zavře js/portret.js) */
.km-pod-detailem{padding-block:var(--s5) var(--sekce)}
.km-pod-detailem .km-sek-hlava{margin-bottom:var(--s3)}
.km-pod-detailem .km-faq-pol summary{min-height:56px;font-size:17px}

/* ═══ OKNO OBJEDNÁVKY: plná šířka zespodu, kratší texty ════════════════
   .pt-okno (portret.css) přebíjelo šířku spodního panelu z lista.css, okno tak na telefonu viselo vlevo s mezerou vpravo. */
.km-okno.pt-okno{width:100%}
.pt-okno .km-okno-in{padding:calc(env(safe-area-inset-top) + 24px) 18px calc(env(safe-area-inset-bottom) + 24px)}
.pt-okno .km-okno-nadpis{font-size:26px}
.pt-okno [data-pt-perex]{display:none}
.pt-okno .pt-krok{margin-top:var(--s4)}
.pt-volba{gap:var(--s2);padding:var(--s4) var(--s2) var(--s3)}
.pt-volba-obr{height:104px}
.pt-telefon{width:56px}
.pt-ram{width:82px}
.pt-volba-txt span{font-size:14px}
.pt-nahrat{min-height:0}
.pt-okno .pt-pole-pozn{display:none}
.pt-okno textarea{min-height:88px}
.pt-krok-tl{flex-wrap:nowrap}
.pt-krok-tl .km-tl:first-child:not(:last-child){flex:0 0 auto;padding-inline:18px}

/* ═══ ÚZKÝ TELEFON (≤ 360 px): varianty pod sebou, vedle sebe by se cena nevešla vedle ikony ═══ */
@media (max-width:360px){
  .pt-varianty .km-varianty-seznam{grid-template-columns:minmax(0,1fr)}
  .km-varianta.pt-varianta{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ikona nazev cena"}}