/* ==========================================================================
   Vlastní styly RETALES

   Načítá se AŽ ZA původním Webflow stylopisem, takže tady se dá přepsat
   cokoliv, aniž by se sahalo do strojově vygenerovaného souboru v css/.
   Vlastní úpravy patří sem.
   ========================================================================== */

/* --- Logo -------------------------------------------------------------- */

.retales-logo {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: currentColor;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Logo v patičce stojí samostatně nad copyrightem, proto je výrazně větší. */
.retales-logo.footer {
  font-size: 3.4rem;
  letter-spacing: -0.04em;
}

@media screen and (max-width: 991px) {
  .retales-logo { font-size: 1.4rem; }
  .retales-logo.footer { font-size: 2.4rem; }
}

@media screen and (max-width: 479px) {
  .retales-logo { font-size: 1.2rem; }
  .retales-logo.footer { font-size: 1.8rem; }
}

/* Obal loga v navigaci je odkaz. Původně obsahoval obrázek, takže se na něm
   výchozí styl odkazu (modrá, podtržení) nikde neprojevil. U textového loga
   už ano, proto se tady přebíjí. */
/* Logo a odkazy v menu musí sedět na jedné lince. Menu je v obalu
   zarovnaném dolů a jeho text končí 8 px nad spodní hranou, protože
   pod ním ještě leží proužek podtržení. Logo proto dostane stejné
   zarovnání a tentýž odstup, jinak by viselo výš. */
.logo-wrap {
  display: flex;
  align-items: flex-end;
  padding-bottom: 8px;
  width: auto;
  color: #fff;
  text-decoration: none;
}

.logo-wrap:hover,
.logo-wrap:visited {
  color: #fff;
  text-decoration: none;
}

/* --- Pozadí sekce "o nás" ---------------------------------------------- */

/* Původní Webflow CSS sem vkládalo fotku z webu AppyCamper. Přebíjí se tady,
   aby zůstal css/ soubor nedotčený. Až budete mít vlastní fotku, stačí
   přepsat cestu níž. */
.bg {
  background-image: url("../images/foto-n-stin-omitka.jpg");
}

/* --- Displejová typografie ---------------------------------------------- */

/* Velké nadpisy jedou v Archivu, stejně jako logo, aby značka držela
   pohromadě. Původní Webflow CSS zůstává nedotčené, přebíjí se tady. */
.heading,
.heading-super,
.text-metric {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
}

/* Původní šablona sázela vybraná písmena v nadpisech pixelovým fontem
   (Appy Pixel). Ten patřil k původní značce, tady působil rozbitě.
   Písmena teď dědí font zbytku nadpisu. */
.heading em,
.heading-super em,
h1 em,
h2 em,
h3 em {
  font-family: inherit;
  font-style: normal;
  line-height: inherit;
}

/* --- Logo RETALES jako obrázek ---------------------------------------- */

/* Dřív to byl text v Archivu, teď je to originální SVG z brand exportu.
   Velikost se řídí výškou, šířka dopočítá poměr. */
.retales-logo {
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
}

.retales-logo.footer {
  font-size: 3.4rem;
  letter-spacing: 0.18em;
}

@media screen and (max-width: 991px) {
  .retales-logo { font-size: 1.25rem; }
  .retales-logo.footer { font-size: 2.3rem; }
}

@media screen and (max-width: 479px) {
  .retales-logo { font-size: 1.05rem; letter-spacing: 0.16em; }
  .retales-logo.footer { font-size: 1.7rem; }
}

/* --- Loga produktů v kartách ------------------------------------------- */

/* Každá značka má jiný poměr stran, proto se sjednocuje výška, ne šířka. */
/* Loga systémů: srovnáno podle výšky PÍSMA, ne celé značky. U Tilla
   zabírá nápis jen 60 % rámečku, zbytek je značka vlevo, kdežto onDuty
   je čistý nápis. Při stejné výšce rámečku pak onDuty vycházelo skoro
   dvakrát větší. Násobky jsou změřené z kresby jednotlivých souborů. */
.logo-produktu {
  --vyska: clamp(22px, 2.2vw, 44px);
  height: var(--vyska);
  width: auto;
  display: block;
}

.logo-produktu[src*="onduty"]   { height: calc(var(--vyska) * 0.599); }
.logo-produktu[src*="lorela"]   { height: calc(var(--vyska) * 0.778); }
.logo-produktu[src*="wallento"] { height: calc(var(--vyska) * 0.957); }

/* --- Sekce "Co umíme": žluté ombré -------------------------------------- */

/* Přechod jde od značkové limetky z loga (#E4FA4C) do skoro bílé,
   diagonálně z levého horního rohu. Obě sekce na sebe navazují, proto
   mají společné pozadí přes celý blok. */
.sekce-zluta {
  background-image: linear-gradient(118deg,
      #E4FA4C 0%,
      #EAF880 22%,
      #EFF8B4 44%,
      #F3F8D8 66%,
      #F6F9E9 84%,
      #F8FAF1 100%);
  position: relative;
  z-index: 1;
}

/* Na světlém podkladu musí text zčernat. */
.sekce-zluta .text,
.sekce-zluta .heading,
.sekce-zluta .text-metric,
.sekce-zluta .align-right,
.sekce-zluta .align-right .text {
  color: #12140F;
}

/* Sekundární texty jen ztlumit, ne zesvětlit do neviditelna. */
.sekce-zluta .align-right .text {
  color: #5A6152;
}

/* Dělicí linky byly světlé na tmavém, na žlutém musí ztmavnout. */
.sekce-zluta .divider {
  background-color: rgba(18, 20, 15, 0.14);
}

/* --- Navigace nad světlou sekcí ----------------------------------------- */

/* Navigace je fixní a web je tmavý, takže je bílá. Nad žlutou sekcí
   by ale zmizela, proto se přepne do tmavé. Třídu přidává
   custom/navigace-barva.js podle toho, co je zrovna pod ní. */
/* Webflow si barvu odkazu animuje inline, proto je tady potreba
   !important, jinak by nase tmava barva prohrala. */
.nav-wrap.nav-na-svetlem .nav-link,
.nav-wrap.nav-na-svetlem .nav-link div,
.nav-wrap.nav-na-svetlem .link {
  color: #12140F !important;
}

.nav-wrap.nav-na-svetlem .nav-link-underline,
.nav-wrap.nav-na-svetlem .link {
  border-color: #12140F;
}

/* Logo je text, na světlém stačí ztmavit barvu. */
.nav-wrap.nav-na-svetlem .retales-logo {
  color: #12140F !important;
}

/* Plynulý přechod, ať to necvakne. */
.nav-wrap .nav-link,
.nav-wrap .nav-link div,
.nav-wrap .link {
  transition: color .25s ease, border-color .25s ease;
}

/* Bloky v sekci "Co umíme" měly natvrdo tmavé pozadí z původní šablony.
   Na žlutém podkladu z nich byly černé obdélníky, proto se zprůhledňují. */
.sekce-zluta .container,
.sekce-zluta .grid,
.sekce-zluta .rows {
  background-color: transparent;
}

/* Bloky se pri rolovani prekryvaji. Musi byt nepruhledne, jinak je skrz
   ne videt text bloku pod nimi. Pozadi je stejny prechod jako u sekce
   a je ukotveny k oknu, takze na sebe bloky navazuji bez svu. */
.sekce-zluta,
.sekce-zluta .services-sticky {
  background-image: linear-gradient(118deg,
      #E4FA4C 0%,
      #EAF880 22%,
      #EFF8B4 44%,
      #F3F8D8 66%,
      #F6F9E9 84%,
      #F8FAF1 100%);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

.sekce-zluta .services-sticky {
  background-color: transparent;
  border-top-color: rgba(18, 20, 15, 0.16);
}

/* --- Nadpis první sekce ------------------------------------------------- */

/* Nadpis "Provoz jako propojený celek" měl v gridu jen jeden sloupec
   a lámal se po jednom slově. Dostane víc místa. */
#w-node-e6e7153a-bf08-56a9-e041-5cf2ce5fa167-c3941617 {
  /* Napevno do prvniho radku a prvnich ctyr sloupcu. Bez toho se nadpis
     auto-umistil az pod text vpravo a spadl na spodek sekce. */
  grid-area: 1 / 1 / 2 / 5;
  align-self: start;
  max-width: none;
}

@media screen and (max-width: 991px) {
  #w-node-e6e7153a-bf08-56a9-e041-5cf2ce5fa167-c3941617 {
    grid-area: span 2 / span 3 / span 2 / span 3;
    max-width: none;
  }
}

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

/* Původní 9vw počítalo s krátkými slovy. "PROVOZNÍ SYSTÉMY" je delší
   a přetékalo přes okraje, proto se hero sází menší. Zbytek nadpisů
   na stránce zůstává, jak byl. */
.hero .heading._3x {
  font-size: 6.4vw;
  /* Původních .87em bylo těsné a diakritika z horního řádku
     zasahovala do písmen pod sebou. */
  line-height: 1.06em;
}

/* Slova nesmí lámat uvnitř řádku, zalomení řídí <br> v HTML. */
.hero .heading._3x .pop {
  white-space: nowrap;
}

@media screen and (max-width: 991px) {
  .hero .heading._3x { font-size: 8.4vw; }
}

@media screen and (max-width: 479px) {
  .hero .heading._3x { font-size: 10vw; }
}

/* --- Patička ------------------------------------------------------------
   Původní šablona měla v patičce jen logo a copyright. Kategorie jsou nové:
   značka, systémy, navigace po stránce a kontakt. Odkazy míří na kotvy,
   web je jednostránkový, takže žádná z položek nevede pryč. */
/* .rows má align-items: flex-start, takže se potomci smrskávají na obsah.
   Patička potřebuje celou šířku, jinak spodní řádek nerozestoupí. */
.paticka {
  width: 100%;
  grid-column-gap: 4vw;
  grid-row-gap: 3vw;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  padding: 1vw 0 2vw;
  display: grid;
}

.paticka-sloupec {
  flex-direction: column;
  align-items: flex-start;
  gap: .9vw;
  display: flex;
}

.paticka-nadpis {
  color: var(--white);
  opacity: .45;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .5vw;
  font-size: .85vw;
  font-weight: 500;
}

.paticka-odkaz {
  color: var(--white);
  opacity: .8;
  font-size: 1vw;
  font-weight: 300;
  line-height: 1.5em;
  text-decoration: none;
  transition: opacity .2s;
}

.paticka-odkaz:hover {
  opacity: 1;
  text-decoration: underline;
}

.paticka-popis {
  color: var(--white);
  opacity: .5;
  max-width: 30ch;
  font-size: 1vw;
  font-weight: 300;
  line-height: 1.5em;
}

/* Logo drží sloupec se značkou, proto pod ním potřebuje víc vzduchu. */
.paticka-znacka .retales-logo.footer {
  margin-bottom: .6vw;
}

.paticka-spodek {
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.5vw;
  display: flex;
}

@media screen and (max-width: 991px) {
  .paticka {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 3rem;
    grid-column-gap: 2rem;
  }
  .paticka-sloupec { gap: .7rem; }
  .paticka-nadpis { margin-bottom: .5rem; font-size: .75rem; }
  .paticka-odkaz, .paticka-popis { font-size: 1rem; }
  .paticka-spodek { padding-top: 2rem; }
}

/* Na telefonu jsou dva sloupce uz tesne, dlouhe popisky se lamou
   do trech radku. Pod 600 px proto jeden sloupec pod sebou. */
@media screen and (max-width: 600px) {
  .paticka { grid-template-columns: 1fr; grid-row-gap: 2.5rem; }
  .paticka-spodek { flex-direction: column; gap: 1rem; }
}

/* --- Pohyb koláže v hero -------------------------------------------------
   Původně to hnal Webflow z JavaScriptu: akce „Cloud-loop" každý snímek
   přepisovala inline transform na .cloud-row. Běželo to v jedné smyčce
   s plynulým rolováním (Lenis) a s obrázky ve výchozím rozlišení, takže
   se pohyb trhal.

   Řádky proto mají novou třídu .cloud-radek. Webflow selektor .cloud-row
   nenajde a smyčku nespustí, pohyb dělá CSS animace. Ta běží na
   kompozitoru, tedy mimo hlavní vlákno, a nezdržuje ji nic z JavaScriptu.

   Vlastnosti .cloud-radek jsou opsané z .cloud-row v generovaném
   stylopisu, aby rozvržení zůstalo stejné. */
.cloud-radek {
  box-sizing: content-box;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 14vw;
  display: flex;
  position: relative;
}

.cloud-radek.middle {
  margin-top: -7vw;
}

/* Řádek má obsah dvakrát pod sebou, posun o -50 % je tedy přesně jeden
   cyklus a napojí se bez skoku. 45 s odpovídá původnímu nastavení. */
@keyframes cloud-posun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

.cloud-radek {
  animation: cloud-posun 45s linear infinite;
}

/* Webflow dává obalu inline transform-style: preserve-3d. Tím vzniká 3D
   scéna, ve které prohlížeč musí každý snímek řadit prvky podle hloubky,
   a animaci nemůže odsunout na kompozitor. Přepneme obal na plochý režim.
   (Bez toho se navíc povýšený řádek v 3D řazení dostal za pozadí a první
   dvě řady zmizely.) */
.cloud-rows-wrap {
  transform-style: flat !important;
}

/* Řádek dostane vlastní vrstvu na kompozitoru. Bez toho hrozí, že pohyb
   pojede po hlavním vlákně, a při rychlosti necelého pixelu na snímek
   (2058 px za 45 s) se posun zaokrouhluje na celé pixely. To je přesně
   ten cukavý pohyb: obrázek chvíli stojí a pak skočí o pixel.
   Na vlastní vrstvě se posouvá se subpixelovou přesností. */
.cloud-radek {
  will-change: transform;
}

/* Pohyb má vidět každý, proto se koláž nezastavuje ani při systémovém
   nastavení „omezit pohyb". Tam se jen zpomalí na polovinu, což je
   ohleduplné k lidem, kterým je z pohybu na obrazovce nevolno, a přitom
   koláž nezůstane stát. */
@media (prefers-reduced-motion: reduce) {
  .cloud-radek { animation-duration: 90s; }
}

@media screen and (max-width: 991px) {
  .cloud-radek { width: 32vw; }
}