/**
 * Collector Ceramics — front-end component styles.
 *
 * Covers only what theme.json / core blocks / Blocklane Pro can't express:
 * the eyebrow rule, the hero "drift" texture, the announcement marquee, the
 * availability badge, the outline (contact) button, and the image hover clip.
 * Everything else is core block + preset token. Loaded front end + editor.
 */

/* ── Eyebrow — uppercase clay label; optional leading rule (hero) ───────── */
.cc-eyebrow {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .5rem;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
}
.cc-eyebrow.cc-rule::before {
	content: "";
	flex: none;
	width: 28px;
	height: 1px;
	background: var(--wp--preset--color--primary);
}
.cc-eyebrow.cc-center { justify-content: center; }

/* Smooth in-page scroll (announcement → signup); offset under sticky header. */
html { scroll-behavior: smooth; }
#signup { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ── Hero — subtle drifting texture over the cover overlay ──────────────── */
.cc-hero .wp-block-cover__background {
	background-image: repeating-linear-gradient(135deg,
		rgba(168, 155, 140, .10) 0 1px, transparent 1px 14px);
	background-size: 140% 140%;
	animation: cc-drift 22s ease-in-out infinite alternate;
}
@keyframes cc-drift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

/* ── Available badge — sage dot + label ────────────────────────────────── */
.cc-badge {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
}
.cc-badge::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* ── Piece card — clip the hover-zoom, mute the meta line ───────────────── */
.cc-media { overflow: hidden; }
.cc-media img { display: block; width: 100%; height: auto; }
.cc-meta { color: var(--wp--preset--color--muted); }

/* ── Outline button — per-piece "Contact the Artist" CTA ───────────────── */
.cc-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--primary-hover);
	border-radius: 0;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cc-outline .wp-block-button__link:hover,
.cc-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* ── Announcement — marquee strip, pauses on hover, dismissible ─────────── */
.cc-announce {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 1.25rem;
}
.cc-marquee {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	white-space: nowrap;
	color: var(--wp--preset--color--primary-hover);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	animation: cc-scroll 40s linear infinite;
	will-change: transform;
}
.cc-marquee > p { margin: 0; }
.cc-marquee > p::after {
	content: "·";
	padding: 0 2.5rem;
	color: var(--wp--preset--color--primary);
}
.cc-marquee a {
	color: inherit;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.cc-marquee a:hover { color: var(--wp--preset--color--primary); }
.cc-announce:hover .cc-marquee { animation-play-state: paused; }
@keyframes cc-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.cc-announce__close {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: .25rem .5rem;
	cursor: pointer;
	line-height: 1;
	font-size: 1.1rem;
	color: var(--wp--preset--color--muted);
}
.cc-announce__close:hover { color: var(--wp--preset--color--contrast); }

/* ── Single artwork ────────────────────────────────────────────────────── */
/* Back link */
.cc-backlink { margin: 0; font-size: var(--wp--preset--font-size--xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.cc-backlink a { color: var(--wp--preset--color--muted); text-decoration: none; }
.cc-backlink a:hover { color: var(--wp--preset--color--primary-hover); }

/* Gallery: first image = full-width 1:1 hero, next three = thumbnail row */
.cc-artwork-media .blocklane-pro-ct-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cc-artwork-media .blocklane-pro-ct-gallery__item { margin: 0; overflow: hidden; }
.cc-artwork-media .blocklane-pro-ct-gallery__item:first-child { grid-column: 1 / -1; }
.cc-artwork-media .blocklane-pro-ct-gallery__img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .6s ease; }
.cc-artwork-media .blocklane-pro-ct-gallery__item:hover .cc-artwork-media__zoom,
.cc-artwork-media .blocklane-pro-ct-gallery__item:hover .blocklane-pro-ct-gallery__img { transform: scale(1.03); }

/* Sticky detail column */
@media (min-width: 782px) {
	.cc-sticky { position: sticky; top: 96px; }
}

/* Availability badge as a taxonomy term (core/post-terms) */
.wp-block-post-terms.cc-badge { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1.5rem; color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.wp-block-post-terms.cc-badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--accent); }
.wp-block-post-terms.cc-badge a { color: inherit; text-decoration: none; }

/* Spec list (Medium / Dimensions / Year / Section) */
.cc-spec { display: grid; grid-template-columns: 110px 1fr; row-gap: .85rem; column-gap: 1rem; margin: 0 0 2rem; padding: 1.5rem 0; border-top: 1px solid var(--wp--preset--color--border); border-bottom: 1px solid var(--wp--preset--color--border); }
.cc-spec > * { margin: 0; }
.cc-dt { text-transform: uppercase; letter-spacing: .12em; font-size: var(--wp--preset--font-size--xs); font-weight: 500; color: var(--wp--preset--color--muted); }
.cc-dd, .cc-spec .wp-block-post-terms { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--contrast); }
.cc-spec .wp-block-post-terms a { color: inherit; text-decoration: none; text-transform: capitalize; }

/* Contact fine print + note pull-quote */
.cc-contact-btn { display: block; width: 100%; margin: 0 0 1rem; }
.cc-contact-btn .wp-block-button__link { display: block; width: 100%; text-align: center; }
.cc-fineprint { margin: 0; color: var(--wp--preset--color--muted); }
.cc-note { margin: 2.5rem 0 0; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 300; font-size: var(--wp--preset--font-size--lg); line-height: 1.55; color: var(--wp--preset--color--primary-hover); border-left: 2px solid var(--wp--preset--color--primary); padding: .5rem 0 .5rem 1.25rem; }

/* Provenance */
.cc-provenance p { max-width: 64ch; color: var(--wp--preset--color--primary-hover); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.cc-footer .cc-foot-h { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .12em; font-size: var(--wp--preset--font-size--xs); font-weight: 500; color: var(--wp--preset--color--muted); }
.cc-footer .cc-foot-tagline { max-width: 34ch; color: var(--wp--preset--color--muted); }
.cc-footer a { color: var(--wp--preset--color--muted); text-decoration: none; }
.cc-footer a:hover { color: var(--wp--preset--color--primary-hover); }
/* Wordmark keeps the ink colour and its site-title styling */
.cc-footer .wp-block-site-title a { color: var(--wp--preset--color--contrast); }
.cc-footer .wp-block-site-title a:hover { color: var(--wp--preset--color--primary); }
.cc-foot-fine { margin: 0; color: var(--wp--preset--color--muted); }

/* ── Availability filter (title-row control) ───────────────────────────── */
.blocklane-query-filter {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
}
.blocklane-query-filter__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
}
.blocklane-query-filter__select {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c4845a' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .15rem center;
	background-size: .65rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: .3rem 1.4rem .35rem .1rem;
	cursor: pointer;
}
.blocklane-query-filter__select:hover,
.blocklane-query-filter__select:focus {
	border-bottom-color: var(--wp--preset--color--primary);
	outline: none;
}

/* Body-of-work archive subtitle — a bound term field; collapse it when the
   term has no subtitle (the binding renders an empty <p>). */
.cc-bow-subtitle:empty { display: none; }

/* ── Reduced motion — kill the custom drift + marquee ──────────────────── */
@media (prefers-reduced-motion: reduce) {
	.cc-hero .wp-block-cover__background,
	.cc-marquee { animation: none !important; }
}