/* ==================================================
   WESOŁY CZAS — wspólny system stron głównych

   Ten plik NIE jest dla katalogów typu:
   lewy sidebar | środek | prawa kolumna.

   Ten plik jest dla stron głównych / landingowych / informacyjnych:
   - strona główna,
   - Wesoła Strefa,
   - O nas,
   - Kontakt,
   - Inspiracje,
   - regulaminy i inne zwykłe strony.

   Katalogi zostają w assets/css/dzialy/.
================================================== */

/* Główny wrapper strony landingowej. */
.wcmw-page-main,
.wcmw-home-main {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
}

/* Wewnętrzny wrapper treści strony. */
.wcmw-page,
.wcmw-home {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wcmw-page-max-width, 1400px);
	margin-inline: auto;
}

/* Sekcja wspólna dla stron landingowych. */
.wcmw-page-section,
.wcmw-home-main .wcmw-section {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
}

/* Kontener do użycia na przyszłych stronach: Wesoła Strefa, O nas, Kontakt itd. */
.wcmw-page-container {
	box-sizing: border-box;
	width: min(100%, var(--wcmw-page-max-width, 1400px));
	margin-inline: auto;
}

/* Węższy kontener tekstowy dla stron informacyjnych. */
.wcmw-page-container--text {
	width: min(100%, 920px);
}

/* Średni kontener, np. dla sekcji z kartami bez sidebarów. */
.wcmw-page-container--medium {
	width: min(100%, 1180px);
}

/* Szeroki kontener, np. dla hero albo dużych landingów. */
.wcmw-page-container--wide {
	width: min(100%, 1400px);
}

/* Prosta siatka dla stron głównych / landingów, nie dla katalogów. */
.wcmw-page-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.wcmw-page-grid > * {
	min-width: 0;
}

.wcmw-page-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wcmw-page-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wcmw-page-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Bezpieczne centrowanie na tabletach.
   To rozwiązuje problem „przytulenia” do lewej krawędzi na okolicach 912 px
   bez robienia osobnej łatki dla każdej przyszłej strony. */
@media (max-width: 980px) {
	.wcmw-page-main,
	.wcmw-home-main {
		padding-inline: clamp(16px, 4vw, 28px);
	}

	.wcmw-page,
	.wcmw-home {
		max-width: 920px;
	}

	.wcmw-page-section,
	.wcmw-home-main .wcmw-section {
		padding-left: 0;
		padding-right: 0;
	}

	.wcmw-page-container,
	.wcmw-page-container--wide,
	.wcmw-page-container--medium,
	.wcmw-page-container--text {
		width: 100%;
		max-width: 100%;
	}

	.wcmw-page-grid--4,
	.wcmw-page-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.wcmw-page,
	.wcmw-home {
		max-width: 620px;
	}

	.wcmw-page-grid,
	.wcmw-page-grid--2,
	.wcmw-page-grid--3,
	.wcmw-page-grid--4 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 430px) {
	.wcmw-page-main,
	.wcmw-home-main {
		padding-inline: 14px;
	}
}