/*
 * Obsahové podstránky (co na web, oznámení online, šablony, ceník, jak to funguje).
 * Sazba v rem podle škály webu: :root má 62.5 %, tedy 1rem = 10px na velkých displejích.
 */

.contentPage{
  position: relative;
  background: #fdfbf9;
  padding-bottom: 9rem;
}

/*
 * Šířka odpovídá .container hlavního webu (164rem / 95 %), jen o kousek užší,
 * aby se řádky textu daly číst. Pozor: :root font-size klesá s breakpointy,
 * takže rem hodnota se na menších displejích sama zmenší.
 */
.contentPage .wrap{
  max-width: 152rem;
  width: 95%;
  margin: auto;
  box-sizing: border-box;
}

/* ---------- hlavicka dokumentu ---------- */
.pageHead{
  padding: 7rem 0 6rem;
}
.pageHead .headGrid{
  display: flex;
  gap: 6rem;
  align-items: center;
}
.pageHead .headText{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.pageHead .headMedia{
  flex: 0 0 46%;
}
.pageHead .headMedia img{
  width: 100%;
  height: auto;
  display: block;
}
.pageHead.center .headText{
  max-width: 82rem;
  margin: auto;
  align-items: center;
  text-align: center;
}

.eyebrow{
  font: 700 1.3rem/1 Satoshi;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #987d3e;
}

.contentPage h1{
  font: 700 5.6rem/6.4rem Satoshi;
  letter-spacing: -.015em;
  color: #2e2b24;
  margin: 0;
}
.contentPage h1 span{
  color: #987d3e;
}
.contentPage .lead{
  font: 400 2.1rem/3.4rem Satoshi;
  color: #6b6455;
  margin: 0;
}

.pageHead .actions{
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: .8rem;
}


/* ---------- obecne sekce ---------- */
.contentPage section{
  padding-top: 5rem;
}
.contentPage h2{
  font: 700 4rem/4.8rem Satoshi;
  letter-spacing: -.015em;
  color: #2e2b24;
  margin: 0;
}
.contentPage h3{
  font: 700 2.6rem/3.3rem Satoshi;
  color: #2e2b24;
  margin: 0;
}
.contentPage p{
  font: 400 1.9rem/3.2rem Satoshi;
  color: #6b6455;
  margin: 0;
}
.contentPage .small{
  font: 400 1.7rem/2.8rem Satoshi;
  color: #8a8171;
}
/*
 * Barva textových odkazů v obsahu. Tlačítka se vylučují - .contentPage a má
 * vyšší specificitu než .button, takže by jim přebila bílý text na zlatém
 * pozadí a nápis by nebyl vidět.
 */
.contentPage a:not(.button){
  color: #7a6430;
}
.contentPage strong{
  color: #2e2b24;
  font-weight: 700;
}

/* ---------- cislovane bloky ---------- */
.blockRow{
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  padding: 3.6rem 0;
  border-top: 1px solid #e7ddc5;
}
.blockRow:last-of-type{
  border-bottom: 1px solid #e7ddc5;
}
.blockRow .num{
  flex: 0 0 auto;
  width: 5.2rem;
  height: 5.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #987d3e;
  color: #987d3e;
  font: 700 1.8rem/1 Satoshi;
}
.blockRow .blockText{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.blockRow .aside{
  flex: 0 0 32rem;
  background: #f6f1e7;
  padding: 2.2rem 2.6rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.blockRow .aside b{
  font: 700 1.5rem/2.3rem Satoshi;
  color: #2e2b24;
}
.blockRow .aside span{
  font: 400 1.7rem/2.7rem Satoshi;
  color: #6b6455;
}

/* ---------- odrazky ---------- */
.ticks{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticks li{
  position: relative;
  padding-left: 2.4rem;
  font: 400 1.8rem/2.9rem Satoshi;
  color: #6b6455;
}
.ticks li:before{
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #cab67f;
}

/* ---------- karty v mrizce ---------- */
.cardGrid{
  display: grid;
  gap: 2.4rem;
}
.cardGrid.cols3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cardGrid.cols4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card{
  display: flex;
  flex-direction: column;
  background: #fdfbf9;
  border: 1px solid #e7ddc5;
  transition: border-color .18s ease;
}
.card:hover{
  border-color: #987d3e;
}
.card .cardBody{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.8rem 3rem 3rem;
  flex: 1 1 auto;
}
.card img{
  width: 100%;
  height: auto;
  display: block;
}
.card .cardTop{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.card .price{
  font: 700 1.8rem/1 Satoshi;
  color: #987d3e;
  white-space: nowrap;
}
.card .cardMedia{
  position: relative;
}
.card .cardMedia .badge{
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
}

.badge{
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 2.8rem;
  padding: 0 1.2rem;
  background: #987d3e;
  color: #fdfbf9;
  font: 700 1.2rem/1 Satoshi;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.badge.quiet{
  background: #f6f1e7;
  color: #6b6455;
}

/* ---------- balicky v ceniku ---------- */
.pack{
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 3.2rem 3rem 3rem;
  background: #fdfbf9;
  border: 1px solid #e7ddc5;
}
.pack.highlight{
  border: 2px solid #987d3e;
}
.pack .packPrice{
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.pack .packPrice .num{
  font: 700 4rem/1 Satoshi;
  color: #987d3e;
}
.pack .packPrice .cur{
  font: 700 1.8rem/1 Satoshi;
  color: #987d3e;
}
.pack .packPrice .from{
  font: 400 1.8rem/1 Satoshi;
  color: #8a8171;
}
.pack .ticks{
  padding-top: 1.8rem;
  border-top: 1px solid #e7ddc5;
}
.pack .button{
  margin-top: auto;
  justify-content: center;
  width: 100%;
}

/* ---------- srovnavaci tabulka ---------- */
.compareWrap{
  width: 100%;
  overflow-x: auto;
}
.compare{
  width: 100%;
  min-width: 70rem;
  border-collapse: collapse;
  margin-top: 2.8rem;
}
.compare th,
.compare td{
  padding: 2rem 2.4rem;
  text-align: left;
  vertical-align: top;
  font: 400 1.8rem/2.9rem Satoshi;
  color: #6b6455;
  border-top: 1px solid #e7ddc5;
}
.compare thead th{
  font: 700 1.8rem/2.9rem Satoshi;
  color: #2e2b24;
  border-top: 2px solid #2e2b24;
}
.compare tbody tr:last-child td,
.compare tbody tr:last-child th{
  border-bottom: 1px solid #e7ddc5;
}
.compare .rowHead{
  font: 700 1.8rem/2.9rem Satoshi;
  color: #2e2b24;
  width: 26%;
}
.compare .mine{
  background: #f6f1e7;
  color: #2e2b24;
  width: 37%;
}

/* ---------- kroky ---------- */
.steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}
.step{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 3.4rem 3.2rem;
  background: #f6f1e7;
}
.step .stepNum{
  font: 700 5.6rem/1 Satoshi;
  color: #cab67f;
}
.step.dark{
  background: #2e2b24;
}
.step.dark h3{ color: #fdfbf9; }
.step.dark p{ color: #cab67f; }
.step.dark .stepNum{ color: #987d3e; }
.step .stepFoot{
  margin-top: auto;
  padding-top: 1.8rem;
  border-top: 1px solid #e7ddc5;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.step.dark .stepFoot{
  border-top-color: rgba(202,182,127,.3);
}
.step .stepFoot b{
  font: 700 1.5rem/2.2rem Satoshi;
  color: #2e2b24;
}
.step.dark .stepFoot b{ color: #fdfbf9; }
.step .stepFoot span{
  font: 400 1.7rem/2.6rem Satoshi;
  color: #6b6455;
}
.step.dark .stepFoot span{ color: #cab67f; }

/* ---------- cisla v rade ---------- */
.factRow{
  display: flex;
  gap: 4rem;
  margin-top: .8rem;
  padding-top: 2.4rem;
  border-top: 1px solid #e7ddc5;
}
.fact{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fact b{
  font: 700 3.4rem/1 Satoshi;
  color: #987d3e;
}
.fact span{
  font: 400 1.5rem/2.3rem Satoshi;
  color: #8a8171;
}

/* ---------- tmavy CTA pas ---------- */
.ctaBand{
  display: flex;
  gap: 5rem;
  align-items: center;
  margin-top: 6rem;
  padding: 5.2rem 5.6rem;
  background: #2e2b24;
}
.ctaBand .ctaText{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.ctaBand h2{ color: #fdfbf9; }
.ctaBand p{ color: #cab67f; }
.ctaBand .actions{
  flex: 0 0 auto;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* V tmavém pásu musí být tlačítko světlé - proto vyšší specificita než
   obecné pravidlo pro ghost variantu v style.css. */
.ctaBand a.button.button-ghost{
  color: #cab67f;
  border-color: #cab67f;
  background: transparent;
}
.ctaBand a.button.button-ghost:hover{
  background: #cab67f;
  color: #2e2b24;
}

/* ---------- odkazy na dalsi stranky ---------- */
.nextLinks{
  display: flex;
  gap: 2.4rem;
  margin-top: 5.6rem;
}
.nextLinks a{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 2.6rem 3rem;
  border: 1px solid #e7ddc5;
  text-decoration: none;
  transition: border-color .18s ease;
}
.nextLinks a:hover{
  border-color: #987d3e;
}
.nextLinks a .title{
  font: 700 2.2rem/2.9rem Satoshi;
  color: #2e2b24;
}
.nextLinks a .note{
  font: 400 1.7rem/2.6rem Satoshi;
  color: #6b6455;
}

/* ---------- upozornovaci pas ---------- */
.noteBand{
  margin-top: 2.6rem;
  padding: 2.4rem 3rem;
  background: #f6f1e7;
  border-left: 3px solid #987d3e;
}

/* ---------- caste dotazy ---------- */
.faqLayout{
  display: flex;
  gap: 6rem;
  align-items: flex-start;
}
.faqLayout .faqIntro{
  flex: 0 0 34rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.faqLayout .faqList{
  flex: 1 1 0;
}
.faqItem{
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 2.6rem 0;
  border-top: 1px solid #e7ddc5;
}
.faqItem:last-child{
  border-bottom: 1px solid #e7ddc5;
}
.faqItem h3{
  font: 700 2rem/2.8rem Satoshi;
}

/* ---------- barevne vzorky ---------- */
.swatches{
  display: flex;
  gap: 1rem;
}
.swatches span{
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1px solid rgba(46,43,36,.12);
}

/* ---------- dvousloupcovy blok ---------- */
.splitRow{
  display: flex;
  gap: 6rem;
  align-items: flex-start;
}
.splitRow .splitText{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
.splitRow .splitMedia{
  flex: 0 0 46%;
}
.splitRow .splitMedia img{
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- mobil ---------- */
@media only screen and (max-width: 959px){
  .pageHead .headGrid,
  .faqLayout,
  .splitRow{
    flex-direction: column;
    gap: 3.5rem;
  }
  .pageHead .headMedia,
  .splitRow .splitMedia{ flex: 1 1 auto; width: 100%; }
  .faqLayout .faqIntro{ flex: 1 1 auto; }
  .cardGrid.cols3,
  .cardGrid.cols4,
  .steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ctaBand{ flex-direction: column; align-items: flex-start; gap: 2.5rem; }
  .nextLinks{ flex-wrap: wrap; }
  .nextLinks a{ flex: 1 1 40%; }
}
@media only screen and (max-width: 649px){
  .contentPage h1{ font-size: 3.8rem; line-height: 4.6rem; }
  .contentPage h2{ font-size: 3rem; line-height: 3.8rem; }
  .pageHead{ padding: 3.5rem 0 3.5rem; }
  .blockRow{ flex-direction: column; gap: 2rem; }
  .blockRow .aside{ flex: 1 1 auto; width: 100%; }
  .cardGrid.cols3,
  .cardGrid.cols4,
  .steps{
    grid-template-columns: minmax(0, 1fr);
  }
  .nextLinks{ flex-direction: column; }
  .ctaBand{ padding: 3.5rem 2.5rem; }
  .factRow{ flex-wrap: wrap; gap: 2.5rem; }
}

/* ---------- samoobsluzne predplatne (cenik) ---------- */
/*
 * Vlastni blok nad balicky na miru. Je to jina nabidka - predplatne misto
 * jednorazove platby - a nema splynout s kartami pod nim.
 */
.samoobsluha{
  background: #fff;
  border: 1px solid #e7ddc5;
  border-top: 3px solid #987d3e;
  padding: 5rem 5rem 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.4rem;
}
.samoHlava{
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 68rem;
}
.samoHlava h2{
  font: 700 3.6rem/4.4rem Satoshi;
  letter-spacing: -.015em;
  color: #2e2b24;
  margin: 0;
}
.samoHlava p{
  font: 400 1.8rem/3rem Satoshi;
  color: #6b6455;
  margin: 0;
}

.samoCeny{
  display: flex;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.samoCena{
  flex: 1 1 26rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
  background: #fdfbf9;
  border: 1px solid #e7ddc5;
  padding: 3.2rem 3.2rem 3.4rem;
}
.samoCena.samoHlavni{
  background: #f6f1e7;
  border-color: #d9cba6;
}
.samoObdobi{
  font: 700 1.3rem/1 Satoshi;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #987d3e;
}
.samoCastka{
  font: 700 4.4rem/1 Satoshi;
  color: #2e2b24;
  font-variant-numeric: tabular-nums;
}
.samoCastka i{
  font: 400 2rem/1 Satoshi;
  font-style: normal;
  color: #8a8171;
  margin-left: .4rem;
}
.samoPozn{
  font: 400 1.5rem/2.4rem Satoshi;
  color: #6b6455;
  min-height: 4.8rem;
}
.samoCena .button{
  margin-top: .6rem;
}

.samoSeznam{
  columns: 2;
  column-gap: 4rem;
  margin: 0;
}
.samoDoplnek{
  font: 400 1.5rem/2.4rem Satoshi;
  color: #8a8171;
  margin: 0;
  padding-top: .4rem;
  border-top: 1px solid #f0eade;
}

.samoPredel{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 68rem;
  padding: 6rem 0 3rem;
}
.samoPredel h2{
  font: 700 3.2rem/4rem Satoshi;
  letter-spacing: -.015em;
  color: #2e2b24;
  margin: 0;
}
.samoPredel p{
  font: 400 1.7rem/2.8rem Satoshi;
  color: #6b6455;
  margin: 0;
}

@media only screen and (max-width: 767px){
  .samoobsluha{ padding: 3.2rem 2.4rem 3rem; gap: 2.8rem; }
  .samoHlava h2{ font-size: 2.8rem; line-height: 3.6rem; }
  .samoCena{ padding: 2.4rem; }
  .samoPozn{ min-height: 0; }
  .samoSeznam{ columns: 1; }
  .samoPredel{ padding: 4rem 0 2.4rem; }
}