/**
 * Episode archives Rikosarkisto and Julma historia (archive-podcasts.php). Loaded only there, after css/runko.css
 * and css/perus.css. Title, introduction with the subscription block, and the episode list in the page width
 * (--pa-width-wide). The search, groups and cards have their own stylesheet in mu-plugins/pa-episode-groups.php.
 */

.pa-arkisto {
	padding-bottom: 96px;
}
.pa-arkisto__alku,
.pa-arkisto__lista {
	max-width: calc(var(--pa-width-wide) + 2 * var(--pa-gutter));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pa-gutter);
	padding-right: var(--pa-gutter);
}

/* Title and introduction */
.pa-arkisto__alku {
	padding-top: 56px;
	padding-bottom: 44px;
}
.pa-arkisto .pa-arkisto__otsikko {
	margin: 0;
	font-family: var(--pa-font-display);
	font-size: clamp(40px, 5vw, 56px);
	font-weight: var(--pa-weight-display);
	line-height: 1;
	letter-spacing: .01em;
	color: #fff;
}
.pa-arkisto__ingressi {
	max-width: 62ch;
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--pa-color-ink);
}

/* Subscription block under the introduction: a quiet full-width panel with the sentence and the next release on the
   left, the Spotify button (outlined like "Kuuntele" on the cards) on the right, below each other on phones */
.pa-arkisto__tilaus {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	margin-top: 24px;
	padding: 12px 12px 12px 18px;
	border: 1px solid var(--pa-color-line);
	border-radius: var(--pa-shape-radius);
	background: var(--pa-color-surface);
}
.pa-arkisto__tilaus p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pa-color-text);
}
.pa-arkisto__tilaus strong {
	font-weight: 700;
	color: var(--pa-color-ink);
}
.pa-arkisto__seuraava {
	color: var(--pa-color-muted);
}
.pa-arkisto__tilaa {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 14px 0 9px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--pa-color-ink);
	transition: background .15s, border-color .15s, color .15s;
}
.pa-arkisto__tilaa:hover {
	border-color: var(--pa-color-spotify);
	background: var(--pa-color-spotify);
	color: #000;
}
.pa-arkisto__tilaa svg {
	flex: none;
}
/* The Spotify logo turns black with green stripes on the green hover background */
.pa-arkisto__tilaa circle {
	transition: fill .15s;
}
.pa-arkisto__tilaa g {
	transition: stroke .15s;
}
.pa-arkisto__tilaa:hover circle {
	fill: #000;
}
.pa-arkisto__tilaa:hover g {
	stroke: var(--pa-color-spotify);
}
.pa-arkisto__tilaa:focus-visible {
	outline: 2px solid var(--pa-color-accent);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.pa-arkisto__alku {
		padding-top: 40px;
		padding-bottom: 32px;
	}
	.pa-arkisto__tilaus {
		padding: 14px 16px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pa-arkisto__tilaa,
	.pa-arkisto__tilaa circle,
	.pa-arkisto__tilaa g {
		transition: none;
	}
}