/*
 * Presentation primitives shared by more than two pages.
 *
 * EXTRACTED IN SLICE 8, on measured evidence rather than on taste. Each page
 * stylesheet in this theme is a faithful transcription of one page in source
 * order, so a rule the design gives to several pages was transcribed several
 * times -- correctly, each time. This file is where that stops, and the bar for
 * moving something here is the one the page files wrote down: a THIRD user.
 *
 * Two sets qualified, both verified byte-identical before being moved:
 *
 *   .grid-4                3 users -- why-us.css, home.css, and /sl/cenik/,
 *                          which is what made it due
 *   .card-label            3 users -- why-us.css, results.css, home.css
 *   the closing CTA band   5 users -- about.css, why-us.css, results.css,
 *                          reference.css, home.css
 *
 * WHAT DID NOT QUALIFY
 *
 * `.process-card`, `.step` and `.section-dark` live in why-us.css only, and
 * `.image-card` and `.image-caption` in about.css only. The homepage is the
 * SECOND user of each. The comment in why-us.css predicted the homepage would
 * be the third user of the process cards; re-measuring found that results.css
 * and reference.css never carried copies of them, so the prediction was one
 * page early. They stay duplicated, and the threshold stands.
 *
 * `.cta-band .cta-actions .btn { margin: 0 }` stays in about.css. It exists
 * there and nowhere else, and one file is not a shared primitive.
 *
 * CASCADE POSITION IS PART OF THE CONTRACT. This file loads after the service
 * bundle and before each page's own stylesheet, which is where every one of
 * these rules already sat. Nothing in the five page files targets `.card-label`,
 * `.cta-*`, `.section` or `.page-hero` at equal specificity, so moving them out
 * changes no relative order -- measured, not assumed, by re-running all five
 * approved parity baselines afterwards.
 *
 * Rules are in the design source's own order, as everywhere else here --
 * `.grid-4` first, because the source declares the grid system before anything
 * that uses it.
 *
 * The 680px collapse keeps ONLY the `.grid-4` half of the source's
 * `.grid-2, .grid-3, .grid-4, .article-grid, .stats, .form-grid, .feature-list`
 * rule. service.css already collapses `.grid-3` and `.feature-list` for every
 * page that loads it -- measured at 600px, `.grid-3` computes to a single
 * column on the service pages, zakaj-mi, the homepage and the design source
 * alike -- so re-declaring those parts here would add nothing and would put a
 * second copy of somebody else's rule in a shared file.
 */

.grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1020px) {
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 680px) {
	.grid-4 {
		grid-template-columns: 1fr;
	}
}
.card-label {
	margin: 0 0 11px !important; color: var(--blue) !important; font-size: 10px !important; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
}
.cta-section {
	padding-top: 64px;
}
.cta-actions {
	display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
}
.cta-contact {
	color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .12em;
}
.cta-band .cta-actions {
	margin-top: 12px;
}
.cta-section {
	padding: 56px 0 72px;
}
@media (max-width: 1020px) {
	.cta-section {
		padding: 48px 0 54px;
	}
}
@media (max-width: 680px) {
	.cta-section {
		padding: 40px 0 46px;
	}
}