/* Shared components for the Priority-1 landing pages — each page still gets its own
   section structure (see front-page.php note), this file just holds the repeated atoms
   so five pages don't each reinvent a product card or an FAQ disclosure. */

.ccu-page-hero {
	padding-block: var(--ccu-space-24) var(--ccu-space-16);
	border-bottom: var(--ccu-border);
}
.ccu-page-hero__grid { max-width: 820px; }
.ccu-page-hero p.ccu-lede { font-size: 1.125rem; color: var(--ccu-ink-soft); }

.ccu-breadcrumb {
	font-family: var(--ccu-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ccu-steel);
	margin-bottom: var(--ccu-space-4);
}
.ccu-breadcrumb a { color: var(--ccu-steel); }

/* Product grid — used on brand hub pages once products are published */
.ccu-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ccu-space-6);
}
.ccu-product-card { padding: var(--ccu-space-6); }
.ccu-product-card img { width: 100%; height: auto; border-radius: var(--ccu-radius-sm); margin-bottom: var(--ccu-space-4); }
.ccu-product-card h3 { font-size: var(--ccu-size-h4); margin-bottom: var(--ccu-space-2); }
.ccu-product-card .ccu-spec { font-size: var(--ccu-size-small); color: var(--ccu-steel); margin: 0; }

.ccu-empty-state {
	border: 1px dashed var(--ccu-line);
	border-radius: var(--ccu-radius-md);
	padding: var(--ccu-space-12);
	text-align: center;
	color: var(--ccu-steel);
}

/* FAQ — native <details>, no JS */
.ccu-faq { max-width: var(--ccu-content-width-narrow); }
.ccu-faq details {
	border-bottom: 1px solid var(--ccu-line);
	padding-block: var(--ccu-space-4);
}
.ccu-faq summary {
	cursor: pointer;
	font-weight: 600;
	font-family: var(--ccu-font-display);
	font-size: 1.05rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ccu-faq summary::-webkit-details-marker { display: none; }
.ccu-faq summary::after {
	content: "+";
	font-family: var(--ccu-font-mono);
	color: var(--ccu-copper);
	font-size: 1.3rem;
	line-height: 1;
}
.ccu-faq details[open] summary::after { content: "\2212"; }
.ccu-faq details p { margin-top: var(--ccu-space-3); color: var(--ccu-ink-soft); }

/* Numbered step list — wholesale "how it works" */
.ccu-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ccu-space-8);
	counter-reset: ccu-step;
}
.ccu-steps > div { position: relative; padding-left: var(--ccu-space-8); }
.ccu-steps > div::before {
	counter-increment: ccu-step;
	content: counter(ccu-step);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--ccu-font-display);
	font-size: 1.5rem;
	color: var(--ccu-copper);
	border: 1px solid var(--ccu-copper);
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

/* Big numeric callout — pallet page */
.ccu-callout-number {
	font-family: var(--ccu-font-display);
	font-size: clamp(3rem, 2rem + 5vw, 6rem);
	line-height: 1;
	color: var(--ccu-copper);
	margin-bottom: var(--ccu-space-2);
}

/* Order ladder — pallet page */
.ccu-pallet-ladder {
	display: flex;
	align-items: center;
	gap: var(--ccu-space-2);
	margin-block: var(--ccu-space-8);
	flex-wrap: wrap;
}
.ccu-pallet-step {
	padding: var(--ccu-space-3) var(--ccu-space-4);
	border: var(--ccu-border);
	border-radius: var(--ccu-radius-sm);
	background: var(--ccu-white);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	white-space: nowrap;
}
.ccu-pallet-step:not(:last-child)::after {
	content: "\2192";
	margin-left: var(--ccu-space-4);
	color: var(--ccu-steel);
}
.ccu-pallet-step--target {
	background: var(--ccu-copper);
	border-color: var(--ccu-copper);
	color: var(--ccu-white);
}

/* Two-path split — where-to-buy page */
.ccu-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ccu-space-8);
}
.ccu-split > div {
	border: var(--ccu-border);
	border-radius: var(--ccu-radius-md);
	padding: var(--ccu-space-8);
	background: var(--ccu-white);
}
.ccu-split > div.ccu-split--emphasis { border-color: var(--ccu-copper); border-width: 2px; }

@media (max-width: 860px) {
	.ccu-product-grid { grid-template-columns: repeat(2, 1fr); }
	.ccu-steps { grid-template-columns: 1fr; }
	.ccu-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.ccu-product-grid { grid-template-columns: 1fr; }
}

/* Support channel buttons — contact page */
.ccu-contact-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ccu-space-3);
	margin-top: var(--ccu-space-6);
}

/* Numbered technique steps — learn page */
.ccu-ordered {
	list-style: none;
	counter-reset: ccu-ordered;
	padding: 0;
	margin: var(--ccu-space-6) 0;
}
.ccu-ordered li {
	position: relative;
	padding-left: var(--ccu-space-8);
	margin-bottom: var(--ccu-space-4);
	max-width: 62ch;
}
.ccu-ordered li::before {
	counter-increment: ccu-ordered;
	content: counter(ccu-ordered);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-family: var(--ccu-font-mono);
	font-weight: 600;
	font-size: 0.8rem;
	color: var(--ccu-copper);
	border: 1px solid var(--ccu-copper);
	width: 1.6rem;
	height: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}