/**
 * Product Content Sections — Design Language
 *
 * All below-fold AI content sections share a single editorial structure:
 *
 *   <section class="wce-section wce-section--{name}">
 *     <header class="wce-section__header">
 *       <p class="wce-section__kicker">OVERVIEW</p>
 *       <h2 class="wce-section__title">About the product</h2>
 *     </header>
 *     <div class="wce-section__body">...</div>
 *   </section>
 *
 * Rhythm:
 *   Sections flow inside an 880px constrained group with no card borders —
 *   instead, adjacent sections are separated by a 1px horizontal divider
 *   (.wce-section + .wce-section { border-top }). Editorial, not boxy.
 *
 * Palette:
 *   Kicker → chartreuse (primary), uppercase, tracked, tiny
 *   Title  → cream (foreground), Inter 700, -0.02em, 1.75rem
 *   Body   → cream, 1rem, line-height 1.65
 *   Accents (numbers, specs labels, icons, checkmarks) → chartreuse
 *
 * Inset cards (USP grid items, tips box) are the one place we use
 * surface-alt as a background — to pop out callouts within a section.
 *
 * @package WCE_Theme
 */

/* =========================================================================
   Parent wrapper — owns vertical rhythm via blockGap (pattern sets this).
   Each section has its own top-padding; first section has no top rule.
   ========================================================================= */

.wce-product-sections {
	width: 100%;
}

.wce-product-sections > * {
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

/* =========================================================================
   Section base — editorial divider pattern
   ========================================================================= */

.wce-section {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.wce-section:first-child {
	border-top: 0;
	padding-top: var(--wp--preset--spacing--40);
}

.wce-section:last-child {
	padding-bottom: var(--wp--preset--spacing--40);
}

/* Section header — kicker + title stacked in the left rail */
.wce-section__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.wce-section__kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--wce--letter-spacing-kicker, 0.14em);
	color: var(--wp--preset--color--primary);
}

.wce-section__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wp--preset--color--foreground);
}

.wce-section__body {
	color: var(--wp--preset--color--foreground);
	font-size: 1rem;
	line-height: 1.65;
}

/* Prose body — inherits theme prose. Tighten margins between paragraphs. */
.wce-section__prose > :first-child {
	margin-top: 0;
}

.wce-section__prose > :last-child {
	margin-bottom: 0;
}

.wce-section__prose p,
.wce-section__prose ul,
.wce-section__prose ol {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.wce-section__prose ul,
.wce-section__prose ol {
	padding-left: 1.25rem;
}

.wce-section__prose li + li {
	margin-top: 0.35rem;
}

.wce-section__prose strong {
	color: var(--wp--preset--color--foreground);
	font-weight: 700;
}

.wce-section__prose a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: var(--wp--custom--wce--transition-fast);
}

.wce-section__prose a:hover {
	color: var(--wp--preset--color--primary-dark);
}

/* =========================================================================
   Highlights grid — USPs
   ========================================================================= */

.wce-section__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.wce-section__grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.wce-section__grid-item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--wce--border-radius);
	transition: var(--wp--custom--wce--transition-fast);
}

.wce-section__grid-item:hover {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

.wce-section__grid-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.wce-section__grid-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--foreground-muted);
}

.wce-section__grid-value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
	line-height: 1.4;
}

/* =========================================================================
   Specs — clean definition list, 2-column label/value rows
   ========================================================================= */

.wce-section__specs {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.wce-section__specs-row {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wce-section__specs-row:first-child {
	padding-top: 0;
}

.wce-section__specs-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.wce-section__specs-label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--foreground-muted);
	align-self: center;
}

.wce-section__specs-value {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
	align-self: center;
}

/* =========================================================================
   Dimensions — inline chips
   ========================================================================= */

.wce-section__dimensions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.wce-section__dimensions li {
	display: inline-flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--wce--border-radius);
	min-width: 120px;
}

.wce-section__dimensions-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary);
}

.wce-section__dimensions-value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* =========================================================================
   Tips box (inside Care)
   ========================================================================= */

.wce-section__tips {
	margin-top: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface-alt);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--wce--border-radius-small);
}

.wce-section__tips-label {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary);
}

.wce-section__tips-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wce-section__tips-list li {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.5rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--foreground);
	line-height: 1.5;
}

.wce-section__tips-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 0.75rem;
	height: 0.375rem;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/* =========================================================================
   Badges (legacy, still used by shortcode)
   ========================================================================= */

.wce-product-badge {
	display: inline-block;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--wce--border-radius-small);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.wce-product-badge--sale {
	background: var(--wp--preset--color--urgent);
	color: var(--wp--preset--color--foreground);
}

.wce-product-badge--bestseller {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.wce-product-badge--limited {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

/* =========================================================================
   Smart related title
   ========================================================================= */

.wce-smart-related {
	margin-top: 0;
}

.wce-smart-related__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--foreground);
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 899px) {
	.wce-section {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40) 0;
	}
	.wce-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.wce-section__specs-row {
		grid-template-columns: 140px 1fr;
		gap: var(--wp--preset--spacing--20);
	}
}

@media (max-width: 599px) {
	.wce-section__grid {
		grid-template-columns: 1fr;
	}
	.wce-section__specs-row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
		padding: var(--wp--preset--spacing--20) 0;
	}
	.wce-section__specs-value {
		font-size: 1rem;
	}
	.wce-section__dimensions li {
		flex: 1 1 calc(50% - 0.5rem);
		min-width: 0;
	}
}