/* =========================================================
   Blok Skúsenosti — len rozloženie a správanie.
   Písmo a farby citátu si berie z témy (.quote, .who).
   ========================================================= */

.skusenosti{max-width:900px;margin:0 auto}
.skusenosti-nadpis{text-align:center;margin:0 0 26px}

.skusenosti{--sipka:42px}
/* Šípky sedia na strede najvyššieho ohlasu a z tej roviny sa nehnú —
   ani keď sa niektorý ohlas rozroluje. */
.skusenosti-ramec{
  display:flex;align-items:flex-start;gap:14px;justify-content:center
}
.skusenosti-ramec > .skusenosti-sipka{
  margin-top:calc((var(--zaklad, 200px) - var(--sipka)) / 2)
}

/* Ohlasy ležia na sebe — panel si tak drží výšku najdlhšieho
   a prepnutie nepreskakuje obsah pod ním. */
/* Ohlasy ležia na sebe a zvisle sa centrujú. Keď je jeden dlhý a ostatné
   krátke, panel si výšku neberie od najdlhšieho — JS ju dorovná podľa toho,
   ktorý je práve zobrazený (`--vyska`). Bez JS ostáva pôvodné správanie. */
.skusenosti-pas{display:grid;flex:1 1 auto;min-width:0;align-items:center}
/* So zapnutým JS ohlasy vrstvíme cez `position` — mriežka by si totiž
   výšku riadka vzala od najdlhšieho ohlasu a panel by sa nemal ako zmenšiť. */
/* Panel si drží výšku najdlhšieho ohlasu (`--zaklad`), takže prepínanie
   nič neposúva. Vyšší je len vtedy, keď si niekto rozroluje pokračovanie. */
.skusenosti.je-pripravena .skusenosti-pas{
  display:block;position:relative;
  height:max(var(--zaklad, 0px), var(--vyska, 0px));
  transition:height .34s ease
}
.skusenosti.je-pripravena .skusenosti-polozka{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  transition:opacity .34s ease,visibility 0s linear .34s
}
.skusenosti.je-pripravena .skusenosti-polozka.je-aktivna{transform:translateY(-50%)}
/* Rozrolovaný ohlas rastie nadol, nie na obe strany — začiatok textu
   tak zostane tam, kde bol. */
.skusenosti.je-pripravena .skusenosti-polozka.je-vyssia,
.skusenosti.je-pripravena .skusenosti-polozka.je-vyssia.je-aktivna{
  top:0;transform:none
}
/* Prvé nastavenie výšky musí prebehnúť bez animácie — inak prehliadač
   začne prechod z nulovej výšky a panel sa neotvorí. */
.skusenosti.bez-prechodu .skusenosti-pas{transition:none}
@media(prefers-reduced-motion:reduce){
  .skusenosti.je-pripravena .skusenosti-pas{transition:none}
}
.skusenosti-polozka{
  grid-area:1 / 1;margin:0 auto;justify-self:center;width:100%;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .34s ease,transform .34s ease,visibility 0s linear .34s
}
.skusenosti-polozka.je-aktivna{
  opacity:1;visibility:visible;transform:none;transition-delay:0s
}
.skusenosti-polozka p{margin:0}
.skusenosti-uryvok p + p,
.skusenosti-zvysok p{margin-top:.85em}
.skusenosti-zvysok[hidden]{display:none}

/* Tlačidlo „Celá skúsenosť“ */
.skusenosti-viac-obal{margin:18px 0 0}
/* Tlačidlo je v rovnakom písme aj veľkosti ako samotný ohlas, nech ho
   návštevníčka neprehliadne. */
.skusenosti-viac{
  cursor:pointer;border:0;background:transparent;padding:2px 2px 3px;
  font-family:inherit;font-size:inherit;line-height:inherit;font-style:normal;
  color:var(--terra,#B4693B);
  border-bottom:2px solid currentColor;transition:color .2s ease,border-color .2s ease
}
.skusenosti-viac:hover,.skusenosti-viac:focus-visible{
  color:var(--brown,#795B33)
}
.skusenosti-viac .skusenosti-viac-zavri{display:none}
.skusenosti-viac[aria-expanded="true"] .skusenosti-viac-otvor{display:none}
.skusenosti-viac[aria-expanded="true"] .skusenosti-viac-zavri{display:inline}

/* Bez JavaScriptu (alebo v editore) nech sú vidno všetky pod sebou. */
.skusenosti:not(.je-pripravena) .skusenosti-pas{display:block}
.skusenosti:not(.je-pripravena) .skusenosti-polozka{
  opacity:1;visibility:visible;transform:none
}
.skusenosti:not(.je-pripravena) .skusenosti-polozka + .skusenosti-polozka{margin:34px auto 0}
.skusenosti:not(.je-pripravena) .skusenosti-sipka,
.skusenosti:not(.je-pripravena) .skusenosti-gulicky{display:none}

.skusenosti-sipka{
  flex:0 0 auto;width:42px;height:42px;border-radius:999px;cursor:pointer;
  border:1px solid currentColor;background:transparent;color:inherit;opacity:.45;
  position:relative;transition:opacity .2s ease,transform .2s ease
}
.skusenosti-sipka:hover,.skusenosti-sipka:focus-visible{opacity:1}
.skusenosti-sipka::before{
  content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor
}
.skusenosti-sipka.je-vlavo::before{transform:translateX(2px) rotate(-135deg)}
.skusenosti-sipka.je-vpravo::before{transform:translateX(-2px) rotate(45deg)}

.skusenosti-gulicky{
  display:flex;gap:9px;justify-content:center;margin:26px 0 0
}
.skusenosti-gulicka{
  width:9px;height:9px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid currentColor;background:transparent;color:inherit;opacity:.35;
  transition:opacity .2s ease,transform .2s ease
}
.skusenosti-gulicka:hover{opacity:.7}
.skusenosti-gulicka.je-aktivna{opacity:1;background:currentColor;transform:scale(1.2)}

@media(max-width:620px){
  .skusenosti{--sipka:34px}
  .skusenosti-ramec{gap:6px}
  .skusenosti-sipka{width:34px;height:34px}
}

@media(prefers-reduced-motion:reduce){
  .skusenosti-polozka{transition-duration:.01ms}
}