/*
 * The blog's public pages. It is loaded on top of the site's own site.css and uses nothing but the
 * tokens declared there (--fs-*, --s-*, Harbour colours, Inter), so the blog reads as part of the
 * site and no new type sizes or one-off spacings are introduced.
 *
 * Fallbacks after every var() are for the module running on a site without those tokens
 * (Apps/blog/view/layouts/site.php + standalone.css).
 */

.page-blog main { background: var(--white, #fff); }

/* ----------------------------------------------------------- the section chips */
/* Same language as the product page's jump bar (.p-jump in site.css), sitting below the page
   head rather than under the site header, so the blog adds no second header bar. */
.bl-nav {
	display: flex;
	align-items: center;
	gap: var(--s-2, 8px);
	flex-wrap: wrap;
	padding-bottom: var(--s-6, 48px);
}
.bl-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--line, #dbe3ed);
	border-radius: 999px;
	background: var(--white, #fff);
	font-size: var(--fs-small, 13.5px);
	font-weight: 600;
	color: var(--ink, #0b2440);
	text-decoration: none;
	white-space: nowrap;
}
.bl-nav__link svg { flex: none; color: var(--accent, #1a5fa3); }
.bl-nav__link:hover { border-color: var(--ink, #0b2440); }
.bl-nav__link.is-on { background: var(--ink, #0b2440); border-color: var(--ink, #0b2440); color: var(--white, #fff); }
.bl-nav__link.is-on svg { color: var(--on-dark, #9ec5ec); }

/* ----------------------------------------------------------- the lists */
/* The spacing follows the site's own: --s-8 around a section, --s-7 for a page head,
   --s-6 from a head to what it introduces. The blog should breathe like the rest of the site. */
.bl-main { padding-bottom: var(--s-8, 96px); }
.bl-main > .bl-card--big { margin-bottom: var(--s-5, 32px); }   /* the lead post sits above the grid */

.bl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--s-5, 32px);
}

/* ----------------------------------------------------------- a post card */
.bl-card {
	border: 1px solid var(--line, #dbe3ed);
	border-radius: var(--r-lg, 12px);
	background: var(--white, #fff);
	overflow: hidden;
	transition: box-shadow .16s ease, border-color .16s ease;
}
.bl-card:hover { box-shadow: var(--shadow, 0 2px 6px rgba(11, 36, 64, .08)); }
.bl-card__link { display: block; text-decoration: none; color: inherit; height: 100%; }
/* A cover is either artwork (plain) or a screenshot of the ERP, which prints in the site's own
   screenshot frame, as /product and /area print one. */
.bl-card__shot { display: block; aspect-ratio: 16 / 9; background: var(--paper-2, #eaf0f7); border-bottom: 1px solid var(--line, #dbe3ed); }
.bl-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* The bar is .h-browser__bar--sm from site.css, so its colours live in one place. The picture
   takes whatever height the bar leaves — no magic number to drift out of step with it. */
.bl-card__shot--screen { aspect-ratio: 16 / 10; background: var(--white, #fff); display: flex; flex-direction: column; }
.bl-card__shot--screen img { flex: 1; min-height: 0; height: auto; object-position: top center; }
.bl-card__body { display: block; padding: var(--s-4, 24px) var(--s-4, 24px) var(--s-5, 32px); }
.bl-card__sec {
	display: block;
	font-size: var(--fs-label, 12.5px);
	letter-spacing: var(--ls-label, .08em);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent, #1a5fa3);
	margin-bottom: var(--s-2, 8px);
}
.bl-card__title {
	display: block;
	font-size: var(--fs-lg, 20px);
	line-height: var(--lh-sub, 1.3);
	letter-spacing: var(--ls-sub, -.005em);
	font-weight: 600;
	color: var(--ink, #0b2440);
	margin-bottom: var(--s-3, 16px);
}
.bl-card__link:hover .bl-card__title { color: var(--accent-ink, #0e4f8f); }
.bl-card__excerpt {
	display: block;
	font-size: var(--fs-ui, 15px);
	line-height: var(--lh-ui, 1.5);
	color: var(--muted, #5b6878);
	margin-bottom: var(--s-3, 16px);
}
.bl-card__meta { display: block; font-size: var(--fs-small, 13.5px); color: var(--muted, #5b6878); }

/* the lead post: full width wherever it lands */
.bl-grid > .bl-card--big { grid-column: 1 / -1; }
@media (min-width: 820px) {
	.bl-card--big .bl-card__link { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
	.bl-card--big .bl-card__shot { aspect-ratio: 16 / 10; height: auto; align-self: center; border-bottom: 0; border-right: 1px solid var(--line, #dbe3ed); }
	.bl-card--big .bl-card__shot img { height: auto; object-fit: contain; }
	.bl-card--big .bl-card__shot--screen img { height: auto; }
	.bl-card--big .bl-card__body { padding: var(--s-6, 48px) var(--s-6, 48px) var(--s-6, 48px) var(--s-5, 32px); align-self: center; }
	.bl-card--big .bl-card__title { font-size: var(--fs-h2, 30px); line-height: var(--lh-h2, 1.18); letter-spacing: var(--ls-head, -.02em); font-weight: 700; }
	.bl-card--big .bl-card__excerpt { font-size: var(--fs-body, 17px); line-height: var(--lh-body, 1.6); }
}

/* ----------------------------------------------------------- the head of a list page */
.bl-hero { padding: var(--s-7, 64px) 0 var(--s-6, 48px); }   /* the site's own .hero--page */
.bl-hero__inner { max-width: 820px; }   /* the site's own .wrap--narrow */
.bl-crumb { font-size: var(--fs-small, 13.5px); color: var(--muted, #5b6878); margin: 0 0 var(--s-3, 16px); }
.bl-crumb a { color: var(--accent, #1a5fa3); text-decoration: none; }
.bl-crumb a:hover { text-decoration: underline; }
.bl-hero h1 {
	font-size: var(--fs-h1, 36px);
	line-height: var(--lh-h1, 1.12);
	letter-spacing: var(--ls-head, -.02em);
	margin: 0 0 var(--s-3, 16px);
	color: var(--ink, #0b2440);
}
/* The page sub is the site's own .hero__sub, used by class rather than copied — one 600px measure,
   one colour, one line-height, one margin, so a blog head sets out exactly like every other page
   head. There is deliberately no rule for it here. css/standalone.css carries it for the
   no-theme case. */
.bl-hero__intro { font-size: var(--fs-body, 17px); line-height: var(--lh-body, 1.6); color: var(--text, #3a4756); margin: 0; max-width: var(--wrap-text, 760px); }
.bl-hero__back { font-size: var(--fs-ui, 15px); margin: var(--s-4, 24px) 0 0; }
.bl-hero__back a { color: var(--accent, #1a5fa3); }

/* ----------------------------------------------------------- one post */
.bl-post { display: block; }
/* The reading column. Named for the blog rather than reusing the site's .wrap--narrow,
   so the blog's stylesheet never redefines one of the site's own utilities. */
.bl-read { max-width: var(--wrap-text, 760px); margin: 0 auto; padding: 0 var(--gutter, 24px); }
.bl-post__head { padding: var(--s-7, 64px) 0 var(--s-5, 32px); }
.bl-post__head h1 {
	font-size: var(--fs-h1, 36px);
	line-height: var(--lh-h1, 1.12);
	letter-spacing: var(--ls-head, -.02em);
	margin: 0 0 var(--s-4, 24px);
	color: var(--ink, #0b2440);
}
.bl-post__standfirst { font-size: var(--fs-lg, 20px); line-height: 1.55; color: var(--text, #3a4756); margin: 0 0 var(--s-4, 24px); }
.bl-post__meta { font-size: var(--fs-small, 13.5px); color: var(--muted, #5b6878); margin: 0; }
.bl-post__by { color: var(--text, #3a4756); font-weight: 600; }
/* 21:9, so the cover introduces the article instead of filling the first screen. */
.bl-post__cover { margin: 0 auto var(--s-6, 48px); }
.bl-post__cover > img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	height: auto;
	border-radius: var(--r-lg, 12px);
	border: 1px solid var(--line, #dbe3ed);
	display: block;
	background: var(--paper-2, #eaf0f7);
}
/* An eyebrow that links to its section must not pick up the site's link underline. */
a.eyebrow { text-decoration: none; }
a.eyebrow:hover { color: var(--accent-ink, #0e4f8f); }

.bl-post__cover .h-browser { display: block; margin: 0 auto; }
.bl-post__cover .h-browser__bar { display: flex; }

/* the article body: the only place long-form type is set */
.bl-post__body { font-size: var(--fs-body, 17px); line-height: var(--lh-body, 1.6); color: var(--text, #3a4756); padding-bottom: var(--s-7, 64px); }
.bl-post__body > * { margin: 0 0 var(--s-4, 24px); }
.bl-post__body h2 {
	font-size: var(--fs-h2, 30px);
	line-height: var(--lh-h2, 1.18);
	letter-spacing: var(--ls-head, -.02em);
	color: var(--ink, #0b2440);
	margin: var(--s-6, 48px) 0 var(--s-3, 16px);
}
.bl-post__body h3 { font-size: var(--fs-lg, 20px); line-height: var(--lh-sub, 1.3); font-weight: 600; color: var(--ink, #0b2440); margin: var(--s-5, 32px) 0 var(--s-2, 8px); }
.bl-post__body h4 { font-size: var(--fs-body, 17px); font-weight: 600; color: var(--ink, #0b2440); margin: var(--s-4, 24px) 0 var(--s-2, 8px); }
.bl-post__body ul, .bl-post__body ol { padding-left: var(--s-4, 24px); }
.bl-post__body li { margin: 0 0 var(--s-2, 8px); }
.bl-post__body a { color: var(--accent, #1a5fa3); text-underline-offset: 2px; }
.bl-post__body strong { color: var(--ink, #0b2440); font-weight: 600; }
.bl-post__body img { max-width: 100%; height: auto; border-radius: var(--r, 8px); display: block; }
/* A picture inside the article, as the editor writes it. */
.bl-post__body figure { margin: var(--s-5, 32px) 0; }
.bl-post__body figure img { width: 100%; height: auto; border-radius: var(--r, 8px); border: 1px solid var(--line, #dbe3ed); background: var(--paper-2, #eaf0f7); }
.bl-post__body figcaption { font-size: var(--fs-small, 13.5px); line-height: var(--lh-ui, 1.5); color: var(--muted, #5b6878); margin-top: var(--s-2, 8px); }
.bl-post__body blockquote {
	border-left: 3px solid var(--navy, #2176c9);
	padding: var(--s-1, 4px) 0 var(--s-1, 4px) var(--s-3, 16px);
	margin-left: 0;
	color: var(--muted, #5b6878);
}
.bl-post__body pre {
	background: var(--paper, #f4f7fb);
	border: 1px solid var(--line-soft, #e8edf4);
	border-radius: var(--r, 8px);
	padding: var(--s-3, 16px);
	overflow-x: auto;
	font-family: var(--mono, monospace);
	font-size: var(--fs-small, 13.5px);
	line-height: var(--lh-ui, 1.5);
}
.bl-post__body code { font-family: var(--mono, monospace); font-size: .92em; }
.bl-post__body :not(pre) > code { background: var(--paper, #f4f7fb); border-radius: 4px; padding: 1px 5px; }
.bl-post__body table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui, 15px); }
.bl-post__body th, .bl-post__body td { border: 1px solid var(--line, #dbe3ed); padding: var(--s-2, 8px) var(--s-2, 8px); text-align: left; vertical-align: top; }
.bl-post__body th { background: var(--paper, #f4f7fb); color: var(--ink, #0b2440); font-weight: 600; }
.bl-post__body hr { border: 0; border-top: 1px solid var(--line, #dbe3ed); margin: var(--s-5, 32px) 0; }

.bl-post__author {
	display: flex;
	flex-direction: column;
	gap: var(--s-1, 4px);
	border-top: 1px solid var(--line, #dbe3ed);
	padding: var(--s-5, 32px) 0 var(--s-6, 48px);
	margin: 0;
}
.bl-post__author strong { font-size: var(--fs-ui, 15px); font-weight: 600; color: var(--ink, #0b2440); }
.bl-post__author span { font-size: var(--fs-small, 13.5px); color: var(--muted, #5b6878); }

/* padding-top/bottom only: `padding: x 0` on an element that is also .wrap wipes its gutter,
   and the row then sits 24px out of line with the page (and edge to edge on a phone). */
.bl-more { padding-top: var(--s-6, 48px); padding-bottom: var(--s-8, 96px); border-top: 1px solid var(--line, #dbe3ed); }
.bl-more h2 {
	font-size: var(--fs-h2, 30px);
	line-height: var(--lh-h2, 1.18);
	letter-spacing: var(--ls-head, -.02em);
	color: var(--ink, #0b2440);
	margin: 0 0 var(--s-6, 48px);
}
.bl-more .bl-nav { margin-top: var(--s-7, 64px); padding-bottom: 0; }

/* ----------------------------------------------------------- pages, feed link, empty state */
.bl-pager { display: flex; align-items: center; gap: var(--s-2, 8px); flex-wrap: wrap; margin: 0; }
.bl-pager__step, .bl-pager__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--s-3, 16px);
	border: 1px solid var(--line, #dbe3ed);
	border-radius: var(--r, 8px);
	font-size: var(--fs-ui, 15px);
	color: var(--text, #3a4756);
	text-decoration: none;
}
.bl-pager__step:hover, .bl-pager__num:hover { background: var(--paper, #f4f7fb); }
.bl-pager__num.is-on { background: var(--navy, #2176c9); border-color: var(--navy, #2176c9); color: #fff; font-weight: 600; }

/* The pager and the feed link share one row, instead of the feed line being an orphan. */
.bl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4, 24px); flex-wrap: wrap; margin-top: var(--s-6, 48px); }
.bl-foot:empty { display: none; }
.bl-feed { margin: 0; font-size: var(--fs-small, 13.5px); color: var(--muted, #5b6878); }
.bl-feed a { color: var(--accent, #1a5fa3); }

.bl-none {
	border: 1px dashed var(--line, #dbe3ed);
	border-radius: var(--r-lg, 12px);
	padding: var(--s-8, 96px) var(--s-4, 24px);
	text-align: center;
	font-size: var(--fs-body, 17px);
	color: var(--muted, #5b6878);
	margin: 0 0 var(--s-6, 48px);
}

@media (max-width: 640px) {
	.bl-hero { padding: var(--s-6, 48px) 0 var(--s-5, 32px); }
	.bl-post__head { padding: var(--s-6, 48px) 0 var(--s-4, 24px); }
	.bl-main { padding-bottom: var(--s-7, 64px); }
	.bl-grid { gap: var(--s-4, 24px); }
	.bl-nav { padding-bottom: var(--s-5, 32px); }
	.bl-more { padding-top: var(--s-6, 48px); padding-bottom: var(--s-7, 64px); }
	.bl-more h2 { margin-bottom: var(--s-5, 32px); }
	.bl-more .bl-nav { margin-top: var(--s-6, 48px); }
	.bl-post__cover > img { aspect-ratio: 16 / 9; }
	.bl-foot { margin-top: var(--s-5, 32px); }
}