/* ============================================================
   webkartka.pl — /sklep-internetowy/ (uzupełnia wk-site.css i blog.css)
   ============================================================ */

.sk-hero { background: var(--spruce); color: var(--on-dark); padding-top: 28px; padding-bottom: 80px; }
.sk-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: end; margin-top: 40px; }
.sk-hero h1 { margin: 0; max-width: 15ch; color: #fff; font-size: clamp(44px, 6vw, 86px); line-height: .95; letter-spacing: -.03em; }
.sk-lede { margin: 26px 0 0; max-width: 50ch; color: var(--on-dark-2); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.sk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.sk-facts { margin: 0; }
.sk-facts div { padding: 14px 0; border-top: 1px solid var(--rule-dark); }
.sk-facts div:last-child { border-bottom: 1px solid var(--rule-dark); }
.sk-facts dt { color: var(--on-dark-2); font-size: 15px; }
.sk-facts dd { margin: 4px 0 0; color: #fff; font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1.15; }
.sk-facts .wk-mark { font-weight: 700; }

/* Kiedy to się opłaca */
.sk-fit { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--ink); border-radius: var(--r); }
.sk-fit > div { padding: 32px 32px 28px; }
.sk-fit-yes { background: #FFFBE0; }
.sk-fit-no { border-left: 1.5px solid var(--ink); }
.sk-fit h3 { margin: 0 0 14px; font-size: 30px; line-height: 1.05; }
.sk-fit ul { list-style: none; margin: 0; padding: 0; font-size: 18px; }
.sk-fit li { position: relative; padding: 10px 0 10px 30px; border-top: 1px solid var(--rule); }
.sk-fit-yes li::before { content: '✓'; position: absolute; left: 2px; top: 10px; color: var(--spruce-2); font-weight: 800; }
.sk-fit-no li::before { content: '–'; position: absolute; left: 4px; top: 10px; color: var(--muted); font-weight: 800; }

/* Pakiety */
.sk-pkgs .wk-pkg h3 { font-size: 44px; }
.sk-pkg-desc { margin: 8px 0 0; font-size: 16px; min-height: 3em; }
.sk-pkg-prices { margin: 18px 0 0; }
.sk-pkg-prices div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 0; border-top: 1.5px solid var(--ink); }
.sk-pkg-prices dt { font-weight: 700; color: var(--ink); }
.sk-pkg-prices dd { margin: 0; font-family: var(--display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.sk-pkg-prices small { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.sk-pkg-hours { margin: 6px 0 16px; padding: 10px 12px; background: var(--sage); border-radius: var(--r); font-size: 15px; font-weight: 600; color: var(--ink); }
.wk-pkg.is-rec .sk-pkg-hours { background: var(--white); }
.sk-note { margin: 18px 0 0; max-width: 92ch; color: var(--muted); font-size: 15px; }
.sk-matrix { margin-top: 64px; }
.sk-sub { margin: 0 0 18px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.02em; }
.sk-table-pk { min-width: 520px; }
.sk-table-pk td { width: 18%; }
.sk-table-pk tbody th { width: 46%; font-weight: 500; color: var(--text); }
.sk-table-pk .sk-group th { padding-top: 22px; padding-bottom: 8px; background: var(--white); color: var(--ink); font-family: var(--display); font-size: 21px; font-weight: 700; border-bottom: 1.5px solid var(--ink); }
.sk-table-pk thead th { font-size: 24px; }

/* Porównanie z platformami */
.sk-table-cmp { min-width: 900px; }
.sk-table-cmp thead th { width: 26%; }
.sk-table-cmp thead th:first-child { width: 22%; }
.sk-table-cmp td.is-us { color: var(--ink); font-weight: 500; }

/* Kroki */
.sk-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.sk-steps li { counter-increment: step; padding-top: 18px; border-top: 1.5px solid var(--on-dark); }
.sk-steps li::before { content: counter(step); display: block; margin-bottom: 12px; color: var(--marker); font-family: var(--display); font-size: 60px; font-weight: 700; line-height: .9; }
.sk-steps h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.1; }
.sk-steps p { margin: 0; color: var(--on-dark-2); font-size: 16px; }

/* Funkcje */
.sk-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.sk-feat { padding-top: 16px; border-top: 1.5px solid var(--ink); }
.sk-feat h3 { margin: 0 0 10px; font-size: 26px; line-height: 1.1; }
.sk-feat ul { list-style: none; margin: 0; padding: 0; }
.sk-feat li { padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.45; }
.sk-missing { margin: 40px 0 0; max-width: 80ch; padding: 16px 20px; border-left: 4px solid var(--ink); background: var(--white); font-size: 17px; }
.sk-missing strong { color: var(--ink); }

/* Referencja */
.sk-ref { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 56px; align-items: center; }
.sk-ref-shot { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); border: 1.5px solid var(--ink); background: var(--spruce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9.5 13.5 14.6 27 20 17.4 25.4 27l5.1-13.5' fill='none' stroke='%23FFE14D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64px no-repeat; }
.sk-ref-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sk-ref-kind { margin: 0 0 4px; color: var(--muted); font-weight: 600; font-size: 15px; }
.sk-ref-title { margin: 0 0 14px; font-size: clamp(42px, 4.8vw, 68px); line-height: 1; letter-spacing: -.02em; }
.sk-ref-title a { color: var(--ink); text-decoration: none; }
.sk-ref-title a:hover { text-decoration: underline; text-decoration-color: var(--marker-2); text-decoration-thickness: 5px; text-underline-offset: 6px; }
.sk-ref p { margin: 0 0 14px; max-width: 52ch; font-size: 18px; }
.sk-ref-list { list-style: none; margin: 0; padding: 0; }
.sk-ref-list li { position: relative; padding: 7px 0 7px 26px; border-top: 1px solid var(--rule); }
.sk-ref-list li::before { content: '✓'; position: absolute; left: 0; top: 7px; color: var(--spruce-2); font-weight: 800; }

/* Pytania */
.sk-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 56px; align-items: start; }

/* Demo */
.sk-demo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px 64px; align-items: start; }
.sk-demo-lede { margin: 24px 0 0; max-width: 46ch; color: var(--on-dark-2); font-size: 19px; }
.sk-demo-contact { margin: 32px 0 0; display: grid; gap: 16px; }
.sk-demo-contact dt { color: var(--on-dark-2); font-size: 15px; }
.sk-demo-contact dd { margin: 2px 0 0; }
.sk-demo-contact a { color: #fff; font-family: var(--display); font-size: clamp(28px, 3vw, 40px); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.sk-demo-contact a:hover { color: var(--marker); }
.sk-form { padding: 28px; background: var(--spruce-2); border-radius: var(--r); }

@media (max-width: 1080px) {
  .sk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .sk-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sk-hero-in, .sk-ref, .sk-faq, .sk-demo { grid-template-columns: 1fr; }
  .sk-fit { grid-template-columns: 1fr; }
  .sk-fit-no { border-left: 0; border-top: 1.5px solid var(--ink); }
  .sk-pkg-desc { min-height: 0; }
}
@media (max-width: 640px) {
  .sk-hero { padding-bottom: 56px; }
  .sk-hero-in { margin-top: 24px; }
  .sk-actions .wk-btn { flex: 1 1 100%; }
  .sk-fit > div { padding: 24px 18px 20px; }
  .sk-fit h3 { font-size: 26px; }
  .sk-fit ul { font-size: 17px; }
  .sk-steps, .sk-feats { grid-template-columns: 1fr; }
  .sk-form { padding: 20px 16px; }
  .sk-table-pk th, .sk-table-pk td { padding: 12px 10px; font-size: 15px; }
  .sk-table-pk thead th { font-size: 19px; }
}