/* Komponenty a sekce. Promenne a reset jsou v base.css. */

/* --- loader ---------------------------------------------------------------- */
/* Ukazuje se jen jednou za session a nikdy neblokuje obsah: po dofadovani ma
   pointer-events: none a JS mu da tvrdy timeout. */

.loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: var(--pozadi);
  opacity: 1;
  transition: opacity 420ms ease;
}

.loader-bezi .loader {
  display: flex;
}

.loader--pryc {
  opacity: 0;
  pointer-events: none;
}

/* Znacka se odkryva zdola nahoru, stejny pohyb jako hero. Puvodni loader
   obkresloval obrys stroke-dashoffsetem, jenze nova znacka je plocha, ne obrys. */
.loader__znacka {
  display: block;
  width: min(38vw, 190px);
  clip-path: inset(100% 0 0 0);
  animation: odkryj 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.loader__znacka img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes odkryj {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.loader__nazev {
  font-family: var(--pismo-mono);
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--text-tlumeny);
  opacity: 0;
  animation: nazev-in 500ms ease 480ms forwards;
}

@keyframes nazev-in {
  to {
    opacity: 1;
  }
}

/* --- hlavicka -------------------------------------------------------------- */

.hlavicka {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  transition: background-color var(--prechod), border-color var(--prechod), backdrop-filter var(--prechod);
  border-bottom: 1px solid transparent;
}

.hlavicka[data-prilepena] {
  background: color-mix(in srgb, var(--pozadi) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linka);
}

.hlavicka__obal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

/* Nove logo je jen dum, bez napisu. Nazev proto sazim pismem webu - vyjde
   ostreji nez vektorizovany text a drzi se nadpisu. */
.hlavicka__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--text);
}

.hlavicka__znacka {
  height: 2.1rem;
  width: auto;
}

.hlavicka__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1;
}

.navigace {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.navigace ul {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.navigace a {
  position: relative;
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
}

.navigace ul a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 2px;
  background: var(--akcent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--prechod);
}

.navigace ul a:hover::after,
.navigace ul a:focus-visible::after,
.navigace ul a[aria-current="page"]::after {
  transform: scaleX(1);
}

.navigace ul a[aria-current="page"] {
  color: var(--akcent);
}

.menu-prepinac {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  margin-right: -0.5rem;
}

/* Tri cary: prostredni je samotny prvek, krajni pseudoprvky. */
.menu-prepinac__cary,
.menu-prepinac__cary::before,
.menu-prepinac__cary::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--text);
  transition: transform var(--prechod), opacity 120ms linear;
}

.menu-prepinac__cary::before,
.menu-prepinac__cary::after {
  content: "";
  position: relative;
}

.menu-prepinac__cary::before {
  top: -8px;
}

.menu-prepinac__cary::after {
  top: 6px;
}

.menu-prepinac[aria-expanded="true"] .menu-prepinac__cary {
  background: transparent;
}

.menu-prepinac[aria-expanded="true"] .menu-prepinac__cary::before {
  transform: translateY(8px) rotate(45deg);
}

.menu-prepinac[aria-expanded="true"] .menu-prepinac__cary::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- tlacitka -------------------------------------------------------------- */

.tlacitko {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--akcent);
  color: var(--akcent);
  text-decoration: none;
  transition: background-color var(--prechod), color var(--prechod);
}

.tlacitko:hover,
.tlacitko:focus-visible {
  background: var(--akcent);
  color: #0f0f0f;
}

.tlacitko__popis {
  font-family: var(--pismo-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  line-height: 1.2;
}

.tlacitko__cislo {
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.tlacitko--hlavni {
  background: var(--akcent);
  color: #0f0f0f;
  padding-inline: 1.75rem;
}

.tlacitko--hlavni:hover,
.tlacitko--hlavni:focus-visible {
  background: var(--akcent-tmavy);
  border-color: var(--akcent-tmavy);
  color: #0f0f0f;
}

.odkaz-sipka {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
}

.odkaz-sipka::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  transition: width var(--prechod);
}

.odkaz-sipka:hover::after,
.odkaz-sipka:focus-visible::after {
  width: 3rem;
}

/* --- hero ------------------------------------------------------------------ */
/* Fotka je ostra od prvniho snimku. Jedina animace je odkryti zdola nahoru,
   jako kdyz se z hotove prace sundava plachta - remeslo, ktere prodava
   preciznost, nesmi zacinat rozmazanym obrazem. */

/* Mobil a siroke okno dostavaji dva ruzne vyrezy z <picture>: vodorovny pas 4:3
   a svisly panel 3:4. Jeden zdroj by v jednom z tech tvaru prisel o pulku zaberu. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 3.5rem;
  isolation: isolate;
}

.hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: clamp(2rem, 6vw, 3rem);
  overflow: hidden;
  /* Horni hrana se vytraci do pozadi, aby pas nekoncil ostrou carou pod
     hlavickou. Dolni hranu resi prechod v .hero__stin. */
  mask-image: linear-gradient(180deg, transparent 0%, #000 13%);
}

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(0.96) saturate(0.98);
}

/* Odkryti resi clip-path, ne opacity: fotka se odhaluje zdola nahoru misto aby
   se prolinala z cerne. Bez JS je hero rovnou videt. */
.js .hero__media {
  clip-path: inset(100% 0 0 0);
}

.js .hero__media[data-videt] {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Fotka dojizdi z mirneho zvetseni jeste chvili po odkryti - obraz se usadi,
   misto aby stal na miste jako plakát. */
.js .hero__foto {
  transform: scale(1.05);
  transform-origin: 50% 55%;
  transition: transform 1600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .hero__media[data-videt] .hero__foto {
  transform: scale(1);
}

/* Text na fotce nelezi, takze staci lehke ztmaveni horni hrany pod hlavicku
   a dole prechod do pozadi, aby fotka nekoncila ostrou vodorovnou hranou. */
.hero__stin {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 15, 15, 0.38) 0%,
    rgba(15, 15, 15, 0.06) 22%,
    rgba(15, 15, 15, 0) 55%,
    var(--pozadi) 100%
  );
}

.hero__obsah {
  position: relative;
  max-width: calc(var(--sirka) * 1);
}

.hero__stitek {
  margin-bottom: 1.1rem;
  color: var(--akcent);
}

.hero__nadpis {
  max-width: 15ch;
  margin-bottom: 1.25rem;
}

.hero__podnadpis {
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  color: var(--text-tlumeny);
}

.hero__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
}

/* --- hero, varianta s panelem ---------------------------------------------- */
/* Na sirokem okne se text a fotka rozdeli vedle sebe. Fotka drzi svisly panel,
   ve kterem se zdroj zvetsuje asi 1,5x misto 3,5x pres celou obrazovku. */

@media (min-width: 1180px) {
  .hero--panel {
    display: grid;
    /* minmax(0, 1fr) misto 1fr: bez toho roztahne dlouhe slovo v nadpisu
       ("REKONSTRUKCE,") sloupec na svou min-content sirku a hero pretece. */
    grid-template-columns: minmax(0, 1fr) clamp(28rem, 38vw, 38rem);
    align-items: end;
    min-height: 100svh;
    padding-block: 8rem 5rem;
  }

  /* Fotka nema zadnou hranu - do pozadi se vytraci maskou, ne cernym prekryvem.
     Rozdil je videt: prekryv jen ztmavi pixely, maska je opravdu odebere, takze
     na strane u textu nezustane svetlejsi pruh. */
  .hero--panel .hero__media {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    aspect-ratio: auto;
    margin-bottom: 0;
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.22) 16%, #000 48%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
    mask-composite: intersect;
  }

  /* Odkryti jde zprava doleva, po smeru vytraceni - fotka vyjede z plne strany
     a rozpusti se smerem k textu. */
  .js .hero--panel .hero__media {
    clip-path: inset(0 0 0 100%);
  }

  .js .hero--panel .hero__media[data-videt] {
    clip-path: inset(0 0 0 0);
  }

  /* V panelu nelezi na fotce zadny text, takze nemusi byt tak ztmavena. */
  .hero--panel .hero__foto {
    object-position: 50% 50%;
    filter: brightness(0.93) saturate(0.96);
  }

  /* Prechod resi maska, prekryvna vrstva uz nema co delat. */
  .hero--panel .hero__stin {
    display: none;
  }

  .hero--panel .hero__obsah {
    grid-column: 1;
    grid-row: 1;
    padding-right: 3rem;
    max-width: none;
  }
}

/* --- odhalovani pri scrollu ------------------------------------------------ */
/* Trida se pridava az z JS. Bez JS nebo bez IntersectionObserver zustava obsah
   videt - proto se skryva jen pod .js. */

.js [data-odhalit] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js [data-odhalit][data-videt] {
  opacity: 1;
  transform: none;
}

/* --- sekce ----------------------------------------------------------------- */

.sekce {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.sekce__hlava {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sekce__hlava--radek {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

/* Zahlavi vnitrnich stranek. Hlavicka je fixni, takze nadpis potrebuje vic
   mista nahore, nez ma bezna sekce. */
.sekce--zahlavi {
  padding-top: clamp(8rem, 14vw, 12rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.sekce--navazuje {
  padding-top: 0;
}

.zahlavi__stitek {
  margin-bottom: 1rem;
  color: var(--akcent);
}

.zahlavi__perex {
  max-width: 52ch;
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--text-tlumeny);
}

/* --- sluzba, podrobne ------------------------------------------------------ */

.sluzba-detail {
  display: grid;
  gap: 1.25rem 3rem;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--linka);
}

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

@media (min-width: 860px) {
  .sluzba-detail {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  }
}

.sluzba-detail__text p {
  max-width: 62ch;
  color: var(--text-tlumeny);
}

.sluzba-detail__text p + p {
  margin-top: 1rem;
}

/* --- vypis polozek uvnitr sluzby ------------------------------------------- */
/* Odrazky bez odrazek. Kazda polozka ma vlastni tenkou linku nahore - stejny
   princip jako kroky v postupu, jen slabsi, protoze polozek je vic a nesmeji
   prekricet text nad sebou. Zadne ikony: v zadani jsou zakazane. */

.vypis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1.1rem 2rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
}

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

.vypis__nazev {
  display: block;
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

.vypis__popis {
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-tlumeny);
}

/* --- uvodni slovo a motto -------------------------------------------------- */

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

@media (min-width: 900px) {
  .slovo {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

.slovo__text h2 {
  margin-bottom: 1.5rem;
}

.slovo__text p {
  max-width: 58ch;
  margin-bottom: 1.1rem;
  color: var(--text-tlumeny);
}

.slovo__text .odkaz-sipka {
  margin-top: 0.75rem;
}

.motto {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--plocha);
  border-left: 2px solid var(--akcent);
}

.motto blockquote {
  margin: 0 0 1rem;
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.06;
  text-transform: uppercase;
}

/* Uvozovky jsou v CSS, aby v textu zustala jen ciste veta. */
.motto blockquote::before {
  content: "„";
}

.motto blockquote::after {
  content: "“";
}

/* --- sluzby (seznam) ------------------------------------------------------- */

.sluzby {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--linka);
}

.sluzba {
  border-bottom: 1px solid var(--linka);
}

.sluzba__odkaz {
  position: relative;
  display: grid;
  gap: 0.4rem 3rem;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 720px) {
  .sluzba__odkaz {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* Oranzova linka se pri najeti roztahne zleva doprava. */
.sluzba__odkaz::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--akcent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sluzba__odkaz:hover::after,
.sluzba__odkaz:focus-visible::after {
  transform: scaleX(1);
}

.sluzba__nazev {
  transition: color var(--prechod);
}

.sluzba__odkaz:hover .sluzba__nazev,
.sluzba__odkaz:focus-visible .sluzba__nazev {
  color: var(--akcent);
}

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

/* --- postup ---------------------------------------------------------------- */
/* Poradi nese znacka <ol>, ne cisla v textu - cislovani sekci je v zadani
   zakazane. */

.postup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.krok {
  padding-top: 1.25rem;
  border-top: 2px solid var(--akcent);
}

.krok h3 {
  margin-bottom: 0.6rem;
}

.krok p {
  color: var(--text-tlumeny);
}

/* --- dlazdice realizaci ---------------------------------------------------- */

.dlazdice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.dlazdice__polozka {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--plocha);
  border: 1px solid rgba(242, 242, 242, 0.07);
  box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  color: inherit;
  transition: transform var(--prechod), box-shadow var(--prechod);
}

.dlazdice__polozka:hover,
.dlazdice__polozka:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px -14px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dlazdice__polozka img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: brightness(0.86);
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--prechod);
}

.dlazdice__polozka:hover img,
.dlazdice__polozka:focus-visible img {
  transform: scale(1.04);
  filter: brightness(1);
}

.dlazdice__popis {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem;
  background: linear-gradient(transparent, rgba(15, 15, 15, 0.9));
}

.dlazdice__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.05;
  text-transform: uppercase;
}

/* --- projekt a galerie ----------------------------------------------------- */

.projekt {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.projekt__hlava {
  display: grid;
  gap: 1rem 3rem;
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 860px) {
  .projekt__hlava {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.projekt__misto {
  margin-top: 0.6rem;
  color: var(--akcent);
}

.projekt__popis {
  max-width: 56ch;
  color: var(--text-tlumeny);
}

/* Pas je pres celou sirku okna, ale prvni fotka zacina tam, kde text v .obal.
   Proto se boky pocitaji stejne jako u obalu, ne pevnym paddingem. */
.galerie__pas {
  /* Bez scroll-padding by snap zarovnal prvni fotku na okraj okna a levy odsazeni
     by prescroloval. */
  --galerie-bok: max(var(--bok), (100% - var(--sirka)) / 2 + var(--bok));
  --vyska-pasu: clamp(16rem, 48vh, 27rem);
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem var(--galerie-bok);
  scroll-padding-inline: var(--galerie-bok);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

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

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

/* Behem tazeni mysi snap prekazi - prichytil by pas driv, nez uzivatel pusti. */
.galerie__pas--tahne {
  scroll-snap-type: none;
  cursor: grabbing;
}

/* Sirku urcuje fotka, ne popisek pod ni. Bez toho roztahne dlouhy popisek celou
   dlazdici a vedle fotky zustane prazdna plocha - "ramecek odstava".
   --pomer zapisuje generator z realnych rozmeru souboru. */
.galerie__polozka {
  flex: 0 0 auto;
  width: min(calc(var(--vyska-pasu) * var(--pomer, 1)), 86vw);
  scroll-snap-align: start;
}

.galerie__polozka .karta {
  width: 100%;
  height: 100%;
}

.galerie__polozka .karta img {
  height: var(--vyska-pasu);
  aspect-ratio: auto;
}



/* --- karta a rada ---------------------------------------------------------- */
/* Rada je vodorovna skupina fotek, ktera presne vyplni obal a je vycentrovana.
   Vyska karet se dopocita ze souctu jejich pomeru stran (--soucet) a z poctu
   mezer, takze vsechny karty v rade jsou stejne vysoke a zadna se neoreze.
   Diky tomu nezustane u projektu s jednou fotkou prazdna prava pulka. */

.rada {
  --mezera: clamp(0.75rem, 1.6vw, 1.25rem);
  --strop: 34rem;
  /* Sirka obsahu obalu. Zamerne pres vw, ne pres procenta: promenna se pouziva
     i ve `height`, kde by se procenta pocitala z vysky rodice. */
  --sirka-obsahu: calc(min(100vw, var(--sirka)) - 2 * var(--bok));
  --vyska-karty: min(
    var(--strop),
    calc((var(--sirka-obsahu) - (var(--pocet) - 1) * var(--mezera)) / var(--soucet))
  );
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mezera);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Karta vystupuje z pozadi: zaobleni, tenky svetly lem a stin. Na temer cernem
   podkladu sam stin hranu nenaznaci, lem musi pomoct. */
/* Sloupec, aby popisek mohl vyplnit zbytek karty. Karty v rade jsou diky
   flexu stejne vysoke, ale popisek si bez toho drzi vlastni vysku a text pak
   v kazde karte konci jinde. */
.karta {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--plocha);
  border: 1px solid rgba(242, 242, 242, 0.07);
  box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: transform var(--prechod), box-shadow var(--prechod);
}

.karta:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px -14px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.5);
}

.karta img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--pomer, 1);
  object-fit: cover;
  filter: brightness(0.97);
  transition: filter var(--prechod);
}

.karta:hover img {
  filter: brightness(1);
}

/* Mrizka, ne flex se zalamovanim: text ma svuj sloupec a zalamuje se v nem,
   zatimco stitek nebo nazev mista zustane na prvnim radku vedle nej. Driv
   spadl "OPAVSKO" pod dvouradkovy popisek na treti radek.

   min-height drzi misto na dva radky textu i tam, kde je popisek kratky. Bez
   toho ma jedna karta v rade popisek na dva radky, je vyssi nez ostatni a cela
   rada se opticky rozjede. */
.karta figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem 0.7rem;
  padding: 0.8rem 1rem;
  flex: 1 1 auto;
  align-content: start;
  min-height: calc(3em + 1.6rem);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-tlumeny);
  transition: color var(--prechod);
}

/* U pred/po je vlevo stitek a text az za nim. */
.karta figcaption.karta__popis--stitek {
  grid-template-columns: auto minmax(0, 1fr);
}

.karta:hover figcaption {
  color: var(--text);
}

.karta figcaption .mono:not(.karta__stitek) {
  margin-left: auto;
  color: var(--akcent);
}

/* Stitek nese informaci, kterou by jinak musel nest text. Oranzovy je jen "po" -
   jinak by se akcent na strance opakoval bez duvodu. */
.karta__stitek {
  flex: 0 0 auto;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--linka);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tlumeny);
}

.karta__stitek--po {
  border-color: var(--akcent);
  color: var(--akcent);
}

/* Pod 900 px jde kazda fotka na celou sirku pod sebe. Tri karty vedle sebe by na
   tabletu mely ~220 px a popisek pod nimi by se lamal do sesti radku. */
@media (max-width: 899px) {
  .rada .karta {
    width: 100%;
  }
}

@media (min-width: 900px) {
  .rada .karta {
    flex: 0 0 auto;
    width: calc(var(--vyska-karty) * var(--pomer, 1));
  }

  .rada .karta img {
    height: var(--vyska-karty);
    aspect-ratio: auto;
  }
}

/* --- lista o cookies ------------------------------------------------------- */
/* Web zadne cookies nenastavuje, takze lista nic nepovoluje ani neblokuje -
   jen rekne, jak to je, a da se zavrit. Volba se pamatuje v localStorage.
   Kdyby na web nekdy prisla mereni s cookies (GA, Meta Pixel), musi se lista
   prepsat na souhlas s odmitnutim na stejny klik a skripty se smi spustit az po nem. */

.souhlas {
  position: fixed;
  z-index: 80;
  left: var(--bok);
  right: var(--bok);
  bottom: var(--bok);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  max-width: 46rem;
  margin-inline: auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--linka);
  border-radius: 14px;
  background: color-mix(in srgb, var(--plocha) 94%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.85);
}

.js .souhlas {
  transform: translateY(1rem);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 380ms ease;
}

.js .souhlas[data-videt] {
  transform: none;
  opacity: 1;
}

.souhlas__text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-tlumeny);
}

.souhlas__akce {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.souhlas__odkaz {
  font-size: 0.8125rem;
  color: var(--text-tlumeny);
}

.souhlas__tlacitko {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--akcent);
  border-radius: 8px;
  background: none;
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akcent);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--prechod), color var(--prechod);
}

.souhlas__tlacitko:hover,
.souhlas__tlacitko:focus-visible {
  background: var(--akcent);
  color: #0f0f0f;
}

@media (max-width: 559px) {
  .souhlas {
    gap: 0.75rem;
  }

  .souhlas__akce {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

/* --- textova stranka ------------------------------------------------------- */

.text-stranka {
  max-width: 68ch;
}

.text-stranka h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
}

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

.text-stranka p {
  margin-bottom: 1rem;
  color: var(--text-tlumeny);
}

.text-stranka a {
  color: var(--text);
}

.rozcestnik {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

/* --- kontakt --------------------------------------------------------------- */

.kontakt {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 900px) {
  .kontakt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

.tlacitko--siroke {
  display: inline-flex;
  align-items: flex-start;
}

.udaje {
  margin: 2.5rem 0 0;
  display: grid;
  gap: 1.5rem;
}

.udaje__radek {
  display: grid;
  gap: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linka);
}

.udaje dt {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tlumeny);
}

.udaje dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.udaje a {
  text-decoration: none;
}

.odkaz-sipka--drobny {
  font-size: 0.875rem;
  color: var(--text-tlumeny);
}

.odkaz-sipka--drobny::after {
  width: 1.25rem;
}

.odkaz-sipka--drobny:hover,
.odkaz-sipka--drobny:focus-visible {
  color: var(--akcent);
}

.odkaz-sipka--drobny:hover::after,
.odkaz-sipka--drobny:focus-visible::after {
  width: 2rem;
}

/* --- formular -------------------------------------------------------------- */

.kontakt__formular {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--plocha);
}

.formular__uvod {
  margin-top: 0.9rem;
  color: var(--text-tlumeny);
}

.formular {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}

.pole {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.pole label {
  font-family: var(--pismo-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tlumeny);
}

.pole__povinne {
  color: var(--akcent);
}

.pole input,
.pole textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--pozadi);
  border: 1px solid var(--linka);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

.pole textarea {
  resize: vertical;
  min-height: 8rem;
}

.pole input:focus-visible,
.pole textarea:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 1px;
  border-color: var(--akcent);
}

.formular__poznamka {
  margin-top: -0.5rem;
  font-size: 0.875rem;
  color: var(--text-tlumeny);
}

/* Past na roboty: mimo obrazovku, ne display:none - to nekteri boti poznaji. */
.past {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tlacitko--odeslat {
  justify-self: start;
  border: 1px solid var(--akcent);
  font-family: var(--pismo-nadpis);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.tlacitko--odeslat:disabled {
  opacity: 0.55;
  cursor: default;
}

.formular__stav:empty {
  display: none;
}

.formular__stav {
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--text-tlumeny);
  background: var(--plocha-svetla);
  font-size: 0.9375rem;
}

.formular__stav[data-typ="chyba"] {
  border-left-color: var(--akcent);
}

.formular__stav[data-typ="hotovo"] {
  border-left-color: var(--akcent);
  color: var(--text);
}

.formular__pravni {
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* --- vyzva ----------------------------------------------------------------- */

.vyzva__obal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  /* Zkratka `padding` prebila padding-inline z .obal, takze text ve vyzve zacinal
     o 10 px vlevo nez zbytek stranky. max() drzi pohodlny vnitrni okraj panelu,
     ale nikdy nejde pod odsazeni obalu. */
  padding-block: clamp(2rem, 4vw, 3.25rem);
  padding-inline: max(var(--bok), clamp(2rem, 4vw, 3.25rem));
  background: var(--plocha);
}

.vyzva__text {
  margin-top: 0.9rem;
  max-width: 42ch;
  color: var(--text-tlumeny);
}

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

/* --- paticka --------------------------------------------------------------- */

.paticka {
  border-top: 1px solid var(--linka);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.paticka__obal {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

@media (min-width: 760px) {
  .paticka__obal {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

.paticka__znacka-obr {
  height: 2.6rem;
  width: auto;
}

.paticka__znacka img {
  height: 3rem;
  width: auto;
  margin-bottom: 1rem;
}

.paticka__znacka p {
  max-width: 32ch;
  font-size: 0.9375rem;
}

.paticka__navigace ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.paticka__navigace a,
.paticka__kontakt a {
  text-decoration: none;
}

.paticka__kontakt {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.paticka__spodek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--linka);
}

.paticka__spodek a {
  text-decoration: none;
}

/* --- mobil ----------------------------------------------------------------- */

@media (max-width: 860px) {
  .menu-prepinac {
    display: grid;
  }

  .navigace {
    position: fixed;
    inset: 4.5rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--bok) 2rem;
    background: var(--pozadi);
    border-bottom: 1px solid var(--linka);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform var(--prechod), visibility var(--prechod);
  }

  .navigace[data-otevrene] {
    transform: translateY(0);
    visibility: visible;
  }

  .navigace ul {
    flex-direction: column;
    gap: 0;
  }

  .navigace ul a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--linka);
  }

  .navigace ul a::after {
    display: none;
  }

  .navigace__telefon {
    margin-top: 1.5rem;
    align-items: flex-start;
  }

  .hero__scroll {
    display: none;
  }

  .hero {
    padding-block: 6rem 3rem;
  }
}

/* --- omezeny pohyb --------------------------------------------------------- */

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

  /* Hero rovnou cely videt, zadne odkryvani ani dojezd ze zvetseni. */
  .js .hero__media,
  .js .hero--panel .hero__media {
    clip-path: none;
  }

  .js .hero__foto {
    transform: none;
  }

  .loader__znacka {
    clip-path: none;
    animation: none;
  }

  /* Obsah je videt rovnou, i kdyby IntersectionObserver nedobehl. */
  .js [data-odhalit] {
    opacity: 1;
    transform: none;
  }
}