/**
 * GPR-Result Listing Styles
 *
 * Uses gpr-core design tokens for consistency across plugins.
 */

/* Listing container */
.gpr-result-listing {
	max-width: 1200px;
	margin: 0 auto;
}

/* Header */
.gpr-result-listing__header {
	margin-bottom: var(--gpr-spacing-2xl, clamp(12px, calc(1.07vw + 8.57px), 24px));
}

.gpr-result-listing__title {
	font-size: var(--gpr-font-2xl, clamp(18px, calc(0.89vw + 15.14px), 28px));
	font-weight: var(--gpr-font-bold, 700);
	color: var(--gpr-text, #1a1a1a);
	margin: 0 0 var(--gpr-spacing-sm, clamp(4px, calc(0.36vw + 2.86px), 8px));
	display: flex;
	align-items: center;
	gap: var(--gpr-spacing-md, clamp(8px, calc(0.36vw + 6.86px), 12px));
}

.gpr-result-listing__badge {
	font-size: var(--gpr-font-sm, clamp(12px, calc(0.18vw + 11.43px), 14px));
	font-weight: var(--gpr-font-normal, 400);
	border: 1px solid var(--gpr-text, #1a1a1a);
	border-radius: var(--gpr-radius-full, 9999px);
	/* padding: 2px 12px → */ padding: 2px clamp(8px, calc(0.36vw + 6.86px), 12px);
	white-space: nowrap;
}

.gpr-result-listing__lead {
	font-size: var(--gpr-font-base, clamp(13px, calc(0.27vw + 12.14px), 16px));
	color: var(--gpr-text-light, #444);
	margin: 0 0 var(--gpr-spacing-lg, clamp(10px, calc(0.54vw + 8.29px), 16px));
	line-height: var(--gpr-line-height-relaxed, 1.8);
}

/* Category filter buttons */
.gpr-result-listing__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gpr-spacing-sm, clamp(4px, calc(0.36vw + 2.86px), 8px));
	margin-bottom: var(--gpr-spacing-2xl, clamp(12px, calc(1.07vw + 8.57px), 24px));
	padding-bottom: var(--gpr-spacing-2xl, clamp(12px, calc(1.07vw + 8.57px), 24px));
	border-bottom: 1px solid var(--gpr-border, #e5e7eb);
}

.gpr-result-listing__filter-btn {
	display: inline-block;
	/* padding: 8px 20px → */ padding: clamp(4px, calc(0.36vw + 2.86px), 8px) clamp(10px, calc(0.89vw + 7.14px), 20px);
	border: 1px solid var(--gpr-text, #1a1a1a);
	border-radius: var(--gpr-radius-full, 9999px);
	background: transparent;
	color: var(--gpr-text, #1a1a1a);
	font-size: var(--gpr-font-sm, clamp(12px, calc(0.18vw + 11.43px), 14px));
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}

.gpr-result-listing__filter-btn:hover {
	background: var(--gpr-text, #1a1a1a);
	color: #fff;
}

.gpr-result-listing__filter-btn.is-active {
	background: var(--gpr-primary, #007AFF);
	border-color: var(--gpr-primary, #007AFF);
	color: #fff;
}

/* Toolbar */
.gpr-result-listing__toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--gpr-spacing-2xl, clamp(12px, calc(1.07vw + 8.57px), 24px));
	flex-wrap: wrap;
	gap: var(--gpr-spacing-md, clamp(8px, calc(0.36vw + 6.86px), 12px));
}

.gpr-result-listing__count {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.gpr-result-listing__count-label,
.gpr-result-listing__count-unit {
	font-size: var(--gpr-font-sm, clamp(12px, calc(0.18vw + 11.43px), 14px));
	color: var(--gpr-text, #1a1a1a);
}

.gpr-result-listing__count-number {
	font-size: var(--gpr-font-2xl, clamp(18px, calc(0.89vw + 15.14px), 28px));
	font-weight: var(--gpr-font-bold, 700);
	color: var(--gpr-text, #1a1a1a);
}

.gpr-result-listing__sort {
	display: flex;
	align-items: center;
	gap: var(--gpr-spacing-sm, clamp(4px, calc(0.36vw + 2.86px), 8px));
}

.gpr-result-listing__sort-label {
	font-size: var(--gpr-font-sm, clamp(12px, calc(0.18vw + 11.43px), 14px));
	color: var(--gpr-text-light, #444);
}

.gpr-result-listing__sort-select {
	/* padding: 8px 12px → */ padding: clamp(4px, calc(0.36vw + 2.86px), 8px) clamp(8px, calc(0.36vw + 6.86px), 12px);
	border: 1px solid var(--gpr-border, #e5e7eb);
	border-radius: var(--gpr-radius-md, 4px);
	min-height: 44px;
	font-size: 16px;
	color: #111;
	background: var(--gpr-bg, #fff);
	cursor: pointer;
}

/* Cards grid */
.gpr-result-listing__grid {
	display: grid;
	gap: var(--gpr-spacing-2xl, clamp(12px, calc(1.07vw + 8.57px), 24px));
}

.gpr-result-listing__grid--col-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gpr-result-listing__grid--col-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gpr-result-listing__grid--col-1 {
	grid-template-columns: 1fr;
}

.gpr-result-listing__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--gpr-text-light, #444);
	padding: var(--gpr-spacing-4xl, clamp(24px, calc(2.14vw + 17.14px), 48px)) 0;
}

/* Card */
.gpr-result-card {
	background: var(--gpr-bg, #fff);
	border-radius: var(--gpr-radius-lg, 8px);
	box-shadow: var(--gpr-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	overflow: hidden;
	transition: box-shadow 0.2s;
}

.gpr-result-card:hover {
	box-shadow: var(--gpr-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

.gpr-result-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.gpr-result-card__link:focus-visible {
	outline: 2px solid var(--gpr-primary, #007AFF);
	outline-offset: -2px;
}

.gpr-result-card__image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--gpr-bg-gray, #f6f7f7);
}

.gpr-result-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.gpr-result-card__no-image {
	width: 100%;
	height: 100%;
	background: var(--gpr-bg-gray, #f6f7f7);
}

.gpr-result-card__body {
	/* padding: 1440px→20px, 1024px→0px */
	padding: clamp(0px, calc(4.81vw - 49.23px), 20px);
}

.gpr-result-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gpr-spacing-sm, clamp(4px, calc(0.36vw + 2.86px), 8px));
	margin-bottom: var(--gpr-spacing-sm, clamp(4px, calc(0.36vw + 2.86px), 8px));
	font-size: var(--gpr-font-sm, clamp(12px, calc(0.18vw + 11.43px), 14px));
	color: var(--gpr-text-light, #444);
}

.gpr-result-card__title {
	font-size: var(--gpr-font-md, clamp(14px, calc(0.36vw + 12.86px), 18px));
	font-weight: var(--gpr-font-bold, 700);
	line-height: var(--gpr-line-height-base, 1.5);
	margin: 0 0 var(--gpr-spacing-sm, clamp(4px, calc(0.36vw + 2.86px), 8px));
	color: var(--gpr-text, #1a1a1a);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gpr-result-card__excerpt {
	font-size: var(--gpr-font-sm, clamp(12px, calc(0.18vw + 11.43px), 14px));
	color: var(--gpr-text-light, #444);
	line-height: var(--gpr-line-height-relaxed, 1.8);
	margin: 0 0 var(--gpr-spacing-md, clamp(8px, calc(0.36vw + 6.86px), 12px));
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gpr-result-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--gpr-spacing-md, clamp(8px, calc(0.36vw + 6.86px), 12px));
}

.gpr-result-card__tag {
	font-size: var(--gpr-font-xs, clamp(11px, calc(0.18vw + 10.43px), 13px));
	color: var(--gpr-primary, #007AFF);
}

.gpr-result-card__more {
	display: inline-block;
	font-size: var(--gpr-font-sm, clamp(12px, calc(0.18vw + 11.43px), 14px));
	color: var(--gpr-primary, #007AFF);
	text-align: center;
	width: 100%;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Pagination */
.gpr-result-listing__pagination {
	margin-top: var(--gpr-spacing-4xl, clamp(24px, calc(2.14vw + 17.14px), 48px));
	text-align: center;
}

.gpr-result-listing__pagination ul {
	display: flex;
	justify-content: center;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.gpr-result-listing__pagination li {
	list-style: none;
}

.gpr-result-listing__pagination a,
.gpr-result-listing__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* width: 44px → */ width: clamp(36px, calc(0.71vw + 33.71px), 44px);
	/* height: 44px → */ height: clamp(36px, calc(0.71vw + 33.71px), 44px);
	border-radius: 50%;
	font-size: var(--gpr-font-sm, clamp(12px, calc(0.18vw + 11.43px), 14px));
	text-decoration: none;
	color: var(--gpr-text, #1a1a1a);
	transition: all 0.2s;
}

.gpr-result-listing__pagination a:hover {
	background: var(--gpr-bg-gray, #f6f7f7);
}

.gpr-result-listing__pagination .current {
	background: var(--gpr-primary, #007AFF);
	color: #fff;
}

/* Loading state */
.gpr-result-listing.is-loading .gpr-result-listing__grid {
	opacity: 0.5;
	pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
	.gpr-result-listing__grid--col-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.gpr-result-listing__grid--col-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.gpr-result-listing__grid--col-3 {
		grid-template-columns: 1fr;
	}

	.gpr-result-listing__grid--col-2 {
		grid-template-columns: 1fr;
	}

	.gpr-result-listing__title {
		font-size: var(--gpr-font-xl, clamp(18px, calc(0.54vw + 16.29px), 24px));
	}

	.gpr-result-listing__toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.gpr-result-listing__filter-btn {
		/* padding: 8px 16px → */ padding: clamp(4px, calc(0.36vw + 2.86px), 8px) clamp(10px, calc(0.54vw + 8.29px), 16px);
		font-size: var(--gpr-font-sm, clamp(12px, calc(0.18vw + 11.43px), 14px));
	}
}

/* Final accessibility overrides for listing controls. */
.gpr-result-listing select,
.gpr-result-listing input:not([type="hidden"]) {
	min-height: 44px;
	font-size: 16px;
	color: #111;
}

.gpr-result-listing button,
.gpr-result-listing .gpr-btn {
	min-height: 44px;
	font-size: 16px;
	font-weight: 600;
}