/* ============================================================
   TLAČÍTKA — společná soustava webu Martiny Bajerové
   Jeden soubor pro celý web. Když se má něco změnit, mění se tady.
   Verze 1, 5. 8. 2026.

   Dva druhy:
     .mb-tl.mb-tl--zlate    plné zlaté   — tam, kam chceme vést
     .mb-tl.mb-tl--prazdne  jen rámeček  — možné prokliknout, ale méně důležité

   Společné chování: při najetí se obě lehce zvětší (4 %).
   Navíc u zlatého: přechod se přelije — světlá jde nahoru, tmavá dolů.
   Prázdné se ZÁMĚRNĚ nepřebarvuje, jen se zvětší.
   ============================================================ */

:root{
  /* hlubší zlatá — bílé písmo na ní má 3,90:1 nahoře a 3,01:1 dole */
  --mb-zlata-tmava:#9c7c46;
  --mb-zlata-svetla:#b28f59;
  --mb-bila:#ffffff;

  --mb-zvetseni:1.04;          /* okraj se posune o 8 px u tlačítka širokého 400 px */
  --mb-stisk:.98;
  --mb-cas-rychle:130ms;
  --mb-cas-stred:200ms;
  --mb-vyjezd:cubic-bezier(0,0,.2,1);
}

.mb-tl{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Playfair Display',Georgia,serif; font-size:1.05rem; line-height:1.25;
  padding:1rem 2.2rem; min-height:52px;
  border-radius:9999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform:scale(1);
  transition:transform var(--mb-cas-rychle) var(--mb-vyjezd);
}
.mb-tl > span{position:relative; z-index:2}

/* obě se při najetí lehce zvětší — tohle je ta společná linka.
   POZOR: jen tam, kde myš opravdu je. Na dotykovém displeji se :hover po klepnutí
   „zasekne" a tlačítko zůstane zvětšené, dokud člověk neklepne jinam. */
@media (hover:hover) and (pointer:fine){
  .mb-tl:hover{transform:scale(var(--mb-zvetseni))}
}
.mb-tl:focus-visible{transform:scale(var(--mb-zvetseni))}
.mb-tl:active{transform:scale(var(--mb-stisk))}

/* na dotyku je stisk jediná odezva, kterou člověk dostane — o kousek výraznější */
@media (hover:none){
  .mb-tl:active{transform:scale(.965)}
}
.mb-tl:focus-visible{outline:2px solid var(--mb-zlata-tmava); outline-offset:3px}

/* ---------- PLNÉ ZLATÉ ---------- */
.mb-tl--zlate{color:var(--mb-bila); font-weight:500;
  box-shadow:0 8px 20px -14px rgba(120,90,50,.9);
  transition:transform var(--mb-cas-rychle) var(--mb-vyjezd),
             box-shadow var(--mb-cas-stred) var(--mb-vyjezd);
}
/* dvě vrstvy, které se překříží — přechody se v CSS animovat nedají */
.mb-tl--zlate::before,.mb-tl--zlate::after{
  content:""; position:absolute; inset:0; z-index:1;
  transition:opacity var(--mb-cas-stred) var(--mb-vyjezd);
}
.mb-tl--zlate::before{
  background:linear-gradient(to bottom,var(--mb-zlata-tmava) 0%,var(--mb-zlata-svetla) 100%);
  opacity:1;
}
.mb-tl--zlate::after{
  background:linear-gradient(to bottom,var(--mb-zlata-svetla) 0%,var(--mb-zlata-tmava) 100%);
  opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .mb-tl--zlate:hover::before{opacity:0}
  .mb-tl--zlate:hover::after{opacity:1}
  .mb-tl--zlate:hover{box-shadow:0 12px 26px -14px rgba(120,90,50,.95)}
}
.mb-tl--zlate:focus-visible::before{opacity:0}
.mb-tl--zlate:focus-visible::after{opacity:1}
.mb-tl--zlate:focus-visible{box-shadow:0 12px 26px -14px rgba(120,90,50,.95)}

/* ---------- PRÁZDNÉ ---------- */
/* barvu záměrně nemění — jen se zvětší. Je to tišší signál pro méně důležité odkazy. */
.mb-tl--prazdne{
  color:var(--mb-zlata-tmava);
  border-color:var(--mb-zlata-tmava);
  background:transparent;
  font-weight:400;
}

/* ---------- menší varianta do karet ---------- */
.mb-tl--mensi{font-size:clamp(.9rem,2.3vw,1rem); padding:.85rem 1.5rem; min-height:48px}

/* ---------- na telefonu přes celou šířku ---------- */
@media (max-width:767px){
  .mb-tl--siroke{width:100%}
}

/* ---------- kdo si vypnul animace ---------- */
@media (prefers-reduced-motion:reduce){
  .mb-tl,.mb-tl::before,.mb-tl::after{transition-duration:1ms !important}
  .mb-tl:hover,.mb-tl:focus-visible,.mb-tl:active{transform:none !important}
  /* zlaté si i tak přelije přechod, jen bez pohybu */
}