/* Artwork Registry — Frontend Styles */

/*
 * GUTTER ALIGNMENT
 * ----------------
 * Two variables control the left and right padding on all plugin pages
 * (Works archive, Series, single artwork), so the content edges line up
 * with the site logo and header — no matter what theme is active.
 *
 *   --ar-gutter        left edge  (aligns with the logo)
 *   --ar-gutter-right  right edge (mirrors the left by default)
 *
 * Each variable reads from the active theme automatically, in this order:
 *   1. --wp--style--root--padding-left/right  WordPress standard — set by most
 *                                             modern block themes automatically.
 *   2. --wp--custom--spacing--gap             Frost theme fallback.
 *   3. 30px                                   Last-resort default.
 *
 * What this means in practice:
 *   - Change the spacing value in Frost's Site Editor → plugin pages update too.
 *   - Switch to a different block theme → plugin picks up that theme's value.
 *   - Left and right can differ if the theme uses asymmetric padding (rare).
 *
 * To override just for this plugin without touching the theme, add this to
 * Appearance → Customize → Additional CSS (or your theme's style.css):
 *       :root { --ar-gutter: 40px; --ar-gutter-right: 40px; }
 */
:root {
	--ar-gutter:       var(--wp--style--root--padding-left,
	                   var(--wp--custom--spacing--gap, 30px));
	--ar-gutter-right: var(--wp--style--root--padding-right,
	                   var(--wp--custom--spacing--gap, 30px));
}

/* Inquiry form */
.ar-inquiry-form-wrap { max-width: 560px; }
.ar-form-row { margin-bottom: 20px; }
.ar-form-row label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; letter-spacing: .02em; }
.ar-form-row input,
.ar-form-row textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; font-size: 14px; font-family: inherit; }
.ar-form-row textarea { resize: vertical; }
.ar-form-row .required { color: #b32d2e; }
.ar-form-honeypot { display: none !important; }

.ar-btn { display: inline-block; padding: 12px 28px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border: none; }
.ar-btn-primary { background: var(--wp--preset--color--contrast, #111); color: var(--wp--preset--color--base, #fff); }
.ar-btn-primary:hover { opacity: .75; }

.ar-inquiry-messages { padding: 14px 18px; margin-bottom: 20px; font-size: 14px; }
.ar-msg-success { background: #edfaef; border-left: 4px solid #00a32a; color: #166534; }
.ar-msg-error { background: #fef2f2; border-left: 4px solid #b32d2e; color: #7f1d1d; }

/* Breadcrumb */
.ar-breadcrumb { font-size: 14px; letter-spacing: .03em; color: #888; margin-bottom: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ar-breadcrumb__link { color: inherit; text-decoration: none; }
.ar-breadcrumb__link:hover { color: var(--wp--preset--color--contrast, #111); }
.ar-breadcrumb__sep { color: #ccc; }
.ar-breadcrumb__current { color: var(--wp--preset--color--contrast, #111); }

/* CV */
.ar-cv { max-width: 800px; }
.ar-cv-header h1 { font-size: 22px; font-weight: var(--wp--custom--font-weight--medium, 500); }
.ar-cv-section { margin-bottom: 40px; }
.ar-cv-section h2 { font-size: 11px; font-weight: var(--wp--custom--font-weight--semi-bold, 600); letter-spacing: .14em; text-transform: uppercase; color: #888; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #e8e8e8; }
.ar-cv-list { list-style: none; margin: 0; padding: 0; }
.ar-cv-row { display: grid; grid-template-columns: 60px 1fr; gap: 12px; margin-bottom: 8px; }
.ar-cv-row dt { color: #888; font-size: 13px; }
.ar-cv-row dd { margin: 0; }

/* =============================================================
   Single Artwork
   ============================================================= */

#ar-artwork-single { width: 100%; }

.ar-artwork-inner { max-width: 1200px; margin: 0 auto; padding: 64px var(--ar-gutter-right) 80px var(--ar-gutter); }

/* Two-column layout: image left, info panel right (sticky) */
.ar-artwork-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; align-items: start; }
.ar-artwork-layout__image { }
.ar-artwork-layout__info { position: sticky; top: 40px; }

/* Image: natural proportions, no crop — stacked figures share consistent gap */
.ar-artwork-figure { margin: 0; }
.ar-artwork-figure + .ar-artwork-figure { margin-top: 24px; }
.ar-artwork-image { display: block; max-width: 100%; height: auto; }

/* Meta block */
.ar-artwork-meta { margin: 0 0 36px; }
.ar-artwork-meta__headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.ar-artwork-meta__title { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 22px; font-weight: var(--wp--custom--font-weight--light, 300); letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.ar-artwork-meta__year { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 22px; font-weight: var(--wp--custom--font-weight--light, 300); color: #999; letter-spacing: -.01em; }
.ar-artwork-meta p { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 13px; font-weight: var(--wp--custom--font-weight--light, 300); color: #555; letter-spacing: .01em; line-height: 1.5; margin: 0 0 2px; }
/* "Available" doubles as the inquiry form trigger — styled as plain text, underlines on hover */
.ar-artwork-meta__avail { background: none; border: none; padding: 0; font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 13px; font-weight: var(--wp--custom--font-weight--light, 300); color: var(--wp--preset--color--contrast, #111); letter-spacing: .01em; line-height: 1.5; cursor: pointer; display: block; text-align: left; margin-top: 12px; text-decoration: none; }
.ar-artwork-meta__avail:hover { text-decoration: underline; }
.ar-artwork-meta__avail[aria-expanded="true"] { text-decoration: underline; }

/* Media block — uploaded video/audio or oEmbed (YouTube/Vimeo) */
.ar-artwork-media { margin: 32px 0 0; }
.ar-artwork-media__embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.ar-artwork-media__embed iframe,
.ar-artwork-media__embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.ar-artwork-media__video { width: 100%; display: block; }
.ar-artwork-media__link,
.ar-artwork-media__file { font-size: 13px; color: #888; text-decoration: underline; word-break: break-all; }
.ar-artwork-media__link:hover,
.ar-artwork-media__file:hover { color: var(--wp--preset--color--contrast, #111); }

/* Block editor content (additional images) */
.ar-artwork-content { max-width: 760px; margin: 48px 0 0; }

/* Inquiry form — opened by clicking "Available" in the meta block */
.ar-artwork-inquiry { margin: 20px 0 0; }
.ar-inquiry-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.ar-inquiry-wrap--open { grid-template-rows: 1fr; }
.ar-inquiry-panel { overflow: hidden; }
.ar-inquiry-panel-inner { padding-bottom: 40px; }

/* Prev/next navigation on single artwork */
.ar-artwork-nav { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin: 80px 0 0; padding-top: 32px; border-top: 1px solid #e8e8e8; }
.ar-artwork-nav__prev,
.ar-artwork-nav__next { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: #888; font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 13px; letter-spacing: .02em; transition: color .2s; max-width: 45%; }
.ar-artwork-nav__prev:hover,
.ar-artwork-nav__next:hover { color: var(--wp--preset--color--contrast, #111); }
.ar-artwork-nav__next { margin-left: auto; text-align: right; flex-direction: row-reverse; }
.ar-artwork-nav__prev--empty { display: block; }
.ar-artwork-nav__arrow { font-size: 15px; flex-shrink: 0; }
.ar-artwork-nav__label { line-height: 1.3; }

@media (max-width: 768px) {
	.ar-artwork-inner { padding: 40px var(--ar-gutter-right) 60px var(--ar-gutter); }
	.ar-artwork-layout { grid-template-columns: 1fr; gap: 32px; }
	.ar-artwork-layout__info { position: static; }
	.ar-artwork-nav { flex-direction: column; gap: 20px; }
	.ar-artwork-nav__prev,
	.ar-artwork-nav__next { max-width: 100%; }
	.ar-artwork-nav__next { margin-left: 0; flex-direction: row; text-align: left; }
}

/* =============================================================
   Works Archive + Series
   Font: theme primary (var(--wp--preset--font-family--primary))
   ============================================================= */

/* Filter bar */
.ar-filter-bar { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 48px; border-bottom: 1px solid #e8e8e8; }
.ar-filter-btn { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 20px 10px; font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 11px; font-weight: var(--wp--custom--font-weight--medium, 500); letter-spacing: .1em; text-transform: uppercase; color: #888; cursor: pointer; transition: color .2s, border-color .2s; }
.ar-filter-btn:hover { color: var(--wp--preset--color--contrast, #111); }
.ar-filter-btn--active { color: var(--wp--preset--color--contrast, #111); border-bottom-color: var(--wp--preset--color--contrast, #111); }

/* Grid */
.ar-works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 48px 40px; align-items: start; margin-top: 40px; }

/* Base card */
.ar-card { transition: opacity .25s; }
.ar-card--hidden { display: none; }
.ar-card__link { display: block; text-decoration: none; color: inherit; }
.ar-card__image-wrap { overflow: hidden; background: #f5f5f5; margin-bottom: 16px; position: relative; }
.ar-card__image { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s cubic-bezier(.25,.46,.45,.94); }
.ar-card__link:hover .ar-card__image { transform: scale(1.04); }
.ar-card__title { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: var(--wp--preset--font-size--small, 18px); font-weight: var(--wp--custom--font-weight--regular, 400); letter-spacing: .01em; line-height: 1.2; margin: 0 0 5px; }
.ar-card__meta { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 12px; color: #888; letter-spacing: .03em; margin: 0; }
.ar-card__avail { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #00a32a; margin: 6px 0 0; }

/* Artwork card */
.ar-card--artwork .ar-card__image-wrap { aspect-ratio: 1 / 1; }

/* Series card — same column width as artwork cards, square image */
.ar-card--series .ar-card__image-wrap { aspect-ratio: 1 / 1; }
.ar-card__series-badge { position: absolute; top: 14px; left: 14px; font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 9px; font-weight: var(--wp--custom--font-weight--medium, 500); letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--base, #fff); background: rgba(0,0,0,.45); padding: 4px 9px; backdrop-filter: blur(4px); }

/* Breadcrumb on series page — match layout horizontal position */
#ar-series-archive > .ar-breadcrumb { max-width: 1200px; margin: 0 auto; padding: 48px var(--ar-gutter-right) 0 var(--ar-gutter); }

/* Series page — two-column layout: grid left, info right (sticky) */
.ar-series-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; align-items: start; max-width: 1200px; margin: 0 auto; padding: 32px var(--ar-gutter-right) 80px var(--ar-gutter); }
.ar-series-layout__info { position: sticky; top: 40px; }

/* Series info panel typography — matches single artwork info panel */
.ar-series-header__eyebrow { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 10px; font-weight: var(--wp--custom--font-weight--medium, 500); letter-spacing: .16em; text-transform: uppercase; color: #888; margin: 0 0 12px; }
.ar-series-header__title { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 22px; font-weight: var(--wp--custom--font-weight--light, 300); letter-spacing: -.01em; line-height: 1.2; margin: 0 0 16px; }
.ar-series-header__count { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 13px; font-weight: var(--wp--custom--font-weight--light, 300); color: #555; letter-spacing: .01em; margin: 0 0 20px; }
.ar-series-header__description { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 14px; line-height: 1.7; color: #444; margin: 0; }

/* Archive layout */
#ar-works-archive,
#ar-series-archive { width: 100%; }

.ar-archive-inner { max-width: 1200px; margin: 0 auto; padding: 64px var(--ar-gutter-right) 80px var(--ar-gutter); }

.ar-archive-title { font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: var(--wp--preset--font-size--max-36, 36px); font-weight: var(--wp--custom--font-weight--light, 300); letter-spacing: -.01em; line-height: var(--wp--custom--line-height--heading, 1.1); margin: 0 0 48px; }

/* Pagination */
.ar-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 64px; padding-top: 32px; border-top: 1px solid #e8e8e8; }
.ar-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 13px; letter-spacing: .02em; color: #888; text-decoration: none; transition: color .2s; }
.ar-pagination .page-numbers:hover { color: var(--wp--preset--color--contrast, #111); }
.ar-pagination .page-numbers.current { color: var(--wp--preset--color--contrast, #111); border-bottom: 2px solid var(--wp--preset--color--contrast, #111); }
.ar-pagination .page-numbers.dots { cursor: default; }

@media (max-width: 768px) {
	#ar-series-archive > .ar-breadcrumb { padding: 28px var(--ar-gutter-right) 0 var(--ar-gutter); }
	.ar-series-layout { grid-template-columns: 1fr; gap: 32px; }
	.ar-series-layout__info { position: static; order: -1; }
	.ar-series-header__description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
	.ar-series-header__description.is-expanded { display: block; overflow: visible; }
	.ar-series-read-more { display: inline-block; margin-top: 10px; padding: 0; background: none; border: none; cursor: pointer; font-family: var(--wp--preset--font-family--primary, sans-serif); font-size: 13px; color: #888; text-decoration: underline; text-underline-offset: 2px; }
	.ar-series-read-more:hover { color: var(--wp--preset--color--contrast, #111); }
	.ar-archive-inner { padding: 40px var(--ar-gutter-right) 60px var(--ar-gutter); }
	.ar-works-grid { grid-template-columns: 1fr; gap: 40px; }
}