/* ==========================================================================
   Term Grouped Query block
   ========================================================================== */

.vpoc-term-grouped-query {
	--vpoc-tgq-gap: 1rem;
	--vpoc-tgq-thumb-size: 120px;
	--vpoc-tgq-grid-min: 250px;
}

.vpoc-term-group {
	margin-bottom: 2rem;
}

.vpoc-term-heading {
	margin-bottom: 1rem;
}

.vpoc-term-post {
	margin-bottom: 1rem;
}

.vpoc-term-post-title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

.vpoc-term-post-title a {
	text-decoration: none;
}

.vpoc-term-post-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vpoc-term-post-links .vpoc-term-post-preview,
.vpoc-term-post-links .vpoc-term-post-download {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.vpoc-term-post-links .vpoc-dl-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

/* List with thumbnails layout */
.vpoc-term-grouped-query--list-thumbs .vpoc-term-post--thumb {
	display: flex;
	gap: var(--vpoc-tgq-gap);
	align-items: flex-start;
}

.vpoc-term-grouped-query--list-thumbs .vpoc-term-post-media {
	flex: 0 0 var(--vpoc-tgq-thumb-size);
	max-width: var(--vpoc-tgq-thumb-size);
}

.vpoc-term-grouped-query--list-thumbs .vpoc-term-post-thumb {
	width: 100%;
	height: auto;
	border-radius: 4px;
	object-fit: cover;
}

.vpoc-term-grouped-query--list-thumbs .vpoc-term-post-thumb--placeholder {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--accent-2, #f0f0f0);
}

.vpoc-term-grouped-query--list-thumbs .vpoc-term-post-body {
	flex: 1 1 auto;
}

/* Grid layout */
.vpoc-term-grouped-query--grid .vpoc-term-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--vpoc-tgq-grid-min), 1fr));
	gap: var(--vpoc-tgq-gap);
}

.vpoc-term-grouped-query--grid .vpoc-term-grid-item {
	display: flex;
	flex-direction: column;
}

.vpoc-term-grouped-query--grid .vpoc-term-grid-thumb-link {
	display: block;
	margin-bottom: 0.5rem;
}

.vpoc-term-grouped-query--grid .vpoc-term-grid-thumb-link .vpoc-term-post-thumb {
	width: 100%;
	height: auto;
	border-radius: 4px;
	object-fit: cover;
}

.vpoc-term-grouped-query--grid .vpoc-term-post-thumb--placeholder {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--accent-2, #f0f0f0);
}

.vpoc-term-grouped-query--grid .vpoc-term-post-title {
	margin-bottom: 0.5rem;
}