/* Vzor P12: paticka. Horni pas medium + rolovaci sloupec clanku,
   pod linkou kontaktni karta vlevo a tri sloupce odkazu vpravo,
   dole fakturacni radek a velky napis useknuty spodni hranou.
   Hodnoty nactene z jejich stylesheetu (source/sections/12.css):
     sekce: bg gray-100, radius nahore 48 | horni odsazeni 48
     obal: padding-global 2.5rem = 40, container-1344 = 84rem
     horni pas: grid 1fr minmax(200px,515px), gap 40 (pod 1200 gap 16)
     medium: radius 36, pomer 56.17 %
     seznam: gap 12 | karta bila, radius 36, padding 20
     stitek: border 1px zinc-200, radius 12, padding 4px 8px, 13px/150 %
     titulek karty: 20px, 600, lh 150 % | odstup pod stitkem 12
     linka: 1px zinc-200, margin 48 nahore i dole, pak jeste spacer 48
     menu-wrap: space-between, align stretch, na tabletu sloupec gap 64
     kontakty: bila, radius 28, padding 28, max-width 525, gap 4 u odkazu
     odstup adresa az kontakty: 64 (na uzkem 40)
     socialni tlacitko: 48x48, radius 14, bg zinc-100, hover zinc-150
     odkaz pod kartou: gap 8, odsazeni zleva 28
     menu: gap 120 (1200 az 1440: 80), sloupec gap 16, odkazy gap 12, 15px
     nadpis sloupce: 15px, 600, opacity .8 | odznak: radius 6, 10px, padding 2px 6px 4px
     pod menu spacer 96 (na uzkem 80) */

#p12{ padding-block-start:var(--sp-48); padding-block-end:0; overflow:hidden; }
.p12__wrap{ width:100%; max-width:calc(1344px + 80px); margin-inline:auto; padding-inline:40px; }

/* horni pas */
.p12__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,515px);
  gap:40px; align-items:stretch;
}
.p12__media{
  position:relative; margin:0; border-radius:var(--r-card); overflow:hidden;
  background:var(--zinc-200); aspect-ratio:1/.5617;
}
.p12__media img{ width:100%; height:100%; object-fit:cover; }
.p12__tag{
  position:absolute; inset:20px auto auto 20px;
  border-radius:var(--r-chip); padding:6px 10px;
  font-size:var(--fs-13); line-height:var(--lh-150); color:var(--zinc-0);
  background:rgba(9,9,11,.45); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.p12__play{
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border:0; border-radius:var(--r-pill); cursor:pointer;
  background:var(--zinc-0); color:var(--zinc-950);
  display:flex; align-items:center; justify-content:center;
  padding-inline-start:4px; box-shadow:var(--shadow-card); transition:transform .25s;
}
.p12__play:hover{ transform:translate(-50%,-50%) scale(1.06); }

.p12__col{ position:relative; height:100%; min-height:0; }
.p12__scroll{
  position:absolute; inset:0; overflow-y:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent 100%);
}
.p12__scroll::-webkit-scrollbar{ display:none; }
.p12__list{ display:flex; flex-direction:column; gap:12px; padding-block-end:120px; }
.p12__post{
  display:block; background:var(--zinc-0); border-radius:var(--r-card);
  padding:20px; text-decoration:none; transition:box-shadow .25s;
}
.p12__post:hover{ box-shadow:var(--shadow-card); }
.p12__post .chip{ border-color:var(--zinc-200); }
.p12__post-t{
  display:block; margin-block-start:12px;
  font-size:var(--fs-20); line-height:var(--lh-150); font-weight:600; color:var(--zinc-900);
}

/* linka a hlavni paticka */
.p12__divider{ border:0; height:1px; background:var(--zinc-200); margin:48px 0; }
.p12__menu-wrap{ display:flex; justify-content:space-between; align-items:stretch; gap:40px; }

.p12__contacts-wrap{
  display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  width:100%; max-width:525px;
}
.p12__contacts{
  background:var(--zinc-0); border-radius:var(--r-inner); padding:28px; width:100%;
}
.p12__ct-h{ margin:0; font-size:var(--fs-20); line-height:var(--lh-156); font-weight:600; color:var(--zinc-900); }
.p12__ct-addr{
  margin:12px 0 0; display:flex; align-items:flex-start; gap:8px;
  font-size:var(--fs-15); line-height:var(--lh-145); color:var(--zinc-600);
}
.p12__i{ flex:none; color:var(--zinc-400); margin-block-start:1px; }
.p12__ct-bottom{
  margin-block-start:64px;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
}
.p12__ct-links{ display:flex; flex-direction:column; gap:4px; }
.p12__ct-link{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  font-size:var(--fs-15); line-height:var(--lh-145); font-weight:600; color:var(--zinc-900);
}
.p12__ct-link:hover{ color:var(--zinc-950); }
.p12__social{ display:flex; gap:8px; flex:none; }
.p12__soc{
  width:48px; height:48px; border-radius:14px; flex:none;
  background:var(--zinc-100); color:var(--zinc-900);
  display:flex; align-items:center; justify-content:center; transition:background-color .25s;
}
.p12__soc:hover{ background:var(--zinc-150); }
.p12__note{
  display:flex; align-items:center; gap:8px; margin-inline-start:28px;
  text-decoration:none; color:var(--zinc-600);
  font-size:var(--fs-15); line-height:var(--lh-145);
}
.p12__note:hover{ color:var(--zinc-900); }
.p12__note svg{ flex:none; color:var(--zinc-400); }

.p12__menu{ display:flex; gap:120px; }
.p12__mcol{ display:flex; flex-direction:column; gap:16px; }
.p12__mh{
  margin:0; font-size:var(--fs-15); line-height:var(--lh-145);
  font-weight:600; color:var(--zinc-900); opacity:.8;
}
.p12__mlinks{ display:flex; flex-direction:column; gap:12px; }
.p12__mlinks a{
  font-size:var(--fs-15); line-height:var(--lh-145);
  color:var(--zinc-600); text-decoration:none;
}
.p12__mlinks a:hover{ color:var(--zinc-950); }
.p12__mnew{ display:flex; align-items:center; }
.p12__badge{
  margin-inline-start:8px; background:var(--zinc-0); color:var(--zinc-500);
  border-radius:6px; padding:2px 6px 4px; font-size:var(--fs-10); font-weight:500; line-height:1;
}

/* fakturacni radek a velky napis */
.p12__legal{
  margin-block-start:96px; padding-block-start:24px; border-block-start:1px solid var(--zinc-200);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:var(--fs-13); line-height:var(--lh-164); color:var(--zinc-500);
}
.p12__legal p{ margin:0; }
.p12__legal-links{ display:flex; gap:24px; }
.p12__legal-links a{ color:var(--zinc-500); text-decoration:none; }
.p12__legal-links a:hover{ color:var(--zinc-900); }

.p12__mark{ margin-block-start:40px; overflow:hidden; height:158px; }
.p12__mark span{
  display:block; text-align:center; white-space:nowrap;
  font-size:18.4vw; line-height:.82; font-weight:600; letter-spacing:-.045em;
  color:var(--zinc-200); user-select:none;
}

@media (max-width:1439px){
  .p12__menu{ gap:80px; }
}
@media (max-width:1199px){
  .p12__top{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .p12__media{ aspect-ratio:16/9; }
  .p12__col{ position:static; height:auto; }
  .p12__scroll{
    position:static; width:100%; min-width:0; overflow-x:auto; overflow-y:hidden;
    -webkit-mask-image:none; mask-image:none;
  }
  .p12__list{ flex-direction:row; padding-block-end:0; }
  .p12__post{ flex:none; width:300px; }
  .p12__menu{ gap:48px; }
}
@media (max-width:991px){
  .p12__menu-wrap{ flex-direction:column; gap:64px; }
  .p12__contacts-wrap{ max-width:none; gap:40px; }
  .p12__menu{ width:100%; justify-content:space-between; align-items:flex-start; }
  .p12__mark{ height:110px; }
}
@media (max-width:767px){
  .p12__wrap{ padding-inline:16px; }
  .p12__ct-bottom{ flex-direction:column; align-items:flex-start; gap:24px; margin-block-start:40px; }
  .p12__social{ justify-content:flex-start; }
  .p12__menu{ flex-direction:column; gap:40px; padding-inline-start:28px; }
  .p12__legal{ margin-block-start:80px; }
  .p12__mark{ height:70px; }
}


/* Podpis autora webu. Drzi se typografie ostatnich odkazu v paticce,
   znacka je inline SVG s fill:currentColor, aby sla s barvou textu. */
.p12__by{ display:inline-flex; align-items:center; gap:var(--sp-8);
  color:var(--zinc-500); transition:color .2s ease; }
.p12__by:hover{ color:var(--zinc-950); }
/* Lockup ma pomer 708:662, tedy skoro ctverec. */
.p12__bylogo{ height:15px; width:auto; flex:none; }