/**
 * BENJA blocks — shared foundation (handle: benja-blocks-shared).
 *
 * Badges, prices, buttons, form controls, image placeholders, plinths, icons,
 * the amulet card (all four layouts) and the cross-document view-transition group.
 *
 * Every colour / motion value comes from theme tokens (theme.json) with a literal
 * fallback so the plugin still looks considered under any theme.
 * Flat selectors only (no CSS nesting).
 */

/* -------------------------------------------------------------------------- */
/* Local aliases — declared on each component so section-level overrides of   */
/* the preset variables (e.g. a Night Gallery band) are always respected.      */
/* -------------------------------------------------------------------------- */

:where([class*="wp-block-benja-"], .benja-grid, .benja-five, .benja-term-hero, .benja-cert-lookup, .benja-breadcrumb, .benja-datum, .benja-card, .benja-badge, .benja-price, .benja-btn, .benja-form, .benja-img-placeholder, .benja-plinth, .benja-eyebrow, .benja-preview-placeholder, .benja-cert-result) {
	--benja-base: var(--wp--preset--color--base, #f4efe6);
	--benja-surface: var(--wp--preset--color--surface, #fbf9f4);
	--benja-subtle: var(--wp--preset--color--subtle, #eae2d3);
	--benja-line: var(--wp--preset--color--line, #d6c9b2);
	--benja-muted: var(--wp--preset--color--muted, #6f665b);
	--benja-secondary: var(--wp--preset--color--secondary, #4b453d);
	--benja-ink: var(--wp--preset--color--contrast, #1c1915);
	--benja-gold: var(--wp--preset--color--accent, #b08d57);
	--benja-gold-strong: var(--wp--preset--color--accent-strong, #7a5f2e);
	--benja-lacquer: var(--wp--preset--color--lacquer, #7b2d26);
	--benja-hairline: var(--wp--custom--hairline, 1px solid rgb(28 25 21 / 0.14));
	--benja-hairline-gold: var(--wp--custom--hairline-gold, 1px solid rgb(176 141 87 / 0.55));
	--benja-ease: var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1));
	--benja-duration: var(--wp--custom--duration, 700ms);
	--benja-tracking: var(--wp--custom--tracking, 0.18em);
	--benja-radius: var(--wp--custom--radius, 2px);
	--benja-object-shadow: var(--wp--custom--object-shadow, drop-shadow(0 22px 28px rgb(46 34 18 / 0.18)) drop-shadow(0 3px 5px rgb(46 34 18 / 0.14)));
	--benja-plinth: var(--wp--custom--plinth, radial-gradient(120% 90% at 50% 30%, #fffdf8 0%, #f6f0e4 55%, #ece3d2 100%));
	--benja-font-display: var(--wp--preset--font-family--display, "Cormorant Garamond", "Noto Serif Thai", "Noto Serif SC", "Songti SC", serif);
	--benja-font-sans: var(--wp--preset--font-family--sans, "Jost", "Noto Sans Thai", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
	--benja-focus: 2px solid var(--wp--preset--color--accent-strong, #7a5f2e);
}

/* -------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* -------------------------------------------------------------------------- */

.benja-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.benja-eyebrow {
	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-gold-strong);
}

.benja-icon {
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.25em;
	overflow: visible;
}

/* -------------------------------------------------------------------------- */
/* Status badges — small-caps museum labels with a lozenge mark               */
/* -------------------------------------------------------------------------- */

.benja-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.5em 0.8em 0.45em;
	font-family: var(--benja-font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--benja-secondary);
	background: transparent;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 32%, transparent);
	border-radius: var(--benja-radius);
}

.benja-badge::before {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.45em;
	background: currentColor;
	transform: rotate(45deg);
}

.benja-badge--collection {
	color: var(--benja-muted);
}

.benja-badge--collection::before {
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
}

.benja-badge--available {
	color: var(--benja-gold-strong);
	border-color: var(--benja-gold);
}

.benja-badge--reserved {
	color: var(--benja-secondary);
}

.benja-badge--reserved::before {
	background: linear-gradient(135deg, currentColor 50%, transparent 50%);
	box-shadow: inset 0 0 0 1px currentColor;
}

.benja-badge--sold {
	color: var(--benja-lacquer);
	border-color: currentColor;
	border-color: color-mix(in srgb, var(--benja-lacquer) 45%, transparent);
}

/* -------------------------------------------------------------------------- */
/* Price                                                                      */
/* -------------------------------------------------------------------------- */

.benja-price {
	font-family: var(--benja-font-sans);
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--benja-ink);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

.benja-price__currency {
	font-weight: 300;
	color: var(--benja-secondary);
}

.benja-price__currency:first-child {
	margin-inline-end: 0.14em;
}

.benja-price--request {
	font-family: var(--benja-font-display);
	font-style: italic;
	letter-spacing: 0;
	color: var(--benja-muted);
	white-space: normal;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.benja-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	min-height: 3rem;
	padding: 0.85em 1.9em 0.8em;
	font-family: var(--benja-font-sans);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--benja-tracking);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: var(--benja-ink);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--benja-radius);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color 450ms var(--benja-ease),
		color 450ms var(--benja-ease),
		border-color 450ms var(--benja-ease);
}

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

.benja-btn .benja-icon {
	width: 1.35em;
	height: 1.35em;
	transition: transform 600ms var(--benja-ease);
}

.benja-btn--primary {
	color: var(--benja-surface);
	background: var(--benja-ink);
	border-color: var(--benja-ink);
}

.benja-btn--primary:hover,
.benja-btn--primary:focus-visible {
	color: var(--benja-surface);
	background: var(--benja-gold-strong);
	border-color: var(--benja-gold-strong);
}

.benja-btn--ghost {
	color: var(--benja-ink);
	border-color: currentColor;
	border-color: color-mix(in srgb, var(--benja-ink) 55%, transparent);
}

.benja-btn--ghost:hover,
.benja-btn--ghost:focus-visible {
	color: var(--benja-surface);
	background: var(--benja-ink);
	border-color: var(--benja-ink);
}

.benja-btn--link {
	min-height: 2.75rem;
	padding: 0;
	gap: 0.65em;
	border: 0;
	border-radius: 0;
	background-image: linear-gradient(var(--benja-gold), var(--benja-gold));
	background-repeat: no-repeat;
	background-position: 0 calc(50% + 0.95em);
	background-size: 100% 1px;
	transition:
		color 450ms var(--benja-ease),
		background-size 700ms var(--benja-ease);
}

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

.benja-btn--link:hover .benja-icon,
.benja-btn--link:focus-visible .benja-icon,
.benja-btn--ghost:hover .benja-icon--arrow-right,
.benja-btn--primary:hover .benja-icon--arrow-right {
	transform: translateX(0.3em);
}

.benja-btn[disabled],
.benja-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.benja-btn[aria-busy="true"] {
	cursor: progress;
}

/* -------------------------------------------------------------------------- */
/* Forms — underline inputs, hairline boxes for multi-line text               */
/* -------------------------------------------------------------------------- */

.benja-form {
	display: grid;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	font-family: var(--benja-font-sans);
	color: var(--benja-ink);
}

.benja-field {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.benja-label {
	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-secondary);
}

.benja-label .benja-required,
.benja-required {
	color: var(--benja-lacquer);
	text-decoration: none;
	margin-inline-start: 0.2em;
}

.benja-input {
	display: block;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.7rem 0 0.6rem;
	font-family: var(--benja-font-sans);
	font-size: max(1rem, var(--wp--preset--font-size--base, 1.0625rem));
	line-height: 1.5;
	color: var(--benja-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-bottom-color: color-mix(in srgb, var(--benja-ink) 58%, transparent);
	border-radius: 0;
	box-shadow: none;
	appearance: none;
	transition:
		border-color 400ms var(--benja-ease),
		box-shadow 400ms var(--benja-ease),
		background-color 400ms var(--benja-ease);
}

.benja-input::placeholder {
	color: var(--benja-muted);
	opacity: 1;
}

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

.benja-input:focus {
	outline: none;
}

.benja-input:focus-visible {
	outline: var(--benja-focus);
	outline-offset: 4px;
	border-bottom-color: var(--benja-gold-strong);
	box-shadow: 0 1px 0 0 var(--benja-gold-strong);
}

/*
 * Boxed controls carry side padding and borders: size them border-box so they never grow past their column
 * (a content-box width:100% textarea was 34px wider than the enquiry sheet on phones). The underline inputs
 * keep content-box on purpose (their height is min-height + vertical padding).
 */
textarea.benja-input,
.benja-form--boxed .benja-input {
	box-sizing: border-box;
	max-width: 100%;
}

textarea.benja-input {
	min-height: 11.25rem;
	padding: 0.85rem 1rem;
	resize: vertical;
	background: var(--benja-surface);
	border: 1px solid currentColor;
	/* 58 % ink: the border is the field's only boundary on a surface card — >= 3:1 (WCAG 1.4.11) in every style. */
	border-color: color-mix(in srgb, var(--benja-ink) 58%, transparent);
	border-radius: var(--benja-radius);
}

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

select.benja-input {
	padding-inline-end: 2rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5f2e' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.1rem center;
	background-size: 1.1rem;
}

.benja-form--boxed .benja-input {
	padding-inline: 1rem;
	background-color: var(--benja-surface);
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, var(--benja-ink) 58%, transparent);
	border-radius: var(--benja-radius);
}

.benja-input[aria-invalid="true"],
.benja-field.has-error .benja-input {
	border-color: var(--benja-lacquer);
	box-shadow: 0 1px 0 0 var(--benja-lacquer);
}

.benja-field__hint {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.5;
	color: var(--benja-muted);
}

.benja-field__error {
	display: flex;
	align-items: baseline;
	gap: 0.45em;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.5;
	color: var(--benja-lacquer);
}

.benja-field__error:empty {
	display: none;
}

.benja-field__error::before {
	content: "";
	flex: none;
	width: 0.4em;
	height: 0.4em;
	background: currentColor;
	transform: translateY(-0.1em) rotate(45deg);
}

.benja-choice {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.benja-choice input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--benja-ink);
}

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

.benja-form__status {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.6;
	color: var(--benja-secondary);
}

.benja-form__status:empty {
	display: none;
}

.benja-form__status.is-success,
.benja-form__status[data-state="success"] {
	padding: 1rem 1.25rem;
	color: var(--benja-ink);
	background: var(--benja-surface);
	border: var(--benja-hairline-gold);
	border-inline-start: 2px solid var(--benja-gold);
}

.benja-form__status.is-info,
.benja-form__status[data-state="info"] {
	padding: 0.85rem 1.1rem;
	color: var(--benja-secondary);
	background: var(--benja-surface);
	border: var(--benja-hairline);
}

.benja-form.is-busy,
.benja-form[aria-busy="true"] {
	cursor: progress;
}

.benja-form__status.is-error,
.benja-form__status[data-state="error"] {
	padding: 1rem 1.25rem;
	color: var(--benja-lacquer);
	background: var(--benja-surface);
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, var(--benja-lacquer) 40%, transparent);
	border-inline-start: 2px solid var(--benja-lacquer);
}

/* -------------------------------------------------------------------------- */
/* Plinth + image placeholder                                                 */
/* -------------------------------------------------------------------------- */

.benja-plinth {
	position: relative;
	isolation: isolate;
	background: var(--benja-plinth);
	border-radius: var(--benja-radius);
}

.benja-plinth img {
	object-fit: contain;
	filter: var(--benja-object-shadow);
}

.benja-img-placeholder {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 6rem;
	aspect-ratio: 3 / 4;
	background-color: var(--benja-subtle);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b08d57' stroke-width='.6'%3E%3Ccircle cx='40' cy='40' r='23' opacity='.5'/%3E%3Cpath d='M40 20 60 40 40 60 20 40Z' opacity='.75'/%3E%3Cpath d='M40 31 49 40 40 49 31 40Z' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"),
		var(--benja-plinth);
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: clamp(3rem, 30%, 5.5rem), cover;
	border-radius: var(--benja-radius);
}

/* -------------------------------------------------------------------------- */
/* Editor preview placeholder (server-rendered when nothing exists yet)        */
/* -------------------------------------------------------------------------- */

.benja-preview-placeholder {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
	text-align: center;
	color: var(--benja-secondary);
	background: var(--benja-plinth);
	border: 1px dashed var(--benja-gold);
	border-radius: var(--benja-radius);
}

.benja-preview-placeholder__mark {
	width: 0.7rem;
	height: 0.7rem;
	border: 1px solid var(--benja-gold);
	transform: rotate(45deg);
}

.benja-preview-placeholder__text {
	max-width: 32rem;
	margin: 0;
	font-family: var(--benja-font-display);
	font-size: var(--wp--preset--font-size--md, 1.25rem);
	font-style: italic;
	line-height: 1.4;
	text-wrap: balance;
}

/* -------------------------------------------------------------------------- */
/* Amulet card — shared anatomy                                               */
/* -------------------------------------------------------------------------- */

.benja-card {
	position: relative;
	min-width: 0;
	color: var(--benja-ink);
}

.benja-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1rem);
	height: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: var(--benja-radius);
	-webkit-tap-highlight-color: transparent;
}

.benja-card__link:hover {
	color: inherit;
}

.benja-card__link:focus-visible {
	outline: var(--benja-focus);
	outline-offset: 6px;
}

.benja-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	isolation: isolate;
	background: var(--benja-plinth);
	border-radius: var(--benja-radius);
}

/* gold mount frame that settles in on hover */
.benja-card__media::before {
	content: "";
	position: absolute;
	inset: clamp(0.5rem, 3.2%, 0.9rem);
	z-index: 3;
	border: var(--benja-hairline-gold);
	opacity: 0;
	transform: scale(1.02);
	pointer-events: none;
	transition:
		opacity 900ms var(--benja-ease),
		transform 1100ms var(--benja-ease);
}

/* soft floor shadow under the object */
.benja-card__media::after {
	content: "";
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: 4.5%;
	height: 5%;
	z-index: 0;
	background: radial-gradient(closest-side, rgb(46 34 18 / 0.2), rgb(46 34 18 / 0));
	pointer-events: none;
	transition:
		transform 1100ms var(--benja-ease),
		opacity 1100ms var(--benja-ease);
}

.benja-card__img,
.benja-card__media > .benja-img-placeholder {
	position: absolute;
	top: 7%;
	left: 10%;
	z-index: 1;
	width: 80%;
	height: 82%;
	min-height: 0;
	margin: 0;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: 50% 50%;
	filter: var(--benja-object-shadow);
	transition:
		opacity 850ms var(--benja-ease),
		transform 1200ms var(--benja-ease);
}

.benja-card__media > .benja-img-placeholder {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: none;
	background-color: transparent;
}

/*
 * Front → back cross-fade without the "dip": the reverse (stacked above the front) rises first
 * while the front stays solid underneath, then the front lets go. On leaving, the front returns
 * at once and the reverse withdraws a beat later. Both images never go half-transparent together.
 */
.benja-card__img--back {
	opacity: 0;
	transform: scale(0.985);
	transition:
		opacity 850ms var(--benja-ease) 180ms,
		transform 1200ms var(--benja-ease);
}

.benja-card__flip {
	position: absolute;
	right: clamp(0.85rem, 6%, 1.35rem);
	bottom: clamp(0.7rem, 4.5%, 1.1rem);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--benja-font-sans);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--benja-muted);
	transition: color 700ms var(--benja-ease);
}

.benja-card__flip::before {
	content: "";
	width: 1rem;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	transition: width 900ms var(--benja-ease);
}

.benja-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.3rem;
	padding-inline: 0.125rem;
}

.benja-card__index {
	font-family: var(--benja-font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--benja-muted);
	font-variant-numeric: tabular-nums lining-nums;
}

.benja-card__title {
	margin: 0.1rem 0 0;
	font-family: var(--benja-font-display);
	font-size: clamp(1.3rem, 1.15rem + 0.45vw, 1.55rem);
	font-weight: 400;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: var(--benja-ink);
	text-wrap: balance;
}

.benja-card__title-text {
	background-image: linear-gradient(var(--benja-gold), var(--benja-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 900ms var(--benja-ease);
}

.benja-card__meta {
	margin: 0;
	font-family: var(--benja-font-sans);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.55;
	color: var(--benja-muted);
}

.benja-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: var(--benja-hairline);
}

.benja-card__foot .benja-price {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* Hover (fine pointers only) and keyboard focus: front → back cross-fade. */
@media (hover: hover) and (pointer: fine) {

	.benja-card:hover .benja-card__media::before {
		opacity: 1;
		transform: scale(1);
	}

	.benja-card:hover .benja-card__img {
		transform: translateY(-1.2%) scale(1.03);
	}

	.benja-card:hover .benja-card__media::after {
		transform: scaleX(0.92);
		opacity: 0.8;
	}

	.benja-card--has-back:hover .benja-card__img--front {
		opacity: 0;
		transition:
			opacity 900ms var(--benja-ease) 240ms,
			transform 1200ms var(--benja-ease);
	}

	.benja-card--has-back:hover .benja-card__img--back {
		opacity: 1;
		transition-delay: 0ms;
	}

	.benja-card:hover .benja-card__flip {
		color: var(--benja-gold-strong);
	}

	.benja-card:hover .benja-card__flip::before {
		width: 2.25rem;
	}

	.benja-card:hover .benja-card__title-text {
		background-size: 100% 1px;
	}
}

.benja-card__link:focus-visible .benja-card__media::before {
	opacity: 1;
	transform: scale(1);
}

.benja-card--has-back .benja-card__link:focus-visible .benja-card__img--front {
	opacity: 0;
	transition:
		opacity 900ms var(--benja-ease) 240ms,
		transform 1200ms var(--benja-ease);
}

.benja-card--has-back .benja-card__link:focus-visible .benja-card__img--back {
	opacity: 1;
	transform: scale(1.03);
	transition-delay: 0ms;
}

.benja-card__link:focus-visible .benja-card__title-text {
	background-size: 100% 1px;
}

/*
 * Touch / coarse pointers: no hover swap, so neither the hint nor the reverse photograph is ever shown.
 * The back image is display:none — a lazy image without a layout box is never fetched, so phones only
 * download the fronts. With a keyboard on a touch device (iPad + keyboard) focus must not fade the front
 * out towards a reverse that is not there.
 */
@media (hover: none), (pointer: coarse) {

	.benja-card__flip,
	.benja-card__img--back {
		display: none;
	}

	.benja-card--has-back .benja-card__link:focus-visible .benja-card__img--front {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------- */
/* Card — catalogue (editorial row)                                           */
/* -------------------------------------------------------------------------- */

.benja-card--catalogue {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50, 1.5rem);
	align-items: center;
}

.benja-card--catalogue .benja-card__media {
	aspect-ratio: 4 / 5;
}

.benja-card--catalogue .benja-card__img {
	top: 8%;
	left: 12%;
	width: 76%;
	height: 80%;
}

.benja-card--catalogue .benja-card__body {
	gap: 0.6rem;
	max-width: 36rem;
}

.benja-card__numeral {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 0.5rem;
	font-family: var(--benja-font-display);
	font-size: clamp(3.75rem, 2.75rem + 4vw, 7.5rem);
	font-weight: 300;
	font-style: italic;
	line-height: 0.8;
	letter-spacing: -0.02em;
	color: var(--benja-gold);
	font-variant-numeric: oldstyle-nums proportional-nums;
}

.benja-card__numeral::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--benja-gold);
	opacity: 0.5;
	transform-origin: left center;
}

.benja-card--catalogue .benja-card__title {
	font-size: var(--wp--preset--font-size--xl, clamp(2rem, 1.5rem + 2vw, 3rem));
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.benja-card__title-link {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--benja-gold), var(--benja-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 900ms var(--benja-ease);
}

/* stretched link: the whole row is clickable, one tab stop */
.benja-card__title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
}

.benja-card__title-link:focus-visible {
	outline: none;
}

.benja-card--catalogue:has(.benja-card__title-link:focus-visible) {
	outline: var(--benja-focus);
	outline-offset: 8px;
}

@supports not selector(:has(a)) {

	.benja-card__title-link:focus-visible {
		outline: var(--benja-focus);
		outline-offset: 4px;
	}
}

.benja-card--catalogue:hover .benja-card__title-link,
.benja-card__title-link:focus-visible {
	background-size: 100% 1px;
}

.benja-card__excerpt {
	margin: 0.4rem 0 0;
	font-family: var(--benja-font-sans);
	font-size: var(--wp--preset--font-size--base, 1.0625rem);
	line-height: 1.7;
	color: var(--benja-secondary);
	text-wrap: pretty;
}

.benja-card__facts {
	display: grid;
	gap: 0;
	margin: 0.75rem 0 0;
	padding: 0;
	border-top: var(--benja-hairline);
}

.benja-card__facts > div {
	display: grid;
	grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr);
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: var(--benja-hairline);
}

.benja-card__facts dt {
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--benja-muted);
}

.benja-card__facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.6;
	color: var(--benja-ink);
}

.benja-card--catalogue .benja-card__foot {
	justify-content: flex-start;
	margin-top: 0.75rem;
	padding-top: 0;
	border-top: 0;
}

.benja-card--catalogue .benja-card__foot .benja-price {
	font-size: var(--wp--preset--font-size--base, 1.0625rem);
}

.benja-card__cta {
	align-self: flex-start;
	margin-top: 0.75rem;
}

.benja-card--catalogue:hover .benja-card__cta {
	color: var(--benja-gold-strong);
}

.benja-card--catalogue:hover .benja-card__cta .benja-icon {
	transform: translateX(0.3em);
}

/* -------------------------------------------------------------------------- */
/* Card — spotlight (hero object on a tall plinth)                            */
/* -------------------------------------------------------------------------- */

.benja-card--spotlight .benja-card__link {
	gap: var(--wp--preset--spacing--50, 1.5rem);
}

.benja-card--spotlight .benja-card__media {
	aspect-ratio: 4 / 5;
	box-shadow: 0 40px 60px -48px rgb(46 34 18 / 0.35);
}

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

.benja-card--spotlight .benja-card__img {
	top: 9%;
	left: 16%;
	width: 68%;
	height: 67%;
	z-index: 2;
	object-position: 50% 100%;
}

.benja-card--spotlight .benja-card__media::after {
	left: 24%;
	right: 24%;
	bottom: 21.5%;
	height: 3.5%;
	z-index: 1;
}

.benja-card__ledge {
	position: absolute;
	left: 11%;
	right: 11%;
	bottom: 11%;
	height: 12.5%;
	z-index: 0;
	/* Theme token so dark style variations get a dark ledge (Night Gallery). */
	background: var(--wp--custom--ledge, linear-gradient(to bottom, rgb(255 253 248 / 0.95) 0%, rgb(240 232 216 / 0.9) 70%, rgb(226 215 195 / 0.9) 100%));
	border-top: var(--benja-hairline-gold);
	box-shadow: 0 26px 30px -26px rgb(46 34 18 / 0.4);
}

.benja-card--spotlight .benja-card__flip {
	bottom: auto;
	top: clamp(1.4rem, 6%, 2rem);
	right: clamp(1.4rem, 7%, 2.2rem);
}

.benja-card__caption {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.25rem 1.5rem;
	padding-top: 1rem;
	border-top: var(--benja-hairline-gold);
}

.benja-card__caption > * {
	grid-column: 1;
}

.benja-card__caption .benja-card__foot {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: start;
	flex-direction: column;
	align-items: flex-end;
	margin: 0;
	padding: 0;
	border: 0;
}

.benja-card--spotlight .benja-card__title {
	font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
	font-weight: 400;
	font-style: italic;
}

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

	.benja-card--spotlight .benja-card__img--front {
		animation: benja-emerge 1600ms var(--benja-ease) 150ms backwards;
	}

	.benja-card--spotlight .benja-card__ledge {
		animation: benja-fade 1400ms var(--benja-ease) backwards;
	}
}

@keyframes benja-emerge {

	from {
		opacity: 0;
		transform: translateY(3%) scale(0.985);
	}

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

@keyframes benja-fade {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------- */
/* Card — certificate (documentation gallery)                                 */
/* -------------------------------------------------------------------------- */

.benja-card__media--document {
	aspect-ratio: 4 / 3;
}

.benja-card__media--document .benja-card__img {
	top: 9%;
	left: 8%;
	width: 84%;
	height: 82%;
	filter: drop-shadow(0 10px 14px rgb(46 34 18 / 0.14)) drop-shadow(0 1px 2px rgb(46 34 18 / 0.12));
}

.benja-card__media--document::after {
	display: none;
}

.benja-card__cert {
	font-family: var(--benja-font-sans);
	font-size: var(--wp--preset--font-size--md, 1.25rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.06em;
	color: var(--benja-ink);
	font-variant-numeric: tabular-nums lining-nums;
	overflow-wrap: anywhere;
}

/* Phones: a full-length number (AML + 11 digits) stays on one line in the two-column gallery instead of
   breaking mid-number; the size follows the grid's width (cqi) and never exceeds the desktop size. */
.benja-card--certificate .benja-card__cert {
	font-size: clamp(0.9375rem, 4.4cqi, var(--wp--preset--font-size--md, 1.25rem));
}

.benja-card--certificate .benja-card__title {
	font-size: var(--wp--preset--font-size--md, 1.25rem);
	font-style: italic;
}

/* -------------------------------------------------------------------------- */
/* Reduced motion                                                             */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.benja-card__img,
	.benja-card__media::before,
	.benja-card__media::after,
	.benja-card__flip::before,
	.benja-btn,
	.benja-btn .benja-icon {
		transition-duration: 1ms;
	}

	.benja-card__img {
		transition: opacity 250ms linear !important;
	}

	.benja-card .benja-card__img,
	.benja-card:hover .benja-card__img,
	.benja-card--has-back .benja-card__link:focus-visible .benja-card__img--back {
		transform: none !important;
	}

	.benja-card--spotlight .benja-card__img--front,
	.benja-card--spotlight .benja-card__ledge {
		animation: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Thai / Chinese: no uppercase tracking                                      */
/* -------------------------------------------------------------------------- */

:lang(th) .benja-eyebrow,
:lang(zh) .benja-eyebrow,
:lang(th) .benja-badge,
:lang(zh) .benja-badge,
:lang(th) .benja-btn,
:lang(zh) .benja-btn,
:lang(th) .benja-label,
:lang(zh) .benja-label,
:lang(th) .benja-card__index,
:lang(zh) .benja-card__index,
:lang(th) .benja-card__flip,
:lang(zh) .benja-card__flip,
:lang(th) .benja-card__facts dt,
:lang(zh) .benja-card__facts dt {
	letter-spacing: 0.02em;
	text-transform: none;
}

:lang(th) .benja-card__meta,
:lang(th) .benja-card__excerpt,
:lang(th) .benja-field__hint {
	line-height: 1.85;
}

/* -------------------------------------------------------------------------- */
/* Cross-document view transition: grid card image → single-amulet stage      */
/* (names are assigned by amulet-grid/view.js and the amulet-viewer block)     */
/* -------------------------------------------------------------------------- */

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

	::view-transition-group(benja-amulet) {
		animation-duration: 750ms;
		animation-timing-function: var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1));
	}

	::view-transition-old(benja-amulet),
	::view-transition-new(benja-amulet) {
		width: 100%;
		height: 100%;
		object-fit: contain;
		animation-duration: 750ms;
		animation-timing-function: var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1));
	}
}

@media (prefers-reduced-motion: reduce) {

	::view-transition-group(benja-amulet),
	::view-transition-old(benja-amulet),
	::view-transition-new(benja-amulet),
	::view-transition-image-pair(benja-amulet) {
		animation: none !important;
	}
}

/* ==========================================================================
   Photo presentation: "Blended" (Settings → Commerce → Photographs)
   White / very light photo backgrounds melt into the plinth (multiply), so the object appears to stand on the
   display. The rectangular drop-shadow is dropped (it would outline the photo); the plinth's floor shadow stays.
   The Night Gallery style variation sets --wp--custom--image-blend to "normal" and restores the object shadow via
   --wp--custom--image-blend-filter (multiply would darken photos on a dark plinth).
   ========================================================================== */

.benja-photos-blend :is(.benja-plinth, .benja-card__media, .benja-viewer__stage, .benja-viewer__thumb, .benja-five__media, .benja-term-hero__media) {
	isolation: isolate;
}

.benja-photos-blend :is(.benja-plinth img, .benja-card__img, .benja-viewer__img, .benja-viewer__thumb-img, .benja-five__img, .benja-term-hero__img, .benja-lightbox__img) {
	mix-blend-mode: var(--wp--custom--image-blend, multiply);
	filter: var(--wp--custom--image-blend-filter, none);
}