/* ==================================================
   Piosenki — katalog i archiwum
   Plik: assets/css/piosenki/archive.css
================================================== */


/* ==================================================
   Układ i tytuł
================================================== */

.piosenki-archive {
	align-items: start;
}

.piosenki-content,
.piosenki-query {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.piosenki-title {
	margin-top: 0;
}

.piosenki-katalog-grid {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}


/* ==================================================
   Karty piosenek — kolory hover
================================================== */

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

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

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

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


/* ==================================================
   Miniatury piosenek
   Cel: obrazek piosenki ma być wizualnie mniejszy,
   bliżej proporcji z Edukacji.
================================================== */

.dzial-piosenki .piosenka-card-image a,
.dzial-piosenki .promo-piosenka-card .piosenka-card-image a {
	inset: 12px;
	width: auto;
	height: auto;
}

.dzial-piosenki .piosenka-card-image img,
.dzial-piosenki .promo-piosenka-card .piosenka-card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* ==================================================
   Obrazek i przycisk odtwarzania
================================================== */

.piosenka-card-image,
.promo-piosenka-image {
	position: relative;
}

.piosenka-image-play-button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 5;

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

	width: 36px;
	height: 36px;

	padding: 0;
	margin: 0;

	border: 1px solid rgba(255, 255, 255, 0.86);
	border-radius: 999px;

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

	box-shadow: 0 8px 18px rgba(58, 45, 84, 0.16);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	font-size: 14px;
	line-height: 1;

	cursor: pointer;

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

.piosenka-image-play-button:hover {
	transform: translateY(-2px) scale(1.04);
	background: var(--wcmw-active-gradient-warm);
	box-shadow: var(--wcmw-shadow-hover);
	color: var(--wcmw-text);
}

.piosenka-image-play-button:focus:not(:focus-visible) {
	outline: none;
}

.piosenka-image-play-button:focus-visible {
	outline: 2px solid rgba(255, 194, 213, 0.85);
	outline-offset: 2px;
}

.piosenka-image-play-button.is-playing,
.piosenka-image-play-button.is-playing:hover {
	background: var(--wcmw-active-gradient-warm);
	color: var(--wcmw-text);
	box-shadow: var(--wcmw-shadow-hover);
}

.piosenka-image-play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	font-size: 0.82rem;
	font-weight: 900;
	line-height: 1;
	transform: translateX(1px);
}

.piosenka-image-play-button.is-playing .piosenka-image-play-icon {
	font-size: 0.78rem;
	letter-spacing: -0.08em;
	transform: none;
}

/* ==================================================
   Meta typ/kategoria na karcie
================================================== */

.piosenka-card-type {
	margin-top: 9px;
}


/* ==================================================
   Sidebar piosenek — dodatki
================================================== */

.piosenki-sidebar .sidebar-list .is-active > a,
.piosenki-sidebar .sidebar-list .current-cat > a,
.piosenki-sidebar .piosenki-sidebar-list .is-active > a,
.piosenki-sidebar .piosenki-sidebar-list .current-cat > a {
	background: var(--wcmw-active-gradient-warm);
	font-weight: 900;
}

.sidebar-random-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 34px;

	padding: 8px 16px;

	border-radius: 999px;

	background: var(--wcmw-text);
	color: #ffffff;

	font-size: 0.86rem;
	font-weight: 850;
	text-decoration: none;
}

.sidebar-random-button:hover,
.sidebar-random-button:focus {
	background: var(--wcmw-accent);
	color: #ffffff;
	text-decoration: none;
}


/* ==================================================
   Prawa kolumna Polecane
================================================== */

.piosenki-ads .promo-title {
	margin-top: 0;
}

.piosenki-ads .promo-piosenka-card,
.piosenki-ads .piosenka-card,
.piosenki-ads .wcmw-promo-card {
	position: relative;
}


/* ==================================================
   Responsywność
================================================== */

@media (max-width: 620px) {
	.dzial-piosenki .piosenka-card-image a,
	.dzial-piosenki .promo-piosenka-card .piosenka-card-image a {
		inset: 10px;
	}

	.piosenka-image-play-button {
		right: 10px;
		bottom: 10px;
		width: 38px;
		height: 38px;
	}
}

@media (max-width: 430px) {
	.dzial-piosenki .piosenka-card-image a,
	.dzial-piosenki .promo-piosenka-card .piosenka-card-image a {
		inset: 8px;
	}

	.piosenka-image-play-button {
		width: 36px;
		height: 36px;
	}
}