/* Web zubní ordinace best-dent.cz. Žádné externí zdroje, žádné inline styly (CSP). */

/* Nadpisové písmo (Montserrat 800, OFL – licence v pismo/OFL-montserrat.txt). */
@font-face {
  font-family: "Nadpis";
  src: url("pismo/montserrat-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Ručně psané akcentní písmo (Dancing Script, OFL – licence v pismo/OFL-dancingscript.txt). */
@font-face {
  font-family: "Rucni";
  src: url("pismo/dancingscript-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Světlá část stránky. */
  --navy: #123A7B;
  --akcent: #1D63D0;
  --akcent-jasna: #2372E8;   /* jen dekor a velké tučné texty (kontrast 4.52:1 na bílé) */
  --akcent-tmava: #123A7B;
  --akcent-svetla: #EAF2FC;
  --pozadi: #F5F9FE;
  --plocha: #FFFFFF;
  --text: #1E293B;
  --text-tlumeny: #4E5D75;
  --linka: #D7E3F4;

  /* Tmavé plochy (hero, patička). Gradient jde od --navy-hluboka po --navy;
     kontrasty jsou měřené proti nejsvětlejšímu místu gradientu, tedy proti --navy. */
  --navy-hluboka: #061834;
  --navy-stredni: #0A2450;
  --modra-svit: #7CC0FF;             /* druhá barva nadpisu, 5.66:1 */
  --text-na-tmave: #FFFFFF;          /* 10.95:1 */
  --text-na-tmave-tlumeny: #C7DDF8;  /* 7.89:1 */

  --vlnka-vyska: clamp(24px, 4vw, 56px);
  --vlnka-obrazek: url("img/vlnka.svg");

  /* Hlavička je fixní, takže hero i kotvy sekcí si pod ni musí nechat místo.
     Hodnota odpovídá skutečné výšce hlavičky v daném rozvržení. */
  --vyska-hlavicky: 7rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--pozadi);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--akcent);
  transition: color 0.2s;
}

a:hover {
  color: var(--akcent-tmava);
}

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
}

.pruh-tmavy :focus-visible {
  outline-color: var(--modra-svit);
}

.obal {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Text jen pro odečítače obrazovky. */
.jen-pro-ctecky {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== Ikony a odznaky ===== */

/* Skrytá definice SVG symbolů na začátku <body>. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ikona {
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
}

/* Kulatý gradientový odznak s bílou čárovou ikonou (motiv letáčku). */
.odznak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--akcent-jasna), var(--navy));
  color: #fff;
  flex: none;
}

.odznak-maly {
  width: 1.6rem;
  height: 1.6rem;
}

/* ===== Ručně psané akcentní věty ===== */

.rucni {
  font-family: "Rucni", "Bradley Hand", "Segoe Script", cursive;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.25;
}

/* Psaný tah pod větou; s JS se po odkrytí vykreslí zleva doprava. */
.tah {
  display: block;
  width: min(17rem, 100%);
  height: 0.75rem;
  margin-top: 0.15rem;
  overflow: visible;
}

.tah path {
  fill: none;
  stroke: var(--modra-svit);
  stroke-width: 3;
  stroke-linecap: round;
}

/* ===== Přeskočení na obsah ===== */

.preskocit {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--akcent);
  color: #fff;
  padding: 0.6em 1.2em;
  z-index: 100;
}

.preskocit:focus {
  left: 0;
  color: #fff;
}

/* Neviditelná značka úplně nahoře – skript podle ní přepíná stav hlavičky. */
.vrchol {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
}

/* ===== Hlavička ===== */

/* Výchozí (a jediný stav bez JS): světlá, čitelná nad libovolnou sekcí.
   Fixní proto, aby nad tmavým hero mohla být průhledná a obsah jí podtékal. */
.hlavicka {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid var(--linka);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.hlavicka.odrolovana {
  box-shadow: 0 6px 22px rgba(6, 24, 52, 0.14);
}

/* Nad tmavým hero je hlavička průhledná a světlá; jen se zapnutým JS,
   protože bez něj by se nikdy nepřepnula zpět do světlé varianty. */
html.js-hlavicka .hlavicka:not(.odrolovana) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

html.js-hlavicka .hlavicka:not(.odrolovana) .znacka {
  color: var(--text-na-tmave);
}

html.js-hlavicka .hlavicka:not(.odrolovana) .znacka-jmeno {
  color: var(--text-na-tmave);
}

html.js-hlavicka .hlavicka:not(.odrolovana) .znacka-popis,
html.js-hlavicka .hlavicka:not(.odrolovana) nav a {
  color: var(--text-na-tmave-tlumeny);
}

html.js-hlavicka .hlavicka:not(.odrolovana) .znacka-ikona {
  color: var(--modra-svit);
}

html.js-hlavicka .hlavicka:not(.odrolovana) nav a:hover,
html.js-hlavicka .hlavicka:not(.odrolovana) nav a.aktivni {
  color: var(--text-na-tmave);
}

html.js-hlavicka .hlavicka:not(.odrolovana) .hlavicka-tel {
  color: #fff;
}

/* Do 900 px: značka a telefon v prvním řádku, navigace přes celou šířku pod nimi. */
.hlavicka-vnitrek {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem 1rem;
  padding-block: 0.7rem;
  transition: padding-block 0.3s;
}

.hlavicka-vnitrek nav {
  grid-row: 2;
  grid-column: 1 / -1;
}

.hlavicka-vnitrek .hlavicka-tel {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
}

.hlavicka.odrolovana .hlavicka-vnitrek {
  padding-block: 0.45rem;
}

.znacka {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  line-height: 1.3;
  transition: color 0.3s;
}

.znacka-ikona {
  color: var(--akcent);
  transition: color 0.3s;
}

.znacka-jmeno {
  display: block;
  font-family: "Nadpis", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
  transition: color 0.3s;
}

/* Do 900 px se popis vynechá, aby fixní hlavička zůstala nízká. */
.znacka-popis {
  display: none;
  font-size: 0.8rem;
  color: var(--text-tlumeny);
  transition: color 0.3s;
}

.hlavicka nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0.35em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  align-items: center;
  font-size: 0.88rem;
}

.hlavicka nav a {
  position: relative;
  text-decoration: none;
  color: var(--text-tlumeny);
  font-weight: 500;
  transition: color 0.25s;
}

/* Podtržení aktivní položky vyjíždí zleva. */
.hlavicka nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35em;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.25s ease-out;
}

.hlavicka nav a:hover::after,
.hlavicka nav a.aktivni::after {
  scale: 1 1;
}

.hlavicka nav a:hover,
.hlavicka nav a.aktivni {
  color: var(--akcent);
}

.hlavicka-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: var(--akcent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.4em 1.1em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(29, 99, 208, 0.35);
  transition: background-color 0.2s, box-shadow 0.25s, translate 0.25s;
}

.hlavicka-tel:hover {
  background: var(--akcent-jasna);
  box-shadow: 0 8px 24px rgba(35, 114, 232, 0.5);
  translate: 0 -2px;
}

/* ===== Sekce obecně ===== */

section {
  scroll-margin-top: calc(var(--vyska-hlavicky) + 0.5rem);
}

.pruh {
  position: relative;
  padding-block: 3rem;
}

/* Ledový pruh (aktuality, ordinační hodiny). */
.pruh-alt,
.pruh-aktuality {
  background: linear-gradient(180deg, var(--akcent-svetla), #DCEAFB);
}

/* Zvlněné hrany. Vlnka je maska, takže jeden soubor obslouží libovolnou barvu hrany. */
.pruh-vlnkovany::before,
.pruh-vlnkovany::after,
.pruh-vlnka-dole::after,
.pruh-hero::after,
.paticka::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--vlnka-vyska);
  -webkit-mask: var(--vlnka-obrazek) no-repeat center / 100% 100%;
  mask: var(--vlnka-obrazek) no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: 2;
}

.pruh-vlnkovany {
  padding-block: calc(3rem + var(--vlnka-vyska));
}

.pruh-vlnka-dole {
  padding-bottom: calc(3rem + var(--vlnka-vyska));
}

.pruh-vlnkovany::before {
  top: 0;
  background-color: var(--pozadi);
}

.pruh-vlnkovany::after,
.pruh-vlnka-dole::after {
  bottom: 0;
  background-color: var(--pozadi);
  transform: scaleY(-1);
}

/* ===== Typografie ===== */

h1,
h2,
h3 {
  font-family: "Nadpis", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.3rem, 5.6vw + 0.6rem, 4.2rem);
  line-height: 1.02;
  margin: 0.25em 0 0.3em;
  color: var(--navy);
}

.h1-uvod {
  display: block;
  font-size: 0.3em;
  letter-spacing: 0.22em;
  color: var(--modra-svit);
  margin-bottom: 0.5em;
}

h2 {
  font-size: clamp(1.7rem, 2.4vw + 0.9rem, 2.4rem);
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--navy);
}

h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--akcent-jasna), var(--navy));
  margin-top: 0.5rem;
}

/* Zvýrazněné slovo v nadpisu (dvoubarevný nadpis jako na letáčku). */
.zvyraz {
  color: var(--akcent-jasna);
}

h1 .zvyraz {
  display: block;
  color: var(--modra-svit);
}

.sekce-uvod {
  color: var(--text-tlumeny);
  margin-top: 0;
  font-size: 1.05rem;
}

.pozn {
  font-size: 0.9rem;
  color: var(--text-tlumeny);
}

/* ===== Hero ===== */

.pruh-hero {
  overflow: hidden;
  padding-top: calc(var(--vyska-hlavicky) + 1.5rem);
  padding-bottom: calc(1.5rem + var(--vlnka-vyska));
  background:
    radial-gradient(38rem 30rem at 82% 6%, rgba(124, 192, 255, 0.28), transparent 62%),
    radial-gradient(30rem 26rem at 4% 92%, rgba(35, 114, 232, 0.3), transparent 60%),
    linear-gradient(158deg, var(--navy-stredni) 0%, var(--navy-hluboka) 52%, var(--navy) 100%);
  color: var(--text-na-tmave-tlumeny);
}

/* Vlnka na spodní hraně v barvě navazující sekce aktualit. */
.pruh-hero::after {
  bottom: 0;
  background-color: var(--akcent-svetla);
  transform: scaleY(-1);
}

/* Tečkovaný rastr (dekor z letáčku). */
.pruh-hero::before {
  content: "";
  position: absolute;
  top: calc(var(--vyska-hlavicky) - 1rem);
  right: -1.5rem;
  width: 9rem;
  height: 5.5rem;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1.5px, transparent 2px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
}

/* Světelné stopy přes celý pruh. */
.hero-stopy {
  position: absolute;
  inset: -10% -5%;
  width: 110%;
  height: 120%;
  pointer-events: none;
  z-index: 0;
}

/* Krytí stop je držené nízko schválně: přes ně prochází text hero pruhu
   a světlejší stopa by mu srazila kontrast pod 4.5:1. */
.stopa {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-linecap: round;
}

.stopa-1 {
  stroke-width: 2.5;
  filter: blur(1px);
}

.stopa-2 {
  stroke: rgba(124, 192, 255, 0.45);
  stroke-width: 1.2;
}

.stopa-3 {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 3.5;
  filter: blur(3px);
}

.stopa-4 {
  stroke: rgba(124, 192, 255, 0.3);
  stroke-width: 1.8;
  filter: blur(1.5px);
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-block: 2.5rem;
}

.hero-text {
  color: var(--text-na-tmave-tlumeny);
}

.hero h1 {
  color: var(--text-na-tmave);
}

.stitek {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--text-na-tmave);
  font-family: "Nadpis", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35em 1.2em 0.35em 0.4em;
  border-radius: 999px;
  margin: 0;
}

.stitek .odznak {
  background: linear-gradient(135deg, var(--modra-svit), var(--akcent-jasna));
}

.podtitul {
  font-size: 1.15rem;
  color: var(--text-na-tmave-tlumeny);
  max-width: 34rem;
}

.rucni-hero {
  color: var(--modra-svit);
  margin: 1.25rem 0 0;
}

.hero-akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-block: 1.75rem 0.75rem;
}

.tlacitko {
  display: inline-block;
  background: linear-gradient(135deg, var(--akcent-jasna), var(--akcent));
  color: #fff;
  text-decoration: none;
  font-family: "Nadpis", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0.85em 1.9em;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(29, 99, 208, 0.45);
  transition: box-shadow 0.25s, translate 0.25s;
}

.tlacitko:hover {
  color: #fff;
  translate: 0 -3px;
  box-shadow: 0 16px 38px rgba(35, 114, 232, 0.6);
}

.odkaz-vedlejsi {
  font-weight: 600;
  color: var(--text-na-tmave);
  text-underline-offset: 0.3em;
}

.odkaz-vedlejsi:hover {
  color: var(--modra-svit);
}

.hero-pozn {
  font-size: 0.9rem;
  color: var(--text-na-tmave-tlumeny);
  margin: 0;
  opacity: 0.85;
}

/* Animovaný zub se září a světelnými oblouky. */
.hero-obraz {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

.hero-obraz::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background: radial-gradient(circle, rgba(124, 192, 255, 0.4), transparent 66%);
  pointer-events: none;
  z-index: -1;
}

.hero-prstenec {
  position: absolute;
  inset: -14% -10%;
  width: 120%;
  height: 128%;
  pointer-events: none;
  z-index: -1;
}

.prstenec {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

.prstenec-2 {
  stroke: rgba(124, 192, 255, 0.45);
  rotate: 24deg;
}

.hero-zub {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.zub-telo {
  filter: drop-shadow(0 10px 18px rgba(6, 24, 52, 0.45));
}

/* Světelný pruh přejíždějící po zubu; bez animace je schovaný mimo tvar. */
.zub-lesk {
  fill: rgba(255, 255, 255, 0.85);
  translate: -20px 0;
}

.zub-odlesk {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Obrys se po načtení vykreslí tahem; bez animace je vidět celý. */
.zub-obrys {
  fill: none;
  stroke: var(--modra-svit);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.zub-stin {
  fill: rgba(6, 24, 52, 0.5);
  transform-box: fill-box;
  transform-origin: center;
}

.jiskra {
  fill: #fff;
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: center;
}

.jiskra-1 {
  fill: var(--modra-svit);
}

.jiskra-4 {
  fill: var(--modra-svit);
}

/* Indikátor rolování dolů. */
.hero-dolu {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  margin: 1.5rem auto 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-na-tmave);
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.25s, color 0.25s;
}

.hero-dolu:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--modra-svit);
}

/* ===== Aktuality ===== */

.aktualita {
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: 18px;
  padding: 1.2rem 1.5rem 1.2rem 4.6rem;
  margin: 1rem 0 0;
  position: relative;
  box-shadow: 0 6px 18px rgba(18, 58, 123, 0.07);
  transition: translate 0.25s, box-shadow 0.25s, border-color 0.25s;
}

article.aktualita:hover {
  translate: 0 -4px;
  border-color: rgba(35, 114, 232, 0.45);
  box-shadow: 0 16px 36px rgba(18, 58, 123, 0.16);
}

/* Kulatý odznak se zubem vlevo v kartě. */
.aktualita::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: url("img/zub-bily.svg") no-repeat center / 1.7rem 1.7rem,
    linear-gradient(135deg, var(--akcent-jasna), var(--navy));
  box-shadow: 0 6px 16px rgba(29, 99, 208, 0.35);
}

.aktualita h3 {
  margin: 0 0 0.35em;
  font-size: 1.2rem;
  color: var(--navy);
}

.aktualita p {
  margin: 0;
}

.aktualita-zadna {
  color: var(--text-tlumeny);
}

.aktualita-zadna::before {
  background: url("img/zub-bily.svg") no-repeat center / 1.7rem 1.7rem,
    linear-gradient(135deg, #A9BCD9, #7E93B5);
  box-shadow: none;
}

/* ===== Služby ===== */

.sluzby-text > p:first-child {
  margin-top: 0;
  font-size: 1.05rem;
  max-width: 48rem;
}

.seznam-sluzeb {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.75rem;
}

.seznam-sluzeb li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: 14px;
  padding: 0.7rem 1.1rem;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(18, 58, 123, 0.06);
  transition: translate 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.seznam-sluzeb li:hover {
  translate: 0 -3px;
  border-color: rgba(35, 114, 232, 0.45);
  box-shadow: 0 14px 30px rgba(18, 58, 123, 0.14);
}

.rucni-sluzby {
  color: var(--akcent);
  margin-bottom: 0;
}

/* ===== Ordinační hodiny ===== */

.hodiny-tabulka {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 26rem;
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: 22px;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 10px 30px rgba(18, 58, 123, 0.10);
}

.hodiny-tabulka th,
.hodiny-tabulka td {
  text-align: left;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--linka);
}

.hodiny-tabulka th {
  color: var(--navy);
  font-weight: 600;
}

.hodiny-tabulka td {
  padding-left: 2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hodiny-tabulka tr:last-child th,
.hodiny-tabulka tr:last-child td {
  border-bottom: none;
}

.hodiny-tabulka .zavreno {
  color: var(--text-tlumeny);
}

/* Dnešní den vyznačuje PHP podle časové zóny Europe/Prague. */
.hodiny-tabulka .dnes th,
.hodiny-tabulka .dnes td {
  color: var(--akcent);
  font-weight: 700;
}

.znacka-dnes {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.1em 0.7em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--akcent-jasna), var(--navy));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

/* ===== Kontakt ===== */

.kontakt-mrizka {
  display: grid;
  gap: 1.5rem;
}

.kontakt-adresa {
  font-style: normal;
  background: linear-gradient(150deg, var(--navy-stredni), var(--navy));
  color: var(--text-na-tmave-tlumeny);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 14px 34px rgba(18, 58, 123, 0.28);
}

.kontakt-adresa .odznak {
  display: flex;
  margin-bottom: 0.9rem;
  background: linear-gradient(135deg, var(--modra-svit), var(--akcent-jasna));
}

.kontakt-adresa strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: "Nadpis", system-ui, sans-serif;
  font-weight: 800;
  color: var(--text-na-tmave);
}

.kontakt-seznam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.kontakt-seznam li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 4px 14px rgba(18, 58, 123, 0.06);
  transition: translate 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.kontakt-seznam li:hover {
  translate: 0 -3px;
  border-color: rgba(35, 114, 232, 0.45);
  box-shadow: 0 14px 30px rgba(18, 58, 123, 0.14);
}

.popisek {
  font-weight: 600;
  color: var(--navy);
}

/* ===== Patička ===== */

.paticka {
  position: relative;
  background: linear-gradient(160deg, var(--navy-stredni), var(--navy-hluboka));
  color: var(--text-na-tmave-tlumeny);
  padding-top: calc(2.25rem + var(--vlnka-vyska));
  padding-bottom: 2.25rem;
  font-size: 0.875rem;
}

.paticka::before {
  top: 0;
  background-color: var(--pozadi);
}

.rucni-paticka {
  color: var(--text-na-tmave);
  font-size: 1.9rem;
  margin: 0 0 0.75rem;
}

/* ===== Postupné odkrývání při rolování (jen s JS a bez omezení pohybu) ===== */

@media (prefers-reduced-motion: no-preference) {
  html.js .odhal {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.7s ease-out, translate 0.7s ease-out;
  }

  html.js .odhal.odhaleno {
    opacity: 1;
    translate: 0 0;
  }

  /* Karty ve stejné skupině naskakují po sobě. */
  html.js .seznam-sluzeb .odhal:nth-child(2),
  html.js .aktualita.odhal:nth-of-type(2) {
    transition-delay: 0.09s;
  }

  html.js .seznam-sluzeb .odhal:nth-child(3),
  html.js .aktualita.odhal:nth-of-type(3) {
    transition-delay: 0.18s;
  }

  html.js .seznam-sluzeb .odhal:nth-child(4),
  html.js .aktualita.odhal:nth-of-type(4) {
    transition-delay: 0.27s;
  }

  html.js .seznam-sluzeb .odhal:nth-child(5),
  html.js .aktualita.odhal:nth-of-type(n + 5) {
    transition-delay: 0.36s;
  }

  /* Psaný tah se vykreslí až po odkrytí věty. */
  html.js .tah path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }

  html.js .odhaleno .tah path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.2s ease-out 0.45s;
  }

  /* ===== Nekonečné dekorativní animace ===== */

  .stopy-skupina {
    animation: plynuti 22s ease-in-out infinite;
  }

  .stopa-2 {
    animation: dychani 9s ease-in-out infinite;
  }

  .stopa-4 {
    animation: dychani 13s ease-in-out infinite 2s;
  }

  .zub {
    animation: vznaseni 8s ease-in-out infinite;
  }

  .zub-stin {
    animation: stin-dychani 8s ease-in-out infinite;
  }

  .zub-zare {
    animation: dychani 8s ease-in-out infinite;
  }

  /* Vykreslení obrysu a následné „vyplnění" zubu po načtení stránky. */
  .zub-obrys {
    animation: vykresleni 2s ease-out both;
  }

  .zub-telo,
  .zub-odlesk {
    animation: objeveni 1.2s ease-out 1.1s both;
  }

  .zub-lesk {
    animation: zablesk 7s ease-in-out 2.4s infinite;
  }

  .jiskra {
    animation: jiskreni 3.2s ease-in-out infinite;
  }

  .jiskra-2 {
    animation-delay: 0.8s;
  }

  .jiskra-3 {
    animation-delay: 1.7s;
    animation-duration: 2.6s;
  }

  .jiskra-4 {
    animation-delay: 2.3s;
    animation-duration: 3.8s;
  }

  .prstenec-1 {
    animation: krouzeni 34s linear infinite;
  }

  .prstenec-2 {
    animation: krouzeni 46s linear infinite reverse;
  }

  .hero-dolu .ikona {
    animation: poskok 2.4s ease-in-out infinite;
  }

  @keyframes plynuti {
    0%,
    100% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(-2.5%, -1.6%);
    }
  }

  @keyframes dychani {
    0%,
    100% {
      opacity: 0.35;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes vznaseni {
    0%,
    100% {
      translate: 0 0;
    }
    50% {
      translate: 0 -12px;
    }
  }

  @keyframes krouzeni {
    to {
      rotate: 360deg;
    }
  }

  @keyframes stin-dychani {
    0%,
    100% {
      scale: 1;
      opacity: 1;
    }
    50% {
      scale: 0.78 1;
      opacity: 0.55;
    }
  }

  @keyframes vykresleni {
    from {
      stroke-dashoffset: 100;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes objeveni {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes zablesk {
    0% {
      translate: -20px 0;
    }
    18%,
    100% {
      translate: 70px 0;
    }
  }

  @keyframes jiskreni {
    0%,
    100% {
      opacity: 0;
      scale: 0.3;
      rotate: 0deg;
    }
    50% {
      opacity: 1;
      scale: 1;
      rotate: 90deg;
    }
  }

  @keyframes poskok {
    0%,
    100% {
      translate: 0 -2px;
    }
    50% {
      translate: 0 3px;
    }
  }
}

/* ===== Větší obrazovky ===== */

@media (min-width: 700px) {
  .hero {
    padding-block: 3rem 2rem;
  }

  .pruh {
    padding-block: 3.75rem;
  }

  .pruh-vlnkovany {
    padding-block: calc(3.75rem + var(--vlnka-vyska));
  }

  .pruh-vlnka-dole {
    padding-bottom: calc(3.75rem + var(--vlnka-vyska));
  }

  .pruh-hero {
    padding-bottom: calc(2rem + var(--vlnka-vyska));
  }

  .pruh-hero::before {
    top: calc(var(--vyska-hlavicky) + 1rem);
    right: 1.5rem;
    width: 13rem;
    height: 8rem;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.45) 1.5px, transparent 2px);
  }

  .kontakt-mrizka {
    grid-template-columns: 1fr 1.4fr;
  }
}

@media (min-width: 900px) {
  /* Od 900 px se hlavička vejde do jediného řádku. */
  :root {
    --vyska-hlavicky: 4.3rem;
  }

  /* Dvousloupcový hero až tady – v užším rozvržení by byl text stísněný. */
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .hlavicka-vnitrek {
    grid-template-columns: auto 1fr auto;
    gap: 0 1.75rem;
    padding-block: 0.85rem;
  }

  .hlavicka-vnitrek nav {
    grid-row: auto;
    grid-column: auto;
    justify-self: end;
  }

  .hlavicka-vnitrek .hlavicka-tel {
    grid-row: auto;
    grid-column: auto;
  }

  .hlavicka nav ul {
    gap: 0.25rem 1.35rem;
    font-size: 0.95rem;
  }

  .znacka-jmeno {
    font-size: 1rem;
  }

  .znacka-popis {
    display: block;
  }
}

@media (min-width: 1000px) {
  .seznam-sluzeb {
    grid-template-columns: 1fr 1fr;
  }

  .seznam-sluzeb li:first-child {
    grid-column: 1 / -1;
  }
}