/* Vzor P02: sestisloupcova mrizka s vertikalnim posunem. Vlevo holy nadpis
   a pod nim svetla citacni karta, vpravo jedna tmava karta se seznamem radku
   se sipkami pres dva radky, pod tim radek velkych procent bez karet.
   Hodnoty nactene z jejich stylesheetu (source/sections/02.css):
     sekce: bg gray-100, radius 48 nahore, spacer 80 nahore a 144 dole
     mrizka: 6 sloupcu 1fr 1fr 1fr 2fr 1.25fr 1fr, gap 16 / 68
       nadpis span 3, tmava karta span 3 a 2 radky align-self start,
       citace span 3, cisla span 6
     nadpis: 40px/128 %, weight 600, wrapper max-width 496
     tmava karta: bg zinc-800, r36, padding 32, flex column gap 15
     radek: gap 16, border-bottom 1px zinc-700, padding-bottom 16,
       hover padding-left 12 s prechodem .25s, posledni bez linky
     text radku: 20px/156 %, weight 600, predsazeni zinc-400
     citace: bg bila, r36, padding-block 28, max-width 500
       hlavicka gap 16, margin-bottom 24, padding-inline 28
       avatar 64x64 r64, jmeno 20px/148 % bold, role 14px/168 % weight 300
       telo 16px/150 %, padding-inline 28
     cisla: flex space-between, margin-top 64, wrapper gap 16
       hodnota 40px/128 % weight 600, popis 15px/145 % */
#p02{ padding-block:var(--sp-80) 144px; }

.p02__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 2fr 1.25fr 1fr;
  column-gap:var(--sp-16); row-gap:68px;
  align-items:start;
}

.p02__head{ grid-column:span 3; width:100%; max-width:496px; }
.p02__title{
  margin:0; font-size:var(--fs-40); line-height:var(--lh-128);
  font-weight:600; color:var(--zinc-950);
}

/* tmava karta se seznamem */
.p02__list{
  grid-column:span 3; grid-row:span 2; align-self:start;
  display:flex; flex-direction:column; gap:15px;
  background:var(--zinc-800); color:var(--zinc-0);
  border-radius:var(--r-card); padding:var(--sp-32);
}
.p02__item{
  display:flex; flex-direction:column;
  border-block-end:1px solid var(--zinc-700);
  padding-block-end:var(--sp-16);
}
.p02__item--last{ border-block-end:0; padding-block-end:0; }

/* Radek je tlacitko, aby sel otevrit i klavesnici. Posun na hover je stejny
   jako predtim, jen sedi na spousteci casti, aby se rozbaleny text nehybal. */
.p02__trigger{
  display:flex; align-items:flex-start; gap:var(--sp-16);
  width:100%; margin:0; padding:0; border:0; background:transparent;
  font:inherit; color:inherit; text-align:start; cursor:pointer;
  padding-inline-start:0; transition:padding-inline-start .25s;
}
.p02__item:hover .p02__trigger{ padding-inline-start:var(--sp-12); }
.p02__trigger:focus-visible{
  outline:2px solid var(--zinc-400); outline-offset:6px; border-radius:var(--r-chip);
}
.p02__ico{
  flex:none; display:block; margin-block-start:4px; color:var(--zinc-0);
  transition:transform .25s ease;
}
.p02__item.is-open .p02__ico{ transform:rotate(90deg); }
.p02__line{
  display:block; margin:0;
  font-size:var(--fs-20); line-height:var(--lh-156); font-weight:600;
}
.p02__pre{ color:var(--zinc-400); }

/* Rozbalovaci cast. 0fr ma implicitni auto minimum a nesbalila by se,
   proto minmax(0,0fr) az minmax(0,1fr). */
.p02__panel{
  display:grid; grid-template-rows:minmax(0,0fr);
  opacity:0; overflow:hidden;
  transition:grid-template-rows .3s ease, opacity .25s linear;
}
.p02__item.is-open .p02__panel{ grid-template-rows:minmax(0,1fr); opacity:1; }
.p02__panel-in{
  min-height:0;
  padding-block-start:var(--sp-16);
  padding-inline-start:var(--sp-40); /* 24 ikona + 16 mezera, text sedi pod nadpisem radku */
}
.p02__body{
  margin:0; max-width:500px;
  font-size:var(--fs-15); line-height:var(--lh-155); font-weight:400; color:var(--zinc-400);
}
/* Jemne odliseni uvnitr tmave karty, zadna svetla plocha */
.p02__cite{
  margin:var(--sp-16) 0 0; max-width:500px;
  background:var(--white-10); border-radius:var(--r-button); padding:var(--sp-16);
}
.p02__cite-text{
  margin:0; font-size:var(--fs-15); line-height:var(--lh-155); font-weight:400; color:var(--zinc-0);
}
.p02__cite-who{
  margin-block-start:var(--sp-8);
  font-size:var(--fs-13); line-height:var(--lh-164); font-weight:400; color:var(--zinc-400);
}

/* citacni karta */
.p02__quote{
  grid-column:span 3; width:100%; max-width:500px; margin:0;
  background:var(--zinc-0); border-radius:var(--r-card);
  padding-block:var(--sp-28); overflow:hidden;
}
.p02__qhead{
  display:flex; align-items:center; gap:var(--sp-16);
  margin-block-end:var(--sp-24); padding-inline:var(--sp-28);
}
.p02__avatar{ flex:none; width:64px; height:64px; border-radius:64px; overflow:hidden; background:var(--zinc-100); }
.p02__avatar img{ width:100%; height:100%; object-fit:cover; }
.p02__who{ display:flex; flex-direction:column; gap:2px; }
.p02__name{ font-size:var(--fs-20); line-height:var(--lh-148); font-weight:700; color:var(--zinc-900); }
.p02__role{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--sp-4);
  font-size:var(--fs-14); line-height:var(--lh-168); font-weight:300; color:var(--zinc-600);
}
.p02__org{ font-weight:600; color:var(--zinc-900); }
.p02__qtext{
  margin:0; padding-inline:var(--sp-28);
  font-size:var(--fs-16); line-height:var(--lh-150); font-weight:400; color:var(--zinc-900);
}

/* radek procent */
.p02__nums{
  grid-column:span 6;
  display:flex; justify-content:space-between; align-items:center;
  margin-block-start:var(--sp-64);
}
.p02__num{ display:flex; align-items:center; gap:var(--sp-16); }
.p02__val{
  font-size:var(--fs-40); line-height:var(--lh-128); font-weight:600;
  color:var(--zinc-950); white-space:nowrap;
}
.p02__desc{ margin:0; font-size:var(--fs-15); line-height:var(--lh-145); color:var(--zinc-700); }

@media (max-width:991px){
  .p02__grid{ grid-template-columns:1fr 1fr; column-gap:38px; row-gap:40px; }
  .p02__head,.p02__list,.p02__quote{ grid-column:1 / -1; }
  .p02__list{ grid-row:auto; }
  .p02__head{ max-width:none; margin-inline:auto; text-align:center; }
  .p02__quote{ max-width:none; }
  .p02__title{ font-size:var(--fs-32); }
  .p02__nums{
    grid-column:1 / -1;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:var(--sp-28); margin-block-start:var(--sp-40);
  }
}

@media (max-width:767px){
  #p02{ padding-block:var(--sp-64) 128px; }
  .p02__grid{ grid-template-columns:1fr; }
  .p02__title{ font-size:28px; }
  .p02__nums{ align-items:center; text-align:center; }
  .p02__num{ flex-direction:column; gap:var(--sp-8); }
}

@media (max-width:479px){
  .p02__list{ padding:var(--sp-24); }
  /* na uzkem displeji je odsazeni pod ikonu drazsi nez zarovnani */
  .p02__panel-in{ padding-inline-start:0; }
}

@media (prefers-reduced-motion:reduce){
  .p02__trigger,.p02__ico,.p02__panel{ transition:none; }
}