/* Vzor P11: FAQ ve dvou nestejnych sloupcich, vlevo nadpis a ukotvena karta,
   vpravo seznam rozbalovacich otazek.
   Hodnoty nactene z jejich stylesheetu (source/sections/11.css):
     sekce: radius nahore 48, spacer 80 nahore a 144 dole
     mrizka: 1fr 640, gap 16 | od 1440: 1fr 820, gap 0 | do 991: 1 sloupec, gap 48
     nadpis h3: 40px/128%, 600 | do 991: 32px | do 767: 28px
     seznam otazek: gap 12
     polozka: bg zinc-100, border 1px #ececee, r36, padding 8, inset 0 1px #e4e4e7
     vnitrek: border 1px transparent, r28, padding 24 | do 767: 16 a 14 po stranach
     otazka: 20px/150% 600, space-between, align-start | do 767: 16px, gap 12
     odpoved: max-width 655, 15px/145%, odsazena o 12
     karta: r36, border 1px #d4d4d8, padding 28, gap 28, max-width 275
       do 991: radek se space-between, max-width auto | do 767: sloupec, padding 24, gap 24
     kulate tlacitko odkazu: 40x40, r14, bg zinc-100, hover zinc-150 */

.p11{ padding-block:var(--sp-80) 144px; }
.p11__grid{ display:grid; grid-template-columns:1fr 640px; gap:var(--sp-16); align-items:start; }

/* levy sloupec, drzi se pri scrollu */
.p11__aside{ position:sticky; top:var(--sp-24); }
.p11__h2{ margin:0; font-size:var(--fs-40); line-height:var(--lh-128); font-weight:600; color:var(--zinc-950); }
.p11__lead{ margin:var(--sp-24) 0 0; max-width:320px; font-size:var(--fs-16); line-height:var(--lh-150); color:var(--zinc-600); }
.p11__links{ display:flex; gap:var(--sp-8); margin-block-start:var(--sp-16); }
.p11__link{
  display:inline-flex; align-items:center; height:40px; padding-inline:16px;
  background:var(--zinc-100); border-radius:var(--r-button); transition:background-color .25s;
  font-size:var(--fs-14); font-weight:500; color:var(--zinc-900); text-decoration:none;
}
.p11__link:hover{ background:var(--zinc-150); }

.p11__cta{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-28);
  border:1px solid var(--zinc-300); border-radius:var(--r-card);
  padding:var(--sp-28); max-width:275px; margin-block-start:var(--sp-40);
}
.p11__cta-title{ margin:0; font-size:var(--fs-20); line-height:var(--lh-150); font-weight:600; color:var(--zinc-900); }
.p11__cta-text{ margin:var(--sp-8) 0 0; font-size:var(--fs-15); line-height:var(--lh-145); color:var(--zinc-600); }

/* pravy sloupec, akordeon */
.p11__list{ display:grid; gap:var(--sp-12); }
.p11__item{
  background:var(--zinc-100);
  border:1px solid var(--zinc-150); border-top-color:rgba(228,228,231,.4);
  border-radius:var(--r-card); padding:var(--sp-8);
  box-shadow:var(--shadow-inset-top);
}
.p11__in{ border:1px solid transparent; border-radius:var(--r-inner); padding:var(--sp-24); transition:.25s; }
.p11__item.is-open .p11__in{ background:var(--zinc-0); border-color:var(--zinc-150); box-shadow:var(--shadow-card); }
.p11__qh{ margin:0; font:inherit; }
.p11__q{
  width:100%; padding:0; margin:0; background:transparent; border:0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-16);
  text-align:left; font:inherit; color:var(--zinc-900);
}
.p11__qt{ font-size:var(--fs-20); line-height:var(--lh-150); font-weight:600; }
.p11__chev{
  flex:none; width:28px; height:28px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--zinc-200); color:var(--zinc-700);
  transition:transform .25s ease, background-color .25s linear, color .25s linear;
}
.p11__item.is-open .p11__chev{ transform:rotate(180deg); background:var(--zinc-950); color:var(--zinc-0); }
.p11__a{ display:grid; grid-template-rows:minmax(0,0fr); opacity:0; overflow:hidden; transition:.25s; }
.p11__item.is-open .p11__a{ grid-template-rows:minmax(0,1fr); opacity:1; }
.p11__a-in{ min-height:0; }
.p11__a-in > p{
  margin:0; padding-block-start:var(--sp-12); max-width:655px;
  font-size:var(--fs-15); line-height:var(--lh-145); color:var(--zinc-600);
}

@media (min-width:1440px){
  .p11__grid{ grid-template-columns:1fr 820px; gap:0; }
}
@media (max-width:1023px){
  .p11__grid{ grid-template-columns:1fr; gap:var(--sp-48); }
  .p11__aside{ position:static; }
  .p11__h2{ font-size:var(--fs-32); }
  .p11__cta{
    flex-direction:row; align-items:center; justify-content:space-between;
    max-width:none; width:100%;
  }
}
@media (max-width:767px){
  .p11{ padding-block:var(--sp-64) 128px; }
  .p11__grid{ gap:var(--sp-40); }
  .p11__h2{ font-size:28px; }
  .p11__in{ padding:var(--sp-16) 14px; }
  .p11__q{ gap:var(--sp-12); }
  .p11__qt{ font-size:var(--fs-16); }
  .p11__cta{ flex-direction:column; align-items:flex-start; gap:var(--sp-24); padding:var(--sp-24); }
}