/* ==========================================================================
   Blog index, category archives and single posts.

   These screens are rendered by Blocksy, not by our own templates, so the
   design system is applied to the theme's own markup rather than replacing it.
   Tokens are redeclared here because .bsx does not wrap these pages.
   ========================================================================== */

body.blog,
body.archive,
body.single-post {
	--ink:        #060B24;
	--ink-2:      #0C1436;
	--paper:      #FFFFFF;
	--mist:       #F3F6FD;
	--mist-2:     #E7EDFA;
	--brand:      #2872FA;
	--brand-deep: #1B4FC4;
	--cyan:       #5FD6D2;
	--on-dark:    #FFFFFF;
	--on-dark-2:  #A8B4D8;
	--on-light:   #060B24;
	--on-light-2: #515C7E;
	--edge-light: #DCE4F5;
	--gut:        clamp(1.25rem, 5vw, 3rem);
}

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

/* The attribute selector matches the specificity of the theme's own hero rule,
   which otherwise keeps its demo stock photo and its lighter navy. */
body.blog .hero-section[data-type],
body.archive .hero-section[data-type],
body.single-post .hero-section[data-type] {
	background-color: var(--ink);
	background-image: none;
	margin: 0;
	padding: clamp(3.5rem, 7vw, 6rem) var(--gut) clamp(2.75rem, 5vw, 4rem);
}

body.blog .hero-section .entry-header,
body.archive .hero-section .entry-header,
body.single-post .hero-section .entry-header {
	max-width: 60rem;
	margin-inline: auto;
	padding: 0;
	text-align: left;
}

body.blog .hero-section .page-title,
body.archive .hero-section .page-title,
body.single-post .hero-section .page-title {
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	color: var(--on-dark);
	text-wrap: balance;
	margin: 0;
}

body.blog .hero-section .page-title,
body.archive .hero-section .page-title {
	font-size: clamp(2.6rem, 6vw, 4.2rem);
}

/* An article headline is a sentence, so it sets slightly smaller than a
   section title and is allowed a longer measure. */
body.single-post .hero-section .page-title {
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	line-height: 1.14;
	max-width: 22ch;
	max-width: min(100%, 26ch);
}

/* Breadcrumbs repeat what the menu already says. */
body.blog .ct-breadcrumbs,
body.archive .ct-breadcrumbs,
body.single-post .ct-breadcrumbs { display: none; }

/* The lede printed by the child theme under the archive title. */
.bs-blog-lede {
	max-width: 46rem;
	margin: 1.4rem 0 0;
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.6;
	color: var(--on-dark-2);
}

/* Post meta in the hero: date and author, quiet and monospaced. */
body.single-post .hero-section .entry-meta {
	margin: 1.5rem 0 0;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--on-dark-2);
}

body.single-post .hero-section .entry-meta a,
body.single-post .hero-section .entry-meta time { color: var(--on-dark-2); }
body.single-post .hero-section .entry-meta a:hover { color: var(--on-dark); }

/* The gravatar adds nothing at this size and pulls the eye off the headline. */
body.single-post .hero-section .entry-meta .ct-media-container-static { display: none; }

/* --------------------------------------------------------- the card grid */

body.blog [class*="entries"],
body.archive [class*="entries"] {
	--grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: 1.5rem;
}

body.blog .entry-card,
body.archive .entry-card {
	background: var(--paper);
	border: 1px solid var(--edge-light);
	border-radius: 18px;
	overflow: hidden;
	padding: 0 0 1.6rem;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.blog .entry-card:hover,
body.archive .entry-card:hover {
	transform: translateY(-3px);
	border-color: #C3D2F0;
	box-shadow: 0 18px 40px -28px rgba(6, 11, 36, .45);
}

body.blog .entry-card .ct-media-container,
body.archive .entry-card .ct-media-container {
	margin: 0 0 1.4rem;
	border-radius: 0;
}

body.blog .entry-card .entry-meta,
body.archive .entry-card .entry-meta {
	margin: 0 1.5rem .7rem;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--on-light-2);
}

body.blog .entry-card .entry-title,
body.archive .entry-card .entry-title {
	margin: 0 1.5rem .7rem;
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	font-size: 1.28rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

body.blog .entry-card .entry-title a,
body.archive .entry-card .entry-title a { color: var(--on-light); }

body.blog .entry-card .entry-excerpt,
body.archive .entry-card .entry-excerpt {
	margin: 0 1.5rem;
	font-size: .96rem;
	line-height: 1.6;
	color: var(--on-light-2);
}

/* ------------------------------------------------------------ the article */

body.single-post .ct-featured-image {
	max-width: 60rem;
	margin: clamp(2rem, 4vw, 3.25rem) auto 0;
	padding-inline: var(--gut);
}

body.single-post .ct-featured-image img {
	border-radius: 18px;
	border: 1px solid var(--edge-light);
}

body.single-post .entry-content {
	max-width: 40rem;
	margin-inline: auto;
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	font-size: 1.07rem;
	line-height: 1.75;
	color: #2A3352;
}

body.single-post .entry-content > p { margin: 0 0 1.5rem; }

/* The posts use h4 for their section headings; give them the weight the
   design system gives an h3 rather than leaving them smaller than body copy. */
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4 {
	margin: 2.9rem 0 .9rem;
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--on-light);
	text-wrap: balance;
}

body.single-post .entry-content h2 { font-size: 1.7rem; }
body.single-post .entry-content h3,
body.single-post .entry-content h4 { font-size: 1.32rem; }

body.single-post .entry-content > *:first-child { margin-top: 0; }

body.single-post .entry-content a {
	color: var(--brand-deep);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

body.single-post .entry-content a:hover { color: var(--brand); }

body.single-post .entry-content ul,
body.single-post .entry-content ol { margin: 0 0 1.5rem; padding-left: 1.25rem; }
body.single-post .entry-content li { margin-bottom: .5rem; }

body.single-post .entry-content strong { color: var(--on-light); }

/* The sidebar carried a second call to action that competed with the one at
   the end of the article. One ask per page reads better than two. */
body.single-post .ct-sidebar,
body.single-post aside[class*="sidebar"] { display: none; }

body.single-post .ct-container {
	grid-template-columns: 1fr;
	max-width: 100%;
}

/* ------------------------------------------------- call to action at the end */

.bs-post-cta {
	margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
	padding: clamp(2.75rem, 6vw, 4.5rem) var(--gut);
	background: var(--ink);
	color: var(--on-dark);
}

.bs-post-cta__wrap {
	max-width: 60rem;
	margin-inline: auto;
}

.bs-post-cta__eyebrow {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: .9rem;
}

.bs-post-cta__t {
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--on-dark);
	margin: 0 0 .9rem;
	text-wrap: balance;
}

.bs-post-cta__d {
	max-width: 44rem;
	margin: 0 0 1.9rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--on-dark-2);
}

.bs-post-cta__row { display: flex; flex-wrap: wrap; gap: .8rem; }

.bs-post-cta__btn {
	display: inline-flex;
	align-items: center;
	padding: .95rem 1.7rem;
	border-radius: 999px;
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: .98rem;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.bs-post-cta__btn--primary { background: var(--brand); color: #FFFFFF; }
.bs-post-cta__btn--primary:hover { background: var(--brand-deep); color: #FFFFFF; }

.bs-post-cta__btn--ghost {
	border: 1px solid rgba(255, 255, 255, .28);
	color: var(--on-dark);
}
.bs-post-cta__btn--ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }


/* ---------------------------------------------------------- full-bleed bands

   Blocksy renders these inside its content container, so a dark band would
   otherwise float as a rectangle with white either side. Everywhere else on
   the site a coloured section runs edge to edge; these do the same.
   ------------------------------------------------------------------------ */

body.blog .hero-section[data-type],
body.archive .hero-section[data-type],
body.single-post .hero-section[data-type],
.bs-post-cta,
body.single-post .ct-related-posts-container {
	/* 50% resolves against each band's own parent, so this lands on the
	   document edge whether the parent is the full-width main element or the
	   narrower content container the hero sits in. */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* The author name is derived from an email address and reads like a machine
   account. Date and category carry everything a reader needs. */
body.single-post .hero-section .entry-meta .meta-author { display: none; }

/* 100vw counts the scrollbar, so the bleed can push a page one scrollbar wide.
   The .bsx pages already clamp this; these need the same. */
body.blog,
body.archive,
body.single-post { overflow-x: hidden; }

/* --------------------------------------------------- related posts (theme)

   Blocksy renders its own related-posts block after the article. It carries
   the featured images, which read better than a text-only list, so it is
   restyled to match the cards on the blog index rather than replaced.
   ------------------------------------------------------------------------ */

body.single-post .ct-related-posts-container {
	background: var(--mist);
	padding: clamp(3rem, 6vw, 4.5rem) var(--gut);
}

body.single-post .ct-related-posts-container .ct-container {
	max-width: 60rem;
	margin-inline: auto;
	padding: 0;
}

body.single-post .ct-related-posts .ct-module-title {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--on-light-2);
	margin: 0 0 1.5rem;
}

.ct-related-posts [class*="ct-related-posts-items"],
.ct-related-posts .ct-related-posts-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.25rem;
}

.ct-related-posts article,
.ct-related-posts .ct-related-post {
	background: var(--paper);
	border: 1px solid var(--edge-light);
	border-radius: 16px;
	overflow: hidden;
	padding-bottom: 1.3rem;
	transition: transform .25s ease, border-color .25s ease;
}

.ct-related-posts article:hover,
.ct-related-posts .ct-related-post:hover {
	transform: translateY(-3px);
	border-color: #C3D2F0;
}

.ct-related-posts figure,
.ct-related-posts .ct-media-container { margin: 0 0 1.1rem; border-radius: 0; }

.ct-related-posts .related-entry-title,
.ct-related-posts h3:not(.ct-module-title) {
	margin: 0 1.3rem .5rem;
	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ct-related-posts .related-entry-title a,
.ct-related-posts h3:not(.ct-module-title) a { color: var(--on-light); }

.ct-related-posts time,
.ct-related-posts .entry-meta {
	display: block;
	margin: 0 1.3rem;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--on-light-2);
}

@media (prefers-reduced-motion: reduce) {
	.ct-related-posts article,
	.ct-related-posts .ct-related-post { transition: none; }
	.ct-related-posts article:hover,
	.ct-related-posts .ct-related-post:hover { transform: none; }
}

/* "Category Process Automation" reads like a database field. The lede right
   underneath already says what the page is. */
body.archive .hero-section .ct-title-label { display: none; }

/* The card grid ran edge to edge on a phone and sat a long way below the hero.
   Give it the same gutter and maximum width the rest of the site uses. */
body.blog .entries,
body.archive .entries {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--gut);
}

body.blog .ct-container,
body.archive .ct-container {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem);
}

/* Article text ran to the very edge of a phone screen. The max-width already
   holds the measure on a desktop; this adds the gutter below it. */
body.single-post .entry-content {
	box-sizing: content-box;
	padding-inline: var(--gut);
}