/* Układ: kontener, sekcje, rytm pionowy, siatki. Odstępy wyłącznie z tokenów. */

.gf-container {
	width: 100%;
	max-width: calc(var(--gf-content-width) + 2 * var(--gf-section-pad-x));
	margin-inline: auto;
	padding-inline: var(--gf-section-pad-x);
}
.gf-container--narrow { max-width: calc(760px + 2 * var(--gf-section-pad-x)); }
.gf-container--wide   { max-width: calc(1360px + 2 * var(--gf-section-pad-x)); }

/* Sekcja: gf-section + modyfikatory (rozmiar i tło) */
/* Widżety-sekcje (nie kontenery Elementora – te liczą odstęp ze zmiennych, patrz site.css). */
.gf-section:not(.e-con) { padding-block: var(--gf-section-pad-y); }
.gf-section--tight:not(.e-con)  { padding-block: calc(var(--gf-section-pad-y) * 0.6); }
.gf-section--none:not(.e-con)   { padding-block: 0; }
.gf-section--no-top:not(.e-con)    { padding-top: 0; }
.gf-section--no-bottom:not(.e-con) { padding-bottom: 0; }
.gf-section--alt  { background: var(--gf-color-surface); }
/* Dwie sąsiednie sekcje z tym samym tłem = jeden odstęp między nimi, nie dwa. */
.gf-section--alt:not(.gf-section--bleed) + .gf-section--alt:not(.e-con),
.gf-section--dark:not(.gf-section--bleed) + .gf-section--dark:not(.e-con),
.gf-section:not(.gf-section--alt, .gf-section--dark) + .gf-section:not(.gf-section--alt, .gf-section--dark, .e-con) { padding-top: 0; }
.gf-section--dark { background: var(--gf-color-dark); color: var(--gf-color-bg); }
.gf-section--dark :is(h1, h2, h3, h4, h5, h6, .gf-h1, .gf-h2, .gf-h3, .gf-h4, .gf-h5, .gf-h6, .gf-display, a) { color: inherit; }
.gf-section--dark a:hover { color: var(--gf-color-accent); }

/* Rytm pionowy: równe odstępy między dziećmi bez ręcznych marginesów */
.gf-stack > * { margin-block: 0; }
.gf-stack > * + * { margin-top: var(--gf-stack-gap, var(--gf-space-5)); }
.gf-stack--tight { --gf-stack-gap: var(--gf-space-3); }
.gf-stack--loose { --gf-stack-gap: var(--gf-space-7); }

/* Siatki: 1 kolumna na mobile, potem rośnie */
.gf-grid { display: grid; gap: var(--gf-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
	.gf-grid--2, .gf-grid--3, .gf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.gf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gf-grid--center { align-items: center; }

/* Rząd elementów zawijany (przyciski, tagi) */
.gf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gf-space-3); }
.gf-cluster--center { justify-content: center; }

.gf-text-center { text-align: center; }
.gf-bg-alt { background: var(--gf-color-surface); }