/**
 * LFBC All Posts (8-up, filterable) block — lfbc/all-posts
 *
 * Presentation for the plugin block: the filter bar, the responsive card grid,
 * and the numbered pager. The cards themselves are .lfbc-card-small markup, so
 * they inherit card-small.css; nothing here restyles the card interior.
 *
 * Layout responds to the block's own width via @container (matches the
 * hero/features/5050/card-group approach) so the editor canvas previews
 * correctly regardless of sidebar state:
 *   default        → 1 column (stacked)
 *   ≥ 640px  (sm)  → 2 columns
 *   ≥ 1024px (lg)  → 4 columns (2 rows of 8)
 *
 * Figma: filter node 9163-9637, pager node 9163-9644.
 */

.lfbc-all-posts {
	container-type: inline-size;
}

/* -------------------------------------------------------------------------
 * Filter bar — eyebrow label + a nootka-rose dropdown.
 * ------------------------------------------------------------------------- */

.lfbc-all-posts__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding-block: 2rem;
	padding-inline: clamp(16px, calc(2.46px + 3.78vw), 80px);
}

.lfbc-all-posts__filter-label {
	/* Ollie's parent sets `label { width:100%; display:block }`, which would push
	   the dropdown onto its own line — keep the label inline beside the select. */
	width: auto;
	flex: 0 0 auto;
	white-space: nowrap;
	margin: 0;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.42;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--soft-black-500);
}

.lfbc-all-posts__select-wrap {
	position: relative;
	display: inline-flex;
}

/* Native <select> styled to match the Figma dropdown. appearance:none strips
   the OS chrome so the custom caret (::after on the wrap) shows instead. */
.lfbc-all-posts__select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 162px;
	margin: 0;
	padding: 7px 38px 7px 13px;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--nootka-rose-900);
	border: 1px solid var(--wp--preset--color--nootka-rose-900);
	border-radius: 4px;
	cursor: pointer;
}

.lfbc-all-posts__select:focus-visible {
	outline: 2px solid var(--wp--preset--color--nootka-rose-900);
	outline-offset: 2px;
}

/* Caret — a white chevron drawn from an inline SVG mask so it recolors via
   background-color (matches the icon-mask technique used across the theme). */
.lfbc-all-posts__select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 13px;
	width: 12px;
	height: 8px;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}

/* Submit button — hidden by default; revealed only when JS is unavailable
   via the <noscript> rule the block prints. Styled to echo the dropdown. */
.lfbc-all-posts__filter-submit {
	display: none;
	align-items: center;
	padding: 8px 16px;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--nootka-rose-900);
	border: 1px solid var(--wp--preset--color--nootka-rose-900);
	border-radius: 4px;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Results region — swapped in place by view.js on filter/page changes.
 * ------------------------------------------------------------------------- */

.lfbc-all-posts__results {
	transition: opacity 150ms ease;
}

.lfbc-all-posts.is-loading .lfbc-all-posts__results {
	opacity: 0.5;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Card grid — 1 → 2 → 4 columns. Cells are .lfbc-card-small <section>s; reset
 * their pattern padding (the grid gap owns the spacing) and let card-small's
 * own CSS render + center the 320px card inside each cell.
 * ------------------------------------------------------------------------- */

.lfbc-all-posts__grid {
	display: grid;
	grid-template-columns: 1fr;
	/* All row tracks equal the tallest, so every card is the same height across
	   the whole grid (not just within its own row). */
	grid-auto-rows: 1fr;
	gap: 32px 24px;
	max-width: 1352px;
	margin-inline: auto;
}

/* Combined with grid-auto-rows:1fr above, every card is the same height across
   the whole grid. height:100% makes the card fill its stretched cell; card-small's
   __body already flex-grows so the arrow stays pinned to the bottom. */
.lfbc-all-posts__grid > .lfbc-card-small {
	padding: 0;
	align-items: stretch;
}

.lfbc-all-posts__grid > .lfbc-card-small .lfbc-card-small__card {
	height: 100%;
	/* card-small caps the card at 251px/320px and centers it; in this grid we
	   want each card to fill its 1fr cell so they grow/shrink with screen size
	   instead of snapping to fixed widths. */
	max-width: none;
}

/* Published date — sits directly under the card title (MMM DD, YYYY).
   Pulled up tight against the title so it reads as a subtitle rather than
   another gapped body row. */
.lfbc-all-posts__grid > .lfbc-card-small .lfbc-card-small__date {
	margin: -4px 0 0;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--wp--preset--color--soft-black-400);
}

.lfbc-all-posts__empty {
	margin: 0;
	padding: 48px 16px;
	text-align: center;
	color: var(--wp--preset--color--soft-black-400);
}

@container (min-width: 640px) {

	.lfbc-all-posts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (min-width: 1024px) {

	.lfbc-all-posts__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Pager — prev arrow · numbered pages (current filled) · next arrow.
 * ------------------------------------------------------------------------- */

.lfbc-all-posts__pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-block: 32px 40px;
	padding-inline: 16px;
}

.lfbc-all-posts__page,
.lfbc-all-posts__arrow,
.lfbc-all-posts__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	height: 46px;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
}

.lfbc-all-posts__page,
.lfbc-all-posts__arrow {
	padding-inline: 12px;
	color: var(--wp--preset--color--nootka-rose-900);
	background-color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.lfbc-all-posts__page:hover,
.lfbc-all-posts__arrow:hover {
	background-color: var(--wp--preset--color--oatmeal-700);
}

.lfbc-all-posts__page:focus-visible,
.lfbc-all-posts__arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--nootka-rose-900);
	outline-offset: 2px;
}

.lfbc-all-posts__page.is-current {
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--nootka-rose-900);
	pointer-events: none;
}

.lfbc-all-posts__ellipsis {
	color: var(--wp--preset--color--nootka-rose-900);
}

/* Arrows — share the theme's arrow-right.svg via mask; prev is mirrored. */
.lfbc-all-posts__arrow::before {
	content: "";
	width: 18px;
	height: 15px;
	background-color: var(--wp--preset--color--nootka-rose-900);
	-webkit-mask: url("../../images/patterns/icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../../images/patterns/icons/arrow-right.svg") no-repeat center / contain;
}

.lfbc-all-posts__arrow--prev::before {
	transform: scaleX(-1);
}

.lfbc-all-posts__arrow.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}