/**
 * benja/amulet-grid — layouts, filters, count, pagination, empty state.
 * Card anatomy lives in benja-blocks-shared (assets/css/blocks-shared.css).
 */

.benja-grid {
	container-type: inline-size;
	container-name: benja-grid;
	width: 100%;
	color: var(--benja-ink);
}

.benja-grid--spotlight {
	container-type: normal;
}

/* -------------------------------------------------------------------------- */
/* Grid & certificate layouts                                                 */
/* -------------------------------------------------------------------------- */

.benja-grid__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60, clamp(2rem, 1.5rem + 2vw, 3rem)) var(--wp--preset--spacing--50, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.benja-grid__item {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.benja-grid__item > .benja-card {
	flex: 1 1 auto;
}

/* Two cards side by side from about 20rem of width, i.e. on phones of 360px and up (SPEC §12). */
@container benja-grid (min-width: 20rem) {

	.benja-grid--grid .benja-grid__items,
	.benja-grid--certificate .benja-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container benja-grid (min-width: 20rem) and (max-width: 29.99rem) {

	.benja-grid--grid .benja-grid__items,
	.benja-grid--certificate .benja-grid__items {
		gap: var(--wp--preset--spacing--50, 1.5rem) 1rem;
	}

	/* Narrow two-up cards: a slightly smaller title, and long words may wrap. */
	.benja-grid--grid .benja-card__title,
	.benja-grid--certificate .benja-card__title {
		font-size: 1.1875rem;
		overflow-wrap: anywhere;
	}

	.benja-grid--grid .benja-card__foot {
		gap: 0.4rem 0.75rem;
	}

	/* "PRIVATE COLLECTION" (≈174px with its tracking) must wrap inside a ~160px card instead of spilling out. */
	.benja-grid--grid .benja-card__foot > * {
		min-width: 0;
		max-width: 100%;
	}

	.benja-grid--grid .benja-badge {
		white-space: normal;
		letter-spacing: 0.08em;
		line-height: 1.25;
		text-align: start;
	}

	:lang(th) .benja-grid--grid .benja-badge,
	:lang(zh) .benja-grid--grid .benja-badge {
		letter-spacing: 0.02em;
	}
}

@container benja-grid (min-width: 48rem) {

	.benja-grid--grid.benja-grid--cols-3 .benja-grid__items,
	.benja-grid--grid.benja-grid--cols-4 .benja-grid__items,
	.benja-grid--grid.benja-grid--cols-5 .benja-grid__items,
	.benja-grid--certificate.benja-grid--cols-3 .benja-grid__items,
	.benja-grid--certificate.benja-grid--cols-4 .benja-grid__items,
	.benja-grid--certificate.benja-grid--cols-5 .benja-grid__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container benja-grid (min-width: 64rem) {

	.benja-grid--grid.benja-grid--cols-4 .benja-grid__items,
	.benja-grid--grid.benja-grid--cols-5 .benja-grid__items,
	.benja-grid--certificate.benja-grid--cols-4 .benja-grid__items,
	.benja-grid--certificate.benja-grid--cols-5 .benja-grid__items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.benja-grid--grid .benja-grid__items {
		column-gap: var(--wp--preset--spacing--60, clamp(2rem, 1.5rem + 2vw, 3rem));
	}
}

@container benja-grid (min-width: 80rem) {

	.benja-grid--grid.benja-grid--cols-5 .benja-grid__items,
	.benja-grid--certificate.benja-grid--cols-5 .benja-grid__items {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------- */
/* Catalogue layout — editorial alternating rows                              */
/* -------------------------------------------------------------------------- */

.benja-grid--catalogue .benja-grid__items {
	display: block;
	counter-reset: none;
}

.benja-grid--catalogue .benja-grid__item {
	display: block;
	padding-block: var(--wp--preset--spacing--70, clamp(3rem, 2rem + 4vw, 5rem));
	border-top: var(--benja-hairline);
}

.benja-grid--catalogue .benja-grid__item:first-child {
	padding-top: var(--wp--preset--spacing--50, 1.5rem);
	border-top: 0;
}

/* Tablets (a ~44rem container at 768px): image and text side by side already, in equal halves. */
@container benja-grid (min-width: 36rem) {

	.benja-grid--catalogue .benja-card--catalogue {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--60, clamp(2rem, 1.5rem + 2vw, 3rem));
		align-items: center;
	}

	.benja-grid--catalogue .benja-grid__item:nth-child(even) .benja-card--catalogue .benja-card__media {
		order: 2;
	}
}

@container benja-grid (min-width: 48rem) {

	.benja-grid--catalogue .benja-card--catalogue {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--wp--preset--spacing--80, clamp(4.5rem, 3rem + 6vw, 8rem));
	}

	.benja-grid--catalogue .benja-grid__item:nth-child(even) .benja-card--catalogue {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.benja-grid--catalogue .benja-grid__item:nth-child(even) .benja-card--catalogue .benja-card__media {
		order: 2;
	}
}

/* -------------------------------------------------------------------------- */
/* Spotlight                                                                  */
/* -------------------------------------------------------------------------- */

.benja-grid__stage {
	width: 100%;
	max-width: 44rem;
	margin-inline: auto;
}

/* When the hero columns stack (core/columns below 782px) keep the object at a readable, not towering, size. */
@media (max-width: 781px) {
	.benja-grid__stage {
		max-width: 28rem;
	}
}

.benja-grid--spotlight .benja-card.is-empty .benja-card__media {
	aspect-ratio: 4 / 5;
}

.benja-grid--spotlight .benja-card.is-empty .benja-img-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	background-color: transparent;
	background-position: center 38%, center;
}

.benja-grid--spotlight .benja-card.is-empty .benja-card__media::before {
	inset: clamp(0.75rem, 3%, 1.25rem);
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------- */
/* Toolbar: filters + count                                                   */
/* -------------------------------------------------------------------------- */

.benja-grid__toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--60, clamp(2rem, 1.5rem + 2vw, 3rem));
}

.benja-grid__count {
	margin: 0;
	font-family: var(--benja-font-sans);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: var(--benja-tracking);
	text-transform: uppercase;
	color: var(--benja-muted);
	font-variant-numeric: tabular-nums lining-nums;
}

.benja-grid__toolbar.has-filters .benja-grid__count {
	order: -1;
}

@container benja-grid (min-width: 48rem) {

	.benja-grid__toolbar.has-filters {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--60, 3rem);
		align-items: start;
	}

	.benja-grid__toolbar.has-filters .benja-grid__count {
		order: 0;
		grid-column: 2;
		grid-row: 1;
		padding-block: 0.95rem 0.85rem;
		white-space: nowrap;
	}
}

.benja-filters {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

.benja-filters__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.benja-filters__list > li {
	margin: 0;
	padding: 0;
}

/* Availability — understated tabs on a hairline */
.benja-filters__list--status {
	gap: 0 clamp(1.25rem, 3vw, 2.25rem);
	border-bottom: var(--benja-hairline);
}

.benja-filters__link {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 0.55em;
	min-height: 2.75rem;
	padding-block: 0.95rem 0.85rem;
	font-family: var(--benja-font-sans);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--benja-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--benja-muted);
	transition: color 500ms var(--benja-ease);
}

.benja-filters__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--benja-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 700ms var(--benja-ease), background-color 500ms var(--benja-ease);
}

.benja-filters__link:hover,
.benja-filters__link:focus-visible {
	color: var(--benja-ink);
}

.benja-filters__link:hover::after {
	transform: scaleX(1);
}

.benja-filters__link[aria-current] {
	color: var(--benja-ink);
}

.benja-filters__link[aria-current]::after {
	height: 2px;
	bottom: -1px;
	background: var(--benja-ink);
	transform: scaleX(1);
}

.benja-filters__link:focus-visible,
.benja-filters__chip:focus-visible {
	outline: var(--benja-focus);
	outline-offset: 3px;
}

/* Types — hairline chips */
.benja-filters__list--types {
	gap: 0.5rem;
}

.benja-filters__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6em;
	min-height: 2.75rem;
	padding: 0.7rem 1rem 0.6rem;
	font-family: var(--benja-font-sans);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 400;
	line-height: 1.1;
	text-decoration: none;
	color: var(--benja-secondary);
	background: transparent;
	border: var(--benja-hairline);
	border-radius: var(--benja-radius);
	transition:
		color 450ms var(--benja-ease),
		background-color 450ms var(--benja-ease),
		border-color 450ms var(--benja-ease);
}

.benja-filters__chip:hover {
	color: var(--benja-ink);
	border-color: var(--benja-ink);
}

/* Selected type: an ink frame on paper with a gold count — lighter than a solid block beside the tab row. */
.benja-filters__chip[aria-current] {
	color: var(--benja-ink);
	background: var(--benja-surface);
	border-color: var(--benja-ink);
	box-shadow: inset 0 0 0 0.5px var(--benja-ink);
}

.benja-filters__count {
	font-family: var(--benja-font-sans);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--benja-muted);
	font-variant-numeric: tabular-nums lining-nums;
	transition: color 450ms var(--benja-ease);
}

.benja-filters__chip[aria-current] .benja-filters__count {
	color: var(--benja-gold-strong, #7a5f2e);
}

/*
 * Phones (SPEC §12): each filter row stays on one line and scrolls sideways, with snap points and a fading
 * trailing edge, instead of wrapping into many lines. view.js scrolls the active item into view.
 */
@container benja-grid (max-width: 47.99rem) {

	.benja-filters__list--status,
	.benja-filters__list--types {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-inline-end: 2.5rem;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	}

	/* Room for the focus outline, which the scrolling row would otherwise clip. */
	.benja-filters__list--types {
		margin-block: -0.3125rem;
		margin-inline-start: -0.3125rem;
		padding-block: 0.3125rem;
		padding-inline-start: 0.3125rem;
	}

	.benja-filters__list--status::-webkit-scrollbar,
	.benja-filters__list--types::-webkit-scrollbar {
		display: none;
	}

	.benja-filters__list > li {
		flex: none;
		scroll-snap-align: start;
	}

	.benja-filters__link,
	.benja-filters__chip {
		white-space: nowrap;
	}

	/* The row now clips its overflow: keep the active underline inside it. */
	.benja-filters__link::after,
	.benja-filters__link[aria-current]::after {
		bottom: 0;
	}

	.benja-filters__chip {
		min-height: 2.75rem;
		align-items: center;
	}
}

/* -------------------------------------------------------------------------- */
/* Pagination                                                                 */
/* -------------------------------------------------------------------------- */

.benja-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: var(--wp--preset--spacing--70, clamp(3rem, 2rem + 4vw, 5rem));
	padding-top: var(--wp--preset--spacing--50, 1.5rem);
	border-top: var(--benja-hairline-gold);
}

.benja-pagination__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.benja-pagination__pages > li {
	margin: 0;
	padding: 0;
}

.benja-pagination__page {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.35rem;
	font-family: var(--benja-font-display);
	font-size: var(--wp--preset--font-size--md, 1.25rem);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	color: var(--benja-muted);
	font-variant-numeric: lining-nums tabular-nums;
	background-image: linear-gradient(var(--benja-gold), var(--benja-gold));
	background-repeat: no-repeat;
	background-position: 50% calc(100% - 0.45rem);
	background-size: 0 1px;
	transition:
		color 450ms var(--benja-ease),
		background-size 600ms var(--benja-ease);
}

a.benja-pagination__page:hover,
a.benja-pagination__page:focus-visible {
	color: var(--benja-ink);
	background-size: 1rem 1px;
}

.benja-pagination__page.is-current {
	color: var(--benja-ink);
	background-image: linear-gradient(var(--benja-ink), var(--benja-ink));
	background-size: 1.1rem 1px;
}

.benja-pagination__gap {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem;
	font-family: var(--benja-font-display);
	color: var(--benja-muted);
}

.benja-pagination__step {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	min-height: 2.75rem;
	font-family: var(--benja-font-sans);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 500;
	letter-spacing: var(--benja-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--benja-ink);
	transition: color 450ms var(--benja-ease);
}

.benja-pagination__step .benja-icon {
	transition: transform 600ms var(--benja-ease);
}

a.benja-pagination__step:hover,
a.benja-pagination__step:focus-visible {
	color: var(--benja-gold-strong);
}

a.benja-pagination__step--prev:hover .benja-icon {
	transform: translateX(-0.3em);
}

a.benja-pagination__step--next:hover .benja-icon {
	transform: translateX(0.3em);
}

.benja-pagination__step.is-disabled {
	visibility: hidden;
}

.benja-pagination a:focus-visible {
	outline: var(--benja-focus);
	outline-offset: 3px;
}

@container benja-grid (max-width: 34rem) {

	.benja-pagination {
		justify-content: center;
	}

	/* Icon-only steps on narrow grids: keep a 44px square tap target (SPEC §12). */
	.benja-pagination__step {
		justify-content: center;
		min-width: 2.75rem;
	}

	.benja-pagination__step span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.benja-pagination__step.is-disabled {
		display: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Empty state                                                                */
/* -------------------------------------------------------------------------- */

.benja-grid__empty {
	display: grid;
	justify-items: center;
	gap: 1rem;
	padding: var(--wp--preset--spacing--70, clamp(3rem, 2rem + 4vw, 5rem)) 1.5rem;
	text-align: center;
	background: var(--benja-plinth);
	border-block: var(--benja-hairline-gold);
}

.benja-grid__empty-mark {
	position: relative;
	width: 0.75rem;
	height: 0.75rem;
	border: 1px solid var(--benja-gold);
	transform: rotate(45deg);
}

.benja-grid__empty-mark::after {
	content: "";
	position: absolute;
	inset: 0.2rem;
	background: var(--benja-gold);
}

.benja-grid__empty-text {
	max-width: 30rem;
	margin: 0;
	font-family: var(--benja-font-display);
	font-size: var(--wp--preset--font-size--lg, clamp(1.5rem, 1.25rem + 1vw, 2rem));
	font-weight: 300;
	font-style: italic;
	line-height: 1.3;
	color: var(--benja-secondary);
	text-wrap: balance;
}

/* -------------------------------------------------------------------------- */
/* Scroll reveal (CSS scroll-driven; static where unsupported)                */
/* -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		.benja-grid__item {
			animation: benja-grid-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		.benja-grid--catalogue .benja-grid__item .benja-card__numeral::after {
			animation: benja-grid-rule linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 40%;
		}
	}
}

@keyframes benja-grid-rise {

	from {
		opacity: 0;
		transform: translateY(1.75rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes benja-grid-rule {

	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Thai / Chinese: no uppercase tracking */
:lang(th) .benja-filters__link,
:lang(zh) .benja-filters__link,
:lang(th) .benja-grid__count,
:lang(zh) .benja-grid__count,
:lang(th) .benja-pagination__step,
:lang(zh) .benja-pagination__step {
	letter-spacing: 0.02em;
	text-transform: none;
}