/* ============================================================
   LAYOUT — kontener, siatka, rytm sekcji, utils.
   ============================================================ */

.xelox-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.xelox-container--narrow { max-width: var(--container-narrow); }

/* Rytm sekcji */
.xelox-section { padding-block: var(--sp-9); }
.xelox-section--tight { padding-block: var(--sp-7); }
.xelox-section--alt { background: var(--c-bg-alt); }

/* Nagłówek sekcji */
.xelox-section-head { max-width: var(--container-narrow); margin-bottom: var(--sp-7); }
.xelox-section-head--center { margin-inline: auto; text-align: center; }
.xelox-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: var(--sp-3); }
.xelox-eyebrow::after { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--c-brand); flex: 0 0 auto; }
.xelox-section-head--center .xelox-eyebrow { justify-content: center; }
.xelox-section-head p { color: var(--c-muted); margin-top: var(--sp-3); }

/* Siatka */
.xelox-grid { display: grid; gap: var(--sp-5); }
.xelox-grid--2 { grid-template-columns: repeat(2, 1fr); }
.xelox-grid--3 { grid-template-columns: repeat(3, 1fr); }
.xelox-grid--4 { grid-template-columns: repeat(4, 1fr); }
.xelox-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Split (treść + sidebar) */
.xelox-split { display: grid; gap: var(--sp-7); }
.xelox-split--sidebar-left { grid-template-columns: 300px 1fr; } /* blog single: sidebar PO LEWEJ */

/* Header offset (fixed top bar + header) */
.xelox-main { min-height: 50vh; }
body { padding-top: calc(var(--header-h) + var(--topbar-h)); }
@media (max-width: 1024px) { body { padding-top: var(--header-h); } }

/* Utils */
.xelox-hidden { display: none !important; }
.xelox-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.xelox-stack > * + * { margin-top: var(--sp-4); }
.xelox-center { text-align: center; }
.xelox-flow-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── Responsywność (12 / 8 / 4 kolumny) ── */
@media (max-width: 1024px) {
	.xelox-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.xelox-split--sidebar-left { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	:root { --header-h: 64px; }
	.xelox-section { padding-block: var(--sp-7); }
	.xelox-grid--2, .xelox-grid--3, .xelox-grid--4 { grid-template-columns: 1fr; }
	.xelox-container { padding-inline: var(--sp-4); }
}