/**
 * Corporate blue content surfaces.
 *
 * Loaded only for the posts index, category, tag, date, author, search and
 * 404 views. Keep every selector route-scoped so product and landing pages
 * retain their own visual systems.
 */

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) {
	--cc-content-blue: #2f6bff;
	--cc-content-blue-bright: #55a7ff;
	--cc-content-blue-soft: rgba(47, 107, 255, 0.14);
	--cc-content-blue-line: rgba(85, 167, 255, 0.28);
	--cc-content-surface: #0b1428;
	--cc-content-surface-raised: #101e38;
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) :where(.cc-blog-hero, .cc-page-hero) {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 82% 16%, rgba(85, 167, 255, 0.24), transparent 34%),
		linear-gradient(135deg, #071226 0%, #0b1e42 56%, #102b5c 100%);
	border-bottom-color: var(--cc-content-blue-line);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) :where(.cc-blog-hero, .cc-page-hero)::after {
	position: absolute;
	inset: auto -8% -58% 42%;
	height: min(420px, 52vw);
	pointer-events: none;
	background: linear-gradient(120deg, transparent, rgba(85, 167, 255, 0.09));
	border: 1px solid rgba(85, 167, 255, 0.12);
	border-radius: 50%;
	content: "";
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404
) :where(.cc-blog-hero, .cc-page-hero) > .cc-container {
	position: relative;
	z-index: 1;
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) .cc-kicker {
	color: var(--cc-content-blue-bright);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) .cc-section {
	background:
		linear-gradient(180deg, rgba(47, 107, 255, 0.045), transparent 280px),
		var(--cc-bg);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.archive,
	body.page-template-page-blog
) .cc-card-grid {
	gap: clamp(18px, 2.4vw, 28px);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.archive,
	body.page-template-page-blog
) .cc-card {
	overflow: hidden;
	background:
		linear-gradient(145deg, rgba(47, 107, 255, 0.08), transparent 44%),
		var(--cc-content-surface);
	border-color: var(--cc-content-blue-line);
	box-shadow: 0 22px 54px rgba(1, 9, 24, 0.36);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

@media (hover: hover) {
	:where(
		body.blog,
		body.category,
		body.tag,
		body.date,
		body.author,
		body.search,
		body.archive,
		body.page-template-page-blog
	) .cc-card:hover {
		border-color: rgba(85, 167, 255, 0.58);
		box-shadow: 0 26px 64px rgba(3, 20, 55, 0.52);
		transform: translateY(-3px);
	}
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.archive,
	body.page-template-page-blog
) .cc-card__media {
	border-bottom: 1px solid var(--cc-content-blue-line);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.archive,
	body.page-template-page-blog
) .cc-card__media--fallback {
	background:
		linear-gradient(145deg, rgba(85, 167, 255, 0.22), rgba(47, 107, 255, 0.05)),
		var(--cc-content-surface-raised);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.archive,
	body.page-template-page-blog
) :where(.cc-card__meta, .cc-card__actions .cc-card__next) {
	color: var(--cc-content-blue-bright);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.archive,
	body.page-template-page-blog
) .cc-card__body :where(h2, h3) a:is(:hover, :focus-visible) {
	color: var(--cc-content-blue-bright);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.archive,
	body.page-template-page-blog
) :where(.cc-blog-topics, .cc-module-card, .cc-empty-state, .cc-conversion-band) {
	background:
		linear-gradient(145deg, rgba(47, 107, 255, 0.1), transparent 55%),
		var(--cc-content-surface);
	border-color: var(--cc-content-blue-line);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.archive,
	body.page-template-page-blog
) .cc-pagination .page-numbers {
	border-color: var(--cc-content-blue-line);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.archive,
	body.page-template-page-blog
) .cc-pagination .page-numbers.current {
	color: #fff;
	background: var(--cc-content-blue);
	border-color: var(--cc-content-blue);
}

body.error404 .cc-page-hero {
	min-height: min(720px, calc(100svh - var(--cc-header-height)));
	display: grid;
	align-items: center;
}

body.error404 .cc-page-hero .cc-container {
	max-width: 880px;
}

body.error404 .cc-page-hero h1 {
	max-width: 13ch;
	font-size: clamp(2.7rem, 7vw, 6.2rem);
}

body.error404 .cc-actions {
	margin-top: clamp(22px, 4vw, 34px);
}

body.error404 .cc-button--ghost {
	border-color: var(--cc-content-blue-line);
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) :where(a, button, input):focus-visible {
	outline: 3px solid #8ec8ff;
	outline-offset: 3px;
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) :where(.cc-text-link, .cc-card__next, .cc-blog-topics > a) {
	text-decoration: underline;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.2em;
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) :where(.cc-button, .cc-blog-search button, .cc-content-search button) {
	min-height: 44px;
	background: var(--cc-content-blue);
	border-color: var(--cc-content-blue);
	color: #fff;
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) :where(.cc-button, .cc-blog-search button, .cc-content-search button):is(:hover, :focus-visible) {
	background: #2358d8;
	border-color: #2358d8;
	color: #fff;
}

:where(
	body.blog,
	body.category,
	body.tag,
	body.date,
	body.author,
	body.search,
	body.error404,
	body.archive,
	body.page-template-page-blog
) .cc-button--ghost {
	background: transparent;
	border-color: var(--cc-content-blue-line);
	color: #dcecff;
}

.cc-archive-description {
	max-width: 70ch;
}

.cc-archive-description > :last-child {
	margin-bottom: 0;
}

.cc-content-search {
	max-width: 720px;
	margin-bottom: clamp(28px, 5vw, 48px);
	padding: clamp(18px, 3vw, 28px);
	background: var(--cc-content-surface);
	border: 1px solid var(--cc-content-blue-line);
	border-radius: var(--cc-radius);
}

.cc-content-search--404 {
	margin-block: clamp(22px, 4vw, 34px);
}

.cc-content-search label {
	display: block;
	margin-bottom: 10px;
	color: #dcecff;
	font-weight: 700;
}

.cc-content-search__row {
	display: flex;
	gap: 10px;
}

.cc-content-search input {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	font-size: 1rem;
	color: #fff;
	background: #071226;
	border: 1px solid var(--cc-content-blue-line);
	border-radius: var(--cc-radius-small);
}

.cc-content-search button {
	flex: 0 0 auto;
	padding-inline: 22px;
	border-radius: var(--cc-radius-small);
	font-weight: 800;
}

@media (max-width: 900px) {
	:where(
		body.blog,
		body.category,
		body.tag,
		body.date,
		body.author,
		body.search,
		body.archive,
		body.page-template-page-blog
	) .cc-card-grid--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	:where(
		body.blog,
		body.category,
		body.tag,
		body.date,
		body.author,
		body.search,
		body.error404,
		body.archive,
		body.page-template-page-blog
	) :where(.cc-blog-hero, .cc-page-hero) {
		padding-block: 44px;
	}

	:where(
		body.blog,
		body.category,
		body.tag,
		body.date,
		body.author,
		body.search,
		body.archive,
		body.page-template-page-blog
	) .cc-card-grid--three {
		grid-template-columns: minmax(0, 1fr);
	}

	:where(
		body.blog,
		body.category,
		body.tag,
		body.date,
		body.author,
		body.search,
		body.archive,
		body.page-template-page-blog
	) .cc-card__actions {
		align-items: flex-start;
		flex-direction: column;
	}

	body.error404 .cc-actions {
		align-items: stretch;
		flex-direction: column;
	}

	body.error404 .cc-actions .cc-button {
		justify-content: center;
		width: 100%;
	}

	.cc-content-search__row {
		flex-direction: column;
	}

	.cc-content-search button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(
		body.blog,
		body.category,
		body.tag,
		body.date,
		body.author,
		body.search,
		body.archive,
		body.page-template-page-blog
	) .cc-card {
		transition: none;
	}
}