/* Blog (posts page, single post, category/tag/date archives). Built from core blocks like the case studies:
   the hero reuses .cs-hero (case-studies.css), the body uses the About page's container, and the card grid
   matches the case study cards. Post content is typed in the editor with no classes, so its typography is set
   here on .blog-content. Loaded on the site and in the editor. */

/* ---- Hero title when there is no featured image (posts page / archives) ---- */
.blog-hero--plain { height: 30vw; padding-top: 16vw; }
@media screen and (min-width: 1440px) { .blog-hero--plain { height: 430px; padding-top: 230px; } }
@media screen and (max-width: 991px)  { .blog-hero--plain { height: 40vw; padding-top: 24vw; } }
@media screen and (max-width: 767px)  { .blog-hero--plain { height: 50vw; padding-top: 32vw; } }
@media screen and (max-width: 479px)  { .blog-hero--plain { height: 80vw; padding-top: 56vw; } }

/* Single post hero: post titles are long and sit over a photo, so darken the lower half and size the title down. */
.blog-hero::before { background-image: linear-gradient(180deg, #000, transparent 35%), linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2) 65%); }
.blog-hero .h1-heading---about-us { max-width: 80%; font-size: 3.2vw; line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
@media screen and (min-width: 1440px) { .blog-hero .h1-heading---about-us { font-size: 46px; } }
@media screen and (max-width: 991px)  { .blog-hero .h1-heading---about-us { max-width: 90%; font-size: 4.2vw; } }
@media screen and (max-width: 767px)  { .blog-hero .h1-heading---about-us { font-size: 5vw; } }
@media screen and (max-width: 479px)  { .blog-hero .h1-heading---about-us { font-size: 6.6vw; } }

/* ---- Single post ---- */
/* Keep lines to a readable length inside the wide About container. */
.blog-article { max-width: 60vw; margin-left: auto; margin-right: auto; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6vw; margin-bottom: 2vw; color: var(--brand-colour-4); font-size: 1.1vw; font-weight: 600; text-transform: uppercase; }
.blog-meta .wp-block-post-date, .blog-meta .wp-block-post-terms { margin: 0; }
.blog-meta a { color: inherit; text-decoration: none; }

.blog-content { color: var(--black); font-size: 1.2vw; font-weight: 500; line-height: 1.6; }
.blog-content > * { margin-top: 0; }
.blog-content p { margin-bottom: 1.5vw; }
.blog-content h2 { margin: 3vw 0 1vw; color: var(--footer-blue); font-size: 2vw; font-weight: 600; line-height: 1.25; }
.blog-content h3 { margin: 2vw 0 .6vw; color: var(--brand-colour-4); font-size: 1.45vw; font-weight: 600; line-height: 1.3; }
.blog-content h4 { margin: 1.6vw 0 .5vw; color: var(--footer-blue); font-size: 1.25vw; font-weight: 600; line-height: 1.3; }
.blog-content ul, .blog-content ol { margin: 0 0 1.5vw; padding-left: 1.6em; }
.blog-content li { margin-bottom: .6vw; }
.blog-content li::marker { color: var(--brand-colour-4); }
.blog-content a { color: var(--brand-colour-4); text-decoration: underline; text-underline-offset: .15em; }
.blog-content a:hover { color: var(--brand-colour-6); }
.blog-content strong { font-weight: 700; }
.blog-content figure, .blog-content .wp-block-image { display: block; margin: 2vw 0; }
.blog-content img { max-width: 100%; height: auto; display: block; }
.blog-content figcaption { margin-top: .5vw; color: var(--rgb-100); font-size: .95vw; }
.blog-content blockquote { margin: 2vw 0; padding: .5vw 0 .5vw 1.6vw; border-left: 4px solid var(--brand-colour-4); font-style: italic; }
.blog-content blockquote p:last-child { margin-bottom: 0; }

.blog-back { margin-top: 3vw; padding-top: 2vw; border-top: 1px solid var(--rgb-220); }
.blog-back p { margin: 0; }
.blog-back a { color: var(--brand-colour-4); font-weight: 600; text-decoration: none; }

/* ---- Posts page / archives: card grid ---- */
.blog-grid.wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; list-style: none; margin: 0; padding: 0; }
.blog-card { display: flex; flex-direction: column; height: 100%; text-align: left; }
.blog-card .wp-block-post-featured-image { margin: 0 0 1vw; overflow: hidden; }
.blog-card .wp-block-post-featured-image img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .3s ease; }
.blog-card .wp-block-post-featured-image a:hover img { transform: scale(1.03); }
.blog-card .wp-block-post-date { margin: 0 0 .4vw; font-size: 1vw; font-weight: 600; text-transform: uppercase; color: var(--brand-colour-4); }
.blog-card .wp-block-post-title { margin: 0 0 .5vw; font-size: 1.5vw; font-weight: 600; line-height: 1.2; }
.blog-card .wp-block-post-title a { color: var(--footer-blue); text-decoration: none; }
.blog-card .wp-block-post-title a:hover { color: var(--brand-colour-4); }
.blog-card .wp-block-post-excerpt { margin: 0; font-size: 1.1vw; font-weight: 500; line-height: 1.5; color: var(--black); }
.blog-card .wp-block-post-excerpt__excerpt { margin: 0 0 .8vw; }
.blog-card .wp-block-post-excerpt__more-text { margin: 0; }
.blog-card .wp-block-post-excerpt__more-link { color: var(--brand-colour-4); font-weight: 600; text-decoration: none; }
.blog-pagination { margin-top: 3vw; gap: .8vw; font-weight: 600; }
.blog-pagination a, .blog-pagination span { color: var(--footer-blue); text-decoration: none; }
.blog-pagination .current { color: var(--brand-colour-4); }

/* ---- Large screens: fixed sizes, as the rest of the site does above 1440px ---- */
@media screen and (min-width: 1440px) {
	.blog-article { max-width: 860px; }
	.blog-meta { gap: 9px; margin-bottom: 30px; font-size: 15px; }
	.blog-content { font-size: 17px; }
	.blog-content p { margin-bottom: 22px; }
	.blog-content h2 { margin: 44px 0 14px; font-size: 29px; }
	.blog-content h3 { margin: 30px 0 9px; font-size: 21px; }
	.blog-content h4 { margin: 24px 0 8px; font-size: 18px; }
	.blog-content ul, .blog-content ol { margin-bottom: 22px; }
	.blog-content li { margin-bottom: 9px; }
	.blog-content figure, .blog-content .wp-block-image { margin: 30px 0; }
	.blog-content figcaption { font-size: 14px; }
	.blog-content blockquote { margin: 30px 0; padding: 6px 0 6px 22px; }
	.blog-back { margin-top: 44px; padding-top: 28px; }
	.blog-grid.wp-block-post-template { gap: 28px; }
	.blog-card .wp-block-post-featured-image { margin-bottom: 14px; }
	.blog-card .wp-block-post-date { font-size: 14px; }
	.blog-card .wp-block-post-title { font-size: 22px; }
	.blog-card .wp-block-post-excerpt { font-size: 16px; }
	.blog-pagination { margin-top: 44px; }
}

/* ---- Tablet ---- */
@media screen and (max-width: 991px) {
	.blog-article { max-width: none; }
	.blog-meta { gap: 1vw; margin-bottom: 3vw; font-size: 1.6vw; }
	.blog-content { font-size: 1.8vw; }
	.blog-content p { margin-bottom: 2.4vw; }
	.blog-content h2 { margin: 4.5vw 0 1.5vw; font-size: 3vw; }
	.blog-content h3 { margin: 3vw 0 1vw; font-size: 2.3vw; }
	.blog-content h4 { font-size: 2vw; }
	.blog-content li { margin-bottom: 1vw; }
	.blog-content figcaption { font-size: 1.5vw; }
	.blog-grid.wp-block-post-template { grid-template-columns: repeat(2, 1fr); gap: 3vw; }
	.blog-card .wp-block-post-date { font-size: 1.5vw; }
	.blog-card .wp-block-post-title { font-size: 2.4vw; }
	.blog-card .wp-block-post-excerpt { font-size: 1.7vw; }
}

/* ---- Phone ---- */
@media screen and (max-width: 479px) {
	.blog-meta { gap: 2vw; margin-bottom: 5vw; font-size: 3vw; }
	.blog-content { font-size: 3.8vw; }
	.blog-content p { margin-bottom: 4.5vw; }
	.blog-content h2 { margin: 8vw 0 3vw; font-size: 5.6vw; }
	.blog-content h3 { margin: 6vw 0 2vw; font-size: 4.6vw; }
	.blog-content h4 { font-size: 4.2vw; }
	.blog-content li { margin-bottom: 2vw; }
	.blog-content figcaption { font-size: 3vw; }
	.blog-back { margin-top: 8vw; padding-top: 5vw; }
	.blog-grid.wp-block-post-template { grid-template-columns: 1fr; gap: 8vw; }
	.blog-card .wp-block-post-featured-image { margin-bottom: 3vw; }
	.blog-card .wp-block-post-date { margin-bottom: 1.5vw; font-size: 3vw; }
	.blog-card .wp-block-post-title { margin-bottom: 2vw; font-size: 5vw; }
	.blog-card .wp-block-post-excerpt { font-size: 3.6vw; }
	.blog-pagination { margin-top: 8vw; gap: 3vw; }
}