/*
 * Citably archive: the blog index at /learn/ and the category archives.
 *
 * A separate file rather than an addition to citably-chrome.css, because that
 * stylesheet is generated by cms/scripts/port-chrome-css.js and carries a
 * do-not-hand-edit warning. Anything added there is discarded the next time it is
 * regenerated. This file is hand-written and stays hand-written.
 *
 * It is also enqueued only on archive and blog-index views, so it is not
 * downloaded on the 180 existing pages at all. Every selector is additionally
 * scoped under .ctb-archive, which exists on no other template, so even if it
 * were loaded everywhere it could not reach them. No existing rule is modified.
 *
 * Theme variables are declared locally. The chrome's variables are scoped to
 * #ctb-header, #ctb-footer and #ctb-mobile-menu, so they are not in scope here and
 * the same values are restated rather than inherited.
 *
 * Locked values used: black #000000, card #111111, border #222222, text #F8FAFC,
 * secondary #94A3B8, teal #00F5D4 for eyebrows and active states, orange #FF5A00
 * for action elements only, Montserrat headings, Inter body, 200ms transitions.
 * Light mode turns teal text and links black. Breakpoints 1079, 999, 767.
 *
 * No JavaScript is involved in anything below.
 */

.ctb-archive {
	--a-bg: #000000;
	--a-card: #111111;
	--a-card-hover: #1a1a1a;
	--a-bd: #222222;
	--a-tx: #f8fafc;
	--a-sec: #94a3b8;
	--a-muted: #64748b;
	--a-teal: #00f5d4;
	--a-orange: #ff5a00;
	--a-wm: 0.25;

	background: var(--a-bg);
	color: var(--a-tx);
	font-family: Inter, system-ui, sans-serif;
}

html[data-theme="light"] .ctb-archive {
	--a-bg: #fafafa;
	--a-card: #ffffff;
	--a-card-hover: #f1f5f9;
	--a-bd: #e2e8f0;
	--a-tx: #0f172a;
	--a-sec: #475569;
	--a-muted: #64748b;
	/* locked rule: teal text and links become black on light backgrounds */
	--a-teal: #000000;
	--a-wm: 0.18;
}

.ctb-archive a {
	text-decoration: none;
}

.ctb-arc-wrap {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
}

/* ---- hero ---------------------------------------------------------------- */

.ctb-arc-hero {
	position: relative;
	overflow: hidden;
	background: var(--a-bg);
	padding: 80px 0;
}

.ctb-arc-wm {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 520px;
	height: auto;
	transform: translate(-50%, -50%);
	opacity: var(--a-wm);
	filter: blur(58px);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.ctb-arc-hero .ctb-arc-wrap {
	position: relative;
	z-index: 1;
}

.ctb-arc-title {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--a-tx);
}

.ctb-arc-desc {
	margin: 18px 0 0;
	max-width: 640px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--a-sec);
}

.ctb-arc-desc p {
	margin: 0 0 10px;
}

.ctb-arc-desc p:last-child {
	margin-bottom: 0;
}

/* ---- grid --------------------------------------------------------------- */

.ctb-arc-body {
	background: var(--a-bg);
	padding: 80px 0;
}

.ctb-arc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	align-items: stretch;
}

/* wpautop can inject empty paragraphs into rendered content, and an empty child
   of an auto-fit grid claims a column and shifts everything left */
.ctb-arc-grid > p:empty {
	display: none;
}

/* ---- card --------------------------------------------------------------- */

.ctb-card {
	display: flex;
	flex-direction: column;
	background: var(--a-card);
	border: 1px solid var(--a-bd);
	border-radius: 14px;
	padding: 26px;
	box-sizing: border-box;
	transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.ctb-card:hover {
	background: var(--a-card-hover);
	border-color: var(--a-teal);
	transform: translateY(-2px);
}

.ctb-card-eyebrow {
	display: inline-block;
	align-self: flex-start;
	margin: 0 0 14px;
	font-family: Inter, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--a-teal);
	transition: opacity 200ms ease;
}

.ctb-card-eyebrow:hover {
	opacity: 0.72;
}

.ctb-card-title {
	margin: 0 0 12px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.32;
}

.ctb-card-title a {
	color: var(--a-tx);
	transition: color 200ms ease;
}

.ctb-card-title a:hover {
	color: var(--a-teal);
}

.ctb-card-meta {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--a-muted);
}

.ctb-card-sep {
	margin: 0 7px;
}

.ctb-card-excerpt {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.72;
	color: var(--a-sec);
}

/* pushes Read more to the bottom so cards of differing length still align */
.ctb-card-more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--a-teal);
	transition: gap 200ms ease, color 200ms ease;
}

.ctb-card-more:hover {
	gap: 12px;
}

.ctb-card-arrow {
	line-height: 1;
}

.ctb-arc-empty {
	margin: 0;
	font-size: 16px;
	color: var(--a-sec);
}

/* ---- pagination --------------------------------------------------------- */

.ctb-archive .navigation.pagination {
	margin-top: 56px;
}

.ctb-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ctb-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	box-sizing: border-box;
	border: 1px solid var(--a-bd);
	border-radius: 10px;
	background: var(--a-card);
	font-family: Inter, sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--a-sec);
	transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.ctb-archive a.page-numbers:hover {
	color: var(--a-tx);
	border-color: var(--a-teal);
	background: var(--a-card-hover);
}

/* current page is an active state, so teal, and black in light mode by the
   variable above */
.ctb-archive .page-numbers.current {
	color: var(--a-teal);
	border-color: var(--a-teal);
	background: var(--a-card);
}

.ctb-archive .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.ctb-archive .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- breakpoints, the same three the header and footer use -------------- */

@media (max-width: 1079px) {
	.ctb-arc-title {
		font-size: 38px;
	}

	.ctb-arc-wm {
		width: 430px;
	}
}

@media (max-width: 999px) {
	.ctb-arc-wrap {
		padding: 0 24px;
	}

	.ctb-arc-grid {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.ctb-archive {
		--a-wm: 0.28;
	}

	.ctb-arc-hero,
	.ctb-arc-body {
		padding: 56px 0;
	}

	.ctb-arc-wrap {
		padding: 0 20px;
	}

	.ctb-arc-title {
		font-size: 30px;
	}

	.ctb-arc-desc {
		font-size: 16px;
	}

	/* cards stack full width */
	.ctb-arc-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.ctb-card {
		padding: 22px;
	}
}

/* the mobile watermark opacity must also win in light mode */
@media (max-width: 767px) {
	html[data-theme="light"] .ctb-archive {
		--a-wm: 0.28;
	}
}