/*
 * Pinterest First Editorial - Archive, search, posts-index and 404 layouts.
 *
 * Page-level layout for the archive results view, the optional sidebar, the
 * standalone search form, empty states and the 404 page. Loaded conditionally
 * by inc/enqueue.php on those views only, so single articles, pages and the
 * homepage never download it.
 *
 * Card markup and the locked card column behaviour stay in components.css
 * (the shared .pfe-home-grid--cards primitive is reused by the archive
 * results part); this file adds no duplicate grid rules. All values come
 * from tokens.css (Docs/ARCHITECTURE.md, CSS Rules).
 *
 * @package Pinterest_First_Editorial
 */

/* -------------------------------------------------------------------------
 * Page shell - vertical rhythm under the sticky header.
 * ---------------------------------------------------------------------- */

.pfe-page-shell {
	padding-block: var(--pfe-space-8) var(--pfe-space-10);
}

/* -------------------------------------------------------------------------
 * Archive layout - single column by default. The optional sidebar is later
 * in the document flow than the results, so on narrow screens it stacks
 * below all archive content and never enters the first viewport; at
 * >=1024px a CSS grid promotes it to a right-hand column beside the content
 * (Docs/DECISIONS.md #17). No JavaScript reordering - DOM order stays
 * logical for keyboard and screen-reader users.
 * ---------------------------------------------------------------------- */

.pfe-archive-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pfe-space-8);
}

.pfe-archive-layout__main,
.pfe-archive-layout__sidebar {
	min-width: 0;
}

@media (min-width: 1024px) {
	.pfe-archive-layout--with-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--pfe-sidebar-width);
		column-gap: var(--pfe-space-7);
		row-gap: var(--pfe-space-8);
	}
}

/* With the optional sidebar the content column narrows, so the archive card
 * grid is capped one step below the full-width locked grid to keep cards
 * readable (2 columns at >=1024px, 3 at >=1280px). The sidebar is OFF by
 * default, so the default archive grid keeps the exact locked 1/2/2/3/4
 * column behaviour from components.css (Docs/DECISIONS.md #20).
 * This is an optional-feature adjustment, not a change to the default grid. */
@media (min-width: 1024px) {
	.pfe-archive-layout--with-sidebar .pfe-home-grid--cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.pfe-archive-layout--with-sidebar .pfe-home-grid--cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Sidebar widget area - quiet stacking only; widgets keep their own markup.
 * Classic and block search widgets receive a compact, token-based form so
 * they do not fall back to unstyled browser controls.
 * ---------------------------------------------------------------------- */

.pfe-archive-layout__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--pfe-space-6);
}

.pfe-archive-layout__sidebar .widget {
	min-width: 0;
}

.pfe-archive-layout__sidebar .widget-title {
	margin: 0 0 var(--pfe-space-3);
	font-size: var(--pfe-font-size-lg);
	font-weight: var(--pfe-font-weight-bold);
	line-height: var(--pfe-leading-snug);
	color: var(--pfe-color-text);
}

.pfe-archive-layout__sidebar ul {
	margin: 0;
	padding-inline-start: var(--pfe-space-5);
}

.pfe-archive-layout__sidebar li + li {
	margin-block-start: var(--pfe-space-2);
}

.pfe-archive-layout__sidebar .search-form,
.pfe-archive-layout__sidebar .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pfe-space-2);
}

.pfe-archive-layout__sidebar .search-form .search-field,
.pfe-archive-layout__sidebar .wp-block-search__input {
	flex: 1 1 8rem;
	min-width: 0;
	min-height: var(--pfe-tap-target);
	padding-inline: var(--pfe-space-3);
	border: 1px solid var(--pfe-color-border); /* 1px matches .pfe-archive-header. */
	border-radius: var(--pfe-radius-sm);
	background-color: var(--pfe-color-surface);
	color: var(--pfe-color-text);
	font-family: inherit;
	font-size: var(--pfe-font-size-sm);
}

.pfe-archive-layout__sidebar .search-form .search-submit,
.pfe-archive-layout__sidebar .wp-block-search__button {
	min-height: var(--pfe-tap-target);
	padding-inline: var(--pfe-space-4);
	border: 1px solid var(--pfe-color-accent-strong);
	border-radius: var(--pfe-radius-sm);
	background-color: var(--pfe-color-accent-strong);
	color: var(--pfe-color-on-accent);
	font-family: inherit;
	font-size: var(--pfe-font-size-sm);
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Standalone search panel - used by search results and the 404 page.
 * The visible label wraps the input, so no generated id is needed.
 * ---------------------------------------------------------------------- */

.pfe-search-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--pfe-space-3);
	max-width: 42rem;
	margin-block: var(--pfe-space-5) var(--pfe-space-7);
}

.pfe-search-panel__label {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
	gap: var(--pfe-space-2);
	min-width: 0;
	font-size: var(--pfe-font-size-sm);
	font-weight: var(--pfe-font-weight-semibold);
	color: var(--pfe-color-text);
}

.pfe-search-panel__field {
	width: 100%;
	min-height: var(--pfe-tap-target);
	padding-inline: var(--pfe-space-4);
	border: 1px solid var(--pfe-color-border);
	border-radius: var(--pfe-radius-sm);
	background-color: var(--pfe-color-surface);
	color: var(--pfe-color-text);
	font-family: inherit;
	font-size: var(--pfe-font-size-md);
}

.pfe-search-panel__field:focus {
	border-color: var(--pfe-color-accent);
}

.pfe-search-panel__submit {
	flex: 0 0 auto;
}

/* Page-level accent buttons restate the border: --pfe-header-border-width is
 * scoped to .pfe-site-header, so .pfe-button outside the header would
 * otherwise lose its 1px hairline. Same token colours, same 1px width. */
.pfe-search-panel__submit,
.pfe-404__action .pfe-button {
	border: 1px solid var(--pfe-color-accent-strong);
}

/* -------------------------------------------------------------------------
 * Empty states - a quiet, flat block; no shadow, gradient or decorative
 * chrome (Docs/DESIGN_SYSTEM.md #2).
 * ---------------------------------------------------------------------- */

.pfe-empty-state {
	margin-block-start: var(--pfe-space-6);
	padding: var(--pfe-space-8) var(--pfe-space-6);
	border-radius: var(--pfe-radius-md);
	background-color: var(--pfe-color-surface-muted);
	text-align: center;
}

.pfe-empty-state__message {
	margin: 0;
	font-size: var(--pfe-font-size-md);
	color: var(--pfe-color-text-secondary);
}

.pfe-empty-state__action {
	margin: var(--pfe-space-4) 0 0;
	font-size: var(--pfe-font-size-sm);
}

/* The empty-state action is the recovery control of the state, so it keeps the
 * documented 44x44 primary-control target even though it renders as a text
 * link (Docs/DECISIONS.md #23; Docs/DESIGN_SYSTEM.md #11). */
.pfe-empty-state__action a {
	display: inline-flex;
	align-items: center;
	min-height: var(--pfe-tap-target);
}

/* -------------------------------------------------------------------------
 * 404 page - a calm, focused recovery state with search and a path home.
 * ---------------------------------------------------------------------- */

.pfe-404 {
	max-width: var(--pfe-reading-measure);
}

.pfe-404__text {
	margin-block-end: var(--pfe-space-4);
	font-size: var(--pfe-font-size-lg);
	line-height: var(--pfe-leading-relaxed);
	color: var(--pfe-color-text-secondary);
}

.pfe-404__action {
	margin-block-start: var(--pfe-space-6);
}