/* Important CSS for template-garage-blog */
#garage-blog-hero,
.garage-blog-hero {
	background-color: var(--color-10);
}

/* Header & See All Link */
.link-see-all {
	transition: color 0.2s ease;
}

.link-see-all:hover {
	color: var(--color-7) !important;
}

.arrow-icon {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.link-see-all:hover .arrow-icon {
	transform: translateX(4px);
}

/* Filter Tag Wrapper & Scroll Container */
.filter-tags-wrapper {
	position: relative;
	width: 100%;
}

.filter-tags-row {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	padding-top: 2px;
	padding-bottom: 8px;
}

.filter-tags-row::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.btn-filter-pill {
	padding: 10px 20px;
	border: 1px solid var(--color-7);
	border-radius: var(--radius-pill);
	background-color: transparent;
	color: var(--color-7);
	font-family: var(--font-family-1);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-filter-pill:hover,
.btn-filter-pill.active {
	background-color: var(--color-7);
	color: var(--color-6);
	border-color: var(--color-7);
}

@media (max-width: 992px) {
	.filter-tags-wrapper::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 8px;
		width: 36px;
		background: linear-gradient(90deg, rgba(255, 251, 245, 0) 0%, rgba(255, 251, 245, 0.95) 100%);
		pointer-events: none;
		z-index: var(--z-content);
	}

	.filter-tags-row {
		padding-right: 32px;
	}
}

.badge-category {
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-pill);
	background-color: rgba(0, 0, 0, 0.4);
	color: var(--color-6);
	font-family: var(--font-family-1);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
}

.btn-arrow-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	transition: background-color 0.2s ease;
}

.btn-arrow-circle .arrow-img,
.btn-arrow-circle img {
	width: 16px;
	height: 16px;
}

.btn-arrow-circle:hover,
.card-featured:hover .btn-arrow-circle,
.card-grid-item:hover .btn-arrow-circle {
	background-color: var(--color-7);
}

.blog-cards-grid .align-qb-wrap--grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 24px !important;
}

.blog-cards-grid .align-qb-item:first-child {
	grid-column: span 2 !important;
}

@media (max-width: 768px) {
	.blog-cards-grid .align-qb-wrap--grid {
		grid-template-columns: 1fr !important;
	}
	.blog-cards-grid .align-qb-item:first-child {
		grid-column: span 1 !important;
	}
}

.card-featured,
.card-grid-item,
.align-qb-card {
	width: 100%;
	height: 380px !important;
	border-radius: var(--radius-lg, 16px) !important;
	overflow: hidden !important;
	position: relative !important;
	background-color: var(--color-2, #1f1f1f) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: none !important;
}

.card-featured,
.blog-cards-grid .align-qb-item:first-child .align-qb-card {
	height: 460px !important;
}

.card-featured::after,
.card-grid-item::after,
.align-qb-card::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, 0.85) 100%) !important;
	z-index: 2 !important;
	pointer-events: none !important;
	border-radius: var(--radius-lg, 16px) !important;
}

/* Media / Image wrapper */
.card-featured .card-media,
.card-featured img,
.card-grid-item .card-media,
.card-grid-item img,
.align-qb-image-wrap,
.align-qb-image,
.align-qb-image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	z-index: 1 !important;
	border-radius: var(--radius-lg, 16px) !important;
	margin: 0 !important;
	aspect-ratio: auto !important;
}

/* Badge (Top-left of image - Featured card only) */
.card-featured .badge-featured,
.blog-cards-grid .align-qb-item:first-child .align-qb-badge-wrap {
	position: absolute !important;
	top: 24px !important;
	left: 24px !important;
	z-index: 10 !important;
	background-color: transparent !important;
	background: transparent !important;
	padding: 0 !important;
	border: none !important;
	width: auto !important;
	height: auto !important;
}

.blog-cards-grid .align-qb-item:first-child .align-qb-badge,
.card-featured .badge-featured a,
.badge-featured {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: var(--color-7, #AD1A24) !important; /* Engine Red */
	color: var(--color-6, #ffffff) !important;
	font-family: var(--font-family-1) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	padding: 10px 24px !important;
	border-radius: var(--radius-pill) !important;
	border: none !important;
	text-decoration: none !important;
	letter-spacing: 0.5px !important;
	line-height: 1 !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
}

/* Hide top-left badge for standard grid items */
.blog-cards-grid .align-qb-item:not(:first-child) .align-qb-badge-wrap {
	display: none !important;
}

/* Tags under image (rendered as category outline pill just above title) */
.card-grid-item .badge-category,
.badge-category,
.blog-cards-grid .align-qb-tags {
	margin-top: auto !important;
	padding: 0 24px !important;
	padding-right: 64px !important; /* Leave space for button */
	z-index: 3 !important;
	position: relative !important;
	background: transparent !important;
	display: inline-block !important;
	width: auto !important;
	flex-grow: 0 !important;
}

.blog-cards-grid .align-qb-item:first-child .align-qb-tags {
	padding: 0 32px !important;
	padding-right: 80px !important;
}

.card-grid-item .badge-category,
.badge-category,
.blog-cards-grid .align-qb-tag {
	display: inline-block !important;
	padding: 6px 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: var(--radius-pill) !important;
	background-color: rgba(0, 0, 0, 0.4) !important;
	color: var(--color-6, #ffffff) !important;
	font-family: var(--font-family-1) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	letter-spacing: 0.5px !important;
}

/* Card Content / Body overlay container */
.card-featured .card-overlay,
.card-grid-item .card-overlay,
.align-qb-content {
	background: transparent !important;
	padding: 24px !important;
	z-index: 3 !important;
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	gap: 0 24px !important;
	align-items: center !important;
	position: relative !important;
	inset: auto !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	flex-grow: 0 !important;
}

.card-featured .card-overlay,
.blog-cards-grid .align-qb-item:first-child .align-qb-content {
	padding: 32px !important;
	gap: 0 32px !important;
}

/* Card Grid Positioning */
.blog-cards-grid .align-qb-title-link {
	grid-column: 1 !important;
	grid-row: 1 !important;
	display: block !important;
}

/* Card titles */
.card-featured .card-title,
.card-grid-item .card-title,
.align-qb-title {
	color: var(--color-6, #ffffff) !important;
	font-family: var(--font-family-1) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important; /* Managed by grid row gaps / margin-top of excerpt */
	line-height: var(--lh-snug, 1.2) !important;
	text-transform: uppercase !important;
	transition: color 0.2s ease !important;
	display: block !important;
}

.card-featured .card-title,
.blog-cards-grid .align-qb-item:first-child .align-qb-title {
	font-size: 32px !important;
}

.card-featured a:hover .card-title,
.card-grid-item a:hover .card-title,
.align-qb-title-link:hover .align-qb-title {
	color: var(--color-6, #ffffff) !important;
	text-decoration: none !important;
	opacity: 0.9 !important;
}

/* Card Excerpt / Description */
.card-featured .card-excerpt,
.card-grid-item .card-excerpt,
.align-qb-content p,
.align-qb-excerpt {
	grid-column: 1 !important;
	grid-row: 2 !important;
	margin-top: 8px !important;
	margin-bottom: 0 !important;
	color: rgba(255, 255, 255, 0.8) !important;
	font-family: var(--font-family-2) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	max-width: 800px !important;
}

.card-featured .card-excerpt,
.blog-cards-grid .align-qb-item:first-child .align-qb-content p,
.blog-cards-grid .align-qb-item:first-child .align-qb-excerpt {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* Read More Button (Circular action arrow) */
.card-featured .btn-arrow-circle,
.card-grid-item .btn-arrow-circle,
.btn-arrow-circle,
.align-qb-readmore-wrap {
	grid-column: 2 !important;
	grid-row: 1 / span 2 !important;
	align-self: center !important;
	justify-self: end !important;
	position: relative !important;
	inset: auto !important;
	z-index: 4 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.align-qb-readmore-text {
	display: none !important;
}

.card-featured .btn-arrow-circle,
.card-grid-item .btn-arrow-circle,
.btn-arrow-circle,
.align-qb-readmore {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	color: var(--color-6, #ffffff) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
	padding: 0 !important;
	margin: 0 !important;
}

.card-featured .btn-arrow-circle,
.blog-cards-grid .align-qb-item:first-child .align-qb-readmore {
	width: 48px !important;
	height: 48px !important;
}

.card-featured:hover .btn-arrow-circle,
.card-grid-item:hover .btn-arrow-circle,
.align-qb-card:hover .align-qb-readmore {
	background-color: var(--color-7, #AD1A24) !important; /* Engine Red */
	border-color: var(--color-7, #AD1A24) !important;
}

.card-featured .btn-arrow-circle img,
.card-featured .btn-arrow-circle svg,
.card-grid-item .btn-arrow-circle img,
.card-grid-item .btn-arrow-circle svg,
.align-qb-icon--arrow {
	width: 14px !important;
	height: 14px !important;
	display: inline-block !important;
	stroke: var(--color-6, #ffffff) !important;
	stroke-width: 2.5 !important;
	transition: transform 0.2s ease !important;
	background: none !important;
	margin: 0 !important;
}

.card-featured .btn-arrow-circle svg,
.blog-cards-grid .align-qb-item:first-child .align-qb-icon--arrow {
	width: 16px !important;
	height: 16px !important;
}

@media (max-width: 992px) {
	.card-featured,
	.blog-cards-grid .align-qb-item:first-child .align-qb-card { height: 360px !important; }
	.card-grid-item,
	.align-qb-card { height: 340px !important; }
}

@media (max-width: 490px) {
	.btn-filter-pill { padding: 8px 14px; }
	.card-featured,
	.blog-cards-grid .align-qb-item:first-child .align-qb-card { height: 320px !important; }
	.card-grid-item,
	.align-qb-card { height: 320px !important; }
	.btn-arrow-circle,
	.align-qb-readmore { width: 36px !important; height: 36px !important; }
	.card-featured .btn-arrow-circle svg,
	.align-qb-icon--arrow { width: 12px !important; height: 12px !important; }
}

/* Section 2: Blog Spotlights */
#section-blog-spotlights,
.section-blog-spotlights {
	background-color: var(--color-10);
	isolation: isolate;
}

.spotlights-header {
	margin-bottom: var(--sp-md);
}

.spotlights-header .section-desc {
	max-width: 720px;
}

.spotlights-cards-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--sp-sm, 24px) !important;
}

.spotlights-cards-grid .align-qb-container {
	width: 100% !important;
	flex: 1 1 100% !important;
}

.spotlights-cards-grid .align-qb-wrap {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--sp-sm, 24px) !important;
	width: 100% !important;
}

@media (min-width: 992px) {
	.spotlights-cards-grid {
		flex-direction: row !important;
	}
	
	.spotlights-cards-grid .align-qb-wrap {
		flex-direction: row !important;
	}
	
	.spotlights-cards-grid .spotlight-card,
	.spotlights-cards-grid .align-qb-item {
		flex: 1 1 50% !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		transition: flex 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	}
}

@media (min-width: 1200px) {
	.spotlights-cards-grid:hover .spotlight-card:hover,
	.spotlights-cards-grid .align-qb-wrap:hover .align-qb-item:hover {
		flex: 7 7 70% !important;
	}
	
	.spotlights-cards-grid:hover .spotlight-card:not(:hover),
	.spotlights-cards-grid .align-qb-wrap:hover .align-qb-item:not(:hover) {
		flex: 3 3 30% !important;
	}
}

.spotlight-card,
.spotlights-cards-grid .align-qb-card {
	min-height: 480px !important;
	height: 480px !important;
	border-radius: var(--radius-lg, 16px) !important;
	overflow: hidden !important;
	position: relative !important;
	cursor: pointer !important;
}

@media (max-width: 992px) {
	.spotlight-card,
	.spotlights-cards-grid .align-qb-card {
		min-height: 400px !important;
		height: 400px !important;
	}
}

@media (max-width: 490px) {
	.spotlight-card,
	.spotlights-cards-grid .align-qb-card {
		min-height: 340px !important;
		height: 340px !important;
	}
}

.spotlight-card .card-media,
.spotlight-card img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	z-index: var(--z-behind, 0);
}

.spotlight-card .card-gradient-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, 0.85) 100%);
	z-index: var(--z-base);
	pointer-events: none;
}

.spotlight-card .card-content {
	z-index: var(--z-content);
	padding: 40px;
}

@media (max-width: 992px) {
	.spotlight-card .card-content { padding: 24px; }
}

.spotlight-card .badge-category {
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-pill);
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.spotlight-card .card-excerpt {
	color: rgba(255, 255, 255, 0.85);
}

.spotlight-card .btn-arrow-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background-color 0.2s ease;
}

.spotlight-card:hover .btn-arrow-circle {
	background-color: var(--color-7);
}

.align-qb-card--stacked .align-qb-image-link {
	height: 100%;
	aspect-ratio: unset;
}