/*
 * Blogs page v2 (migration 0206). Markup from contrive-blog-index.php,
 * loaded only on pages carrying the crv-blog marker. Scoped under
 * .crv-blog-index; colours match assets/contact-page.css.
 *
 * Image frames are square because every post's card image is square
 * (_contrive_card_image), so they fill with object-fit: cover. A wide
 * image (a pipeline post with only its 1200x630-style featured image)
 * gets .crv-blog-img--whole and is shown whole, since cropping it cuts off
 * the text baked into it. In the featured card a wide image instead gets a
 * frame shaped like itself (.crv-blog-featured--wide, below).
 */

.crv-blog {
	padding: 0 !important;
}

.crv-blog > .elementor-container {
	max-width: 1200px;
	padding: 0 16px;
}

.crv-blog-index {
	--crv-gold: #f4a840;
	--crv-gold-hi: #ffbd5c;
	--crv-card: #202124;
	--crv-media: #141517;
	--crv-line: #2f3034;
	--crv-field: #2a2b2f;
	--crv-text: #e6e6e6;
	--crv-muted: #a3a5aa;
	padding: 64px 0 80px;
	color: var(--crv-text);
	font-family: "Open Sans", sans-serif;
}

.crv-blog-index *,
.crv-blog-index *::before,
.crv-blog-index *::after {
	box-sizing: border-box;
}

.crv-blog-index [hidden] {
	display: none !important;
}

.crv-blog-index p,
.crv-blog-index h2,
.crv-blog-index h3 {
	margin: 0;
	text-align: left;
}

.crv-blog-index a {
	text-decoration: none;
}

.crv-blog-index .crv-blog-eyebrow {
	color: var(--crv-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Intro */

.crv-blog-intro {
	max-width: 760px;
	margin-bottom: 48px;
}

.crv-blog-index .crv-blog-title {
	margin-top: 14px;
	color: #fff !important; /* theme: .entry-content h2/h3 { color: #F4A840 !important } */
	font-family: Dosis, sans-serif;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.1;
	text-transform: none;
}

.crv-blog-index .crv-blog-title span {
	display: block;
	margin-top: 6px;
	color: var(--crv-gold);
	font-size: 0.62em;
	line-height: 1.25;
}

.crv-blog-index .crv-blog-lede {
	margin-top: 20px;
	color: var(--crv-muted);
	font-size: 17px;
	line-height: 1.65;
}

.crv-blog-index .crv-blog-lede strong {
	color: var(--crv-text);
	font-weight: 600;
}

/* Shared bits */

.crv-blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	color: var(--crv-muted);
	font-size: 13px;
	line-height: 1.4;
}

.crv-blog-meta > time + span::before,
.crv-blog-meta > .crv-blog-tag + span::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 10px 2px 0;
	border-radius: 50%;
	background: #5b5d62;
	vertical-align: middle;
}

.crv-blog-meta > .crv-blog-tag + time::before {
	content: none;
}

.crv-blog-tag {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid rgba(244, 168, 64, 0.35);
	border-radius: 999px;
	background: rgba(244, 168, 64, 0.1);
	color: var(--crv-gold);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.crv-blog-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(244, 168, 64, 0.12), transparent 60%),
		var(--crv-media);
}

.crv-blog-index .crv-blog-media img {
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.crv-blog-index .crv-blog-media img.crv-blog-img--whole {
	object-fit: contain;
}

.crv-blog-index .crv-blog-media img.crv-blog-img--left {
	object-position: left center;
}

.crv-blog-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 24px;
	background:
		radial-gradient(90% 120% at 0% 100%, rgba(244, 168, 64, 0.28), transparent 55%),
		linear-gradient(135deg, #24252a, #141517);
}

.crv-blog-placeholder span {
	color: var(--crv-gold);
	font-family: Dosis, sans-serif;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
}

.crv-blog-index .crv-blog-excerpt {
	color: var(--crv-muted);
	font-size: 15px;
	line-height: 1.6;
}

.crv-blog-index .crv-blog-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border: 1px solid var(--crv-gold);
	border-radius: 8px;
	background: var(--crv-gold);
	color: #18191b !important;
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.crv-blog-index .crv-blog-btn:hover,
.crv-blog-index .crv-blog-btn:focus-visible {
	background: var(--crv-gold-hi);
	border-color: var(--crv-gold-hi);
}

.crv-blog-index .crv-blog-btn--ghost {
	background: transparent;
	color: var(--crv-gold) !important;
}

.crv-blog-index .crv-blog-btn--ghost:hover,
.crv-blog-index .crv-blog-btn--ghost:focus-visible {
	background: var(--crv-gold);
	color: #18191b !important;
}

.crv-blog-index .crv-blog-btn svg {
	transition: transform 0.2s ease;
}

.crv-blog-index .crv-blog-btn:hover svg {
	transform: translateX(3px);
}

/* Featured */

.crv-blog-featured {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	align-items: center;
	overflow: hidden;
	margin-bottom: 56px;
	border: 1px solid var(--crv-line);
	border-radius: 16px;
	background: var(--crv-card);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.crv-blog-featured .crv-blog-media {
	align-self: stretch;
}

/*
 * Wide featured image (contrive-blog-index.php adds the class and sets
 * --crv-media-ratio to the image's width / height): the frame drops the
 * square ratio and takes the row's height, the image column grows so the
 * picture's natural height is close to the text column, and the image
 * covers the frame, so the whole illustration fills the box with no bands.
 */
.crv-blog-featured--wide {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.crv-blog-featured--wide .crv-blog-media {
	aspect-ratio: auto;
}

.crv-blog-index .crv-blog-featured--wide .crv-blog-media img.crv-blog-img--whole {
	object-fit: cover;
}

/* Side by side, the text must stay shorter than the picture or the picture
   gets cropped to the row; the excerpt is what tips it over, so it is left
   out here and comes back once the card stacks. */
.crv-blog-featured--wide .crv-blog-excerpt {
	display: none;
}

/* Below desktop the text column is taller than the picture, so stack: the
   frame takes the image's own shape and the text goes underneath. */
@media (max-width: 1199px) {
	.crv-blog-featured--wide {
		grid-template-columns: minmax(0, 1fr);
	}

	.crv-blog-featured--wide .crv-blog-media {
		aspect-ratio: var(--crv-media-ratio, 16 / 9);
	}

	.crv-blog-featured--wide .crv-blog-excerpt {
		display: block;
	}
}

.crv-blog-featured-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 40px;
}

.crv-blog-index .crv-blog-featured-title {
	color: #fff !important;
	font-family: Dosis, sans-serif;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.crv-blog-index .crv-blog-featured-title a,
.crv-blog-index .crv-blog-card-title a {
	color: inherit !important;
	transition: color 0.2s ease;
}

.crv-blog-index .crv-blog-featured-title a:hover,
.crv-blog-index .crv-blog-featured-title a:focus-visible {
	color: var(--crv-gold) !important;
}

.crv-blog-index .crv-blog-byline {
	color: var(--crv-text);
	font-size: 14px;
	font-weight: 600;
}

.crv-blog-featured .crv-blog-btn {
	margin-top: 8px;
}

.crv-blog-featured:hover .crv-blog-media img,
.crv-blog-card:hover .crv-blog-media img {
	transform: scale(1.03);
}

/* Toolbar */

.crv-blog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--crv-line);
}

.crv-blog-chips {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.crv-blog-index .crv-blog-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--crv-line);
	border-radius: 999px;
	background: var(--crv-card);
	color: var(--crv-text);
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.crv-blog-index .crv-blog-chip span {
	color: var(--crv-muted);
	font-size: 12px;
	font-weight: 700;
}

.crv-blog-index .crv-blog-chip:hover,
.crv-blog-index .crv-blog-chip:focus-visible {
	border-color: var(--crv-gold);
}

.crv-blog-index .crv-blog-chip[aria-pressed="true"] {
	border-color: var(--crv-gold);
	background: var(--crv-gold);
	color: #18191b;
}

.crv-blog-index .crv-blog-chip[aria-pressed="true"] span {
	color: rgba(24, 25, 27, 0.7);
}

.crv-blog-tools {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
}

.crv-blog-search {
	position: relative;
	display: block;
	margin: 0;
}

.crv-blog-search svg {
	position: absolute;
	top: 50%;
	left: 14px;
	color: var(--crv-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.crv-blog-index .crv-blog-search input,
.crv-blog-index .crv-blog-sort select {
	height: 44px;
	margin: 0;
	border: 1px solid var(--crv-line);
	border-radius: 8px;
	background-color: var(--crv-field);
	color: var(--crv-text);
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 42px;
	text-transform: none;
	box-shadow: none;
}

.crv-blog-index .crv-blog-search input {
	width: 220px;
	padding: 0 14px 0 42px;
}

.crv-blog-index .crv-blog-search input::placeholder {
	color: var(--crv-muted);
	opacity: 1;
}

.crv-blog-sort {
	margin: 0;
}

.crv-blog-index .crv-blog-sort select {
	width: auto;
	min-width: 150px;
	padding: 0 36px 0 14px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a5aa' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 16px;
	cursor: pointer;
}

/* theme app.js wraps every <select> in div.select.btn-light with its own border and arrow */
.crv-blog-index .crv-blog-sort .select {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent !important; /* theme: .btn-light background is gold */
	box-shadow: none;
}

.crv-blog-index .crv-blog-sort .select::before,
.crv-blog-index .crv-blog-sort .select::after {
	content: none;
	display: none;
}

.crv-blog-index .crv-blog-search input:focus,
.crv-blog-index .crv-blog-sort select:focus {
	border-color: var(--crv-gold);
	outline: none;
}

.crv-blog-index .crv-blog-status {
	flex-basis: 100%;
	color: var(--crv-muted);
	font-size: 14px;
}

.crv-blog-index .crv-blog-status:empty {
	display: none;
}

/* Grid */

.crv-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.crv-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--crv-line);
	border-radius: 14px;
	background: var(--crv-card);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.crv-blog-card:hover,
.crv-blog-card:focus-within {
	border-color: rgba(244, 168, 64, 0.55);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
	transform: translateY(-4px);
}

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

.crv-blog-index .crv-blog-card-title {
	color: #fff !important;
	font-family: Dosis, sans-serif;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

/* Whole card is the link target; the image link is aria-hidden + tabindex -1 */
.crv-blog-index .crv-blog-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.crv-blog-card:hover .crv-blog-card-title a,
.crv-blog-index .crv-blog-card-title a:focus-visible {
	color: var(--crv-gold) !important;
}

.crv-blog-index .crv-blog-card-title a:focus-visible {
	outline: none;
}

.crv-blog-card:focus-within {
	outline: 2px solid var(--crv-gold);
	outline-offset: 2px;
}

.crv-blog-card .crv-blog-excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.crv-blog-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--crv-line);
	color: var(--crv-muted);
	font-size: 13px;
}

.crv-blog-read {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--crv-gold);
	font-weight: 700;
}

.crv-blog-read svg {
	transition: transform 0.2s ease;
}

.crv-blog-card:hover .crv-blog-read svg {
	transform: translateX(3px);
}

.crv-blog-empty,
.crv-blog-more {
	margin-top: 40px;
	text-align: center;
}

.crv-blog-index .crv-blog-empty p {
	margin-bottom: 16px;
	color: var(--crv-muted);
	font-size: 16px;
	text-align: center;
}

/* Contact strip */

.crv-blog-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: 72px;
	padding: 40px 44px;
	border: 1px solid rgba(244, 168, 64, 0.35);
	border-radius: 16px;
	background:
		radial-gradient(80% 140% at 100% 0%, rgba(244, 168, 64, 0.16), transparent 60%),
		var(--crv-card);
}

.crv-blog-index .crv-blog-cta-title {
	margin-top: 8px;
	color: #fff !important;
	font-family: Dosis, sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.crv-blog-index .crv-blog-cta-text {
	margin-top: 8px;
	color: var(--crv-muted);
	font-size: 16px;
	line-height: 1.6;
}

.crv-blog-cta .crv-blog-btn {
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.crv-blog-index *,
	.crv-blog-index *::before,
	.crv-blog-index *::after {
		transition: none !important;
	}
}

/* Tablet */

@media (max-width: 1199px) {
	.crv-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 991px) {
	.crv-blog-index {
		padding: 48px 0 64px;
	}

	.crv-blog-index .crv-blog-title {
		font-size: 40px;
	}

	.crv-blog-featured {
		grid-template-columns: minmax(0, 1fr);
	}

	.crv-blog-featured-body {
		padding: 28px;
	}

	.crv-blog-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 32px 28px;
	}
}

/* Mobile */

@media (max-width: 767px) {
	.crv-blog-index {
		padding: 36px 0 48px;
	}

	.crv-blog-intro {
		margin-bottom: 32px;
	}

	/* the row wraps on phones; a dot left at the start of a line looks stray */
	.crv-blog-meta > time + span::before,
	.crv-blog-meta > .crv-blog-tag + span::before {
		content: none;
	}

	.crv-blog-index .crv-blog-title {
		font-size: 32px;
	}

	.crv-blog-index .crv-blog-lede {
		font-size: 16px;
	}

	.crv-blog-featured {
		margin-bottom: 40px;
	}

	.crv-blog-featured-body {
		padding: 22px;
	}

	.crv-blog-index .crv-blog-featured-title {
		font-size: 25px;
	}

	.crv-blog-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 -16px;
		padding: 2px 16px 6px;
		scrollbar-width: none;
	}

	.crv-blog-chips::-webkit-scrollbar {
		display: none;
	}

	.crv-blog-index .crv-blog-chip {
		flex-shrink: 0;
	}

	.crv-blog-tools {
		flex-direction: column;
		width: 100%;
	}

	.crv-blog-index .crv-blog-search input,
	.crv-blog-sort,
	.crv-blog-index .crv-blog-sort select {
		width: 100%;
	}

	.crv-blog-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.crv-blog-cta {
		margin-top: 48px;
		padding: 28px 22px;
	}

	.crv-blog-index .crv-blog-cta-title {
		font-size: 25px;
	}
}