/* Series cards (spec, "Series cards"; values from home.html and mobile-home.html). */

/* Home: the current series wide on top, then the others three across. */
.pm-series--home .pm-series__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.pm-series__feature + .pm-series__cards {
	margin-top: 28px;
}

.pm-series-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
}

.pm-series-card:hover {
	color: var(--wp--preset--color--ink);
}

.pm-series-card__header {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 5;
	object-fit: cover;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.pm-series-card__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 8px 12px;
	padding: 16px 18px;
	line-height: normal;
}

.pm-series-card__name {
	display: block;
	/* Never wider than the card; when it and the domain don't fit side by
	   side, the domain wraps to its own line instead of squeezing the logo. */
	max-width: 100%;
}

/* Each logo's height is set per series (pm_logo_heights) so the four balance by eye. */
.pm-series-card__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--pm-logo-h);
	object-fit: contain;
	object-position: left center;
}

.pm-series-card__title {
	font-size: var(--wp--preset--font-size--cta);
	font-weight: 600;
}

.pm-series-card__tagline {
	display: block;
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-2);
}

.pm-series-card__domain {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	white-space: nowrap;
}

.pm-series-card__visit {
	display: none;
}

/* Hosted series: compact rows, deliberately smaller than the cards. */
.pm-series__rows {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.pm-series-row {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	line-height: normal;
}

.pm-series-row__cover {
	flex: 0 0 56px;
	width: 56px;
	height: 72px;
	object-fit: cover;
}

.pm-series-row__title {
	display: block;
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.pm-series-row__format {
	display: block;
	margin-top: 3px;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-2);
}

@media (max-width: 767px) {
	.pm-series--home .pm-series__cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Headers are three character panels, made for 16:5; taller would cut the outer ones. */
	.pm-series-card__header {
		aspect-ratio: 16 / 5;
	}

	.pm-series-card__foot {
		align-items: center;
		gap: 8px;
		padding: 12px 14px;
	}

	.pm-series-card__logo {
		height: var(--pm-logo-h-mobile);
	}

	/* Phones: logo and tagline, with a small "Read ↗" button on the right in place of the domain. */
	.pm-series-card__tagline {
		margin-top: 6px;
	}

	.pm-series-card__domain {
		display: none;
	}

	/* A smaller outline pill than the featured card's "Read at …", so the two don't compete. */
	.pm-series-card__visit {
		display: inline-flex;
		flex: none;
		/* Stays on the right, even when a narrow phone wraps it below the logo. */
		margin-left: auto;
		align-items: center;
		padding: 6px 12px;
		border: 2px solid var(--wp--preset--color--ink);
		border-radius: var(--wp--custom--radius--pill);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 600;
		white-space: nowrap;
	}

	.pm-series-card:hover .pm-series-card__visit {
		color: var(--wp--preset--color--ink-hover);
		border-color: var(--wp--preset--color--ink-hover);
	}

	.pm-series__rows {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 18px;
		border-top: 1px solid var(--wp--preset--color--line-2);
	}

	.pm-series-row {
		gap: 12px;
		padding: 10px 0;
		border-bottom: 1px solid var(--wp--preset--color--line-2);
	}

	.pm-series-row__cover {
		flex-basis: 40px;
		width: 40px;
		height: 52px;
	}

	.pm-series-row__title {
		font-size: var(--wp--preset--font-size--body-large);
	}
}

/* Comics page layout (comics.html). */

.pm-series__wide {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.pm-series-wide {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
}

.pm-series-wide:hover {
	color: var(--wp--preset--color--ink);
}

.pm-series-wide__header {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 230px;
	object-fit: cover;
	border-right: 2px solid var(--wp--preset--color--ink);
}

.pm-series-wide__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}

.pm-series-wide__logo {
	display: block;
	align-self: flex-start;
	width: auto;
	height: var(--pm-logo-h-comics);
}

.pm-series-wide__description {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}

.pm-series-wide__tagline {
	display: none;
}

/* text-3 is fine here: it's on white, never on tan. */
.pm-series-wide__status {
	font-size: var(--wp--preset--font-size--meta);
	line-height: normal;
	color: var(--wp--preset--color--text-3);
}

.pm-series-wide__visit {
	align-self: flex-start;
	margin-top: auto;
}


.pm-series__hosted {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 64px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.pm-series-small {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	line-height: normal;
}

.pm-series-small__header {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 6;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--tile);
}

.pm-series-small__title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.pm-series-small__meta {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--text-2);
}

@media (max-width: 767px) {
	.pm-series__wide {
		gap: 16px;
	}

	.pm-series-wide {
		grid-template-columns: 1fr;
	}

	.pm-series-wide__header {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 5;
		border-right: 0;
		border-bottom: 2px solid var(--wp--preset--color--ink);
	}

	.pm-series-wide__body {
		gap: 10px;
		padding: 14px;
	}

	.pm-series-wide__logo {
		height: var(--pm-logo-h-mobile);
	}

	/* The wireframe shows the short tagline on phones, not the description or status. */
	.pm-series-wide__description,
	.pm-series-wide__status {
		display: none;
	}

	.pm-series-wide__tagline {
		display: block;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--text-2);
	}

	.pm-series-wide__visit {
		align-self: stretch;
		margin-top: 4px;
	}

	.pm-series__hosted {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 40px;
	}
}

/*
 * Home's featured series: always stacked, so its three-panel strip shows
 * whole at every width. Below it, logo, description and status on the left,
 * the "Read at …" pill two-thirds across the space to their right (phones stack these too).
 */
.pm-series__feature .pm-series-wide {
	grid-template-columns: 1fr;
}

.pm-series__feature .pm-series-wide__header {
	height: auto;
	min-height: 0;
	aspect-ratio: 16 / 5;
	border-right: 0;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

@media (min-width: 768px) {
	.pm-series__feature .pm-series-wide__body {
		display: grid;
		/* Text as wide as it needs; the pill two-thirds across the space left over. */
		grid-template-columns: auto 2fr auto 1fr;
		gap: 10px 32px;
		align-items: center;
	}

	.pm-series__feature .pm-series-wide__body > * {
		grid-column: 1;
	}

	.pm-series__feature .pm-series-wide__visit {
		grid-column: 3;
		grid-row: 1 / span 3;
		align-self: center;
		margin-top: 0;
	}
}

/*
 * Tablets: a wide card's text column gets tall enough to crop its three-panel
 * header to one panel, so stack it (header on top at 16:5) as phones do.
 */
@media (max-width: 1023px) {
	.pm-series-wide {
		grid-template-columns: 1fr;
	}

	.pm-series-wide__header {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 5;
		border-right: 0;
		border-bottom: 2px solid var(--wp--preset--color--ink);
	}
}

/*
 * The current series (pm_current, Roonie): a wide card (first on Home) that
 * sits up off the page on a hard ink shadow, with a light Comics tint
 * behind its text.
 */
.pm-series-wide.is-current {
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
}

/* Hover: every card lifts onto a hard ink shadow; the current one's deepens. */
.pm-series-card,
.pm-series-wide {
	transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.pm-series-card:is(:hover, :focus-visible),
.pm-series-wide:is(:hover, :focus-visible) {
	transform: translate(-3px, -3px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
}

.pm-series-wide.is-current:is(:hover, :focus-visible) {
	box-shadow: 9px 9px 0 var(--wp--preset--color--ink);
}

.pm-series-row:hover .pm-series-row__title,
.pm-series-small:hover .pm-series-small__title {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
	.pm-series-card,
	.pm-series-wide {
		transition: none;
	}
}

.pm-series-wide.is-current .pm-series-wide__body {
	background: var(--wp--preset--color--comics-tint);
}

/*
 * Header panels (pm_header_panel_1–3): three character images side by side,
 * cropped to fill, with the dividers drawn here.
 */
.pm-series-panels.pm-series-card__header,
.pm-series-panels.pm-series-wide__header {
	display: flex;
}

.pm-series-panels > img {
	flex: 1 1 0;
	min-width: 0;
	width: 0;
	height: 100%;
	object-fit: cover;
}

.pm-series-panels > img + img {
	border-left: 2px solid var(--wp--preset--color--ink);
}

/*
 * Home's other external series are quieter than the featured one: slightly
 * faded (lines stay black, so they all read as one gray), full strength as
 * the card lifts on hover.
 */
.pm-series-card {
	opacity: 0.82;
}

.pm-series-card:is(:hover, :focus-visible) {
	opacity: 1;
}

/* The "Read at …" pill fills in when its card is hovered. */
.pm-series-wide:is(:hover, :focus-visible) .pm-series-wide__visit {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}