/* ==========================================================================
   Cobalt Aurora - blog and comparison views
   Loaded on the blog archive, articles, the compare archive and comparisons.
   Reuses the shared header, card, table, FAQ and CTA components from bcp.css.
   ========================================================================== */

/* Astra's #primary margin is neutralised for .bcp-fullwidth views in bcp.css;
   these views get the same treatment. */
body.bcp.bcp-editorial #primary,
body.bcp.bcp-editorial #content .site-main {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

body.bcp.bcp-editorial #content > .ast-container {
	display: block;
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

body.bcp.bcp-editorial #content > .ast-container > main {
	width: 100%;
}

/* --------------------------------------------------------------------------
   1. Article cards
   -------------------------------------------------------------------------- */

.bcp-artgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bcp-md);
}

@media (max-width: 1023px) {
	.bcp-artgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Declared collapse. */
@media (max-width: 599px) {
	.bcp-artgrid {
		grid-template-columns: 1fr;
	}
}

.bcp-artcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	box-shadow: var(--bcp-shadow);
	transition: border-color var(--bcp-t), box-shadow var(--bcp-t), transform var(--bcp-t);
}

.bcp-artcard:hover {
	border-color: rgba(49, 91, 255, 0.45);
	box-shadow: var(--bcp-shadow-lift);
	transform: translateY(-3px);
}

.bcp-artcard__media {
	display: block;
	aspect-ratio: 8 / 5;
	overflow: hidden;
	background: var(--bcp-deep);
	border-bottom: 1px solid var(--bcp-line);
}

.bcp .bcp-artcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bcp .bcp-artcard:hover .bcp-artcard__img {
	transform: scale(1.04);
}

.bcp-artcard__fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--bcp-grad-deep);
}

.bcp-artcard__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--bcp-md);
	flex: 1 1 auto;
}

.bcp-artcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bcp-sm);
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted);
}

.bcp .bcp-artcard__title {
	font-size: var(--bcp-text-lg);
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.28;
	margin: 0;
}

.bcp .bcp-artcard__title a,
.bcp .bcp-artcard__title a:visited {
	color: var(--bcp-ink);
	text-decoration: none;
}

.bcp .bcp-artcard__title a:hover {
	color: var(--bcp-accent);
}

.bcp-artcard__excerpt {
	font-size: var(--bcp-text-sm);
	line-height: 1.6;
	color: var(--bcp-muted);
	margin: 0;
}

.bcp-artcard__more {
	margin: auto 0 0;
	padding-top: var(--bcp-sm);
}

/* Featured: image beside the copy. */
.bcp-artcard--featured {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: stretch;
}

.bcp-artcard--featured .bcp-artcard__media {
	aspect-ratio: auto;
	min-height: 320px;
	border-bottom: 0;
	border-right: 1px solid var(--bcp-line);
}

.bcp-artcard--featured .bcp-artcard__body {
	justify-content: center;
	padding: var(--bcp-lg);
	gap: var(--bcp-md);
}

.bcp .bcp-artcard--featured .bcp-artcard__title {
	font-size: var(--bcp-text-2xl);
	letter-spacing: -0.028em;
	line-height: 1.18;
}

.bcp-artcard--featured .bcp-artcard__excerpt {
	font-size: var(--bcp-text-base);
}

@media (max-width: 899px) {
	.bcp-artcard--featured {
		grid-template-columns: 1fr;
	}

	.bcp-artcard--featured .bcp-artcard__media {
		aspect-ratio: 8 / 5;
		min-height: 0;
		border-right: 0;
		border-bottom: 1px solid var(--bcp-line);
	}
}

/* --------------------------------------------------------------------------
   2. Comparison cards
   -------------------------------------------------------------------------- */

.bcp-cmpgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bcp-md);
}

@media (max-width: 1023px) {
	.bcp-cmpgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.bcp-cmpgrid {
		grid-template-columns: 1fr;
	}
}

.bcp-cmpgrid__item.is-hidden {
	display: none;
}

.bcp-cmpgrid__empty {
	padding: var(--bcp-lg);
	text-align: center;
	color: var(--bcp-muted);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
}

.bcp-cmpcard {
	gap: var(--bcp-sm);
}

.bcp-cmpcard__versus {
	display: flex;
	align-items: center;
	gap: var(--bcp-sm);
}

.bcp-cmpcard__vs,
.bcp-cmp__vs {
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bcp-muted);
}

/* The second mark uses the cyan gradient so the pair reads as two parties. */
.bcp-mark--alt {
	background: var(--bcp-grad-cyan);
	box-shadow: 0 8px 18px rgba(22, 217, 245, 0.26);
}

.bcp .bcp-cmpcard__title {
	font-size: var(--bcp-text-lg);
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.25;
}

.bcp-cmpcard__excerpt {
	font-size: var(--bcp-text-sm);
	color: var(--bcp-muted);
	margin-top: auto;
}

.bcp-cmpcard__more {
	display: inline-block;
	padding-top: var(--bcp-sm);
	margin-top: var(--bcp-sm);
	border-top: 1px solid var(--bcp-line);
	width: 100%;
	font-size: var(--bcp-text-xs);
	font-weight: 700;
	color: var(--bcp-accent-deep);
}

/* --------------------------------------------------------------------------
   3. Article and comparison heroes
   -------------------------------------------------------------------------- */

.bcp-article__head,
.bcp-cmp__head {
	padding-bottom: var(--bcp-xl);
	max-width: 56ch;
}

.bcp-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bcp-sm);
	margin-bottom: var(--bcp-md);
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted-inverse);
}

.bcp .bcp-article__title,
.bcp .bcp-cmp__title {
	color: #fff;
	font-size: clamp(1.875rem, 3.1vw, 2.75rem);
}

.bcp-article__lede,
.bcp-cmp__lede {
	margin-top: var(--bcp-md);
	font-size: var(--bcp-text-lg);
	color: var(--bcp-muted-inverse);
}

.bcp-cmp__versus {
	display: flex;
	align-items: center;
	gap: var(--bcp-md);
	margin-bottom: var(--bcp-md);
}

.bcp-cmp__vs {
	color: var(--bcp-cyan);
	font-size: var(--bcp-text-sm);
}

/* Lead image sits half over the hero for a deliberate overlap. */
.bcp-article__figure {
	position: relative;
	margin-top: calc(-1 * var(--bcp-xl));
	z-index: 2;
}

.bcp .bcp-article__img {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
	border-radius: var(--bcp-r-lg);
	border: 1px solid var(--bcp-line);
	box-shadow: var(--bcp-shadow-panel);
}

@media (max-width: 767px) {
	.bcp-article__figure {
		margin-top: calc(-1 * var(--bcp-lg));
	}

	.bcp .bcp-article__img {
		max-height: 240px;
	}
}

/* --------------------------------------------------------------------------
   4. Article body
   -------------------------------------------------------------------------- */

.bcp-body--article .bcp-asec {
	padding-block: var(--bcp-lg);
}

.bcp-body--article .bcp-asec > * {
	max-width: var(--bcp-measure);
	margin-inline: auto;
}

/* Grids inside an article may use the full content width. */
.bcp-body--article .bcp-asec > .bcp-grid {
	max-width: var(--bcp-container);
}

.bcp-body--article {
	padding-block: var(--bcp-xl);
	background: var(--bcp-bg);
}

.bcp-body--article .bcp-asec {
	padding-inline: var(--bcp-gutter);
}

.bcp .bcp-body--article h2 {
	margin-bottom: var(--bcp-md);
	scroll-margin-top: 96px;
}

.bcp .bcp-body--article h3 {
	margin-top: var(--bcp-lg);
	margin-bottom: var(--bcp-sm);
	font-size: var(--bcp-text-lg);
}

.bcp-body--article p {
	color: var(--bcp-muted);
}

.bcp-body--article p + p {
	margin-top: var(--bcp-md);
}

.bcp-body--article .bcp-asec__src {
	margin-bottom: var(--bcp-md);
}

.bcp-body--article .bcp-feature p {
	font-size: var(--bcp-text-sm);
}

.bcp-cmp__note {
	margin-top: var(--bcp-md);
	font-size: var(--bcp-text-sm);
	color: var(--bcp-muted);
	max-width: 80ch;
}

/* --------------------------------------------------------------------------
   5. Pricing card (rendered by the plugin)
   -------------------------------------------------------------------------- */

.bcp-pcard {
	display: flex;
	flex-direction: column;
	gap: var(--bcp-md);
	padding: var(--bcp-lg);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	box-shadow: var(--bcp-shadow);
}

.bcp-pcard__head {
	display: flex;
	align-items: flex-start;
	gap: var(--bcp-md);
}

.bcp-pcard__id {
	flex: 1 1 auto;
	min-width: 0;
}

.bcp .bcp-pcard__title {
	font-size: var(--bcp-text-lg);
	font-weight: 800;
	letter-spacing: -0.022em;
	margin: 2px 0 0;
}

.bcp .bcp-pcard__title a,
.bcp .bcp-pcard__title a:visited {
	color: var(--bcp-ink);
	text-decoration: none;
}

.bcp .bcp-pcard__title a:hover {
	color: var(--bcp-accent);
}

.bcp-pcard__from {
	flex: none;
	text-align: right;
}

.bcp-pcard__from .bcp-eyebrow {
	display: block;
	font-size: 0.625rem;
	color: var(--bcp-muted);
}

.bcp-pcard__from strong {
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-xl);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--bcp-accent-deep);
	font-variant-numeric: tabular-nums;
}

.bcp-pcard__from strong :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi) {
	font: inherit;
	color: inherit;
}

.bcp-pcard__list {
	list-style: none;
	display: grid;
	gap: 1px;
	background: var(--bcp-line);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-sm);
	overflow: hidden;
}

.bcp-pcard__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-sm);
	padding: 10px 13px;
	background: var(--bcp-surface);
	font-size: var(--bcp-text-xs);
}

.bcp-pcard__name {
	color: var(--bcp-ink);
	font-weight: 500;
}

.bcp-pcard__price {
	flex: none;
	font-weight: 800;
	color: var(--bcp-accent-deep);
	font-variant-numeric: tabular-nums;
}

.bcp-pcard__price :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi) {
	font: inherit;
	color: inherit;
}

.bcp-pcard__more {
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted);
	margin: 0;
}

.bcp-pcard__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bcp-sm);
}

.bcp .bcp-pcard__actions .bcp-btn {
	padding: 11px 16px;
	font-size: var(--bcp-text-xs);
}

.bcp-pcard__note {
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--bcp-muted);
	margin: 0;
	padding-top: var(--bcp-sm);
	border-top: 1px solid var(--bcp-line);
}

@media (max-width: 479px) {
	.bcp-pcard__actions {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   6. Pagination
   -------------------------------------------------------------------------- */

.bcp .navigation.pagination,
.bcp .bcp-pagination {
	margin-top: var(--bcp-lg);
}

.bcp .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.bcp .navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	font-size: var(--bcp-text-sm);
	font-weight: 700;
	color: var(--bcp-ink);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-pill);
	text-decoration: none;
}

.bcp .navigation.pagination .page-numbers.current {
	color: #fff;
	background: var(--bcp-grad);
	border-color: transparent;
}