/* Agora Listings — plugin-local styles only. Card + grid styling comes from
   the widget-published card.css (enqueued as a dependency, scoped under
   .agora-widget) — see marketplace-embed/CARD_CONTRACT.md. This file holds the
   WP-divergence shims and plugin-only UI (pagination, empty states). */

/* The card itself is a <div>, as in the widget. The click target the widget
   gets from a @click handler is carried in WP by inner <a> elements, so
   neutralise link styling on them. */
.agora-widget a.agora-card-link,
.agora-widget a.agora-card-link:hover,
.agora-widget a.agora-card-link:focus,
.agora-widget a.agora-card-link:visited {
	text-decoration: none;
	color: inherit;
}

/* This one is a flex item of .card-details-section — restore column flow for
   the title/detail rows it wraps, and min-width:0 so their ellipsis
   truncation keeps working inside the flex container. */
.agora-widget a.agora-card-link--details {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The CTA is a real <a> in WP (the widget uses a <button>). These selectors are
   (0,2,1) and so beat card.css's .details-btn/.wanted-btn at (0,2,0) — the
   token colours must be restated, and `color: inherit` would wrongly pull in
   the host theme's text colour. */
.agora-widget a.action-btn,
.agora-widget a.action-btn:hover,
.agora-widget a.action-btn:focus,
.agora-widget a.action-btn:visited {
	text-decoration: none;
	color: var(--text-btn);
	box-sizing: border-box;
}

.agora-widget a.action-btn.wanted-btn,
.agora-widget a.action-btn.wanted-btn:hover,
.agora-widget a.action-btn.wanted-btn:focus,
.agora-widget a.action-btn.wanted-btn:visited {
	color: var(--wanted-text-btn, var(--text-btn));
}

/* Equivalent of the widget icon components' scoped svg rule. */
.agora-widget .detail-icon svg {
	display: inline-block;
	vertical-align: middle;
}

/* Optional fixed column counts via the shortcode's columns attribute;
   without it the widget's auto-fit grid applies. */
.agora-listings--cols-2 .listings-grid {
	grid-template-columns: repeat(2, 1fr);
}

.agora-listings--cols-3 .listings-grid {
	grid-template-columns: repeat(3, 1fr);
}

.agora-listings--cols-4 .listings-grid {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
	.agora-listings--cols-3 .listings-grid,
	.agora-listings--cols-4 .listings-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.agora-listings--cols-2 .listings-grid,
	.agora-listings--cols-3 .listings-grid,
	.agora-listings--cols-4 .listings-grid {
		grid-template-columns: 1fr;
	}
}

/* --- "More info" expander (plugin-only; not part of the shared card contract).
   Native <details>, so no JavaScript and the content stays in the DOM for
   crawlers even while collapsed. --- */
.agora-widget .agora-more-info {
	margin-top: auto; /* absorb grid-stretch slack so summary + CTA sit together */
	border-top: 1px solid var(--border-light);
	min-width: 0;
}

.agora-widget .agora-more-info__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	cursor: pointer;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--agora-primary);
	list-style: none; /* drop the native disclosure triangle */
}

.agora-widget .agora-more-info__summary::-webkit-details-marker {
	display: none;
}

.agora-widget .agora-more-info__chevron {
	flex-shrink: 0;
	transition: transform var(--transition-normal);
}

.agora-widget .agora-more-info[open] .agora-more-info__chevron {
	transform: rotate(180deg);
}

/* Gives each otherwise-identical "More info" control a distinct accessible name. */
.agora-widget .agora-more-info__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Capped so one open card can't stretch its whole grid row unboundedly. */
.agora-widget .agora-more-info__panel {
	max-height: 260px;
	overflow-y: auto;
	overscroll-behavior: contain; /* don't chain the scroll to the page */
	padding-bottom: var(--space-sm);
	overflow-wrap: anywhere;
}

.agora-widget .agora-more-info__heading {
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	color: var(--text-primary);
	line-height: 1.3;
	margin-bottom: var(--space-xs);
}

/* The panel holds API HTML the host theme knows nothing about — reset it to
   card scale, or a theme's h2 at 28-32px blows out a 300px card. */
.agora-widget .agora-more-info__panel h2,
.agora-widget .agora-more-info__panel h3,
.agora-widget .agora-more-info__panel h4,
.agora-widget .agora-more-info__panel h5 {
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	color: var(--text-primary);
	line-height: 1.3;
	margin: var(--space-sm) 0 var(--space-xs);
}

.agora-widget .agora-more-info__panel p,
.agora-widget .agora-more-info__panel li {
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--text-primary);
	margin: 0 0 var(--space-xs);
}

.agora-widget .agora-more-info__panel ul,
.agora-widget .agora-more-info__panel ol {
	margin: 0 0 var(--space-xs);
	padding-left: var(--space-md);
}

.agora-listings-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 8px 0 24px;
}

.agora-listings-pagination a,
.agora-listings-pagination .agora-listings-pagination__current {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	text-decoration: none;
	color: #14264c;
	font-size: 0.9em;
}

.agora-listings-pagination a:hover {
	background: #f0f3f8;
}

.agora-listings-pagination .agora-listings-pagination__current {
	background: #14264c;
	border-color: #14264c;
	color: #fff;
}

.agora-listings-pagination .agora-listings-pagination__gap {
	color: #8a8f98;
}

.agora-listings-empty,
.agora-listings-unavailable {
	margin: 24px 0;
	padding: 16px;
	border: 1px dashed #d9d9d9;
	border-radius: 8px;
	text-align: center;
	color: #4a5261;
}