/* === extra components — wersja 1:1 ze zrzutem ekranu (v1.5) === */

:root {
  --paper: #FCEEDF;          /* jasny, miękki brzoskwiniowy — bez agresywnego nasycenia */
  --paper-2: #FAE6D2;
  --surface: #FFFFFF;
  --surface-soft: #FBEFE2;
  --ink: #1B1830;            /* granatowo-fioletowy */
  --ink-2: #2B2742;
  --ink-mute: #7A6F88;
  --ink-line: #EBD8C6;
  --coral: #F4A899;
  --coral-soft: #FBCFC4;
  --coral-tint: #FFE0D5;
  --coral-wash: #FFEFE6;
  --coral-deep: #5B4FFF;     /* akcent CTA (fioletowy) */
  --coral-deep-hover: #3D34D6;
  --violet: #5B4FFF;
  --violet-soft: #C9B5F3;
  --pink: #F2A7B6;
  --pink-soft: #F8CCD4;
  --blue: #92C0C2;
  --blue-soft: #A8DADC;
  --blue-tint: #CFE7E8;
  --blue-wash: #E9F4F4;
  --mint: #BFDDB4;
  --mint-soft: #D4E8CB;
  --mint-deep: #6B9B6E;
  --lemon: #F8E2BC;
  --lavender: #E1D0F2;
  --lavender-soft: #EDE0F7;
  --peach: #FCD5CE;
}

/* Tło: jasny brzoskwiniowy paper + delikatne pastelowe plamy w rogach */
body {
  background: var(--paper);
  background: var(--paper);
  background-image:
    radial-gradient( circle at -5% 10%,  rgba(225,208,242,0.32), transparent 30% ),
    radial-gradient( circle at 105% 6%,  rgba(225,208,242,0.23), transparent 28% ),
    radial-gradient( circle at 100% 55%, rgba(168,218,220,0.20), transparent 30% ),
    radial-gradient( circle at 0% 70%,   rgba(248,226,188,0.18), transparent 26% );
  background-attachment: fixed;
}

/* Pasek ogłoszeniowy: pełna szerokość ciemnego granatu */
.pk-announce { background: #16132A; color: #fff; }
.pk-announce-row { padding: 10px 0; font-size: 13px; }

/* Logo: PNG z designu, blendowany z papierowym tłem */
.pk-logo-img { padding: 0; }
.pk-logo-img img { height: 40px; width: auto; display: block; }

/* (rezerwowy fallback do wersji tekstowej, jeśli kiedyś wróci) */
.pk-logo { font-family: var(--display); font-size: 22px; font-weight: 400; color: var(--ink); display: inline-flex; align-items: center; gap: 12px; letter-spacing: -0.005em; }
.pk-logo-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: #E8DEFB; color: var(--ink);
  display: inline-flex; align-items: baseline; justify-content: center;
  font-family: var(--display); font-weight: 500; font-size: 19px;
  line-height: 1; padding-top: 4px; gap: 0;
  letter-spacing: -0.02em;
}
.pk-logo-mark small, .pk-logo-mark .pk-dot { display: none; }
.pk-logo-mark > span { font-weight: 500; font-size: 19px; opacity: 1; padding: 0; }
.pk-logo-word { font-style: normal; }
.pk-logo-word em { font-style: italic; padding: 0 4px; opacity: 1; font-weight: 400; color: var(--ink); }
  display: inline-flex; align-items: baseline; justify-content: center;
  font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: -0.02em;
  line-height: 1; padding-top: 4px; gap: 1px;
}
.pk-logo-mark .pk-dot { width: 3px; height: 3px; border-radius: 999px; background: #fff; opacity: 0.85; align-self: center; margin: 0 1px; transform: translateY(2px); }
.pk-logo-mark small { font-weight: 300; opacity: 0.85; padding: 0; font-size: 14px; }
.pk-logo-word { font-style: normal; }
.pk-logo-word em { font-style: italic; padding: 0 4px; opacity: 0.6; font-weight: 300; }

/* Chips bar */
.pk-chips-row { background: transparent; border: 0; }
.pk-chips { display: flex; gap: 8px; padding: 12px 0 20px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.pk-chips::-webkit-scrollbar { display: none; }
.pk-chip { flex-shrink: 0; padding: 9px 16px 9px 14px; background: rgba(255,255,255,0.55); border: 1px solid rgba(27,24,48,0.08); border-radius: 999px; font-size: 13px; color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(6px); transition: background 0.15s; }
.pk-chip:hover { background: #fff; color: var(--ink); }
.pk-chip.chip-dark { background: var(--ink); color: #fff; border-color: var(--ink); margin-left: auto; padding-right: 18px; }
.pk-chip.chip-dark::after { content: "→"; font-size: 14px; margin-left: 2px; }
.pk-chip.chip-dark:hover { background: var(--coral-deep); border-color: var(--coral-deep); color: #fff; }

/* Kolorowe kropki przed nazwą kategorii (dopasowane do kolorów ikon w sekcji „Czego szukasz”) */
.pk-chip:not(.chip-dark)::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot, var(--coral-deep)); flex-shrink: 0;
}
.pk-chips .pk-chip:nth-child(1) { --dot: #E07A6A; } /* Karty pracy        — czerwona */
.pk-chips .pk-chip:nth-child(2) { --dot: #7C6CE0; } /* Pakiety tematyczne — fioletowa */
.pk-chips .pk-chip:nth-child(3) { --dot: #E59FB6; } /* Plany lekcji       — różowa */
.pk-chips .pk-chip:nth-child(4) { --dot: #4F9A6E; } /* Materiały logo     — zielona */
.pk-chips .pk-chip:nth-child(5) { --dot: #C9A24A; } /* Eksperymenty       — musztardowa */
.pk-chips .pk-chip:nth-child(6) { --dot: #B8A6E8; } /* Dyplomy            — lawendowa */
.pk-chips .pk-chip:nth-child(7) { --dot: #5BB8B0; } /* Plakaty            — turkusowa */

/* HERO — flashcardy: kolorowa rama + biała karta z liniami zeszytu + podpis POD kartą */
.pk-hero-art { position: relative; min-height: 560px; max-width: 620px; margin-left: auto; }
.pk-hero-art .pk-flash {
  position: absolute; width: 38%;
  margin: 0; display: flex; flex-direction: column; gap: 10px;
}
.pk-flash-card {
  width: 100%; aspect-ratio: 3/4;
  background: #FBF6EE;
  border: 14px solid var(--card-bg, #F2B5A0);
  border-radius: 14px;
  box-shadow: 0 30px 60px -22px rgba(27,24,48,0.25);
  position: relative; overflow: hidden;
}
.pk-flash-inner {
  position: absolute; inset: 0;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  background-image: repeating-linear-gradient(to bottom, transparent 0 26px, rgba(27,24,48,0.12) 26px 27px);
  background-position: 0 70px;
}
.pk-flash-glyph {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: clamp(68px, 6vw, 96px); line-height: 1;
  align-self: center; margin: auto 0; letter-spacing: -0.02em;
}
.pk-flash-meta {
  font-size: 10px; color: var(--ink); opacity: 0.5;
  letter-spacing: 0.16em; text-transform: uppercase; align-self: flex-end; font-weight: 600;
}
.pk-flash figcaption {
  font-family: var(--display); font-style: italic; font-size: 18px;
  color: var(--ink); padding-left: 4px; letter-spacing: -0.005em;
}
.pk-flash figcaption small {
  font-style: normal; font-family: var(--body); font-size: 13px;
  color: var(--ink-mute); margin-left: 2px;
}

.pk-hero-art .pk-flash:nth-child(2) { left: 0;    top: 8%;    transform: rotate(-9deg); --card-bg: #C6DCD9; z-index: 1; }
.pk-hero-art .pk-flash:nth-child(3) { right: 0;   top: 4%;    transform: rotate(7deg);  --card-bg: #F2B5A0; z-index: 3; }
.pk-hero-art .pk-flash:nth-child(4) { left: 31%;  top: 14%;   transform: rotate(-2deg); --card-bg: #C8DFC3; z-index: 2; }
.pk-hero-art .pk-flash:nth-child(2) figcaption { transform: rotate(8deg);  transform-origin: 0 0; }
.pk-hero-art .pk-flash:nth-child(3) figcaption { transform: rotate(-6deg); transform-origin: 0 0; }
.pk-hero-art .pk-flash:nth-child(4) figcaption { transform: rotate(3deg);  transform-origin: 0 0; }

.pk-hero-sticker {
  position: absolute; top: 2%; right: 4%;
  background: #C8DFC3; color: var(--ink);
  font-family: var(--display); font-size: 16px; font-weight: 400;
  padding: 10px 22px; border-radius: 999px;
  transform: rotate(8deg); z-index: 5;
  box-shadow: 0 8px 18px -8px rgba(27,24,48,0.22);
  white-space: nowrap;
}
.pk-hero-sticker em { font-style: italic; }

/* Hero copy */
.pk-hero { padding-top: 24px; }
.pk-hero-grid { grid-template-columns: 1.25fr 1fr !important; gap: 48px !important; }
.pk-hero h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.025em; margin: 16px 0 24px; max-width: 12ch; text-wrap: balance; }
.pk-hero-metrics { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; align-items: start; }
.pk-hero h1 em {
  display: inline-block; font-style: italic; font-family: var(--display); color: var(--ink); font-weight: 400;
  padding-bottom: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'><path d='M2 8 C 40 1, 80 13, 120 7 S 200 1, 238 8' fill='none' stroke='%23C9B5F3' stroke-width='6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.42em;
}
.pk-hero-lead { font-size: 17px; line-height: 1.6; color: var(--ink); opacity: 0.75; max-width: 500px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--coral-deep); color: #fff; }
.btn-ghost { background: rgba(255,255,255,0.6); border-color: rgba(27,24,48,0.12); }
.btn-ghost:hover { background: #fff; }

/* Karty produktów */
.pk-product { border-color: rgba(31,27,45,0.08); }
.pk-product-cover { padding: 24px; position: relative; aspect-ratio: 4/5; overflow: hidden; }
.pk-product-cover::before {
  content: ""; position: absolute; inset: 14px; border-radius: 14px;
  background: var(--card-inner, #fff);
  z-index: 0;
}
.pk-product-cover > * { position: relative; z-index: 1; }
.pk-product-cover.c-coral    { background: #F4A899; --card-inner: #FBCFC4; }
.pk-product-cover.c-blue     { background: #A8DADC; --card-inner: #CFE7E8; }
.pk-product-cover.c-mint     { background: #BFDDB4; --card-inner: #D8E9CC; }
.pk-product-cover.c-lemon    { background: #F8E2BC; --card-inner: #FCEFD4; }
.pk-product-cover.c-lavender { background: #E1D0F2; --card-inner: #EDE0F7; }
.pk-product-cover.c-pink     { background: #F2A7B6; --card-inner: #F8CCD4; }

.pk-flash-glyph { font-family: var(--display); font-size: 64px; color: var(--ink); align-self: center; margin: auto; line-height: 1; font-weight: 400; }
.pk-flash-tag { position: absolute; bottom: 22px; left: 32px; right: 32px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; z-index: 2; }
.pk-product-badge { background: var(--lavender) !important; color: #5B4FFF !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: 0.08em !important; padding: 5px 11px !important; }
.pk-product-badge.new, .pk-product-cover .pk-product-badge.is-new { background: #BFDDB4 !important; color: #2B5A2D !important; }
.pk-heart { position: absolute; top: 22px; right: 22px; width: 32px; height: 32px; border-radius: 999px; background: #fff; border: 0; cursor: pointer; font-size: 16px; color: var(--ink-mute); z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.pk-heart:hover { color: var(--coral-deep); }

.pk-rating-row { display: flex; align-items: center; gap: 8px; }
.pk-rating-row small { font-size: 12px; color: var(--ink-mute); }
.pk-product-foot { flex-direction: row; gap: 8px; }
.pk-product-foot .pk-product-price { font-size: 20px; }
.pk-product-foot .pk-product-price s { font-size: 13px; color: var(--ink-mute); margin-right: 4px; }
.pk-product .btn.btn-ghost.btn-sm { background: var(--surface-soft); border-color: transparent; font-size: 12px; padding: 8px 14px; }

.pk-link { color: var(--ink); font-weight: 600; font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pk-link:hover { color: var(--coral-deep); }
.pk-link-white { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.5); }
.pk-link-white:hover { color: #fff; }

/* PROMO BANNER — fioletowo-różowy gradient */
.pk-promo-banner {
  background: linear-gradient(105deg, #C9B5E8 0%, #DBBEEC 40%, #F5C0CC 100%);
  border-radius: 24px; padding: 56px; color: var(--ink);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
  position: relative; overflow: hidden;
}
.pk-promo-banner h3 { font-family: var(--display); font-size: clamp(28px, 3vw, 38px); margin: 8px 0 12px; color: var(--ink); }
.pk-promo-banner p { color: rgba(31,27,45,0.7); margin: 0 0 24px; max-width: 460px; }
.pk-promo-banner .pk-eyebrow { color: var(--ink) !important; opacity: 0.7; }
.pk-promo-cta { display: flex; align-items: center; gap: 20px; }
.btn-light { background: var(--ink); color: #fff; }
.btn-light:hover { background: var(--coral-deep); color: #fff; }
.pk-promo-art { display: flex; gap: 14px; justify-content: flex-end; }
.pk-promo-art .pk-flash.sm { position: relative; width: 140px; aspect-ratio: 3/4; padding: 14px; transform: rotate(-4deg); background: #fff; }
.pk-promo-art .pk-flash.sm:nth-child(2) { transform: rotate(5deg); margin-top: 24px; }
.pk-promo-art .pk-flash.sm strong { font-size: 38px; }
.pk-promo-art .c-coral { --card-bg: #F4B8AA; }
.pk-promo-art .c-lemon { --card-bg: #FFE3C2; }

/* SUBSCRIPTION CARD — granatowo-fioletowy */
.pk-sub-card { background: #1F1A3A; padding: 56px; border-radius: 24px; }
.pk-sub-card h2 em { font-style: italic; color: #C9B5E8; }
.pk-sub-tile { background: rgba(255,255,255,0.06); padding: 32px; border-radius: 16px; position: relative; border: 1px solid rgba(255,255,255,0.08); }
.pk-sub-toggle { display: inline-flex; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.pk-sub-toggle button { background: transparent; color: rgba(255,255,255,0.6); border: 0; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; }
.pk-sub-toggle button.on { background: #fff; color: var(--ink); }
.pk-sub-badge { display: inline-block; background: #C9B5E8; color: var(--ink); font-size: 11px; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; font-weight: 700; }
.pk-sub-tile .price { font-family: var(--display); font-size: 88px; line-height: 1; display: block; color: #fff; font-weight: 400; }
.pk-sub-tile .price small { font-size: 22px; opacity: 0.7; }
.pk-sub-cadence { display: block; opacity: 0.5; font-size: 13px; margin-top: 4px; }
.pk-sub-list { list-style: none; padding: 24px 0 16px; margin: 0; display: grid; gap: 10px; font-size: 14px; opacity: 0.85; }
.pk-sub-list li::before { content: none; }
.btn-coral { background: #5B4FFF; color: #fff; width: 100%; justify-content: center; padding: 16px; border-radius: 999px; font-weight: 600; }
.btn-coral:hover { background: #3D34D6; color: #fff; }
.pk-sub-pay { display: block; text-align: center; margin-top: 12px; opacity: 0.4; font-size: 11px; }

/* PAKIETY — 2x2 grid, lewy panel z akcentem, prawy z dużym symbolem */
.pk-pkg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pk-pkg-card { background: var(--surface); border: 1px solid rgba(27,24,48,0.06); border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 1.5fr 1fr; position: relative; }
.pk-pkg-card::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 999px; background: var(--pkg-accent, var(--mint-deep)); }
.pk-pkg-card.acc-coral { --pkg-accent: #5B4FFF; }
.pk-pkg-card.acc-pink  { --pkg-accent: #E96A82; }
.pk-pkg-card.acc-mint  { --pkg-accent: #6B9B6E; }
.pk-pkg-card.acc-lav   { --pkg-accent: #8A6FBF; }
.pk-pkg-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.pk-pkg-body h3 { font-family: var(--display); font-size: 22px; margin: 4px 0; line-height: 1.25; letter-spacing: -0.01em; }
.pk-pkg-foot { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.pk-pkg-price { font-family: var(--display); font-size: 32px; font-weight: 400; }
.pk-pkg-foot s { color: var(--ink-mute); font-size: 14px; }
.pk-pkg-body .btn { align-self: flex-start; }
.pk-pkg-art { display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 72px; color: var(--ink); aspect-ratio: 1.1/1; }
.pk-pkg-art.c-coral    { background: #F4A899; }
.pk-pkg-art.c-pink     { background: #F2A7B6; }
.pk-pkg-art.c-blue     { background: #A8DADC; }
.pk-pkg-art.c-mint     { background: #BFDDB4; }
.pk-pkg-art.c-lavender { background: #E1D0F2; }

/* RECENZJE */
.pk-testimonials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pk-test { background: var(--surface); border: 1px solid rgba(31,27,45,0.06); border-radius: 20px; padding: 28px; margin: 0; position: relative; }
.pk-quote { font-family: var(--display); font-size: 64px; line-height: 1; color: var(--coral-deep); position: absolute; top: 18px; left: 22px; font-style: italic; }
.pk-test blockquote { font-family: var(--display); font-size: 16px; line-height: 1.5; margin: 32px 0 24px; color: var(--ink); font-style: italic; }
.pk-test figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--ink-line); }
.pk-avatar { width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; }
.pk-test strong { font-size: 14px; display: block; }
.pk-test small { display: block; color: var(--ink-mute); font-size: 12px; }

/* BLOG — duże numery 01/02/03 */
.pk-blog-numbered { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pk-blog-num { background: var(--surface); border: 1px solid rgba(27,24,48,0.06); border-radius: 20px; overflow: hidden; }
.pk-blog-num-cover { aspect-ratio: 5/4; display: flex; align-items: flex-end; justify-content: flex-end; padding: 28px 32px; position: relative; }
.pk-blog-num-id { font-family: var(--display); font-size: 220px; line-height: 0.8; color: rgba(255,255,255,0.75); font-weight: 300; font-style: italic; letter-spacing: -0.04em; }
.pk-blog-num-body { padding: 22px 28px 26px; }
.pk-blog-num-body h3 { font-family: var(--display); font-size: 20px; margin: 6px 0 10px; line-height: 1.28; }
.pk-blog-num-body h3 a { color: var(--ink); }
.pk-blog-num-body p { color: var(--ink-mute); font-size: 14px; margin: 0 0 14px; line-height: 1.5; }

/* BLOG LISTA (page-blog.php) */
.pk-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pk-blog-card { background: var(--surface); border: 1px solid rgba(31,27,45,0.06); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.pk-blog-card-cover { aspect-ratio: 5/3; display: flex; align-items: center; justify-content: center; padding: 32px; }
.pk-blog-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.pk-blog-card-cover .pk-blog-num-id { font-size: 140px; }
.pk-blog-card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 8px; }
.pk-blog-card-body h2 { font-family: var(--display); font-size: 24px; margin: 6px 0 8px; line-height: 1.25; }
.pk-blog-card-body h2 a { color: var(--ink); }
.pk-blog-card-body p { color: var(--ink-mute); font-size: 14px; margin: 0 0 14px; }
.pk-blog-card-body .pk-link { align-self: flex-start; margin-top: auto; }

.pk-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 36px; }
.pk-pagination .page-numbers { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid rgba(31,27,45,0.08); color: var(--ink); font-weight: 600; font-size: 14px; }
.pk-pagination .page-numbers.current { background: var(--ink); color: #fff; }

/* category tiles — kolorowe kropki przy nazwach */
.pk-cat { background: var(--surface); border: 1px solid rgba(27,24,48,0.06); border-radius: 18px; }
.pk-cat-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; color: var(--ink); }
.pk-cat h3 { font-size: 15px; font-family: var(--body); font-weight: 600; display: flex; align-items: center; gap: 8px; line-height: 1.3; margin: 0 0 4px; }
.pk-cat-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; display: inline-block; }
.pk-cat-sub { color: var(--ink-mute); font-size: 12px; margin: 0; }

@media (max-width: 960px) {
    .pk-hero-art { min-height: 380px; }
    .pk-pkg-grid, .pk-testimonials, .pk-blog-numbered, .pk-blog-grid { grid-template-columns: 1fr; }
    .pk-promo-banner { grid-template-columns: 1fr; padding: 32px; }
    .pk-sub-card { padding: 32px; }
    .pk-sub-tile .price { font-size: 64px; }
    .pk-pkg-card { grid-template-columns: 1fr; }
    .pk-pkg-art { aspect-ratio: 16/9; }
}