/* ────────────────────────────────────────────────────────────
   03-card-listing.css — Card Listing (query-powered 3-col grid)
   Class chain: core/group outer (bg via Style panel, alignfull)
                → gb element .card-listing
                → .card-listing__looper (gb looper)
                → .gb-loop-item (gb loop-item, auto-class)
                  → .listing-card__image / .listing-card__content
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
.card-listing {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding: var(--spacing-4xl) var(--spacing-5xl);
}

/* ── Heading ──────────────────────────────────────────────── */
.card-listing__heading {
	text-align: center;
	margin-bottom: var(--spacing-sm);
}

/* ── Intro paragraph ──────────────────────────────────────── */
.card-listing > p {
	max-width: var(--content-max-prose);
	margin-inline: auto;
	margin-bottom: 0;
	font-size: var(--text-heading-sm);
}

/* ── Looper — 3-column grid ───────────────────────────────── */
.card-listing__looper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--spacing-lg);
	margin-top: var(--spacing-xl);
}

/* ── Loop item — card chrome ──────────────────────────────── */
.card-listing__looper .gb-loop-item {
	background-color: var(--color-white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease-in-out;
}

.card-listing__looper .gb-loop-item:hover {
	box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.09);
}

/* ── Image — 16:9 crop flush to card edges ────────────────── */
.listing-card__image figure img,
.listing-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ── Content ──────────────────────────────────────────────── */
.listing-card__content {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--spacing-sm);
}

/* ── Title ────────────────────────────────────────────────── */
.listing-card__title {
	font-size: var(--text-heading-md);
	line-height: var(--line-height-snug);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-heading);
	text-align: center;
	margin: 0;
}

.listing-card__title a {
	color: var(--color-text-heading) !important;
	text-decoration: none;
}

.listing-card__title a:hover {
	text-decoration: underline;
}

/* ── Excerpt — clamp to ~3 lines (~80 chars) ──────────────── */
.listing-card__excerpt {
	font-size: var(--text-body-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
	text-align: center;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Read More link ───────────────────────────────────────── */
.listing-card__read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	color: var(--color-orange-primary) !important;
	font-family: var(--font-primary);
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.listing-card__read-more::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 0.2em;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M8.88888 3.3335L13.3333 8.00016M13.3333 8.00016L8.88888 12.6668M13.3333 8.00016L2.66666 8.00016' stroke='%23E55D25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease-in-out;
}

.listing-card__read-more:hover {
	color: #9A3F19;
	text-decoration: none;
}

.listing-card__read-more:hover::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M8.88888 3.3335L13.3333 8.00016M13.3333 8.00016L8.88888 12.6668M13.3333 8.00016L2.66666 8.00016' stroke='%239A3F19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	transform: translateX(2px);
}

/* ── Pagination ───────────────────────────────────────────── */
.card-listing__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-xl);
}

/* Prev / Next: .listing-pager__link styles defined in 03-vertical-listing.css */

/* Numbered page links */
.card-listing__page-numbers {
	display: flex;
	align-items: center;
	gap: var(--spacing-xxs);
}

.card-listing__page-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--spacing-xs);
	border: 1px solid var(--color-gray-stroke);
	color: var(--color-text-heading);
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}

.card-listing__page-numbers .page-numbers.current {
	background-color: var(--color-blue-primary);
	border-color: var(--color-blue-primary);
	color: var(--color-white);
}

.card-listing__page-numbers .page-numbers:hover:not(.current) {
	border-color: var(--color-blue-primary);
	color: var(--color-blue-primary);
}

.card-listing__page-numbers .page-numbers.dots {
	border: none;
}

/* ── Dark-bg overrides ────────────────────────────────────── */
.is-style-bg-dark .card-listing__heading {
	color: var(--color-text-body-inverse);
}

/* Cards stay white on dark bg — restore card-interior text to dark-on-white */
.is-style-bg-dark .listing-card__title {
	color: var(--color-text-heading);
}

.is-style-bg-dark .listing-card__title a {
	color: var(--color-text-heading);
}

.is-style-bg-dark .listing-card__excerpt {
	color: var(--color-text-body);
}

.is-style-bg-dark .listing-card__read-more {
	color: var(--color-orange-primary);
}

/* Page numbers on dark bg */
.is-style-bg-dark .card-listing__page-numbers .page-numbers {
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

.is-style-bg-dark .card-listing__page-numbers .page-numbers.current {
	background-color: var(--color-white);
	color: var(--color-blue-primary);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (min-width: 1024px) {
	.card-listing {
		padding: var(--spacing-4xl) var(--spacing-xl);
	}
}

@media (max-width: 1023px) {
	.card-listing {
		padding: var(--spacing-xl) var(--spacing-sm);
	}

	.card-listing__looper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.card-listing__looper {
		grid-template-columns: 1fr;
	}
}