/* Vzor P05: karusel karet, ktery je sirsi nez hlavicka a pretekca obe jeji hrany.
   Karta ma fotku na cele plose a popisky dole, sipky posouvaji o jednu kartu.
   Hodnoty nactene z jejich stylesheetu (source/sections/05.css):
     sekce: background gray-100, section-radius 48, spacer-48 nahore, spacer-128 dole
     hlavicka .talents-slider_header: space-between, align center, pod ni spacer-32
     nadpis .text-20 .weight-semibold .lh-128, barva gray-900
     sipka .button.is-white.is-icon: r14, padding 12, bg gray-50, border 1px white, gap 10
     hlavicka je v container-1280, karusel v container-1344, odtud presah 32 na kazdou stranu
     karta .case_slide: border-radius 36, overflow hidden, obrazek 100 %
     popisky .slide-info-container: absolutne dole, padding 24 24 34, gap 6, bila
     .case-footer: space-between, align-end | .case-tags_wrapper gap 6
     stitek .case-tag: border 1px white, r12, padding 4px 8px, 12px / 164 %, weight 400
     tmavy stitek .dark-tag: barva gray-900, border rgba(24,24,27,.3)
     druhy pas .achievements-slide: border 1px gray-300, r36, padding 24, gap 32,
       nazev 20 / 148 bold, popis 14 / 168 weight 300, cislo 32 bold / 150
     mezi pasy spacer-128, karty pasu max-width 390, mezera 12 */

.p05{ padding-block:var(--sp-48) 128px; overflow:hidden; }

.p05__head{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-24); }
.p05__head--second{ margin-block-start:128px; }
.p05__lead{
  margin:0; max-width:640px;
  font-size:var(--fs-20); line-height:var(--lh-128); font-weight:600; color:var(--zinc-900);
}
.p05__lead--short{ max-width:420px; }
.p05__nav{ display:flex; gap:var(--sp-12); flex:none; }
.p05__ico{
  width:40px; height:40px; padding:12px; flex:none;
  transition:background-color .25s, opacity .25s;
}
.p05__ico:disabled{ opacity:.35; cursor:default; }

/* Karusel je souvisly prvek, takze nekonci na hrane obsahu, ale pokracuje
   za pravy okraj obrazovky. Leva hrana zustava zarovnana s hlavickou sekce,
   prava se pusti az k okraji okna, aby bylo videt, ze pas jeste nekonci. */
.p05__wide{
  width:auto; max-width:none; margin-block-start:var(--sp-32);
  margin-inline-start:max(var(--gutter), calc(50vw - var(--container-1280) / 2));
  margin-inline-end:0;
}
.p05__track{ padding-inline-end:var(--gutter); }

/* Okraj .container se lomí v p00.css na 48, 24 a 16. Pas karet o tom sam od sebe
   nevi, takze bez techto zlomu zustava na 80 a rozejde se s nadpisem sekce. */
@media (max-width:1279px){
  .p05__wide{ margin-inline-start:var(--sp-48); }
  .p05__track{ padding-inline-end:var(--sp-48); }
}
@media (max-width:767px){
  .p05__wide{ margin-inline-start:var(--sp-24); }
  .p05__track{ padding-inline-end:var(--sp-24); }
  /* Na uzkem displeji se stitky rozsahu praci nevejdou vedle sebe a rozbijeji
     kartu. Zustava nazev realizace, ktery nese informaci sam o sobe. */
  .p05__card .p05__tags, .p05__card [class*="__tags"]{ display:none; }
}
@media (max-width:479px){
  .p05__wide{ margin-inline-start:var(--sp-16); }
  .p05__track{ padding-inline-end:var(--sp-16); }
}

.p05__track{
  display:flex; gap:var(--sp-12);
  overflow-x:auto; overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.p05__track::-webkit-scrollbar{ display:none; }
.p05__track > *{ scroll-snap-align:start; }

/* karta */
.p05__card{
  position:relative; flex:none; display:block; text-decoration:none;
  width:654px; aspect-ratio:3/2;
  border-radius:var(--r-card); overflow:hidden; background:var(--zinc-200);
}
.p05__img{ width:100%; height:100%; object-fit:cover; }
.p05__card::after{
  content:""; position:absolute; inset:auto 0 0; height:60%; pointer-events:none;
  background:linear-gradient(to top, rgba(9,9,11,.72), rgba(9,9,11,0));
}
.p05__info{
  position:absolute; inset:auto 0 0; z-index:2;
  display:flex; flex-direction:column; gap:6px;
  padding:0 var(--sp-24) 34px; color:var(--zinc-0);
}
.p05__name{
  margin:0; max-width:420px;
  font-size:var(--fs-20); line-height:var(--lh-156); font-weight:600;
}
.p05__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-12); }
.p05__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.p05__tag{
  border:1px solid var(--zinc-0); border-radius:var(--r-chip);
  padding:4px 8px; font-size:var(--fs-12); line-height:var(--lh-164); font-weight:400;
}
.p05__go{
  flex:none; width:40px; height:40px; border-radius:var(--r-button);
  background:var(--zinc-50); color:var(--zinc-900); border:1px solid var(--zinc-0);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .25s;
}
.p05__card:hover .p05__go{ background:var(--zinc-0); }

/* posledni karta karuselu je vyzva k akci */
.p05__card--cta .p05__img{ filter:brightness(.62); }
.p05__cta{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-40); padding:var(--sp-32); text-align:center;
}
.p05__ctah{
  margin:0; color:var(--zinc-0);
  font-size:var(--fs-40); line-height:var(--lh-128); font-weight:600;
}

/* druhy pas, karty skupin zakazniku */
.p05__track--stats{ align-items:stretch; }
.p05__stat{
  flex:none; width:390px;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-32);
  border:1px solid var(--zinc-300); border-radius:var(--r-card);
  padding:var(--sp-24); background:transparent;
}
.p05__statTop{ display:flex; align-items:center; gap:var(--sp-12); }
.p05__badge{
  width:30px; height:30px; border-radius:var(--r-chip); flex:none;
  background:var(--zinc-900); color:var(--zinc-0);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-12); font-weight:600; letter-spacing:.02em;
}
.p05__statName{ font-size:var(--fs-20); line-height:var(--lh-148); font-weight:700; color:var(--zinc-900); }
.p05__statText{
  margin:var(--sp-8) 0 0; color:var(--zinc-600);
  font-size:var(--fs-14); line-height:var(--lh-168); font-weight:300;
}
.p05__statLabel{ margin:0; font-size:var(--fs-14); line-height:var(--lh-168); font-weight:600; }
.p05__statNum{ margin:0; font-size:var(--fs-32); line-height:var(--lh-150); font-weight:700; color:var(--zinc-950); }

/* Posuvnik pred a po. Ma ho zatim prvni tri karty, u kterych mame skutecnou
   dvojici fotek. Zbyle karty cekaji na fotky od klienta a zustavaji beze zmeny.
   Vrstveni: .p05ba zamerne nedela stacking context (z-index zustava auto),
   takze carka lezi nad prechodem .p05__card::after, popisky pod .p05__info
   a uchyt nad vsim, aby sel vzdy chytit. */
.p05ba{
  --ba:50%;
  position:absolute; inset:0;
  cursor:ew-resize; -webkit-user-select:none; user-select:none;
}
.p05ba__layer{ position:absolute; inset:0; }
/* spodni vrstva je stav pred zasahem, horni se orizne od delici carky doprava */
.p05ba__after{ position:absolute; inset:0; clip-path:inset(0 0 0 var(--ba)); }

.p05ba__line{
  position:absolute; top:0; bottom:0; left:var(--ba); z-index:1;
  width:2px; margin-inline-start:-1px;
  background:var(--zinc-0); pointer-events:none;
}

/* popisky maji tvar stitku .p05__tag, ale svetlou vypln jako .p05__go,
   aby cetly i nad svetlou oblohou v horni casti fotky */
.p05ba__label{
  position:absolute; top:var(--sp-24); z-index:2; pointer-events:none;
  border:1px solid var(--zinc-0); border-radius:var(--r-chip);
  background:var(--zinc-50); color:var(--zinc-900);
  padding:4px 8px; font-size:var(--fs-12); line-height:var(--lh-164); font-weight:400;
}
.p05ba__label--before{ left:var(--sp-24); }
.p05ba__label--after{ right:var(--sp-24); }

/* uchyt ma stejnou masku jako .p05__go a sipky karuselu: 40 x 40, r14, zinc-50 */
.p05ba__handle{
  position:absolute; top:50%; left:var(--ba); z-index:3;
  transform:translate(-50%,-50%);
  width:40px; height:40px; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--zinc-0); border-radius:var(--r-button);
  background:var(--zinc-50); color:var(--zinc-900);
  cursor:ew-resize; touch-action:none; /* prst na uchytu nesmi rolovat pas karet */
  transition:background-color .25s;
}
.p05__card:hover .p05ba__handle,
.p05ba__handle:hover{ background:var(--zinc-0); }
.p05ba__handle:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--zinc-900), 0 0 0 4px var(--zinc-0);
}

/* plynuly posun jen pri ovladani klavesnici, tazeni musi sledovat prst presne */
.p05ba--anim .p05ba__after{ transition:clip-path .18s ease; }
.p05ba--anim .p05ba__line{ transition:left .18s ease; }
.p05ba--anim .p05ba__handle{ transition:left .18s ease, background-color .25s; }

@media (max-width:640px){
  .p05ba__label{ top:var(--sp-20); }
  .p05ba__label--before{ left:var(--sp-20); }
  .p05ba__label--after{ right:var(--sp-20); }
}

@media (prefers-reduced-motion:reduce){
  .p05ba__handle,
  .p05ba--anim .p05ba__after,
  .p05ba--anim .p05ba__line,
  .p05ba--anim .p05ba__handle{ transition:none; }
}

@media (max-width:1023px){
  .p05{ padding-block:var(--sp-36) 92px; }
  .p05__head--second{ margin-block-start:92px; }
  .p05__nav{ display:none; }
  .p05__card{ width:76vw; }
  .p05__info{ padding:0 var(--sp-20) var(--sp-20); }
  .p05__stat{ width:min(390px,80vw); gap:var(--sp-20); }
  .p05__ctah{ font-size:var(--fs-32); }
}
@media (max-width:640px){
  .p05__card{ width:86vw; aspect-ratio:4/3; }
  .p05__name{ font-size:var(--fs-16); line-height:var(--lh-150); max-width:250px; }
  .p05__foot{ flex-direction:column; align-items:flex-start; }
}