@charset "utf-8";

/* ==========================================================================
   Tepich car — jeden stylopis pro celý web.

   Web je jednostránkový: index.html nese všechno, samostatně stojí už jen
   podmínky ochrany osobních údajů a 404.

   Pořadí: písmo, tokeny, reset, sazba, layout, hlavička, hero, sekce,
   galerie, ceník, kontakt, právní text, patička, tisk.

   Nic není zaoblené a nic nemá stín. Jediná výjimka je kruhová fotka
   v heru, která navazuje na bubliny ve značce.
   ========================================================================== */


/* --- Písmo -------------------------------------------------------------- */
/* Instrument Sans, variabilní, SIL OFL 1.1 (fonts/OFL.txt).
   Self-hostované — žádný požadavek neodchází na cizí doménu. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --- Tokeny ------------------------------------------------------------- */

:root {
  --indigo:       #32409E;
  --indigo-deep:  #262F76;
  --indigo-press: #1E265E;
  --indigo-wash:  #F2F2F8;
  --violet:       #8887CC;
  --violet-line:  #B9B7D6;
  --ink:          #231F20;
  --ink-2:        #4A4753;
  --ink-3:        #6E6B7A;
  --line-2:       #C9C7D6;
  --line:         #E4E3EC;

  --dur-sweep:  1.8s;                 /* jednorázový přejezd světla přes fotku v hlavičce */

  /* Odvozené hodnoty pro tmavé plochy. */
  --on-dark-2:    rgba(255, 255, 255, .8);
  --on-dark-3:    rgba(255, 255, 255, .65);
  --on-dark-line: rgba(255, 255, 255, .25);
  --on-dark-link: rgba(255, 255, 255, .35);
  --on-dark-hit:  #E6E6F2;

  /* Plovoucí dvojice a rozbalené menu leží nad obsahem stránky. Bez stínu
     by na světlém pozadí splynuly — linka sama nestačí, protože pod nimi
     projíždí text i fotky. */
  --shadow-float: 0 4px 24px rgba(35, 31, 32, .22);

  /* Průměrná barva hero fotky. Drží plochu obsazenou po dobu načítání, aby
     v modrém bloku neproblikl bílý obdélník. Žádná stávající proměnná se
     nehodí — je to vzorek z fotografie, ne barva palety. */
  --photo-load:   #5F5E60;

  --font: "Instrument Sans", system-ui, sans-serif;

  --fs-micro: 15px;
  --fs-body:  clamp(17px, 0.6vw + 15px, 19px);
  --fs-lead:  clamp(18px, 0.9vw + 15px, 20px);
  --fs-h3:    clamp(23px, 1.6vw + 17px, 30px);
  --fs-h2:    clamp(28px, 3.0vw + 16px, 44px);
  --fs-h1:    clamp(32px, 5.0vw + 12px, 68px);
  --fs-hero:  clamp(40px, 5.6vw + 12px, 76px);

  /* Odvozené z návrhu jednostránky: řádek ceníku a vedoucí odstavce,
     které jsou větší než --fs-lead, ale menší než nadpis. */
  --fs-price: clamp(18px, 0.9vw + 15px, 24px);
  --fs-lead-lg: clamp(19px, 0.9vw + 16px, 24px);

  --lh-tight: 1.02;
  --lh-head:  1.15;
  --lh-body:  1.65;
  --lh-legal: 1.75;

  --ls-hero: -0.03em;
  --ls-head: -0.02em;

  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 80px;
  --sp-9: 112px;

  /* Výška přilepené hlavičky. Do 900 px se hlavička nelepí, takže nula.
     Kotvy a přilepený obsah stránky si o ni odsazení počítají samy. */
  --header-h: 0px;

  --gutter: clamp(20px, 4vw, 64px);
  --measure: 36rem;
  /* Právní texty. Od 1200 px je sloupec vedle obsahu stránky užší než tahle
     hodnota, takže se text roztáhne po celém sloupci; hodnota se uplatní
     jen v jednosloupcovém pásmu pod 1200 px, kde by řádky jinak měly
     přes sto znaků. */
  --measure-legal: 56rem;
  --container: 1312px;
}


/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Odsazení platí pro všechno, co prohlížeč sám roluje do zorného pole:
     kotvy z navigace i prvek, na který se uživatel dostal tabulátorem.
     Jen `scroll-margin` na cílech kotev by druhý případ nepokryl a pod
     přilepenou hlavičkou by se dal ztratit zaměřený odkaz nebo tlačítko. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

a { color: inherit; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a, button, input, textarea {
  transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s;
}

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

/* --violet má proti indigu kontrast 2,7 : 1, což je pod hranicí 3 : 1, kterou
   WCAG 1.4.11 žádá po netextových prvcích. Na indigu a na černé proto svítí
   fokus bíle (8,9 : 1, resp. 16,3 : 1). */
.hero :focus-visible,
.section--indigo :focus-visible,
.section--ink :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

/* Skryté pro oči, čitelné pro odečítač. Nesou ho nadpisy sekcí, které
   návrh kreslí bez viditelného titulku. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* --- Sazba -------------------------------------------------------------- */

h1, h2, h3 {
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-2);
}

.label {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose p { color: var(--ink-2); }

.prose a,
.link {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-color: var(--violet-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.prose a:hover,
.link:hover { text-decoration-color: currentColor; }


/* --- Přeskočit na obsah ------------------------------------------------- */

.skip {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--indigo);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus { transform: none; }


/* --- Layout ------------------------------------------------------------- */

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }

@media (max-width: 899px) {
  .section { padding-block: var(--sp-6); }
}

/* Dva bloky v jedné sekci (nadpis a pod ním seznam nebo mřížka). */
.section > .wrap + .wrap { margin-top: var(--sp-6); }

/* Tichý pás. Linky nahoře i dole ho oddělí od bílých sekcí kolem —
   samotný rozdíl #FFFFFF / #F2F2F8 je na horším monitoru sotva znát. */
.section--wash {
  background: var(--indigo-wash);
  border-block: 1px solid var(--line);
}

/* Vodicí linky uvnitř pásu musí ztmavnout, jinak na něm zmizí:
   --line (#E4E3EC) proti #F2F2F8 není vidět. Stejnou barvu už na tomhle
   podkladu nesou svislé linky mezi výhodami. */
.section--wash .pricing__row { border-color: var(--line-2); }

.section--ink {
  background: var(--ink);
  color: #fff;
}

.section--indigo {
  background: var(--indigo);
  color: #fff;
}

/* Nadpis vlevo, text vpravo v poměru 5 / 7. Pod 1200 px nad sebou. */
.band { display: grid; gap: var(--sp-5); }

@media (min-width: 1200px) {
  .band {
    grid-template-columns: 5fr 7fr;
    gap: var(--gutter);
  }
}

.band__head > * + * { margin-top: var(--sp-3); }


/* --- Tlačítka ----------------------------------------------------------- */

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
}

/* Ikona je dekorace vedle textu, proto `aria-hidden` v HTML. */
.icon-phone { flex: none; }

.btn:hover {
  background: var(--indigo-deep);
  border-color: var(--indigo-deep);
}

.btn:active {
  background: var(--indigo-press);
  border-color: var(--indigo-press);
}

.btn[disabled] {
  background: var(--ink-3);
  border-color: var(--ink-3);
  cursor: default;
}

.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--ghost:hover,
.btn--ghost:active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Na indigové a tmavé ploše se pořadí obrací: plné tlačítko je bílé. */
.hero .btn,
.section--indigo .btn,
.section--ink .btn {
  background: #fff;
  border-color: #fff;
  color: var(--indigo);
}

.hero .btn:hover,
.section--indigo .btn:hover,
.section--ink .btn:hover {
  background: var(--on-dark-hit);
  border-color: var(--on-dark-hit);
}

.hero .btn--ghost,
.section--indigo .btn--ghost,
.section--ink .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.hero .btn--ghost:hover,
.hero .btn--ghost:active,
.section--indigo .btn--ghost:hover,
.section--indigo .btn--ghost:active,
.section--ink .btn--ghost:hover,
.section--ink .btn--ghost:active {
  background: var(--on-dark-hit);
  border-color: var(--on-dark-hit);
  color: var(--ink);
}

/* Odkazy na tmavém pozadí. */
.hero a:not(.btn),
.section--ink a:not(.btn),
.section--indigo a:not(.btn),
.site-footer a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--on-dark-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.hero a:not(.btn):hover,
.section--ink a:not(.btn):hover,
.section--indigo a:not(.btn):hover,
.site-footer a:not(.btn):hover { text-decoration-color: #fff; }


/* --- Hlavička ----------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  /* Volný prostor kolem logotypu ≈ průměr největší bubliny. */
  padding-block: var(--sp-4);
}

.site-header__logo { display: block; }
.site-header__logo img { width: 168px; height: auto; }

@media (max-width: 599px) {
  .site-header__logo img { width: 132px; }
}

/* Přepínač navigace: skrytý checkbox + štítek. Žádný JavaScript.
   Checkbox zůstává ve stránce a je zaměřitelný z klávesnice. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Ikona místo slova „Menu". Název pro odečítač nese skrytý text uvnitř
   štítku — bez něj by checkbox zůstal bezejmenný. Rozměr 44 × 44 je
   nejmenší plocha, která se na dotykovém displeji trefuje spolehlivě. */
.nav-toggle__label {
  justify-self: end;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line-2);
  cursor: pointer;
  user-select: none;
}

.nav-toggle__label:hover { border-color: var(--violet); }

.nav-toggle:focus-visible + .nav-toggle__label {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

.site-nav {
  grid-column: 1 / -1;
  display: none;
}

.nav-toggle:checked ~ .site-nav { display: block; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.site-nav__list a {
  display: block;
  padding: var(--sp-2) 0;
  font-weight: 600;
  text-decoration: none;
}

.site-nav__list a:hover { color: var(--indigo); }

.site-nav__list a[aria-current="page"] {
  color: var(--indigo);
  box-shadow: inset 3px 0 0 var(--indigo);
  padding-left: var(--sp-3);
}

/* --- Plovoucí dvojice na mobilu ----------------------------------------- */

/* Stránka je jedna dlouhá role. Přilepená hlavička by na telefonu ukousla
   pětinu obrazovky, tak nad obsahem plave jen tohle: Zavolat a Menu,
   u spodní hrany, blíž palci. Od 900 px se drží přilepená hlavička a dvojice
   se skryje. */
.nav-scrim { display: none; }

.nav-toggle:checked ~ .nav-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 55;
  cursor: default;
}

.nav-dock {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 60;
  display: flex;
  box-shadow: var(--shadow-float);
}

.nav-dock__call,
.nav-dock__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 52px;
  padding-inline: var(--sp-4);
  background: var(--indigo);
  color: #fff;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

/* Vlasová linka mezi tlačítky: jsou to dvě různé akce, ne jedno tlačítko. */
.nav-dock__menu { box-shadow: inset 1px 0 0 var(--on-dark-line); }

.nav-dock__call:hover,
.nav-dock__menu:hover { background: var(--indigo-deep); }

/* Otevřené menu se pozná na tlačítku — jinak by uživatel nevěděl, co zavírá. */
.nav-toggle:checked ~ .nav-dock .nav-dock__menu { background: var(--indigo-deep); }

/* Zaměření drží checkbox nahoře v hlavičce, ale vidět musí být tady, kde se
   ovládá. Stejný postup jako u štítku v hlavičce. */
.nav-toggle:focus-visible ~ .nav-dock .nav-dock__menu {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

.site-header__phone {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-color: var(--violet-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.site-header__phone:hover { text-decoration-color: currentColor; }

@media (max-width: 899px) {
  /* Ikona menu se z hlavičky stěhuje do plovoucí dvojice — dvě tlačítka pro
     jedno menu jsou zmatek. Checkbox v hlavičce zůstává, ovládá ho štítek
     dole; proto se skrývá jen štítek, ne přepínač. */
  .nav-toggle__label { display: none; }

  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-header__phone { grid-column: 2; }

  /* Menu se rozbaluje nahoru od dvojice, ne odshora stránky.
     52 px je výška tlačítka, --sp-1 mezera nad ním. */
  .nav-toggle:checked ~ .site-nav {
    position: fixed;
    right: var(--gutter);
    bottom: calc(var(--gutter) + 52px + var(--sp-1));
    z-index: 60;
    min-width: 200px;
    padding: var(--sp-2) var(--sp-4);
    background: #fff;
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-float);
  }

  .nav-toggle:checked ~ .site-nav .site-nav__list {
    padding-top: 0;
    border-top: 0;
  }

  /* Aby plovoucí dvojice nepřekryla poslední řádek patičky. */
  .site-footer__bottom { padding-bottom: calc(var(--gutter) + 52px); }
}

/* Od 900 px hlavička zůstává nahoře. Stránka je jedna dlouhá role, takže
   navigace i telefon musí být pořád po ruce. Pod 900 px ne — tam by
   přilepená lišta ukousla pětinu obrazovky a menu je stejně za ikonou.

   146 px = logotyp 97 px + 2 × 24 px odsazení + 1 px linka. Když se změní
   velikost loga nebo odsazení, přepočítej to, jinak kotvy přestanou sedět. */
@media (min-width: 900px) {
  :root { --header-h: 146px; }

  .site-header {
    position: sticky;
    top: 0;
    /* Pod odkazem „Přeskočit na obsah", který má 100. */
    z-index: 50;
  }

  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-6);
  }

  /* Přepínač musí zmizet celý, ne jen jeho štítek. Samotný checkbox je
     schovaný přes clip-path, takže by na široké obrazovce zůstal
     zaměřitelný — odečítač by ohlásil „Menu, zaškrtávací políčko" a klávesnice
     by se zastavila na něčem, co není vidět a co nic nedělá. */
  .nav-toggle,
  .nav-toggle__label,
  .nav-scrim,
  .nav-toggle:checked ~ .nav-scrim,
  .nav-dock { display: none; }

  .site-nav {
    display: block;
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  .site-nav__list {
    flex-direction: row;
    gap: var(--sp-5);
    padding-top: 0;
    border-top: 0;
  }

  .site-nav__list a { padding: 0; }

  .site-nav__list a[aria-current="page"] {
    padding-left: 0;
    box-shadow: inset 0 -3px 0 var(--indigo);
  }

  .site-header__phone { grid-column: 3; }
}


/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  color: #fff;
  padding-top: var(--sp-8);
}

/* Tichý motiv značky. Dekorace, ne obsah — proto v pozadí a bez alt textu. */
.hero::before {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -34%;
  width: min(62vw, 620px);
  aspect-ratio: 56.611 / 53.457;
  background: url("../img/tepichcar-mark-white.svg") no-repeat center / contain;
  opacity: .1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--sp-6);
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  margin-bottom: var(--sp-4);
}

.hero__lead {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  color: var(--on-dark-2);
  margin-bottom: var(--sp-5);
}

.hero__photo {
  width: 100%;
  animation: rise .7s cubic-bezier(.2, .7, .3, 1) both;
}

.hero__photo img {
  width: 100%;
  background: var(--photo-load);
}

/* Do 900 px jde fotka na plnou šířku okna a ořízne se na pás — jinak by
   pod textem stála jako obyčejný obrázek s velkými okraji. */
@media (max-width: 899px) {
  /* `width: auto` musí přebít `width: 100%` výš, jinak by záporný okraj
     fotku jen posunul doleva a vpravo by zůstal pruh pozadí. */
  .hero__photo {
    width: auto;
    margin-inline: calc(var(--gutter) * -1);
  }

  /* Pás musí být dost vysoký, aby v něm vedle auta zbyla i dílna po stranách
     — na 390 px vychází 300 px podle návrhu. Horní mez drží pás v rozumné
     výšce na širokých telefonech a tabletech, kde by 77 vw ukrojilo půl
     obrazovky. */
  .hero__photo img {
    height: clamp(260px, 77vw, 340px);
    object-fit: cover;
    object-position: 50% 56%;
  }
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: var(--gutter);
  }

  /* Jediné kulaté místo na webu — navazuje na bubliny ve značce.
     Kruh přetéká doprava a hero ho ořízne u kraje obrazovky. */
  .hero__photo img {
    width: 128%;
    max-width: none;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 54%;
  }
}

.hero .facts {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-7);
  border-top: 1px solid var(--on-dark-line);
}

.facts__value {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
}

.facts__note {
  display: block;
  font-size: var(--fs-micro);
  color: var(--on-dark-3);
}

@media (min-width: 600px) {
  .hero .facts { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

@media (max-width: 899px) {
  .hero { padding-top: var(--sp-6); }
  .hero .facts { margin-top: var(--sp-6); padding-bottom: var(--sp-6); }
}


/* --- Dva sloupce služeb ------------------------------------------------- */

.services { display: grid; gap: var(--sp-6); }

@media (min-width: 600px) {
  .services { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
}

h2 + .services { margin-top: var(--sp-6); }

.services__label {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--indigo);
  letter-spacing: 0;
  padding-bottom: var(--sp-3);
}

.services li {
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
}

.services li:last-child { border-bottom: 1px solid var(--line); }

.services__more .link { font-weight: 600; }

.services__more { margin-top: var(--sp-5); }

/* Odkaz na ceník patří pod levý sloupec, ne doprostřed mezi seznamy. */
@media (min-width: 600px) {
  .services__more { grid-column: 1; margin-top: var(--sp-4); }
}


/* --- Výhody ------------------------------------------------------------- */

.advantages { display: grid; gap: var(--sp-4); }

.advantages h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-head);
}

/* Pod sebou jsou to tři holé řádky textu na jedné šedé ploše a splývají.
   Vodorovná linka dělá totéž, co na desktopu svislé předěly mezi sloupci. */
.advantages > div + div {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-2);
}

@media (min-width: 900px) {
  .advantages { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }

  .advantages > div + div {
    padding-top: 0;
    border-top: 0;
    padding-left: var(--gutter);
    border-left: 1px solid var(--line-2);
  }
}


/* --- Galerie ------------------------------------------------------------ */

.gal {
  display: grid;
  gap: var(--sp-3);
}

.gal img { width: 100%; }

.gal figure { margin: 0; }

/* Pás keramických fotek na tmavé ploše — čtyři vedle sebe, těsně.
   Jediné místo v galerii, kde se fotky ořezávají na společnou výšku. */
.gal--strip {
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
}

@media (min-width: 600px) {
  .gal--strip {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(150px, 17vw, 240px);
    gap: var(--sp-2);
  }

  .gal--strip figure { display: grid; min-height: 0; }

  .gal--strip img {
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }
}

/* Zděná mřížka. `column-count` nechá fotkám jejich vlastní poměr stran,
   takže se nic neořezává; cenou je, že si pořadí ve sloupcích rozdělí
   prohlížeč sám. Grid by to bez pevných výšek řádků nesvedl. */
.masonry {
  column-count: 2;
  column-gap: var(--sp-2);
}

.masonry figure {
  margin: 0 0 var(--sp-2);
  break-inside: avoid;
}

.masonry img { width: 100%; }

@media (min-width: 900px) {
  .masonry { column-count: 3; column-gap: var(--sp-3); }
  .masonry figure { margin-bottom: var(--sp-3); }
}

h2 + h3 { margin-top: var(--sp-6); }
h3 + .pairs { margin-top: var(--sp-4); }
.pairs + .masonry { margin-top: var(--sp-5); }


/* --- Dvojice před / po -------------------------------------------------- */

.pairs { display: grid; gap: var(--sp-6); }

@media (min-width: 900px) {
  .pairs { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
}

.pair { margin: 0; }

/* Fotky jsou sražené k sobě, ať se čtou jako jeden záběr ve dvou časech.
   Posuvník s táhlem záměrně ne — vyžadoval by JavaScript. */
.pair__shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pair__shot { position: relative; }

.pair__shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.pair__chip {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  padding: 2px var(--sp-1);
  background: var(--indigo);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.4;
}

.pair figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-2);
}


/* --- Keramická ochrana -------------------------------------------------- */

.ceramic__lead { font-size: var(--fs-lead-lg); line-height: 1.5; }

.ceramic__more { margin-top: var(--sp-5); }

/* Po přesunu obsahu na podstránku zůstala v sekci jediná fotka. Na širokém
   displeji se ořízne do pásu, aby nepřerostla zkrácený text vedle ní. */
.ceramic__photo { margin-top: var(--sp-6); }
.ceramic__photo img { width: 100%; }

@media (min-width: 600px) {
  /* Výřez posunutý dolů, aby v pásu zůstala maska chladiče a světlomet —
     podle nich je auto poznat, samotná kapota by byla jen šedá plocha. */
  .ceramic__photo img { aspect-ratio: 16 / 7; object-fit: cover; object-position: center 70%; }
}

.credential {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .credential { grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: start; }
  .credential figure { justify-self: end; }
}

.credential h2 { margin-bottom: var(--sp-3); }
.credential p { max-width: var(--measure); color: var(--ink-2); }

/* Sken je doklad, ne zdroj údajů — v textu vedle stojí všechno podstatné.
   Náhled proto zabírá jen tolik místa, aby se poznalo, co to je; číst se
   dá po otevření plné velikosti. */
/* Strop drží náhled, ne celý blok — jinak by se pod 160px lámal i popisek
   odkazu, který je delší než obrázek. */
.credential figure { margin: 0; max-width: 17rem; }

.credential__open {
  display: block;
  text-decoration: none;
}

.credential__open img {
  width: 160px;
  border: 1px solid var(--line-2);
}
.credential__open:hover img { border-color: var(--indigo); }

.credential__cta {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-color: var(--violet-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.credential__open:hover .credential__cta { text-decoration-color: currentColor; }


/* --- Ceník -------------------------------------------------------------- */

.pricelist { display: grid; gap: var(--sp-6); }

@media (min-width: 900px) {
  .pricelist { grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: start; }
}

/* Úvodní věty nesou ceny i souvislým textem, aby šly citovat. `.wrap` je
   široký 1312 px, odstavci proto držíme čtecí šířku jako u `.prose`. */
.pricelist__intro {
  max-width: var(--measure);
  margin-top: var(--sp-4);
}

.pricelist__intro + .pricelist { margin-top: var(--sp-6); }

.pricing__group {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
}

.pricing__group + .pricing__list { margin-top: var(--sp-2); }
.pricing__list + .pricing__group { margin-top: var(--sp-6); }

.pricing__row {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.pricing__name {
  font-size: var(--fs-price);
  line-height: var(--lh-head);
}

/* Cena se nikdy nezalomí. Když je v řádku těsno, ustoupí název —
   „od 3 500 Kč" rozsekané na dva řádky vypadá jako dvě různá čísla. */
.pricing__price {
  color: var(--indigo);
  font-weight: 600;
  font-size: var(--fs-price);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Dvě položky mají místo částky větu. Sází se klidně a v šířce, kterou
   potřebují — ne jako chybějící údaj a ne jako nejlevnější varianta.
   Že je to plnohodnotná odpověď, nese skupina „Péče o lak" a rámeček vedle. */
.pricing__price--quote {
  white-space: normal;
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 0;
}

@media (min-width: 900px) {
  .pricing__row {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--sp-5);
  }

  .pricing__price { text-align: right; }
  .pricing__price--quote { text-align: right; }
}

.pricing__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  color: var(--ink-2);
}

.pricing__aside {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--indigo);
}

.pricing__aside > * + * { margin-top: var(--sp-3); }
.pricing__aside p { color: var(--ink-2); }

.pricing__aside-lead {
  color: var(--ink);
  font-size: var(--fs-lead-lg);
  font-weight: 500;
  line-height: var(--lh-head);
}

.pricing__aside .phone-mid {
  font-size: var(--fs-lead-lg);
  color: var(--indigo);
}


/* --- Kontaktní údaje ---------------------------------------------------- */

.contact-grid { display: grid; gap: var(--sp-5); }

@media (min-width: 600px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--gutter); }
}

.contact-grid dt {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  margin-bottom: var(--sp-1);
}

.contact-grid dd { font-size: var(--fs-lead); }

.phone-mid {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-color: var(--violet-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.phone-mid:hover { text-decoration-color: currentColor; }

/* Dostupnost: indigový pruh se značkou, bez viditelného nadpisu. */
.availability {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}

@media (min-width: 600px) {
  .availability { grid-template-columns: auto 1fr; gap: var(--sp-6); }
}

.availability__mark {
  width: clamp(56px, 7vw, 84px);
  aspect-ratio: 56.611 / 53.457;
  background: url("../img/tepichcar-mark-white.svg") no-repeat center / contain;
}

/* Širší měřítko než u běžného textu (--measure). Je to jedna krátká věta
   na prázdné ploše, ne odstavec ke čtení — 44rem ji zbytečně lámalo
   na tři řádky. 56rem odpovídá 900 px z návrhu. */
.availability p {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--ls-head);
  max-width: 56rem;
  text-wrap: pretty;
}


/* --- Kontakt: jak si domluvit termín ------------------------------------ */

/* Vlastní obal místo `.prose`: `.prose a` by tlačítkům přebarvilo text na
   indigo a na indigovém pozadí by zmizel. */
.contact-cta { max-width: var(--measure); }
.contact-cta > * + * { margin-top: var(--sp-4); }
.contact-cta > p { color: var(--ink-2); }

/* Dvě tlačítka vedle sebe, na úzké obrazovce pod sebou — nezávisle na tom,
   jestli se jejich text vejde vedle sebe i na malou šířku. */
.contact-cta__btns {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

@media (min-width: 480px) {
  .contact-cta__btns { flex-direction: row; }
}

.contact-cta__note {
  font-size: var(--fs-micro);
  color: var(--ink-2);
}


/* --- Podstránka: keramická ochrana laku --------------------------------- */

/* Odkaz na podstránku stojí v menu první a je jediná položka, která vede
   jinam než na kotvu — proto tučně, s trvalým podtržením a oddělený linkou. */
.site-nav__page a {
  text-decoration: underline;
  text-decoration-color: var(--violet-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (min-width: 900px) {
  .site-nav__page {
    padding-right: var(--sp-5);
    border-right: 1px solid var(--line);
  }
}

/* Úvod podstránky: text vlevo, fotka vpravo. Pod 1024 px pod sebou. */
.subhero { display: grid; gap: var(--sp-6); align-items: center; }
.subhero__lead { margin-top: var(--sp-4); max-width: var(--measure); }

/* Druhá výzva je textový odkaz, ne tlačítko — proto svislé zarovnání na střed
   a větší rozestup, aby se odkaz nelepil na tlačítko. */
.subhero .btns {
  margin-top: var(--sp-5);
  align-items: center;
  column-gap: var(--sp-5);
  row-gap: var(--sp-3);
}

/* První odstavec sekce na podstránce: větší a v plné barvě, zbytek pod ním
   v tlumené barvě `.prose`. */
.prose .lead { color: var(--ink); }

@media (min-width: 1024px) {
  .subhero { grid-template-columns: 4fr 5fr; gap: var(--gutter); }
}

.subhero__photo { position: relative; overflow: hidden; }

/* Přejezd světla. Výchozí stav je neviditelný, animace se přidává až
   v `no-preference` — bez pohybu tedy nezůstane nic navíc. */
.subhero__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255, 255, 255, .28) 50%,
    transparent 60%);
}

@media (prefers-reduced-motion: no-preference) {
  .subhero__sweep {
    animation: tc-sweep var(--dur-sweep) ease-out .2s 1 both;
  }
}

@keyframes tc-sweep {
  from { opacity: 1; transform: translateX(-60%); }
  to   { opacity: 0; transform: translateX(60%); }
}

/* --- Ukázka chování vody ------------------------------------------------ */

.water { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }

@media (min-width: 768px) {
  .water { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}

.water__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.water__label--on { color: var(--indigo); }

/* Předrenderovaná simulace z návrhu. Pozadí drží plochu, než se animace
   načte; --ink je z palety nejblíž tmavému „laku“ v simulaci. */
.water__img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
}

.water__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-2);
}

.water__prose { margin-top: var(--sp-6); max-width: none; }

@media (min-width: 768px) {
  .water__prose {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .water__prose > * + * { margin-top: 0; }
}

/* --- Galerie podstránky ------------------------------------------------- */

.gal-intro { margin-top: var(--sp-3); max-width: var(--measure); }

/* Sada: velká fotka se sloupcem „Na co se dívat“, pod ní pás a pod pásem
   popisek s nápovědou. Sady od sebe dělí linka. */
.gal-set {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.gal-set__top { display: grid; gap: var(--sp-3); }

@media (min-width: 1024px) {
  .gal-set__top {
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-5);
    align-items: start;
  }
}

.gal-set__side { max-width: var(--measure); }
.gal-set__side .label { margin-bottom: var(--sp-1); }
.gal-set__side p:not(.label) { color: var(--ink-2); }

/* Pás se posouvá do strany a vždy je vidět kus další fotky, aby bylo poznat,
   že seznam pokračuje. Od 768 px se vejdou tři a čtvrt. */
/* Obal pásu nese šipku. Uvnitř samotného pásu by šipka rolovala spolu
   s fotkami, proto sedí vedle něj a přes něj se jen překrývá. */
.gal-set__rail {
  position: relative;
  margin-top: var(--sp-2);
  timeline-scope: --pas;
}

.gal-set__strip {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scroll-timeline: --pas x;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.gal-set__strip > figure {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .gal-set__strip > figure { flex-basis: calc((100% - 3 * var(--sp-2)) / 3.25); }
}

/* Šipka na pravém okraji říká, že pás pokračuje. Je jen naznačení — kliknout
   na ni nejde, pás se roluje prstem, kolečkem nebo šipkami z klávesnice. */
.gal-set__arrow {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--indigo);
  color: #fff;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Kde to prohlížeč umí, šipka ke konci pásu zmizí — dál už nic není.
   Jinde zůstane vidět pořád, což nevadí. */
@supports (animation-timeline: scroll()) {
  .gal-set__arrow {
    animation: tc-arrow-out linear both;
    animation-timeline: --pas;
    animation-range: 75% 100%;
  }
}

@keyframes tc-arrow-out {
  to { opacity: 0; }
}

.gal-set__foot {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-2);
}

/* Tři fotky se od 768 px vejdou vedle sebe celé a pás se nerozroluje —
   šipka by tam lhala. */
@media (min-width: 768px) {
  .gal-set__rail--few .gal-set__strip > figure { flex: 1 1 0; }
  .gal-set__rail--few .gal-set__arrow { display: none; }
}

.price-one { margin-top: var(--sp-5); }

/* Postup práce. Číslo kroku kreslí CSS, pořadí nese samo `<ol>`. */
.steps { counter-reset: krok; }

.steps li {
  counter-increment: krok;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-2);
}

.steps li + li { margin-top: var(--sp-3); }

.steps li::before {
  content: counter(krok) ".";
  font-weight: 600;
  color: var(--indigo);
}


/* --- Právní text -------------------------------------------------------- */

/* Perex jde přes celou šířku obsahu. Je to pár vět pod nadpisem, ne text
   ke čtení na dlouho — šířku mu zdola drží jen --container ve `.wrap`. */
.page-head__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

.page-head__meta {
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}

/* Cesta zpět na konci dlouhého textu. Hlavička je nahoře, ale po deseti
   kapitolách je k ní daleko. */
.legal__back {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
}

/* Odkaz zpět jako samostatný pás pod poslední sekcí: bez vlastní linky
   a odsazení, sekce kolem už mezeru dělají. */
.section--back { padding-block: var(--sp-5); }

.section--back .legal__back {
  margin: 0;
  padding: 0;
  border: 0;
}

.legal { display: grid; gap: var(--sp-6); }

@media (min-width: 1200px) {
  .legal {
    grid-template-columns: 17rem 1fr;
    gap: var(--gutter);
    align-items: start;
  }

  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
  }
}

.legal__toc h2 {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}

.legal__toc ol { border-top: 1px solid var(--line); }
.legal__toc li { border-bottom: 1px solid var(--line); }

.legal__toc a {
  display: block;
  padding-block: var(--sp-2);
  font-size: var(--fs-micro);
  text-decoration: none;
}

.legal__toc a:hover { color: var(--indigo); }

.legal__body {
  max-width: var(--measure-legal);
  line-height: var(--lh-legal);
}

.legal__body h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}

.legal__body h2:first-child { margin-top: 0; }

.legal__body p + p,
.legal__body ul,
.legal__body ul + p { margin-top: var(--sp-3); }

.legal__body ul {
  display: grid;
  gap: var(--sp-2);
}

.legal__body li { padding-left: var(--sp-4); position: relative; }

.legal__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 8px;
  height: 1px;
  background: var(--violet);
}

.legal__body a {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-color: var(--violet-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* --- Patička ------------------------------------------------------------ */

.site-footer {
  background: var(--ink);
  color: #fff;
  padding-block: var(--sp-7) var(--sp-5);
  font-size: var(--fs-micro);
}

.site-footer__inner { display: grid; gap: var(--sp-6); }

@media (min-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  /* Sloupec s odkazy nese od přesunu právních stránek delší názvy,
     proto dostal místo na úkor prázdného čtvrtého sloupce. */
  .site-footer__inner {
    grid-template-columns: 3fr 4fr 4fr 1fr;
    gap: var(--gutter);
  }
}

.site-footer__logo img { width: 160px; height: auto; }

.site-footer h2 {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--violet);
  margin-bottom: var(--sp-3);
}

.site-footer ul { display: grid; gap: var(--sp-3); }
.site-footer ul a { display: inline-block; padding-block: 4px; }

.site-footer address {
  font-style: normal;
  color: var(--on-dark-2);
  line-height: var(--lh-body);
}

.site-footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--on-dark-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  color: var(--on-dark-2);
}


/* --- 404 ---------------------------------------------------------------- */

.notfound { padding-block: var(--sp-9); }
.notfound h1 { margin-bottom: var(--sp-4); }

.notfound ul {
  margin-top: var(--sp-5);
  display: grid;
  max-width: var(--measure);
  border-top: 1px solid var(--line);
}

.notfound li { border-bottom: 1px solid var(--line); }

.notfound li a {
  display: block;
  padding-block: var(--sp-3);
  font-weight: 600;
  text-decoration: none;
}

.notfound li a:hover { color: var(--indigo); }

.notfound__phone { margin-top: var(--sp-5); color: var(--ink-3); font-size: var(--fs-micro); }


/* --- Jediná animace ----------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* --- Tisk --------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .skip, .hero::before { display: none; }
  body { font-size: 11pt; color: #000; }
  .section { padding-block: 1rem; }
}