/* ------------------------------------------------------------------ *
 * Pattern browser — /crochet-patterns/ filter UI + results grid.
 * Page template: page-crochet-patterns.php; helpers in functions.php.
 * Also used by category.php / taxonomy.php archives and search.php,
 * which all share the breadcrumbs / browser-header / grid / pagination
 * markup. Search-only additions live at the bottom of this file under
 * the `.mcs-search-*` block.
 * ------------------------------------------------------------------ */

/* Breadcrumbs sit above the page title. */
.mcs-breadcrumbs {
	max-width: 1280px;
	margin: 1rem auto 0.5rem;
	padding: 0 1rem;
	font-size: 0.85rem;
	color: var(--global-palette6);
}

.mcs-breadcrumbs a {
	color: var(--global-palette1);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.mcs-breadcrumbs a:hover {
	border-bottom-color: var(--global-palette1);
}

.mcs-breadcrumbs__sep {
	color: var(--global-palette6);
	margin: 0 0.35em;
}

.mcs-breadcrumbs__current {
	color: var(--global-palette3);
	font-weight: 600;
}

.mcs-browser-header {
	text-align: center;
	margin: 1rem auto 1.5rem;
	max-width: 900px;
	padding: 0 1rem;
}

.mcs-browser-header .entry-title {
	margin-bottom: 0.5rem;
	color: var(--global-palette3);
	letter-spacing: -0.01em;
}

.mcs-browser-header .entry-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: var(--global-palette1);
	margin: 0.75rem auto 0;
	border-radius: 2px;
	opacity: 0.4;
}

.mcs-browser-intro {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--global-palette3);
	margin: 0 auto;
	max-width: 720px;
	line-height: 1.55;
}

.mcs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	align-items: stretch;
	margin: 1.5rem auto 1.25rem;
	max-width: 1100px;
	padding: 1.25rem 1.25rem;
	background: color-mix(in srgb, var(--global-palette1) 4.5%, transparent);
	border: 1px solid color-mix(in srgb, var(--global-palette1) 10%, transparent);
	border-radius: 10px;
}

@media (max-width: 600px) {
	.mcs-filters {
		margin-left: 1rem;
		margin-right: 1rem;
		padding: 1rem 0.75rem;
	}
}

.mcs-filter {
	position: relative;
	flex: 1 1 200px;
	min-width: 180px;
	max-width: 320px;
}

.mcs-filter__label-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mcs-filter__select {
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: 1px solid var(--global-palette7);
	border-radius: 4px;
	width: 100%;
	/* Right padding clears the 28px chevron (right:0.625rem); kept tight so
	   long labels like "By Project Type" aren't clipped in the ~200px box. */
	padding: 1rem 2.75rem 1rem 1.125rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--global-palette3);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mcs-filter__select:hover {
	border-color: var(--global-palette1);
}

.mcs-filter__select:focus {
	outline: none;
	border-color: var(--global-palette1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 12%, transparent);
}

.mcs-filter__chevron {
	position: absolute;
	right: 0.625rem;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--global-palette1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* Search input styled to match the dropdowns. */
.mcs-filter--search {
	flex: 1 1 240px;
	max-width: 360px;
}

.mcs-filter__search {
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: 1px solid var(--global-palette7);
	border-radius: 4px;
	width: 100%;
	padding: 1rem 3.25rem 1rem 1.25rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--global-palette3);
	font-weight: 500;
}

.mcs-filter__search::placeholder {
	color: var(--global-palette6);
	font-style: italic;
}

.mcs-filter__search:focus {
	outline: none;
	border-color: var(--global-palette1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 12%, transparent);
}

.mcs-filter__search-icon {
	position: absolute;
	right: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--global-palette1);
	pointer-events: none;
	display: flex;
}

.mcs-filters__apply {
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	background: var(--global-palette1);
	color: #fff;
	border: 0;
	font-weight: 600;
	cursor: pointer;
}

.mcs-filters__clear {
	align-self: center;
	font-size: 0.875rem;
	color: var(--global-palette1);
	text-decoration: underline;
	white-space: nowrap;
}

.mcs-browser-count {
	text-align: center;
	color: var(--global-palette4);
	font-size: 0.9rem;
	margin: 0 0 1.5rem;
}

.mcs-pattern-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	padding: 0;
	margin: 0 auto 2rem;
	max-width: 1280px;
}

@media (max-width: 1024px) {
	.mcs-pattern-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	.mcs-pattern-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

.mcs-browser-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--global-palette4);
}

/* Pagination: bordered square buttons, current page filled with the teal
   accent, prev/next arrows have a slightly larger touch target. */
.mcs-pagination {
	margin: 2.5rem 0;
}

.mcs-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	align-items: center;
}

.mcs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	background: #fff;
	border: 1px solid var(--global-palette7);
	border-radius: 4px;
	color: var(--global-palette3);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mcs-pagination a.page-numbers:hover {
	border-color: var(--global-palette1);
	color: var(--global-palette1);
}

.mcs-pagination .page-numbers.current {
	background: var(--global-palette1);
	border-color: var(--global-palette1);
	color: #fff;
}

.mcs-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--global-palette6);
	cursor: default;
}

.mcs-pagination .page-numbers.prev,
.mcs-pagination .page-numbers.next {
	padding: 0;
	width: 40px;
}

.mcs-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Gutenberg Query Loop pagination — match .mcs-pagination pill style.
 *
 * Pages built with the core Query Loop block (e.g. /discover/) use
 * wp-block-query-pagination instead of the PHP-generated .mcs-pagination.
 * The individual items already share the .page-numbers class; we only
 * need to mirror the nav-level layout and style the next/prev text links
 * to look like icon buttons.
 * ------------------------------------------------------------------ */
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	align-items: center;
	margin: 2.5rem 0;
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	background: #fff;
	border: 1px solid var(--global-palette7);
	border-radius: 4px;
	color: var(--global-palette3);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination a.page-numbers:hover {
	border-color: var(--global-palette1);
	color: var(--global-palette1);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--global-palette1);
	border-color: var(--global-palette1);
	color: #fff;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #fff;
	border: 1px solid var(--global-palette7);
	border-radius: 4px;
	color: var(--global-palette3);
	font-size: 0;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination-previous::before,
.wp-block-query-pagination-next::after {
	font-size: 1rem;
	line-height: 1;
}

.wp-block-query-pagination-previous::before { content: "‹"; }
.wp-block-query-pagination-next::after      { content: "›"; }

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: var(--global-palette1);
	color: var(--global-palette1);
}

/* ------------------------------------------------------------------ *
 * Search results — /?s=<query>. Template: search.php.
 * Reuses the .mcs-browser-header / .mcs-pattern-grid / .mcs-pagination
 * primitives above; adds an eyebrow, refine-search input, and empty
 * state styled to match.
 * ------------------------------------------------------------------ */

.mcs-search-eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--global-palette1);
	margin: 0 0 0.5rem;
}

.mcs-search-header .entry-title {
	font-size: clamp(2rem, 4vw, 3rem);
}

.mcs-search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 720px;
	margin: 0 auto 2rem;
	padding: 1rem;
	background: color-mix(in srgb, var(--global-palette1) 4.5%, transparent);
	border: 1px solid color-mix(in srgb, var(--global-palette1) 10%, transparent);
	border-radius: 10px;
}

@media (max-width: 600px) {
	.mcs-search-form {
		margin-left: 1rem;
		margin-right: 1rem;
		padding: 0.75rem;
	}
}

.mcs-search-form__input {
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--global-palette7);
	border-radius: 4px;
	padding: 0.9rem 1.1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--global-palette3);
	font-weight: 500;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mcs-search-form__input::placeholder {
	color: var(--global-palette6);
	font-style: italic;
}

.mcs-search-form__input:focus {
	outline: none;
	border-color: var(--global-palette1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 12%, transparent);
}

.mcs-search-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0 1.25rem;
	background: var(--global-palette1);
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.mcs-search-form__submit:hover,
.mcs-search-form__submit:focus {
	background: var(--global-palette2);
}

@media (max-width: 480px) {
	.mcs-search-form__submit-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.mcs-search-form__submit {
		padding: 0 0.9rem;
	}
}

/* Cards without a featured image (eg. pages, some old posts) still need
   to look like cards in the grid. A neutral cream placeholder fills the
   image slot so the title block sits at consistent height. */
.mcs-search-card__placeholder {
	background: var(--global-palette7);
}

.mcs-search-card__placeholder a {
	display: block;
	width: 100%;
	height: 100%;
}

.mcs-search-empty {
	text-align: center;
	padding: 3rem 1rem 4rem;
	color: var(--global-palette4);
}

.mcs-search-empty__lead {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--global-palette3);
	margin: 0 0 0.75rem;
	line-height: 1.4;
}

.mcs-search-empty__hint {
	margin: 0 0 1.5rem;
	color: var(--global-palette4);
}

.mcs-search-empty__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.mcs-search-empty__links a {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--global-palette1);
	border-radius: 999px;
	color: var(--global-palette1);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.mcs-search-empty__links a:hover,
.mcs-search-empty__links a:focus {
	background: var(--global-palette1);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Empty-state recovery — filter-relax suggestions + fallback grid +
 * pivot rail. Rendered by mcs_render_relax_suggestions /
 * mcs_render_fallback_grid / mcs_render_pivot_rail in functions.php.
 * ------------------------------------------------------------------ */

.mcs-empty {
	text-align: center;
	max-width: 720px;
	margin: 1.5rem auto 1.25rem;
	padding: 0 1rem;
}

.mcs-empty__lead {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--global-palette3);
	margin: 0 0 0.5rem;
}

.mcs-empty__lead strong {
	font-style: normal;
	font-weight: 600;
	color: var(--global-palette1);
}

.mcs-empty__hint {
	color: var(--global-palette6);
	font-size: 0.95rem;
	margin: 0;
}

/* Relax suggestions — chips showing what dropping a single filter would
   produce. Each chip: filter value being dropped + the resulting count. */
.mcs-relax {
	list-style: none;
	margin: 0 auto 2.5rem;
	padding: 0 1rem;
	max-width: 900px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}

.mcs-relax__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	background: #fff;
	border: 1px solid var(--global-palette7);
	border-radius: 999px;
	color: var(--global-palette3);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mcs-relax__chip:hover,
.mcs-relax__chip:focus {
	border-color: var(--global-palette1);
	color: var(--global-palette1);
}

/* Strike-through the value being relaxed away — visually signals "without
   this filter" without needing a verbose "remove X" prefix. */
.mcs-relax__strike {
	text-decoration: line-through;
	text-decoration-color: var(--global-palette6);
	text-decoration-thickness: 1.5px;
	color: var(--global-palette4);
}

.mcs-relax__count {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--global-palette6);
	padding-left: 0.5rem;
	border-left: 1px solid var(--global-palette7);
}

.mcs-relax__chip:hover .mcs-relax__count {
	color: var(--global-palette1);
}

/* Fallback grid — same .mcs-pattern-grid card markup, just wrapped in a
   labelled section so visitors don't read it as the actual results.
   Sits between the empty-state / pagination above and the pivot rail
   below. */
.mcs-fallback {
	margin: 3rem auto 2rem;
	max-width: 1280px;
	padding: 0 1rem;
}

.mcs-fallback__heading {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.2;
	color: var(--global-palette3);
	text-align: center;
	margin: 0 0 1.5rem;
}

.mcs-fallback__heading::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--global-palette1);
	margin: 0.5rem auto 0;
	border-radius: 2px;
	opacity: 0.45;
}

/* Pivot rail — always-on chip strip at the bottom of every archive /
   search page. Subtle visual weight: cream section bg so it reads as a
   wayfinding band rather than another piece of content. */
.mcs-pivot {
	margin: 3rem auto 0;
	padding: 2.5rem 1rem;
	background: var(--global-palette8);
	border-top: 1px solid var(--global-palette7);
	text-align: center;
}

.mcs-pivot__heading {
	font-family: inherit;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--global-palette6);
	margin: 0 0 1.25rem;
}

.mcs-pivot__chips {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1000px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}

.mcs-pivot__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.1rem;
	background: #fff;
	border: 1px solid var(--global-palette7);
	border-radius: 999px;
	color: var(--global-palette3);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mcs-pivot__chip:hover,
.mcs-pivot__chip:focus {
	background: var(--global-palette1);
	border-color: var(--global-palette1);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Category / taxonomy landing hero band.
 * Full-width section that sits above the filter bar and gives each
 * archive a visual "arrival" moment — warm background, centred heading,
 * italic intro from the term description. No per-category images needed.
 * ------------------------------------------------------------------ */

/* Full-width hero band. Lives outside .site-container so it spans 0→100%
 * viewport. position:relative + overflow:hidden host the absolutely-positioned
 * decoration layer (grain + soft circles, inspired by ispy.test/auth/login). */
.mcs-cat-hero {
	background: var(--global-palette8);
	border-bottom: 1px solid var(--global-palette7);
	padding: 3rem 1rem 2.5rem;
	margin-bottom: 0;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.mcs-cat-hero .mcs-browser-header {
	margin: 0 auto;
	padding: 0;
}

/* Banner variant — added when the term has a hero image set (or, for
 * categories, when the post-thumbnail fallback resolves). The image is the
 * <section> background; ::before paints a cream→translucent gradient
 * (matching the single-post hero in single-hero.css) so dark text reads on
 * the left while the photo breathes through on the right. */
.mcs-cat-hero--banner {
	background-color: var(--global-palette8, #f9f7f5);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom: none;
	padding: 0;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mcs-cat-hero--banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--global-palette8, #f9f7f5) 36%,
		rgba(255, 255, 255, 0.5) 100%
	);
	pointer-events: none;
	z-index: 0;
}

/* Decoration layer (grain + warm circles) lives in decor-bg.css as the
 * reusable .mcs-decor-bg component — used here inside .mcs-cat-hero and
 * also as a body-level background on hub pages via mcs-decor-bg.php. */

.mcs-cat-hero__overlay {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 900px;
	padding: 4rem 1.25rem;
	margin: 0 auto;
	text-align: center;
}

.mcs-cat-hero:not(.mcs-cat-hero--banner) .mcs-cat-hero__overlay {
	padding: 0;
}

.mcs-cat-hero__illustration {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	color: var(--global-palette1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mcs-cat-hero__illustration svg {
	width: 100%;
	height: 100%;
}

.mcs-cat-hero__eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--global-palette1);
	margin: 0 0 0.5rem;
}

@media (max-width: 600px) {
	.mcs-cat-hero--banner {
		min-height: 260px;
	}
	.mcs-cat-hero__overlay {
		padding: 2.5rem 1rem;
	}
	.mcs-cat-hero__illustration {
		width: 48px;
		height: 48px;
		margin-bottom: 0.75rem;
	}
}

/* ------------------------------------------------------------------ *
 * Load More button — replaces numeric pagination on the faceted browser.
 * Same outlined-orange CTA treatment used on hub-page section footers
 * (see hub-pages.css → .mcs-section-cta) so the visual language matches.
 * ------------------------------------------------------------------ */

.mcs-load-more-wrap {
	display: flex;
	justify-content: center;
	margin: 3rem 0 1rem;
}

.mcs-load-more {
	background: transparent;
	color: var(--global-palette1);
	border: 2px solid var(--global-palette1);
	border-radius: 8px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.82rem;
	padding: 0.85rem 2.75rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	font-family: inherit;
}

.mcs-load-more:hover,
.mcs-load-more:focus-visible {
	background: var(--global-palette1);
	color: #ffffff;
	outline: none;
}

.mcs-load-more:disabled {
	opacity: 0.6;
	cursor: progress;
}