/*
  Vzhled: BajtServis (ukázka). Tmavý technický základ s mátovým akcentem,
  obsah v zaoblených dlaždicích, kulaté tlačítko se šipkou, na počítači boční
  menu vlevo. Písma jsou systémová, nic se nestahuje.
*/
:root {
  --barva-text: #e6edf7;
  --barva-pozadi: #0b1220;
  --barva-akcent: #3ddc97;
  --barva-na-akcentu: #0b1220;
  --barva-tlumena: #9fb0cc;
  --barva-karta: #121c30;
  --barva-cara: #1d2a44;
  --barva-chyba: #ff8a8a;
  --pismo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mezera: 1rem;
  --kulate: 1.5rem;
}

body { font-size: 1.0625rem; }
h1, h2, h3 { letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
p + p { margin-top: 0.9rem; }

/* pruh ukázky */
.ukazka { grid-area: u; background: var(--barva-akcent); color: var(--barva-na-akcentu); text-align: center; font: 700 0.75rem/1.4 var(--pismo); padding: 0.5rem var(--mezera); }
.ukazka a { color: inherit; }

/* hlavička: na mobilu logo a menu v kapslích, na počítači boční lišta */
.hlavicka { grid-area: h; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 1rem var(--mezera); border-bottom: 1px solid var(--barva-cara); }
.logo { font-weight: 800; font-size: 1.3rem; text-decoration: none; letter-spacing: -0.03em; }
.logo b { color: var(--barva-akcent); }
.hlavicka-telefon { display: none; }
.menu { flex-basis: 100%; }
.menu ul { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
.menu a { display: inline-block; padding: 0.55rem 0.9rem; border-radius: 0.75rem; font-size: 0.9rem; color: var(--barva-tlumena); text-decoration: none; }
.menu a:hover { color: var(--barva-text); }
.menu a[aria-current="page"] { background: var(--barva-karta); color: var(--barva-text); box-shadow: inset 0 0 0 1px var(--barva-cara); }
@media (max-width: 47.99rem) { .js .menu:not(.otevreno) { display: block; } }

main { grid-area: m; min-width: 0; }
.paticka { grid-area: f; padding: 1.5rem var(--mezera) 2rem; border-top: 1px solid var(--barva-cara); font-size: 0.85rem; color: var(--barva-tlumena); }

@media (min-width: 56rem) {
  body { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "u u" "h m" "h f"; }
  .hlavicka { flex-direction: column; align-items: flex-start; gap: 2rem; align-self: start; position: sticky; top: 0; height: calc(100vh - 2.1rem); padding: 2rem 1.25rem; border-bottom: 0; border-right: 1px solid var(--barva-cara); }
  .menu { flex-basis: auto; width: 100%; }
  .menu ul { flex-direction: column; gap: 0.25rem; }
  .menu a { display: block; font-size: 1rem; }
  .hlavicka-telefon { display: inline-block; margin-top: auto; padding: 0.6rem 1rem; border: 1px solid var(--barva-cara); border-radius: 99px; font-size: 0.95rem; text-decoration: none; }
  .paticka { border-top: 1px solid var(--barva-cara); }
}

/* obsah */
.uvod, .stranka { max-width: 60rem; padding: 2rem var(--mezera) 1rem; }
@media (min-width: 56rem) { .uvod, .stranka { padding: 3rem 2.5rem 1.5rem; } }
.stitek { display: inline-block; border: 1px solid var(--barva-cara); border-radius: 99px; padding: 0.25rem 0.9rem; font-size: 0.8rem; color: var(--barva-akcent); }
.uvod h1 { font-size: clamp(2.2rem, 7vw, 4.2rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; margin: 1rem 0; }
.stranka h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 0.75rem; }
.uvod h1 em { font-style: normal; color: var(--barva-akcent); }
.perex { color: var(--barva-tlumena); font-size: 1.15rem; max-width: 34em; margin-bottom: 1.5rem; }
.stranka p { max-width: 40em; }

/* kulaté tlačítko se šipkou */
.kulate { display: inline-flex; align-items: center; gap: 0.9rem; min-height: 2.75rem; padding: 0.35rem 0.35rem 0.35rem 1.4rem; border-radius: 99px; background: var(--barva-akcent); color: var(--barva-na-akcentu); font-weight: 800; text-decoration: none; }
.kulate i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--barva-na-akcentu); color: var(--barva-akcent); font-style: normal; transition: transform 0.15s; }
.kulate:hover i { transform: translateX(3px); }
.kulate-tmave { background: var(--barva-pozadi); color: var(--barva-text); }
.kulate-tmave i { background: var(--barva-akcent); color: var(--barva-na-akcentu); }
.tlacitko { background: var(--barva-akcent); color: var(--barva-na-akcentu); border: 0; border-radius: 99px; font-weight: 800; padding: 0.6rem 1.75rem; }

/* dlaždice */
.dlazdice { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; padding: 0.5rem var(--mezera) 1.5rem; max-width: 60rem; }
@media (min-width: 56rem) { .dlazdice { padding: 0.5rem 2.5rem 1.5rem; } }
.dl { background: var(--barva-karta); border: 1px solid var(--barva-cara); border-radius: var(--kulate); padding: 1.5rem; }
.dl p { color: var(--barva-tlumena); }
.dl-velka { grid-column: 1 / -1; background: linear-gradient(135deg, #143a33, var(--barva-karta) 70%); }
.dl-akcent { background: var(--barva-akcent); border-color: var(--barva-akcent); color: var(--barva-na-akcentu); }
.dl-akcent p { color: var(--barva-na-akcentu); }
.dl-akcent p + p { margin-top: 1.25rem; }
.dl-foto { padding: 0; overflow: hidden; grid-column: 1 / -1; }
.dl-foto img, .foto-dlazdice img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.foto-dlazdice { display: block; margin: 1.5rem 0; max-width: 40rem; }
.foto-dlazdice img { border-radius: var(--kulate); }
ol.dlazdice { list-style: none; counter-reset: krok; }
.cislo { display: block; font: 700 0.9rem ui-monospace, "SF Mono", Menlo, monospace; color: var(--barva-akcent); margin-bottom: 0.75rem; }

/* kontakt */
.kontakt-sloupce { display: grid; gap: 0.75rem; margin: 1.5rem 0 2.5rem; max-width: none; }
.kontakt-sloupce > * { min-width: 0; }
@media (min-width: 48rem) { .kontakt-sloupce { grid-template-columns: 1fr 1fr; } }
.kontakt-udaje { margin-bottom: 1.25rem; }
.mapa { border-radius: var(--kulate); overflow: hidden; border: 1px solid var(--barva-cara); }
.mapa figcaption { font-size: 0.75rem; padding: 0.4rem 0.8rem; background: var(--barva-karta); }
.mapa-odkazy { font-size: 0.85rem; margin-top: 0.5rem; color: var(--barva-tlumena); }
.formular { max-width: 34rem; }
.formular label { font-size: 0.9rem; color: var(--barva-tlumena); }
.formular input, .formular textarea { background: var(--barva-karta); border: 1px solid #5f7399; border-radius: 0.75rem; }
.formular [aria-invalid="true"] { border-color: var(--barva-chyba); }
.formular-souhlas { font-size: 0.85rem; color: var(--barva-tlumena); margin: 0 0 1rem; }
.zasady h2 { margin-top: 1.5rem; font-size: 1.25rem; }

/* lišta Zavolat na mobilu */
.zavolat { font-weight: 800; }