/**
 * Carxis Article Search Results
 *
 * Styles the Article-only search result section.
 *
 * @package CarxisToolkit
 * @since   1.0.0
 */


/* ==========================================================
   01. Search Results Section
========================================================== */

.carxis-article-search-results {
	background: #ffffff;
}


/* ==========================================================
   02. Results Grid
========================================================== */

.carxis-article-search-results__grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 22px;

	width: 100%;
}


/* ==========================================================
   03. Result Card
========================================================== */

.carxis-article-search-card {
	display: flex;
	flex-direction: column;

	min-width: 0;
	height: 100%;

	overflow: hidden;

	background: #ffffff;

	border: 1px solid #e5e7eb;
	border-radius: 14px;

	box-shadow:
		0 6px 20px rgba(16, 24, 40, 0.05);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.carxis-article-search-card:hover {
	border-color: rgba(215, 25, 32, 0.16);

	box-shadow:
		0 10px 28px rgba(16, 24, 40, 0.09);

	transform: translateY(-2px);
}


/* ==========================================================
   04. Card Image
========================================================== */

.carxis-article-search-card__image {
	display: block;

	width: 100%;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	background: #f3f4f6;
}

.carxis-article-search-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition:
		transform 0.3s ease;
}

.carxis-article-search-card:hover
.carxis-article-search-card__image img {
	transform: scale(1.025);
}


/* ==========================================================
   05. Image Placeholder
========================================================== */

.carxis-article-search-card__placeholder {
	display: block;

	width: 100%;
	height: 100%;

	background:
		linear-gradient(
			135deg,
			#f5f5f6 0%,
			#ededee 100%
		);
}


/* ==========================================================
   06. Card Content
========================================================== */

.carxis-article-search-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;

	padding: 17px;
}


/* ==========================================================
   07. Category
========================================================== */

.carxis-article-search-card__category {
	display: block;

	margin-bottom: 7px;

	color: #d71920;

	font-size: 10px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}


/* ==========================================================
   08. Title
========================================================== */

.carxis-article-search-card__title {
	display: -webkit-box;

	margin: 0 0 9px;

	overflow: hidden;

	color: #202124;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.carxis-article-search-card__title a {
	color: inherit;

	text-decoration: none;

	transition:
		color 0.2s ease;
}

.carxis-article-search-card__title a:hover,
.carxis-article-search-card__title a:focus-visible {
	color: #d71920;
}


/* ==========================================================
   09. Excerpt
========================================================== */

.carxis-article-search-card__excerpt {
	display: -webkit-box;

	margin: 0 0 14px;

	overflow: hidden;

	color: #6f7378;

	font-size: 13px;
	line-height: 1.6;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}


/* ==========================================================
   10. Meta
========================================================== */

.carxis-article-search-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 12px;

	margin-top: auto;
	padding-top: 12px;

	border-top: 1px solid #eeeeef;
}

.carxis-article-search-card__meta span {
	color: #8a8d91;

	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
}

.carxis-article-search-card__meta a {
	color: #d71920;

	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;

	transition:
		color 0.2s ease;
}

.carxis-article-search-card__meta a:hover,
.carxis-article-search-card__meta a:focus-visible {
	color: #b51218;
}


/* ==========================================================
   11. Pagination
========================================================== */

.carxis-article-search-results__pagination {
	display: flex;
	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 14px;

	margin-top: 34px;
}

.carxis-article-search-results__pagination-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;

	padding: 9px 16px;

	color: #d71920;
	background: #ffffff;

	border: 1px solid #d71920;
	border-radius: 9px;

	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;

	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}

.carxis-article-search-results__pagination-link:hover {
	color: #ffffff;
	background: #d71920;

	transform: translateY(-1px);
}

.carxis-article-search-results__pagination-link:focus-visible {
	outline: 3px solid rgba(215, 25, 32, 0.18);
	outline-offset: 2px;
}

.carxis-article-search-results__pagination-status {
	color: #6f7378;

	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}


/* ==========================================================
   12. Empty State
========================================================== */

.carxis-article-search-results__empty {
	max-width: 680px;

	margin: 0 auto;

	padding: 34px 28px;

	background: #f7f7f8;

	border: 1px solid #e5e7eb;
	border-radius: 14px;

	text-align: center;
}

.carxis-article-search-results__empty h3 {
	margin: 0;

	color: #202124;

	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.carxis-article-search-results__empty p {
	max-width: 560px;

	margin: 10px auto 0;

	color: #6f7378;

	font-size: 14px;
	line-height: 1.65;
}

.carxis-article-search-results__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 44px;

	margin-top: 18px;
	padding: 10px 18px;

	color: #ffffff;
	background: #d71920;

	border: 1px solid #d71920;
	border-radius: 9px;

	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.carxis-article-search-results__reset:hover {
	color: #ffffff;
	background: #b51218;
	border-color: #b51218;

	transform: translateY(-1px);
}

.carxis-article-search-results__reset:focus-visible {
	outline: 3px solid rgba(215, 25, 32, 0.18);
	outline-offset: 2px;
}


/* ==========================================================
   13. Tablet
========================================================== */

@media (max-width: 991px) {

	.carxis-article-search-results__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 18px;
	}

}


/* ==========================================================
   14. Mobile
========================================================== */

@media (max-width: 767px) {

	.carxis-article-search-results__grid {
		grid-template-columns: 1fr;

		gap: 16px;
	}

	.carxis-article-search-card {
		display: grid;

		grid-template-columns:
			132px minmax(0, 1fr);

		align-items: stretch;
	}

	.carxis-article-search-card__image {
		height: 100%;

		aspect-ratio: auto;
	}

	.carxis-article-search-card__content {
		padding: 14px;
	}

	.carxis-article-search-card__category {
		margin-bottom: 5px;

		font-size: 9px;
	}

	.carxis-article-search-card__title {
		margin-bottom: 7px;

		font-size: 15px;

		-webkit-line-clamp: 2;
	}

	.carxis-article-search-card__excerpt {
		margin-bottom: 10px;

		font-size: 12px;
		line-height: 1.5;

		-webkit-line-clamp: 2;
	}

	.carxis-article-search-card__meta {
		gap: 8px;

		padding-top: 9px;
	}

	.carxis-article-search-card__meta span,
	.carxis-article-search-card__meta a {
		font-size: 10px;
	}

	.carxis-article-search-results__pagination {
		margin-top: 26px;
	}

	.carxis-article-search-results__empty {
		padding: 28px 20px;
	}

}


/* ==========================================================
   15. Small Mobile
========================================================== */

@media (max-width: 479px) {

	.carxis-article-search-card {
		grid-template-columns:
			112px minmax(0, 1fr);
	}

	.carxis-article-search-card__content {
		padding: 12px;
	}

	.carxis-article-search-card__title {
		font-size: 14px;
		line-height: 1.35;
	}

	.carxis-article-search-card__excerpt {
		display: none;
	}

	.carxis-article-search-card__meta span {
		display: none;
	}

	.carxis-article-search-card__meta {
		justify-content: flex-start;

		border-top: 0;

		padding-top: 5px;
	}

	.carxis-article-search-results__pagination {
		gap: 10px;
	}

	.carxis-article-search-results__pagination-link {
		min-height: 40px;

		padding: 8px 13px;

		font-size: 11px;
	}

	.carxis-article-search-results__pagination-status {
		width: 100%;

		text-align: center;
	}

}


/* ==========================================================
   16. Reduced Motion
========================================================== */

@media (prefers-reduced-motion: reduce) {

	.carxis-article-search-card,
	.carxis-article-search-card__image img,
	.carxis-article-search-card__title a,
	.carxis-article-search-card__meta a,
	.carxis-article-search-results__pagination-link,
	.carxis-article-search-results__reset {
		transition: none;
	}

	.carxis-article-search-card:hover,
	.carxis-article-search-results__pagination-link:hover,
	.carxis-article-search-results__reset:hover {
		transform: none;
	}

	.carxis-article-search-card:hover
	.carxis-article-search-card__image img {
		transform: none;
	}

}