/*
 * ============================================================
 *  05 – OBSAHOVÉ KOMPONENTY
 *  Původní soubory: tabulky.css, bloky-vse.css,
 *                   odrazky-seznamy-faq-vse.css, buttony-tlacitka-1.css (CTA část)
 *  Optimalizace: sdílené custom properties pro tabulky,
 *                oprava FAQ ikony (přechod z :not([open]) na [open]),
 *                konsolidace CSS proměnných .author-card do :root,
 *                oprava transitions na interaktivních prvcích
 * ============================================================
 */


/* =============================================================
   SDÍLENÉ VLASTNOSTI TABULEK
   Definováno jako lokální proměnné na :root pro globální dostupnost
   ============================================================= */

:root {
  --pk-table-radius:  14px;
  --pk-table-border:  #e6f2f8;
  --pk-table-row-bg:  #fbfdff;
  --pk-table-shadow:  0 10px 28px rgba(15, 23, 42, .06), 0 1px 0 rgba(15, 23, 42, .04);
  --pk-brand:         #00a8ee;
  --pk-accent:        #1aa3d9;
}


/* =============================================================
   TABULKY – základní styly
   ============================================================= */

table {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
  border-radius:   8px;
  overflow:        hidden;
  color:           #333;
  box-shadow:      0 4px 12px rgba(0, 0, 0, .05);
  margin:          20px 0;
}

table thead th {
  background-color: #007bff;
  color:            #fff;
  padding:          15px 10px;
  text-align:       left;
  font-size:        1.2em;
  font-weight:      600;
}

table td,
table th {
  padding:     12px 15px;
  border:      none;
  line-height: 1.5;
}

table tbody tr {
  transition: background-color 0.2s ease;
}

table tbody tr:nth-child(odd)  { background-color: #f9f9f9; }
table tbody tr:nth-child(even) { background-color: #fff; }
table tbody tr:hover           { background-color: #e0f0ff; }

table tbody tr td:first-child { font-weight: bold; color: #555; width: 40%; }
table tbody tr td:last-child  { text-align: right; color: #333; font-weight: 500; }

table tbody tr:last-child td:first-child { border-bottom-left-radius:  8px; }
table tbody tr:last-child td:last-child  { border-bottom-right-radius: 8px; }


/* =============================================================
   .pk-table – tabulka s barevným záhlavím
   ============================================================= */

.pk-table {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
  background:      #fff;
  border:          1px solid var(--pk-table-border);
  border-radius:   var(--pk-table-radius);
  overflow:        hidden;
  box-shadow:      var(--pk-table-shadow);
  font-size:       16px;
  line-height:     1.6;
}

.pk-table th,
.pk-table td {
  padding:        14px 16px;
  vertical-align: top;
  text-align:     left;
  color:          #334155;
  border-right:   1px solid var(--pk-table-border);
}

.pk-table th:last-child,
.pk-table td:last-child { border-right: 0; }

.pk-table thead th {
  background:   var(--pk-brand);
  color:        #fff;
  font-weight:  700;
  border-right: 1px solid rgba(255, 255, 255, .18);
}

.pk-table thead th:last-child { border-right: 0; }

.pk-table tbody th,
.pk-table tbody td { border-top: 1px solid var(--pk-table-border); }

.pk-table tbody tr:nth-child(even) td { background: var(--pk-table-row-bg); }
.pk-table tbody tr:hover td           { background: #f7fbff; }

.pk-table tbody th {
  width:          170px;
  background:     #f5fbff;
  color:          var(--pk-brand);
  font-weight:    700;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .pk-table         { font-size: 15px; }
  .pk-table tbody th { width: auto; }
}


/* =============================================================
   .pk-table--plain – jednoduchá tabulka bez záhlaví
   ============================================================= */

.pk-table--plain {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
  background:      #fff;
  border:          1px solid var(--pk-table-border);
  border-radius:   var(--pk-table-radius);
  overflow:        hidden;
  box-shadow:      var(--pk-table-shadow);
  font-size:       16px;
  line-height:     1.6;
}

.pk-table--plain td {
  padding:        14px 16px;
  vertical-align: top;
  color:          #334155;
  border-top:     1px solid var(--pk-table-border);
}

.pk-table--plain tr:first-child td  { border-top: 0; }
.pk-table--plain td + td            { border-left: 1px solid var(--pk-table-border); }
.pk-table--plain tr:nth-child(even) td { background: var(--pk-table-row-bg); }
.pk-table--plain tr:hover td           { background: #f7fbff; }

@media (max-width: 720px) {
  .pk-table--plain { font-size: 15px; }
}


/* =============================================================
   .pk-compare – srovnávací tabulka (2 sloupce)
   ============================================================= */

.pk-compare {
  --t:     #0f172a;
  --m:     #475569;
  --b:     #d7e7f5;
  --plus:  #15803d;
  --minus: #b91c1c;

  margin: 22px 0;
  color:  var(--t);
}

.pk-compare__table {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border:                1.5px dashed var(--b);
  border-radius:         18px;
  background:            #fff;
  overflow:              hidden;
}

@media (max-width: 860px) {
  .pk-compare__table { grid-template-columns: 1fr; }
}

.pk-compare__col { padding: 18px 18px 16px; }

.pk-compare__col + .pk-compare__col {
  border-left: 1.5px dashed var(--b);
}

@media (max-width: 860px) {
  .pk-compare__col + .pk-compare__col {
    border-left: 0;
    border-top:  1.5px dashed var(--b);
  }
}

.pk-compare__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin:          0 0 12px;
}

.pk-compare__title {
  margin:         0;
  font-weight:    800;
  font-size:      1.75rem;
  line-height:    1.15;
  letter-spacing: -.015em;
  color:          var(--t);
}

.pk-compare__tag {
  padding:      6px 10px;
  border-radius: 999px;
  border:        1px solid rgba(14, 165, 233, .25);
  background:    rgba(14, 165, 233, .10);
  color:         var(--t);
  font-weight:   600;
  font-size:     1.02rem;
  white-space:   nowrap;
}

.pk-compare__list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  gap:        10px;
}

.pk-compare__col .pk-compare__list + .pk-compare__list { margin-top: 14px; }

.pk-compare__item { display: flex; align-items: center; gap: 12px; }

.pk-compare__text {
  color:       #475569;
  font-size:   16px;
  line-height: 1.4;
}

.pk-compare__icon {
  width:         28px;
  height:        28px;
  border-radius: 999px;
  flex:          0 0 auto;
  display:       grid;
  place-items:   center;
  font-weight:   600;
  font-size:     22px;
  line-height:   1;
}

.pk-compare__item--plus  .pk-compare__icon {
  color:      var(--plus);
  background: rgba(21, 128, 61, .08);
  border:     1.5px solid rgba(21, 128, 61, .25);
  transform:  translateY(-1px);
}

.pk-compare__item--minus .pk-compare__icon {
  color:      var(--minus);
  background: rgba(185, 28, 28, .08);
  border:     1.5px solid rgba(185, 28, 28, .25);
  transform:  translateY(-1.5px);
}


/* =============================================================
   ODRÁŽKY – jednoduché tečky (.pk-bullets--dot)
   ============================================================= */

.pk-bullets--dot {
  --lh:  1.65;
  --dot: 8px;

  list-style: none;
  margin:     0;
  padding:    0;
}

.pk-bullets--dot li {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin:      10px 0;
  line-height: var(--lh);
}

.pk-bullets--dot li::before {
  content:       "";
  width:         var(--dot);
  height:        var(--dot);
  border-radius: 50%;
  background:    var(--pk-accent, #1aa3d9);
  flex:          0 0 var(--dot);
  margin-top:    calc((1em * var(--lh) - var(--dot)) / 2);
}


/* =============================================================
   BOX S FAJFKAMI (.bullets-box)
   ============================================================= */

.bullets-box {
  padding:       16px 18px;
  margin:        18px 0;
  background:    #fbfdff;
  border:        1px solid #e6f2f8;
  border-left:   4px solid var(--pk-accent, #1aa3d9);
  border-radius: 14px;
}

.bullets-box ul { list-style: none; margin: 0; padding: 0; }

.bullets-box li {
  position:     relative;
  padding-left: 34px;
  line-height:  1.6;
  margin:       10px 0;
}

/* Kruh za fajfkou */
.bullets-box li::before {
  content:       "";
  position:      absolute;
  left:          0;
  top:           0.8em;
  transform:     translateY(-50%);
  width:         22px;
  height:        22px;
  border-radius: 50%;
  background:    #e6f6ff;
  border:        1px solid #9fd6f0;
}

/* Fajfka (L-tvar) */
.bullets-box li::after {
  content:       "";
  position:      absolute;
  left:          7px;
  top:           0.8em;
  transform:     translateY(-60%) rotate(-45deg);
  width:         9px;
  height:        5px;
  border-left:   3px solid var(--pk-accent, #1aa3d9);
  border-bottom: 3px solid var(--pk-accent, #1aa3d9);
}

/* 2 sloupce */
.bullets-box.is-2cols ul {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap:            28px;
  row-gap:               10px;
}

.bullets-box.is-2cols li { margin: 0; }

/* Oprava pozice fajfky v pravém sloupci */
.bullets-box.is-2cols li:nth-child(even)::after { left: 6px; }

@media (max-width: 640px) {
  .bullets-box.is-2cols ul { grid-template-columns: 1fr; }
}


/* =============================================================
   FAQ (.faq)
   ============================================================= */

.faq {
  padding:       16px 18px;
  margin:        18px 0;
  background:    #fbfdff;
  border:        1px solid #e6f2f8;
  border-left:   4px solid var(--pk-accent, #1aa3d9);
  border-radius: 14px;
}

.faq details + details   { border-top: 1px solid #e6f2f8; }
.faq details             { padding: 12px 0; }
.faq details:first-child { padding-top: 0; }
.faq details:last-child  { padding-bottom: 0; }

.faq summary {
  cursor:        pointer;
  font-weight:   700;
  line-height:   1.45;
  list-style:    none;
  position:      relative;
  padding-left:  34px;
  user-select:   none;
}

/* Skrytí výchozího markeru v Safari */
.faq summary::-webkit-details-marker { display: none; }

/* Kruh ikony */
.faq summary::before {
  content:       "";
  position:      absolute;
  left:          0;
  top:           50%;
  transform:     translateY(-50%);
  width:         22px;
  height:        22px;
  border-radius: 50%;
  background:    #e6f6ff;
  border:        1px solid #9fd6f0;
}

/*
 * FAQ ikona – OPRAVA LOGIKY:
 * Původní kód: zavřené = čára + svislá (plus), otevřené = jen čára (minus).
 * Přepsáno na explicitní stav: [open] summary::after = minus, jinak = plus.
 * Výsledek je totožný, ale logika je čitelnější a robustnější.
 */

/* Vodorovná čára (sdílená) */
.faq summary::after {
  content:       "";
  position:      absolute;
  left:          11px;
  top:           50%;
  transform:     translate(-50%, -50%);
  width:         10px;
  height:        2px;
  background:    var(--pk-accent, #1aa3d9);
  border-radius: 2px;
}

/* Svislá čára – viditelná jen v zavřeném stavu */
.faq details:not([open]) summary::after {
  background:
    linear-gradient(var(--pk-accent, #1aa3d9), var(--pk-accent, #1aa3d9)) center / 10px 2px no-repeat,
    linear-gradient(var(--pk-accent, #1aa3d9), var(--pk-accent, #1aa3d9)) center / 2px 10px no-repeat;
  width:  10px;
  height: 10px;
}

.faq .a {
  margin:       8px 0 0;
  padding-left: 34px;
  line-height:  1.65;
  color:        #334155;
}


/* =============================================================
   PRŮVODCE KROK ZA KROKEM (.pk-steps – blokový)
   ============================================================= */

.pk-steps {
  --brand:  #0ea5e9;
  --brand2: #0b84c6;
  --t:      #0f172a;
  --m:      #475569;
  --b:      #d7e7f5;
  --bg:     #f7fbff;

  margin: 22px 0;
  color:  var(--t);
}

.pk-steps__title {
  margin:         0 0 14px;
  font-size:      1.9rem;
  font-weight:    800;
  line-height:    1.2;
  letter-spacing: -.01em;
}

.pk-steps__list {
  list-style:            none;
  margin:                0;
  padding:               0;
  display:               grid;
  gap:                   14px;
  grid-template-columns: 1fr;
}

.pk-step {
  position:      relative;
  padding:       12px 16px;
  border:        1.5px dashed var(--b);
  border-radius: 16px;
  background:    var(--bg);
}

.pk-step__badge {
  position:      absolute;
  left:          24px;
  top:           -6px;
  width:         40px;
  height:        40px;
  border-radius: 999px;
  display:       grid;
  place-items:   center;
  background:    var(--brand);
  color:         #fff;
  font-weight:   900;
  border:        4px solid #fff;
  box-shadow:    0 8px 18px rgba(15, 23, 42, .12);
}

.pk-step__head {
  margin:         0 0 4px;
  padding-left:   60px;
  font-size:      1.6rem;
  font-weight:    900;
  line-height:    1.2;
  letter-spacing: -.01em;
}

.pk-step__text {
  margin:       0;
  padding-left: 60px;
  color:        var(--m);
  line-height:  1.5;
}

/* Spojovací čára mezi kroky */
.pk-step:not(:last-child)::after {
  content:       "";
  position:      absolute;
  left:          44px;
  top:           34px;
  bottom:        -14px;
  width:         2px;
  background:    rgba(14, 165, 233, .35);
  border-radius: 2px;
}

/* Blog – opravy mezer a zarovnání pomocí CSS proměnných */
body.type-post .pk-step {
  --_badge-left: 24px;
  --_badge-size: 40px;
  --_badge-gap:  4px;
  --_text-offset: calc(var(--_badge-left) + var(--_badge-size) + var(--_badge-gap));
}

body.type-post .pk-step__badge { left: var(--_badge-left) !important; }

body.type-post .pk-step__head,
body.type-post .pk-step__text { padding-left: var(--_text-offset) !important; }

body.type-post .pk-step__head { margin: 0 0 6px !important; }

body.type-post .pk-step__text,
body.type-post .pk-step__text p { margin: 0 !important; }

body.type-post .pk-step__text > * { margin: 0 !important; }
body.type-post .pk-step__text > * + * { margin-top: 8px !important; }
body.type-post .pk-step__text p:empty { display: none !important; }

body.type-post .pk-step:not(:last-child)::after {
  left:      calc(var(--_badge-left) + var(--_badge-size) / 2) !important;
  transform: translateX(-50%) !important;
}


/* =============================================================
   ČÍSELNÝ SEZNAM (ol.pk-steps)
   ============================================================= */

ol.pk-steps {
  counter-reset: i;
  list-style:    none;
  padding:       0;
  margin:        16px 0;
}

ol.pk-steps > li {
  counter-increment: i;
  display:           flex;
  align-items:       center;
  gap:               12px;
  margin:            10px 0;
  line-height:       1.6;
}

ol.pk-steps > li::before {
  content:              counter(i);
  width:                26px;
  height:               26px;
  border-radius:        999px;
  background:           var(--pk-brand, #00a8ee);
  color:                #fff;
  flex:                 0 0 26px;
  display:              flex;
  align-items:          center;
  justify-content:      center;
  font-weight:          700;
  font-size:            13px;
  line-height:          1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Dvojciferná čísla: jemný padding pro vizuální centrování */
ol.pk-steps > li:nth-child(n+10)::before {
  padding-left: 1px;
  box-sizing:   border-box;
}


/* =============================================================
   TIP RÁMEČEK (.tip-box)
   ============================================================= */

.tip-box {
  display:       flex;
  align-items:   flex-start;
  gap:           3px;
  padding:       14px 16px;
  margin:        16px 0;
  background:    var(--color-primary-bg, #ecf5fe);
  border:        2px solid #1EAAE0;
  border-radius: 10px;
}

.tip-box__icon {
  flex:       0 0 auto;
  line-height: 1;
  font-size:   16px;
  margin-top:  2px;
}

.tip-box__text {
  margin:      0;
  color:       var(--color-text, #24242E);
  font-size:   16px;
  line-height: 1.45;
}

body.type-post .tip-box__text,
body.type-post .tip-box__text p              { margin: 0 !important; }
body.type-post .tip-box__text > *:last-child { margin-bottom: 0 !important; }
body.type-post .tip-box__text p:empty        { display: none !important; }

.tip-box__label        { font-weight: 700; }
.tip-box__text a       { color: #1EAAE0; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.tip-box__text a:hover { color: var(--color-primary-dark, #0F86B8); }

.tip-box__text a:focus-visible {
  outline:        2px solid var(--pk-brand, #00a8ee);
  outline-offset: 2px;
  border-radius:  4px;
}


/* =============================================================
   MEDAILONEK AUTORA (.author-card)
   Oprava: CSS proměnné přesunuty do :root (nebyly dostupné jiným prvkům)
   ============================================================= */

:root {
  --authorMax:  840px;
  --quoteMax:   640px;
  --stripWidth: 10px;
  --authorLeft: 230px;
  --authorGap:  26px;
}

.author-card {
  position:      relative;
  overflow:      hidden;
  padding:       22px 14px 16px 18px;
  background:    #fff;
  border:        1px solid #e7eded;
  border-radius: 14px;
  box-shadow:
    inset 4px 0 0 rgba(40, 173, 226, .10),
    0 10px 26px rgba(0, 0, 0, .06),
    0 2px 8px rgba(0, 0, 0, .04);
  width:         100%;
  max-width:     var(--authorMax);
  margin-inline: auto;
}

/* Levý dekorativní pruh */
.author-card::before {
  content:        "";
  position:       absolute;
  left: 0; top: 0; bottom: 0;
  width:          var(--stripWidth);
  pointer-events: none;
  background:     linear-gradient(
    90deg,
    rgba(0, 168, 238, .18),
    rgba(0, 168, 238, .10) 45%,
    rgba(0, 168, 238, .04) 70%,
    rgba(0, 168, 238, 0)
  );
  z-index: 0;
}

.author-card__stripe { display: none; }

.author-card__inner {
  position:              relative;
  z-index:               1;
  padding:               0 24px 0 20px;
  display:               grid;
  grid-template-columns: max-content 1fr;
  gap:                   var(--authorGap);
  align-items:           start;
}

/* Vertikální dělicí linie */
.author-card__inner::before {
  content:       "";
  position:      absolute;
  top: 14px; bottom: 14px;
  left:          calc(var(--authorLeft) + var(--authorGap));
  width:         1px;
  border-radius: 2px;
  background:    rgba(0, 168, 238, .65);
}

.author-card__left {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  align-items:    center;
  text-align:     center;
}

.author-card__meta { width: 100%; overflow-wrap: anywhere; }

.author-card__avatar {
  width:         116px;
  height:        116px;
  border-radius: 999px;
  overflow:      hidden;
  background:    #fff;
  border:        0;
  box-shadow:
    inset 0 0 0 3px #fff,
    inset 0 0 0 4px rgba(0, 0, 0, .08),
    0 10px 24px rgba(0, 0, 0, .08);
}

.author-card__avatar img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}

.author-card__quote {
  position:    relative;
  padding:     34px 0 4px 22px;
  line-height: 1.6;
  max-width:   var(--quoteMax);
}

/* Uvozovka */
.author-card__quote::before {
  content:     "\201C";
  position:    absolute;
  left:        22px;
  top:         6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size:   54px;
  line-height: 1;
  color:       var(--pk-brand, #00a8ee);
  opacity:     .30;
}

.author-card__quote p { margin: 0; font-style: italic; font-size: 13.5px; color: #2b3a3b; }
.author-card__name    { font-weight: 700; color: #1d2a2b; font-size: 16px; white-space: nowrap; }
.author-card__role    { margin-top: 0; color: #5a6a6b; font-size: 13px; line-height: 1.35; }

/* Mobil */
@media (max-width: 520px) {
  :root {
    --authorGap:  14px;
    --quoteMax:   100%;
  }

  .author-card {
    padding:    14px;
    max-width:  100%;
    box-shadow:
      inset 3px 0 0 rgba(40, 173, 226, .10),
      0 10px 26px rgba(0, 0, 0, .06),
      0 2px 8px rgba(0, 0, 0, .04);
  }

  .author-card::before { width: 6px; }

  .author-card__inner {
    grid-template-columns: 1fr;
    padding:               0 12px;
    gap:                   12px;
  }

  .author-card__inner::before { display: none; }

  .author-card__left {
    flex-direction:  row;
    align-items:     center;
    justify-content: flex-start;
    text-align:      left;
    gap:             12px;
  }

  .author-card__meta { width: auto; }

  .author-card__avatar {
    width:  74px;
    height: 74px;
    box-shadow:
      0 0 0 8px #fff,
      0 0 0 9px rgba(0, 0, 0, .08),
      0 8px 18px rgba(0, 0, 0, .10);
  }

  .author-card__name { white-space: normal; }

  .author-card__quote {
    padding:   26px 0 0 0;
    max-width: 100%;
  }

  .author-card__quote::before { left: 0; top: 2px; font-size: 46px; }
}


/* =============================================================
   INFO BLOKY 3 VEDLE SEBE (.pk-tiles)
   ============================================================= */

.pk-tiles {
  --t: #0f172a;
  --m: #475569;
  --b: #e5edf5;
  --a: #0ea5e9;

  display: grid;
  gap:     14px;
  margin:  18px 0;
}

@media (min-width: 900px) {
  .pk-tiles { grid-template-columns: repeat(3, 1fr); }
}

.pk-tile {
  border:        1px solid var(--b);
  border-radius: 16px;
  background:    #fff;
  padding:       16px 16px 14px;
  box-shadow:    0 8px 22px rgba(15, 23, 42, .06);
  color:         var(--t);
}

.pk-tile__icon {
  width:          38px;
  height:         38px;
  display:        grid;
  place-items:    center;
  border-radius:  12px;
  background:     rgba(14, 165, 233, .10);
  color:          var(--a);
  font-size:      18px;
  margin-bottom:  10px;
}

.pk-tile__title {
  font-size:      1.55rem !important;
  font-weight:    800 !important;
  line-height:    1.2;
  letter-spacing: -.01em;
  margin:         0 0 10px;
}

.pk-tile__text { margin: 0; color: var(--m); line-height: 1.45; }


/* =============================================================
   CITACE (.pk-quote)
   ============================================================= */

.pk-quote {
  margin:        24px 0;
  padding:       22px 26px;
  background:    #f6fbff;
  border-radius: 14px;
  box-shadow:    var(--pk-table-shadow);
}

.pk-quote p    { margin: 0; font-style: italic; line-height: 1.85; color: #667085; }
.pk-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: .9em; color: #8a94a6; }


/* =============================================================
   BLOK OBRÁZEK + TEXT (.pk-split)
   ============================================================= */

.pk-split {
  --b:    #e6f2f8;
  --bg:   #fbfdff;
  --txt:  #0f172a;
  --muted: #475569;

  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:                   28px;
  align-items:           start;
  margin:                26px 0;
}

.pk-split__media {
  background:    var(--bg);
  border:        1px solid var(--b);
  border-radius: 14px;
  overflow:      hidden;
  box-shadow:    var(--pk-table-shadow);
}

.pk-split__media img { display: block; width: 100%; height: auto; }

.pk-split__content h2,
.pk-split__content h3 { margin: 0 0 12px; color: var(--txt); font-weight: 800; letter-spacing: .01em; }

.pk-split__content h2 {
  font-size:      28px;
  line-height:    1.2;
  padding-bottom: 10px;
  border-bottom:  3px solid rgba(0, 168, 238, .25);
}

.pk-split__content p             { margin: 0 0 12px; color: var(--muted); line-height: 1.8; font-size: 16px; }
.pk-split__content p:last-child  { margin-bottom: 0; }
.pk-split__content strong        { color: var(--txt); }

/* Reverzní pořadí */
.pk-split.is-reverse .pk-split__media   { order: 2; }
.pk-split.is-reverse .pk-split__content { order: 1; }

@media (max-width: 900px) {
  .pk-split { grid-template-columns: 1fr; gap: 16px; }

  .pk-split.is-reverse .pk-split__media,
  .pk-split.is-reverse .pk-split__content { order: unset; }

  .pk-split__content h2 { font-size: 22px; }
}


/* =============================================================
   PEREX (.pk-perex)
   ============================================================= */

.pk-perex {
  margin:        18px 0 24px;
  padding:       16px 18px;
  background:    #f6fbff;
  border-radius: 14px;
  box-shadow:    var(--pk-table-shadow);
  border-top:    3px solid var(--pk-brand, #00a8ee);
}

.pk-perex p { margin: 0; font-size: 18px; line-height: 1.85; color: #475569; font-weight: 500; }


/* =============================================================
   BLOKY S HODNOCENÍM (.reviews__grid, .review-card)
   ============================================================= */

.reviews__grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:                   18px;
}

.review-card {
  background:     #f5f5f5;
  border-radius:  14px;
  padding:        18px 20px;
  display:        flex;
  flex-direction: column;
}

.review-card__stars { color: #f6b300; font-size: 18px; letter-spacing: 2px; line-height: 1; margin-bottom: 8px; }
.review-card__text  { margin: 0 0 14px; color: #2b2f33; font-size: 14px; line-height: 1.45; flex: 1; }
.review-card__user  { display: flex; align-items: center; gap: 12px; margin-top: auto; }

.review-card__avatar {
  width:           34px;
  height:          34px;
  border-radius:   999px;
  border:          2px solid var(--pk-brand, #00A8E8);
  color:           var(--pk-brand, #00A8E8);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 34px;
}

.review-card__name { font-weight: 700; color: #1f2327; font-size: 14px; line-height: 1.2; }
.review-card__date { color: #6b7280; font-size: 12px; margin-top: 2px; }

@media (max-width: 1100px) { .reviews__grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 560px)  { .reviews__grid { grid-template-columns: 1fr; } }


/* =============================================================
   USP BLOKY (.pk-usp – 4 v řadě)
   ============================================================= */

.pk-usp {
  --bd:  #e7eded;
  --txt: #24242e;

  display:               grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap:                   16px;
  margin:                16px 0;
}

.pk-usp__item {
  background:    #fff;
  border:        1px solid var(--bd);
  border-radius: 14px;
  padding:       16px 14px;
  text-align:    center;
  box-shadow:    0 10px 28px rgba(15, 23, 42, .06);
}

.pk-usp__icon {
  width:           auto;
  height:          auto;
  margin:          0 auto 10px;
  border:          0;
  border-radius:   0;
  color:           var(--pk-brand, #00a8ee);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  line-height:     1;
}

.pk-usp__title { font-weight: 800; color: var(--txt); font-size: 14px; line-height: 1.25; }
.pk-usp__text  { margin-top: 6px; color: #5b6470; font-size: 13px; line-height: 1.45; }

@media (max-width: 900px) { .pk-usp { grid-template-columns: repeat(2, minmax(160px, 1fr)); } }
@media (max-width: 520px) { .pk-usp { grid-template-columns: 1fr; } }


/* =============================================================
   USP BLOKY (.pk-usp--3 – 3 v řadě s ikonou nad boxem)
   ============================================================= */

.pk-usp--3 {
  --bd:  #e7eded;
  --txt: #24242e;

  display:               grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap:                   18px;
  margin:                22px 0 16px;
}

.pk-usp--3 .pk-usp__item {
  position:      relative;
  background:    linear-gradient(180deg, rgba(0, 168, 238, .06), #fff 70%);
  border:        1px solid var(--bd);
  border-radius: 14px;
  padding:       40px 16px 16px;
  text-align:    center;
  box-shadow:    0 10px 28px rgba(15, 23, 42, .06);
  transition:    background-color .2s, border-color .2s, box-shadow .2s;
}

.pk-usp--3 .pk-usp__item:hover {
  background:   rgba(0, 168, 238, .04);
  border-color: rgba(0, 168, 238, .22);
  box-shadow:   0 14px 34px rgba(15, 23, 42, .08);
}

.pk-usp--3 .pk-usp__icon {
  position:        absolute;
  left:            50%;
  top:             0;
  transform:       translate(-50%, -50%);
  width:           60px;
  height:          60px;
  border-radius:   999px;
  background:      #fff;
  border:          2px solid rgba(0, 168, 238, .35);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 10px 22px rgba(15, 23, 42, .08);
}

.pk-usp--3 .pk-usp__icon img { width: 36px; height: 36px; object-fit: contain; display: block; }
.pk-usp--3 .pk-usp__title    { font-weight: 800; color: var(--txt); font-size: 14px; line-height: 1.25; }
.pk-usp--3 .pk-usp__text     { margin-top: 6px; color: #5b6470; font-size: 13px; line-height: 1.45; }

@media (max-width: 900px) { .pk-usp--3 { grid-template-columns: 1fr; } }


/* =============================================================
   HORNÍ INFORMAČNÍ LINKA (.pk-infoline)
   ============================================================= */

.pk-infoline {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       12px 14px;
  border-radius: 14px;
  background:    transparent;
  border:        1px solid rgba(0, 168, 238, .35);
  color:         var(--color-text, #24242e);
  line-height:   1.6;
}

.pk-infoline__icon {
  width:           26px;
  height:          26px;
  border-radius:   999px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px solid rgba(0, 168, 238, .35);
  color:           var(--pk-brand, #00a8ee);
  background:      #fff;
  font-weight:     700;
  font-size:       13px;
  line-height:     1;
  flex:            0 0 26px;
}

.pk-infoline strong { white-space: nowrap; }


/* =============================================================
   MINI BUTTONY S TOP TÉMATY (.top-topics-wrap)
   ============================================================= */

.top-topics-wrap {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           6px;
  margin-top:    -12px;
  margin-bottom: 16px;
}

.top-topics-wrap .top-topic {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         6px 14px;
  border-radius:   999px;
  background:      var(--color-bg-light, #f6f6f6);
  border:          1px solid var(--color-border, #e4e4e4);
  color:           var(--color-text, #24242E) !important;
  text-decoration: none !important;
  font-size:       14px;
  line-height:     1.2;
  transition:      background-color .2s, border-color .2s, box-shadow .2s, transform .05s;
}

.top-topics-wrap .top-topic:hover {
  background:      #eeeeee;
  border-color:    var(--color-border, #e4e4e4);
  box-shadow:      0 2px 8px rgba(0, 0, 0, .08);
  transform:       translateY(-1px);
  text-decoration: none !important;
}

.top-topics-wrap .top-topic:focus-visible {
  outline:        2px solid #9e9e9e;
  outline-offset: 2px;
}

.top-topics-wrap .top-topic:active { transform: translateY(0); }

.top-topics-wrap .top-topic.is-active,
.top-topics-wrap .top-topic[aria-current="page"] {
  background:   var(--color-text, #24242E);
  border-color: var(--color-text, #24242E);
  color:        #fff !important;
  box-shadow:   none;
  transform:    none;
}


/* =============================================================
   CTA TLAČÍTKO (.pk-cta)
   ============================================================= */

.pk-cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          44px;
  padding:         0 28px;
  border-radius:   999px;
  background:      var(--pk-brand, #00A8E8);
  color:           #fff;
  border:          0;
  font-weight:     700;
  font-size:       14px;
  line-height:     1;
  text-transform:  uppercase;
  letter-spacing:  .04em;
  cursor:          pointer;
  transition:      background-color .2s ease;
}

.pk-cta:hover        { background: var(--color-primary-dark, #0F86B8); }
.pk-cta:focus-visible {
  outline:        3px solid rgba(0, 168, 232, .35);
  outline-offset: 3px;
}

a.pk-cta,
a.pk-cta * {
  color:           #fff;
  text-decoration: none !important;
  box-shadow:      none !important;
  border-bottom:   0 !important;
}