/*===== Hero =====*/
.pg-hero{padding:clamp(44px,6vw,80px) 0 clamp(30px,4vw,48px)}
.pg-hero .ls-lede{max-width:60ch}
.pg-hero .ls-lede strong{color:var(--ls-vino);font-weight:700}

/*===== Rozcestník na oblasti =====*/
.pg-pilulky{
  margin:0;
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;
}
.pg-pilulky a{
  display:inline-block;
  padding:8px 15px;
  background:var(--ls-karta);
  border:1px solid var(--ls-hranice-2);
  border-radius:999px;
  font-size:13.5px;font-weight:600;
  color:var(--ls-inkoust-60);
  text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
.pg-pilulky a:hover{border-color:var(--ls-list);color:var(--ls-list-aktivni)}
.pg-pilulky a.je{
  background:var(--ls-panel);
  border-color:var(--ls-list);
  color:var(--ls-list-aktivni);
  font-weight:700;
}

/*===== Oblast programu =====*/
.pg-oblast{
  background:var(--ls-papir);
  border-top:1px solid rgba(36,26,28,.07);
  padding:clamp(48px,7vw,92px) 0;
  scroll-margin-top:140px;
}
.pg-oblasti .pg-oblast:nth-of-type(odd){background:var(--ls-plocha)}
.pg-oblasti .pg-oblast:nth-of-type(even){background:var(--ls-papir)}

.pg-obal{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(26px,4vw,56px);
  align-items:start;
}

.pg-cislo{
  display:block;
  font-family:'Newsreader',Georgia,serif;
  font-weight:600;font-size:56px;line-height:1;
  color:var(--ls-vino-slabe);
}
.pg-hlava h2{
  margin:14px 0 0;
  font-family:'Newsreader',Georgia,serif;
  font-weight:600;
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.08;letter-spacing:-.02em;
  color:var(--ls-vino);
  text-wrap:balance;
}
.pg-hlava p{
  margin:18px 0 0;max-width:26em;
  font-size:16.5px;line-height:1.65;
  color:var(--ls-inkoust-70);
  text-wrap:pretty;
}

/*===== Dlaždice =====*/
.pg-dlazdice{display:flex;flex-direction:column;gap:12px}
.pg-dlazdice article{
  background:var(--ls-karta);
  border:1px solid var(--ls-hranice);
  border-radius:18px;
  padding:22px 24px;
}
.pg-dlazdice h3{
  margin:0;
  font-size:17px;font-weight:700;line-height:1.35;
  color:var(--ls-inkoust);
}
.pg-dlazdice p{
  margin:8px 0 0;
  font-size:15.5px;line-height:1.6;
  color:var(--ls-inkoust-60);
  text-wrap:pretty;
}

/*===== Odkud program vychází =====*/
.pg-duvera{
  background:var(--ls-papir);
  border-top:1px solid rgba(36,26,28,.07);
  padding:clamp(48px,7vw,92px) 0;
}
.pg-duvera-karta{
  background:var(--ls-karta);
  border:1px solid var(--ls-hranice);
  border-left:4px solid var(--ls-list);
  border-radius:20px;
  box-shadow:var(--ls-stin);
  padding:clamp(28px,3vw,38px) clamp(22px,3vw,36px);
}
.pg-duvera-uvod{
  margin:16px 0 0;max-width:64ch;
  font-size:16px;line-height:1.65;
  color:var(--ls-inkoust-70);
}

.pg-duvera-body{
  list-style:none;
  display:grid;gap:22px;margin-top:26px;
}
@media (min-width:800px){
  .pg-duvera-body{grid-template-columns:1fr 1fr;gap:30px}
}
.pg-duvera-body li{display:flex;gap:14px;align-items:flex-start}

.pg-ik{
  flex:none;
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ls-panel);
  color:var(--ls-list-text);
}
.pg-ik svg{width:20px;height:20px}

.pg-ob{min-width:0}
.pg-ob strong{
  display:block;
  color:var(--ls-vino);
  font-size:16px;font-weight:700;
  margin-bottom:5px;
}
.pg-ob span{
  color:var(--ls-inkoust-60);
  font-size:15px;line-height:1.65;
}

/*===== Panel s připomínkou =====*/
.pg-pripominka{
  padding:clamp(48px,7vw,92px) 0;
  scroll-margin-top:80px;
}


/*===== Lepivý rozcestník po oblastech =====*/
.pg-navigace{
  position:sticky;
  top:74px;
  z-index:40;
  background:rgba(250,246,238,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ls-hranice);
  padding:12px 0;
}

.pg-vyber{
  display:none;
  width:100%;
  font-family:inherit;font-size:15px;font-weight:600;
  color:var(--ls-vino);
  background:var(--ls-karta);
  border:1.5px solid var(--ls-hranice-2);
  border-radius:12px;
  padding:11px 38px 11px 14px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C1B3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
}
.pg-vyber:focus-visible{outline:3px solid var(--ls-list);outline-offset:2px}

@media (max-width:860px){
  .pg-navigace .pg-pilulky{display:none}
  .pg-vyber{display:block}
  .pg-navigace{padding:10px 0}
}