/* ==========================================================================
   Character Art Blog
   The blog index and the post archives, in the ArtSketch visual language.
   Palette and type deliberately match cas-artsketch/assets/artsketch.css so the
   two sections read as parts of the same publication; the class prefix differs
   (cb- rather than as-) so an edit to one cannot restyle the other.
   ========================================================================== */

.cb-feature,
.cb-grid,
.cb-head,
.cb-archive,
.cb-chips,
.cb-wordmark,
.cb-jump,
.cb-empty {
	--cb-navy: #1C244B;
	--cb-accent: #467FF7;
	--cb-accent-dark: #2F66DB;
	--cb-text: #324A6D;
	--cb-muted: #4F6484;
	--cb-soft: #F9FAFD;
	--cb-hairline: #E4EAF4;
	--cb-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------- shared */

.cb-tag {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: #EEF3FE;
	color: var(--cb-accent-dark);
	font: 600 11.5px/1.6 var(--cb-sans);
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.cb-btn {
	display: inline-block;
	align-self: flex-start;
	padding: 17px 32px;
	border-radius: 10px;
	background: var(--cb-accent);
	color: #fff;
	font: 600 15.5px/1.2 var(--cb-sans);
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.cb-btn:hover,
.cb-btn:focus {
	background: var(--cb-accent-dark);
	transform: translateY(-1px);
}

/* The Elementor global kit sets `.elementor-kit-11 a { color: #3C3C3C }` — one class
   plus one element, which outranks a plain `.cb-btn` and turned every button label
   dark grey. Doubling the class outranks it back without !important, and without
   depending on which stylesheet the browser loaded last. */
.cb-btn.cb-btn,
.cb-btn.cb-btn:hover,
.cb-btn.cb-btn:focus {
	color: #fff;
}

.cb-btn--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .3);
}

.cb-btn--ghost:hover,
.cb-btn--ghost:focus {
	background: rgba(255, 255, 255, .1);
}

.cb-empty {
	margin: 0;
	padding: 26px 0;
	font: 400 16px/1.6 var(--cb-sans);
	color: var(--cb-muted);
}

/* ------------------------------------------------------------------ masthead */

/* Two weights of one typeface standing in for a drawn wordmark: "Character"
   light, "Art Blog" heavy, the way the ArtSketch lockup pairs its script and its
   block letters. */
.cb-wordmark {
	display: block;
	font-family: var(--cb-sans);
	line-height: 1.05;
	letter-spacing: -1.5px;
	color: #fff;
}

.cb-wordmark__light {
	font-weight: 200;
}

.cb-wordmark__bold {
	font-weight: 700;
}

.cb-stat-line {
	font: 400 12px/1.6 var(--cb-sans);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #8EA0C6;
}

/* --------------------------------------------------------------------- chips */

.cb-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.cb-chips a {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--cb-hairline);
	border-radius: 999px;
	background: #fff;
	color: var(--cb-navy);
	font: 600 13px/1 var(--cb-sans);
	text-decoration: none;
	transition: all .2s ease;
}

.cb-chips a:hover,
.cb-chips a.is-active {
	background: var(--cb-navy);
	border-color: var(--cb-navy);
}

/* Same kit rule again — these only tie with it on specificity, so pin them. */
.cb-chips a.cb-chips-link,
.cb-chips a:not(.is-active) {
	color: var(--cb-navy);
}

.cb-chips a.is-active,
.cb-chips a:hover {
	color: #fff;
}

/* A section title with a link opposite it. `.cb-head` on its own is the layout,
   shared by the Elementor-built heads on the hub page (where the heading widget
   carries its own typography and stays editable in the builder) and by
   `.cb-head--auto`, the one the shortcodes draw for themselves. */
.cb-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	scroll-margin-top: 110px;
}

.cb-head > .e-con {
	width: auto;
}

.cb-head > .e-con:first-child {
	flex: 1 1 auto;
}

.cb-head > .e-con:last-child {
	flex: 0 0 auto;
}

.cb-head--auto {
	margin: 0 0 34px;
}

/* The Elementor kit styles headings at a size meant for hero copy, on a selector
   specific enough to beat a bare element rule — so match its weight here. */
.cb-head--auto h2 {
	margin: 0;
	font: 600 32px/1.15 var(--cb-sans) !important;
	color: var(--cb-navy);
	letter-spacing: normal;
}

.cb-head--auto a {
	color: var(--cb-accent-dark);
	font: 600 15px/1.4 var(--cb-sans);
	text-decoration: none;
	white-space: nowrap;
}

.cb-head--auto a:hover {
	color: var(--cb-accent);
}

/* The jump link opposite an Elementor-built section heading. */
.cb-jump {
	font: 600 15px/1.4 var(--cb-sans);
	text-decoration: none;
	white-space: nowrap;
}

/* Same kit rule, same fix — see .cb-btn above. */
.cb-jump.cb-jump {
	color: var(--cb-accent-dark);
}

.cb-jump.cb-jump:hover {
	color: var(--cb-accent);
}

/* A row of Elementor columns that should sit side by side and centred rather than
   stretch to fill — the CTA's two buttons. */
.cb-inline {
	flex-wrap: wrap;
}

.cb-inline > .e-con {
	width: auto;
	flex: 0 0 auto;
}

/* ----------------------------------------------------------- featured card */

.cb-feature {
	position: relative;
	z-index: 3;
	display: flex;
	overflow: hidden;
	/* Lifts the card up into the hero band, the way the ArtSketch featured card
	   sits over its masthead. */
	margin-top: -74px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 34px 70px rgba(14, 19, 48, .20);
}

.cb-feature__art {
	position: relative;
	flex: 0 0 50%;
	align-self: stretch;
	min-height: 460px;
	display: block;
	line-height: 0;
	background: #F4F6FB;
}

/* Absolutely positioned rather than given a height: the card is as tall as
   whichever column wins, and a fixed height leaves a white strip under the art
   whenever that column is the copy. */
.cb-feature__art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.cb-feature__body {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 17px;
	padding: 46px;
}

.cb-feature__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cb-feature__flag {
	font: 600 11.5px/1.6 var(--cb-sans);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cb-muted);
}

/* Poppins, like every other piece of type on the blog. ArtSketch sets this headline
   in Lora because the serif is its reading face and runs right through the interview
   pages; on the blog nothing else is serif, so one Lora headline read as a mistake
   rather than as a choice. */
.cb-feature__title {
	margin: 0;
	font: 600 38px/1.25 var(--cb-sans) !important;
	color: var(--cb-navy);
	letter-spacing: normal;
}

.cb-feature__title a {
	color: inherit;
	text-decoration: none;
}

.cb-feature__title a:hover {
	color: var(--cb-accent-dark);
}

.cb-feature__dek {
	margin: 0;
	font: 300 16.5px/1.7 var(--cb-sans);
	color: var(--cb-text);
}

.cb-byline {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	font: 400 13.5px/1.5 var(--cb-sans);
	color: var(--cb-muted);
}

.cb-byline strong {
	color: var(--cb-navy);
	font-weight: 600;
	font-size: 14px;
}

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

.cb-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
}

.cb-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1 1 300px;
	max-width: calc(33.333% - 18px);
	padding: 18px 18px 26px;
	border: 1px solid var(--cb-hairline);
	border-radius: 18px;
	background: #fff;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease;
}

.cb-card:hover,
.cb-card:focus {
	transform: translateY(-6px);
	box-shadow: 0 26px 50px rgba(20, 26, 55, .14);
}

.cb-card__thumb {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	line-height: 0;
	background: #F4F6FB;
}

.cb-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}

.cb-card:hover .cb-card__thumb img {
	transform: scale(1.05);
}

.cb-card .cb-tag {
	align-self: flex-start;
}

.cb-card__title {
	font: 600 21px/1.35 var(--cb-sans);
	color: var(--cb-navy);
}

.cb-card__excerpt {
	flex: 1 1 auto;
	font: 300 15px/1.65 var(--cb-sans);
	color: var(--cb-muted);
}

.cb-card__meta {
	font: 400 12.5px/1.6 var(--cb-sans);
	color: var(--cb-muted);
}

/* ------------------------------------------------------------ archive list */

.cb-archive {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cb-archive li {
	border-top: 1px solid var(--cb-hairline);
}

.cb-archive li:last-child {
	border-bottom: 1px solid var(--cb-hairline);
}

.cb-archive a {
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 22px 6px;
	text-decoration: none;
	transition: background .25s ease, padding .25s ease;
}

.cb-archive a:hover {
	background: var(--cb-soft);
	padding-left: 16px;
}

.cb-archive .t {
	flex: 1 1 auto;
	font: 600 19px/1.4 var(--cb-sans);
	color: var(--cb-navy);
}

.cb-archive a:hover .t {
	color: var(--cb-accent-dark);
}

.cb-archive .d {
	flex: 0 0 176px;
	font: 400 14px/1.5 var(--cb-sans);
	color: var(--cb-text);
}

.cb-archive .r {
	flex: 0 0 104px;
	font: 400 13px/1.6 var(--cb-sans);
	color: var(--cb-muted);
}

.cb-archive .dt {
	flex: 0 0 76px;
	text-align: right;
	font: 400 13px/1.6 var(--cb-sans);
	color: var(--cb-muted);
}

/* The archive band has nothing to list until the blog outgrows the featured card
   plus the grid, and an Elementor container with an empty shortcode in it still
   takes its margins — so collapse the whole band rather than leave a gap above
   the footer. Browsers without :has() simply see that gap, which is what the
   page did before anyway. */
.cb-band-archive:not(:has(.cb-archive)) {
	display: none;
}

/* Same for the chip band: [cas_blog_categories] draws nothing while the blog only
   uses one category, and a lone eyebrow over empty space is worse than no band. */
.cb-band-chips:not(:has(.cb-chips)) {
	display: none;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.cb-feature {
		flex-direction: column;
		margin-top: -60px;
	}

	/* Stacked, the art sits above the copy and needs a height of its own. */
	.cb-feature__art {
		position: static;
		min-height: 0;
	}

	.cb-feature__art img {
		position: static;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.cb-feature__body {
		padding: 32px 28px 34px;
	}

	.cb-feature__title {
		font-size: 31px !important;
	}

	.cb-head--auto h2 {
		font-size: 27px !important;
	}

	.cb-card {
		max-width: calc(50% - 13px);
	}
}

@media (max-width: 880px) {
	.cb-archive a {
		flex-wrap: wrap;
		gap: 4px 16px;
		padding: 18px 6px;
	}

	.cb-archive .t {
		flex: 1 0 100%;
		order: 1;
		font-size: 17px;
	}

	.cb-archive .d,
	.cb-archive .r,
	.cb-archive .dt {
		flex: 0 0 auto;
		order: 2;
		text-align: left;
	}
}

@media (max-width: 767px) {
	.cb-feature {
		margin-top: -40px;
		border-radius: 14px;
	}

	.cb-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 26px;
	}

	.cb-card {
		flex-basis: 100%;
		max-width: 100%;
	}

	/* The category chip and the flag together are a few pixels wider than a phone,
	   and letting them break mid-label reads as broken. Wrap the row instead. */
	.cb-feature__top {
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.cb-tag,
	.cb-feature__flag {
		white-space: nowrap;
	}
}