.hero {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: var(--s5);
  align-items: center;
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: var(--s4);
}

.hero__lede {
  font-size: var(--t-m);
  max-width: 28ch;
  margin: var(--s3) 0 var(--s4);
}

.kalkulacka {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
}

.kalkulacka__pole label {
  display: block;
  margin-bottom: var(--s1);
}

.kalkulacka__pole input {
  width: 5em;
  border: 0;
  border-bottom: 2px solid var(--tus);
  background: transparent;
  color: var(--tus);
  font-size: var(--t-l);
  padding: 4px 0;
}

.kalkulacka__vysledek {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  max-width: 24ch;
}

.kalkulacka__vysledek output {
  font-size: var(--t-l);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* Hláška o nevycházejícím rozměru není cena — nesmí ji tedy ani sázet
   jako cenu, jinak roztlačí hero sekci na tři řádky. */
.kalkulacka__vysledek output.nevychazi {
  font-size: var(--t-s);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tlum);
}

.akce {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  flex-basis: 100%;
  margin-top: var(--s2);
}

.odkaz-druhy span {
  display: block;
}

.hero__foto {
  position: relative;
  margin: 0;
}

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

.hero__foto .razitko {
  position: absolute;
  left: 0;
  bottom: var(--s4);
}

.realizace {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: var(--s5) var(--s4);
}

.realizace__mrizka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  list-style: none;
  padding: 0;
  margin: var(--s4) 0 0;
}

/* `height: auto` tu není kosmetika, ale nutnost.

   Atributy width/height v šabloně se v prohlížeči mapují na presentational
   hints, tedy na `width: 1600px` a `height: 1000px`. Selektor přebíjel jen
   width; height zůstal na 1000 px, a protože obě míry byly určité, prohlížeč
   `aspect-ratio` zahodil. Dlaždice se pak vykreslovaly 370 × 1000 px.

   Poměr 16 : 10 je nativní poměr fotek. Nic se neořízne a atributy se s CSS
   shodnou, takže při načítání nic neposkočí (§16.3). `object-fit` je pojistka
   pro fotku, která by jednou přišla v jiném poměru. */
.realizace__mrizka img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Jediné tmavé pásmo na papírové stránce. --syta byla do téhle chvíle
   v tokenech deklarovaná a nikde v projektu použitá — tohle je její místo.

   Barvy si tu prohodí role. Na papíru --linka kreslí a --tlum mluví; na
   --syta je to naopak. --tlum má na sytém podkladu kontrast jen 2,2 : 1,
   což na text nestačí, ale na dělicí linku ano. --linka má 9,4 : 1 a text
   unese. Nadpis a hlavní řádek jdou v --papir, tedy 12 : 1. */
.zblizka {
  background: var(--syta);
  color: var(--papir);
}

.zblizka__vnitrek {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: var(--s5) var(--s4);
}

.zblizka__mrizka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: var(--s4) 0 0;
}

.zblizka__pole {
  padding: 0 var(--s4);
  border-left: 1px solid var(--tlum);
}

.zblizka__pole:first-child {
  padding-left: 0;
  border-left: 0;
}

.zblizka .navest {
  color: var(--linka);
}

.zblizka__hodnota {
  margin: var(--s2) 0 0;
}

.zblizka__hlavni {
  font-size: var(--t-m);
  font-weight: 600;
  line-height: 1.3;
}

.zblizka__detail {
  margin-top: var(--s1);
  color: var(--linka);
  font-size: var(--t-s);
}

/* Nabídka výjezdu (§7.3). Stojí až za mřížkou a v tlumené barvě sytého
   pruhu — je to poslední zastávka pro pár lidí, ne třetí cesta pro všechny.
   Odkaz musí být v --papir; --linka by na text ještě stačila, ale odkaz se
   má od okolní věty odlišit, ne s ní splynout. */
/* Bez dělicí linky. Míra řádku ji drží na 62 znacích, takže by končila
   uprostřed stránky a vypadala jako nedokreslená; oddělit stačí mezera. */
.zblizka__dovetek {
  margin-top: var(--s5);
  color: var(--linka);
  font-size: var(--t-s);
  max-width: 62ch;
}

.zblizka__dovetek .odkaz-druhy {
  color: var(--papir);
  border-bottom-color: var(--papir);
  /* Dotykový cíl 44 px (§16.2) — inline odkaz uvnitř věty by měl 23. */
  display: inline-block;
  padding: 10px 0;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--s4);
    padding: var(--s3);
  }

  .hero__foto .razitko {
    position: static;
    margin-top: calc(var(--s2) * -1);
  }

  .realizace__mrizka {
    grid-template-columns: 1fr;
  }

  /* Ve sloupci dělí pole vodorovná linka, ne svislá.

     Mezera musí být nad linkou i pod ní. Se samotným padding-top linka
     nasedla na poslední řádek předchozího pole a četla se jako jeho
     podtržení, ne jako předěl. */
  .zblizka__vnitrek {
    padding: var(--s4) var(--s3);
  }

  .zblizka__mrizka {
    grid-template-columns: 1fr;
  }

  .zblizka__pole {
    margin-top: var(--s3);
    padding: var(--s3) 0 0;
    border-left: 0;
    border-top: 1px solid var(--tlum);
  }

  .zblizka__pole:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}