/*
 * Blog: the archive grid and the reading experience.
 *
 * Before this, an archive item was a bare title, date and excerpt with no border,
 * no padding and no image - measured on /blog-job-management-tips/, `border: 0px`
 * and `padding: 0px` on every card - and a post was a title followed by content
 * with no date, no category and nothing at the end. Both are now built out of the
 * same card and type components as the rest of the site.
 *
 * Scoped to `.type-post` so the CPT grids, which have their own card treatment,
 * are untouched.
 */

/* --- Archive cards ------------------------------------------------------ */
.wp-block-post-template > li.type-post {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--card-line);
	border-radius: 15px;
	overflow: hidden;
	padding: 0;
	list-style: none;
	transition: transform .15s, box-shadow .15s;
}
.wp-block-post-template > li.type-post:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(9, 12, 76, .10);
}

.wp-block-post-template > li.type-post > :not(.wp-block-post-featured-image) {
	padding-inline: var(--wp--preset--spacing--60);
}
.wp-block-post-template > li.type-post > :first-child { margin-block-start: 0; }
.wp-block-post-template > li.type-post > :last-child {
	margin-block-end: var(--wp--preset--spacing--60);
}

.wp-block-post-template > li.type-post .wp-block-post-featured-image {
	margin: 0 0 var(--wp--preset--spacing--50);
}
.wp-block-post-template > li.type-post .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}

/*
 * Half the posts have no featured image, which left the grid ragged - some cards
 * starting with a photo, others with a line of text. A tinted band stands in, so
 * every card has the same silhouette. Decorative, so it carries no alt text and
 * no meaning.
 */
.wp-block-post-template > li.type-post:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	height: 6px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--accent) 0%,
		var(--wp--preset--color--accent-bright) 100%);
	margin-block-end: var(--wp--preset--spacing--60);
}

.wp-block-post-template > li.type-post .wp-block-post-date {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin-block-end: var(--wp--preset--spacing--30);
}
.wp-block-post-template > li.type-post .wp-block-post-title {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: 1.2;
}
.wp-block-post-template > li.type-post .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wp-block-post-template > li.type-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent-deep);
}
.wp-block-post-template > li.type-post .wp-block-post-excerpt {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-post-template > li.type-post .wp-block-post-excerpt__more-text { display: none; }

/* --- Post header -------------------------------------------------------- */
.wg-posthead .wg-h1 { margin-block-end: var(--wp--preset--spacing--50); }
.wg-postmeta {
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	color: #cfd6e8;
}
.wg-postmeta > * { margin: 0; }
.wg-postmeta .wp-block-post-terms a {
	display: inline-block;
	padding: .2rem .6rem;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	color: var(--wp--preset--color--accent-bright);
	text-decoration: none;
}
.wg-postmeta .wp-block-post-terms a:hover {
	background: rgba(255, 255, 255, .1);
}

/* --- The post itself ---------------------------------------------------- */
/*
 * Reading measure and vertical rhythm. Post content is authored in the editor by
 * whoever is writing, so this styles the blocks they will actually reach for
 * rather than expecting them to apply classes.
 */
.wg-prose > * { margin-block: 0 var(--wp--preset--spacing--50); }
.wg-prose > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--80);
	margin-block-end: var(--wp--preset--spacing--40);
}
.wg-prose > h2 { font-size: var(--wp--preset--font-size--heading-md); }
.wg-prose > h3 {
	font-size: var(--wp--preset--font-size--heading-sm);
	color: var(--wp--preset--color--accent-deep);
}
.wg-prose > p { line-height: 1.65; }
.wg-prose > ul,
.wg-prose > ol { padding-left: 1.25rem; line-height: 1.6; }
.wg-prose > ul li,
.wg-prose > ol li { margin-block-end: .4rem; }
.wg-prose > .wp-block-separator {
	margin-block: var(--wp--preset--spacing--80);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--card-line);
	max-width: none;
}
.wg-prose > blockquote {
	margin-inline: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border-radius: 0 10px 10px 0;
}
.wg-prose > blockquote p:last-child { margin-block-end: 0; }
.wg-prose > figure img { border-radius: 10px; }
.wg-prose > .wp-block-image { margin-block: var(--wp--preset--spacing--70); }
.wg-prose a { color: var(--wp--preset--color--accent-deep); }
.wg-prose > table { font-size: var(--wp--preset--font-size--small); }

/* --- Related posts row -------------------------------------------------- */
.wg-postcard-date {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin-block-end: var(--wp--preset--spacing--30);
}
.wg-morefrom .wg-cards { margin-block-start: var(--wp--preset--spacing--70); }

@media (max-width: 767px) {
	.wg-postmeta { gap: var(--wp--preset--spacing--40); }
}