/* KRATOMOVNA s.r.o. – informační web
   Jediný barevný režim: nastavení zařízení (světlý nebo tmavý vzhled) web nemění.
   Jen HTML a CSS: žádný skript, žádné cookies, žádné cizí servery.
   Písma ve složce pisma/: Inter (SIL Open Font License 1.1) pro texty,
   DejaVu Sans Mono (licence Bitstream Vera) pro údaje. */

@font-face {
  font-family: "Inter";
  src: url("pisma/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("pisma/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans Mono";
  src: url("pisma/dejavu-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans Mono";
  src: url("pisma/dejavu-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* plynulý přechod mezi oběma listy (prohlížeče, které to umějí) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---------- barvy a míry ---------- */
:root {
  color-scheme: dark;
  /* antracit pro okolí i štítky; dveře a drážky jsou o stupeň tmavší */
  --skrin:     #373F43;   /* okolí dveří */
  --panel:     #282E31;   /* dveře rozvaděče: o stupeň tmavší */
  --svar:      #181C1E;   /* hrana dveří, větrací otvory */
  --stitek:    #373F43;   /* štítek */
  --text:      #FFFFFF;
  --popis:     #CED2D5;   /* popisky na štítku */
  --napanelu:  #CED2D5;   /* text přímo na dveřích */
  --linka:     #282E31;   /* linky na štítku: drážka v barvě dveří */
  --prazdny:   #282E31;   /* nevyplněný segment otevírací doby */
  --cip:       #FFFFFF;   /* označení štítku: podklad a písmo */
  --cip-text:  #282E31;
  --dotek:     rgba(255, 255, 255, 0.05);
  --zaluzie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='12'%3E%3Crect x='6' y='4' width='32' height='4' rx='2' fill='%23181C1E'/%3E%3C/svg%3E");
  --x: clamp(16px, 2.2vw, 26px);        /* vnitřní okraj štítku */
  --mezera: clamp(8px, 1vw, 12px);      /* mezera mezi štítky */
  --roh: 12px;                          /* zkosení rohu štítku */
  --mono: "DejaVu Sans Mono", ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --zkoseni: polygon(var(--roh) 0, calc(100% - var(--roh)) 0, 100% var(--roh), 100% calc(100% - var(--roh)),
                     calc(100% - var(--roh)) 100%, var(--roh) 100%, 0 calc(100% - var(--roh)), 0 var(--roh));
}

/* ---------- základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  padding: clamp(6px, 2.4vw, 32px);
  background: var(--skrin);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-kerning: normal;
  font-feature-settings: "kern", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 0.6em; }
li { text-wrap: pretty; }
abbr[title] { text-decoration: none; }
strong { font-weight: 500; }
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--popis);
  transition: text-decoration-color 0.15s;
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
a.celek { white-space: nowrap; }
::selection { background: var(--text); color: var(--stitek); }
.sipka { display: inline-block; margin-left: 0.4em; transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sipka--zpet { margin-left: 0; margin-right: 0.4em; }
a:hover .sipka { transform: translateX(4px); }
a:hover .sipka--zpet { transform: translateX(-4px); }

/* ---------- dveře rozvaděče ---------- */
.list {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(6px, 1.3vw, 16px);
  background: var(--panel);
  border: 1px solid var(--svar);
}
main { display: grid; gap: var(--mezera); }

/* štítky: plná destička se zkosenými rohy */
.pole, .oddil, .titul, .cast {
  background: var(--stitek);
  clip-path: var(--zkoseni);
  min-width: 0;
}

/* popisky: malé verzálky s prostrkáním */
.stitek, .oddil h2, .zahlavi, .par dt, .zpracovani thead th {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-feature-settings: "kern", "calt", "tnum", "case";
}
.stitek, .oddil h2, .par dt { color: var(--popis); }

/* označení štítku: číslo v plném poli */
.c {
  flex: none;
  display: inline-block;
  margin-right: 0.85em;
  padding: 0.3em 0.5em 0.28em;
  background: var(--cip);
  color: var(--cip-text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  font-feature-settings: normal;
}

/* údaje strojovým písmem */
.hodnota, .par dd, .casy, .osa, .adresa {
  font-family: var(--mono);
  font-feature-settings: normal;
}

/* ---------- záhlaví: popis na dveřích a štítek s odkazem ---------- */
.zahlavi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  margin-bottom: var(--mezera);
  padding-left: calc(var(--x) - 4px);
  color: var(--napanelu);
  view-transition-name: zahlavi;
}
.zahlavi p { margin: 0; color: var(--text); white-space: nowrap; }
.zahlavi .dopl { margin-left: 0.55em; color: var(--napanelu); }
.zahlavi a {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 14px 18px;
  color: var(--text);
  text-decoration: none;
}
.zahlavi a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--stitek);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.zahlavi a .dopl { color: inherit; }
.zahlavi a:hover .txt { text-decoration: underline; text-underline-offset: 0.3em; }
.zahlavi--zpet { padding-left: 0; padding-right: calc(var(--x) - 4px); }

/* ---------- 01 štítek provozovatele ---------- */
.pole {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 3.4fr);
}
.pole__firma { padding: 20px var(--x) 24px; }
.pole__udaje {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 1.5fr);
  margin: 0;
}
.pole__udaje > div { padding: 20px var(--x) 24px; border-left: 1px solid var(--linka); }
.pole__firma .stitek { display: flex; align-items: center; margin: 0 0 14px; }
.pole dt { margin: 3px 0 12px; }
.pole dd { margin: 0; }
.nazev {
  margin: 0;
  font-size: clamp(23px, 2.3vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  white-space: nowrap;
}
.hodnota { font-size: 15px; line-height: 1.6; }

/* ---------- štítky 02–06 ---------- */
.hlavni {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
  gap: var(--mezera);
}
.oddil { padding: 18px var(--x) 26px; }
.oddil--provozovna { grid-column: 1; grid-row: 1; }
.oddil--doba       { grid-column: 2; grid-row: 1 / span 2; }
.oddil--kontakt    { grid-column: 1; grid-row: 2; }
.oddil--udaje      { grid-column: 1; grid-row: 3; }
.oddil--adr        { grid-column: 2; grid-row: 3; }
.oddil h2 {
  display: flex;
  align-items: center;
  margin: 0 calc(-1 * var(--x)) 20px;
  padding: 0 var(--x) 16px;
  border-bottom: 1px solid var(--linka);
}
.druh { margin-bottom: 12px; }
.adresa {
  margin: 0;
  font-size: clamp(25px, 2.9vw, 36px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.04em;
}
.pozn { margin-top: 14px; color: var(--popis); font-size: 15px; }

/* dvojice popisek–hodnota (kontakt) */
.par { margin: 0; }
.par > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* popisek nad hodnotou */
  row-gap: 4px;
  padding: 11px 0;
  border-top: 1px solid var(--linka);
}
.par > div:first-child { border-top: 0; padding-top: 0; }
.par dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }

.odkaz { display: inline-block; margin-top: 8px; padding: 6px 0; font-weight: 500; }

/* ---------- 03 otevírací doba: půlhodinové segmenty na ose 6–18 h ---------- */
.doba { container-type: inline-size; }
/* šířka je násobkem 24 bodů, aby všech 24 segmentů vyšlo na celé body */
.osa, .tyden { width: 100%; width: round(down, 100%, 24px); }
.osa { display: block; height: 28px; color: var(--popis); font-size: 12px; line-height: 1; }
.osa > span { display: block; position: relative; height: 100%; }
.osa i {
  position: absolute;
  top: 3px;
  left: calc(var(--t) * 1%);
  transform: translateX(-50%);
  font-style: normal;
}
.osa i::after {            /* ryska pod číslem hodiny */
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 1px;
  height: 6px;
  background: var(--popis);
}
.osa i:first-child { transform: none; }
.osa i:first-child::after { left: 0; }
.osa i:last-child { transform: translateX(-100%); }
.osa i:last-child::after { left: auto; right: 2px; }
.tyden { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linka); }
.tyden li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "den casy" "pas pas";
  align-items: baseline;
  row-gap: 9px;
  padding: 11px 0 13px;
  border-bottom: 1px solid var(--linka);
  transition: background-color 0.15s;
}
.tyden li:hover { background-color: var(--dotek); }
.den { grid-area: den; font-weight: 500; }
.casy { grid-area: casy; font-size: 15px; white-space: nowrap; }
.zav .casy { color: var(--popis); }
.pas {
  grid-area: pas;
  position: relative;
  height: 14px;
  background: var(--prazdny);
  /* maska rozdělí pás na 24 půlhodinových segmentů s mezerou 2 body */
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(100% / 24 - 2px), transparent calc(100% / 24 - 2px), transparent calc(100% / 24));
          mask-image: repeating-linear-gradient(90deg, #000 0, #000 calc(100% / 24 - 2px), transparent calc(100% / 24 - 2px), transparent calc(100% / 24));
}
.pas span {
  position: absolute;
  top: 0;
  bottom: 0;
  /* začátek a konec úseku na ose 6:00–18:00 (360–1080 min) */
  left: calc((var(--a) - 360) / 720 * 100%);
  left: round(calc((var(--a) - 360) / 720 * 100%), 1px);
  right: calc((1080 - var(--b)) / 720 * 100%);
  right: round(calc((1080 - var(--b)) / 720 * 100%), 1px);
  background: var(--text);
}
/* velmi úzká plocha: časy pod názvem dne */
@container (max-width: 291px) {
  .tyden li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "den" "casy" "pas"; row-gap: 2px; }
  .pas { margin-top: 7px; }
}
/* širší plocha: den | segmenty | časy v jednom řádku */
@container (min-width: 620px) {
  .osa, .tyden { width: 100%; }
  .osa, .tyden li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 244px; }
  .osa > span { grid-column: 2; width: 100%; width: round(down, 100%, 24px); }
  .tyden li {
    grid-template-areas: "den pas casy";
    align-items: center;
    row-gap: 0;
    padding: 0;
    min-height: 42px;
  }
  .pas {
    justify-self: start;
    height: 16px;
    width: 100%;
    width: round(down, 100%, 24px);
  }
  .casy { padding-left: 18px; }
}

/* ---------- list 2: informace o zpracování osobních údajů ---------- */
.titul { padding: clamp(26px, 4.6vw, 52px) var(--x) clamp(24px, 3.6vw, 40px); }
.titul h1 {
  margin: 0 0 12px;
  max-width: 18em;
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.podtitul { color: var(--popis); }
.cast {
  display: grid;
  grid-template-columns: minmax(0, 3.1fr) minmax(0, 8.9fr);
}
.cast h2 {
  margin: 0;
  padding: 22px var(--x) 26px;
  align-self: start;
  position: sticky;
  top: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.cast h2 .c { display: table; margin: 0 0 12px; }
.telo { padding: 22px var(--x) 30px; border-left: 1px solid var(--linka); min-width: 0; }
.telo p, .telo li { max-width: 70ch; }
.telo ul { margin: 0; padding-left: 1.15em; }
.telo li + li { margin-top: 0.4em; }
.telo li::marker { color: var(--popis); }
.telo ul + p, .telo p + ul, .telo table + p, .telo p + table { margin-top: 0.85em; }
.zpracovani {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}
.zpracovani th, .zpracovani td {
  padding: 11px 16px 12px 0;
  border-bottom: 1px solid var(--linka);
  text-align: left;
  vertical-align: top;
}
.zpracovani thead th {
  padding-top: 4px;
  border-bottom-color: var(--popis);
  letter-spacing: 0.12em;
  color: var(--popis);
}
.zpracovani tbody th { width: 20%; font-weight: 500; }
.zpracovani tbody tr { transition: background-color 0.15s; }
.zpracovani tbody tr:hover { background-color: var(--dotek); }
.namitka {
  margin: 1em 0 0;
  padding: 16px 20px;
  border: 1px solid var(--popis);
}

/* ukazatel průběhu čtení (jen prohlížeče, které umějí animaci řízenou posuvem) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body.dlouhy::before {
      content: "";
      position: fixed;
      z-index: 2;
      inset: 0 0 auto 0;
      height: 3px;
      background: var(--text);
      transform-origin: 0 50%;
      animation: postup linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes postup { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- větrací otvory dole na dveřích (jen ozdoba) ---------- */
.mrizka {
  height: 36px;
  margin: calc(var(--mezera) + 10px) var(--x) 8px;
  background: var(--zaluzie) center top / 44px 12px space repeat;
}

/* ---------- užší obrazovky ---------- */
@media (max-width: 1160px) {
  .pole { grid-template-columns: 1fr; }
  .pole__firma { padding-bottom: 18px; }
  .pole__udaje { border-top: 1px solid var(--linka); }
  .pole__udaje > div:first-child { border-left: 0; }
}
@media (max-width: 1020px) {
  .zpracovani thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .zpracovani tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--linka); }
  .zpracovani tbody tr:first-child { padding-top: 2px; }
  .zpracovani th, .zpracovani td { display: block; padding: 0; border: 0; }
  .zpracovani tbody th { width: auto; font-size: 17px; }
  .zpracovani td::before {
    content: attr(data-popis);
    display: block;
    margin-top: 9px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--popis);
  }
}
@media (max-width: 820px) {
  .hlavni { grid-template-columns: 1fr; }
  .oddil--provozovna, .oddil--doba, .oddil--kontakt, .oddil--udaje, .oddil--adr { grid-column: 1; grid-row: auto; }
  .cast { grid-template-columns: 1fr; }
  .cast h2 { position: static; padding: 20px var(--x) 0; }
  .telo { border-left: 0; padding-top: 14px; }
}
@media (max-width: 760px) {
  .pole__udaje { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .pole__udaje > div { padding-top: 16px; padding-bottom: 18px; }
  .pole__udaje > div:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--linka); }
}
@media (max-width: 640px) {
  :root { --roh: 10px; }
  .zahlavi .dopl { display: none; }
  .zahlavi .dopl--vzdy { display: inline; margin-left: 0.4em; }
  .zahlavi a { padding: 13px 14px; }
  .mrizka { margin-top: calc(var(--mezera) + 6px); }
}
@media (max-width: 350px) {
  .pole__udaje { grid-template-columns: minmax(0, 1fr); }
  .pole__udaje > div { border-left: 0; }
  .pole__udaje > div + div { border-top: 1px solid var(--linka); }
  .zahlavi { letter-spacing: 0.1em; gap: 8px; }
  .zahlavi a { padding: 13px 10px; }
  .zahlavi p .dopl--vzdy { display: none; }
}

/* ---------- pohyb při načtení (jen když si ho návštěvník nevypnul) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pole, .hlavni > .oddil, .titul { animation: vstup 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hlavni > .oddil:nth-child(1) { animation-delay: 0.05s; }
  .hlavni > .oddil:nth-child(2) { animation-delay: 0.10s; }
  .hlavni > .oddil:nth-child(3) { animation-delay: 0.15s; }
  .hlavni > .oddil:nth-child(4) { animation-delay: 0.20s; }
  .hlavni > .oddil:nth-child(5) { animation-delay: 0.25s; }
  .pas span { transform-origin: 0 50%; animation: tah 0.8s cubic-bezier(0.3, 0.6, 0.3, 1) both; }
  .tyden li:nth-child(1) .pas span { animation-delay: 0.25s; }
  .tyden li:nth-child(2) .pas span { animation-delay: 0.31s; }
  .tyden li:nth-child(3) .pas span { animation-delay: 0.37s; }
  .tyden li:nth-child(4) .pas span { animation-delay: 0.43s; }
  .tyden li:nth-child(5) .pas span { animation-delay: 0.49s; }
  .tyden li:nth-child(6) .pas span { animation-delay: 0.55s; }
}
@keyframes vstup { from { opacity: 0; transform: translateY(8px); } }
@keyframes tah { from { transform: scaleX(0); } }

/* ---------- tisk ---------- */
@media print {
  :root {
    color-scheme: light;
    --skrin: #FFFFFF; --panel: #FFFFFF; --svar: #000000; --stitek: #FFFFFF; --text: #000000;
    --popis: #333333; --napanelu: #000000; --linka: #999999; --prazdny: #DDDDDD;
    --cip: #000000; --cip-text: #FFFFFF; --dotek: transparent;
  }
  body { padding: 0; font-size: 11pt; }
  body.dlouhy::before { display: none; }
  .list { border: 0; padding: 0; max-width: none; }
  .pole, .oddil, .titul, .cast { clip-path: none; border: 1px solid #000000; }
  .zahlavi a::before { display: none; }
  .mrizka { display: none; }
  .pole, .hlavni > .oddil, .titul, .pas span { animation: none; }
  .pas, .pas span, .c { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cast h2 { position: static; }
  .cast, .tyden li, .zpracovani tr { break-inside: avoid; }
}