/**
 * Archive: Blog
 *
 * Featured post card, Jazzy AJAX feed with filters.
 * Hero and CTA are rendered as modules (CSS in css/modules/).
 */

/*
 * ====================================================================== *
 * Featured Post
 * ====================================================================== *
 */

.blog-archive-featured {
	padding-bottom: var(--module-spacing-small);
}

.blog-archive-featured-card {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr 1fr;
}

.blog-archive-featured-card .media {
	aspect-ratio: 4 / 3;
	border-radius: 16px;
}

.blog-archive-featured-content {
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

.blog-archive-featured-content .pill {
	align-self: flex-start;
}

.blog-archive-featured-content .heading-4 {
	margin: 0;
}

.blog-archive-featured-content p {
	margin: 0;
}

/*
 * ====================================================================== *
 * Feed
 * ====================================================================== *
 */

.blog-archive-feed-wrapper {
	background: var(--russian-blue);
	overflow-x: clip;
	position: relative;
}

.blog-archive-feed-wrapper::before {
	background: var(--pitty-off-white);
	content: '';
	height: 400px;
	left: 0;
	position: absolute;
	top: -1px;
	width: 100%;
	z-index: 0;
}

.blog-archive-curve {
	color: var(--russian-blue);
	font-size: 0;
	left: 0;
	line-height: 0;
	position: absolute;
	top: 400px;
	transform: translateY(-100%);
	width: 100%;
	z-index: 0;
}

.blog-archive-curve svg {
	display: block;
	height: auto;
	width: 100%;
}

.blog-archive-feed {
	padding: var(--text-spacing-large) 0 var(--module-spacing-large);
	position: relative;
	z-index: 1;
}

.blog-archive-feed .card.card-post {
	background: var(--samoyed-white);
}

.blog-archive-feed .card.card-post .pill {
	background: var(--collie-blue);
	color: var(--russian-blue);
	margin-top: var(--text-spacing-xxsmall);
	position: static;
}

.blog-archive-feed .blog-results-count {
	color: rgba(255, 255, 255, 0.5);
}

.blog-archive-feed-wrapper + .module.cta {
	margin-top: 0;
}

.back-link + .module.hero.centered {
	padding-top: var(--text-spacing-large);
}

.module.hero.centered:has(+ .blog-archive-featured) .heading-1,
.module.hero.centered:has(+ .blog-archive-feed-wrapper) .heading-1 {
	font-size: calc(86rem / 16);
	line-height: calc(72 / 86);
}

.module.hero.centered:has(+ .blog-archive-featured) .heading-1 u::after,
.module.hero.centered:has(+ .blog-archive-feed-wrapper) .heading-1 u::after {
	height: 10px;
	rotate: -1deg;
	top: calc(100% + 6px);
	width: calc(100% + 32px);
}

/* Card hover — text shifts up, arrow slides right */

.blog-archive-feed .card.card-post .large-text,
.blog-archive-feed .card.card-post .date,
.blog-archive-feed .card.card-post .xsmall-text {
	transition: transform .3s ease;
}

.blog-archive-feed .card.card-post .large-text {
	color: var(--russian-blue);
	margin-top: calc(-1 * var(--text-spacing-xxsmall));
}

.blog-archive-feed .card.card-post .date {
	display: block;
	margin-top: calc(-1 * var(--text-spacing-xsmall));
}

.blog-archive-feed .card.card-post .btn.text-arrow::after {
	transition: transform .3s ease;
}

.blog-archive-feed a.card.card-post:hover .large-text,
.blog-archive-feed a.card.card-post:hover .date,
.blog-archive-feed a.card.card-post:hover .xsmall-text {
	transform: translateY(-8px);
}

.blog-archive-feed a.card.card-post:hover .btn.text-arrow::after {
	transform: translateX(2px);
}

/*
 * ====================================================================== *
 * Filter Bar
 * ====================================================================== *
 */

.blog-filter-bar {
	align-items: center;
	column-gap: var(--text-spacing-xsmall);
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--text-spacing-medium);
}

/*** Category Tabs — layout only; pill styling comes from global .pill-nav ***/

.blog-filter-tabs {
	margin-right: auto;
}

/*** Location + Search ***/

.blog-filter-controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall);
}

.blog-filter-search {
	display: flex;
	position: relative;
}

.blog-filter-search input {
	min-width: 200px;
	padding-right: var(--text-spacing-xlarge);
}

.blog-filter-search .btn.icon {
	position: absolute;
	right: var(--text-spacing-xxsmall);
	top: 50%;
	transform: translateY(-50%);
}

.blog-results-bar {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-top: var(--text-spacing-medium);
}

.blog-results-count {
	color: var(--grayhound);
	font-size: calc(14rem / 16);
	margin: 0;
}

.blog-results-count:has([jx-form-results-count]:empty) {
	opacity: 0;
}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.module.hero.centered:has(+ .blog-archive-featured) .heading-1,
	.module.hero.centered:has(+ .blog-archive-feed-wrapper) .heading-1 {
		font-size: calc(72rem / 16);
		line-height: calc(64 / 72);
	}

	.blog-archive-featured-card {
		grid-template-columns: 1fr;
	}

	.blog-filter-bar {
		align-items: center;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.blog-filter-tabs {
		justify-content: center;
		margin-right: 0;
	}

	.blog-filter-controls {
		flex-wrap: nowrap;
		width: 100%;
	}

	.blog-filter-select,
	.blog-filter-search {
		flex: 1 1 0;
		min-width: 0;
	}

	.blog-filter-search {
		margin-left: 0;
	}

	.blog-filter-select select {
		width: 100%;
	}

	.blog-filter-search input {
		flex: 1;
		min-width: auto;
		width: 100%;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	.module.hero.centered:has(+ .blog-archive-featured) .heading-1,
	.module.hero.centered:has(+ .blog-archive-feed-wrapper) .heading-1 {
		font-size: calc(56rem / 16);
		line-height: calc(52 / 56);
	}

	.blog-archive-featured-card .media {
		border-radius: 8px;
	}

	.blog-filter-controls {
		flex-direction: column;
	}

	.blog-filter-select,
	.blog-filter-search {
		flex: none;
		width: 100%;
	}

	.blog-archive-feed-wrapper + .module.cta.image-cta.background-image {
		margin-top: 64px;
	}

}