/* Vzor P09: trychtyrove sloupce. Ctyri karty stejne sirky v mrizce s tesnou
   mezerou, uvnitr kazde karty je vypln ukotvena ke dnu a jeji vyska klesa
   zleva doprava. Prvni sloupec je vyplneny cely a ma obracene barvy.
   Hodnoty nactene z jejich stylesheetu (source/sections/09.css):
     sekce: bg gray-100, radius nahore 48, spacer 64 nahore a 144 dole
     obal: container 1344 (84rem), padding-global 40
     hlavicka: nadpis 40/128 600, mezera 20, popis 16/150, mezera 48 nad mrizku
     mrizka: 4 sloupce 1fr, gap 12  (4x327 + 3x12 = 1344)
     karta: border 1px zinc-300, r36, min-height 560, max-width 327,
            flex column, space-between, overflow hidden, position relative
     prvni karta: bez ramecku, bg zinc-600, bily text
     posledni karta: bez ramecku, bg bila
     horni blok: padding 24 24 0
     stitek: border 1px zinc-200, r12, padding 4px 8px, 13/150
     titulek: 20/156 600 | cislo: 40/128 600 | popisek: 15/145
     dolni blok: flex column, gap 36
     detaily: padding 0 24
     vypln: u nich 240 / 71 / 88. Nase cisla jsou 71, 62, 38, 13, takze
            vypln druhe az ctvrte karty drzi jejich krajni hodnoty 240 a 88
            a prostredni sedi mezi nimi na 147, aby vyska klesala.
     stack: absolutne inset auto 14 14, kolecka 40x40, ramecek 4 v barve vyplne,
            prekryv margin-left -12 */

.p09{ padding-block:var(--sp-64) 144px; }
.p09__wrap{
  width:100%; max-width:calc(var(--container-1344) + 80px);
  margin-inline:auto; padding-inline:var(--sp-40);
}

.p09__head{ max-width:640px; margin-inline:auto; text-align:center; }
.p09__sub{ font-size:var(--fs-16); line-height:var(--lh-150); color:var(--zinc-600); margin:var(--sp-20) 0 0; }

.p09__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-12);
  margin-block-start:var(--sp-48);
}

.p09__card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-40);
  min-height:560px; max-width:327px; width:100%;
  border:1px solid var(--zinc-300); border-radius:var(--r-card);
}
.p09__card--lead{ border-color:transparent; background:var(--zinc-600); color:var(--zinc-0); }
.p09__card--last{ border-color:transparent; background:var(--zinc-0); }

.p09__top{ flex:none; padding:var(--sp-24) var(--sp-24) 0; }
.p09__tag{
  display:inline-block; border:1px solid var(--zinc-200); border-radius:var(--r-chip);
  padding:4px 8px; font-size:var(--fs-13); line-height:var(--lh-150);
}
.p09__card--lead .p09__tag{ border-color:var(--white-20); }

.p09__title{
  margin:var(--sp-12) 0 0;
  font-size:var(--fs-20); line-height:var(--lh-156); font-weight:600; color:var(--zinc-900);
}
.p09__card--lead .p09__title{ color:var(--zinc-0); }

.p09__num{
  margin:0; font-size:var(--fs-40); line-height:var(--lh-128); font-weight:600;
  color:var(--zinc-950); font-variant-numeric:tabular-nums;
}
.p09__card--lead .p09__num{ margin-block-start:var(--sp-40); color:var(--zinc-0); }

.p09__note{
  margin:var(--sp-8) 0 0; font-size:var(--fs-15); line-height:var(--lh-145); color:var(--zinc-600);
}
.p09__card--lead .p09__note{ color:var(--white-90); }

.p09__bottom{ display:flex; flex-direction:column; flex:none; gap:var(--sp-36); }
.p09__details{ padding-inline:var(--sp-24); }

.p09__fill{ position:relative; background:var(--zinc-500); }
.p09__fill--2{ height:240px; background:var(--zinc-500); }
.p09__fill--3{ height:147px; background:var(--zinc-400); }
.p09__fill--4{
  height:88px; background:var(--zinc-200);
  display:flex; align-items:center; justify-content:center; padding-inline:var(--sp-24);
}
.p09__cta{ width:100%; }

.p09__stack{ display:flex; position:absolute; inset:auto 14px 14px; }
.p09__chip{
  box-sizing:content-box; width:40px; height:40px; flex:none;
  border:4px solid var(--zinc-0); border-radius:var(--r-icon);
  margin-inline-start:-12px; object-fit:cover;
}
.p09__stack .p09__chip:first-child{ margin-inline-start:0; }
.p09__chip--more{
  display:flex; align-items:center; justify-content:center;
  background:var(--zinc-100); color:var(--zinc-700);
  font-size:var(--fs-13); font-weight:500;
}

/* --- fotky misto sedych ploch ---------------------------------------------
   Klient chtel do sedych ploch obrazky a nizsi expozici. Jas a kontrast
   stahujeme primo na fotce pres filter, plosne stinitko pres celou plochu
   nepouzivame. Prechod je jen na prvni karte, protoze jen tam lezi text
   pres fotku, a je smerovy, tvar prevzat z .p00__hero (p00.css).
   Puvodni sede pozadi zustavaji pod fotkou jako zaloha nez se nacte.
   Vypln klesa zleva doprava od nejtmavsi k nejsvetlejsi stejne jako driv,
   ctvrta je nejsvetlejsi, aby cerne tlacitko na ni drzelo tvar. */
.p09__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; pointer-events:none;
}

.p09__card--lead{ isolation:isolate; }
.p09__card--lead .p09__bg{ object-position:12% 50%; filter:contrast(.86) brightness(.52) saturate(.72); }
.p09__card--lead::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(9,9,11,.68) 0%, rgba(9,9,11,.50) 32%,
                                     rgba(9,9,11,.18) 62%, rgba(9,9,11,.04) 100%);
}
.p09__card--lead .p09__top{ position:relative; z-index:2; }
.p09__card--lead .p09__stack{ z-index:2; }

.p09__fill--2 .p09__bg{ object-position:50% 78%; filter:contrast(.86) brightness(.6) saturate(.72); }
.p09__fill--3 .p09__bg{ object-position:50% 60%; filter:contrast(.88) brightness(.7) saturate(.7); }
.p09__fill--4 .p09__bg{ object-position:50% 88%; filter:contrast(.7) brightness(1.04) saturate(.4); }
.p09__fill .p09__stack{ z-index:2; }
.p09__cta{ z-index:2; }

@media (max-width:1199px){
  .p09__grid{ grid-template-columns:repeat(2,1fr); justify-items:center; }
  .p09__card{ max-width:none; }
}
@media (max-width:767px){
  .p09{ padding-block:var(--sp-48) var(--sp-80); }
  .p09__wrap{ padding-inline:var(--sp-16); }
  .p09__grid{ grid-template-columns:1fr; }
  .p09__card{ min-height:0; max-width:420px; }
  .p09__fill--2{ height:180px; }
  .p09__fill--3{ height:120px; }
}


/* Na mobilu se rada kolecek prekryvala s poznamkou pod cislem, protoze je
   ukotvena absolutne u dna karty. Pod 768px ji vratime do toku a dame pod text. */
@media (max-width:767px){
  .p09__stack{ position:static; inset:auto; margin-block-start:var(--sp-16); }
  .p09__card--lead .p09__note, .p09__note{ margin-block-end:0; }
}