/**
 * Styles for woo-sil7en/post-grid — editorial bento, sibling of product-grid.
 *
 * A category-chip row, an SEO H2, then an asymmetric grid: a full-width FEATURED
 * LEAD article on page 1 (large 16:9 cover beside its copy) followed by a tidy
 * 3-up row of cover-forward post cards. Airy gaps, staggered scroll-reveal,
 * pagination identical to the product grid. Responsive via container queries;
 * motion is compositor-only and gated by prefers-reduced-motion.
 *
 * @package woo-sil7en-blocks-content
 * @since   0.1.0
 */

.woo-sil7en-post-grid {
	container-type: inline-size;
}

/* ---- Category-chip row (SSR links to term archives) ---- */
.woo-sil7en-post-grid__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
}

.woo-sil7en-post-grid__chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.25rem;
	padding: 0.4rem 0.95rem;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast, #1a1714);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--pill, 999px);
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duration--fast, 150ms) ease,
		color var(--wp--custom--motion--duration--fast, 150ms) ease,
		background-color var(--wp--custom--motion--duration--fast, 150ms) ease;
}

.woo-sil7en-post-grid__chip:hover,
.woo-sil7en-post-grid__chip:focus-visible {
	border-color: var(--wp--preset--color--primary, #531099);
	color: var(--wp--preset--color--primary, #531099);
}

.woo-sil7en-post-grid__chip.is-active {
	color: var(--wp--preset--color--primary-ink, #fff);
	background: var(--wp--preset--color--primary, #531099);
	border-color: var(--wp--preset--color--primary, #531099);
}

/* ---- SEO section heading ---- */
.woo-sil7en-post-grid__heading {
	font-family: var(--wp--preset--font-family--display, "Lora", Georgia, serif);
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0 0 var(--wp--custom--grid--gap, 1.5rem);
	color: var(--wp--preset--color--contrast, #1a1714);
}

/* ---- Grid (bento) ---- */
.woo-sil7en-post-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--custom--grid--gap, 2rem);
	align-items: stretch;
}

/* Normal cards: 3 per row (span 2 of 6). flex so the card fills the stretched
   cell → equal heights → meta lines align across a row. */
.woo-sil7en-post-grid__item {
	min-width: 0;
	display: flex;
	grid-column: span 2;
}

/* Featured LEAD: full width, cover beside copy (a horizontal hero). */
.woo-sil7en-post-grid__item.is-lead {
	grid-column: 1 / -1;
}

.woo-sil7en-post-grid__item.is-lead .woo-sil7en-post-card {
	flex-direction: row;
	align-items: stretch;
	gap: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
}

.woo-sil7en-post-grid__item.is-lead .woo-sil7en-post-card__media {
	flex: 1 1 58%;
	aspect-ratio: 16 / 9;
	/* Keep the lead cover a clean 16:9 band — don't stretch it to match a tall
	   copy column. The copy centres beside it instead. */
	align-self: center;
}

.woo-sil7en-post-grid__item.is-lead .woo-sil7en-post-card__body {
	flex: 1 1 42%;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs, 0.75rem);
}

/* ---- Responsive collapse (container = the grid) ---- */
@container (max-width: 820px) {
	.woo-sil7en-post-grid__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.woo-sil7en-post-grid__item {
		grid-column: span 2; /* 2 per row */
	}
}

@container (max-width: 560px) {
	.woo-sil7en-post-grid__list {
		grid-template-columns: 1fr;
	}
	.woo-sil7en-post-grid__item,
	.woo-sil7en-post-grid__item.is-lead {
		grid-column: 1 / -1;
	}
	/* Lead stacks like a normal card on mobile (single DOM, CSS-only reflow). */
	.woo-sil7en-post-grid__item.is-lead .woo-sil7en-post-card {
		flex-direction: column;
	}
	.woo-sil7en-post-grid__item.is-lead .woo-sil7en-post-card__media,
	.woo-sil7en-post-grid__item.is-lead .woo-sil7en-post-card__body {
		flex: 1 1 auto;
	}
}

/* ---- Empty state ---- */
.woo-sil7en-post-grid__empty {
	padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
	color: var(--wp--preset--color--muted, #6f6b64);
	font-size: var(--wp--preset--font-size--md, 1.0625rem);
}

/* ============================================================
   STAGGERED SCROLL-REVEAL (progressive enhancement) — verbatim
   from product-grid's vocabulary.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.woo-sil7en-post-grid__item {
			animation: woo-sil7en-post-tile-in linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}

		@keyframes woo-sil7en-post-tile-in {
			from {
				opacity: 0;
				transform: translateY(2.5rem) scale(0.98);
			}
			to {
				opacity: 1;
				transform: none;
			}
		}
	}
}

/* ============================================================
   Pagination — identical markup/CSS to the product grid.
   ============================================================ */

.woo-sil7en-post-grid__pagination {
	margin-block-start: var(--wp--custom--spacing--l, 2rem);
	display: flex;
	justify-content: center;
}

.woo-sil7en-post-grid__pagination .page-numbers {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.woo-sil7en-post-grid__pagination .page-numbers li a,
.woo-sil7en-post-grid__pagination .page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.6rem;
	border: 1px solid var(--wp--preset--color--border, #e8dfd1);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	text-decoration: none;
	color: inherit;
	transition: background-color 150ms ease, color 150ms ease;
}

.woo-sil7en-post-grid__pagination .page-numbers li a:hover {
	background: var(--wp--preset--color--surface, #f4ede3);
}

.woo-sil7en-post-grid__pagination .page-numbers li span.current {
	background-color: var(--wp--preset--color--primary, #531099);
	color: var(--wp--preset--color--primary-ink, #fff);
	border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.woo-sil7en-post-grid__chip {
		transition: none;
	}
}