/* =========================================================================
   3. Layout helpers
   ========================================================================= */

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-4) var(--gutter) var(--space-5);
}

/* Text pages: reading width, but aligned on the same left edge as every
   other page (the logo), not centred */
.container--narrow > * {
	max-width: var(--narrow);
}

.site-content {
	flex: 1 0 auto;
}

/* Section title under a thin rule (events, biography, category);
   same look as .section-head on the home page */
.section-title {
	margin: var(--space-5) 0 var(--space-3);
	padding-top: var(--space-3);
	font-size: var(--size-l);
	border-top: 1px solid var(--line);
}

.section-more {
	margin-top: var(--space-4);
}

/* Section heading with a "see all" link on the right (home) */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	margin-bottom: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--line);
}

.section-head__title {
	margin: 0;
	font-size: var(--size-l);
}

.muted {
	color: var(--mute);
}

.breadcrumb {
	margin-bottom: var(--space-3);
	font-size: var(--size-s);
	color: var(--mute);
}

.page__header {
	margin-bottom: var(--space-4);
}

.page__title {
	margin: 0;
}

/* Category description under the title */
.page__intro {
	max-width: var(--narrow);
	margin: var(--space-2) 0 0;
	color: var(--mute);
}

/* Secondary links in a row (404) */
.page__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin-top: var(--space-3);
}

/* "49 available works" under a list title (/artworks/, categories) */
.page__count {
	margin: var(--space-1) 0 0;
	font-size: var(--size-s);
	color: var(--mute);
}

/* "Clear" after the search results count (archive-artwork.php) */
.page__count-link {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Category filters above an artwork list (tilsitt-gallery/artwork-filters.php).
   Same animated underline as the navigation; on small screens the row
   scrolls sideways instead of wrapping onto several lines. The search field
   ends the row, on the right. */
.filters {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1) var(--space-4);
	margin: 0 0 var(--space-4);
	border-bottom: 1px solid var(--line);
}

.filters__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	padding: 0 0 var(--space-2);
	list-style: none;
}

.filters__link {
	display: inline-block;
	padding-bottom: 0.3em;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mute);
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.35s ease, color 0.2s;
}

.filters__link:hover,
.filters__link:focus-visible {
	color: var(--ink);
	text-decoration: none;
	background-size: 100% 1px;
}

.filters__link.is-active {
	color: var(--ink);
	background-size: 100% 1px;
}

/* "+ n More / − Less": folds the categories that do not fit (filters.js, desktop) */
.filters.is-collapsed .filters__item--extra {
	display: none;
}

.filters__toggle {
	padding: 0 0 0.3em;
	font: inherit;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: pointer;
}

.filters__toggle:hover {
	color: var(--mute);
}

.filters__toggle[hidden] {
	display: none;
}

.filters__count {
	margin-left: 0.2em;
	font-size: 0.75em;
	letter-spacing: 0;
	color: var(--mute);
}

@media (max-width: 639px) {
	.filters__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.filters__list::-webkit-scrollbar {
		display: none;
	}
}

/* Artwork search (tilsitt-gallery/artwork-search.php): no box, a thin
   magnifier and the filters' animated underline. It widens on focus, inside
   a fixed space, so the categories next to it do not move. */
.search {
	display: flex;
	flex: 0 0 auto;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5em;
	width: 15rem;
	margin-left: auto;
	padding-top: 0.2em; /* same baseline as the category links */
	padding-bottom: var(--space-2);
	color: var(--mute);
}

.search:focus-within {
	color: var(--ink);
}

.search__icon {
	flex: 0 0 auto;
}

.search__input {
	width: 8rem;
	margin: 0;
	padding: 0 0 0.3em;
	font: inherit;
	font-size: var(--size-s);
	letter-spacing: 0.02em;
	color: var(--ink);
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	border: 0;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: width 0.35s ease, background-size 0.35s ease;
}

.search__input::placeholder {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
	opacity: 1;
}

.search__input:hover,
.search__input:focus,
.search__input:not(:placeholder-shown) {
	background-size: 100% 1px;
}

.search__input:focus,
.search__input:not(:placeholder-shown) {
	width: 13rem;
}

.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

@media (max-width: 639px) {
	.filters {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: var(--space-1);
	}

	.search {
		width: auto;
		margin-left: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	.search__input,
	.search__input:focus,
	.search__input:not(:placeholder-shown) {
		flex: 1 1 auto;
		width: auto;
		font-size: var(--size-m); /* 16px or more: iOS does not zoom the page on focus */
	}
}

@media (prefers-reduced-motion: reduce) {
	.filters__link,
	.search__input {
		transition: none;
	}
}

/* Page numbers under a list (the_posts_pagination) */
.pagination {
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid var(--line);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	font-size: var(--size-s);
	letter-spacing: 0.04em;
}

.pagination .page-numbers {
	padding-bottom: 0.2em;
	color: var(--mute);
}

.pagination a.page-numbers:hover {
	color: var(--ink);
	text-decoration: none;
}

.pagination .page-numbers.current {
	color: var(--ink);
	border-bottom: 1px solid currentColor;
}

.pagination .next {
	margin-left: auto;
}