/*
Theme Name:  CelerSearch Gallery
Theme URI:   https://celersearch.com
Description: CelerSearch-branded gallery theme for the art-collection demo (demo2). Renders an `artwork` custom post type as an image-forward, faceted, AI-searchable gallery. Non-WooCommerce, standalone classic theme.
Author:      CelerSearch
Author URI:  https://celersearch.com
Version:     1.0.2
License:     GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: celersearch-gallery
*/

/* --------------------------------------------------------------------------
   1. Design tokens (mirror the marketing site / celersearch-demo palette)
   -------------------------------------------------------------------------- */
:root {
	--cg-primary: #06b6d4;
	--cg-primary-deep: #0891b2;
	--cg-secondary: #3b82f6;
	--cg-gradient: linear-gradient(135deg, #06b6d4, #3b82f6);
	--cg-ink: #0f172a;
	--cg-text: #334155;
	--cg-muted: #64748b;
	--cg-base: #fafbfc;
	--cg-surface: #ffffff;
	--cg-border: #e2e8f0;
	--cg-neutral: #3d4152;
	--cg-radius: 0.75rem;
	--cg-radius-lg: 1rem;
	--cg-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	--cg-shadow-hover: 0 12px 28px rgba(6, 182, 212, 0.14);
	--cg-font: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

	/* Brand the CelerSearch View widget (its own --cs-search-* custom props). */
	--cs-search-primary: #0891b2;
	--cs-search-primary-hover: #0e7490;
	--cs-search-border: #e2e8f0;
	--cs-search-border-focus: #67e8f9;
	--cs-search-bg: #f8fafc;
	--cs-search-text: #0f172a;
	--cs-search-text-muted: #64748b;
	--cs-search-pill-bg: #ecfeff;
	--cs-search-pill-border: #a5f3fc;
	--cs-search-radius: 0.7rem;
}

/* --------------------------------------------------------------------------
   2. Base + typography
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--cg-font);
	color: var(--cg-text);
	background: var(--cg-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--cg-font);
	color: var(--cg-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

a { color: var(--cg-primary-deep); }

img { max-width: 100%; height: auto; }

.cg-container {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Subtle top glow behind the hero, like the marketing site. */
.cg-site::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 420px;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6, 182, 212, 0.08), transparent 70%);
}
.cg-site { position: relative; }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
.cg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--cg-border);
}

.cg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1.5rem;
	max-width: 1240px;
	margin: 0 auto;
}

/* Native WordPress search box (name="s") — CelerSearch attaches its live
   autocomplete dropdown to it automatically. */
.cg-search {
	position: relative;
	flex: 1 1 auto;
	max-width: 420px;
	margin: 0 auto;
}
.cg-search__icon {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.85rem;
	opacity: 0.5;
	pointer-events: none;
}
.cg-search__input {
	width: 100%;
	padding: 0.55rem 0.9rem 0.55rem 2.2rem;
	font: inherit;
	font-size: 0.9rem;
	color: var(--cg-ink);
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: 9999px;
	box-shadow: var(--cg-shadow);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.cg-search__input:focus {
	outline: none;
	border-color: var(--cg-primary);
	box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.cg-search__input::placeholder { color: var(--cg-muted); }
@media (max-width: 640px) {
	.cg-search { display: none; }
}

/* "How this was built" guide */
.cg-build {
	margin: 3rem 0 1rem;
	padding: 2rem;
	background: linear-gradient(135deg, #ecfeff, #eff6ff);
	border: 1px solid #a5f3fc;
	border-radius: var(--cg-radius-lg);
}
.cg-build__eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cg-primary-deep); }
.cg-build__title { margin: 0.4rem 0 0; font-size: 1.5rem; color: var(--cg-ink); }
.cg-build__lede { margin: 0.5rem 0 0; max-width: 62ch; color: var(--cg-text); }
.cg-build__steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.cg-build__step-link { display: flex; gap: 0.75rem; align-items: flex-start; height: 100%; padding: 0.9rem 1rem; background: var(--cg-surface); border: 1px solid var(--cg-border); border-radius: var(--cg-radius); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.cg-build__step-link:hover { border-color: var(--cg-primary); box-shadow: var(--cg-shadow-hover); transform: translateY(-1px); }
.cg-build__step-num { flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 9999px; background: var(--cg-gradient); color: #fff; font-weight: 700; font-size: 0.8rem; }
.cg-build__step-body { display: flex; flex-direction: column; gap: 0.15rem; }
.cg-build__step-title { font-weight: 600; color: var(--cg-ink); }
.cg-build__step-desc { font-size: 0.85rem; color: var(--cg-muted); }
.cg-build__cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cg-build__btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.6rem 1.1rem; border-radius: 9999px; font-weight: 600; font-size: 0.9rem; text-decoration: none; border: 1px solid var(--cg-border); color: var(--cg-ink); background: var(--cg-surface); transition: transform 0.15s, box-shadow 0.15s; }
.cg-build__btn--primary { background: var(--cg-gradient); color: #fff; border-color: transparent; }
.cg-build__btn:hover { transform: translateY(-1px); box-shadow: var(--cg-shadow-hover); }
@media (max-width: 640px) {
	.cg-build__steps { grid-template-columns: 1fr; }
	.cg-build { padding: 1.5rem; }
}

.cg-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--cg-ink);
}
.cg-brand__mark {
	background: var(--cg-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cg-brand__sep { color: var(--cg-border); font-weight: 400; }
.cg-brand__sub { color: var(--cg-muted); font-weight: 500; font-size: 0.95rem; }

.cg-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cg-primary-deep);
	background: #ecfeff;
	border: 1px solid #a5f3fc;
	border-radius: 9999px;
	padding: 0.25em 0.75em;
}

/* --------------------------------------------------------------------------
   4. Page hero + gallery wrapper
   -------------------------------------------------------------------------- */
.cg-main { padding: 2rem 0 4rem; }

.cg-hero { margin-bottom: 1.5rem; }
.cg-hero__title {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	margin: 0 0 0.5rem;
}
.cg-hero__title .cg-grad {
	background: var(--cg-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cg-hero__lede {
	font-size: 1.1rem;
	color: var(--cg-muted);
	max-width: 46rem;
	margin: 0;
}

/* --------------------------------------------------------------------------
   5. "Try the AI search" chips
   -------------------------------------------------------------------------- */
.cg-try {
	margin: 1.25rem 0 1.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(59, 130, 246, 0.05));
	border: 1px solid #a5f3fc;
	border-radius: var(--cg-radius);
}
.cg-try__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.cg-try__title { font-weight: 700; color: var(--cg-ink); }
.cg-try__desc { color: var(--cg-muted); font-size: 0.9rem; }
.cg-try__chips { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cg-try__chip {
	border: 1px solid #a5f3fc;
	background: #ecfeff;
	color: var(--cg-primary-deep);
	border-radius: 9999px;
	padding: 0.3em 0.95em;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 500;
	font-family: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cg-try__chip:hover { transform: translateY(-1px); box-shadow: var(--cg-shadow-hover); background: #fff; }

/* --------------------------------------------------------------------------
   6. Gallery grid — restyle the CelerSearch View results into image cards
   -------------------------------------------------------------------------- */
.cs-search__results {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.5rem;
}

.cg-card {
	display: flex;
	flex-direction: column;
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius);
	overflow: hidden;
	box-shadow: var(--cg-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cg-card:hover { transform: translateY(-3px); box-shadow: var(--cg-shadow-hover); }

.cg-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: #f1f5f9;
	overflow: hidden;
}
.cg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cg-card__body { padding: 0.85rem 0.95rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.cg-card__artist {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cg-primary-deep);
}
.cg-card__title {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--cg-ink);
	text-decoration: none;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cg-card__title:hover { color: var(--cg-primary-deep); }
.cg-card__meta { font-size: 0.8rem; color: var(--cg-muted); margin-top: 0.15rem; }

/* --------------------------------------------------------------------------
   7. Single artwork
   -------------------------------------------------------------------------- */
.cg-artwork { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.cg-artwork__media img { width: 100%; border-radius: var(--cg-radius); box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12); }
.cg-artwork__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.35rem; }
.cg-artwork__artist { font-size: 1.05rem; color: var(--cg-primary-deep); font-weight: 600; margin-bottom: 1.25rem; }
.cg-artwork__facts { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--cg-border); }
.cg-artwork__facts li { display: flex; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--cg-border); font-size: 0.95rem; }
.cg-artwork__facts dt, .cg-artwork__facts .k { flex: 0 0 8rem; color: var(--cg-muted); font-weight: 600; }
.cg-artwork__credit { font-size: 0.85rem; color: var(--cg-muted); font-style: italic; }
.cg-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; text-decoration: none; font-weight: 600; color: var(--cg-primary-deep); }
.cg-tax-links a {
	display: inline-block; margin: 0 0.35rem 0.35rem 0; padding: 0.2em 0.7em;
	background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 9999px;
	font-size: 0.8rem; color: var(--cg-primary-deep); text-decoration: none;
}

@media (max-width: 780px) {
	.cg-artwork { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.cg-footer {
	margin-top: 3rem;
	background: var(--cg-neutral);
	color: #cbd5e1;
	padding: 2.5rem 0 2rem;
}
.cg-footer__inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.cg-footer a { color: #67e8f9; text-decoration: none; }
.cg-footer__brand { font-weight: 700; color: #f1f5f9; }
.cg-footer__credit { font-size: 0.8rem; color: #94a3b8; max-width: 42rem; }

/* --------------------------------------------------------------------------
   9. Misc
   -------------------------------------------------------------------------- */
.cg-plain { max-width: 46rem; }