/* Vzor P04: bento mrizka, tri sloupce po 1fr, v kazdem jine vnitrni deleni.
   Hodnoty nactene z jejich stylesheetu (source/sections/04.css):
     mrizka: grid-template-columns 1fr 1fr 1fr, gap 12 | sloupec: flex column, gap 12
     kontejner 1344, padding-global 40 | nadpis 40px/128% na stred, pod nim 48
     dlazdice: bg zinc-100, r36, padding 28
     dlazdice s cislem: padding-top 28, padding-bottom 64, mezera 74, obsah space-between
     dlazdice s fotkou: min-height 495, overflow hidden, portret 138x138
     dlazdice se seznamem: padding-top 64, padding-inline 0, radky gap 6
     cislo 32px/700/150% | popisek 20px/600/156%
     stitek: border 1px zinc-200, r12, padding 4px 8px, 13px/150%
     zvyrazneny stitek: bg zinc-700, text zinc-50
     pas fotek: prekryv 28px, mezera 48 | tlacitko prehrani 80x80, r80, vlevo dole 20
     hlavicka reference: gap 16, padding-inline 28, margin-bottom 24, avatar 64x64
     medium: horni rohy 28 | cenova dlazdice: obrazek dole, posun -12 */

#p04 .container{ max-width:calc(var(--container-1344) + 2*var(--gutter)); }
.p04__head{ text-align:center; margin:0 0 var(--sp-48); }

.p04__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-12); }
.p04__col{ display:flex; flex-direction:column; gap:var(--sp-12); min-width:0; }

.p04__tile{
  background:var(--zinc-100); border-radius:var(--r-card);
  position:relative; overflow:hidden; min-width:0;
}
.p04__tile--pad{ padding:var(--sp-28); }

/* --- dlazdice s cislem a pasem fotek --- */
.p04__tile--stat{
  flex:1; display:flex; flex-direction:column; justify-content:space-between;
  gap:74px; padding-block:var(--sp-28) var(--sp-64); min-height:260px;
}
.p04__statrow{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-16); }
.p04__tile--stat > .p04__statrow{ padding-inline:var(--sp-28); }
.p04__statrow--inset{ padding-inline:var(--sp-28); align-items:center; }
.p04__num{ font-size:var(--fs-32); font-weight:700; line-height:var(--lh-150); color:var(--zinc-950); }
.p04__label{ font-size:var(--fs-20); font-weight:600; line-height:var(--lh-156); color:var(--zinc-900); margin:var(--sp-4) 0 0; }
.p04__label--center{ text-align:center; margin:0; }
.p04__icon{
  flex:none; width:80px; height:80px; border-radius:24px;
  background:var(--zinc-0); border:1px solid var(--zinc-200); color:var(--zinc-600);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card);
}

/* --- pasy, ktere se posouvaji --- */
.p04__marquee{ position:relative; overflow:hidden; width:100%; }
.p04__fade{
  z-index:1; position:absolute; inset:0 auto 0 0; width:28px; pointer-events:none;
  background:linear-gradient(270deg,rgba(244,244,245,0),rgba(244,244,245,.68) 50%,var(--zinc-100));
}
.p04__fade--right{ inset:0 0 0 auto;
  background:linear-gradient(90deg,rgba(244,244,245,0),rgba(244,244,245,.68) 50%,var(--zinc-100)); }
.p04__track{ display:flex; width:max-content; gap:var(--sp-48); animation:p04-run 34s linear infinite; }
.p04__track--slow{ animation-duration:44s; }
.p04__track--a{ gap:6px; animation-duration:30s; }
.p04__track--b{ gap:6px; animation-duration:38s; animation-direction:reverse; }
.p04__track--c{ gap:6px; animation-duration:34s; }
.p04__track--d{ gap:6px; animation-duration:42s; animation-direction:reverse; }
@keyframes p04-run{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .p04__track{ animation:none; } }

.p04__thumbs{ display:flex; gap:var(--sp-48); margin:0; padding:0; list-style:none; }
.p04__thumbs img{ width:72px; height:44px; object-fit:cover; border-radius:var(--r-chip); }

.p04__taglist{ display:flex; gap:6px; margin:0; padding:0; list-style:none; }
.p04__tag{
  flex:none; border:1px solid var(--zinc-200); border-radius:var(--r-chip);
  padding:4px 8px; font-size:var(--fs-13); line-height:var(--lh-150); color:var(--zinc-900);
  white-space:nowrap;
}
.p04__tag.is-on{ background:var(--zinc-700); border-color:var(--zinc-700); color:var(--zinc-50); }

/* --- dlazdice s fotkou --- */
.p04__tile--face{ min-height:495px; padding:var(--sp-28); }
.p04__facetext{
  position:relative; z-index:2; margin:0 auto; max-width:230px;
  text-align:center; font-size:var(--fs-20); font-weight:600; line-height:var(--lh-156); color:var(--zinc-900);
}
.p04__portrait{
  position:relative; z-index:2; width:138px; height:138px; margin:var(--sp-32) auto 0;
  border-radius:var(--r-pill); overflow:hidden; border:6px solid var(--zinc-0);
  box-shadow:var(--shadow-card);
}
.p04__portrait img{ width:100%; height:100%; object-fit:cover; }
.p04__facebg{
  position:absolute; inset:auto 0 0 0; z-index:1;
  width:100%; height:250px; object-fit:cover; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);
  mask-image:linear-gradient(180deg,transparent,#000 42%);
}

/* --- dlazdice s realizaci --- */
.p04__tile--case{ flex:1; display:flex; flex-direction:column; padding-block-start:var(--sp-28); min-height:380px; }
.p04__casehead{ display:flex; align-items:center; gap:var(--sp-16); padding-inline:var(--sp-28); margin-block-end:var(--sp-24); }
.p04__avatar{ flex:none; width:64px; height:64px; border-radius:64px; overflow:hidden; }
.p04__avatar img{ width:100%; height:100%; object-fit:cover; }
.p04__casename{ font-size:var(--fs-20); font-weight:700; line-height:var(--lh-148); color:var(--zinc-900); }
.p04__casemeta{ font-size:var(--fs-14); font-weight:300; line-height:var(--lh-168); color:var(--zinc-600); margin-block-start:2px; }
.p04__casemeta span{ color:var(--zinc-400); }
.p04__media{
  flex:1; margin:0; position:relative; overflow:hidden;
  border-start-start-radius:var(--r-inner); border-start-end-radius:var(--r-inner);
}
.p04__media img{ width:100%; height:100%; object-fit:cover; }
.p04__play{
  position:absolute; left:var(--sp-20); bottom:var(--sp-20);
  width:80px; height:80px; border-radius:80px; padding-inline-start:7px;
  border:1px solid var(--white-20); background:var(--white-10); color:var(--zinc-0);
  backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-inset-hair);
}

/* --- tmavy pruh --- */
.p04__tile--dark{
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-40) var(--sp-28); min-height:148px; background:var(--zinc-900);
}
.p04__darkbg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; }
.p04__darktext{
  position:relative; z-index:1; margin:0; max-width:230px; text-align:center;
  font-size:var(--fs-20); font-weight:600; line-height:var(--lh-150); color:var(--zinc-0);
}

/* --- dlazdice se seznamem sluzeb --- */
.p04__tile--tags{
  flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-32);
  padding-block:var(--sp-64) var(--sp-28); padding-inline:0; min-height:300px;
}
/* prekryv 28px, stejny jako u pasu fotek */
.p04__rows{ position:relative; display:flex; flex-direction:column; gap:6px; }

/* --- cenova dlazdice --- */
.p04__tile--fee{
  display:flex; flex-direction:column; align-items:center;
  padding:var(--sp-28); height:300px; flex:none;
}
.p04__chip{
  margin-block-start:var(--sp-12);
  border:1px solid var(--zinc-200); background:var(--zinc-0); border-radius:var(--r-chip);
  padding:4px 8px; font-size:var(--fs-13); line-height:var(--lh-150); color:var(--zinc-900);
}
.p04__feeimg{
  position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
  width:190px; height:182px; object-fit:cover; border-radius:var(--r-inner);
}

/* --- responzivita, jejich zlomy 991 a 767 --- */
@media (max-width:1100px){
  .p04__grid{ grid-template-columns:1fr 1fr; }
  .p04__tile--face{ min-height:381px; }
  .p04__tile--case{ min-height:320px; }
}
@media (max-width:767px){
  .p04__grid{ grid-template-columns:1fr; }
  .p04__tile--stat{ gap:var(--sp-24); padding-block:var(--sp-28); min-height:0; }
  .p04__tile--tags{ padding-block-start:var(--sp-32); }
  .p04__num{ font-size:var(--fs-32); }
}


/* Fotka v dlazdici Cena od mela pevnou sirku, takze na uzke karte plavala
   uprostred a orez pusobil nahodne. Necháme ji vyplnit sirku dlazdice. */
@media (max-width:767px){
  .p04__tile--fee{ display:flex; flex-direction:column; align-items:stretch; }
  .p04__feeimg{ width:100%; height:auto; max-height:180px; object-fit:cover;
    border-radius:var(--r-inner); margin-block-start:var(--sp-16); }
}