/**
 * Reset, typografia, siatka i komponenty bazowe (przyciski, eyebrow, karty).
 * Wszystko oparte o tokeny z tokens.css - bez wartości "z palca".
 */

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

body {
	margin: 0;
	background-color: var(--bg-base);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.625;
	-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	margin: 0 0 var(--space-md);
	color: var(--text-primary);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

ul, ol { margin: 0 0 var(--space-md); padding-left: 1.25em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 1100;
	padding: var(--space-sm) var(--space-md);
	background: var(--accent);
	color: var(--white);
	border-radius: var(--radius-sm);
	width: auto; height: auto; clip: auto;
}

/* --- Layout --- */

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; overflow: hidden; }
.section--tight { padding-block: clamp(2rem, 1rem + 4vw, 3.5rem); }

.section__head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__lead { font-size: var(--fs-body-lg); color: var(--text-secondary); }

.grid { display: grid; gap: var(--space-lg); }
/* Tablet: projekt obejmuje 390 i 1440 px, więc pośrednie szerokości ustawiamy
   sami. Trzy kolumny poniżej 1024 px dają karty ~227 px, w których łamią się
   dłuższe nazwy - dlatego tam są dwie. */
@media (min-width: 768px) {
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
	.grid { gap: var(--space-xl); }
}

/* --- Eyebrow (kreska + etykieta nad nagłówkiem) --- */

.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	font-size: var(--fs-overline);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--accent);
	flex: none;
}

.section__head--center .eyebrow { justify-content: center; }

/* --- Przyciski --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--space-md) var(--space-lg);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn--primary { background: var(--accent); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--text-on-accent); }

.btn--secondary {
	background: transparent;
	border-color: var(--border-strong);
	color: var(--text-primary);
}
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn--block { display: flex; width: 100%; }

/* --- Karty --- */

.card {
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}

.card__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: var(--space-md);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Lista z ptaszkami --- */

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.checklist li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.checklist li::before {
	content: "✓";
	color: var(--accent);
	font-weight: 700;
	line-height: 1.6;
	flex: none;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}