/*
 * Blog index (page-blog.php) and category archives (category.php), in the
 * docs visual language. Tokens and patterns mirror
 * plugins/preproduct-docs/assets/css/docs.css (and assets/css/contact.css) but
 * are kept local so the page does not depend on that plugin being active.
 *
 * html { font-size: 10px } in the theme, so 1rem = 10px.
 */

.ppb {
	--ppb-ink: #130041;
	--ppb-primary: #29165e;
	--ppb-primary-soft: #5e4c92;
	--ppb-text: #3d464d;
	--ppb-subtle: #667280;
	--ppb-muted: #75797c;
	--ppb-line: #e0e0e5;
	--ppb-tint: #f7f8fb;
	--ppb-sun: #ffe256;

	position: relative;
	z-index: 1;
	color: var(--ppb-text);
	/* #masthead is position:absolute and 80px tall. */
	padding-top: calc(80px + 4rem);
	padding-bottom: 12rem;
}

@media (min-width: 1024px) {
	.ppb {
		/* Clears the floating nav (fixed 40-95px down). */
		padding-top: calc(80px + 7.2rem);
	}
}

@media (min-width: 1536px) {
	.ppb.site_container {
		max-width: 1280px;
	}
}

/* Page ground: white, the brand glow held to the right third (docs.css). ---- */

body.ppb-view {
	position: relative;
	background: #fff;
}

body.ppb-view .header-grid-underlay {
	display: none;
}

@media (min-width: 1024px) {
	body.ppb-view::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;
		width: 33.333vw;
		height: 900px;
		pointer-events: none;
		background: radial-gradient(
			33.333vw 667px at 100% 211px,
			rgba(147, 95, 172, 0.28) 0%,
			rgba(184, 116, 217, 0.19) 30%,
			rgba(60, 154, 137, 0.15) 62%,
			rgba(60, 154, 137, 0) 100%
		);
	}
}

/* Links: plain underline on hover, never a weight change (beats the theme's
   `li a:hover { font-weight: 500 }`). */
.ppb a {
	color: var(--ppb-primary);
	text-decoration: none;
}

.ppb a:hover {
	color: var(--ppb-ink);
	text-decoration: underline;
}

.ppb li a:hover {
	font-weight: inherit;
}

.ppb a:focus-visible {
	outline: 2px solid var(--ppb-primary-soft);
	outline-offset: 3px;
}

/* Small uppercase label that heads a section. */
.ppb .ppb__label {
	margin: 0;
	color: var(--ppb-muted);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Hero --------------------------------------------------------------------- */

.ppb__hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.4rem;
	margin-bottom: 7.2rem;
}

.ppb .ppb__title {
	margin: 0;
	color: var(--ppb-ink);
	font-size: clamp(4rem, 5vw, 6rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-align: left;
}

.ppb .ppb__intro {
	max-width: 64rem;
	margin: 0;
	color: var(--ppb-subtle);
	font-size: clamp(1.8rem, 1.6vw, 2rem);
	line-height: 1.5;
}

/* Topic pills (as .ppd-home__popular / .ppd-pill). */
.ppb-topics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	max-width: 96rem;
}

.ppb-topics ul {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppb-topics li {
	margin: 0;
}

/* Phones: one swipeable row of pills rather than five wrapped rows. */
@media (max-width: 639px) {
	.ppb-topics {
		flex-wrap: nowrap;
		align-self: stretch;
		margin-right: -2rem;
		padding-right: 2rem;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ppb-topics::-webkit-scrollbar {
		display: none;
	}

	.ppb-topics li,
	.ppb-topics__label {
		flex: 0 0 auto;
	}
}

.ppb-topics__label {
	margin-right: 0.4rem;
	color: var(--ppb-muted);
	font-size: 1.3rem;
	font-weight: 600;
}

.ppb .ppb-pill,
.ppb li a.ppb-pill:hover {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--ppb-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.ppb .ppb-pill:hover {
	border-color: var(--ppb-primary-soft);
	color: var(--ppb-primary);
}

.ppb .ppb-pill[aria-current] {
	border-color: var(--ppb-primary);
	background: var(--ppb-primary);
	color: #fff;
}

/* Post list ---------------------------------------------------------------- */

.ppb-list__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.6rem;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--ppb-line);
}

.ppb-list__count {
	color: var(--ppb-muted);
	font-size: 1.3rem;
	text-align: right;
}

/* One row per post: date column, copy, thumbnail; a hairline under each. */
.ppb-post {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"thumb"
		"meta"
		"body";
	gap: 1.2rem;
	padding: 3.2rem 0;
	border-bottom: 1px solid var(--ppb-line);
}

@media (min-width: 768px) {
	.ppb-post {
		grid-template-columns: minmax(0, 1fr) 220px;
		grid-template-areas:
			"meta thumb"
			"body thumb";
		grid-template-rows: auto 1fr;
		column-gap: 4rem;
		padding: 4rem 0;
	}
}

@media (min-width: 1024px) {
	.ppb-post {
		grid-template-columns: 160px minmax(0, 1fr) 320px;
		grid-template-areas: "meta body thumb";
		grid-template-rows: auto;
		column-gap: 4.8rem;
	}
}

@media (min-width: 1280px) {
	.ppb-post {
		column-gap: 7.2rem;
	}
}

.ppb-post__meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	color: var(--ppb-muted);
	font-size: 1.3rem;
	line-height: 1.4;
}

.ppb-post__meta time {
	color: var(--ppb-primary-soft);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.ppb-post__meta {
		flex-direction: column;
		/* Sits on the title's first line. */
		padding-top: 0.6rem;
	}
}

.ppb-post__body {
	grid-area: body;
	min-width: 0;
}

.ppb .ppb-post__title {
	margin: 0 0 1.2rem;
	color: var(--ppb-ink);
	font-size: clamp(2.2rem, 2vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.ppb .ppb-post__title a {
	color: var(--ppb-ink);
}

.ppb .ppb-post__excerpt {
	max-width: 64rem;
	margin: 0 0 2rem;
	color: var(--ppb-subtle);
	font-size: 1.6rem;
	line-height: 1.6;
}

.ppb-post__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 2.4rem;
}

.ppb .ppb-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.4rem;
	font-weight: 700;
}

.ppb-arrow-link::after {
	content: "\2192";
}

.ppb-post__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppb-post__cats li {
	margin: 0;
}

.ppb .ppb-post__cats a {
	color: var(--ppb-muted);
	font-size: 1.3rem;
}

.ppb .ppb-post__cats a:hover {
	color: var(--ppb-ink);
}

.ppb-post__thumb {
	grid-area: thumb;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	background: var(--ppb-tint);
}

.ppb-post__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No featured image: a quiet tint block on wide screens, nothing on phones. */
.ppb-post__thumb--empty {
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(184, 116, 217, 0.18), rgba(60, 154, 137, 0.08) 60%, transparent),
		var(--ppb-tint);
}

@media (max-width: 767px) {
	.ppb-post__thumb--empty {
		display: none;
	}
}

.ppb-empty {
	padding: 4rem 0;
	border-bottom: 1px solid var(--ppb-line);
}

.ppb-empty p {
	margin: 0 0 1.6rem;
	font-size: 1.6rem;
}

/* Pagination: pills ------------------------------------------------------- */

.ppb-pagination {
	margin-top: 4.8rem;
}

.ppb-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ppb-pagination li {
	margin: 0;
}

.ppb .ppb-pagination .page-numbers,
.ppb .ppb-pagination li a.page-numbers:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-width: 4rem;
	height: 4rem;
	padding: 0 1.4rem;
	border: 1px solid var(--ppb-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ppb-primary);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.ppb .ppb-pagination a.page-numbers:hover {
	border-color: var(--ppb-primary-soft);
	color: var(--ppb-ink);
}

.ppb .ppb-pagination .page-numbers.current {
	border-color: var(--ppb-primary);
	background: var(--ppb-primary);
	color: #fff;
}

.ppb .ppb-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 0.4rem;
	border-color: transparent;
	background: transparent;
	color: var(--ppb-muted);
}

.ppb .ppb-pagination .prev,
.ppb .ppb-pagination .next {
	font-weight: 800;
}

.ppb .ppb-pagination .next,
.ppb .ppb-pagination li a.next:hover {
	border-color: var(--ppb-primary);
}

@media (max-width: 639px) {
	/* Phones: Newer / Older on their own row under the numbers. */
	.ppb-pagination ul {
		row-gap: 1.2rem;
	}

	.ppb-pagination li:has(.prev),
	.ppb-pagination li:has(.next) {
		order: 1;
	}
}