/*
 * Inspiracje post list (template-parts/inspirations/list.php). No section
 * mockup; built from the preview docs/preview/inspiracje.png (820 px wide;
 * × 1.756 for 1440): the heading with its short line and the sort order on
 * the right, the cards two in a row (643 px each at 1440, 25 px apart; the
 * stacked post card), and the page numbers centred under them. Controls in
 * the frames of the category links (I2). Phones: one card in a row, the
 * sort order under the heading.
 */

.hf-inspirations-list
{
	padding-bottom: var(--hf-space-section-block);
	scroll-margin-top: var(--hf-space-s);
}

.hf-inspirations-list__header
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--hf-space-s) var(--hf-space-m);
	margin-bottom: var(--hf-space-m);
}

.hf-inspirations-list__title
{
	margin: 0;
	font-size: var(--hf-text-h2-m);
	text-wrap: balance;
}

.hf-inspirations-list__summary
{
	margin: 0 0 var(--hf-space-m);
	color: var(--hf-color-text);
	font-size: var(--hf-text-control);
	line-height: 1.4;
}

/* Sort order: a native disclosure styled as a select, the choices in a
   floating list under it. */

.hf-sort
{
	position: relative;
}

.hf-sort__toggle
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hf-space-s);
	min-width: clamp(12rem, 9rem + 6vw, 17rem);
	min-height: var(--hf-button-height);
	box-sizing: border-box;
	padding: 0 var(--hf-space-s);
	border: 1px solid var(--hf-color-field-border);
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-surface);
	color: var(--hf-color-heading);
	font-size: var(--hf-text-control);
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
	transition: border-color var(--hf-transition);
}

.hf-sort__toggle::-webkit-details-marker
{
	display: none;
}

.hf-sort__toggle:hover,
.hf-sort[open] .hf-sort__toggle
{
	border-color: var(--hf-color-primary);
}

.hf-sort__toggle:focus-visible
{
	outline: 2px solid var(--hf-color-focus);
	outline-offset: 2px;
}

.hf-sort__icon
{
	flex: none;
	width: 1.1em;
	height: 1.1em;
	color: var(--hf-color-icon);
	transition: rotate var(--hf-transition);
}

.hf-sort[open] .hf-sort__icon
{
	rotate: 180deg;
}

.hf-sort__menu
{
	position: absolute;
	z-index: 5;
	top: calc(100% + var(--hf-space-2xs));
	right: 0;
	min-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--hf-space-2xs) 0;
	border: 1px solid var(--hf-color-card-border);
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-surface);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--hf-color-heading) 12%, transparent);
	list-style: none;
}

.hf-sort__option
{
	display: block;
	padding: 0.7rem var(--hf-space-s);
	color: var(--hf-color-heading);
	font-size: var(--hf-text-control);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--hf-transition);
}

.hf-sort__option:hover
{
	background: var(--hf-color-band);
}

/* The current order: a line on the left, as the chosen one. */
.hf-sort__option[aria-current="page"]
{
	box-shadow: inset 3px 0 0 var(--hf-color-primary);
	background: var(--hf-color-band-soft);
}

/* Cards: one in a row on phones, two from 40em. */

.hf-inspirations-list__grid
{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hf-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-inspirations-list__item
{
	display: flex;
}

@media (min-width: 40em)
{
	.hf-inspirations-list__grid
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Nothing matches: the text and the way back. */
.hf-inspirations-list__empty
{
	padding: var(--hf-space-l);
	border-radius: var(--hf-radius-m);
	background: var(--hf-color-band-soft);
	font-size: var(--hf-text-control);
	line-height: 1.5;
	text-align: center;
}

.hf-inspirations-list__empty p
{
	max-width: 34em;
	margin: 0 auto var(--hf-space-s);
}

.hf-inspirations-list__reset
{
	color: var(--hf-color-heading);
	text-decoration-color: var(--hf-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.hf-inspirations-list__reset:hover
{
	color: var(--hf-color-primary-hover);
}

/* Page numbers: squares in the frames of the category links, the current
   one filled; „Następna” and „Poprzednia” wider, with an arrow. */

.hf-pagination
{
	margin-top: var(--hf-space-l);
}

.hf-pagination__list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-pagination__link
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-width: calc(var(--hf-button-height) * 0.86);
	min-height: calc(var(--hf-button-height) * 0.86);
	box-sizing: border-box;
	padding: 0 0.5em;
	border: 1px solid color-mix(in srgb, var(--hf-color-outline) 45%, transparent);
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-surface);
	color: var(--hf-color-heading);
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--hf-transition), border-color var(--hf-transition), color var(--hf-transition);
}

a.hf-pagination__link:hover
{
	border-color: var(--hf-color-primary);
}

.hf-pagination__link[aria-current="page"]
{
	border-color: var(--hf-color-primary);
	background: var(--hf-color-primary);
	color: var(--hf-color-on-dark);
}

.hf-pagination__link--step
{
	padding-inline: 1.25em;
}

.hf-pagination__icon
{
	flex: none;
	width: 1.1em;
	height: 1.1em;
	transition: transform var(--hf-transition);
}

.hf-pagination__link--step:hover .hf-pagination__icon
{
	transform: translateX(3px);
}

/* The same arrow, pointing back. The scale applies before the transform
   above, so the hover nudge moves it to the left. */
.hf-pagination__link--previous .hf-pagination__icon
{
	scale: -1 1;
}

.hf-pagination__gap
{
	padding-inline: 0.25em;
	color: var(--hf-color-text);
}