/* pages/blog.css
   The blog list and a single article, in both languages.

   The list reuses the product grid and the pager, and the article body reuses .prose, so
   this file is only what the blog adds: the card, the article header and byline, and the
   body copy. assets/editor.css gives the visual editor the same body styling, which is
   what makes the editor look like the page.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

/* ---------- the language link ---------- */
/* In the dark list header it is light; on an article it sits on white and is navy. */
.blog-switch {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-switch:hover,
.blog-switch:focus-visible { color: #fff; border-color: #fff; }

.blog-switch-dark { color: var(--navy); border-bottom-color: var(--line-2); }

.blog-switch-dark:hover,
.blog-switch-dark:focus-visible { color: var(--red); border-color: var(--red); }

/* ---------- the card ---------- */
/* Edgeless like the product card: a lift, no outline that changes colour. */
.blog-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #fff;
	transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card:hover,
.blog-card:focus-within { transform: translateY(-4px); }

.blog-card-media { display: block; overflow: hidden; }

.blog-card-media .tile-img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

.blog-card:hover .tile-img,
.blog-card:focus-within .tile-img { transform: scale(1.05); }

.blog-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 24px;
}

.blog-card-meta {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
}

.blog-card-title { font-size: 21px; font-weight: 700; line-height: 1.28; }

.blog-card-title a { color: var(--ink); transition: color 0.2s ease; }

.blog-card:hover .blog-card-title a,
.blog-card:focus-within .blog-card-title a,
.blog-card-title a:hover { color: var(--navy); }

.blog-card-excerpt {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ink-3);
	/* Three lines keeps every card in a row the same height whatever the summary. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card-more {
	margin-top: auto;
	padding-top: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue);
	transition: color 0.2s ease;
}

.blog-card-more:hover,
.blog-card-more:focus-visible { color: var(--red); }

/* A "view all" button sharing the line with a section heading. */
.rule-head .btn { flex: none; padding: 10px 18px; font-size: 12px; }

/* ---------- the article ---------- */
/* Room under the last thing in the article. What follows it varies - related products on
   a grey band, more articles, or the closing band - and none of them has padding of its
   own on that edge, so without this the author box ran straight into whichever came next. */
.post {
	padding-bottom: 88px;
	/* Where the site's own content edge is on this screen: the left of a .wrap, the same edge
	   the logo, breadcrumb and headings start from. The article's narrower boxes begin here
	   rather than being centred, which is what gave the page a ragged left edge. */
	--post-left: max(0px, calc((100% - var(--wrap)) / 2));
}

/* Narrower than the site's 1220px: a line of about 70 characters is what reads well. */
.post-narrow { max-width: calc(760px + var(--pad) * 2); margin-left: var(--post-left); margin-right: auto; }

/* The header is as wide as the cover photo under it, so the rule and the byline line run to
   the photo's edges; only the words stay in the narrow reading width. */
.post-head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: calc(1040px + var(--pad) * 2);
	padding-top: 56px;
	padding-bottom: 8px;
}

.post-head .post-title,
.post-head .post-dek { max-width: 760px; }

.post-title {
	font-weight: 900;
	font-size: 46px;
	line-height: 1.12;
	color: var(--ink);
	text-wrap: balance;
}

/* The excerpt, as the opening line under the title. */
.post-dek {
	margin: 0;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--ink-2);
	text-wrap: pretty;
}

.post-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: 6px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

/* The language link is top-aligned in the list header; beside the author it is centred on them. */
.post-meta-row .blog-switch { align-self: center; }

.post-by { display: flex; align-items: center; gap: 12px; }

/* The author's initial in a navy disc - there is no photo field, and a letter is better
   than a grey silhouette. */
.post-by-mark {
	flex: none;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 700;
}

.post-by-mark-lg { width: 56px; height: 56px; font-size: 24px; }

.post-by-text { display: flex; flex-direction: column; line-height: 1.35; }

.post-by-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }

.post-by-role { font-size: 12.5px; color: var(--mute); }

.post-cover { max-width: calc(1040px + var(--pad) * 2); margin: 34px auto 0 var(--post-left); }

/* The photo credit a licence may require. Small and quiet, under the photo. */
.post-cover-credit {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
	color: var(--mute);
}

.post-cover-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.post-cover-credit a:hover { color: var(--ink-2); }

.post-cover-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* The article copy. Mirrored in assets/editor.css - change one, change the other. */
.post-body { padding-top: 40px; font-size: 17.5px; line-height: 1.85; }

.post-body h2 { margin-top: 1.8em; font-size: 30px; line-height: 1.22; }

.post-body h3 { margin-top: 1.6em; font-family: Poppins, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.4; }

.post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.post-body a:hover { color: var(--red); }

.post-body img { max-width: 100%; height: auto; }

.post-body blockquote {
	margin: 1.7em 0;
	padding: 2px 0 2px 1.3em;
	border-left: 3px solid var(--red);
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.55;
	font-weight: 400;
	color: var(--ink);
}

.post-body hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }

/* A table that is wider than the column scrolls inside itself rather than pushing the
   whole page sideways. */
.post-body table { display: block; min-width: 0; overflow-x: auto; }

.post-body .wp-caption { max-width: 100%; }

.post-body .wp-caption-text,
.post-body figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--mute); }

.post-body .aligncenter { display: block; margin: 1.6em auto; }

.post-body .alignleft { float: left; margin: 0.3em 1.6em 1em 0; }

.post-body .alignright { float: right; margin: 0.3em 0 1em 1.6em; }

.post-body::after { content: ''; display: table; clear: both; }

.post-author {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 56px;
	padding: 22px 24px;
	border: 1px solid var(--line);
	background: var(--soft);
}

.post-author-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
}

.post-author-name { display: block; font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	.blog-card,
	.blog-card-media .tile-img,
	.blog-card-title a,
	.blog-switch { transition: none; }

	.blog-card:hover,
	.blog-card:focus-within,
	.blog-card:hover .tile-img,
	.blog-card:focus-within .tile-img { transform: none; }
}

@media (max-width: 980px) {
	.post { padding-bottom: 64px; }

	.post-head { padding-top: 40px; }

	.post-title { font-size: 38px; }

	.post-dek { font-size: 17.5px; }
}

@media (max-width: 680px) {
	.post-title { font-size: 30px; }

	.post-body { padding-top: 30px; font-size: 16.5px; }

	.post-body h2 { font-size: 25px; }

	.post-body blockquote { font-size: 18px; }

	/* Floated images squeeze a phone-width column to a few words a line. */
	.post-body .alignleft,
	.post-body .alignright { float: none; display: block; margin: 1.4em auto; }

	.post-author { flex-direction: column; align-items: flex-start; }
}