/**
 * Post Query Block — front-end and editor styles.
 *
 * Layout comes from custom properties set inline on .pqb-items by the renderer,
 * so column counts and gaps need no generated stylesheet and no id-scoped rules.
 * Everything is scoped under .pqb, which the wrapper always carries.
 */

.pqb-items {
	display: grid;
	grid-template-columns: repeat(var(--pqb-cols-mobile, 1), minmax(0, 1fr));
	gap: var(--pqb-gap, 24px);
}

@media (min-width: 600px) {
	.pqb-items {
		grid-template-columns: repeat(var(--pqb-cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.pqb-items {
		grid-template-columns: repeat(var(--pqb-cols-desktop, 3), minmax(0, 1fr));
	}
}

/* List layout: one column, image beside the text. */
.pqb-layout-list .pqb-items {
	grid-template-columns: 1fr;
}

.pqb-layout-list .pqb-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pqb-gap, 24px);
	align-items: start;
}

@media (min-width: 600px) {
	.pqb-layout-list .pqb-item {
		grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
	}
}

.pqb-item {
	min-width: 0;
}

.pqb-thumb {
	display: block;
	overflow: hidden;
	margin-bottom: 0.9em;
	border-radius: 4px;
}

.pqb-layout-list .pqb-thumb {
	margin-bottom: 0;
}

.pqb-image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--pqb-ratio, 16 / 9);
	object-fit: cover;
}

.pqb-body > :first-child {
	margin-top: 0;
}

.pqb-body > :last-child {
	margin-bottom: 0;
}

.pqb-title {
	margin: 0 0 0.35em;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.pqb-title a {
	color: inherit;
	text-decoration: none;
}

.pqb-title a:hover,
.pqb-title a:focus-visible {
	text-decoration: underline;
}

.pqb-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.6em;
	font-size: 0.85em;
	opacity: 0.75;
}

.pqb-meta a {
	color: inherit;
}

.pqb-sep {
	opacity: 0.5;
}

.pqb-excerpt {
	margin: 0 0 0.9em;
	overflow-wrap: break-word;
}

.pqb-more {
	margin: 0;
}

/* Logical alignment: "start" is the left edge in LTR and the right edge in
   RTL, so the link follows the reading direction instead of being pinned to a
   physical side. */
.pqb-more-start  { text-align: start; }
.pqb-more-center { text-align: center; }
.pqb-more-end    { text-align: end; }

/* Fallback for browsers without logical text-align values. */
@supports not (text-align: start) {
	.pqb-more-start { text-align: left; }
	.pqb-more-end   { text-align: right; }

	[dir="rtl"] .pqb-more-start { text-align: right; }
	[dir="rtl"] .pqb-more-end   { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Read More pinned to the bottom of the card.

   Grid items already stretch to the tallest card in their row, so the card is
   made a flex column and the body absorbs the spare height. margin-top:auto on
   the link then pushes it to the bottom, lining the links up across the row
   however uneven the titles and excerpts are.
   --------------------------------------------------------------------------- */

.pqb-more-bottom.pqb-layout-grid .pqb-item {
	display: flex;
	flex-direction: column;
}

.pqb-more-bottom .pqb-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.pqb-more-bottom .pqb-more {
	margin-top: auto;
	padding-top: 0.6em;
}

/* In the list layout the body is a grid cell, so it is stretched instead. */
.pqb-more-bottom.pqb-layout-list .pqb-item {
	align-items: stretch;
}

.pqb-more-link {
	display: inline-block;
	font-weight: 600;
}

.pqb-empty {
	margin: 0;
	padding: 1.5em;
	border: 1px dashed currentColor;
	border-radius: 4px;
	text-align: center;
	opacity: 0.7;
}

/* Pagination */
.pqb-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	margin-top: calc(var(--pqb-gap, 24px) + 0.5em);
}

.pqb-page {
	display: inline-block;
	min-width: 2.25em;
	padding: 0.45em 0.7em;
	border: 1px solid currentColor;
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
}

.pqb-page.is-current {
	font-weight: 700;
}

.pqb-page.is-disabled {
	opacity: 0.4;
}

.pqb-page-of {
	padding: 0 0.6em;
	font-size: 0.9em;
	opacity: 0.75;
}

.pqb-ellipsis {
	padding: 0 0.2em;
	opacity: 0.6;
}

/* Visually hidden, still read by screen readers. Named to match core's class
   so themes that already style it stay consistent. */
.pqb .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}