/* ==========================================================================
   Pokoloruj-to – odstępy między sekcjami (więcej „oddechu” na stronie)
   Ładowany jako ostatni, więc nadpisuje odstępy z pozostałych arkuszy.
   Całość sterowana trzema zmiennymi poniżej – zmieniasz je w jednym miejscu.
   Wartości same zmniejszają się na telefonie (clamp: minimum, skalowanie, maksimum).
   ========================================================================== */

:root {
	--pt-space-section: clamp(72px, 9vw, 128px); /* między dużymi sekcjami strony */
	--pt-space-block:   clamp(32px, 3.5vw, 48px); /* między blokami w obrębie sekcji */
	--pt-space-head:    clamp(24px, 2.5vw, 36px); /* pod nagłówkiem sekcji */
}

/* ---------- Strona główna: hero ---------- */
/* więcej miejsca nad i pod hero oraz między kolumnami */
.pt-hero {
	padding-top: clamp(40px, 6vw, 88px);
	padding-bottom: clamp(56px, 7vw, 104px);
	column-gap: clamp(40px, 6vw, 96px);
}
/* odstępy w kolumnie tekstu ustawione osobno dla każdego elementu */
.pt-hero__text { gap: 0; }
.pt-hero__kicker { margin-bottom: 20px; }
.pt-hero__lead { margin-top: 40px !important; } /* miejsce na żółte podkreślenie pod tytułem */
.pt-hero-search { margin-top: 44px; }
.pt-hero-search__label { margin-bottom: 14px !important; }
.pt-hero__popular { margin-top: 24px; row-gap: 12px; }

@media (max-width: 1100px) {
	.pt-hero { row-gap: 48px; }
}
@media (max-width: 700px) {
	.pt-hero { padding-top: 32px; padding-bottom: 56px; row-gap: 32px; }
	.pt-hero__kicker { margin-bottom: 14px; }
	.pt-hero__lead { margin-top: 28px !important; }
	.pt-hero-search { margin-top: 32px; }
	.pt-hero__popular { margin-top: 20px; }
}

/* ---------- Strona główna: pozostałe sekcje ---------- */
.pt-home { padding-bottom: var(--pt-space-block); }
.pt-section,
.pt-paths { margin-top: var(--pt-space-section); }
.pt-section__head { margin-bottom: var(--pt-space-head); }
.pt-az,
.pt-benefits,
.pt-library { margin-top: var(--pt-space-block); }

/* ---------- Strona kategorii ---------- */
.pt-cat { padding-bottom: var(--pt-space-block); }
.pt-chips { margin-top: 32px; }
.pt-toolbar { margin-top: var(--pt-space-block); }
.pt-login-note { margin-top: 32px; }
.pt-cat-grid { margin-top: var(--pt-space-block); }
.pt-pagination { margin-top: var(--pt-space-block); }
.pt-cat-about { margin-top: var(--pt-space-section); }
.pt-related-cats { margin-top: var(--pt-space-section); }
.pt-related-cats h2 { margin-bottom: var(--pt-space-head) !important; }

/* opis pod listą – wyraźne odstępy między częściami tekstu */
.pt-cat-about .opis-dolny h2:not(:first-child) { margin-top: 48px !important; }
.pt-cat-about .opis-dolny h3 { margin-top: 32px !important; }
.pt-cat-about .opis-dolny p { margin-bottom: 16px !important; }

/* opis w kolorowym bloku u góry */
.pt-cat-hero__desc p { margin-bottom: 14px; }
.pt-cat-hero__desc h3 { margin-top: 24px !important; }

/* ---------- Strona kolorowanki ---------- */
.pt-product__main { padding-bottom: var(--pt-space-section); }
.pt-product__content h2:not(:first-child) { margin-top: 48px !important; }
.pt-product__content h3 { margin-top: 32px !important; }
.pt-related { margin-top: var(--pt-space-section); }
.pt-related__head { margin-bottom: var(--pt-space-head); }

/* ---------- Blog ---------- */
.pt-blog-cats { margin-top: 32px; }
.pt-blog-featured { margin-top: var(--pt-space-block); }
.pt-blog-grid { margin-top: var(--pt-space-block); }
.pt-blog-grid--related { margin-top: var(--pt-space-head); }
.pt-blog-pagination { margin-top: var(--pt-space-block); }
.pt-blog-cta-wrap { margin-top: var(--pt-space-section); }
.pt-article__layout { margin-top: var(--pt-space-block); }
.pt-article__related { margin-top: var(--pt-space-section); }

/* ---------- Wspólne: baner twórcy i stopka ---------- */
.pt-creator:not(.pt-creator--side) { margin-top: var(--pt-space-section); }
.pt-footer { margin-top: calc(var(--pt-space-section) * .75); }