/*
 * Single artwork detail view (single-product.php — task #56).
 *
 * Implements docs/17_VISUAL_DESIGN.md, "Single artwork". Loaded only on the
 * WooCommerce single-product view (see inc/enqueue.php) — never sitewide.
 *
 * Mobile-first: base rules target ~375px (image first, stacked info
 * column below); a min-width media query introduces the side-by-side
 * layout at >=1024px (agency standard, .claude/rules — no max-width
 * cascades). All color/type values come from theme.json via the CSS
 * custom properties WordPress generates from it (--wp--preset--*) — no
 * hex/font literals here, per docs/17 "Hard rules" #1.
 */

/* Generous side margins on the single view: "art never touches the
 * viewport edge" (docs/17). Widens .site-main's base 1rem padding once
 * there is room to spare, without touching .site-main on any other view. */
@media (min-width: 1024px) {
	body.single-product .site-main {
		padding-left: 48px;
		padding-right: 48px;
	}
}

/* Image first, stacked, on narrow screens; two-column (~62/38) once
 * >=1024px, image column first (source order already puts the media
 * block before .summary, so no explicit grid-column reordering is
 * needed). */
body.single-product div.product {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--gutter-mobile, 16px);
}

@media (min-width: 1024px) {
	body.single-product div.product {
		display: grid;
		grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
		align-items: start;
		gap: clamp(2rem, 4.5vw, 4.5rem);
	}
}

/* Artwork presented as an EXHIBIT (docs/17 v2 "Single artwork": "artwork on
 * surface exhibit card (same treatment as hero) max-height 76vh contain") —
 * surface bg, hairline border, soft two-layer shadow, generous inner
 * padding, mirroring `.jost-snoj-hero__media` (assets/css/front-page.css).
 * `align-self: start` keeps the card from stretching to match the info
 * column's height in the desktop grid.
 *
 * `min-width: 0` is load-bearing, not decorative: below 1024px this element
 * is itself a flex item of `body.single-product div.product`'s column flex
 * layout (rule above), and a flex item's automatic minimum width defaults
 * to its content's intrinsic size, not `0`. A wide-intrinsic-size landscape
 * photo (e.g. a 1600px-wide `<img>`) inside it therefore refused to shrink
 * below that intrinsic width no matter how narrow the viewport was,
 * overflowing the viewport horizontally at 390px — confirmed live (a
 * Skeptik-caught regression in this same task: the exhibit-card padding/
 * border/shadow added here did not itself cause it, but this rule pre-dates
 * that finding and was the missing piece). `min-width: 0` overrides that
 * default so the item — and, in turn, the `img` inside it via `max-width:
 * 100%`/`object-fit: contain` below — can shrink to fit the viewport. */
.jost-snoj-artwork__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--custom--shadow--exhibit);
	padding: clamp(1.4rem, 3vw, 3rem);
	align-self: start;
}

/* The `<img>` is, in turn, a flex item of `.jost-snoj-artwork__media` itself
 * (a flex container per the rule above) — the same automatic-minimum-size
 * default applies one level down, so `min-width: 0` is needed here too for
 * the image to actually shrink with its container instead of relying on
 * the container alone. `width: auto` + `max-width: 100%` (sitewide default,
 * assets/css/style.css) + `object-fit: contain` together let the image
 * scale down to fit while never upscaling past its intrinsic size. */
.jost-snoj-artwork__media img {
	min-width: 0;
	max-height: 76vh;
	width: auto;
	object-fit: contain;
}

.jost-snoj-artwork__media .jost-snoj-artwork-placeholder {
	width: 40%;
	height: 40%;
	min-height: 240px;
	border: 1px dashed var(--wp--preset--color--line);
}

body.single-product .summary.entry-summary {
	max-width: 44em;
	padding-top: 0.4rem;
}

/*
 * WooCommerce's own default stylesheet (assets/css/woocommerce-layout.css,
 * loaded sitewide including this single-product view — unlike the shop/
 * taxonomy archive, see inc/enqueue.php's
 * jost_snoj_disable_woocommerce_default_styles() docblock, which
 * deliberately scopes that dequeue to the archive only) sets
 * `.woocommerce div.product div.summary{width:48%;float:right}` —
 * specificity (0,3,2). Confirmed live: the info column measured ~190px
 * wide (48% of its ~398px grid track) instead of the track's full width,
 * wrapping the meta line and starving every child element of the space
 * the 62/38 grid track already gives it. The rule above (specificity
 * (0,3,1): one fewer element in the selector) is not enough to win a
 * property both rules declare, so the reset below repeats the `div.product`
 * ancestor already used by the grid rule two rules up to reach a higher
 * specificity (0,4,2) and actually override `width`/`float`. Same bug
 * class, same fix shape, as the `li.product` float/width reset in
 * assets/css/catalog.css (see that file's docblock / ADR-024).
 */
body.single-product div.product .summary.entry-summary {
	width: auto;
	float: none;
	position: static;
}

/* Breadcrumb row: "Catalogue / Section" (docs/17 v2 "breadcrumb label
 * row"), matching the mockup's `.crumb.label` — uppercase, tracked-out,
 * muted, links accent on hover. */
.jost-snoj-artwork__crumb {
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1.8rem;
}

.jost-snoj-artwork__crumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.jost-snoj-artwork__crumb a:hover,
.jost-snoj-artwork__crumb a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Title: kept as WooCommerce's own default h1 (woocommerce_template_single_title);
 * only its type treatment changes here. */
body.single-product .product_title.entry-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem);
	line-height: 1.15;
	color: var(--wp--preset--color--foreground);
	margin: 0 0 0.9rem;
}

/* When a translation line follows the heading (every language except
 * Slovenian, and only where the translation actually differs), the two are
 * one title — so the gap between them closes and the 1.4rem below the
 * translation becomes the gap to the meta line instead. Progressive
 * enhancement: a browser without `:has()` keeps the 0.9rem default, which
 * is looser than intended but never broken. */
body.single-product .product_title.entry-title:has(+ .jost-snoj-artwork__title-translation) {
	margin-bottom: 0.35rem;
}

/* Year / medium / dimensions: one plain (not small-caps) muted line, tabular
 * numerals, "·" separators generated in CSS (mirrors .jost-snoj-card__meta
 * in catalog.css) so no separator character is hardcoded into a
 * translatable string — mockup `.meta`. */
.jost-snoj-artwork__meta {
	display: flex;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1.6rem;
}

.jost-snoj-artwork__meta-item--year,
.jost-snoj-artwork__meta-item--dimensions {
	font-variant-numeric: tabular-nums;
}

.jost-snoj-artwork__meta-item:not(:first-child)::before {
	content: "\00b7";
	margin: 0 0.5em;
}

/* Availability: uppercase small-caps label + a 7px "available"-token dot
 * (docs/17 v2: "availability with 7px green (#5B8A5E) dot + small-caps") —
 * mockup `.avail`. */
.jost-snoj-artwork__availability {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 2rem;
}

.jost-snoj-artwork__availability::before {
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--available);
}

/*
 * Enquiry CTA + form: docs/17 v2 "poln solid CTA" — full-width solid block
 * button, same type treatment as the sitewide `.jost-snoj-btn--solid`
 * component (assets/css/style.css: 0.72rem/0.14em uppercase, hover ->
 * `accent-ink`), positioned between availability and the collection link.
 * A native <details>/<summary> disclosure — no JS toggle, no animation (see
 * inc/enquiry-form.php docblock).
 */
.jost-snoj-enquiry {
	margin: 0 0 1.4rem;
}

.jost-snoj-enquiry__status {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.85rem;
	color: var(--wp--preset--color--foreground);
}

.jost-snoj-enquiry__status--success {
	border-color: var(--wp--preset--color--accent);
}

/* Removes the default disclosure triangle so the <summary> reads as a
 * plain block button, per docs/17 — Firefox honours list-style on
 * <summary>; WebKit/Blink need the marker pseudo-element hidden instead. */
.jost-snoj-enquiry__toggle {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.95rem 1.9rem;
	border: 1px solid var(--wp--preset--color--foreground);
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: center;
	list-style: none;
	cursor: pointer;
}

.jost-snoj-enquiry__toggle::-webkit-details-marker {
	display: none;
}

.jost-snoj-enquiry__toggle:hover,
.jost-snoj-enquiry__toggle:focus-visible {
	background-color: var(--wp--preset--color--accent-ink);
	border-color: var(--wp--preset--color--accent-ink);
}

.jost-snoj-enquiry__details[open] .jost-snoj-enquiry__toggle {
	margin-bottom: 16px;
}

.jost-snoj-enquiry__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 4px;
}

.jost-snoj-enquiry__hint {
	margin: -8px 0 0;
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
}

.jost-snoj-enquiry__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.jost-snoj-enquiry__field label {
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
}

.jost-snoj-enquiry__field input,
.jost-snoj-enquiry__field textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--text);
	font-size: 1rem;
}

.jost-snoj-enquiry__field textarea {
	min-height: 120px;
	resize: vertical;
}

/* Honeypot: off-screen, not display:none/visibility:hidden (some bots
 * skip those checks and still fill genuinely invisible fields), and
 * separately removed from the tab order/accessibility tree via the
 * tabindex="-1"/aria-hidden="true" markup in inc/enquiry-form.php. */
.jost-snoj-enquiry__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* GDPR consent checkbox (privacy/enquiry-consent task). Row min-height 44px
 * and 8px gap meet the agency's touch-target/spacing standard even though
 * the native checkbox itself is small; the `<label>` (linked via `for`)
 * extends the clickable area across the whole row's text, and the nested
 * link keeps normal link-click behaviour (see inc/enquiry-form.php). */
.jost-snoj-enquiry__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 6px 0;
}

.jost-snoj-enquiry__consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
}

.jost-snoj-enquiry__consent label {
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--foreground);
}

.jost-snoj-enquiry__consent a {
	color: var(--wp--preset--color--accent);
}

.jost-snoj-enquiry__submit {
	align-self: flex-start;
	min-height: 44px;
	padding: 10px 24px;
	border: 0;
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.jost-snoj-enquiry__submit:hover,
.jost-snoj-enquiry__submit:focus-visible {
	background-color: var(--wp--preset--color--accent);
}

/* "From the series X" — mockup `.work-sec`: muted line, only the series
 * name itself in accent, no underline (hover -> accent-ink). */
.jost-snoj-artwork__collection {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.jost-snoj-artwork__collection a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.jost-snoj-artwork__collection a:hover,
.jost-snoj-artwork__collection a:focus-visible {
	color: var(--wp--preset--color--accent-ink);
}

/* Title translation, directly under the h1 — mockup `.work-title-xlat`.
 *
 * Task "Večjezičnost 4/4" inverted this pair: the h1 is now the artist's
 * Slovenian original in every language, and THIS is the title in the
 * language of the page. It keeps the italic muted serif treatment the
 * Slovenian line used to have at the foot of the column (mockup `.work-sl`),
 * but without that block's top hairline and 3.2rem gap — it now belongs to
 * the heading above it, so it sits tight against it and the h1's own
 * `margin-bottom` is what separates the pair from the meta line below.
 *
 * Deliberately NOT smaller than 0.98rem: `muted` on `background` is 5.3:1,
 * which clears WCAG 2.2 AA 1.4.3 (4.5:1) for normal-size text, and this
 * line is real content — a visitor reading the Spanish site relies on it to
 * know what the painting is called. Shrinking it further to make it quieter
 * would trade away the one thing it exists to do. */
.jost-snoj-artwork__title-translation {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 0.98rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1.4rem;
}

/* Prev/next navigation: bottom of page, text-only links, thin top rule —
 * mockup `.prevnext`. Deliberately no separate max-width/side-padding of
 * its own: this <nav> is a direct sibling of div.product inside the same
 * `.site-main` container (see single-product.php), so it already lines up
 * with the artwork grid above it via that shared container. */
.jost-snoj-artwork__adjacent-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin: 48px 0 0;
	padding: 1.6rem 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.jost-snoj-artwork__adjacent-link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	max-width: 42%;
	/* >=44px tap target (agency standard) even though this reads as a
	 * plain text link, not a button. */
	min-height: 44px;
	padding: 8px 4px;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	text-decoration: none;
}

.jost-snoj-artwork__adjacent-link--next {
	text-align: right;
	margin-left: auto;
}

.jost-snoj-artwork__adjacent-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.jost-snoj-artwork__adjacent-title {
	font-family: var(--wp--preset--font-family--display);
}

.jost-snoj-artwork__adjacent-link:hover,
.jost-snoj-artwork__adjacent-link:focus-visible {
	color: var(--wp--preset--color--accent);
}