/*
 * CrossPoint - blog.css
 * The blog listing (/blog/), its category and tag archives, and the single
 * post with its sticky sidebar. Loaded only on those views (cpf_is_blog_view()).
 *
 * Builds on main.css: the navy .cpf-hero band, the .cpf-guide-card, the
 * .cpf-entry__content reading styles and the colour tokens all come from there.
 */

/* ---------- hero ---------- */
.cpf-blog-hero .kicker a,
.cpf-post-hero__crumbs a {
	color: inherit;
	text-decoration: none;
}

.cpf-blog-hero .kicker a:hover,
.cpf-post-hero__crumbs a:hover {
	color: #fff;
}

.cpf-post-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 0.82rem;
}

.cpf-post-hero__crumbs span {
	color: #93a3b8;
}

.cpf-post-hero h1 {
	max-width: 30ch;
}

.cpf-post-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 22px;
	color: #b6c2d2;
	font-size: 0.9rem;
}

.cpf-post-hero__meta i {
	margin-right: 4px;
	color: #e3b341;
}

/* ---------- category filter ---------- */
.cpf-blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.cpf-blog-filter__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--navy);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.cpf-blog-filter__chip:hover {
	border-color: var(--gold);
	color: var(--gold-dark);
}

.cpf-blog-filter__chip.is-active {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
}

.cpf-blog-empty {
	color: var(--muted);
}

/* ---------- pagination ----------
   the_posts_pagination() wraps the links in .nav-links, so main.css's flex
   rule on .cpf-pagination spaces only that one wrapper, not the links. */
.cpf-pagination {
	margin-top: 48px;
}

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

.cpf-pagination .page-numbers {
	min-width: 44px;
	height: 44px;
	gap: 8px;
	box-shadow: 0 1px 2px rgba(14, 27, 46, 0.05);
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}

.cpf-pagination a.page-numbers:hover {
	border-color: var(--gold);
	color: var(--gold-dark);
}

.cpf-pagination .page-numbers.current {
	box-shadow: 0 6px 16px rgba(14, 27, 46, 0.18);
}

.cpf-pagination .page-numbers.dots {
	min-width: 24px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--muted);
}

.cpf-pagination .prev,
.cpf-pagination .next {
	padding: 0 18px;
}

.cpf-pagination .prev i,
.cpf-pagination .next i {
	font-size: 0.8rem;
	transition: transform 0.2s var(--ease);
}

.cpf-pagination .prev:hover i {
	transform: translateX(-3px);
}

.cpf-pagination .next:hover i {
	transform: translateX(3px);
}

/* On a phone the arrows alone carry Previous / Next; the numbers stay. */
@media (max-width: 520px) {
	.cpf-pagination .prev span,
	.cpf-pagination .next span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.cpf-pagination .prev,
	.cpf-pagination .next {
		padding: 0 12px;
	}
}

/* ---------- guide card ---------- */
.cpf-guide-card {
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.cpf-guide-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(14, 27, 46, 0.13);
}

.cpf-guide-card__media {
	display: block;
	aspect-ratio: 12 / 7;
	overflow: hidden;
	background: var(--paper);
}

.cpf-guide-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}

.cpf-guide-card:hover .cpf-guide-card__media img {
	transform: scale(1.04);
}

/* A guide without a featured image still gets a cover, in the hero's colours. */
.cpf-guide-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, #0e1b2e 0%, #132743 60%, #1a2f4d 100%);
	color: #e3b341;
	font-size: 2.2rem;
}

.cpf-guide-card__tag {
	align-self: flex-start;
	color: var(--gold-dark);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.cpf-guide-card__tag:hover {
	color: var(--navy);
}

.cpf-guide-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	color: var(--muted);
	font-size: 0.82rem;
}

.cpf-guide-card__meta + .cpf-guide-card__more {
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

/* The newest post on /blog/: full row, image beside the text. */
.cpf-guide-card--featured {
	grid-column: 1 / -1;
}

.cpf-guide-card--featured .cpf-guide-card__title {
	font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.cpf-guide-card--featured .cpf-guide-card__excerpt {
	font-size: 1rem;
	line-height: 1.65;
}

@media (min-width: 840px) {
	.cpf-guide-card--featured {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}

	.cpf-guide-card--featured .cpf-guide-card__media {
		aspect-ratio: auto;
		min-height: 320px;
	}

	.cpf-guide-card--featured .cpf-guide-card__body {
		justify-content: center;
		gap: 14px;
		padding: 36px 40px;
	}

	.cpf-guide-card--featured .cpf-guide-card__more {
		margin-top: 6px;
	}
}

/* ---------- single post: article + sidebar ---------- */
.cpf-post {
	padding: 48px 0 24px;
}

.cpf-post__layout {
	display: grid;
	gap: 40px;
}

@media (min-width: 1024px) {
	.cpf-post__layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 56px;
		align-items: start;
	}

	/* The column stretches the full height of the article, so the panel inside
	   it has room to stay pinned while the reader scrolls. */
	.cpf-post__sidebar {
		align-self: stretch;
	}
}

.cpf-post__article {
	min-width: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 24px 20px 32px;
	box-shadow: var(--shadow-lg);
}

@media (min-width: 840px) {
	.cpf-post__article {
		padding: 40px 48px 44px;
	}
}

.cpf-post__image {
	margin: 0 0 30px;
}

.cpf-post__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.cpf-post__article .cpf-entry__content {
	font-size: 1.02rem;
	line-height: 1.75;
}

.cpf-post__article .cpf-entry__content > :first-child {
	margin-top: 0;
}

.cpf-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 30px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.cpf-post__tags a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--paper);
	color: var(--navy);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.cpf-post__tags a:hover {
	color: var(--gold-dark);
}

/* ---------- share bar ---------- */
.cpf-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.cpf-share__label {
	color: var(--navy);
	font-family: var(--disp);
	font-weight: 700;
}

.cpf-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.cpf-share__list li {
	margin: 0;
}

.cpf-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--white);
	color: var(--navy);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.cpf-share__btn:hover {
	transform: translateY(-2px);
	color: #fff;
}

/* Each network lights up in its own colour on hover. */
.cpf-share__btn--facebook:hover {
	border-color: #1877f2;
	background: #1877f2;
}

.cpf-share__btn--x:hover {
	border-color: #000;
	background: #000;
}

.cpf-share__btn--linkedin:hover {
	border-color: #0a66c2;
	background: #0a66c2;
}

.cpf-share__btn--whatsapp:hover {
	border-color: #25d366;
	background: #25d366;
}

.cpf-share__btn--email:hover,
.cpf-share__copy:hover {
	border-color: var(--navy);
	background: var(--navy);
}

.cpf-share__copy.is-copied {
	border-color: var(--emerald);
	background: var(--emerald);
	color: #fff;
}

/* ---------- previous / next post ---------- */
.cpf-post__nav {
	margin-top: 30px;
}

.cpf-post__nav .nav-links {
	display: grid;
	gap: 14px;
}

@media (min-width: 640px) {
	.cpf-post__nav .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	/* Next stays on the right even when there is no previous post. */
	.cpf-post__nav .nav-next {
		grid-column: 2;
	}
}

.cpf-post__nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--white);
	text-decoration: none;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.cpf-post__nav .nav-next a {
	justify-content: flex-end;
	text-align: right;
}

.cpf-post__nav a:hover {
	border-color: var(--gold);
	box-shadow: 0 10px 24px rgba(14, 27, 46, 0.08);
}

.cpf-post__nav-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--navy);
	font-size: 0.78rem;
	color: #fff;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.cpf-post__nav a:hover .cpf-post__nav-arrow {
	background: var(--gold-button);
	color: var(--navy);
}

.cpf-post__nav .nav-previous a:hover .cpf-post__nav-arrow {
	transform: translateX(-3px);
}

.cpf-post__nav .nav-next a:hover .cpf-post__nav-arrow {
	transform: translateX(3px);
}

.cpf-post__nav-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cpf-post__nav-label {
	color: var(--gold-dark);
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cpf-post__nav-title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--navy);
	font-family: var(--disp);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---------- sidebar ----------
   Sits straight on the page: no panels behind it and no scroll box. When it is
   taller than the window, blog.js lowers its sticky offset so it scrolls with
   the page until its end is in view, then holds there. */
.cpf-sidebar {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

@media (min-width: 1024px) {
	.cpf-sidebar {
		position: sticky;
		top: 24px;
	}

	/* Clear the header when it is pinned (64px bar), and the admin bar. */
	.cpf-header-sticky .cpf-sidebar {
		top: 88px;
	}

	.admin-bar .cpf-sidebar {
		top: 56px;
	}

	.admin-bar.cpf-header-sticky .cpf-sidebar {
		top: 120px;
	}
}

/* main.css pads every <section> as a page band; these are plain blocks. */
.cpf-sidebar__box {
	padding: 0;
}

.cpf-sidebar__title {
	position: relative;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	color: var(--navy);
	font-size: 1.1rem;
}

.cpf-sidebar__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 40px;
	height: 2px;
	background: var(--gold);
}

.cpf-sidebar__recent,
.cpf-sidebar__cats {
	list-style: none;
}

.cpf-sidebar__recent li + li {
	margin-top: 16px;
}

.cpf-sidebar__post {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	text-decoration: none;
}

.cpf-sidebar__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 12px;
	background: linear-gradient(160deg, #0e1b2e 0%, #1a2f4d 100%);
	color: #e3b341;
}

.cpf-sidebar__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpf-sidebar__post-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cpf-sidebar__post-title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--navy);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color 0.2s var(--ease);
}

.cpf-sidebar__post:hover .cpf-sidebar__post-title {
	color: var(--gold-dark);
}

.cpf-sidebar__post-date {
	color: var(--muted);
	font-size: 0.78rem;
}

.cpf-sidebar__cats li + li {
	border-top: 1px dashed var(--line);
}

.cpf-sidebar__cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	color: var(--ink);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s var(--ease), padding 0.2s var(--ease);
}

.cpf-sidebar__cats a:hover {
	padding-left: 4px;
	color: var(--gold-dark);
}

.cpf-sidebar__cats a.is-active {
	color: var(--gold-dark);
	font-weight: 700;
}

.cpf-sidebar__count {
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 600;
}

/* ---------- related strip: four small cards ---------- */
.cpf-guides--related h2 {
	margin-bottom: 22px;
	font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.cpf-guides__grid--compact {
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

@media (min-width: 600px) {
	.cpf-guides__grid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cpf-guides__grid--compact {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cpf-guides__grid--compact .cpf-guide-card {
	border-radius: 14px;
}

.cpf-guides__grid--compact .cpf-guide-card__media {
	aspect-ratio: 2 / 1;
}

.cpf-guides__grid--compact .cpf-guide-card__body {
	gap: 6px;
	padding: 14px 16px 16px;
}

.cpf-guides__grid--compact .cpf-guide-card__tag {
	font-size: 0.62rem;
}

.cpf-guides__grid--compact .cpf-guide-card__title {
	font-size: 0.95rem;
	line-height: 1.3;
}

.cpf-guides__grid--compact .cpf-guide-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.82rem;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.cpf-guides__grid--compact .cpf-guide-card__meta {
	font-size: 0.74rem;
}

.cpf-guides__grid--compact .cpf-guide-card__meta + .cpf-guide-card__more {
	padding-top: 8px;
	font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {
	.cpf-guide-card,
	.cpf-guide-card__media img,
	.cpf-share__btn,
	.cpf-post__nav-arrow {
		transition: none;
	}

	.cpf-guide-card:hover,
	.cpf-guide-card:hover .cpf-guide-card__media img,
	.cpf-share__btn:hover,
	.cpf-post__nav a:hover .cpf-post__nav-arrow {
		transform: none;
	}
}