/* ==========================================================================
   CLEANTIME: sekcia dôvery na úvodnej stránke
   Samostatný súbor zámerne. cleantime-home.css je build výstup Tailwindu
   a pri najbližšom builde by sa zmeny v ňom stratili.
   ========================================================================== */

body[data-page="home"] .trust {
  padding: clamp(72px, 9vw, 128px) 0;
  background: var(--paper, #f8f8f4);
}
body[data-page="home"] .trust-panel {
  position: relative; isolation: isolate;
  width: min(1160px, calc(100% - 96px)); margin: 0 auto;
  padding: clamp(48px, 7vw, 104px) clamp(28px, 5vw, 88px);
  border-radius: 26px; overflow: hidden;
  /* Prechod z jemnej modrej do bielej. Odtiene sú zriedená farba tlačidiel
     (--lime, #52bdec), takže panel drží rovnakú modrú ako zvyšok webu.
     Predtým tu bola hlinená béžová, ktorá s tlačidlami nesúvisela. */
  background: linear-gradient(128deg, #b1e1f6 0%, #d4eefa 52%, #ffffff 100%);
}
/* Žiara musí prekrývať celý panel. Predtým začínala až na 52 % šírky
   (inset: ... auto 52%), takže ľavý okraj prvku rezal gradient a v strede
   panela vznikol ostrý zvislý predel. Na širokom paneli to ešte zanikalo,
   na úzkom telefóne bol šev jasne vidieť. Teraz prvok presahuje panel na
   všetkých stranách a orezáva ho až zaoblenie rodiča.

   Na modrom podklade je žiara biela, nie modrá. Modrá na modrej by len
   pridala sýtosť, biela drží panel vzdušný a podporí prechod do bielej. */
body[data-page="home"] .trust-panel::before {
  position: absolute; z-index: -1; inset: -35%;
  background: radial-gradient(circle at 76% 24%, rgba(255, 255, 255, .55), transparent 56%);
  content: ''; pointer-events: none;
}
body[data-page="home"] .trust-panel .eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0;
  color: #536b75; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
body[data-page="home"] .trust-panel .eyebrow::before {
  width: 20px; height: 1px; background: currentColor; content: '';
}
body[data-page="home"] .trust-panel h2 {
  max-width: 17ch; margin: 26px 0 0;
  font: clamp(2.3rem, 4.6vw, 4.4rem)/.92 var(--serif);
  letter-spacing: -.065em; text-wrap: balance; color: var(--ink);
}
/* --------------------------------------------------------------------------
   Písanie nadpisu na stroji

   Nadpis sa pri príchode do obrazu odhaľuje znak po znaku a kurzor beží
   za posledným napísaným písmenom. Kurzor je odsadený absolútne, aby sa
   pohyboval bez toho, že by čokoľvek posúval. Preto má nadpis position:
   relative, kurzor sa počíta voči nemu.

   Znaky sú inline-block, inak by sa nedali posúvať ani rozmazávať. Slová
   preto potrebujú vlastný obal s nowrap, aby sa riadok zalomil medzi slovami
   a nie uprostred slova.
   -------------------------------------------------------------------------- */
body[data-page="home"] .trust-panel h2 {
  position: relative;
}
body[data-page="home"] .trust-type-word {
  display: inline-block;
  white-space: nowrap;
}
body[data-page="home"] .trust-type-char {
  display: inline-block;
}
body[data-page="home"] .trust-type-caret {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: .72em;
  margin-top: .1em;
  border-radius: 2px;
  background: var(--ink, #17201c);
  pointer-events: none;
}
/* Blikanie po dopísaní rieši GSAP na časovej osi, nie animácia tu.
   Osu vie previnúť späť, keď sa vyroluje nahor, takže sa stav vždy vráti. */

/* Pri obmedzenom pohybe kurzor zostáva, len neposkakuje a neblikne.
   Rieši to časová os v app.js, tu netreba nič vypínať. */

/* Text bol ladený na hlinený podklad, preto bol dohneda. Na modrej pôsobí
   hnedá špinavo, tieto tóny sú rovnako tmavé, len chladné. */
body[data-page="home"] .trust-lead {
  max-width: 46ch; margin: 26px 0 0;
  color: #354a55; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.62;
}

body[data-page="home"] .trust-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(42px, 5vw, 66px) 0 0;
  border-top: 1px solid rgba(23, 48, 60, .16);
}
body[data-page="home"] .trust-facts > div {
  padding: 24px 26px 4px 0;
  border-right: 1px solid rgba(23, 48, 60, .16);
}
body[data-page="home"] .trust-facts > div:last-child { border-right: 0; }
body[data-page="home"] .trust-facts > div + div { padding-left: 26px; }
body[data-page="home"] .trust-facts dt {
  margin: 0 0 8px; color: var(--ink);
  font: 1.42rem/1.1 var(--serif); letter-spacing: -.035em;
}
body[data-page="home"] .trust-facts dd {
  margin: 0; max-width: 26ch; color: #41565f; font-size: .9rem; line-height: 1.55;
}

@media (max-width: 860px) {
  body[data-page="home"] .trust-facts { grid-template-columns: 1fr; }
  body[data-page="home"] .trust-facts > div {
    padding: 20px 0 4px; border-right: 0;
    border-bottom: 1px solid rgba(23, 48, 60, .16);
  }
  body[data-page="home"] .trust-facts > div + div { padding-left: 0; }
  body[data-page="home"] .trust-facts > div:last-child { border-bottom: 0; }
}
@media (max-width: 720px) {
  body[data-page="home"] .trust-panel { width: 89%; border-radius: 18px; }
  /* Na vysokom úzkom paneli pôsobí uhlopriečny prechod nepokojne,
     zvislejší uhol prejde plynulejšie a s menej viditeľnými pásmi. */
  body[data-page="home"] .trust-panel {
    background: linear-gradient(168deg, #b1e1f6 0%, #c8e9f9 38%, #e2f3fc 70%, #ffffff 100%);
  }
  body[data-page="home"] .trust-panel::before {
    inset: -25% -25% auto -25%; height: 78%;
    background: radial-gradient(ellipse 120% 70% at 72% 0, rgba(255, 255, 255, .5), transparent 62%);
  }
}