/* Vzor P08: vycentrovana hlavicka + nesymetricky radek, vlevo akordeon,
   vpravo menici se obraz.
   Hodnoty nactene z jejich stylesheetu (source/awesomic.css):
     menu gap 12, max-width 479 | radek gap 12
     polozka: bg zinc-100, r36, padding 8, inset 0 1px 0 rgb(228,228,231)
     vnitrek: r28, padding 24, border 1px transparent -> otevrena bila + zinc-150
     cislo: border 1px zinc-200, r12, padding 4px 6px, 13px
     paticka: margin-top 20, space-between, align-end
     ukazatel: 40x8, r1000, draha zinc-300, vypln zinc-600
     obraz: r36, padding 16 */
.p08__head{ text-align:center; max-width:640px; margin-inline:auto; }
.p08__head .t-body{ color:var(--zinc-600); max-width:340px; margin:12px auto 0; }
.p08__row{ display:flex; gap:12px; align-items:stretch; margin-block-start:var(--sp-48); }
.p08__menu{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:479px; }

.p08__item{
  background:var(--zinc-100);
  border-radius:var(--r-card);
  padding:8px;
  border-width:1px; border-style:none solid solid; border-color:rgba(228,228,231,.4);
  box-shadow:var(--shadow-inset-top);
}
.p08__in{
  border:1px solid transparent; border-radius:var(--r-inner); padding:24px;
  display:flex; flex-direction:column; justify-content:space-between; transition:.25s;
}
.p08__item.is-open .p08__in{
  background:var(--zinc-0); border-color:var(--zinc-150); box-shadow:var(--shadow-card);
}
.p08__h{ margin:0; font:inherit; }
.p08__btn{
  width:100%; padding:0; background:transparent; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:var(--sp-16);
}
.p08__num{
  font-size:var(--fs-13); line-height:1.55; color:var(--zinc-900);
  border:1px solid var(--zinc-200); border-radius:var(--r-chip); padding:4px 6px;
}
.p08__title{ font-size:var(--fs-20); line-height:var(--lh-150); font-weight:600; color:var(--zinc-950); }
.p08__chev{
  margin-inline-start:auto; width:28px; height:28px; border-radius:var(--r-pill);
  background:var(--zinc-300); color:var(--zinc-950);
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:transform .25s ease, background-color .25s linear, color .25s linear;
}
.p08__item.is-open .p08__chev{ transform:rotate(-90deg); background:var(--zinc-950); color:var(--zinc-0); }
/* Rozbalovani jede pres vysku mrizky, proto tu musi byt overflow:hidden.
   Ten ale usekne prstenec a vrzeny stin tlacitka presne dole a u leveho kraje.
   Reseni: orezovou schranku rozsirime zapornym okrajem a obsah vratime zpet
   vnitrnim odsazenim, takze se text nehne a stin ma kam presahnout.
   z-index by nepomohl, ten z overflow:hidden neuteče. */
.p08__body{ display:grid; grid-template-rows:minmax(0,0fr); opacity:0; overflow:hidden;
  transition:.25s; margin-inline:calc(-1 * var(--sp-12)); }
.p08__body > *{ padding-inline:var(--sp-12); }
.p08__item.is-open .p08__body{ grid-template-rows:minmax(0,1fr); opacity:1;
  padding-block-start:20px;
  /* Misto pro vrzeny stin tlacitka dole, bez dopadu na rozvrzeni. */
  padding-block-end:var(--sp-16); margin-block-end:calc(-1 * var(--sp-16)); }
.p08__price{ font-size:var(--fs-18); font-weight:500; margin:0 0 var(--sp-8); }
.p08__text{ color:var(--zinc-600); margin:0; }
.p08__footer{ display:flex; justify-content:space-between; align-items:flex-end; margin-block-start:20px; }
.p08__prog{ width:40px; height:8px; border-radius:var(--r-pill); background:var(--zinc-300); overflow:hidden; flex:none; }
/* Pruh je na plnou sirku a odpocet ho zasouva zleva pres translateX.
   Diky tomu se kazdy snimek meni jen transform, ne sirka, takze odpada
   prepocet rozvrzeni a pohyb bezi na kompozitoru. */
.p08__prog > i{ display:block; height:100%; width:100%; background:var(--zinc-600);
  border-radius:var(--r-pill); transform:translateX(-100%); will-change:transform; }
.p08__media{ flex:1; border-radius:var(--r-card); overflow:hidden; background:var(--zinc-100); min-height:420px; }
.p08__media img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:1023px){
  .p08__row{ flex-direction:column; }
  .p08__menu{ max-width:none; }
  .p08__media{ min-height:0; aspect-ratio:16/9; order:-1; }
}