@charset "UTF-8";
/*
 * site.css — Truhlářství Kochman
 *
 * Jeden soubor, psaný ručně. Pořadí: písma, reset, tokeny, základ,
 * rozvržení, hlavička, úvodní obrazovka, sekce, posuvníky, patička,
 * lightbox, pohyb.
 *
 * TŘI PRAVIDLA, KTERÁ DRŽÍ CELÝ WEB
 *
 *   1. Barvu nese fotka, ne rozhraní. Stránka má jen odstíny bílé,
 *      od teplého papíru po popel. Hloubka vzniká tónem, ne barvou,
 *      a proto na ní dřevo a lak z fotek vyniknou.
 *   2. Místo rámečků vlasové linky, místo stínů vzduch. Žádné stíny,
 *      žádné přechody, žádné zaoblení.
 *   3. Nadpis nese sdělení velikostí, ne délkou. Text jde ve zlomcích.
 */

/* ====================================================================
 * 1. PÍSMA
 *
 * Self hosted, dvě rodiny, ořezané na českou abecedu. Náhradní rodiny
 * s dorovnanými metrikami drží rozvržení, dokud se písmo nenačte.
 * ==================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-cs-latin.woff2?v=2') format('woff2-variations');
  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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-cs-latin-ext.woff2?v=2') format('woff2-variations');
  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;
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue');
  size-adjust: 108.16%;
  ascent-override: 89.57%;
  descent-override: 22.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../fonts/inter-tight-cs-latin.woff2?v=2') format('woff2-variations');
  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: 'Inter Tight';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../fonts/inter-tight-cs-latin-ext.woff2?v=2') format('woff2-variations');
  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;
}

@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial Narrow'), local('Arial');
  size-adjust: 104.26%;
  ascent-override: 92.92%;
  descent-override: 23.14%;
  line-gap-override: 0%;
}

/* ====================================================================
 * 2. RESET
 * ==================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--lista) + 1.5rem);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

[hidden] {
  display: none !important;
}

/* ====================================================================
 * 3. TOKENY
 * ==================================================================== */

:root {
  /*
   * ŠKÁLA BÍLÝCH. Pět tónů od nejsvětlejšího po nejtmavší. Sekce se
   * střídají po téhle škále, takže stránka má rytmus, aniž by na ni
   * přišla jediná barva. Rozdíl mezi sousedními tóny je malý schválně:
   * má být cítit, ne vidět.
   */
  --snih: #ffffff;
  --papir: #f6f4f1;
  --kost: #efebe5;
  --len: #e7e2db;
  --popel: #ddd7ce;

  /* Text. Všechny odstíny mají na papíru i na popelu aspoň 4,5:1. */
  --inkoust: #16181b;
  /*
   * Značková červená. Odstín cihly, stejný jako na terakotových kuchyních
   * z galerie. Nese ji logo, tlačítka a odkazy; plochy zůstávají bílé,
   * aby fotky nábytku měly klid.
   */
  --cervena: #b0392b;
  --cervena-tma: #8f2d22;
  --inkoust-2: #3c3a37;
  --inkoust-3: #5c5850;

  /* Linky. Vlasové, teplé, nikdy šedé jako od prohlížeče. */
  --linka: rgba(22, 24, 27, 0.13);
  --linka-silna: rgba(22, 24, 27, 0.26);

  /* Rozvržení */
  --sirka: 1560px;
  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --sekce: clamp(4.5rem, 9vw, 10rem);
  --sekce-mala: clamp(3rem, 5vw, 5rem);
  --lista: 4.5rem;

  /* Typografie */
  --font-display: 'Inter Tight', 'Inter Tight Fallback', 'Inter', system-ui, Arial, sans-serif;
  --font-text: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --weight-display: 700;

  --t-display: clamp(2.375rem, 1rem + 5.4vw, 5.25rem);
  --t-h2: clamp(1.625rem, 1rem + 2.3vw, 2.75rem);
  --t-h3: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  --t-lead: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.6875rem;

  /* Pohyb. Jedna křivka na celý web, doběh ven, nikdy dovnitř. */
  --doba: 0.6s;
  --doba-kratka: 0.25s;
  --krivka: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 62em) {
  :root {
    --lista: 5.5rem;
  }
}

/* ====================================================================
 * 4. ZÁKLAD
 * ==================================================================== */

body {
  margin: 0;
  background-color: var(--papir);
  color: var(--inkoust-2);
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  color: var(--inkoust);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-family: var(--font-text);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

p {
  text-wrap: pretty;
}

.lead {
  max-width: 38ch;
  color: var(--inkoust-2);
  font-size: var(--t-lead);
  line-height: 1.55;
}

.text {
  max-width: 62ch;
}

.small {
  font-size: var(--t-small);
}

.tichy {
  color: var(--inkoust-3);
}

/*
 * Popisek. Drobné verzálky s velkým prostrkáním, před nimi krátká
 * linka. Ta linka je jediný ornament na webu a značí, že popisek patří
 * k něčemu vedle, ne že je nadpisem sám o sobě.
 */
.popisek {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--inkoust-3);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.popisek::before {
  content: '';
  flex: none;
  width: 1.5rem;
  height: 1px;
  background-color: var(--linka-silna);
}

.popisek--bez::before {
  display: none;
}

a {
  color: inherit;
  text-decoration-color: var(--linka-silna);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--doba-kratka) var(--krivka),
    text-decoration-color var(--doba-kratka) var(--krivka);
}

a:hover {
  color: var(--cervena);
  text-decoration-color: var(--cervena);
}

/*
 * Na tmavých plochách má červená proti inkoustu malý kontrast, takže se
 * tam odkazy při najetí rozsvítí bíle. Značkovou barvu tam nese tlačítko,
 * které stojí na bílé ploše.
 */
.sekce--tma a:hover,
.pata a:hover,
.lista.je-nad-fotkou a:hover,
.lightbox a:hover {
  color: var(--snih);
  text-decoration-color: var(--snih);
}

/* Plochy, které kreslí prohlížeč, patří k webu stejně jako zbytek. */
::selection {
  background-color: var(--popel);
  color: var(--inkoust);
}

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

/*
 * Pás posuvníku jde od kraje ke kraji okna. Obrys vně by mu ustřihlo
 * `overflow-x: hidden` na těle a zdola ho přetřela následující sekce,
 * takže by z něj zbyla čárka nahoře. Proto se kreslí dovnitř.
 */
.posuvnik__pas:focus-visible {
  outline-offset: -3px;
}

html {
  scrollbar-color: var(--linka-silna) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--linka-silna);
  border: 3px solid var(--papir);
}

.cisla {
  font-variant-numeric: tabular-nums;
}

.jen-pro-ctecku {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.preskocit {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background-color: var(--inkoust);
  color: var(--snih);
  font-size: var(--t-small);
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--doba-kratka) var(--krivka);
}

.preskocit:focus-visible {
  transform: translateY(0);
}

/* ====================================================================
 * 5. ROZVRŽENÍ
 * ==================================================================== */

.obal {
  width: 100%;
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sekce {
  position: relative;
  padding-block: var(--sekce);
}

.sekce--uzka {
  padding-block: var(--sekce-mala);
}

/*
 * Plochy se střídají po škále bílých. Přechod mezi dvěma tóny je
 * ostrý řez, ne přechod: tón se změní na hraně sekce a tím vznikne
 * rytmus stránky.
 */
.sekce--snih {
  background-color: var(--snih);
}

.sekce--kost {
  background-color: var(--kost);
}

.sekce--len {
  background-color: var(--len);
}

/*
 * Hlavička sekce. Nadpis vlevo, jedna věta vpravo, nad tím vlasová
 * linka přes celou šířku. Linka odděluje sekce místo změny barvy,
 * takže dvě sousední sekce ve stejném tónu se přesto nerozpijí.
 */
/*
 * Hlava sekce. Vlevo nadpis, vpravo věta k němu, nad tím vlasová linka.
 * Žádný štítek ani pořadové číslo nad nadpisem: nadpis nese sdělení
 * sám a cokoli nad ním by mu jen bralo váhu.
 */
.hlava {
  display: grid;
  gap: 1.25rem;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linka);
}

@media (min-width: 62em) {
  .hlava {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }
}

.hlava__text {
  max-width: 38ch;
  color: var(--inkoust-2);
  font-size: var(--t-lead);
  line-height: 1.45;
}

@media (min-width: 62em) {
  .hlava__text {
    padding-top: 0.35rem;
  }
}

/*
 * Velký nadpis sekce. Malá písmena, ne verzálky: verzálky křičí a na
 * webu, který má působit draze, je to to poslední, co chceme. Váha 600
 * je nejlehčí, jakou proměnné písmo Inter Tight nese, a právě proto
 * vypadá klidně i v téhle velikosti.
 */
.velky {
  font-size: clamp(2.125rem, 1rem + 4.8vw, 4.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

/* ====================================================================
 * 6. TLAČÍTKA A ODKAZY
 * ==================================================================== */

.tlacitko {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 1px solid var(--cervena);
  background-color: var(--cervena);
  color: var(--snih);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--doba-kratka) var(--krivka),
    color var(--doba-kratka) var(--krivka);
}

.tlacitko:hover {
  background-color: var(--cervena-tma);
  border-color: var(--cervena-tma);
  color: var(--snih);
}

.tlacitko--obrys {
  background-color: transparent;
  border-color: var(--linka-silna);
  color: var(--inkoust);
}

.tlacitko--obrys:hover {
  background-color: var(--inkoust);
  border-color: var(--inkoust);
  color: var(--snih);
}

.tlacitko--svetle {
  background-color: var(--snih);
  border-color: var(--snih);
  color: var(--cervena);
}

.tlacitko--svetle:hover {
  background-color: transparent;
  color: var(--snih);
}

/*
 * Textový odkaz s linkou. Linka se při najetí protáhne. Mění se
 * měřítko, ne šířka: změna šířky by nutila prohlížeč přepočítat
 * rozvržení při každém snímku.
 */
.odkaz-sipka {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cervena);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.odkaz-sipka::after {
  content: '';
  width: 2.25rem;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0.611);
  transform-origin: left center;
  transition: transform var(--doba-kratka) var(--krivka);
}

.odkaz-sipka:hover::after {
  transform: scaleX(1);
}

/* ====================================================================
 * 7. HLAVIČKA
 * ==================================================================== */

.lista {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  height: var(--lista);
  border-bottom: 1px solid transparent;
  color: var(--inkoust);
  transition: background-color var(--doba) var(--krivka),
    color var(--doba) var(--krivka), border-color var(--doba) var(--krivka);
}

.lista__obal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

.lista.je-nad-fotkou {
  color: var(--snih);
}

.lista__obal {
  position: relative;
}

/*
 * Nad fotkou i nad tmavým úvodem se tlačítko obrací na bílé. Tmavé by
 * na tmavém podkladu ztratilo tvar a zbyl by z něj plovoucí text.
 */
.lista.je-nad-fotkou:not(.je-odrolovana) .lista__cta {
  border-color: var(--snih);
  background-color: var(--snih);
  color: var(--inkoust);
}

/*
 * Otevřený panel menu je světlý. Lišta nad ním musí zčernat, jinak by
 * bílá značka i křížek na papírovém podkladu zmizely.
 */
html.menu-otevreno .lista,
html.menu-otevreno .lista.je-nad-fotkou {
  color: var(--inkoust);
}

html.menu-otevreno .lista.je-nad-fotkou:not(.je-odrolovana) .lista__cta {
  border-color: var(--inkoust);
  background-color: var(--inkoust);
  color: var(--papir);
}

/*
 * Odrolovaná lišta je plná papírová plocha a pod ní vlasová linka.
 * Žádné rozostření pozadí ani stín: web nemá jediný přechod ani stín
 * a lišta není výjimka. Linka je součástí výšky, protože všechny prvky
 * počítají rozměr včetně rámečku.
 */
.lista.je-odrolovana {
  background-color: var(--papir);
  color: var(--inkoust);
  border-bottom-color: var(--linka);
}

.znacka {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.znacka__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/*
 * Značka u názvu: písmeno se skládacím metrem, podle předlohy od klienta.
 * Je bez podkladu, takže na papíru svítí červeně a nad fotkou bíle.
 * Velikost drží výšku obou řádků textu vedle sebe.
 */
.znacka__znak {
  width: clamp(2.25rem, 5.5vw, 2.75rem);
  height: clamp(2.25rem, 5.5vw, 2.75rem);
  flex: none;
}

/* Světlá podoba se ukáže jen tam, kde je pod značkou tma. */
.znacka__znak--svetla {
  display: none;
}

.lista.je-nad-fotkou .znacka__znak {
  display: none;
}

.lista.je-nad-fotkou .znacka__znak--svetla {
  display: block;
}

.znacka__jmeno {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  letter-spacing: -0.01em;
}

.znacka__popis {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}

/*
 * Nad fotkou se ztlumení ruší. Deset pixelů vysoké písmo s krytím 0,75
 * spadlo nad světlou kuchyní na 4,4 ku jedné, tedy pod hranici
 * čitelnosti. Na papírovém podkladu odrolované lišty rezerva je.
 */
.lista.je-nad-fotkou:not(.je-odrolovana) .znacka__popis {
  opacity: 1;
}

.menu {
  display: none;
}

@media (min-width: 58em) {
  .menu {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
  }

  .menu a {
    position: relative;
    font-size: var(--t-small);
    text-decoration: none;
  }

  /* Podtržení se vykreslí zleva doprava, nesvítí jako rámeček. */
  .menu a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -0.4rem;
    left: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--doba) var(--krivka);
  }

  .menu a:hover::after,
  .menu a[aria-current='page']::after {
    transform: scaleX(1);
  }
}

.lista__akce {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lista__telefon {
  display: none;
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48em) {
  .lista__telefon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
}

.lista__cta {
  display: none;
}

@media (min-width: 74em) {
  .lista__cta {
    display: inline-flex;
    min-height: 2.75rem;
    padding-inline: 1.25rem;
  }
}

.prepinac {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  color: inherit;
}

@media (min-width: 58em) {
  .prepinac {
    display: none;
  }
}

/*
 * Dva proužky, ze kterých se po otevření stane křížek. Posun je přesně
 * polovina mezery mezi nimi, aby se potkaly uprostřed tlačítka.
 * Pravidla míří na pořadí schválně, ne na :first-child a :last-child:
 * kdyby do tlačítka někdo přidal další prvek, křížek by se rozpadl.
 */
.prepinac span {
  display: block;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--doba) var(--krivka);
}

.prepinac[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}

.prepinac[aria-expanded='true'] span:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

.panel {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  /*
   * Na telefonu na šířku je menu vyšší než obrazovka. Obyčejné
   * `center` by ho v takovém případě vystrkalo nahoru i dolů a horní
   * položky by se nedaly dorolovat. `safe center` centruje jen dokud
   * se obsah vejde, jinak ho zarovná na začátek.
   */
  justify-content: center;
  justify-content: safe center;
  gap: 2.5rem;
  padding: var(--lista) var(--pad) var(--pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--papir);
  opacity: 0;
  transition: opacity var(--doba) var(--krivka);
}

.panel.je-otevreny {
  opacity: 1;
}

.panel__odkazy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.panel__odkazy a {
  padding-block: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-decoration: none;
}

.panel__pata {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linka);
}

/*
 * Nízká obrazovka, typicky telefon na šířku. Menu se scvrkne, ať se
 * vejde. Blok musí stát AŽ ZA pravidly, která přebíjí. Má s nimi
 * stejnou závažnost a v CSS pak rozhoduje pořadí, ne to, že je
 * v media dotazu.
 */
@media (max-height: 34em) {
  .panel {
    gap: 1.5rem;
  }

  .panel__odkazy a {
    font-size: clamp(1.375rem, 5.5vh, 1.875rem);
    padding-block: 0.2rem;
  }

  .panel__pata {
    padding-top: 1.25rem;
  }
}

html.menu-otevreno,
html.lightbox-otevren {
  overflow: hidden;
}

/* ====================================================================
 * 8. ÚVODNÍ OBRAZOVKA
 * ==================================================================== */

.uvod {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-block: calc(var(--lista) + 2rem) clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  background-color: var(--inkoust);
}

/* Úvodní obrazovku nese jedna fotka. Nehýbe se, nepřelíná, nepřijíždí. */
.uvod__scena {
  position: absolute;
  inset: 0;
}

.uvod__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Závoj je plná plocha, ne přechod. Web nemá jediný přechod ani stín
 * a tohle bývala poslední výjimka. Plný tón navíc drží kontrast všude
 * stejný, takže je jedno, jestli je pod nadpisem tmavá skříň nebo
 * bílá stěna.
 */
.uvod__zavoj {
  position: absolute;
  inset: 0;
  background-color: rgba(16, 16, 16, 0.62);
}

.uvod__obal {
  position: relative;
  width: 100%;
}

.uvod__text {
  max-width: min(100%, 54rem);
  color: var(--snih);
}

.uvod h1 {
  color: var(--snih);
}

.uvod__pod {
  margin-top: 1.25rem;
  max-width: 38ch;
  /* Plná bílá. Ztlumená by se na světlejším snímku prolínačky dostala
     pod hranici čitelnosti, a fotky se tu střídají čtyři. */
  color: var(--snih);
  font-size: var(--t-lead);
  line-height: 1.5;
}

.uvod__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.uvod__telefon {
  color: var(--snih);
  font-size: var(--t-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.uvod__telefon:hover {
  color: var(--snih);
  text-decoration-color: var(--snih);
}

/* Popisek fotky. Přiznává, že v úvodu stojí skutečná zakázka. */
.uvod__popisek {
  display: none;
}

@media (min-width: 62em) {
  .uvod__popisek {
    position: absolute;
    right: var(--pad);
    bottom: clamp(2.5rem, 6vw, 5rem);
    display: flex;
    justify-content: flex-end;
    max-width: 30ch;
    /* Plná bílá. Ztlumená měla při jedenácti pixelech kontrast 3,9 ku
       jedné, tedy pod hranicí čitelnosti. */
    color: var(--snih);
    letter-spacing: 0.1em;
    text-align: right;
  }

  /* Nad fotkou se popisek zarovnává doprava a láme se na dva řádky,
     kde by mu čárka vlevo jen odplouvala od textu. */
  .uvod__popisek::before {
    display: none;
  }
}

/* Pruh pod fotkou. Nese údaje, které jinde na stránce nejsou, a ostře
   odděluje fotku od první plochy. */
/*
 * Tichý pás pod úvodní obrazovkou: tři drobné údaje verzálkami.
 * Schválně bez velkých číslic. Blok „velké číslo, malý popisek" je
 * šablona, kterou má každý druhý web, a doložená čísla stejně nese
 * pás dokladů o kus níž.
 */
.pruh {
  background-color: var(--kost);
  color: var(--inkoust);
}

.pruh__obal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.125rem;
}

.pruh span {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------
 * Úvod podstránky
 *
 * Stejná stavba, stejný závoj, stejná typografie jako úvod na hlavní
 * stránce. Liší se vším, co úvodní obrazovku dělá úvodní: je nižší,
 * nese drobečkovou navigaci, jednu fotku místo prolínačky a žádná
 * tlačítka ani šipku dolů. Návštěvník je doma, ale ne na úvodu.
 * ----------------------------------------------------------------- */

.uvod--mala {
  min-height: clamp(21rem, 58svh, 33rem);
  padding-block: calc(var(--lista) + clamp(2rem, 4vw, 3.5rem)) clamp(2.25rem, 4.5vw, 3.5rem);
}

.uvod--mala h1 {
  font-size: clamp(2.125rem, 1.15rem + 3.9vw, 4rem);
  max-width: 20ch;
}

.uvod--mala .uvod__pod {
  margin-top: 1rem;
  max-width: 48ch;
}

/* Nižší úvod má text výš a blíž k okraji, proto o kousek tmavší závoj. */
.uvod--mala .uvod__zavoj {
  background-color: rgba(16, 16, 16, 0.68);
}

.uvod--mala .uvod__popisek {
  bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

/*
 * Úvod bez fotky. Závoj by na holé tmavé ploše udělal nechtěný přechod,
 * proto se skryje a zůstane rovný inkoust.
 */
.uvod--bez-fotky .uvod__zavoj {
  display: none;
}

/* ====================================================================
 * 9. ÚVODNÍ TVRZENÍ
 *
 * Jedna velká věta proti trojici drobných údajů. Nahrazuje odstavec:
 * co jinde vysvětluje text, tady nese velikost.
 * ==================================================================== */

.tvrzeni {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 62em) {
  .tvrzeni {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
  }
}

/*
 * Tvrzení s fotkou. Věta a fakta vlevo, fotka vpravo přes obě řady.
 * Bez ní byla celá sekce jen text a na webu, který prodává vzhled
 * nábytku, je stránka bez fotky promarněné místo.
 */
.tvrzeni__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--len);
}

.tvrzeni__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 62em) {
  .tvrzeni--foto {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    /*
     * První řádka jen podle výšky věty, zbytek do druhé. Bez toho by
     * si obě řádky rozdělily výšku fotky napůl a mezi větou a fakty
     * zela díra.
     */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'veta foto'
      'body foto';
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 7vw, 7rem);
  }

  .tvrzeni--foto .tvrzeni__veta {
    grid-area: veta;
  }

  .tvrzeni--foto .tvrzeni__body {
    grid-area: body;
  }

  .tvrzeni--foto .tvrzeni__foto {
    grid-area: foto;
  }
}

.tvrzeni__veta {
  max-width: 18ch;
  color: var(--inkoust);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1rem + 3.6vw, 3.75rem);
  /* Stejná váha jako nadpisy sekcí. Těžší řez tu působil jako reklama. */
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.tvrzeni__body {
  display: grid;
  gap: 1.25rem;
}

.tvrzeni__polozka {
  padding-top: 1rem;
  border-top: 1px solid var(--linka);
}

.tvrzeni__polozka strong {
  display: block;
  color: var(--inkoust);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tvrzeni__polozka span {
  color: var(--inkoust-3);
  font-size: var(--t-small);
}

/*
 * Výčet ve třech sloupcích pod hlavičkou sekce. Používá se tam, kde by
 * velké tvrzení soupeřilo s nadpisem sekce: nadpis nese sdělení,
 * výčet doplňuje fakta.
 */
/* --------------------------------------------------------------------
 * Postup: lepivá fotka a vedle ní očíslované kroky
 *
 * Fotka zůstane stát, dokud kroky vedle ní neprojdou. Sekce tím dostane
 * vlastní tvar, jiný než mřížka dlaždic o kus výš, a hlavně přestane
 * být jen textem. Stránka, kde se jedna stavba opakuje osmkrát pod
 * sebou, vypadá jako šablona, i když je každé slovo na ní vlastní.
 * ----------------------------------------------------------------- */

.postup {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 62em) {
  .postup {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .postup__foto {
    position: sticky;
    top: calc(var(--lista) + 2rem);
  }
}

.postup__foto {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--len);
}

.postup__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.postup .vycet {
  margin-top: 0;
}

/* V užším sloupci se řádek skládá na dva díly, ne na tři. */
@media (min-width: 62em) {
  .postup .vycet__polozka {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.3rem clamp(1rem, 2vw, 1.5rem);
    align-items: start;
  }

  .postup .vycet__polozka::before {
    grid-row: span 2;
    padding-top: 0.4rem;
  }

  .postup .vycet__polozka span {
    max-width: 60ch;
  }
}

/*
 * Očíslované řádky. Čísla dopisuje CSS počitadlo, v HTML nejsou:
 * když se řádek přidá nebo ubere, číslování si sedne samo.
 */
.vycet {
  counter-reset: vycet;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--linka);
}

.vycet__polozka {
  counter-increment: vycet;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.3rem clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--linka);
}

.vycet__polozka::before {
  content: counter(vycet, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 0.4rem;
  color: var(--cervena);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 62em) {
  .vycet__polozka {
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: baseline;
    gap: 0 clamp(1.5rem, 4vw, 4rem);
  }

  .vycet__polozka::before {
    grid-row: auto;
    padding-top: 0;
  }
}

.vycet__polozka strong {
  color: var(--inkoust);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.vycet__polozka span {
  display: block;
  max-width: 52ch;
  color: var(--inkoust-3);
  font-size: var(--t-small);
  line-height: 1.6;
}

/* --------------------------------------------------------------------
 * Doklady
 *
 * Tenký pás mezi vlasovými linkami. Žádný nadpis, žádná mřížka karet,
 * jen čtyři údaje, které si každý může ověřit sám. Konkurence v oboru
 * mává čísly typu „500 spokojených zákazníků", což nikdo neověří a
 * čtenář to ví. Slabší tvrzení a silnější doklad.
 * ----------------------------------------------------------------- */

.doklady {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linka-silna);
}

@media (min-width: 48em) {
  .doklady {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75em) {
  .doklady {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.doklady__polozka {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-right: clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--linka);
}

@media (min-width: 75em) {
  .doklady__polozka {
    border-bottom: none;
  }
}

.doklady__nazev {
  color: var(--inkoust-3);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.doklady__hodnota {
  color: var(--inkoust);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Registrační číslo projektu je dlouhé, v běžném stupni by se zlomilo. */
.doklady__hodnota--kod {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0;
}

.doklady__zdroj {
  color: var(--inkoust-3);
  font-size: var(--t-small);
}

/* --------------------------------------------------------------------
 * Dekory
 *
 * Dvojice pojem a popis pod vlasovou linkou. Vypadá jako výpis
 * z katalogu materiálů, což přesně je.
 * ----------------------------------------------------------------- */

.dekory {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 40em) {
  .dekory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75em) {
  .dekory {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dekory__polozka {
  min-width: 0;
}

/*
 * Vzorník. U každého dekoru stojí fotka, na které je vidět. Seznam
 * názvů beze všeho by u materiálu, který si člověk vybírá očima,
 * neřekl vůbec nic.
 */
.dekory__ram {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1rem;
  background-color: var(--len);
}

.dekory__ram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dekory__polozka dt {
  padding-top: 0.875rem;
  border-top: 1px solid var(--linka);
}

.dekory dt {
  color: var(--inkoust);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dekory dd {
  margin-top: 0.4rem;
  color: var(--inkoust-3);
  font-size: var(--t-small);
  line-height: 1.6;
}

/* ====================================================================
 * 10. KARTY SLUŽEB
 *
 * Stejně široké karty ve dvou sloupcích: fotka nahoře, pod ní název,
 * věta a výčet. Všechny mají stejný poměr stran i stejnou linku nahoře,
 * takže mřížka je souměrná a nic z ní nevyčnívá.
 * ==================================================================== */

.karty {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 48em) {
  .karty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Tři karty vedle sebe. Mezi tabletem a notebookem se vrací do jednoho
 * sloupce, dvě vedle sebe a třetí sama pod nimi by řadu rozbily.
 */
@media (min-width: 48em) and (max-width: 61.99em) {
  .karty--tri {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 62em) {
  .karty--tri {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.karta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--linka);
}

.karta__ram {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--len);
}

.karta__ram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.karta__telo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.karta__nazev {
  color: var(--inkoust);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.karta__nazev a {
  text-decoration: none;
}

.karta__nazev a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.karta__popis {
  color: var(--inkoust-2);
}

/* Výčet toho, co je součástí. Vlasové linky místo odrážek. */
.karta__body {
  display: grid;
  gap: 0;
  width: 100%;
}

.karta__body li {
  padding-block: 0.6rem;
  border-top: 1px solid var(--linka);
  color: var(--inkoust-3);
  font-size: var(--t-small);
}

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

/* Odkaz drží dno karty, ať jsou karty s různě dlouhým textem srovnané. */
.karta .odkaz-sipka {
  margin-top: auto;
}

/* ====================================================================
 * NABÍDKA DO STRANY
 *
 * Pás s nabídkou na úvodní stránce. Základ je obyčejný vodorovný pás
 * se zarážkami, kterým se listuje prstem, kolečkem se Shiftem nebo
 * klávesnicí. Na širokém displeji skript sekci přišpendlí k oknu
 * (třída je-pripnuta) a rolování dolů pás posouvá do strany.
 * ==================================================================== */

.nabidka {
  --nabidka-mezera: clamp(1.25rem, 2.4vw, 2.5rem);
  --nabidka-dil: min(78vw, 24rem);
}

.nabidka__okno {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.nabidka__okno::-webkit-scrollbar {
  display: none;
}

.nabidka__okno:focus-visible {
  outline-offset: -3px;
}

.nabidka__pas {
  display: flex;
  gap: var(--nabidka-mezera);
  width: max-content;
  padding: 0 var(--pad);
  list-style: none;
}

/* Na obřím displeji začíná pás tam, kde obsah, ne u kraje okna. */
@media (min-width: 97.5em) {
  .nabidka__pas {
    padding-inline: calc((100vw - var(--sirka)) / 2 + var(--pad));
  }
}

.nabidka__dil {
  position: relative;
  display: flex;
  flex: 0 0 var(--nabidka-dil);
  flex-direction: column;
  gap: 1.25rem;
  scroll-snap-align: start;
}

.nabidka__ram {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--len);
}

.nabidka__ram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: transform var(--doba) var(--krivka);
}

.nabidka__dil:hover .nabidka__ram img {
  transform: scale(1.03);
}

.nabidka__telo {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.nabidka__cislo {
  color: var(--inkoust-3);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
}

.nabidka__nazev {
  color: var(--inkoust);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.nabidka__nazev a {
  text-decoration: none;
}

/* Klikací je celý díl, fotka i text, přes jediný odkaz v nadpisu. */
.nabidka__nazev a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.nabidka__popis {
  max-width: 34ch;
  color: var(--inkoust-2);
  font-size: var(--t-small);
}

.nabidka__pata {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Ukazatel, kolik z pásu už odjelo. Vidět je jen u přišpendlené sekce. */
.nabidka__prubeh {
  display: none;
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--linka);
}

.nabidka__prubeh span {
  display: block;
  height: 100%;
  background-color: var(--inkoust);
  transform: scaleX(0);
  transform-origin: left center;
}

.nabidka__pata .tlacitko {
  margin-left: auto;
}

/*
 * Přišpendlená podoba. Výšku sekce nastaví skript podle délky pásu,
 * lepidlo drží na místě a pás se posouvá transformací. Velikost dílu
 * se odvíjí od výšky okna, aby se fotka i text vešly na obrazovku.
 */
.nabidka.je-pripnuta {
  padding-block: 0;
}

.nabidka.je-pripnuta .nabidka__lepidlo {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  padding-top: var(--lista);
  padding-bottom: clamp(1.25rem, 3vh, 2.5rem);
  overflow: hidden;
}

.nabidka.je-pripnuta .hlava {
  padding-top: clamp(1.25rem, 2.5vh, 2.5rem);
}

/*
 * Okno pásu zabere, co na obrazovce zbude pod nadpisem, a fotka se
 * roztáhne do jeho výšky. Na nízkém okně je fotka jen nižší, text
 * pod ní se nikdy neuřízne.
 */
.nabidka.je-pripnuta .nabidka__okno {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  scroll-snap-type: none;
  margin-top: clamp(1.25rem, 3.5vh, 3rem);
}

.nabidka.je-pripnuta .nabidka__pas {
  height: 100%;
  will-change: transform;
}

.nabidka.je-pripnuta .nabidka__dil {
  height: 100%;
}

/* Text má pevnou výšku, aby všechny fotky v pásu končily na jedné lince. */
.nabidka.je-pripnuta .nabidka__telo {
  flex: 0 0 13.5rem;
  align-content: start;
}

.nabidka.je-pripnuta .nabidka__telo .odkaz-sipka {
  align-self: end;
}

.nabidka.je-pripnuta .nabidka__ram {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

.nabidka.je-pripnuta {
  --nabidka-dil: clamp(17rem, 24vw, 25rem);
}

.nabidka.je-pripnuta .nabidka__pata {
  margin-top: clamp(1.25rem, 3vh, 2.5rem);
}

.nabidka.je-pripnuta .nabidka__prubeh {
  display: block;
}

/* Na nízkém okně ustoupí nadpis a mezery, aby zbylo místo fotkám. */
@media (max-height: 52em) {
  .nabidka.je-pripnuta .velky {
    font-size: clamp(1.875rem, 7.5vh, 3.5rem);
  }

  .nabidka.je-pripnuta .hlava__text {
    font-size: var(--t-body);
  }

  .nabidka.je-pripnuta .nabidka__okno {
    margin-top: 1.25rem;
  }

  .nabidka.je-pripnuta .nabidka__dil {
    gap: 0.875rem;
  }

  .nabidka.je-pripnuta .nabidka__telo {
    flex-basis: 11.5rem;
    gap: 0.5rem;
  }

  .nabidka.je-pripnuta .nabidka__nazev {
    font-size: 1.375rem;
  }
}

/* ====================================================================
 * 11. PÁS S FOTKOU
 *
 * Jedna fotka přes celou šířku okna mezi dvěma sekcemi. Nemá text ani
 * tlačítko, je to nadechnutí, aby stránka nebyla jen řada bloků.
 * ==================================================================== */

.pas-foto-obal {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.pas-foto {
  position: relative;
  overflow: hidden;
  height: clamp(16rem, 46vw, 34rem);
  background-color: var(--len);
}

.pas-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Popisek stojí pod fotkou na papírové ploše, ne na ní. Přes fotku by
 * potřeboval závoj nebo stín a web nemá ani jedno.
 */
/*
 * Popisek dědí z .popisek flexbox, takže text je v něm anonymní
 * položkou a text-align na něj nesedá. Doprava ho posadí až
 * justify-content.
 */
.pas-foto__popisek {
  justify-content: flex-end;
  max-width: var(--sirka);
  margin-inline: auto;
  padding: 1rem var(--pad) 0;
  color: var(--inkoust-3);
}

.pas-foto__popisek::before {
  display: none;
}

/* --------------------------------------------------------------------
 * Posuvník
 *
 * Vodorovný pás, kterým se listuje. Je to obyčejná rolovatelná plocha
 * se zarážkami, takže funguje prstem, kolečkem i klávesnicí sám od sebe.
 * Skript k němu jen dokresluje šipky a hlídá, kdy jsou na kraji.
 * Bez skriptu zůstane rolovatelný pás, jen bez šipek.
 * ----------------------------------------------------------------- */

.posuvnik {
  --posuvnik-mezera: clamp(1rem, 2.2vw, 2rem);
  --posuvnik-dil: min(82%, 26rem);
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 48em) {
  .posuvnik {
    --posuvnik-dil: calc((100% - var(--posuvnik-mezera)) / 2);
  }
}

@media (min-width: 75em) {
  .posuvnik {
    --posuvnik-dil: calc((100% - 2 * var(--posuvnik-mezera)) / 3);
  }
}

.posuvnik__pas {
  display: flex;
  gap: var(--posuvnik-mezera);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  list-style: none;
  /* Posuvník prohlížeče skrýváme, listuje se šipkami a prstem. */
  scrollbar-width: none;
}

.posuvnik__pas::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .posuvnik__pas {
    scroll-behavior: smooth;
  }
}

.posuvnik__dil {
  flex: 0 0 var(--posuvnik-dil);
  scroll-snap-align: start;
  min-width: 0;
}

.posuvnik__ovladani {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.posuvnik__sipka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--linka-silna);
  color: var(--inkoust);
  transition: background-color var(--doba-kratka) var(--krivka),
    border-color var(--doba-kratka) var(--krivka),
    opacity var(--doba-kratka) var(--krivka);
}

.posuvnik__sipka:hover:not(:disabled) {
  border-color: var(--inkoust);
  background-color: var(--inkoust);
  color: var(--papir);
}

.posuvnik__sipka:disabled {
  opacity: 0.3;
  cursor: default;
}

.posuvnik__sipka svg {
  width: 1rem;
  height: 1rem;
}

.posuvnik__kolik {
  margin-left: 0.75rem;
  color: var(--inkoust-3);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/*
 * Posuvník přes celou šířku. Fotky jdou na sraz bez mezer, aby pás
 * držel jako jeden filmový proužek a ne jako řada kartiček.
 */
.posuvnik--pres {
  --posuvnik-mezera: 0px;
  --posuvnik-dil: 78%;
  margin-top: 0;
  background-color: var(--len);
}

@media (min-width: 48em) {
  .posuvnik--pres {
    --posuvnik-dil: 50%;
  }
}

@media (min-width: 62em) {
  .posuvnik--pres {
    --posuvnik-dil: 33.3333%;
  }
}

.posuvnik--pres .posuvnik__ovladani {
  position: absolute;
  right: var(--pad);
  bottom: 1rem;
  margin-top: 0;
}

.posuvnik--pres .posuvnik__sipka {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(16, 16, 16, 0.55);
  color: var(--snih);
}

.posuvnik--pres .posuvnik__sipka:hover:not(:disabled) {
  border-color: var(--snih);
  background-color: var(--snih);
  color: var(--inkoust);
}

/* --------------------------------------------------------------------
 * Pás fotek přes celou šířku
 *
 * Stojí tam, kde by mezi dvěma textovými sekcemi zbyla prázdná plocha.
 * Fotky jdou na sraz bez mezer, aby pás držel jako jeden filmový
 * proužek a ne jako řada kartiček. Rozvržení obstarává posuvník výš,
 * tady se řeší jen tvar a výplň políčka.
 * ----------------------------------------------------------------- */

.pas-tri__dil {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

@media (max-width: 47.99em) {
  .pas-tri__dil {
    aspect-ratio: 4 / 3;
  }
}

.pas-tri__dil img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ====================================================================
 * 12. MŘÍŽKA REALIZACÍ
 *
 * Stejně velké dlaždice, všechny v poměru 4:3. Fotka na výšku se ořízne
 * na střed. Souměrná mřížka je tu důležitější než plný záběr, plnou
 * fotku ukáže prohlížeč po kliknutí.
 * ==================================================================== */

.mrizka {
  display: grid;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 48em) {
  .mrizka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dlazdice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/*
 * Dlaždice na výšku, ne na šířku. Dvě třetiny fotek z dílny jsou na
 * výšku, protože skříně a vysoké sestavy se jinak vyfotit nedají,
 * a v ležatém rámečku z nich zbyl pruh uprostřed. Stojatý formát je
 * navíc klidnější a stránka s ním vypadá jako katalog, ne jako výpis.
 */
.dlazdice__ram {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--len);
}

.dlazdice__ram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.dlazdice__hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.dlazdice__nazev {
  color: var(--inkoust);
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.dlazdice__odkaz {
  color: inherit;
  text-decoration: none;
}

.dlazdice__odkaz::after {
  content: '';
  position: absolute;
  inset: 0;
}

/*
 * V galerii je odkazem sama fotka, otevírá prohlížeč fotek. Zvětšení
 * pod myší tu bylo a je pryč; zbyl kurzor lupy a závoj, který fotku
 * o kousek ztmaví. Tolik stačí, aby bylo poznat, že se dá kliknout.
 */
a.dlazdice__ram {
  cursor: zoom-in;
}

a.dlazdice__ram::after {
  background-color: var(--inkoust);
  opacity: 0;
  transition: opacity var(--doba-kratka) var(--krivka);
}

@media (hover: hover) {
  a.dlazdice__ram:hover::after {
    opacity: 0.1;
  }
}

a.dlazdice__ram:focus-visible::after {
  opacity: 0.1;
}

.dlazdice__popis {
  max-width: 52ch;
  color: var(--inkoust-3);
  font-size: var(--t-small);
}

.mrizka-pata {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ====================================================================
 * 13. ZÁVĚREČNÁ VÝZVA
 * ==================================================================== */

.vyzva {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: end;
}

@media (min-width: 62em) {
  .vyzva {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 7vw, 7rem);
  }
}

.vyzva__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.vyzva__telefon {
  color: var(--inkoust);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: var(--weight-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

/* ====================================================================
 * 14. KONTAKT, MAPA A HODNOCENÍ
 * ==================================================================== */

.kontakt-mrizka {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (min-width: 40em) {
  .kontakt-mrizka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62em) {
  .kontakt-mrizka {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/*
 * Adresa ani e-mail se nedají zlomit v každém místě a nesou si vlastní
 * vnitřní šířku. Bez `min-width: 0` by roztáhly sloupec mřížky a užší
 * telefony by přetékaly do strany.
 */
.kontakt-mrizka > * {
  min-width: 0;
}

.kontakt-radek {
  padding-top: 1.25rem;
  border-top: 1px solid var(--linka);
  overflow-wrap: break-word;
}

.kontakt-radek__hlavni {
  display: block;
  margin-top: 0.45rem;
  padding-block: 0.25rem; /* dotyková plocha, telefon i e-mail se ťukají */
  color: var(--inkoust);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.0625rem, 0.9rem + 0.7vw, 1.375rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

a.kontakt-radek__hlavni:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/*
 * E-mail je jediný údaj, který se do čtvrtiny řádku nevejde v plné
 * velikosti a lámal se uprostřed slova. Menší stupeň ho udrží vcelku.
 */
.kontakt-radek__hlavni--email {
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
  letter-spacing: -0.005em;
}

.kontakt-radek p {
  margin-top: 0.5rem;
  color: var(--inkoust-2);
}

.doba {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.7rem;
  list-style: none;
}

.doba__radek {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--inkoust-2);
  font-size: var(--t-small);
}

.kontakt-pata {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--linka);
}

/* --------------------------------------------------------------------
 * Mapa
 *
 * Obrázek, ne vložený rámec z cizího serveru. Vyrábí ho nástroj
 * nastroje/vyrob-mapu.mjs a leží u nás, takže prohlížeč při návštěvě
 * nikam ven nesahá a mapa se vykreslí vždycky správně. Kliknutím se
 * otevřou mapy s navigací.
 * ----------------------------------------------------------------- */

.mapa {
  background-color: var(--kost);
}

.mapa__ram {
  position: relative;
  display: block;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-block: 1px solid var(--linka);
  background-color: var(--len);
}

@media (max-width: 47.99em) {
  .mapa__ram {
    aspect-ratio: 4 / 3;
  }
}

.mapa__ram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Jemný bílý závoj srovná mapu s bílou škálou webu. */
.mapa__ram::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--snih);
  opacity: 0.14;
  pointer-events: none;
  transition: opacity var(--doba) var(--krivka);
}

.mapa__ram:hover::after {
  opacity: 0;
}

.mapa__odkaz {
  position: absolute;
  right: var(--pad);
  bottom: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-inline: 1rem;
  border: 1px solid var(--inkoust);
  background-color: var(--snih);
  color: var(--inkoust);
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (min-width: 48em) {
  .mapa__odkaz {
    bottom: 1.25rem;
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    font-size: var(--t-small);
  }
}

.mapa__popisek {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  max-width: var(--sirka);
  margin-inline: auto;
  padding: 1rem var(--pad) 1.5rem;
}

.mapa__zdroj {
  color: var(--inkoust-3);
}

/* --------------------------------------------------------------------
 * Hvězdičky a hodnocení
 *
 * Plné hvězdy leží v přesně odměřeném výřezu nad prázdnými, takže
 * průměr 4,8 vypadá jako 4,8 a ne jako pět.
 * ----------------------------------------------------------------- */

.hvezdy {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
}

/*
 * Obrázky mají v základu `display: block`, hvězdy se bez tohohle řádku
 * poskládají pod sebe do sloupce místo do řady.
 */
.hvezdy svg {
  display: inline-block;
  vertical-align: top;
  width: 1em;
  height: 1em;
}

.hvezdy .hvezda {
  fill: currentColor;
}

.hvezdy__prazdne {
  color: var(--popel);
}

.hvezdy__plne {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  overflow: hidden;
  color: var(--inkoust);
}

.hodnoceni {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.hodnoceni__cislo {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.hodnoceni .hvezdy {
  font-size: 1.25rem;
}

.hodnoceni__zdroj {
  color: var(--inkoust-3);
  font-size: var(--t-small);
}

.citat {
  max-width: 32ch;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: center;
}

.citat__text {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.citat__autor {
  display: block;
  margin-top: 1.25rem;
  color: var(--inkoust-3);
  font-size: var(--t-small);
  font-style: normal;
}

.hodnotitele {
  display: grid;
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border: 1px solid var(--linka);
  background-color: var(--linka);
  list-style: none;
}

@media (min-width: 40em) {
  .hodnotitele {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62em) {
  .hodnotitele {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hodnotitel {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.6rem;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) 1rem;
  background-color: var(--snih);
  text-align: center;
}

.hodnotitel .hvezdy {
  font-size: 0.875rem;
}

.hodnotitel__jmeno {
  color: var(--inkoust);
  font-size: var(--t-small);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------
 * Publicitní deska dotace na stránce O dílně
 *
 * Deska vlevo, text vpravo. Text má omezenou míru, bez ní by se na
 * širokém displeji roztáhl na jeden řádek přes celý obal a vedle desky
 * by zbylo přes tisíc pixelů prázdna.
 * ----------------------------------------------------------------- */

.certifikat {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 48em) {
  .certifikat {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: start;
  }
}

.certifikat__deska {
  border: 1px solid var(--linka);
  background-color: var(--snih);
}

.certifikat__deska img {
  width: 100%;
  height: auto;
}

.certifikat__text > * + * {
  margin-top: 1rem;
}

.certifikat__text p {
  max-width: 62ch;
  color: var(--inkoust-2);
}

.certifikat__text h3 {
  color: var(--inkoust);
}

.certifikat__cislo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-wrap: anywhere;
}

/* ====================================================================
 * 15. PATIČKA
 * ==================================================================== */

.pata {
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.pata__horni {
  display: grid;
  gap: 2.5rem;
}

/*
 * Dva sloupce na tabletu, čtyři až od notebooku. Na 768 px měl sloupec
 * 149 px a lámal se v něm podtitul značky i položky menu.
 */
@media (min-width: 40em) {
  .pata__horni {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
  }
}

@media (min-width: 62em) {
  .pata__horni {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pata__blok h3 {
  margin-bottom: 0.875rem;
}

.pata__blok p,
.pata__blok li {
  color: var(--inkoust-3);
  font-size: var(--t-small);
  line-height: 1.7;
}

/*
 * Lámat uprostřed slova smí jen e-mail. Kdyby to platilo pro celou
 * patičku, rozpadl by se v úzkém sloupci i běžný text.
 */
.pata__blok .lomitelne {
  overflow-wrap: anywhere;
}

.pata__blok a {
  text-decoration: none;
}

.pata__blok a:hover {
  text-decoration: underline;
}

.pata__znacka {
  max-width: 34ch;
}

.pata__znacka .znacka {
  margin-bottom: 1rem;
}

/*
 * Publicita dotace. Musí být vidět, ale nepřebíjí obsah. Na úzkém
 * displeji stojí vlajka nad textem: vedle textu by ji svislé vystředění
 * posadilo doprostřed desetiřádkového odstavce.
 */
.dotace {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--linka);
}

@media (min-width: 30em) {
  .dotace {
    flex-direction: row;
    align-items: center;
  }
}

.dotace__vlajka {
  flex: none;
  width: 3.5rem;
  height: auto;
}

.dotace p {
  max-width: 68ch;
  color: var(--inkoust-3);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.pata__spodni {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linka);
  color: var(--inkoust-3);
  font-size: 0.8125rem;
}

.pata__spodni a {
  text-decoration: none;
}

.pata__spodni a:hover {
  text-decoration: underline;
}

/*
 * Podpis autora webu. Drží se vpravo u odkazu na ochranu údajů, aby se
 * tři položky v řádku nerozjely do stran. Na úzkém displeji se zalomí pod.
 */
.pata__autor {
  margin-left: auto;
}

@media (max-width: 40em) {
  .pata__autor {
    margin-left: 0;
  }
}

/* ====================================================================
 * 16. ZÁHLAVÍ PODSTRÁNKY
 * ==================================================================== */

.zahlavi {
  padding-block: calc(var(--lista) + clamp(3rem, 7vw, 6rem)) clamp(2rem, 4vw, 3rem);
}

.zahlavi h1 {
  max-width: 18ch;
}

.zahlavi p {
  margin-top: 1.25rem;
  max-width: 50ch;
  font-size: var(--t-lead);
}

/* Drobečky. Ukazují, kde návštěvník je, a vedou zpátky nahoru. */
.drobecky {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--inkoust-3);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*
 * Drobečky jsou vysázené malým písmem, ale prstem se na ně musí dát
 * trefit. Minimální výška dává odkazu dotykovou plochu, aniž by se
 * změnila velikost písma.
 */
.drobecky a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  text-decoration: none;
}

.drobecky a:hover {
  color: var(--inkoust);
}

.drobecky span {
  opacity: 0.5;
}

/*
 * Drobečky nad fotkou. Tmavá varianta by na fotce nebyla vidět.
 * Ztlumení, které mají drobečky na bílém pozadí, se tu ruší: přes
 * světlé místo fotky by z názvu stránky zbyl stín.
 *
 * Blok musí stát AŽ ZA obecnými drobečky. Má s nimi stejnou závažnost
 * a v CSS pak rozhoduje pořadí v souboru.
 */
.drobecky--svetle {
  color: rgba(255, 255, 255, 0.92);
}

.drobecky--svetle a,
.drobecky--svetle span {
  color: inherit;
  opacity: 1;
}

.drobecky--svetle [aria-hidden='true'] {
  opacity: 0.6;
}

.drobecky--svetle a:hover,
.drobecky--svetle [aria-current] {
  color: var(--snih);
}

/*
 * Pás s filtrem kategorií. Leží hned pod úvodní obrazovkou a dělá
 * přechod z fotky do galerie. Linka dole odděluje filtr od dlaždic.
 */
.filtr-pas {
  border-bottom: 1px solid var(--linka);
}

.filtr-pas .filtr {
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: 0;
}

.galerie-obal {
  padding-bottom: var(--sekce);
}

/* Dokument, který začíná rovnou pod úvodní obrazovkou. */
.dokument--prvni {
  padding-block: clamp(3rem, 7vw, 6rem) var(--sekce);
}

.galerie-obal .galerie {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Filtr kategorií na stránce realizací. */
.filtr {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding-top: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linka);
}

.filtr a {
  position: relative;
  padding-block: 0.35rem;
  color: var(--inkoust-3);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
}

.filtr a:hover,
.filtr a[aria-current='page'] {
  color: var(--inkoust);
}

.filtr a[aria-current='page']::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: var(--inkoust);
}

.filtr__pocet {
  margin-left: 0.4rem;
  color: var(--inkoust-3);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/*
 * Galerie realizací. Stejně velké dlaždice ve třech sloupcích, všechny
 * ve stejném poměru stran. Fotky na výšku se ořežou na střed: souměrná
 * mřížka je tu důležitější než plný záběr, plnou fotku ukáže prohlížeč
 * po kliknutí.
 */
.galerie {
  display: grid;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 40em) {
  .galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75em) {
  .galerie {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.prazdno {
  padding-block: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--linka);
  color: var(--inkoust-3);
}

/* ====================================================================
 * 17. TEXTOVÁ STRÁNKA
 * ==================================================================== */

.dokument {
  max-width: 68ch;
  padding-bottom: var(--sekce);
}

.dokument h2 {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 0.875rem;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
}

.dokument h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.dokument p,
.dokument li {
  margin-bottom: 0.875rem;
  color: var(--inkoust-2);
}

.dokument ul {
  margin-bottom: 1.25rem;
  padding-left: 1.2rem;
  list-style: disc;
}

/* ====================================================================
 * 18. LIGHTBOX
 * ==================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem;
  background-color: rgba(16, 16, 16, 0.97);
  opacity: 0;
  transition: opacity var(--doba-kratka) var(--krivka);
}

.lightbox.je-otevren {
  opacity: 1;
}

.lightbox__lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.lightbox__pocet {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.lightbox__scena {
  position: relative;
  min-height: 0;
}

/*
 * Fotka stojí v absolutní pozici schválně. Scéna je položkou gridu
 * v řádce minmax(0, 1fr) a v takové řádce se procentní max-height
 * běžnému obrázku nemá z čeho spočítat, takže fotka na výšku přeteče
 * přes spodní okraj obrazovky. Absolutní pozice dá procentům pevnou
 * výšku scény a čtveřice nul s margin: auto fotku vystředí.
 */
.lightbox__scena img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  opacity: 0;
  transition: opacity var(--doba-kratka) var(--krivka);
}

.lightbox__scena img.je-nacteny {
  opacity: 1;
}

.lightbox__pata {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--t-small);
}

.lightbox__popis {
  max-width: 60ch;
}

/*
 * Na úzkém displeji jde popisek přes celou šířku a šipky pod něj.
 * Vedle sebe zbylo na text 168 px a rozpadl se na jedenáct řádků, ze
 * kterých byla víc než třetina obrazovky.
 */
@media (max-width: 30em) {
  .lightbox__pata {
    flex-wrap: wrap;
  }

  .lightbox__popis {
    width: 100%;
  }

  .lightbox__ovladani {
    margin-left: auto;
  }
}

/*
 * Na nízkém displeji, typicky telefon na šířku, se lišta i popisek
 * položí přes fotku. Kdyby si braly vlastní řádky, zbylo by na fotku
 * 178 px a z fotky na výšku by byla poštovní známka.
 */
@media (max-height: 34em) {
  .lightbox {
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
    gap: 0;
  }

  .lightbox__lista,
  .lightbox__pata {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    padding: 0.75rem 1rem;
  }

  .lightbox__lista {
    top: 0;
    background-color: rgba(16, 16, 16, 0.82);
  }

  .lightbox__pata {
    bottom: 0;
    align-items: flex-end;
    background-color: rgba(16, 16, 16, 0.82);
  }

  .lightbox__popis {
    max-width: 48ch;
    font-size: 0.8125rem;
  }
}

.lightbox__ovladani {
  display: flex;
  gap: 0.5rem;
}

.lb-tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  transition: border-color var(--doba-kratka) var(--krivka),
    background-color var(--doba-kratka) var(--krivka);
}

.lb-tlacitko:hover {
  border-color: var(--snih);
  background-color: rgba(255, 255, 255, 0.12);
}

.lb-tlacitko svg {
  width: 1.1rem;
  height: 1.1rem;
}

.lb-tlacitko:focus-visible {
  outline-color: var(--snih);
}

/* ====================================================================
 * 19. POHYB
 *
 * Web nic neanimuje. Obsah je na stránce od začátku, fotky stojí,
 * nikde nic nenajíždí ani nepřelíná. Přechody zůstaly jen tam, kde je
 * vyvolá člověk: barva odkazu a tlačítka, menu na mobilu, prohlížeč
 * fotek. Pravidlo níž je pro ty, kdo mají pohyb omezený v systému,
 * a vypne i tohle.
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====================================================================
 * 19. TMAVÉ PLOCHY
 *
 * Dvě tmavé plochy na celém webu: hodnocení uprostřed stránky a závěr
 * s patičkou. Fungují jako předěl a jako rám. Bez nich byla stránka
 * jeden dlouhý list papíru a všechny sekce měly stejnou váhu.
 *
 * Tmavá plocha je plný inkoust, žádný přechod. Fotku pod sebou má jen
 * tam, kde je zadaná, a i ta je ztlumená plným tónem. Přes to všechno
 * leží jemné zrno: bez něj působí velká inkoustová plocha na obrazovce
 * jako plast, s ním jako papír.
 * ==================================================================== */

.sekce--tma,
.pata {
  --plocha-text: var(--papir);
  --plocha-text-2: rgba(246, 244, 241, 0.82);
  --plocha-text-3: rgba(246, 244, 241, 0.68);
  --plocha-linka: rgba(246, 244, 241, 0.16);
  --plocha-linka-silna: rgba(246, 244, 241, 0.34);
  isolation: isolate;
  background-color: var(--inkoust);
  color: var(--plocha-text-2);
}

.sekce--tma::before,
.pata::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/*
 * Patička stojí nejčastěji hned pod tmavou výzvou. Vlasová linka nahoře
 * je od ní oddělí, jinak by obě splynuly v jednu plochu bez hrany.
 */
.pata {
  position: relative;
  border-top: 1px solid var(--plocha-linka);
}

/* Fotka pod tmavou sekcí. Plný tón ji ztlumí na strukturu v pozadí. */
.sekce__pozadi {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.sekce__pozadi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sekce__pozadi::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(16, 16, 16, 0.82);
}

.sekce--tma h2,
.sekce--tma h3,
.sekce--tma .velky,
.sekce--tma .hodnoceni__cislo,
.sekce--tma .citat__text,
.sekce--tma .hodnotitel__jmeno,
.sekce--tma .vyzva__telefon,
.pata h3,
.pata .znacka {
  color: var(--plocha-text);
}

.sekce--tma .hlava {
  border-top-color: var(--plocha-linka);
}

.sekce--tma .hlava__text,
.sekce--tma .lead {
  color: var(--plocha-text-2);
}

.sekce--tma .hodnoceni__zdroj,
.sekce--tma .citat__autor,
.sekce--tma .popisek,
.pata .pata__blok p,
.pata .pata__blok li,
.pata .dotace p,
.pata .pata__spodni {
  color: var(--plocha-text-3);
}

.sekce--tma a {
  color: inherit;
  text-decoration-color: var(--plocha-linka-silna);
}

.sekce--tma a:hover {
  color: var(--plocha-text);
  text-decoration-color: var(--plocha-text);
}

.sekce--tma .hvezdy__prazdne {
  color: rgba(246, 244, 241, 0.22);
}

.sekce--tma .hvezdy__plne {
  color: var(--plocha-text);
}

.sekce--tma .hodnotitele {
  border-color: var(--plocha-linka);
  background-color: var(--plocha-linka);
}

.sekce--tma .hodnotitel {
  background-color: var(--inkoust);
}

/* Tlačítko na inkoustu se obrací: světlá plocha, značkový popisek. */
.sekce--tma .tlacitko {
  border-color: var(--papir);
  background-color: var(--papir);
  color: var(--cervena);
}

.sekce--tma .tlacitko:hover {
  background-color: var(--cervena);
  border-color: var(--cervena);
  color: var(--snih);
}

.sekce--tma .vyzva__telefon {
  text-decoration-color: var(--plocha-linka-silna);
}

/* Patička na inkoustu: světlé texty a světlé vlasové linky. */
.pata .pata__blok a:hover,
.pata .pata__spodni a:hover,
.pata .dotace a:hover {
  color: var(--plocha-text);
}

.pata .dotace,
.pata .pata__spodni {
  border-top-color: var(--plocha-linka);
}

.pata .dotace strong {
  color: var(--plocha-text-2);
}

/* ====================================================================
 * 20. TISK
 * ==================================================================== */

@media print {
  .lista,
  .panel,
  .lightbox,
  .mapa__ram {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .uvod {
    min-height: auto;
  }
}