/* ============================================================
   ProfiRuleta — SDÍLENÉ PRVKY VZHLEDU (všechny stránky, všechny jazyky)
   Načítá se ve všech třech layoutech HNED PO nav.css, tedy až po
   vlastních stylech stránky — tady definované prvky proto platí všude
   stejně. Jedna definice místo dřívějších 24 kopií v souborech stránek.

   Co sem patří: prvky, které mají na celém webu vypadat stejně a všude
   se stejně jmenují — badge nad nadpisem (.kicker), vedlejší obrysové
   tlačítko (.btn-ghost), nadpis sekce (.sec-head h2) a časté otázky (.faq).
   Vzor je homepage (inspirace uxpeak). Rozložení stránek (co je na
   střed, šířky sloupců) si řeší každá stránka sama.
   ============================================================ */
:root{--dur:.28s;--ease:cubic-bezier(.22,1,.36,1)}

/* ---------- badge nad nadpisem ---------- */
.kicker{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid rgba(var(--accent-rgb),.42);border-radius:999px;
  background:rgba(var(--accent-rgb),.14);font:800 11px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text);
  box-shadow:0 0 24px -5px rgba(var(--accent-rgb),.5),inset 0 1px 0 rgba(255,255,255,.07)}

/* ---------- vedlejší tlačítko: obrysové (vzor uxpeak „Learn more“) ----------
   .hero-tertiary a .sec-more a jsou vedlejší výzvy na homepage. */
.btn-ghost,.hero-tertiary,.sec-more a{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;background:transparent;color:var(--chalk);
  border:1px solid rgba(180,165,210,.24);font:600 15px var(--body);text-decoration:none;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.btn-ghost:hover,.hero-tertiary:hover,.sec-more a:hover{text-decoration:none;color:var(--accent-text);
  border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.06);
  box-shadow:0 6px 24px -10px rgba(var(--accent-rgb),.55);transform:translateY(-2px)}

/* ---------- nadpis sekce ----------
   Max 40 px (dřív 30). Nad nadpisem stojí ještě badge — o stupeň menší
   nadpis než u předlohy to vyvažuje. Zarovnání si řeší stránka. */
.sec-head h2{font-size:clamp(25px,3.3vw,40px);line-height:1.12;letter-spacing:-.02em;margin:16px 0 12px;text-wrap:balance}

/* ---------- časté otázky ----------
   Struktura <details>/<summary> zůstává (funguje bez JS, vyhledávače
   odpovědi vidí). Na hover jemné podbarvení, posun a fialová linka
   vlevo; otevřená otázka je podložená a plus se otočí na křížek;
   rozbalení se plynule animuje (::details-content + interpolate-size,
   prohlížeč, který to neumí, prostě otevře hned).
   Některé starší stránky měly „+“ jako absolutně umístěný text — proto
   se tu explicitně nulují pozice, písmo i obsah pseudo-prvků. */
.faq{interpolate-size:allow-keywords}
.faq details{position:relative;max-width:820px;margin:0;padding:0 24px;border-radius:16px;
  border:1px solid transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.faq details:not(:last-of-type)::after{content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:1px;
  background:rgba(237,242,246,.10);pointer-events:none;transition:opacity .35s}
.faq details:hover::after,.faq details[open]::after{opacity:0}
.faq details::before{content:"";position:absolute;left:-1px;top:20px;bottom:20px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent-text),rgba(var(--accent-rgb),.12));
  transform:scaleY(0);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.faq details:hover::before,.faq details[open]::before{transform:scaleY(1);opacity:1}
.faq details:hover{background-color:rgba(var(--accent-rgb),.04)}
.faq details[open]{background-color:rgba(21,32,44,.55);border-color:rgba(180,165,210,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.faq summary{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 0;font:600 16.5px/1.45 var(--body);color:var(--chalk);cursor:pointer;list-style:none;
  transition:transform .4s var(--ease),color .35s}
.faq summary::-webkit-details-marker{display:none}
.faq details:hover summary,.faq details[open] summary{transform:translateX(8px)}
.faq details[open] summary{color:#fff}
/* kolečko */
.faq summary::after{content:"";position:static;right:auto;top:auto;flex:none;width:32px;height:32px;border-radius:50%;
  font:0/0 a;color:transparent;
  background-color:rgba(21,32,44,.8);border:1px solid rgba(180,165,210,.14);
  transition:transform .4s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease)}
/* plus uvnitř kolečka (leží přesně nad ním) */
.faq summary::before{content:"";position:absolute;left:auto;right:0;top:50%;width:32px;height:32px;margin-top:-16px;
  background-color:var(--ash);
  -webkit-mask:linear-gradient(#000 0 0) center/12px 1.6px no-repeat,linear-gradient(#000 0 0) center/1.6px 12px no-repeat;
          mask:linear-gradient(#000 0 0) center/12px 1.6px no-repeat,linear-gradient(#000 0 0) center/1.6px 12px no-repeat;
  transition:transform .4s var(--ease),background-color .3s;z-index:1}
.faq details:hover summary::after{transform:scale(1.08);border-color:rgba(180,165,210,.28)}
.faq details:hover summary::before{transform:scale(1.08)}
.faq details[open] summary::after{background-color:var(--accent);border-color:var(--accent);transform:rotate(135deg)}
.faq details[open] summary::before{background-color:#fff;transform:rotate(135deg)}
/* plynulé rozbalení */
.faq details::details-content{block-size:0;overflow:hidden;
  transition:block-size .5s var(--ease),content-visibility .5s var(--ease) allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details > :not(summary){margin:0;padding:0 48px 26px 8px;max-width:none;color:var(--ash);font-size:15px;line-height:1.75}
.faq details > :not(summary) a{color:var(--accent-text)}
.faq details[open] > :not(summary){animation:faqIn .45s var(--ease) .06s both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}

/* ---------- souhlas s měřením (lišta dole, public/consent.js) ----------
   Obě volby mají stejnou váhu (velikost i viditelnost) — odmítnutí nesmí
   být schované ani menší, jinak souhlas není svobodný. Barvy s náhradou,
   protože lišta je i na stránkách simulátoru s vlastní sadou proměnných. */
.pr-consent{position:fixed;z-index:9000;left:50%;bottom:18px;width:min(760px,calc(100% - 32px));
  display:flex;align-items:center;gap:22px;padding:18px 20px 18px 24px;border-radius:18px;
  background:rgba(13,20,28,.96);border:1px solid rgba(180,165,210,.18);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:400 14px/1.55 var(--body,Inter,system-ui,sans-serif);color:var(--ash,#8C99A7);
  transform:translate(-50%,16px);opacity:0;transition:transform .45s var(--ease),opacity .35s}
.pr-consent.is-in{transform:translate(-50%,0);opacity:1}
.pr-consent[hidden]{display:none}
.pr-consent-txt{flex:1;min-width:0}
.pr-consent-txt b{display:block;margin-bottom:3px;font-weight:700;font-size:15px;color:var(--chalk,#EDF2F6)}
.pr-consent-txt p{margin:0}
.pr-consent-btns{display:flex;gap:10px;flex:none}
.pr-consent-btn{min-width:118px;padding:11px 20px;border-radius:999px;cursor:pointer;
  font:600 14px var(--body,Inter,system-ui,sans-serif);color:var(--chalk,#EDF2F6);
  background:transparent;border:1px solid rgba(180,165,210,.32);transition:background .25s,border-color .25s}
.pr-consent-btn:hover{border-color:rgba(var(--accent-rgb,139,108,255),.6);background:rgba(var(--accent-rgb,139,108,255),.08)}
.pr-consent-ok{background:var(--accent,#8B6CFF);border-color:var(--accent,#8B6CFF);color:#fff}
.pr-consent-ok:hover{background:var(--accent,#8B6CFF);filter:brightness(1.08)}
.pr-consent-btn:focus-visible,.pr-footer-linkbtn:focus-visible{outline:2px solid var(--accent-text,#C9B8FF);outline-offset:2px}
/* odkaz „Nastavení cookies“ v patičce — tlačítko, které vypadá jako ostatní odkazy */
.pr-footer-linkbtn{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.pr-footer-linkbtn:hover{color:var(--chalk,#EDF2F6);text-decoration:underline}
@media(max-width:640px){
  .pr-consent{flex-direction:column;align-items:stretch;gap:14px;bottom:12px;padding:18px}
  .pr-consent-btns .pr-consent-btn{flex:1;min-width:0}
}

@media(max-width:560px){
  .faq details{padding:0 16px}
  .faq summary{font-size:15.5px;padding:20px 0}
  .faq details > :not(summary){padding-right:8px}
}
@media(prefers-reduced-motion:reduce){
  .btn-ghost:hover,.hero-tertiary:hover,.sec-more a:hover{transform:none}
  .pr-consent{transition:none}
  .faq details::details-content{transition:none}
  .faq details[open] > :not(summary){animation:none}
  .faq details:hover summary,.faq details[open] summary{transform:none}
}