/* PSIPROTEIN BLOG
   Společné styly pro články. Všechny selektory jsou omezené na .pp-article.
   Fonty a globální pozadí se přebírají ze šablony e-shopu.
*/

.pp-article {
  --pp-purple: #4b1ca8;
  --pp-purple-dark: #351274;
  --pp-green: #8ee35a;
  --pp-green-dark: #4d922e;
  --pp-text: #1f1f1f;
  --pp-muted: #67636d;
  --pp-border: #e6e0ec;
  --pp-soft-purple: #f4effc;
  --pp-soft-green: #f0f9e9;
  --pp-soft-yellow: #fff7dc;
  --pp-soft-red: #fff0f0;
  --pp-red: #a72d35;
  --pp-radius: 14px;
  --pp-shadow: 0 8px 28px rgba(40, 20, 70, 0.08);

  max-width: 1040px;
  margin: 0 auto;
  color: var(--pp-text);
  line-height: 1.72;
}

.pp-article *,
.pp-article *::before,
.pp-article *::after {
  box-sizing: border-box;
}

.pp-article__title {
  margin: 0 0 26px;
  line-height: 1.12;
}

.pp-article > p:first-of-type {
  font-size: 1.08em;
}

.pp-article p {
  margin: 0 0 17px;
}

.pp-article h2 {
  position: relative;
  margin: 52px 0 20px;
  padding: 0 0 12px;
  color: var(--pp-purple);
  line-height: 1.22;
}

.pp-article h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--pp-green);
}

.pp-article h3 {
  margin: 30px 0 12px;
  color: var(--pp-purple-dark);
  line-height: 1.3;
}

.pp-article a:not(.pp-article__button) {
  color: var(--pp-purple);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pp-article a:not(.pp-article__button):hover {
  color: var(--pp-purple-dark);
}

.pp-article__list {
  margin: 10px 0 24px;
  padding: 0;
  list-style: none;
}

.pp-article__list li {
  position: relative;
  margin: 9px 0;
  padding-left: 27px;
}

.pp-article__list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pp-green-dark);
  transform: translateY(-50%);
}

/* ZVÝRAZNĚNÉ BOXY */
.pp-article__notice,
.pp-article__cta {
  margin: 30px 0;
  padding: 24px 26px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
}

.pp-article__notice h3,
.pp-article__cta h3 {
  margin: 0 0 9px;
}

.pp-article__notice p,
.pp-article__cta p {
  margin: 0;
}

.pp-article__notice--info {
  border-left: 6px solid var(--pp-purple);
  background: var(--pp-soft-purple);
}

.pp-article__notice--warning {
  border-left: 6px solid #d19a1d;
  background: var(--pp-soft-yellow);
}

.pp-article__notice--danger {
  border-left: 6px solid var(--pp-red);
  background: var(--pp-soft-red);
}

.pp-article__notice--danger h3 {
  color: var(--pp-red);
}

/* TABULKY */
.pp-article__table-wrap {
  width: 100%;
  margin: 24px 0 34px;
  overflow-x: auto;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
  -webkit-overflow-scrolling: touch;
}

.pp-article__table {
  width: 100%;
  min-width: 680px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: #fff;
}

.pp-article__table th,
.pp-article__table td {
  padding: 14px 16px;
  border: 0;
  border-right: 1px solid var(--pp-border);
  border-bottom: 1px solid var(--pp-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.48;
}

.pp-article__table th:last-child,
.pp-article__table td:last-child {
  border-right: 0;
}

.pp-article__table tbody tr:last-child td {
  border-bottom: 0;
}

.pp-article__table th {
  color: #fff;
  background: var(--pp-purple);
}

.pp-article__table tbody tr:nth-child(even) td {
  background: #faf9fc;
}

.pp-article__table--checklist .pp-article__table th {
  background: var(--pp-purple-dark);
}

.pp-article__table--critical {
  border-color: #efc9cb;
}

.pp-article__table--critical .pp-article__table th {
  background: var(--pp-red);
}

/* ČÍSLOVANÉ BLOKY */
.pp-article__steps,
.pp-article__mistakes {
  margin: 18px 0 30px;
  padding: 20px 24px;
  border-radius: var(--pp-radius);
  background: var(--pp-soft-purple);
}

.pp-article__step,
.pp-article__mistake {
  margin: 0 0 11px !important;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(75, 28, 168, 0.13);
}

.pp-article__step:last-child,
.pp-article__mistake:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0;
  border-bottom: 0;
}

/* PRODUKTOVÉ CTA */
.pp-article__cta {
  color: #fff;
  border-color: var(--pp-purple);
  background: var(--pp-purple);
  box-shadow: var(--pp-shadow);
}

.pp-article__cta h3 {
  color: #fff;
}

.pp-article__cta a:not(.pp-article__button) {
  color: #fff;
}

.pp-article__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 11px 22px;
  border-radius: 999px;
  color: var(--pp-purple-dark);
  background: var(--pp-green);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.pp-article__button:hover {
  color: var(--pp-purple-dark);
  background: #a1ed73;
  transform: translateY(-1px);
}

/* FAQ */
.pp-article h2 + h3 {
  margin-top: 24px;
}

.pp-article h2:nth-last-of-type(3) ~ h3 {
  padding: 18px 20px 0;
  border: 1px solid var(--pp-border);
  border-bottom: 0;
  border-radius: var(--pp-radius) var(--pp-radius) 0 0;
  background: var(--pp-soft-purple);
}

.pp-article h2:nth-last-of-type(3) ~ h3 + p {
  margin-top: 0;
  padding: 0 20px 18px;
  border: 1px solid var(--pp-border);
  border-top: 0;
  border-radius: 0 0 var(--pp-radius) var(--pp-radius);
}

/* ZDROJE */
.pp-article__sources {
  margin: 22px 0 0;
  padding: 22px 24px;
  border-radius: var(--pp-radius);
  color: var(--pp-muted);
  background: #f7f7f7;
}

.pp-article__sources p {
  margin-bottom: 7px;
  font-size: 0.92em;
}

/* MOBIL */
@media (max-width: 767px) {
  .pp-article {
    line-height: 1.65;
  }

  .pp-article h2 {
    margin-top: 42px;
  }

  .pp-article__notice,
  .pp-article__cta,
  .pp-article__steps,
  .pp-article__mistakes,
  .pp-article__sources {
    padding: 19px 18px;
    border-radius: 11px;
  }

  .pp-article__table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .pp-article__table {
    min-width: 0;
    background: transparent;
  }

  .pp-article__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pp-article__table,
  .pp-article__table tbody,
  .pp-article__table tr,
  .pp-article__table td {
    display: block;
    width: 100%;
  }

  .pp-article__table tr {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--pp-border);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(40, 20, 70, 0.06);
  }

  .pp-article__table td {
    display: grid;
    grid-template-columns: minmax(105px, 38%) 1fr;
    gap: 12px;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--pp-border);
    background: #fff !important;
  }

  .pp-article__table td::before {
    content: attr(data-label);
    color: var(--pp-purple-dark);
    font-weight: 700;
  }

  .pp-article__table tr:last-child {
    margin-bottom: 0;
  }

  .pp-article__table tr td:last-child {
    border-bottom: 0;
  }

  .pp-article__button {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .pp-article__table td {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}