/* ============================================================
   Chlupáči.cz – komponenty UI kitu (brand barvy)
   ============================================================ */


.pk-trust,
.pk-guide,
.pk-vguide,
.pk-links {
  --pk-brand: #b71b30;
  --pk-brand-dark: #7a121f;
  --pk-brand-light: #fdecef;
  --pk-brand-mid: #f5c5cc;
  --pk-cta: #009900;
  --pk-cta-dark: #007a00;
  --pk-text: #555;
  --pk-bg-soft: #fafafa;
  --pk-border: #eee;
  --pk-radius: 12px;
  --pk-radius-sm: 8px;
}


/* === TRUST BOX === */
.pk-trust { background: #fff; border: 1px solid var(--pk-border); border-radius: var(--pk-radius); padding: 28px 28px 24px; margin: 24px 0; }
.pk-trust__brand { font-size: 18px; font-weight: 500; margin: 0 0 12px; line-height: 1.4; }
.pk-trust__brand strong { color: var(--pk-brand); font-weight: 600; }
.pk-trust__text { font-size: 15px; line-height: 1.7; margin: 0 0 20px; color: var(--pk-text); }
.pk-trust__text strong { color: #222; font-weight: 500; }
.pk-trust__divider { border: none; border-top: 1px solid var(--pk-border); margin: 20px 0 24px; }
.pk-trust__usp { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pk-trust__usp-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--pk-brand-light); border-radius: var(--pk-radius-sm); transition: transform 0.2s ease; }
.pk-trust__usp-item:hover { transform: translateY(-2px); }
.pk-trust__usp-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.pk-trust__usp-text { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--pk-brand-dark); }


/* === PRŮVODCE 1 (textový) === */
.pk-guide { margin: 32px 0; }
.pk-guide__title { font-size: 22px; font-weight: 600; margin: 0 0 12px; line-height: 1.3; color: var(--pk-brand-dark); }
.pk-guide__intro { font-size: 16px; line-height: 1.7; color: var(--pk-text); margin: 0 0 20px; }
.pk-guide details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--pk-brand-light); color: var(--pk-brand); border-radius: 999px; font-size: 14px; font-weight: 500; user-select: none; transition: background 0.2s ease; }
.pk-guide details > summary::-webkit-details-marker { display: none; }
.pk-guide details > summary:hover { background: var(--pk-brand-mid); }
.pk-guide__btn-label--less,
.pk-guide details[open] .pk-guide__btn-label--more { display: none; }
.pk-guide details[open] .pk-guide__btn-label--less { display: inline; }
.pk-guide__chevron { width: 16px; height: 16px; transition: transform 0.25s ease; }
.pk-guide details[open] .pk-guide__chevron { transform: rotate(180deg); }
.pk-guide__content { margin-top: 24px; }
.pk-steps { list-style: none; padding: 0; margin: 0; counter-reset: pk-step; }
.pk-steps > li { position: relative; padding: 24px 0 24px 56px; border-top: 1px solid #f0f0f0; counter-increment: pk-step; }
.pk-steps > li::before { content: counter(pk-step); position: absolute; left: 0; top: 24px; width: 40px; height: 40px; border-radius: 50%; background: var(--pk-brand-light); color: var(--pk-brand); font-weight: 600; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.pk-guide__stepTitle { font-size: 17px; font-weight: 500; margin: 4px 0 8px; color: var(--pk-brand-dark); }
.pk-guide__stepLead { font-size: 15px; line-height: 1.65; color: var(--pk-text); margin: 0 0 12px; }
.pk-bullets--dot { list-style: none; padding: 0; margin: 0; }
.pk-bullets--dot li { position: relative; padding: 5px 0 5px 18px; font-size: 15px; line-height: 1.6; color: var(--pk-text); }
.pk-bullets--dot li::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--pk-brand); }
.pk-bullets--dot strong { color: var(--pk-brand-dark); font-weight: 500; }
.pk-bullets--dot a { color: var(--pk-brand); text-decoration: underline; }
.pk-tip { background: var(--pk-brand-light); border-radius: var(--pk-radius-sm); padding: 12px 16px; margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; }
.pk-tip__icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.pk-tip__text { font-size: 14px; line-height: 1.6; color: var(--pk-brand-dark); }
.pk-tip__text strong { color: var(--pk-brand-dark); font-weight: 600; }


/* === PRŮVODCE 2 (vizuální) === */
.pk-vguide { margin: 24px 0; }
.pk-vguide__hero { background: var(--pk-brand-light); border: 1px solid var(--pk-brand-mid); border-radius: var(--pk-radius); padding: 28px; margin-bottom: 14px; }
.pk-vguide__tag { display: inline-block; background: var(--pk-brand); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 1px; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.pk-vguide__title { font-size: 24px; font-weight: 600; color: var(--pk-brand-dark); margin: 0 0 10px; line-height: 1.25; }
.pk-vguide__intro { font-size: 15px; line-height: 1.65; color: var(--pk-brand-dark); margin: 0 0 14px; opacity: 0.85; }
.pk-vguide__usps { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 12px; border-top: 1px solid var(--pk-brand-mid); }
.pk-vguide__usp { font-size: 13px; font-weight: 500; color: var(--pk-brand-dark); }
.pk-vguide__step { background: #fff; border: 1px solid var(--pk-border); border-radius: var(--pk-radius); padding: 24px; margin-bottom: 14px; }
.pk-vguide__step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pk-vguide__step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--pk-brand); color: #fff; font-weight: 500; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pk-vguide__step-title { font-size: 17px; font-weight: 500; color: var(--pk-brand-dark); margin: 0; }
.pk-vguide__step-lead { font-size: 14px; line-height: 1.6; color: var(--pk-text); margin: 0 0 14px; }
.pk-vguide__cards { display: grid; gap: 10px; }
.pk-vguide__cards--3 { grid-template-columns: repeat(3, 1fr); }
.pk-vguide__cards--4 { grid-template-columns: repeat(4, 1fr); }
.pk-vguide__chip { background: var(--pk-brand-light); border-radius: var(--pk-radius-sm); padding: 14px 10px; text-align: center; }
.pk-vguide__chip-icon { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.pk-vguide__chip-label { font-size: 12px; font-weight: 500; color: var(--pk-brand-dark); line-height: 1.3; }
.pk-vguide__type { background: var(--pk-bg-soft); border: 1px solid #eaeaea; border-radius: var(--pk-radius-sm); padding: 16px 14px; position: relative; }
.pk-vguide__type--featured { background: #fff; border: 1.5px solid var(--pk-brand); }
.pk-vguide__type-badge { position: absolute; top: -10px; left: 14px; background: var(--pk-brand); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 999px; }
.pk-vguide__type-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.pk-vguide__type-name { font-size: 14px; font-weight: 500; color: var(--pk-brand-dark); margin-bottom: 4px; }
.pk-vguide__type-desc { font-size: 12px; line-height: 1.5; color: #666; }
.pk-vguide__tip { background: var(--pk-brand-light); border-left: 3px solid var(--pk-brand); border-radius: var(--pk-radius-sm); padding: 12px 16px; margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; }
.pk-vguide__tip-icon { font-size: 16px; line-height: 1.4; flex-shrink: 0; }
.pk-vguide__tip-text { font-size: 13px; line-height: 1.55; color: var(--pk-brand-dark); }
.pk-vguide__ratios { display: flex; flex-direction: column; gap: 10px; }
.pk-vguide__ratio-head { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; font-weight: 500; }
.pk-vguide__ratio-label { color: var(--pk-brand-dark); }
.pk-vguide__ratio-value { color: var(--pk-brand); }
.pk-vguide__ratio-bar { background: var(--pk-brand-mid); height: 14px; border-radius: 999px; overflow: hidden; }
.pk-vguide__ratio-fill { background: var(--pk-brand); height: 100%; border-radius: 999px; }
.pk-vguide__pack { background: var(--pk-brand-light); border-radius: var(--pk-radius-sm); padding: 14px 10px; text-align: center; }
.pk-vguide__pack--accent { background: var(--pk-brand); }
.pk-vguide__pack-tag { font-size: 11px; font-weight: 500; color: var(--pk-brand); letter-spacing: 0.5px; }
.pk-vguide__pack--accent .pk-vguide__pack-tag { color: var(--pk-brand-light); }
.pk-vguide__pack-size { font-size: 18px; font-weight: 500; color: var(--pk-brand-dark); margin: 4px 0; }
.pk-vguide__pack--accent .pk-vguide__pack-size { color: #fff; }
.pk-vguide__pack-note { font-size: 11px; line-height: 1.4; color: #666; }
.pk-vguide__pack--accent .pk-vguide__pack-note { color: var(--pk-brand-light); }
.pk-vguide__cta { background: var(--pk-cta); border-radius: var(--pk-radius); padding: 24px; text-align: center; }
.pk-vguide__cta-text { font-size: 16px; line-height: 1.5; color: #fff; margin: 0 0 14px; opacity: 0.95; }
.pk-vguide__cta-btn { display: inline-block; background: #fff; color: var(--pk-cta-dark); font-size: 15px; font-weight: 600; padding: 12px 28px; border-radius: 999px; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease; }
.pk-vguide__cta-btn:hover { transform: translateY(-1px); background: #f5f5f5; }


/* === ROZCESTNÍKY === */
.pk-links { margin: 32px 0; }
.pk-links__title { font-size: 22px; font-weight: 600; color: var(--pk-brand-dark); margin: 0 0 8px; line-height: 1.3; }
.pk-links__lead { font-size: 15px; line-height: 1.65; color: var(--pk-text); margin: 0 0 24px; }
.pk-links__subtitle { font-size: 13px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--pk-brand); margin: 28px 0 12px; }
.pk-links__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pk-links__card { display: flex; align-items: center; gap: 12px; padding: 12px; background: transparent; border: 1px solid var(--pk-border); border-radius: var(--pk-radius-sm); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.pk-links__card:hover { border-color: var(--pk-brand); transform: translateY(-2px); }
.pk-links__card-image { width: 56px; height: 56px; flex-shrink: 0; background: var(--pk-brand-light); border-radius: var(--pk-radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pk-links__card-image img { width: 80%; height: 80%; object-fit: contain; }
.pk-links__card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-links__card-name { font-size: 14px; font-weight: 500; color: var(--pk-brand-dark); }
.pk-links__card-desc { font-size: 12px; line-height: 1.4; color: #777; }
.pk-links__pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pk-links__pill { display: inline-block; padding: 8px 14px; background: var(--pk-brand-light); color: var(--pk-brand-dark); font-size: 13px; font-weight: 500; border-radius: 999px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.pk-links__pill:hover { background: var(--pk-brand); color: #fff; }


/* === RESPONSIVE === */
@media (max-width: 900px) { .pk-trust__usp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .pk-vguide__cards--3 { grid-template-columns: 1fr; }
  .pk-vguide__cards--4 { grid-template-columns: repeat(2, 1fr); }
  .pk-vguide__hero, .pk-vguide__step, .pk-vguide__cta { padding: 20px; }
  .pk-vguide__title { font-size: 21px; }
  .pk-links__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pk-steps > li { padding-left: 48px; }
  .pk-steps > li::before { width: 34px; height: 34px; font-size: 15px; }
}
@media (max-width: 480px) {
  .pk-trust { padding: 20px 18px 18px; }
  .pk-trust__brand { font-size: 17px; }
  .pk-trust__text { font-size: 14px; }
  .pk-trust__usp { grid-template-columns: 1fr; gap: 10px; }
  .pk-links__grid { grid-template-columns: 1fr; }
}