/* ============================================================
   petrkasparides.cz — styly nového webu
   Design: Figma „Kašparides-data" (2026)
   Barvy a typografie viz deploy/figma-design-specs.md
   ============================================================ */

/* ---------- Fonty (lokální, relativní cesty) ---------- */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Semibold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Variable-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Variable-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokeny ---------- */
:root {
  --primary:    #112236;  /* tmavě modrá */
  --secondary:  #bc9655;  /* zlatá */
  --svetla:     #f4e9d6;  /* krémová */
  --dark-blue:  #0d1a2d;  /* nejtmavší modrá */
  --ink:        #1a202c;  /* text na bílé */
  --white:      #ffffff;

  --font-display: 'Clash Display', 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  /* plynulé velikosti písma (1920 → mobil) */
  --fs-display:  clamp(1.9rem, 0.5rem + 4vw, 4.9rem);       /* 78 px → 30 px (−1/4) */
  --fs-pagetitle:clamp(2rem, 0.6rem + 5vw, 6.4rem);         /* 102 px → 32 px */
  --fs-hero:     clamp(2.2rem, 1rem + 3.2vw, 4.4rem);       /* 70 px */
  --fs-motto:    clamp(1.6rem, 0.9rem + 1.6vw, 2.68rem);    /* 43 px */
  --fs-radek:    clamp(1.15rem, 0.9rem + 0.7vw, 1.69rem);   /* 27 px */
  --fs-karta:    clamp(1.25rem, 1rem + 0.75vw, 1.84rem);    /* 29.5 px */

  --container-pad: clamp(1.25rem, 5.2vw, 6.25rem);          /* 100 px */
}

/* ---------- Reset a základ ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }   /* jinak by ho přebil display u .btn apod. */
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 0.95; }

.container {
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Tlačítka (pill) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  padding: 10px 26px;
  border-radius: 60px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.btn:hover { opacity: .85; transform: translateY(-1px); }
.btn--zlate        { background: var(--secondary); color: var(--primary); }
.btn--navy         { background: var(--primary);  color: var(--white); }
.btn--navy-zlata   { background: var(--primary);  color: var(--secondary); }
.btn--navy-svetla  { background: var(--primary);  color: var(--svetla); }
.btn--obrys-navy   { background: transparent; color: var(--dark-blue);
                     border: 1px solid var(--dark-blue);
                     box-shadow: 0 4px 4px rgba(0,0,0,.25); }
.btn--obrys-zlaty  { background: transparent; color: var(--secondary);
                     border: 1px solid var(--secondary);
                     box-shadow: 0 4px 4px rgba(0,0,0,.25); }
.btn--obrys-cerny  { background: transparent; color: var(--primary);
                     border: 1px solid #000; }

/* ---------- Hlavička ---------- */
.hlavicka {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 3vw, 3.7rem) var(--container-pad) 1rem;
}
.hlavicka__logo img { width: clamp(70px, 6.5vw, 125px); height: auto; }
.hlavicka__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 3rem);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.5px;
}
.hlavicka__nav a:not(.btn):hover { opacity: .7; }
.hlavicka--tmava { color: var(--secondary); }
.hlavicka--tmava .hlavicka__nav { color: var(--secondary); }
.hlavicka--svetla .hlavicka__nav { color: var(--primary); }

/* hamburger */
.hlavicka__burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px;
  position: relative;
}
.hlavicka__burger span,
.hlavicka__burger span::before,
.hlavicka__burger span::after {
  content: '';
  display: block;
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.hlavicka__burger span { top: 21px; }
.hlavicka__burger span::before { top: -8px; left: 0; right: 0; }
.hlavicka__burger span::after  { top:  8px; left: 0; right: 0; }
.hlavicka--tmava .hlavicka__burger { color: var(--secondary); }
.hlavicka--svetla .hlavicka__burger { color: var(--primary); }

@media (max-width: 900px) {
  .hlavicka__burger { display: block; }
  .hlavicka__nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem var(--container-pad) 2rem;
    background: var(--white);
    color: var(--primary);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
  }
  .hlavicka--tmava .hlavicka__nav { background: var(--dark-blue); color: var(--secondary); }
  .hlavicka__nav.je-otevrene { display: flex; }
  body.menu-otevrene { overflow: hidden; }
  .hlavicka__burger[aria-expanded="true"] span { transform: rotate(45deg); }
  .hlavicka__burger[aria-expanded="true"] span::before { transform: rotate(90deg); top: 0; }
  .hlavicka__burger[aria-expanded="true"] span::after { opacity: 0; }
}

/* ---------- Hero (HP) ---------- */
.hero {
  position: relative;
  background: var(--dark-blue);
  color: var(--svetla);
  min-height: clamp(560px, 58vw, 1120px);
  display: flex;
  flex-direction: column;
}
.hero__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero__foto::after {
  /* jemný tmavý přechod vlevo, aby byl text čitelný na všech šířkách */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,26,45,.82) 0%, rgba(13,26,45,.45) 42%, rgba(13,26,45,0) 68%);
}
.hero__obsah {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin-top: clamp(2rem, 8vw, 10rem);
  padding-inline: var(--container-pad);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.hero__nadtitulek {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: .5rem;
}
.hero h1 {
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1.04;
  color: var(--secondary);
}
.hero__podtitulek {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1vw + .6rem, 1.5rem);
  line-height: 1.1;
  color: var(--secondary);
  margin-top: 1.6rem;
  max-width: 600px;
}
.hero__tlacitka {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 3rem;
}

/* ---------- Stats pruh ---------- */
.stats {
  background: var(--dark-blue);
  color: var(--white);
  padding: clamp(2.5rem, 5vw, 6rem) 0;
}
.stats__mrizka {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.35fr;
  padding-inline: var(--container-pad);
}
.stats__bunka {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-inline: clamp(1rem, 2.5vw, 3.5rem);
  border-left: 1px solid rgba(255,255,255,.85);
}
.stats__bunka:first-child { border-left: 0; padding-left: 0; }

/* Animace statistik — třídu .stats--pripraveno přidá JS, takže bez JS
   (nebo při zapnutém omezení animací) zůstane všechno normálně vidět. */
.stats--pripraveno .stats__bunka {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.stats--nacteno .stats__bunka { opacity: 1; transform: none; }
/* buňky naskakují po sobě */
.stats--nacteno .stats__bunka:nth-child(2) { transition-delay: .12s; }
.stats--nacteno .stats__bunka:nth-child(3) { transition-delay: .24s; }
/* číslo se počítá — pevná šířka podle obsahu, ať layout „neposkakuje" */
.stats__cislo .js-pocitadlo { display: inline-block; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .stats--pripraveno .stats__bunka { opacity: 1; transform: none; transition: none; }
}
.stats__cislo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 1rem + 4.2vw, 6.5rem);
  line-height: .95;
  color: var(--secondary);
  white-space: nowrap;
}
.stats__cislo sup {
  font-size: .45em;
  font-weight: 500;
  vertical-align: .55em;
}
.stats__oblast {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, .6rem + 1.8vw, 2.85rem);
  color: var(--secondary);
  line-height: 1;
}
.stats__popisek {
  font-family: var(--font-display);
  font-size: clamp(1rem, .8rem + .5vw, 1.44rem);
  line-height: 1.1;
  max-width: 9em;
}

/* ---------- Pruh s kotvami služeb ---------- */
.kotvy {
  background: var(--white);
  padding: clamp(2rem, 4vw, 4.5rem) 0;
}
.kotvy__seznam {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 8vw, 9rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, .9rem + .7vw, 1.63rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--primary);
}
.kotvy__seznam a:hover { color: var(--secondary); }

/* ---------- Sekce služeb (prodávám / kupuji / řeším) ---------- */
.sluzba {
  padding: clamp(3rem, 5.5vw, 6.5rem) 0;
}
.sluzba--krem  { background: var(--svetla); color: var(--primary); }
.sluzba--navy  { background: var(--primary); color: var(--svetla); }
.sluzba__mrizka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 4vw, 5.5rem);
  row-gap: 2.5rem;
  padding-inline: var(--container-pad);
  align-items: start;
}
.sluzba__titulek {
  grid-column: 1;
  font-size: var(--fs-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sluzba--navy .sluzba__titulek { color: var(--secondary); }
.sluzba__motto {
  grid-column: 2;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-motto);
  letter-spacing: .02em;
  text-transform: uppercase;
  max-width: 730px;
}
.sluzba--navy .sluzba__motto { color: var(--secondary); }
.sluzba__levy {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 430px;
}
.sluzba__levy p strong { font-weight: 700; }
.sluzba__stitky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sluzba__tlacitka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: .4rem;
}
.sluzba__seznam { grid-column: 2; }
.sluzba__radek {
  display: grid;
  grid-template-columns: minmax(52px, 98px) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(.8rem, 1.5vw, 2rem);
  padding: 24px 10px;
  border-bottom: 1px solid currentColor;
}
.sluzba--krem .sluzba__radek { border-color: var(--primary); }
.sluzba--navy .sluzba__radek { border-color: var(--svetla); }
.sluzba__radek dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-radek);
  line-height: 1.1;
  grid-column: 2;
}
.sluzba__radek .sluzba__cislo {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-radek);
  line-height: 1.1;
}
.sluzba__radek dd {
  grid-column: 3;
  grid-row: 1;
  font-size: 18px;
}
.sluzba__cta-pruh {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  padding: 0 var(--container-pad);
  margin-top: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 560px) {
  .sluzba__cta-pruh .btn { flex: 1 1 100%; }
}

/* ---------- Partneři ---------- */
.partneri {
  background: var(--secondary);
  color: var(--primary);
  padding: clamp(2.5rem, 4.5vw, 5.5rem) 0;
}
.partneri__mrizka {
  display: grid;
  grid-template-columns: minmax(260px, 490px) 1fr;
  gap: clamp(2rem, 4vw, 6rem);
  align-items: center;
  padding-inline: var(--container-pad);
}
.partneri h2 {
  font-size: var(--fs-motto);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.partneri__loga {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(1.75rem, 3vw, 3.25rem) clamp(1rem, 2.5vw, 2.75rem);
}
.partneri__loga img {
  height: clamp(26px, 2.6vw, 46px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .85;
}
.partneri__loga img.partner--vetsi { height: clamp(30px, 3vw, 52px); }

/* ---------- Reference ---------- */
.reference {
  background: var(--white);
  padding: clamp(3rem, 5.5vw, 6.5rem) 0 clamp(2rem, 4vw, 4rem);
}
.reference h2 {
  font-size: var(--fs-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  padding-inline: var(--container-pad);
  margin-bottom: clamp(.6rem, 1.4vw, 1.1rem);
}
.reference__slider {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;   /* vodorovné rolování neunikne do stránky */
  overscroll-behavior-y: auto;      /* svislé naopak projde dál — jinak se scroll „zasekne" */
  touch-action: pan-x pan-y pinch-zoom;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-inline: calc(var(--container-pad) + clamp(0rem, 6vw, 8.5rem));
  scroll-padding-inline: calc(var(--container-pad) + clamp(0rem, 6vw, 8.5rem));
}
.reference__slider::-webkit-scrollbar { display: none; }
.reference__pas {
  display: flex;
  gap: clamp(2rem, 5vw, 7rem);
}
.reference__polozka {
  flex: 0 0 calc(50% - clamp(1rem, 2.5vw, 3.5rem));
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .reference__polozka { flex-basis: 100%; }
}
.reference__sipka-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease;
}
.reference__sipka-btn:hover { transform: translateX(6px); }
.reference__jmeno {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  color: var(--ink);
  margin-bottom: 1.8rem;
}
.reference__text {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.5;
}
.reference__datum {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  margin-top: 1.5rem;
}
.reference__sipka {
  padding-inline: var(--container-pad);
  margin-top: clamp(2rem, 4vw, 4rem);
}
.reference__sipka img { width: 98px; height: auto; }

/* Hodnocení z jednotlivých profilů (REAS, Firmy.cz, Google) — každý zvlášť a ověřitelný */
.reference__zdroje {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 3rem);
  padding-inline: var(--container-pad);
  margin-bottom: clamp(2rem, 4vw, 4.5rem);
}
.reference__zdroj {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .55rem .95rem;
  border: 1px solid rgba(23,23,23,.18);
  border-radius: 60px;
  transition: border-color .2s ease, transform .2s ease;
}
.reference__zdroj:hover { border-color: var(--secondary); transform: translateY(-1px); }
.reference__hvezdy { color: var(--secondary); letter-spacing: 1px; }
.reference__zdroj-cislo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, .9rem + .4vw, 1.3rem);
  color: var(--primary);
}
.reference__zdroj-popis {
  font-family: var(--font-display);
  font-size: clamp(.95rem, .85rem + .25vw, 1.1rem);
  color: rgba(23,23,23,.62);
}

/* ---------- Blog sekce + karty ---------- */
.blog-sekce {
  background: var(--white);
  padding: clamp(2.5rem, 4.5vw, 5.5rem) 0;
}
.blog-sekce h2 {
  font-size: var(--fs-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  padding-inline: var(--container-pad);
  margin-bottom: clamp(2rem, 4vw, 4.5rem);
}
.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 4vw, 4.7rem);
  padding-inline: var(--container-pad);
}
/* HP sekce Blog: vodorovný posuvník článků (stejné chování jako slider recenzí),
   aby se karty neskládaly pod sebe a daly se procházet i s přibývajícími články */
.blog-slider {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y pinch-zoom;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scroll-padding-inline: var(--container-pad);
}
.blog-slider::-webkit-scrollbar { display: none; }
.blog-sekce .karty--pas {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-inline: var(--container-pad);
}
.blog-sekce .karty--pas .karta {
  flex: 0 0 clamp(260px, 30%, 420px);
  scroll-snap-align: start;
}
.blog-sipka {
  padding-inline: var(--container-pad);
  margin-top: clamp(2rem, 4vw, 4rem);
}
.blog-sipka img { width: 98px; height: auto; }
@media (max-width: 900px) {
  /* na mobilu je vidět kousek další karty → je poznat, že se dá posouvat */
  .blog-sekce .karty--pas .karta { flex-basis: 82%; }
}
.karta { color: var(--ink); }
.karta__foto {
  aspect-ratio: 439 / 340;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.karta__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.karta:hover .karta__foto img { transform: scale(1.04); }
.karta__titulek {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-karta);
  line-height: 1.21;
  text-transform: uppercase;
}
.karta__datum {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  margin-top: 1.2rem;
}
.karta__perex { margin-top: 1rem; font-size: 18px; }

/* Blog (stránka): jednotná mřížka článků 3 v řadě */
.blog-vypis { padding-bottom: clamp(3rem, 5vw, 6rem); }
.karty--triny {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: clamp(2.5rem, 4.5vw, 5rem);
}

/* ---------- CTA + formulář ---------- */
.cta {
  background: var(--white);
  padding: clamp(3rem, 5.5vw, 7rem) 0 clamp(3rem, 5vw, 6rem);
}
.cta h2 {
  font-size: var(--fs-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  max-width: 900px;
  padding-inline: var(--container-pad);
}
.cta__podnadpis {
  padding-inline: var(--container-pad);
  margin-top: clamp(.75rem, 1.5vw, 1.25rem);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .9rem + .6vw, 1.4rem);
  color: rgba(23, 23, 23, .62);
  max-width: 900px;
}
.formular {
  margin-top: clamp(2.5rem, 5vw, 6rem);
  padding-inline: calc(var(--container-pad) + clamp(0rem, 7vw, 8.5rem));
  max-width: 1720px;
}
.formular__mrizka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 10vw, 13rem);
  row-gap: clamp(2rem, 4.5vw, 4.2rem);
}
.formular .pole--cele { grid-column: 1 / -1; }
.pole label {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(23,23,23,.5);
  margin-bottom: 6px;
}
.pole input,
.pole textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #2b2b2b;
  background: transparent;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  padding: 4px 0 10px;
  border-radius: 0;
}
.pole textarea { min-height: 42px; resize: vertical; }
.pole input:focus,
.pole textarea:focus {
  outline: none;
  border-bottom-color: var(--secondary);
}
.formular__souhlas {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  color: rgba(0,0,0,.5);
}
.formular__souhlas input {
  appearance: none;
  width: 30px; height: 30px;
  border: 2px solid currentColor;
  border-radius: 7px;
  cursor: pointer;
  flex: none;
  display: grid;
  place-content: center;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.formular__souhlas input:hover { border-color: var(--secondary); }
/* zaškrtnuto: zlaté pole + tmavá fajfka — vidět na světlém i tmavém podkladu */
.formular__souhlas input:checked {
  background: var(--secondary);
  border-color: var(--secondary);
}
.formular__souhlas input:checked::before {
  content: '';
  width: 15px; height: 9px;
  border-left: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
  transform: rotate(-45deg) translate(1px, -2px);
}
.formular__souhlas input:active { transform: scale(.94); }
.formular__souhlas input:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
}
.formular__odeslat { margin-top: clamp(1.5rem, 3vw, 3rem); }
.formular__stav {
  display: none;
  margin-top: 1.5rem;
  font-weight: 600;
}
.formular__stav.uspech { display: block; color: #1c7c30; }
.formular__stav.chyba  { display: block; color: #b3261e; }
.formular__podekovani {
  font-size: 20px;
  padding: 2rem 0;
}

/* ---------- Titulek stránky (BLOG / FAQ / KONTAKT / článek) ---------- */
.stranka-titulek {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-pagetitle);
  line-height: .95;
  text-transform: uppercase;
  color: var(--ink);
  padding-inline: var(--container-pad);
  margin-top: clamp(1.5rem, 3vw, 3.5rem);
}

/* ---------- Filtr pills ---------- */
.filtr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  padding-inline: var(--container-pad);
  margin-top: clamp(1.5rem, 2.5vw, 3rem);
}
.filtr__popisek {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin-right: clamp(.5rem, 2vw, 2.5rem);
}

/* ---------- Blog výpis ---------- */
.blog-hero {
  position: relative;
  margin: clamp(2rem, 3.5vw, 4.5rem) clamp(0rem, 1.8vw, 2.2rem) 0;
}
.blog-hero__foto img {
  width: 100%;
  height: clamp(320px, 46vw, 894px);
  object-fit: cover;
}
.blog-hero__karta {
  background: var(--white);
  padding: 24px;
  max-width: 752px;
}
@media (min-width: 1100px) {
  .blog-hero__karta {
    position: absolute;
    left: calc(var(--container-pad) - 2.2rem);
    top: 50%;
    transform: translateY(-50%);
  }
}
.blog-hero__karta .karta__titulek { margin-top: 1.2rem; }
.blog-mrizka-sekce {
  padding: clamp(3rem, 5vw, 6rem) 0 clamp(2.5rem, 4vw, 5rem);
}
.blog-mrizka-sekce h2 {
  font-size: var(--fs-motto);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  padding-inline: var(--container-pad);
  margin-bottom: clamp(2rem, 3.5vw, 4rem);
}
.blog-mrizka-sekce .karty { row-gap: clamp(2.5rem, 4.5vw, 5rem); }
.blog-dalsi {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 4.5vw, 5rem);
}

/* ---------- Detail článku ---------- */
.clanek-datum {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-karta);
  text-transform: uppercase;
  color: var(--ink);
  padding-inline: var(--container-pad);
  margin-top: clamp(1.5rem, 2.5vw, 3rem);
}
.clanek-hero {
  margin: clamp(1.5rem, 2.5vw, 3rem) clamp(0rem, 1.8vw, 2.2rem) 0;
}
.clanek-hero img {
  width: 100%;
  height: clamp(200px, 32vw, 480px);
  object-fit: cover;
}
.clanek-telo {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Odkaz na službu na konci článku — jako brandové tlačítko, ať je jasně klikatelný */
.clanek-cta-sluzba {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.clanek-cta-sluzba .btn { text-decoration: none; }

/* FAQ blok uvnitř článku — lícuje s šířkou textu */
.clanek-faq { max-width: 1000px; margin-inline: auto; }
.clanek-telo .lead {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
  line-height: 1.5;
  margin-top: clamp(2.5rem, 5vw, 6rem);
}
.clanek-telo p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem);
  line-height: 1.5;
  margin-top: clamp(1.8rem, 3.5vw, 4rem);
}
.clanek-obrazky {
  display: grid;
  grid-template-columns: minmax(200px, 432px) 1fr;
  gap: clamp(1.5rem, 2.5vw, 3rem);
  margin: clamp(2.5rem, 5vw, 6rem) clamp(0rem, 1.8vw, 2.2rem) 0;
}
.clanek-obrazky img {
  width: 100%; height: 100%;
  object-fit: cover;
  min-height: 280px;
  max-height: 612px;
}
.clanek-foto-siroke { margin: clamp(2.5rem, 5vw, 6rem) clamp(0rem, 1.8vw, 2.2rem) 0; }
.clanek-foto-siroke img {
  width: 100%;
  height: clamp(300px, 49vw, 938px);
  object-fit: cover;
}

/* ---------- Článek: fakta, mezititulky, seznamy ---------- */
.clanek-fakta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--primary);
  border-block: 1px solid var(--primary);
  margin-top: clamp(1.5rem, 3vw, 3.5rem);
}
.clanek-fakta__bunka {
  background: var(--svetla);
  padding: clamp(1.2rem, 2.5vw, 2.5rem) clamp(1rem, 2.5vw, 3rem);
}
.clanek-fakta__popisek {
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink);
  margin-bottom: .4rem;
}
.clanek-fakta__hodnota {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.6rem);
  line-height: 1.05;
  color: var(--primary);
}
@media (max-width: 700px) {
  .clanek-fakta { grid-template-columns: 1fr; }
}
.clanek-telo h2 {
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  margin-top: clamp(2.5rem, 5vw, 5rem);
}
.clanek-telo h2 + p { margin-top: 1.2rem; }
.clanek-telo ol {
  list-style: decimal;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem);
  line-height: 1.5;
}
.clanek-telo ol li { margin-bottom: .8rem; padding-left: .4rem; }
.clanek-telo .zvyraznene { font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-blok {
  padding-inline: var(--container-pad);
  margin-top: clamp(2.5rem, 4.5vw, 5.5rem);
}
.faq-blok h2 {
  font-size: var(--fs-motto);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  margin-bottom: 22px;
}
.faq-polozka {
  border-bottom: 1px solid var(--primary);
}
.faq-polozka summary {
  display: grid;
  grid-template-columns: minmax(40px, 96px) 1fr 24px;
  align-items: center;
  column-gap: clamp(.75rem, 2vw, 2.75rem);
  padding: 24px 10px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-radek);
  line-height: 1.1;
  color: var(--primary);
}
.faq-polozka summary::-webkit-details-marker { display: none; }
.faq-polozka__ikona {
  position: relative;
  width: 24px; height: 24px;
  justify-self: end;
}
.faq-polozka__ikona::before,
.faq-polozka__ikona::after {
  content: '';
  position: absolute;
  background: var(--primary);
  transition: transform .2s ease;
}
.faq-polozka__ikona::before { left: 0; right: 0; top: 10.5px; height: 3px; }
.faq-polozka__ikona::after  { top: 0; bottom: 0; left: 10.5px; width: 3px; }
.faq-polozka[open] .faq-polozka__ikona::after { transform: scaleY(0); }
.faq-polozka__odpoved {
  padding: 0 10px 24px calc(clamp(.75rem, 2vw, 2.75rem) + clamp(40px, 6vw, 96px));
  font-size: 18px;
  font-family: var(--font-display);
  color: var(--ink);
  max-width: 1400px;
}
/* odkaz na článek uvnitř odpovědi (sekce „Z mých případů") */
.faq-polozka__odpoved a {
  color: var(--secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------- Kontakt ---------- */
.kontakt-udaje {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-inline: var(--container-pad);
  margin-top: clamp(2rem, 4vw, 5rem);
}
.kontakt-udaje__bunka {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .35vw, 1.5rem);
  line-height: 1.3;
  padding: .5rem clamp(1rem, 3vw, 4rem) 3.5rem;
  border-left: 1px solid #9a9a9a;
}
.kontakt-udaje__bunka:first-child { border-left: 0; padding-left: 0; }
.kontakt-udaje__bunka strong { font-weight: 700; }
.kontakt-udaje__bunka .mensi { font-size: 18px; }
.kontakt-udaje__bunka a:hover { color: var(--secondary); }
.kontakt-mapa { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.kontakt-mapa img {
  width: 100%;
  height: clamp(300px, 39vw, 741px);
  object-fit: cover;
}

/* ---------- GDPR / právní stránky ---------- */
.gdpr-telo {
  max-width: 900px;
  padding-inline: var(--container-pad);
  margin-top: clamp(2rem, 4vw, 4rem);
}
.gdpr-telo p { margin-bottom: 1.1rem; }
.gdpr-telo h2 {
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  margin: 2.4rem 0 1.1rem;
}
.gdpr-telo a { text-decoration: underline; }
.gdpr-seznam, .gdpr-seznam-cisla {
  margin: 0 0 1.1rem 1.4rem;
}
.gdpr-seznam { list-style: disc; }
.gdpr-seznam-cisla { list-style: decimal; }
.gdpr-seznam li, .gdpr-seznam-cisla li { margin-bottom: .5rem; }
.formular__souhlas a { text-decoration: underline; }
.formular__souhlas a:hover { color: var(--primary); }

/* ---------- Patička ---------- */
.paticka { margin-top: clamp(3rem, 5vw, 6rem); }
.paticka__menu {
  background: var(--svetla);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4.5vw, 5.5rem);
  padding: 28px var(--container-pad);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.87rem);
  letter-spacing: .03em;
  color: var(--primary);
}
.paticka__menu a:not(.btn):hover { color: var(--secondary); }
.paticka__telo {
  background: var(--primary);
  color: var(--secondary);
  padding: clamp(2.5rem, 4.5vw, 5.5rem) var(--container-pad) 2rem;
}
.paticka__kontakt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, .6rem + 2.4vw, 3.2rem);
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.paticka__kontakt a:hover { color: var(--svetla); }
.paticka__mrizka {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 2rem;
  margin-top: clamp(2.5rem, 4.5vw, 5rem);
}
.paticka__adresa {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.paticka__znak { margin-top: 1.5rem; }
.paticka__znak img { width: 80px; height: auto; }
.paticka__sloupce {
  display: flex;
  gap: clamp(3rem, 8vw, 10rem);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.02em;
}
.paticka__sloupec h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: .9rem;
}
.paticka__sloupec li { line-height: 1.78; font-weight: 500; }
.paticka__sloupec a:hover { color: var(--svetla); }
.paticka__linka {
  border: 0;
  border-top: 1px solid var(--secondary);
  margin-top: clamp(2rem, 4vw, 4.5rem);
}
.paticka__spodek {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  padding-top: 1.6rem;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.paticka__spodek .copyright { font-family: var(--font-display); font-weight: 600; }
.paticka__spodek nav { display: flex; gap: clamp(2rem, 18vw, 22rem); font-weight: 600; }
.paticka__spodek a:hover { color: var(--svetla); }

/* ---------- Cookie lišta (souhlas) ---------- */
.cookie-lista {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 680px;
  margin-inline: auto;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  padding: 1.1rem 1.4rem;
  background: var(--primary);
  color: var(--svetla);
  border-radius: 16px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .35);
  font-size: 15px;
  transform: translateY(160%);
  transition: transform .35s var(--ease, ease);
}
.cookie-lista.je-videt { transform: translateY(0); }
.cookie-lista__text { flex: 1 1 260px; line-height: 1.45; }
.cookie-lista__text a { color: var(--secondary); text-decoration: underline; }
.cookie-lista__akce { display: flex; gap: .6rem; flex: 0 0 auto; }
.cookie-lista .btn {
  height: 44px;
  min-height: 44px;
  padding: 8px 22px;
  font-size: 14px;
}
.btn--obrys-svetly {
  background: transparent;
  color: var(--svetla);
  border: 1px solid var(--svetla);
}
@media (max-width: 560px) {
  .cookie-lista__akce { flex: 1 1 100%; }
  .cookie-lista .btn { flex: 1; }
}

/* ---------- Responzivita ---------- */
@media (max-width: 1100px) {
  .sluzba__mrizka { grid-template-columns: 1fr; }
  .sluzba__titulek, .sluzba__motto, .sluzba__levy, .sluzba__seznam { grid-column: 1; }
  .sluzba__levy { max-width: 640px; }
  .reference__mrizka { grid-template-columns: 1fr; }
  .partneri__mrizka { grid-template-columns: 1fr; }
  .formular__mrizka { grid-template-columns: 1fr; }
  .stats__mrizka { grid-template-columns: 1fr; row-gap: 2rem; }
  .stats__bunka { border-left: 0; padding-inline: 0; }
  .kontakt-udaje { grid-template-columns: 1fr; }
  .kontakt-udaje__bunka {
    border-left: 0;
    padding: 1.2rem 0;
    border-bottom: 1px solid #9a9a9a;
  }
  .kontakt-udaje__bunka:last-child { border-bottom: 0; }
  .clanek-obrazky { grid-template-columns: 1fr; }
  .paticka__mrizka { grid-template-columns: 1fr; align-items: start; }
  .karty--triny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* pojistka proti přetékání obřích nadpisů a dlouhých tlačítek na úzkých displejích */
  .sluzba__titulek, .stranka-titulek, .reference h2, .blog-sekce h2,
  .cta h2, .partneri h2, .sluzba__motto, .blog-mrizka-sekce h2, .faq-blok h2 {
    overflow-wrap: anywhere;
  }
  .btn {
    white-space: normal;
    height: auto;
    min-height: 53px;
    text-align: center;
  }
  .sluzba__radek {
    grid-template-columns: minmax(44px, 60px) 1fr;
  }
  .sluzba__radek dd {
    grid-column: 2;
    grid-row: auto;
    margin-top: .5rem;
  }
  .faq-polozka summary { grid-template-columns: 44px 1fr 24px; }
  .faq-polozka__odpoved { padding-left: calc(44px + clamp(.75rem, 2vw, 2.75rem)); }
  .paticka__sloupce { flex-direction: column; gap: 2rem; }
  .paticka__spodek nav { gap: 2rem; }

  /* Hero na mobilu: foto nahoře jako čistý pás, text a tlačítka pod ním na tmavém podkladu */
  .hero { min-height: auto; }
  .hlavicka--tmava { order: 1; }
  .hero__foto {
    position: relative;
    order: 2;
    height: 52vh;
    max-height: 440px;
  }
  .hero__foto img { object-position: 64% 12%; }
  /* fotka splývá do tmavé nahoře i dole — žádná viditelná hrana */
  .hero__foto::after {
    display: block;
    background: linear-gradient(to bottom,
      var(--dark-blue) 0%,
      rgba(13, 26, 45, 0) 24%,
      rgba(13, 26, 45, 0) 74%,
      var(--dark-blue) 100%);
  }
  .hero__obsah {
    order: 3;
    margin-top: 0;
    padding-top: clamp(1.75rem, 6vw, 2.5rem);
  }

  /* Partneři na mobilu: 2 sloupce */
  .partneri__loga { grid-template-columns: repeat(2, 1fr); }

  /* Blog: 1 článek na řádek */
  .karty--triny { grid-template-columns: 1fr; }
}

/* ---------- Kalkulačky ---------- */
.kalk-uvod {
  padding-inline: var(--container-pad);
  max-width: 900px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem);
  color: rgba(23,23,23,.72);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.kalk {
  padding-inline: var(--container-pad);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.kalk.je-skryta { display: none; }
.kalk h2 {
  font-size: var(--fs-motto);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.kalk__mrizka {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 460px);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.kalk__vstupy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* výsledkový panel */
.kalk__vysledek {
  background: var(--dark-blue);
  color: var(--white);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.kalk__popisek {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.kalk__hlavni {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.2rem);
  line-height: 1.05;
  color: var(--secondary);
  margin: .4rem 0 1.5rem;
  font-variant-numeric: tabular-nums;
}
.kalk__radky { display: grid; gap: .7rem; }
.kalk__radky > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.kalk__radky > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kalk__radky dt { font-family: var(--font-display); color: rgba(255,255,255,.75); font-size: 16px; }
.kalk__radky dd { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.kalk__poznamka {
  margin-top: 1.2rem;
  font-size: 15px;
  line-height: 1.45;
  color: var(--secondary);
}
.kalk__poznamka:empty { display: none; }
/* upozornění pod kalkulačkami */
.callout-web {
  margin: clamp(2.5rem, 5vw, 4rem) var(--container-pad) 0;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  background: var(--svetla);
  border-left: 4px solid var(--secondary);
  border-radius: 4px;
  font-size: 17px;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .kalk__mrizka { grid-template-columns: 1fr; }
}

/* ---------- Posuvníky v kalkulačkách ---------- */
.pole--posuvnik { display: grid; }
.posuvnik__radek {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  border-bottom: 1px solid rgba(23,23,23,.25);
  padding-bottom: 6px;
}
.posuvnik__radek input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem);
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.posuvnik__radek input[type="number"]:focus { outline: none; }
.posuvnik__radek input::-webkit-outer-spin-button,
.posuvnik__radek input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.posuvnik__radek input[type="number"] { -moz-appearance: textfield; }
.posuvnik__jednotka {
  font-family: var(--font-display);
  font-size: 15px;
  color: rgba(23,23,23,.5);
  white-space: nowrap;
}
/* samotný táhlo */
.posuvnik {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin-top: 14px;
  border-radius: 60px;
  background: linear-gradient(to right,
    var(--secondary) 0%, var(--secondary) var(--vyplneno, 50%),
    rgba(23,34,54,.14) var(--vyplneno, 50%), rgba(23,34,54,.14) 100%);
  cursor: pointer;
}
.posuvnik::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--secondary);
  cursor: grab;
  transition: transform .15s ease;
}
.posuvnik::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.posuvnik::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--secondary);
  cursor: grab;
}
.posuvnik:focus-visible { outline: 2px solid var(--secondary); outline-offset: 4px; }
.posuvnik__meze {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(23,23,23,.45);
}

/* ---------- Grafy v kalkulačkách ---------- */
.kalk__graf { margin-top: clamp(1.5rem, 3vw, 2rem); }
.kalk__graf-nadpis {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(23,23,23,.55);
  margin-bottom: .8rem;
}
#h-graf { width: 100%; height: 26px; display: block; }
#i-graf { width: 100%; height: auto; display: block; }
.kalk__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: .8rem;
  font-family: var(--font-display);
  font-size: 15px;
  color: rgba(23,23,23,.7);
}
.kalk__legenda b { color: var(--primary); margin-left: .25rem; }
.kalk__tecka {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  margin-right: .45rem;
  background: var(--secondary);
}
.kalk__tecka--uroky { opacity: .3; }

/* Odkaz na blog na stránce kalkulaček */
.kalk-blog {
  padding-inline: var(--container-pad);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 1000px;
}
.kalk-blog h2 {
  font-size: var(--fs-motto);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  margin-bottom: 1rem;
}
.kalk-blog p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem);
  line-height: 1.5;
}
.kalk-blog p a:not(.btn) {
  color: var(--secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Rychlá volba vlastních zdrojů (10 % / 20 %) */
.posuvnik__rychle { display: flex; gap: .5rem; margin-top: .7rem; }
.posuvnik__volba {
  border: 1px solid rgba(23,34,54,.25);
  background: transparent;
  border-radius: 60px;
  padding: .35rem .8rem;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--primary);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.posuvnik__volba:hover { border-color: var(--secondary); }
.posuvnik__volba.je-aktivni {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--primary);
  font-weight: 600;
}

/* Tlačítko přímo pod výsledkem kalkulačky */
.kalk__cta { margin-top: 1.6rem; width: 100%; }

/* ---------- Odhad ceny nemovitosti ---------- */
.odhad-lead {
  padding-inline: var(--container-pad);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2.1rem);
  line-height: 1.35;
  color: rgba(23,23,23,.7);
  max-width: 900px;
}
.odhad-lead strong { color: var(--primary); }

/* proč prohlídka */
.odhad-proc {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-inline: var(--container-pad);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.odhad-proc__text p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  line-height: 1.55;
}
.odhad-proc__text p + p { margin-top: 1.2rem; }
.odhad-proc__dukaz {
  background: var(--dark-blue);
  color: var(--white);
  border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.odhad-proc__cislo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2vw, 3rem);
  color: var(--secondary);
  line-height: 1;
}
.odhad-proc__popis {
  margin: .8rem 0 1.2rem;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,.8);
}
.odhad-proc__dukaz a {
  color: var(--secondary);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* formulář po krocích */
.odhad {
  padding-inline: var(--container-pad);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.odhad h2 {
  font-size: var(--fs-motto);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
}
.odhad__podnadpis {
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
  color: rgba(23,23,23,.62);
  margin-top: .6rem;
}
.odhad-form {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 820px;
  background: var(--svetla);
  border-radius: 20px;
  padding: clamp(1.4rem, 3.5vw, 2.8rem);
}
.odhad-form__postup { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.odhad-form__cara {
  display: block;
  height: 5px;
  border-radius: 60px;
  background: rgba(23,34,54,.14);
  overflow: hidden;
}
.odhad-form__cara i {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--secondary);
  border-radius: 60px;
  transition: width .35s ease;
}
.odhad-form__krok-cislo {
  display: block;
  margin-top: .6rem;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(23,23,23,.5);
}
.odhad-form__krok { display: none; border: 0; padding: 0; }
.odhad-form__krok.je-aktivni { display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.odhad-form__krok legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem);
  color: var(--primary);
  margin-bottom: 1.2rem;
  padding: 0;
}
.odhad-form__napoveda {
  font-size: 16px;
  color: rgba(23,23,23,.6);
  margin-top: -.6rem;
}
.odhad-form select,
.odhad-form input[type="text"],
.odhad-form input[type="tel"],
.odhad-form input[type="email"],
.odhad-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(23,23,23,.3);
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .3vw, 1.25rem);
  color: var(--primary);
}
.odhad-form select { appearance: none; cursor: pointer; }
.odhad-form textarea { resize: vertical; line-height: 1.5; }
.odhad-form :focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }
.pole__volitelne { font-size: 13px; color: rgba(23,23,23,.45); text-transform: none; }
.pole.ma-chybu input, .pole.ma-chybu select { border-bottom-color: #c0392b; }
.odhad-volby.ma-chybu { outline: 2px solid #c0392b; outline-offset: 6px; border-radius: 12px; }

/* volby „kdy prodej" */
.odhad-volby { display: grid; gap: .7rem; }
.odhad-volba {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(23,34,54,.2);
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .3vw, 1.15rem);
  transition: border-color .18s ease, background .18s ease;
}
.odhad-volba:hover { border-color: var(--secondary); }
.odhad-volba input { accent-color: var(--secondary); width: 20px; height: 20px; }
.odhad-volba:has(input:checked) { border-color: var(--secondary); background: rgba(188,150,85,.12); }

.odhad-form__ovladani {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}

/* co bude následovat */
.odhad-postup {
  padding-inline: var(--container-pad);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.odhad-postup h2 {
  font-size: var(--fs-motto);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.odhad-postup__kroky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.odhad-postup__cislo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--secondary);
}
.odhad-postup__kroky h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  margin: .5rem 0 .6rem;
  color: var(--primary);
}
.odhad-postup__kroky p { font-size: 17px; line-height: 1.55; color: rgba(23,23,23,.75); }
.odhad-postup__slib {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.5vw, 1.6rem);
  background: var(--svetla);
  border-left: 4px solid var(--secondary);
  border-radius: 4px;
  font-size: 17px;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .odhad-proc { grid-template-columns: 1fr; }
  .odhad-form__ovladani .btn { flex: 1 1 auto; }
}
.odhad-proc--siroky { grid-template-columns: 1fr; max-width: 1000px; }

/* Výzva zpět na formulář (odhad ceny) */
.odhad-zpet {
  margin: clamp(3rem, 6vw, 5rem) var(--container-pad) clamp(3rem, 5vw, 4rem);
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--dark-blue);
  color: var(--white);
  border-radius: 20px;
  text-align: center;
}
.odhad-zpet h2 {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.3rem);
  color: var(--secondary);
  line-height: 1.15;
  text-transform: none;
  max-width: 700px;
  margin: 0 auto;
}
.odhad-zpet p {
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
  color: rgba(255,255,255,.8);
  margin: 1rem auto 1.8rem;
  max-width: 600px;
}

/* Potvrzení po odeslání poptávky — nahradí celý formulář */
.odhad-hotovo {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 820px;
  background: var(--dark-blue);
  color: var(--white);
  border-radius: 20px;
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.odhad-hotovo__fajfka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--primary);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.odhad-hotovo h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  color: var(--secondary);
  line-height: 1.1;
}
.odhad-hotovo p {
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
  color: rgba(255,255,255,.85);
  margin: 1rem auto 1.8rem;
  max-width: 520px;
  line-height: 1.5;
}
.odhad-hotovo p a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.odhad-hotovo .btn--obrys-cerny { color: var(--white); border-color: rgba(255,255,255,.5); }

/* Pás s hodnocením (kalkulačka, odhad ceny) */
.hodnoceni-pas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  justify-content: center;
  margin: clamp(2rem, 4vw, 3.5rem) var(--container-pad);
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1rem, 3vw, 2rem);
  background: var(--svetla);
  border-radius: 60px;
}
.hodnoceni-pas__zdroj {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: clamp(.9rem, .85rem + .2vw, 1.05rem);
  color: var(--primary);
  transition: opacity .18s ease;
}
.hodnoceni-pas__zdroj:hover { opacity: .7; }
.hodnoceni-pas__hvezdy { color: var(--secondary); letter-spacing: 1px; }
/* pod 1100 px raději pod sebe než nevyvážené lámání 2+1 */
@media (max-width: 1100px) {
  .hodnoceni-pas {
    border-radius: 18px;
    flex-direction: column;
    gap: .7rem;
    align-items: flex-start;
    padding: clamp(1rem, 2.5vw, 1.3rem) clamp(1.2rem, 3vw, 1.8rem);
  }
}

/* Pás s hodnocením uvnitř článku — bez vlastního odsazení (dědí ho článek) */
.clanek-telo .hodnoceni-pas {
  margin-inline: 0;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: clamp(.5rem, 1.5vw, 1rem);
}
/* mezera mezi tělem článku a FAQ blokem */
.clanek-faq { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Odkaz na nástroj uvnitř článku — musí být vidět, ale nesmí křičet */
.clanek-nastroj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 2rem);
  margin: clamp(1.8rem, 4vw, 2.8rem) 0;
  padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.3rem, 3vw, 2rem);
  background: var(--svetla);
  border-left: 4px solid var(--secondary);
  border-radius: 4px 14px 14px 4px;
}
.clanek-nastroj__text {
  flex: 1 1 300px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
  line-height: 1.5;
  color: var(--primary);
}
.clanek-nastroj__odkaz {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: 60px;
  background: var(--secondary);
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .18s ease, opacity .18s ease;
}
.clanek-nastroj__odkaz:hover { transform: translateY(-1px); opacity: .9; }
.clanek-nastroj__odkaz span { transition: transform .18s ease; }
.clanek-nastroj__odkaz:hover span { transform: translateX(3px); }
@media (max-width: 560px) {
  .clanek-nastroj__odkaz { width: 100%; justify-content: center; }
}

/* Přepínač Prodej / Pronájem na stránce odhadu */
.odhad-rezim {
  display: inline-flex;
  gap: 4px;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  padding: 5px;
  background: var(--svetla);
  border-radius: 60px;
}
.odhad-rezim__volba {
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--primary);
  padding: 11px 24px;
  border-radius: 60px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.odhad-rezim__volba:hover { background: rgba(188,150,85,.18); }
.odhad-rezim__volba.je-aktivni { background: var(--primary); color: var(--svetla); }
.odhad-rezim__volba:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
@media (max-width: 480px) {
  .odhad-rezim { display: flex; width: 100%; }
  .odhad-rezim__volba { flex: 1; padding-inline: 12px; font-size: 14px; }
}

/* Tabulka v článku (např. splátky během čerpání) */
.tabulka-obal {
  overflow-x: auto;
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 .8rem;
  -webkit-overflow-scrolling: touch;
}
.tabulka {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: clamp(.95rem, .9rem + .25vw, 1.1rem);
  min-width: 480px;
}
.tabulka caption {
  text-align: left;
  padding-bottom: .8rem;
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(23,23,23,.5);
}
.tabulka th {
  text-align: left;
  font-weight: 600;
  color: var(--primary);
  padding: .8rem 1rem .8rem 0;
  border-bottom: 2px solid var(--primary);
  white-space: nowrap;
}
.tabulka td {
  padding: .85rem 1rem .85rem 0;
  border-bottom: 1px solid rgba(23,34,54,.14);
  color: rgba(23,23,23,.85);
}
.tabulka tbody tr:last-child td {
  border-bottom: 2px solid var(--secondary);
  background: rgba(188,150,85,.09);
}
.tabulka tbody tr:last-child td:first-child { border-radius: 6px 0 0 6px; padding-left: .8rem; }
.tabulka tbody tr:last-child td:last-child  { border-radius: 0 6px 6px 0; }
.tabulka strong { color: var(--primary); }

/* Poznámka pod tabulkou / obrázkem */
.clanek-poznamka {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(23,23,23,.55);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* Odrážkový seznam v článku */
.clanek-seznam {
  list-style: none;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0;
  padding: 0;
}
.clanek-seznam li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: .9rem;
  line-height: 1.6;
}
.clanek-seznam li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--secondary);
}

/* ---------- Odkazy uvnitř textu (článek, FAQ, callouty) ----------
   Bez tohohle vypadají jako běžný text a čtenář je přehlédne. */
.clanek-telo a:not(.btn):not(.clanek-nastroj__odkaz),
.faq-polozka__odpoved a:not(.btn),
.odhad-postup a:not(.btn),
.kalk-blog p a:not(.btn),
.callout-web a:not(.btn) {
  color: #8a6d33;                     /* tmavší zlatá — čitelná na bílé i krémové */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--secondary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .18s ease, background .18s ease;
  padding: 0 2px;
  border-radius: 3px;
}
.clanek-telo a:not(.btn):not(.clanek-nastroj__odkaz):hover,
.faq-polozka__odpoved a:not(.btn):hover,
.odhad-postup a:not(.btn):hover,
.kalk-blog p a:not(.btn):hover,
.callout-web a:not(.btn):hover {
  color: var(--primary);
  background: rgba(188,150,85,.22);
}
.clanek-telo a:focus-visible,
.faq-polozka__odpoved a:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* šipka za odkazem, který vede na jiný článek — hned je vidět, že se někam prokliká */
.clanek-telo a[href^="clanek-"]:not(.btn)::after,
.faq-polozka__odpoved a[href^="clanek-"]:not(.btn)::after {
  content: ' →';
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
}

/* ---------- Kontaktní formulář — sjednocen s formulářem odhadu ---------- */
.formular > form {
  background: var(--dark-blue);
  border-radius: 20px;
  padding: clamp(1.6rem, 4vw, 3rem);
  color: var(--white);
}
.formular > form .pole label { color: rgba(255,255,255,.6); }
.formular > form input,
.formular > form textarea {
  color: var(--white);
  border-bottom-color: rgba(255,255,255,.35);
}
.formular > form input::placeholder,
.formular > form textarea::placeholder { color: rgba(255,255,255,.4); }
.formular > form input:focus,
.formular > form textarea:focus { border-bottom-color: var(--secondary); }
.formular > form .formular__souhlas { color: rgba(255,255,255,.8); }
.formular > form .formular__souhlas a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
.formular > form input[type="checkbox"] { accent-color: var(--secondary); }
.formular > form input:focus-visible,
.formular > form textarea:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
}
.formular__odeslat {
  background: var(--secondary);
  color: var(--primary);
  font-weight: 600;
}
.formular__odeslat:hover { opacity: .9; }

/* Poděkování, které nahradí odeslaný formulář */
.formular-hotovo {
  background: var(--svetla);
  color: var(--primary);
  border-radius: 20px;
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.formular-hotovo__fajfka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--secondary);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.formular-hotovo h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  color: var(--primary);
  line-height: 1.1;
}
.formular-hotovo p {
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
  color: rgba(23,34,54,.8);
  margin: 1rem auto 0;
  max-width: 520px;
  line-height: 1.5;
}
.formular-hotovo p a { color: #8a6d33; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Nepovinné položky ať jsou na první pohled vidět */
.pole__volitelne {
  display: inline-block;
  margin-left: .4rem;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(23,34,54,.09);
  color: rgba(23,34,54,.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: none;
  vertical-align: middle;
}

/* Rychlá volba vlastních zdrojů — vedle popisku, ať nenafukuje buňku mřížky */
.pole__hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 6px;
  min-height: 26px;
  flex-wrap: nowrap;
}
.pole__hlavicka label { white-space: nowrap; }
.pole__hlavicka label { margin-bottom: 0; }
.pole--posuvnik > label { min-height: 26px; display: flex; align-items: center; }
.posuvnik__rychle { display: flex; gap: 4px; flex-shrink: 0; }
.posuvnik__volba {
  border: 1px solid rgba(23,34,54,.25);
  background: transparent;
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 60px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.posuvnik__volba:hover { border-color: var(--secondary); background: rgba(188,150,85,.14); }
.posuvnik__volba.je-aktivni { background: var(--secondary); border-color: var(--secondary); color: var(--primary); }
.posuvnik__volba:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* „Dále si přečtěte" pod formulářem v článku */
.dale-cist {
  padding: clamp(2.5rem, 5vw, 4rem) var(--container-pad) clamp(1rem, 3vw, 2rem);
}
.dale-cist h2 {
  font-size: var(--fs-motto);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--primary);
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.karty--dvojice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.2rem, 3vw, 2.5rem);
}
.dale-cist .karta__titulek {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem);
  line-height: 1.2;
  margin-top: .9rem;
}
.dale-cist .karta__foto img { aspect-ratio: 3/2; object-fit: cover; }

/* Krok 2 odhadu: pole uvnitř varianty potřebují vlastní mezery
   (gap fieldsetu platí jen na varianty jako celky, ne na pole uvnitř) */
.js-varianta {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
}
.odhad-form__krok.je-aktivni > .pole--cele { margin-top: clamp(.2rem, 1vw, .6rem); }

/* Filtr článků na blogu */
.filtr--blog {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding-inline: var(--container-pad);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.filtr--blog .btn { height: 44px; font-size: 15px; padding-inline: 20px; }

/* ---------- Objevování při scrollování ----------
   Výchozí stav se skryje AŽ když JS přidá .ma-animace na <html>,
   takže bez JS zůstane obsah normálně vidět. */
.ma-animace .pri-scrollu {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s ease-out, transform .45s ease-out;
  will-change: opacity, transform;
}
.ma-animace .pri-scrollu.je-videt {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ma-animace .pri-scrollu { opacity: 1; transform: none; transition: none; }
}

/* Souhlas ve formuláři odhadu — na krémovém podkladu tmavý rámeček */
.odhad-form .formular__souhlas { color: rgba(23,34,54,.7); gap: 14px; }
.odhad-form .formular__souhlas input { border-color: rgba(23,34,54,.45); }
.odhad-form .formular__souhlas input:checked { border-color: var(--secondary); }

/* Zaškrtnutý souhlas musí přebít obecné pravidlo pro pole v tmavém formuláři */
.formular > form .formular__souhlas input,
.odhad-form .formular__souhlas input {
  border-bottom-width: 2px;
}
.formular > form .formular__souhlas input:checked,
.odhad-form .formular__souhlas input:checked {
  background: var(--secondary);
  border-color: var(--secondary);
}
.formular > form .formular__souhlas input:checked::before,
.odhad-form .formular__souhlas input:checked::before {
  border-left-color: var(--primary);
  border-bottom-color: var(--primary);
}