/*
  Vzhled: Instalatérství Pramen (ukázka). Směr „technický a přehledný“:
  bílá, modrý akcent, popisky v neproporcionálním písmu, obrysová tlačítka
  se šipkou, očíslovaný seznam služeb. Písma jsou systémová, takže se nic
  nestahuje.
*/
:root {
  --barva-text: #111;
  --barva-pozadi: #fff;
  --barva-akcent: #0057ff;
  --barva-na-akcentu: #fff;
  --barva-tlumena: #4a4a4a;
  --barva-cara: #d8d8d8;
  --pismo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --obsah-max: 64rem;
  --mezera: 1.25rem;
}

body { font-size: 1.0625rem; }
.m { font-family: var(--mono); }

/* --- pruh ukázky --- */
.ukazka { background: #111; color: #fff; text-align: center; font: 0.75rem/1.4 var(--mono); padding: 0.5rem var(--mezera); }
.ukazka a { color: #fff; }

/* --- hlavička --- */
.hlavicka {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem var(--mezera);
  max-width: none; margin: 0; padding: 1rem max(var(--mezera), calc((100% - var(--obsah-max)) / 2 + var(--mezera)));
  border-bottom: 1px solid var(--barva-text);
}
.logo { font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: -0.02em; }
.logo span { color: var(--barva-akcent); }
.hlavicka-telefon { font: 0.9rem var(--mono); text-decoration: none; border-bottom: 2px solid var(--barva-akcent); padding-bottom: 1px; }
@media (max-width: 47.99rem) { .hlavicka-telefon { display: none; } }
.menu-tlacitko { border: 1px solid var(--barva-text); background: none; padding: 0 1rem; font: 0.85rem var(--mono); }
.menu { flex-basis: 100%; order: 3; }
.menu ul { display: grid; gap: 0; list-style: none; padding: 0; }
.menu a { display: block; padding: 0.75rem 0; border-top: 1px solid var(--barva-cara); text-decoration: none; font-weight: 600; }
.menu a:hover { color: var(--barva-akcent); }

@media (min-width: 48rem) {
  .hlavicka { flex-wrap: nowrap; }
  .menu { flex-basis: auto; order: 0; margin-left: auto; }
  .menu ul { display: flex; gap: 1.5rem; }
  .menu a { padding: 0.25rem 0; border-top: 0; }
}

/* --- obsah --- */
main > section { max-width: var(--obsah-max); margin-inline: auto; padding: 2.5rem var(--mezera); }
main > section + section { border-top: 1px solid var(--barva-cara); }
h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); letter-spacing: -0.03em; margin-bottom: 1rem; }
h2::before { content: "# "; color: var(--barva-akcent); font-family: var(--mono); font-weight: 400; }
h3 { font-size: 1.25rem; }
p + p { margin-top: 1rem; }

.uvod { padding-top: 3rem; padding-bottom: 3rem; }
.stitek { color: var(--barva-akcent); font-size: 0.85rem; }
.uvod h1 { font-size: clamp(2rem, 7vw, 3.75rem); font-weight: 700; letter-spacing: -0.035em; max-width: 14em; margin: 0.75rem 0 1rem; }
.perex { max-width: 34em; color: var(--barva-tlumena); font-size: 1.15rem; margin-bottom: 1.5rem; }

/* tlačítka: obrys, tučné písmo, modrá šipka */
.tlacitko {
  background: var(--barva-pozadi); color: var(--barva-text);
  border: 2px solid var(--barva-text); border-radius: 6px;
  font-weight: 700; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.tlacitko::after { content: "\00a0→"; color: var(--barva-akcent); }
.tlacitko:hover { background: var(--barva-text); color: #fff; }
.tlacitko:hover::after { color: #fff; }
button.tlacitko { font: inherit; font-weight: 700; }

/* služby: očíslovaný seznam */
.seznam { list-style: none; padding: 0; border-top: 1px solid var(--barva-text); }
.seznam li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--barva-cara); }
.seznam .m { color: var(--barva-akcent); padding-top: 0.2rem; }
.seznam h3 { grid-column: 2; }
.seznam p { grid-column: 2; color: var(--barva-tlumena); margin-top: 0.25rem; }
@media (min-width: 48rem) {
  .seznam li { grid-template-columns: 5rem 1fr 1.3fr; }
  .seznam h3, .seznam p { grid-column: auto; margin: 0; }
}

/* časté dotazy */
details { border-top: 1px solid var(--barva-cara); }
details:last-of-type { border-bottom: 1px solid var(--barva-cara); }
summary { list-style: none; cursor: pointer; padding: 1rem 0; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; min-height: 2.75rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 1.25rem var(--mono); color: var(--barva-akcent); }
details[open] summary::after { content: "−"; }
details p { padding-bottom: 1rem; color: var(--barva-tlumena); }

/* kontakt a formulář */
.kontakt-udaje { margin-bottom: 1.5rem; }
.formular { max-width: 36rem; }
.formular label { font: 0.85rem var(--mono); }
.formular input, .formular textarea { border: 1px solid var(--barva-text); border-radius: 6px; background: #fff; }
.formular [aria-invalid="true"] { border-width: 2px; }
.formular-souhlas { font-size: 0.9rem; color: var(--barva-tlumena); margin: 0 0 1rem; }

.mapa { margin: 2rem 0 0.5rem; max-width: 40rem; border: 1px solid var(--barva-text); }
.mapa figcaption { font: 0.75rem var(--mono); padding: 0.4rem 0.6rem; border-top: 1px solid var(--barva-text); }
.mapa-odkazy { font: 0.85rem var(--mono); }

/* zásady */
.zasady h2 { font-size: 1.3rem; margin-top: 1.75rem; }
.zasady h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -0.03em; margin-bottom: 1rem; }

/* patička */
.paticka { max-width: none; margin: 0; padding: 1.5rem max(var(--mezera), calc((100% - var(--obsah-max)) / 2 + var(--mezera))) 2rem; border-top: 1px solid var(--barva-text); font: 0.85rem/1.6 var(--mono); }

/* lišta Zavolat na mobilu */
.zavolat { background: var(--barva-akcent); font-family: var(--mono); letter-spacing: 0.02em; }

/* fotky */
.uvod-foto, .siroka-foto, .portret-foto { display: block; }
.uvod-foto img, .siroka-foto img, .portret-foto img { width: 100%; border: 1px solid var(--barva-text); object-fit: cover; }
.uvod-foto { margin-top: 2rem; }
.uvod-foto img { aspect-ratio: 16 / 10; }
.siroka-foto { margin-bottom: 1.5rem; }
.siroka-foto img { aspect-ratio: 16 / 7; }
.o-mne { display: grid; gap: 1.25rem; align-items: start; }
.portret-foto { max-width: 15rem; }
.portret-foto img { aspect-ratio: 4 / 5; }
@media (min-width: 48rem) {
  .uvod { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 2.5rem; align-items: center; }
  .uvod > * { grid-column: 1; }
  .uvod .uvod-foto { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .o-mne { grid-template-columns: 15rem 1fr; gap: 2rem; }
}