/* ==================================================
   WSPÓLNY SYSTEM KAFELKÓW DZIAŁÓW
   Globalnie:
   - środek ma wyglądać jak Polecane,
   - Polecane mają wyglądać jak środek,
   - jeden rytm kart dla działów,
   - pieczątka siedzi na miniaturze,
   - hover działa tak samo wszędzie.
================================================== */

.dzial-content,
.single-kolorowanka-content,
.single-piosenka-content,
.single-wierszyk-content,
.single-edukacja-content,
.wcmw-dzial-main {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.dzial-content > h1:first-child,
.dzial-content > h2:first-child,
.single-edukacja-content .single-edukacja-title {
	margin-top: 0;
	margin-bottom: 24px;
	color: var(--wcmw-text);
	font-size: 2rem;
	line-height: 1.15;
	font-weight: 700;
}


/* ==================================================
   Wspólne siatki materiałów
================================================== */

.dzial-content .wp-block-post-template,
.dzial-content .wp-block-query .wp-block-post-template,
.dzial-content .edukacja-grid,
.dzial-content .edukacja-materialy-grid,
.dzial-content .kolorowanki-grid,
.dzial-content .piosenki-katalog-grid,
.dzial-content .wierszyki-grid-custom,
.edukacja-grid,
.kolorowanki-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

.dzial-content .wp-block-post,
.dzial-content .wp-block-post-template > li,
.edukacja-grid > article,
.kolorowanki-grid > article {
	list-style: none;
	margin: 0;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}


/* ==================================================
   GLOBALNY WYGLĄD KARTY
   Jeden standard dla środka i Polecanych.
================================================== */

.kolorowanka-card,
.piosenka-card,
.piosenka-audio-card,
.wierszyk-card,
.edukacja-card,
.material-card,
.promo-kolorowanka-card,
.promo-piosenka-card,
.polecany-wierszyk-card,
.promo-edukacja-card,
.polecany-edukacja-card,
.wcmw-card,
.wcmw-promo-card {
	--wcmw-card-hover-bg: var(--wcmw-yellow-soft);
	--wcmw-promo-hover-bg: var(--wcmw-card-hover-bg);
	--wcmw-card-image-bg: rgba(250, 247, 240, 0.72);
	--wcmw-card-image-padding: 10px;

	display: flex;
	flex-direction: column;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin: 0;
	padding: 12px;

	background: var(--wcmw-card);
	border: 1px solid var(--wcmw-border-light);
	border-radius: 20px;
	box-shadow: var(--wcmw-shadow);

	box-sizing: border-box;
	overflow: hidden;
	text-align: center;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.kolorowanka-card:hover,
.piosenka-card:hover,
.piosenka-audio-card:hover,
.wierszyk-card:hover,
.edukacja-card:hover,
.material-card:hover,
.promo-kolorowanka-card:hover,
.promo-piosenka-card:hover,
.polecany-wierszyk-card:hover,
.promo-edukacja-card:hover,
.polecany-edukacja-card:hover,
.wcmw-card:hover,
.wcmw-promo-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wcmw-shadow-hover);
	background: var(--wcmw-promo-hover-bg);
}


/* ==================================================
   Multikolor hover — środek i Polecane
================================================== */

.edukacja-grid > article:nth-child(6n+1),
.kolorowanki-grid > article:nth-child(6n+1),
.wcmw-promo-list > article:nth-child(6n+1),
.promo-edukacja-lista > article:nth-child(6n+1),
.promo-kolorowanki-lista > article:nth-child(6n+1),
.promo-piosenki-lista > article:nth-child(6n+1),
.polecane-wierszyki-lista > article:nth-child(6n+1) {
	--wcmw-card-hover-bg: var(--wcmw-yellow-soft);
	--wcmw-promo-hover-bg: var(--wcmw-yellow-soft);
}

.edukacja-grid > article:nth-child(6n+2),
.kolorowanki-grid > article:nth-child(6n+2),
.wcmw-promo-list > article:nth-child(6n+2),
.promo-edukacja-lista > article:nth-child(6n+2),
.promo-kolorowanki-lista > article:nth-child(6n+2),
.promo-piosenki-lista > article:nth-child(6n+2),
.polecane-wierszyki-lista > article:nth-child(6n+2) {
	--wcmw-card-hover-bg: var(--wcmw-green-soft);
	--wcmw-promo-hover-bg: var(--wcmw-green-soft);
}

.edukacja-grid > article:nth-child(6n+3),
.kolorowanki-grid > article:nth-child(6n+3),
.wcmw-promo-list > article:nth-child(6n+3),
.promo-edukacja-lista > article:nth-child(6n+3),
.promo-kolorowanki-lista > article:nth-child(6n+3),
.promo-piosenki-lista > article:nth-child(6n+3),
.polecane-wierszyki-lista > article:nth-child(6n+3) {
	--wcmw-card-hover-bg: var(--wcmw-blue-soft);
	--wcmw-promo-hover-bg: var(--wcmw-blue-soft);
}

.edukacja-grid > article:nth-child(6n+4),
.kolorowanki-grid > article:nth-child(6n+4),
.wcmw-promo-list > article:nth-child(6n+4),
.promo-edukacja-lista > article:nth-child(6n+4),
.promo-kolorowanki-lista > article:nth-child(6n+4),
.promo-piosenki-lista > article:nth-child(6n+4),
.polecane-wierszyki-lista > article:nth-child(6n+4) {
	--wcmw-card-hover-bg: var(--wcmw-pink-soft);
	--wcmw-promo-hover-bg: var(--wcmw-pink-soft);
}


/* ==================================================
   GLOBALNA MINIATURA KARTY
   Kwadrat 1:1 + oddech wewnątrz ramki.
================================================== */

.kolorowanka-card-image,
.piosenka-card-image,
.wierszyk-card-image,
.edukacja-card-image,
.material-card-image,
.promo-kolorowanka-image,
.promo-piosenka-image,
.polecany-wierszyk-image,
.promo-edukacja-image,
.polecany-edukacja-image,
.wcmw-card-image {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	aspect-ratio: 1 / 1;

	margin: 0;
	padding: var(--wcmw-card-image-padding);

	overflow: hidden;
	border-radius: 16px;

	background: var(--wcmw-card-image-bg);
	line-height: 0;
	box-sizing: border-box;
}

.kolorowanka-card-image a,
.piosenka-card-image a,
.wierszyk-card-image a,
.edukacja-card-image a,
.material-card-image a,
.promo-kolorowanka-image a,
.promo-piosenka-image a,
.polecany-wierszyk-image a,
.promo-edukacja-image a,
.polecany-edukacja-image a,
.wcmw-card-image a {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	background: transparent;
	line-height: 0;
	text-decoration: none;
}

.kolorowanka-card-image img,
.piosenka-card-image img,
.wierszyk-card-image img,
.edukacja-card-image img,
.material-card-image img,
.promo-kolorowanka-image img,
.promo-piosenka-image img,
.polecany-wierszyk-image img,
.promo-edukacja-image img,
.polecany-edukacja-image img,
.wcmw-card-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: center;

	border-radius: 12px;
	background: transparent;
}


/* ==================================================
   Placeholder
================================================== */

.wcmw-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	border-radius: 16px;
	background:
		linear-gradient(
			135deg,
			rgba(223, 243, 220, 0.75),
			rgba(255, 242, 189, 0.75)
		);

	color: var(--wcmw-text);
	font-size: 44px;
	line-height: 1;
}


/* ==================================================
   PIECZĄTKA / TYP MATERIAŁU
   Pieczątka siedzi na miniaturze.
================================================== */

.edukacja-card-type,
.material-card-type,
.promo-edukacja-type,
.wcmw-card-type {
	position: relative;
	z-index: 3;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: fit-content;
	max-width: calc(100% - 28px);

	margin: -26px auto 0;
	padding: 5px 11px;

	border-radius: 999px;

	background: rgba(255, 255, 255, 0.88);
	color: var(--wcmw-text);

	box-shadow:
		0 7px 18px rgba(58, 45, 84, 0.10),
		inset 0 0 0 1px rgba(255, 255, 255, 0.82);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	font-size: 11.5px;
	line-height: 1.15;
	font-weight: 900;
	text-align: center;
	letter-spacing: -0.01em;

	pointer-events: none;
	box-sizing: border-box;
}


/* ==================================================
   GLOBALNY TYTUŁ KARTY
   Zasada rytmu kart:
   - kafelek zawsze rezerwuje miejsce na 2 linie tytułu,
   - krótki tytuł zostaje 1-liniowy i jest wyśrodkowany w tym polu,
   - długi tytuł pokazuje maksymalnie 2 linie i ucina nadmiar.
================================================== */

.kolorowanka-card-title,
.piosenka-card-title,
.wierszyk-card-title,
.tekst-card-title,
.edukacja-card-title,
.material-card-title,
.promo-kolorowanka-title,
.promo-piosenka-title,
.promo-tekst-title,
.polecany-wierszyk-title,
.promo-edukacja-title,
.polecany-edukacja-title,
.wcmw-card-title {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;

	min-height: 2.56em;
	max-height: 2.56em;
	margin: 11px 0 0;
	padding: 0 4px;

	overflow: hidden;
	color: var(--wcmw-text);

	font-size: 16px;
	line-height: 1.28;
	font-weight: 800;
	text-align: center;

	box-sizing: border-box;
}

.kolorowanka-card-title a,
.piosenka-card-title a,
.wierszyk-card-title a,
.tekst-card-title a,
.edukacja-card-title a,
.material-card-title a,
.promo-kolorowanka-title a,
.promo-piosenka-title a,
.promo-tekst-title a,
.polecany-wierszyk-title a,
.promo-edukacja-title a,
.polecany-edukacja-title a,
.wcmw-card-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	width: 100%;
	min-width: 0;
	max-height: 2.56em;

	overflow: hidden;
	color: inherit;
	text-decoration: none;
	text-overflow: ellipsis;
}


/* ==================================================
   Kiedy nie ma pieczątki, tytuł zostaje normalnie pod obrazkiem
================================================== */

.kolorowanka-card-image + .kolorowanka-card-title,
.piosenka-card-image + .piosenka-card-title,
.wierszyk-card-image + .wierszyk-card-title,
.tekst-card-image + .tekst-card-title,
.edukacja-card-image + .edukacja-card-title,
.material-card-image + .material-card-title,
.promo-kolorowanka-image + .promo-kolorowanka-title,
.promo-piosenka-image + .promo-piosenka-title,
.promo-tekst-image + .promo-tekst-title,
.polecany-wierszyk-image + .polecany-wierszyk-title,
.promo-edukacja-image + .promo-edukacja-title,
.wcmw-card-image + .wcmw-card-title {
	margin-top: 10px;
}


/* ==================================================
   GLOBALNY LOCK
   Pliki działowe ładują się po cards.css,
   więc tutaj spinamy wspólny wygląd środka i Polecanych.
   To nadal jest globalne ustawienie kafla.
================================================== */

.dzial-layout article.kolorowanka-card,
.dzial-layout article.piosenka-card,
.dzial-layout article.piosenka-audio-card,
.dzial-layout article.wierszyk-card,
.dzial-layout article.edukacja-card,
.dzial-layout article.material-card,
.dzial-layout article.promo-kolorowanka-card,
.dzial-layout article.promo-piosenka-card,
.dzial-layout article.polecany-wierszyk-card,
.dzial-layout article.promo-edukacja-card,
.dzial-layout article.polecany-edukacja-card,
.dzial-layout article.wcmw-card,
.dzial-layout article.wcmw-promo-card {
	display: flex !important;
	flex-direction: column !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 12px !important;

	background: var(--wcmw-card) !important;
	border: 1px solid var(--wcmw-border-light) !important;
	border-radius: 20px !important;
	box-shadow: var(--wcmw-shadow) !important;

	box-sizing: border-box !important;
	overflow: hidden !important;
	text-align: center !important;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease !important;
}

.dzial-layout article.kolorowanka-card:hover,
.dzial-layout article.piosenka-card:hover,
.dzial-layout article.piosenka-audio-card:hover,
.dzial-layout article.wierszyk-card:hover,
.dzial-layout article.edukacja-card:hover,
.dzial-layout article.material-card:hover,
.dzial-layout article.promo-kolorowanka-card:hover,
.dzial-layout article.promo-piosenka-card:hover,
.dzial-layout article.polecany-wierszyk-card:hover,
.dzial-layout article.promo-edukacja-card:hover,
.dzial-layout article.polecany-edukacja-card:hover,
.dzial-layout article.wcmw-card:hover,
.dzial-layout article.wcmw-promo-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--wcmw-shadow-hover) !important;
	background: var(--wcmw-promo-hover-bg) !important;
}

.dzial-layout .kolorowanka-card-image,
.dzial-layout .piosenka-card-image,
.dzial-layout .wierszyk-card-image,
.dzial-layout .edukacja-card-image,
.dzial-layout .material-card-image,
.dzial-layout .promo-kolorowanka-image,
.dzial-layout .promo-piosenka-image,
.dzial-layout .polecany-wierszyk-image,
.dzial-layout .promo-edukacja-image,
.dzial-layout .polecany-edukacja-image,
.dzial-layout .wcmw-card-image {
	padding: var(--wcmw-card-image-padding) !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 16px !important;
	background: var(--wcmw-card-image-bg) !important;
	box-sizing: border-box !important;
}

.dzial-layout .kolorowanka-card-image a,
.dzial-layout .piosenka-card-image a,
.dzial-layout .wierszyk-card-image a,
.dzial-layout .edukacja-card-image a,
.dzial-layout .material-card-image a,
.dzial-layout .promo-kolorowanka-image a,
.dzial-layout .promo-piosenka-image a,
.dzial-layout .polecany-wierszyk-image a,
.dzial-layout .promo-edukacja-image a,
.dzial-layout .polecany-edukacja-image a,
.dzial-layout .wcmw-card-image a {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
}

.dzial-layout .kolorowanka-card-image img,
.dzial-layout .piosenka-card-image img,
.dzial-layout .wierszyk-card-image img,
.dzial-layout .edukacja-card-image img,
.dzial-layout .material-card-image img,
.dzial-layout .promo-kolorowanka-image img,
.dzial-layout .promo-piosenka-image img,
.dzial-layout .polecany-wierszyk-image img,
.dzial-layout .promo-edukacja-image img,
.dzial-layout .polecany-edukacja-image img,
.dzial-layout .wcmw-card-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	border-radius: 12px !important;
	background: transparent !important;
}


/* ==================================================
   Mobile
================================================== */

@media (max-width: 620px) {
	.kolorowanka-card,
	.piosenka-card,
	.piosenka-audio-card,
	.wierszyk-card,
	.edukacja-card,
	.material-card,
	.promo-kolorowanka-card,
	.promo-piosenka-card,
	.polecany-wierszyk-card,
	.promo-edukacja-card,
	.polecany-edukacja-card,
	.wcmw-card,
	.wcmw-promo-card {
		--wcmw-card-image-padding: 8px;

		padding: 10px;
		border-radius: 18px;
	}

	.kolorowanka-card-image,
	.piosenka-card-image,
	.wierszyk-card-image,
	.edukacja-card-image,
	.material-card-image,
	.promo-kolorowanka-image,
	.promo-piosenka-image,
	.polecany-wierszyk-image,
	.promo-edukacja-image,
	.polecany-edukacja-image,
	.wcmw-card-image {
		border-radius: 14px;
	}

	.kolorowanka-card-image img,
	.piosenka-card-image img,
	.wierszyk-card-image img,
	.edukacja-card-image img,
	.material-card-image img,
	.promo-kolorowanka-image img,
	.promo-piosenka-image img,
	.polecany-wierszyk-image img,
	.promo-edukacja-image img,
	.polecany-edukacja-image img,
	.wcmw-card-image img {
		border-radius: 10px;
	}

	.edukacja-card-type,
	.material-card-type,
	.promo-edukacja-type,
	.wcmw-card-type {
		max-width: calc(100% - 20px);
		margin-top: -24px;
		padding: 4px 9px;
		font-size: 10.5px;
	}

	.kolorowanka-card-title,
	.piosenka-card-title,
	.wierszyk-card-title,
	.tekst-card-title,
	.edukacja-card-title,
	.material-card-title,
	.promo-kolorowanka-title,
	.promo-piosenka-title,
	.promo-tekst-title,
	.polecany-wierszyk-title,
	.promo-edukacja-title,
	.polecany-edukacja-title,
	.wcmw-card-title {
		min-height: 2.5em;
		max-height: 2.5em;
		margin-top: 10px;
		font-size: 15px;
		line-height: 1.25;
	}

	.kolorowanka-card-title a,
	.piosenka-card-title a,
	.wierszyk-card-title a,
	.tekst-card-title a,
	.edukacja-card-title a,
	.material-card-title a,
	.promo-kolorowanka-title a,
	.promo-piosenka-title a,
	.promo-tekst-title a,
	.polecany-wierszyk-title a,
	.promo-edukacja-title a,
	.polecany-edukacja-title a,
	.wcmw-card-title a {
		max-height: 2.5em;
	}
}