/* =========================================================================
   PEPTAGEN LAB — Base: reset, typografia, layout, dostępność
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-400);
	font-weight: var(--fw-body);
	line-height: var(--lh-normal);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}
h1 { font-size: var(--fs-800); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }

p { margin: 0 0 var(--space-4); color: var(--color-text-soft); }
p.lead { font-size: var(--fs-500); color: var(--color-text-soft); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.2rem; }

strong { font-weight: var(--fw-semibold); color: var(--color-text); }

.eyebrow {
	font-family: var(--font-display);
	font-size: var(--fs-300);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--pep-gold-700);
	margin-bottom: var(--space-3);
	display: inline-block;
}

/* --- Layout ----------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-10); }

/* Sekcja mieszcząca sam zaokrąglony baner (ciemny hero, wstęga zaufania,
   karty wartości, CTA). Oddech MUSI być symetryczny — wcześniej szablony
   ustawiały tu inline „padding-block: 0 …", przez co ciemne bloki
   przyklejały się do sekcji nad nimi. */
.band { padding-block: var(--space-10); }
/* Sąsiedztwo: odstęp daje element poprzedni, nie dublujemy go.
   Sekcje Z TŁEM są wyjątkiem — ich padding jest WEWNĄTRZ kolorowego bloku,
   więc nie tworzy odstępu na zewnątrz i baner przykleiłby się do krawędzi. */
.section:not(.section--alt):not(.section--invert) + .band,
.band + .band { padding-top: 0; }
/* Symetrycznie w drugą stronę: odstęp pod banerem daje sam baner.
   Nie dotyczy sekcji z tłem: tam padding to wewnętrzny oddech bloku,
   a nie odstęp na zewnątrz. Efekt: każda granica sekcji to te same 72 px. */
.band + .section:not(.section--alt):not(.section--invert) { padding-top: 0; }
/* Pierwszy baner na stronie siedzi bliżej nagłówka witryny. */
.band--first { padding-top: var(--space-5); }

.section--alt { background: var(--color-bg-alt); }
.section--invert { background: var(--color-bg-invert); color: var(--color-text-invert); }
.section--invert h1, .section--invert h2, .section--invert h3, .section--invert h4 { color: var(--color-text-invert); }
.section--invert p { color: var(--pep-stone-200); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Delikatna linia rozdzielająca dwie sekcje BEZ tła (zamiast cieni).
   Sekcja z tłem ma już własną krawędź — kreska tuż pod nią to artefakt. */
.section:not(.section--alt):not(.section--invert) + .section:not(.section--alt):not(.section--invert) {
	border-top: 1px solid var(--color-line);
}

/* --- Dostępność ------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--pep-black-900); color: #fff;
	padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}