/*
 * Search Results Page — With-results and empty-state patterns.
 *
 * Layout:
 *   breadcrumb → kicker → H1 → toolbar (count ↔ sort) →
 *   Products section (4-col grid, reuses .wpdl-product-card from product-card.css) →
 *   Journal section (3-col compact rows: 64px thumb + title)
 *
 * Empty state: centered card with bg.surface, generous padding.
 *
 * Tokens read:
 *   color.terracotta.500         — kicker
 *   color.neutral.200            — journal thumb placeholder
 *   semantic.color.text.primary  — H1, section headings, journal titles
 *   semantic.color.text.muted    — breadcrumb, count, sort
 *   semantic.color.border.base   — toolbar rule, section dividers
 *   semantic.color.bg.surface    — empty state card bg
 *   semantic.typography.display  — H1, section headings, journal titles (Cormorant)
 *   semantic.typography.body     — breadcrumb, kicker, count, sort, empty body (Jost)
 *   space.1 – 10
 *   duration.base / easing.default
 */

/* ── Page wrapper ─────────────────────────────────────────────────────── */

.wpdl-search.wp-block-group {
	padding-block: var(--wp--custom--space--8) var(--wp--custom--space--10);
	margin-block: 0;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */

.wpdl-search__breadcrumb {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-search__breadcrumb a {
	color: var(--wp--custom--semantic--color--text--muted);
	text-decoration: none;
}

/* ── Kicker ───────────────────────────────────────────────────────────── */

.wpdl-search__kicker {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0 var(--wp--custom--space--3);
}

/* ── H1 ───────────────────────────────────────────────────────────────── */

.wpdl-search__heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.3125rem, 0.7rem + 2.68vw, 2.125rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--7);
	line-height: 1.2;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */

.wpdl-search__toolbar.wp-block-group {
	padding-block: var(--wp--custom--space--5);
	border-block-start: 1px solid var(--wp--custom--semantic--color--border--base);
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	margin-block: 0 var(--wp--custom--space--8);
}

.wpdl-search__count {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

.wpdl-search__sort {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
	cursor: pointer;
}

/* ── Section (Products / Journal) ────────────────────────────────────── */

.wpdl-search__section.wp-block-group {
	margin-block: 0 var(--wp--custom--space--9);
}

.wpdl-search__divider.wp-block-separator {
	border: none;
	border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
	opacity: 1;
	margin-block: 0 var(--wp--custom--space--6);
}

.wpdl-search__section-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1rem, 0.8rem + 0.89vw, 1.25rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--7);
}

/* ── Product grid ─────────────────────────────────────────────────────── */

.wpdl-search__product-grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--custom--space--6);
	margin-block: 0;
}

/* ── Journal grid ─────────────────────────────────────────────────────── */

.wpdl-search__journal-grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--custom--space--5);
	margin-block: 0;
}

.wpdl-search__journal-row.wp-block-group {
	gap: var(--wp--custom--space--5);
	align-items: center;
	margin-block: 0;
}

.wpdl-search__journal-thumb.wp-block-image {
	flex: 0 0 4rem;
	min-block-size: 4rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-block: 0;
	background-color: var(--wp--custom--semantic--color--border--subtle);
}

.wpdl-search__journal-thumb.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wpdl-search__journal-info.wp-block-group {
	gap: var(--wp--custom--space--2);
	margin-block: 0;
}

.wpdl-search__journal-meta {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0;
}

.wpdl-search__journal-title.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(0.8125rem, 0.7rem + 0.52vw, 0.875rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
	line-height: 1.35;
}

/* ── Empty state ──────────────────────────────────────────────────────── */

.wpdl-search__empty.wp-block-group {
	padding-block: var(--wp--custom--space--10);
	padding-inline: var(--wp--custom--space--9);
	text-align: center;
	margin-block: 0;
}

.wpdl-search__empty-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.0625rem, 0.75rem + 1.34vw, 1.75rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--5);
}

.wpdl-search__empty-body {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--custom--semantic--color--text--muted);
	max-inline-size: 26.25rem;
	margin-inline: auto;
	margin-block: 0 var(--wp--custom--space--6);
}

.wpdl-search__empty-cta {
	margin-block: 0;
}

.wpdl-search__empty-link {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--space--1);
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-search__empty-link:hover {
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* ── Tablet (< 64em / 1024px) ────────────────────────────────────────── */

@media (width < 64em) {
	.wpdl-search__product-grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
	}

	.wpdl-search__journal-grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Mobile (< 40em / 640px) ─────────────────────────────────────────── */

@media (width < 40em) {
	.wpdl-search__product-grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--custom--space--4);
	}

	.wpdl-search__journal-grid.wp-block-group {
		grid-template-columns: 1fr;
	}

	/* Abbreviate sort label on small screens */
	.wpdl-search__sort::after {
		content: '';
	}
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wpdl-search__empty-link {
		transition: none;
	}
}

/* =============================================================================
   Live Query — search.html block overrides
   Scoped to .wpdl-search (tagName=main on the template).

   Key block-class differences vs static P4 pattern:
     wp:query-title  → .wp-block-query-title  (NOT .wp-block-heading)
     wp:post-title   → .wp-block-post-title   (NOT .wp-block-heading)
     wp:post-featured-image → .wp-block-post-featured-image (NOT .wp-block-image)
     wp:post-terms   → .wp-block-post-terms
   ============================================================================= */

/* Search title (wp:query-title) */
.wpdl-search__heading.wp-block-query-title {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.3125rem, 0.7rem + 2.68vw, 2.125rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--7);
}

/* Product grid — override WC's flex list with CSS grid */
.wpdl-search .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--custom--space--6);
	list-style: none;
	padding: 0;
	margin: 0;
}

.wpdl-search .wc-block-product-template > li {
	margin: 0;
	width: 100%;
}

/* Journal grid — WP sets columns via --wp--style--columns:3 (columnCount attr).
   We control gap and reset flow margins only. */
.wpdl-search .wp-block-post-template.is-layout-grid {
	gap: var(--wp--custom--space--5);
	list-style: none;
	padding: 0;
	margin: 0;
}

.wpdl-search .wp-block-post-template.is-layout-grid > li {
	margin: 0;
}

/* Journal thumbnail (wp:post-featured-image) */
.wpdl-search__journal-thumb.wp-block-post-featured-image {
	flex: 0 0 4rem;
	max-inline-size: 4rem;
	min-block-size: 4rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-block: 0;
	background-color: var(--wp--custom--semantic--color--border--subtle);
}

.wpdl-search__journal-thumb.wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Journal title (wp:post-title) */
.wpdl-search__journal-title.wp-block-post-title {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(0.8125rem, 0.7rem + 0.52vw, 0.875rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-search__journal-title.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-search__journal-title.wp-block-post-title a:hover {
	color: var(--wp--custom--semantic--color--accent--primary);
}

/* Journal category (wp:post-terms) */
.wpdl-search__journal-meta.wp-block-post-terms {
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0;
}

/* stylelint-disable-next-line no-descending-specificity -- different context from journal-title a:hover above */
.wpdl-search__journal-meta.wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

/* Per-section no-results messages */
.wpdl-search__no-results-text {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 300;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: var(--wp--custom--space--5) 0;
}

/* ── Responsive — live query sections ────────────────────────────────── */

@media (width < 64em) {
	.wpdl-search .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
	}

	.wpdl-search .wp-block-post-template.is-layout-grid {
		--wp--style--columns: 2;
	}
}

@media (width < 40em) {
	.wpdl-search .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--custom--space--4);
	}

	.wpdl-search .wp-block-post-template.is-layout-grid {
		--wp--style--columns: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpdl-search__journal-title.wp-block-post-title a {
		transition: none;
	}
}