/*
 * Front page (front-page.php): hero (one curated artwork, presented as an
 * exhibit) + selected-works grid + catalogue CTA.
 *
 * Implements docs/17_VISUAL_DESIGN.md v2, "Front page (front-page.php)" and
 * the "Hero (front page)" v2 key-change entry — mirrors the authoritative
 * mockup (wordpress/mockup/podoba-v2.html?p=home) pixel-close at 1280px and
 * 390px. Loaded only on the site's front page (see inc/enqueue.php) — never
 * sitewide.
 *
 * Mobile-first: base rules target ~375px (hero image above content, grid at
 * 1 column); min-width media queries widen the layout upward (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--*/--wp--custom--*) — no hex/font literals here,
 * per docs/17 "Hard rules" #1.
 *
 * The selected-works grid deliberately reuses the `.jost-snoj-card__*` class
 * names already established by assets/css/catalog.css for the exact same
 * visual language ("standard grid", docs/17), but restates the rules here
 * rather than relying on catalog.css being loaded: this stylesheet is
 * enqueued only on the front page, catalog.css only on the WooCommerce
 * archive, and the two views never load both files at once.
 */

.front-page {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/*
 * Hero: image above content on narrow screens; side-by-side (7fr image /
 * 5fr info column) from 1024px up, matching the mockup's `.hero{grid-
 * template-columns:minmax(0,7fr) minmax(0,5fr)}` exactly. CSS grid (not
 * flexbox) at the desktop breakpoint so the 7:5 ratio is exact; the
 * `--no-media` modifier collapses back to a single column for the
 * documented empty-catalogue edge case (front-page.php adds this class
 * whenever the hero media block is omitted from source), since a
 * two-column grid with only one occupied track would otherwise leave an
 * empty second column instead of letting the info column fill the row.
 */
.jost-snoj-hero {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--gutter-desktop, 24px);
	padding: clamp(1.5rem, 4vh, 3rem) 0;
}

@media (min-width: 1024px) {
	.jost-snoj-hero {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
		gap: clamp(2rem, 5vw, 5rem);
	}

	.jost-snoj-hero.jost-snoj-hero--no-media {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Hero media: the artwork presented as an EXHIBIT (docs/17 v2 "Hero" entry)
 * — surface card, hairline border, soft two-layer shadow, generous inner
 * padding, with a caption row below the image inside the same card.
 */
.jost-snoj-hero__media {
	display: flex;
	flex-direction: column;
	margin: 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.2rem, 3vw, 2.6rem);
}

.jost-snoj-hero__media img {
	width: 100%;
	height: auto;
	max-height: 74vh;
	object-fit: contain;
}

.jost-snoj-hero__media .jost-snoj-artwork-placeholder {
	width: 60%;
	height: 60%;
	min-height: 240px;
	align-self: center;
	border: 1px dashed var(--wp--preset--color--line);
}

/* Caption row below the exhibit image: Slovenian title italic serif left,
 * "year · medium" muted right — mockup `.hero-cap`. */
.jost-snoj-hero__caption {
	margin-top: 0.9rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

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

.jost-snoj-hero__caption-meta {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jost-snoj-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* Kicker label: "Painter · Slovenia" — mockup `.label` treatment (uppercase,
 * tracked-out, muted). */
.jost-snoj-hero__kicker {
	margin: 0;
	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);
}

.jost-snoj-hero__artist {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.6rem, 5vw, 3.8rem);
	line-height: 1.08;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--foreground);
	margin: 0;
}

/* Slovenian-language subtitle — the artist's own tagline in the source
 * language, shown alongside the English lead paragraph below (docs/17 v2
 * "Hero" entry: "SL subtitle italic muted 1.15rem"). This is fixed hero
 * copy, like the English tagline, not per-artwork metadata. */
.jost-snoj-hero__subtitle-sl {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--wp--preset--color--muted);
	margin: 0.9rem 0 0;
}

.jost-snoj-hero__rule {
	width: 56px;
	height: 1px;
	background-color: var(--wp--preset--color--accent);
	margin: 1.6rem 0 0;
}

.jost-snoj-hero__tagline {
	font-family: var(--wp--preset--font-family--text);
	font-size: 1.02rem;
	color: var(--wp--preset--color--foreground);
	max-width: 34ch;
	margin: 1.6rem 0 0;
}

/*
 * The hero CTA's visual appearance (outline style, invert on hover) is the
 * shared v2 button component, `.jost-snoj-btn` (assets/css/style.css) —
 * front-page.php applies it directly on the `<a>` alongside this class,
 * which only adds the spacing above it that the mockup's block-flow margin
 * collapsing would otherwise produce.
 */
.jost-snoj-hero__cta {
	margin-top: 2.2rem;
}

/* Section head: heading + "View all N works" link on one row, matching the
 * mockup's `.sec-head` (heading left, uppercase accent-colored link right). */
.jost-snoj-front-grid-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.jost-snoj-front-grid__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 16px;
}

#jost-snoj-front-grid-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.7rem, 1.6rem + 0.6vw, 1.9rem);
	color: var(--wp--preset--color--foreground);
	margin: 0;
}

.jost-snoj-front-grid__all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 4px;
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	white-space: nowrap;
}

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

.jost-snoj-front-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--wp--custom--spacing--gutter-mobile, 16px);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.jost-snoj-front-grid {
		gap: var(--wp--custom--spacing--gutter-desktop, 24px);
	}
}

/* `min-width: 0` on the grid item and the flex link inside it: both default
 * to a `min-width: auto` floor equal to their content's min-content width,
 * which the new nowrap legend line (`.jost-snoj-card__specs`, below) would
 * otherwise raise to the full untruncated "technique · W × H cm" string —
 * widening the grid track past the viewport at 390px instead of letting the
 * specs cell ellipse. Same guard assets/css/catalog.css already applies to
 * `li.product` and the loop link for the equivalent <img> intrinsic-width
 * case. See https://css-tricks.com/preventing-a-grid-blowout/. */
.jost-snoj-front-grid__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.jost-snoj-front-grid__link {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

/* Card media: 4:5 exhibit tile — surface bg, hairline border, flex-centred
 * image with object-fit:contain and 9% inner padding (docs/17 "Catalog
 * cards"/mockup `.card-media`), shadow on hover/focus.
 *
 * `overflow: hidden` on the tile plus `width/height: 100%` (not `max-width/
 * max-height: 100%`) on the <img> is deliberate, not cosmetic: a percentage
 * `height`/`max-height` on a replaced element only resolves against a
 * *definite* ancestor height, and this tile's height comes from
 * `aspect-ratio` computed from a CSS Grid auto-fill track — under real
 * network timing (confirmed on the live front page: the first "Selected
 * works" tile rendered as a blank white box at both 1280px and 390px,
 * reproducible across fresh/incognito loads, worse still when every image
 * was forced `loading="eager"`) that percentage failed to resolve in time
 * and the image never got a usable box. `width/height: 100%` are always
 * definite percentages of this flex item's own resolved box regardless of
 * load timing, so the <img> always has a real box to paint into;
 * `object-fit: contain` (not `cover`) still letterboxes the artwork inside
 * it with no crop, and `overflow: hidden` is a no-op in the normal case
 * (contain never overflows) but a safety net if it ever does. This is the
 * same proven pattern already used by assets/css/catalog.css's identical
 * card tiles, which never exhibited this bug. */
.jost-snoj-front-grid .jost-snoj-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	padding: 9%;
	overflow: hidden;
	transition: box-shadow 250ms ease;
}

.jost-snoj-front-grid .jost-snoj-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 250ms ease;
}

.jost-snoj-front-grid .jost-snoj-card__media .jost-snoj-artwork-placeholder {
	width: 60%;
	height: 60%;
	border: 1px dashed var(--wp--preset--color--line);
}

/* Shadow lift on hover/focus is a static state change, not motion, so it
 * applies regardless of prefers-reduced-motion (only its transition speed
 * is shortened, by the global rule in assets/css/style.css). The scale
 * transform below is genuine motion and stays gated, matching the same
 * convention already used by assets/css/catalog.css. */
.jost-snoj-front-grid__link:hover .jost-snoj-card__media,
.jost-snoj-front-grid__link:focus-visible .jost-snoj-card__media {
	box-shadow: var(--wp--custom--shadow--exhibit);
}

@media (prefers-reduced-motion: no-preference) {
	.jost-snoj-front-grid__link:hover .jost-snoj-card__media img,
	.jost-snoj-front-grid__link:focus-visible .jost-snoj-card__media img {
		transform: scale(1.022);
	}
}

/* Caption row below the tile: serif title left + tabular year muted right,
 * on one line (mockup `.card-cap`/`.card-t`/`.card-y`). */
.jost-snoj-front-grid .jost-snoj-card__cap {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.8rem;
	padding: 0.85rem 0.1rem 0;
}

.jost-snoj-front-grid .jost-snoj-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.02rem;
	line-height: 1.3;
	color: var(--wp--preset--color--foreground);
	margin: 0;
	transition: color 180ms ease;
}

.jost-snoj-front-grid__link:hover .jost-snoj-card__title,
.jost-snoj-front-grid__link:focus-visible .jost-snoj-card__title {
	color: var(--wp--preset--color--accent);
}

.jost-snoj-front-grid .jost-snoj-card__year {
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Card legend — SECOND caption line ("technique · W × H cm" left,
 * availability dot + small-caps label right), rendered by the shared
 * template-parts/card-legend.php that the catalogue grid also uses.
 *
 * MIRROR of assets/css/catalog.css's `.jost-snoj-card__legend` block, which
 * is the authority — see the long comment there for the reasoning behind
 * every value (why the specs cell needs `min-width: 0` to ellipse instead of
 * overflowing, and why the label text is `muted` rather than the green,
 * which would fail 4.5:1 at this size). Scoped to `.jost-snoj-front-grid`
 * here for the same reason the caption rules above it already are: the two
 * stylesheets load on disjoint views, so neither can borrow the other's
 * rules. Change both together. */
.jost-snoj-front-grid .jost-snoj-card__legend {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 4px 0.1rem 0;
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

.jost-snoj-front-grid .jost-snoj-card__specs {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}

.jost-snoj-front-grid .jost-snoj-card__status {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 0.45rem;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

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

.jost-snoj-front-grid .jost-snoj-card__status--available::before {
	background-color: var(--wp--preset--color--available);
}

.jost-snoj-front-grid .jost-snoj-card__status--sold::before,
.jost-snoj-front-grid .jost-snoj-card__status--reserved::before,
.jost-snoj-front-grid .jost-snoj-card__status--nfs::before {
	background-color: var(--wp--preset--color--muted);
}