/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Hlína, hero. Na telefonu pod sebou: nadpis, kruh, text a tlačítka, ať je
   kruh vidět hned pod nadpisem. Na počítači text vlevo, kruh vpravo.
   Kruh v pozadí je samostatná vrstva POD plátnem: nádoba, deska i jejich
   stíny leží nad ním a nic se o něj neořezává. */
.h-hero {
  position: relative;
  padding: 8px var(--h-gutter) 36px;
}
.h-hero__vnitrek {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hlavicka" "kruh" "telo";
  row-gap: 4px;
}
.h-hero__hlavicka {
  grid-area: hlavicka;
}
.h-hero__kruh {
  grid-area: kruh;
}
.h-hero__telo {
  grid-area: telo;
  margin-top: 18px;
}
.h-hero__nadpis {
  max-width: 12ch;
  margin-bottom: 0;
  background: linear-gradient(110deg, #2a1d17 0%, #2a1d17 55%, #c4633b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h-hero__uvod {
  max-width: 44ch;
  margin-bottom: 22px;
}
.h-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.h-hero__cta .h-tl {
  flex: 1 1 100%;
}
.h-hero__fakta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.h-hero__fakta li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #2a1d17;
}
body.hlina .h-hero__fakta i[data-coral-ikona] {
  width: 18px;
  height: 18px;
  padding: 7px;
  border-radius: 11px;
  background: #fbf6ef;
  border: 1px solid #e7d9c6;
  color: #c4633b;
}
/* ─────────────  kruh  ───────────── */
.h-hero__deska {
  position: relative;
  width: min(92%, 380px);
  /* Hlína 82: kruh je nakreslený o 6 % výš, spodní prázdný pruh plátna
     se proto schová pod lištu (ta leží nad plátnem, klikat jde celá) */
  margin: -8px auto calc(min(92%, 380px) * -0.06);
  aspect-ratio: 1 / 1;
}
/* kruh v pozadí: světlá deska, na které celá scéna stojí */
.h-hero__deska::before {
  content: "";
  position: absolute;
  left: 7%;
  top: 4%;
  width: 86%;
  height: 86%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 50% 50%, #faf4ec 0%, rgba(245, 237, 227, 0.96) 62%, rgba(231, 217, 198, 0.9) 100%);
  box-shadow: inset 0 -18px 40px -24px rgba(200, 168, 137, 0.7), 0 30px 60px -44px rgba(42, 29, 23, 0.45);
  border: 1px solid rgba(216, 197, 171, 0.55);
}
.h-hero__platno {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  /* Hlína 65: po kruhu jde stránka posouvat; dotek na samotné hlíně
     posun zastaví skript, takže tvaruje jen hlína */
  touch-action: manipulation;
  cursor: default;
}
.h-hero__platno.je-nad-hlinou {
  cursor: grab;
}
.h-hero__platno.je-tvaruje {
  cursor: grabbing;
}
.h-hero__platno.je-glazuje.je-nad-hlinou {
  cursor: crosshair;
}
/* ovládání pod kruhem: lišta s ručičkou a barvičkami a Nová hlína, pod nimi
   nápověda. Hlína 64: na počítači stejné jako na telefonu, žádná bublina. */
.h-hero__ovladani {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  margin-top: 6px;
}
.h-hero__napoveda {
  flex: 1 1 100%;
  min-height: 1.45em;
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: #7d6252;
  text-wrap: balance;
}
/* sedm tlačítek po 40 px: na nejužším telefonu (280 px) mezery a vnitřek
   ustoupí a obrys je stín, který nezabírá místo */
.h-hero__nastroje {
  display: inline-flex;
  align-items: center;
  gap: clamp(0px, calc((100vw - 320px) / 10), 4px);
  padding: clamp(0px, calc((100vw - 320px) / 10), 4px);
  border-radius: 999px;
  background: rgba(251, 246, 239, 0.9399999999999999);
  box-shadow: inset 0 0 0 1px #e7d9c6, 0 10px 24px -18px rgba(42, 29, 23, 0.5);
}
.h-hero__nastroje.je-zvyraznene {
  animation: h-hero-zare 1.4s ease-in-out 3;
}
@keyframes h-hero-zare {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px #e7d9c6, 0 10px 24px -18px rgba(42, 29, 23, 0.5), 0 0 0 0 rgba(196, 99, 59, 0);
  }
  50% {
    box-shadow: inset 0 0 0 1px #e7d9c6, 0 10px 24px -18px rgba(42, 29, 23, 0.5), 0 0 0 6px rgba(196, 99, 59, 0.22);
  }
}
.h-hero__nastroj {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.h-hero__nastroj:hover {
  background: rgba(196, 99, 59, 0.07000000000000001);
}
.h-hero__nastroj:not(.h-hero__nastroj--ruka)::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--h-glazura);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.18), inset 0 2px 3px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(42, 29, 23, 0.14);
  transition: transform 0.22s cubic-bezier(0.3, 0.7, 0.3, 1), box-shadow 0.22s ease;
}
.h-hero__nastroj:not(.h-hero__nastroj--ruka):hover::before {
  transform: scale(1.1);
}
.h-hero__nastroj--ruka {
  color: #7d6252;
}
body.hlina .h-hero__nastroj--ruka i[data-coral-ikona] {
  width: 20px;
  height: 20px;
}
.h-hero__nastroj.je-aktivni {
  background: rgba(196, 99, 59, 0.12);
}
.h-hero__nastroj--ruka.je-aktivni {
  color: #c4633b;
}
.h-hero__nastroj.je-aktivni:not(.h-hero__nastroj--ruka)::before {
  transform: scale(1.12);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.18), inset 0 2px 3px rgba(255, 255, 255, 0.35), 0 0 0 2px #fbf6ef, 0 0 0 4px var(--h-glazura);
}
/* Nová hlína: šipka se při najetí pootočí, po kliknutí se otočí celá */
body.hlina .h-hero__znovu i[data-coral-ikona] {
  width: 16px;
  height: 16px;
}
body.hlina .h-hero__znovu:hover i[data-coral-ikona] {
  transform: rotate(-70deg);
}
body.hlina .h-hero__znovu.je-toci i[data-coral-ikona] {
  animation: h-hero-toc 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
}
@keyframes h-hero-toc {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}
/* vlastní kurzor webu nad hlínou: kroužek se nad hlínou zvětší, při
   tvarování sevře a při glazování vezme barvu glazury */
@media (pointer: fine) {
  /* velikost prstence nad hlínou řídí skript kurzoru v jádru, tady barvy */
  body.hlina.h-tvaruje .h-kurzor {
    border-color: #c4633b;
    background: rgba(196, 99, 59, 0.18);
  }
  body.hlina.h-glazuje.h-nad-hlinou .h-kurzor {
    border-color: var(--h-glazura);
    background: rgba(251, 246, 239, 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .h-hero__nastroje.je-zvyraznene {
    animation: none;
    box-shadow: 0 0 0 4px rgba(196, 99, 59, 0.22);
  }
  body.hlina .h-hero__znovu.je-toci i[data-coral-ikona] {
    animation: none;
  }
}
@media (min-width: 768px) {
  .h-hero {
    padding: 4px var(--h-gutter) 64px;
  }
  .h-hero__vnitrek {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "hlavicka kruh" "telo kruh";
    grid-template-rows: auto 1fr;
    column-gap: clamp(24px, 4vw, 56px);
    row-gap: 0;
    align-items: start;
  }
  .h-hero__hlavicka {
    align-self: end;
  }
  /* Hlína 70: na PC stojí nadpis v polovičním sloupci, velikost se proto
     počítá z něj (asi 15 % šířky sloupce), ne z celého okna: na tabletu se
     nadpis neláme po slovech a na PC zůstává 88 px */
  body.hlina .h-hero__nadpis {
    font-size: clamp(46px, 7vw, 88px);
  }
  .h-hero__telo {
    margin-top: 22px;
  }
  .h-hero__kruh {
    align-self: start;
  }
  .h-hero__cta .h-tl {
    flex: 0 0 auto;
  }
  .h-hero__fakta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 22px;
  }
  /* Hlína 70: kruh nepřeroste výšku okna (nízké okno notebooku, Edge se
     zvětšením): pod ním musí být vidět lišta i s nápovědou */
  /* Hlína 82 (Ondra: „ten rotační kruh je možná moc dole pod tím nápisem"):
     na PC jde celý kruh ještě o 5 % výš, ať nádoba stojí vedle nadpisu */
  .h-hero__deska {
    --h-deska: clamp(280px, calc(100svh - 230px), min(100%, 540px));
    width: min(100%, 540px);
    width: var(--h-deska);
    margin: calc(var(--h-deska) * -0.05) auto calc(var(--h-deska) * -0.06);
  }
}