/* Tym - varianta A (stranka Kontakt): adresar lidi hned pod hero, nad kontaktnimi kartami.
   Bez ramecku karet: velky kruhovy portret s posunutym zlutym kruhem ("sluncem") za sebou,
   pod nim jmeno, pozice a e-mail. Hlavicka jako ostatni h2 na strance ("Nebo vyuzijte formular").
   Cela osoba je jeden roztazeny odkaz (mailto) jako dlazdice webu. */

.tym{position:relative;padding:40px 0 88px;}

.tym .tym__nadpis{text-align:center;margin:0 auto 16px;max-width:560px;text-wrap:balance;}
.tym .tym__perex{text-align:center;max-width:680px;margin:0 auto 64px;}
.tym .tym__perex p{margin:0 0 16px;text-wrap:pretty;}
.tym .tym__perex p:last-child{margin-bottom:0;}

.tym__mrizka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 40px;max-width:1000px;margin:0 auto;}

.tym .tym__osoba{position:relative;container-type:inline-size;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;}

/* portret: zhruba tak siroky jako text pod nim; zluty kruh posunuty vpravo dolu, pri najeti se preklopi.
   Dokud se fotka nenacte, misto oriznuteho alt textu jen cisty kruh. */
.tym .tym__foto{width:200px;height:200px;max-width:none;border-radius:50%;object-fit:cover;margin:0 auto 32px;background:#EDE2E9;color:transparent;font-size:0;overflow:hidden;box-shadow:12px 10px 0 0 #FAE600;transition:box-shadow .35s ease;}

.tym .tym__jmeno{font-size:24px;line-height:30px;letter-spacing:0.24px;margin:0 0 6px;}
.tym .tym__pozice{font-size:15px;line-height:22px;letter-spacing:0.15px;color:rgba(45,30,40,0.7);margin:0 0 14px;}
/* e-mail drobny, bez tucneho pisma a bez podtrzeni (Honza 28. 9. 2026); nikdy se nezalamuje */
.tym .tym__email{font-family:"poppins",sans-serif;font-weight:400;font-size:15px;line-height:22px;letter-spacing:0.15px;color:#2D1E28;text-decoration:none;white-space:nowrap;}
.tym .tym__email::after{content:"";position:absolute;inset:-12px;z-index:1;border-radius:8px;}
@media (hover:hover){
  .tym .tym__osoba:hover .tym__foto{box-shadow:-12px 10px 0 0 #FAE600;}
}
/* web ma globalne *:focus{outline:none} - pri ovladani klavesnici oramujeme celou osobu */
.tym .tym__email:focus-visible::after{outline:2px solid #2D1E28;outline-offset:0;}

/* Tablet: porad 3 x 3, jen mensi */
@media screen and (max-width:1023px){
  .tym__mrizka{gap:56px 20px;}
  .tym .tym__foto{width:160px;height:160px;margin-bottom:26px;box-shadow:10px 8px 0 0 #FAE600;}
  .tym .tym__osoba:hover .tym__foto{box-shadow:-10px 8px 0 0 #FAE600;}
  .tym .tym__jmeno{font-size:20px;line-height:26px;letter-spacing:0.2px;}
  .tym .tym__pozice{font-size:14px;line-height:20px;margin-bottom:12px;}
  .tym .tym__email{font-size:14px;line-height:20px;letter-spacing:0.14px;}
}

/* Mobil: kompaktni radky oddelene linkou - portret vlevo, text vpravo */
@media screen and (max-width:767px){
  .tym{padding:24px 0 56px;}
  .tym .tym__perex{margin-bottom:16px;}
  .tym__mrizka{grid-template-columns:minmax(0,1fr);gap:0;}
  .tym .tym__osoba{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:20px;align-items:center;text-align:left;padding:18px 0;border-bottom:1px solid #EDE2E9;}
  .tym .tym__osoba:last-child{border-bottom:0;}
  .tym .tym__foto{grid-column:1;grid-row:1 / -1;width:88px;height:88px;margin:0;box-shadow:6px 5px 0 0 #FAE600;}
  .tym .tym__osoba:hover .tym__foto{box-shadow:-6px 5px 0 0 #FAE600;}
  .tym .tym__jmeno{grid-column:2;grid-row:2;font-size:20px;line-height:24px;letter-spacing:0.2px;margin:0 0 2px;}
  .tym .tym__pozice{grid-column:2;grid-row:3;font-size:14px;line-height:20px;letter-spacing:0.14px;margin:0 0 6px;}
  /* sloupec textu = sirka radku - portret 96 - mezera 20 */
  .tym .tym__email{grid-column:2;grid-row:4;justify-self:start;margin:0;font-size:14px;line-height:20px;}
  .tym .tym__email::after{inset:0;border-radius:0;}
}
/* telefon na sirku / maly tablet: seznam jako kompaktni sloupec na stredu */
@media screen and (min-width:560px) and (max-width:767px){
  .tym__mrizka{max-width:520px;}
}
/* uzke telefony: o chlup mensi portret, aby e-mailu zbylo misto */
@media screen and (max-width:374px){
  .tym .tym__osoba{grid-template-columns:76px minmax(0,1fr);column-gap:16px;}
  .tym .tym__foto{width:72px;height:72px;box-shadow:5px 4px 0 0 #FAE600;}
  .tym .tym__osoba:hover .tym__foto{box-shadow:-5px 4px 0 0 #FAE600;}
}

/* DOCASNE (28. 9. 2026): anglicky nazev pozice na nizsim radku, vychozi stav jen cesky.
   Nenapadny prepinac pod mrizkou (ladeni.js, i ?pozice=en) - po vyberu varianty odstranit. */
.tym .tym__pozice-en{display:none;font-size:13px;line-height:18px;letter-spacing:0.3px;color:rgba(45,30,40,0.5);margin:0 0 14px;}
.tym.tym--en .tym__pozice{margin-bottom:2px;}
.tym.tym--en .tym__pozice-en{display:block;}
.tym .tym__prepinac{text-align:center;margin:48px 0 0;}
.tym .tym__prepinac-btn{font:500 10px/14px "poppins",sans-serif;letter-spacing:0.6px;color:rgba(45,30,40,0.35);background:transparent;border:1px solid rgba(45,30,40,0.12);border-radius:3px;padding:2px 7px;cursor:pointer;}
.tym .tym__prepinac-btn:hover,.tym .tym__prepinac-btn:focus-visible{color:#2D1E28;border-color:rgba(45,30,40,0.4);}
@media screen and (max-width:1023px){
  .tym.tym--en .tym__pozice{margin-bottom:2px;}
  .tym .tym__pozice-en{font-size:12px;line-height:17px;margin-bottom:12px;}
}
@media screen and (max-width:767px){
  .tym.tym--en .tym__osoba{grid-template-rows:1fr auto auto auto auto 1fr;}
  .tym.tym--en .tym__pozice{margin:0;}
  .tym .tym__pozice-en{grid-column:2;grid-row:4;margin:0 0 6px;}
  .tym.tym--en .tym__email{grid-row:5;}
  .tym .tym__prepinac{margin-top:24px;}
}

/* ===== Karty nad týmem (Honza 29. 9. 2026): projekty → Jan, práce → Lucie; nahrazují dvouodstavcový perex ===== */
.tym .tym__perex.tym__karty{max-width:1100px;margin:0 auto 64px;display:grid;grid-template-columns:1fr 1fr;gap:28px;text-align:left;}
.tym .tym__karta{background:#FAF8F5;border:1px solid #F0E9EE;border-top:4px solid #FAE600;border-radius:8px;padding:30px 32px 32px;display:flex;flex-direction:column;}
.tym .tym__karta-stitek{font-family:"bc-novatica-cyr",sans-serif;font-size:14px;line-height:20px;letter-spacing:1.4px;text-transform:uppercase;font-weight:500;color:#6C6269;margin:0 0 10px;}
.tym .tym__karta h3{font-size:24px;line-height:30px;margin:0 0 12px;}
.tym .tym__perex .tym__karta p{margin:0 0 22px;}
.tym .tym__karta-osoba{display:flex;gap:16px;align-items:center;margin-top:auto;}
.tym .tym__karta-osoba img{width:64px;height:64px;max-width:none;margin:0;border-radius:50%;box-shadow:5px 4px 0 #FAE600;flex:0 0 64px;}
.tym .tym__karta-osoba > div{flex:1 1 auto;min-width:0;}
.tym .tym__karta-osoba strong{display:block;font-family:"bc-novatica-cyr",sans-serif;font-size:18px;line-height:22px;}
.tym .tym__karta-osoba span{display:block;font-size:14px;line-height:20px;color:#6C6269;}
.tym .tym__karta-osoba a{font-size:15px;font-weight:600;color:#2D1E28;}
@media screen and (max-width:767px){
  .tym .tym__perex.tym__karty{grid-template-columns:1fr;gap:16px;margin-bottom:40px;}
  .tym .tym__karta{padding:24px 20px;}
}